@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");



@font-face {

    font-family: "Rift-Regular";

    src: url(../fonts/Rift-Regular.otf);

}



@font-face {

    font-family: "Rift-Medium";

    src: url(../fonts/Rift-Medium.otf);

}



@font-face {

    font-family: "Rift-Light";

    src: url(../fonts/Rift-Light.otf);

}



@font-face {

    font-family: "jf-jinxuan-fresh-book";

    src: url(../fonts/JF-JINXUAN-FRESH2.2-BOOK.OTF);

}



@font-face {

    font-family: "jf-jinxuan-fresh-medium";

    src: url(../fonts/JF-JINXUAN-FRESH2.2-MEDIUM.OTF);

}



.jf-jinxuan-fresh-book {

    font-family: "jf-jinxuan-fresh-book";

}



.Rift-Regular {

    font-family: "Rift-Regular";

}



.Rift-Medium {

    font-family: "Rift-Medium";

}



.Rift-Light {

    font-family: "Rift-Light";

}



[data-aos="opacity-up"] {

    opacity: 1;

    clip-path: inset(100% 0 0% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-up"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}



[data-aos="opacity-down"] {

    opacity: 1;

    clip-path: inset(0 0 100% 0);

    /* 初始状态下完全隐藏 */

}



[data-aos="opacity-down"].aos-animate {

    opacity: 1;

    clip-path: inset(0 0 0 0);

    /* 显示全部图片 */

}





body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

    --vw-base: calc(100vw / 1920);

}



body>* {}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

    font-weight: normal;

}



a:link,

a:visited,

a:hover,

a:active {

    text-decoration: none;

}



button,

input,

textarea,

select,

option {

    margin: 0;

    padding: 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    border-radius: 0;

    -moz-appearance: none;

    appearance: none;

    outline: none;

}



ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.pic-txt {

    position: absolute;

    bottom: calc(5* var(--vw-base));

    right: calc(10* var(--vw-base));

    color: #fff;

    font-size: calc(15* var(--vw-base));

    font-family: "GenYoGothic-M";

    letter-spacing: 0.05em;

    line-height: calc(20* var(--vw-base));

    z-index: 10;

    text-shadow: #4e484698 1px 1px 1px;

}





.sw-prev {

    position: absolute;

    /* width: 1vw !important;

    height: 2vw !important;

    left: 0 !important; */

    width: 0.85vw !important;

    height: 1.7vw !important;

    left: 0.3vw !important;

    top: calc(50% - 0.85vw);

    margin: 0;

    z-index: 990 !important;

    background-image: url(../img2/arrow-l.svg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.sw-next {

    position: absolute;

    /* width: 1vw !important;

    height: 2vw !important;

    right: 0; */

    width: 0.85vw !important;

    height: 1.7vw !important;

    right: 0.3vw !important;

    top: calc(50% - 0.85vw);

    margin: 0;

    z-index: 990 !important;

    background-image: url(../img2/arrow-r.svg);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}





/*nav*/



.nav {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: calc(56*var(--vw-base));

    background-color: #B67024;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: translateY(100%);

    transition: all 0.5s ease;

    z-index: 999;

    box-shadow: #c0c0c077 0px 0px 2px 1px;

}



.nav.show {

    display: flex;

    opacity: 1;

    transform: translateY(0);

    z-index: 999;

}



.nav-item {

    position: relative;

    height: 100%;

    width: calc(341*var(--vw-base));

    display: flex;

    justify-content: center;

    align-items: center;

    gap: calc(5*var(--vw-base));

    color: #fff;

    font-size: calc(25*var(--vw-base));

    letter-spacing: 0.075em;

    transition: background-color 0.4s ease;

}



.nav-item:hover {}



.nav-item:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 0;

    width: 1px;

    height: 60%;

    background-color: #fff;

}



.nav-txt {

    font-family: "KozGoPr6N-R";

    letter-spacing: 0.075em;

    transition: all 0.3s ease;

}



.nav-icon {

    position: relative;

    width: calc(20*var(--vw-base));

    height: calc(20*var(--vw-base));

    background-color: #fff;

    mask-size: contain;

    -webkit-mask-size: contain;

    mask-repeat: no-repeat;

    -webkit-mask-repeat: no-repeat;

    mask-position: center;

    -webkit-mask-position: center;

    transition: all 0.3s ease;

    padding-right: 0.5vw;

}



.nav-pen {

    mask-image: url(../img2/nav-pen.svg);

    -webkit-mask-image: url(../img2/nav-pen.svg);

}



.nav-phone {

    mask-image: url(../img2/nav-phone.svg);

    -webkit-mask-image: url(../img2/nav-phone.svg);

}



.nav-fb {

    mask-image: url(../img2/nav-fb.svg);

    -webkit-mask-image: url(../img2/nav-fb.svg);

}



.nav-msg {

    mask-image: url(../img2/nav-msg.svg);

    -webkit-mask-image: url(../img2/nav-msg.svg);

}



.nav-map {

    mask-image: url(../img2/nav-map.svg);

    -webkit-mask-image: url(../img2/nav-map.svg);

}



.nav-item:hover {

    color: #ff8600;

}



.nav-item:hover .nav-icon {

    background-color: #ff8600;

}



.nav-icon img {

    object-fit: contain;

}



.swiper-slide .sw-pic {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 100%;

    height: 100%;

    z-index: 1;

    transform: translate(-50%, -50%);



}



.swiper-slide .sw-pic img {

    transform: scale(1.1);

    transition: transform 5s ease-in-out;

}



.swiper.is-inview .swiper-slide-active .sw-pic img {

    transform: scale(1);

}



/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}



.container h3 {

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(32*var(--vw-base));

    line-height: calc(60*var(--vw-base));

    letter-spacing: 0.3em;

    color: #B67024;

}



.container h4 {

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(20*var(--vw-base));

    line-height: calc(43*var(--vw-base));

    letter-spacing: 0em;

    color: #433F3F;

}



.fs23 {

    font-size: calc(23*var(--vw-base));

}



.fs27 {

    font-size: calc(27*var(--vw-base));

}



.fs30 {

    font-size: calc(30*var(--vw-base));

}



.fs32 {

    font-size: calc(32*var(--vw-base));

}





.fs35 {

    font-size: calc(35*var(--vw-base));

}



.fs37 {

    font-size: calc(37*var(--vw-base));

}



.m1 {

    position: relative;

    top: calc(0*var(--vw-base));

    width: 100%;

    height: calc(1080*var(--vw-base));

    overflow: clip;

    background-color: #E9EEFB;

    overflow: hidden;

}



.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-contain {

    position: absolute;

    top: calc(356*var(--vw-base));

    left: calc(313*var(--vw-base));

    width: calc(653*var(--vw-base));

}



.m1-contain .txt1 {

    display: flex;

    justify-content: space-between;

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(51.82*var(--vw-base));

    line-height: 1.1em;

    letter-spacing: 0.37em;

    color: #00A43D;

    margin: 0 -0.4em 0 0;

}



.m1-contain .txt2 {

    display: flex;

    justify-content: space-between;

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(30.87*var(--vw-base));

    line-height: 1.1em;

    letter-spacing: 0.645em;

    color: #040000;

    margin: calc(30*var(--vw-base)) -0.6em 0 0;

}



.m1-contain .txt3 {

    font-family: "Rift-Regular";

    font-size: calc(28*var(--vw-base));

    line-height: 1.1em;

    letter-spacing: 0.8em;

    text-align-last: justify;

    text-justify: inter-ideograph;

    color: #B67024;

    margin: calc(30*var(--vw-base)) -0.6em 0 0;

}



.m1-contain .txt4 {

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(25*var(--vw-base));

    line-height: calc(50*var(--vw-base));

    letter-spacing: 0em;

    color: #433F3F;

    text-align-last: justify;

    margin: calc(20*var(--vw-base)) 0em 0 0;

}



.m2 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));



}



.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m2 .contain {

    position: absolute;

    left: calc(348*var(--vw-base));

    top: calc(374*var(--vw-base));

    width: calc(480*var(--vw-base));

}



.m2 .contain h4 {

    margin-top: calc(40*var(--vw-base));

    width: calc(330*var(--vw-base));

    text-align: justify;

}



.m2-swiper-box {

    position: absolute;

    left: calc(733*var(--vw-base));

    top: calc(313*var(--vw-base));

    /* width: calc(700*var(--vw-base)); */

    height: calc(450*var(--vw-base));

    display: flex;

    gap: calc(20*var(--vw-base));

}



.m2-aisle {

    position: relative;

    width: calc(330*var(--vw-base));

    height: 100%;

}



.m2-swiper {

    position: relative;

    width: calc(500*var(--vw-base));

    height: 100%;

}



.m3 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    overflow: hidden;

}



.m3-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m3-bg .site {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m3-bg .site.logo {

    position: absolute;

    left: calc(945*var(--vw-base));

    top: calc(525*var(--vw-base));

    width: calc(77*var(--vw-base));

    height: calc(65*var(--vw-base));

}



.m3-bg .site.logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    animation: site-float 3s cubic-bezier(0.37, 0, 0.63, 1) infinite;

}



@keyframes site-float {

    0% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-1vw);

    }



    100% {

        transform: translateY(0);

    }

}



.m3 .contain {

    position: absolute;

    left: 50%;

    top: calc(144*var(--vw-base));

    width: calc(684*var(--vw-base));

    transform: translateX(-50%);

}



.m3 .contain .txt1 {

    width: 100%;

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(31*var(--vw-base));

    line-height: calc(47*var(--vw-base));

    letter-spacing: 0em;

    color: #F5F2EA;

    text-align-last: justify;

    text-justify: inter-ideograph;



}



.m3 .contain .txt2 {

    margin-top: calc(66*var(--vw-base));

    width: 100%;

    font-family: "jf-jinxuan-fresh-book";

    font-size: calc(20*var(--vw-base));

    line-height: calc(40*var(--vw-base));

    letter-spacing: 0.0em;

    color: #F5F2EA;

    text-align: justify;

}





.m3 .contain .dot {

    margin-left: calc(-8*var(--vw-base));

}





.m4 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

}



.m4-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m4 .contain {

    position: absolute;

    left: calc(1169*var(--vw-base));

    top: calc(374*var(--vw-base));

    width: calc(480*var(--vw-base));

}



.m4 .contain h4 {

    margin-top: calc(76*var(--vw-base));

}



.m4-swiper {

    position: absolute;

    left: calc(382*var(--vw-base));

    top: calc(313*var(--vw-base));

    width: calc(700*var(--vw-base));

    height: calc(450*var(--vw-base));

}



.m4 .contain .dot {

    margin-left: calc(-8*var(--vw-base));

}



.m5 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m5 .contain {

    position: relative;

    margin-top: calc(236*var(--vw-base));

    width: calc(1013*var(--vw-base));

}



.m5 .contain h3 {}



.m5 .contain h4 {

    margin-top: calc(68*var(--vw-base));

    text-align: justify;

}



.m5 .contain .m5-swiper-box {

    margin-top: calc(43*var(--vw-base));

    width: 100%;

    display: flex;

    justify-content: space-between;



}



.m5 .contain .swiper {

    width: calc(500*var(--vw-base));

    height: calc(350*var(--vw-base));

    background-color: #B67024;

}



.m6 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

}



.m6-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m6 .contain {

    position: absolute;

    left: calc(1169*var(--vw-base));

    top: calc(374*var(--vw-base));

    width: calc(480*var(--vw-base));

}



.m6 .contain h4 {

    margin-top: calc(66*var(--vw-base));

    width: calc(326*var(--vw-base));

    text-align: justify;

    line-height: calc(40*var(--vw-base));

}



.m6-pic-box {

    position: absolute;

    left: calc(382*var(--vw-base));

    top: calc(230*var(--vw-base));

    width: calc(740*var(--vw-base));

    height: calc(610*var(--vw-base));

}



.m6-man1 {

    position: absolute;

    left: calc(0*var(--vw-base));

    top: calc(0*var(--vw-base));

    width: calc(365*var(--vw-base));

    height: calc(300*var(--vw-base));

}



.m6-man2 {

    position: absolute;

    right: calc(0*var(--vw-base));

    top: calc(0*var(--vw-base));

    width: calc(365*var(--vw-base));

    height: calc(300*var(--vw-base));

}



.m6-man3 {

    position: absolute;

    left: calc(0*var(--vw-base));

    bottom: calc(0*var(--vw-base));

    width: calc(240*var(--vw-base));

    height: calc(300*var(--vw-base));

}



.m6-man4 {

    position: absolute;

    left: calc(250*var(--vw-base));

    bottom: calc(0*var(--vw-base));

    width: calc(240*var(--vw-base));

    height: calc(300*var(--vw-base));

}



.m6-man5 {

    position: absolute;

    right: calc(0*var(--vw-base));

    bottom: calc(0*var(--vw-base));

    width: calc(240*var(--vw-base));

    height: calc(300*var(--vw-base));

}





.m7 {

    position: relative;

    width: 100%;

    height: calc(1080*var(--vw-base));

    background-color: #fff;

}



.m7 .contain {

    position: absolute;

    left: calc(1169*var(--vw-base));

    top: calc(374*var(--vw-base));

    width: calc(480*var(--vw-base));

}



.m7 .contain h4 {

    margin-top: calc(50*var(--vw-base));

}



.m7 .contain .dot {

    margin-left: calc(-8*var(--vw-base));

}



.m7-swiper {

    position: absolute;

    left: calc(382*var(--vw-base));

    top: calc(313*var(--vw-base));

    width: calc(700*var(--vw-base));

    height: calc(450*var(--vw-base));

}



.m8 {

    position: relative;

    width: 100%;

    height: calc(1796*var(--vw-base));

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    padding: calc(196*var(--vw-base)) 0 0 calc(357*var(--vw-base));

    background-color: #D6E1F6;

    overflow: hidden;

}



.m8 .m8-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m8 .m8-map {

    position: relative;

    width: calc(1200*var(--vw-base));

    height: calc(450*var(--vw-base));



}



.m8-map iframe {

    width: 100%;

    height: 100%;

}



.m8-contain {

    position: relative;

    margin-top: calc(62*var(--vw-base));

    display: flex;

    align-items: center;

    gap: calc(95*var(--vw-base));

}



.m8-contain .logo {

    position: relative;

    width: calc(280*var(--vw-base));

    height: calc(144*var(--vw-base));

}



.m8-contain .logo img {

    object-fit: contain;

}



.m8-contain .info {

    position: relative;

    display: flex;

    flex-direction: column;

}



.m8-contain .info .txt1 {

    color: #44403F;

    font-size: calc(30*var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

}



.m8-contain .info .gree-word {

    position: relative;

    display: inline-block;

    font-size: calc(25*var(--vw-base));

    color: #00A43D;

}





.m8-contain .info .gree-line {

    position: relative;

    display: inline-block;

    font-size: calc(25*var(--vw-base));

    color: #00A43D;

    font-family: "Noto Sans TC";

    font-weight: 200;

}



.m8-contain .info .txt2 {

    position: relative;

    margin-top: calc(15*var(--vw-base));

    color: #44403F;

    font-size: calc(24*var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    line-height: calc(27*var(--vw-base));

    letter-spacing: 0.02em;

    display: flex;

    align-items: end;

    gap: calc(20*var(--vw-base));

}



.m8-contain .info .txt2 .address-btn {

    position: absolute;

    right: 0;

    top: 0;

    width: calc(580*var(--vw-base));

    height: calc(35*var(--vw-base));

    /* background-color: #44403F; */

}



.m8-contain .info .txt3 {

    position: relative;

    margin-top: calc(27*var(--vw-base));

    color: #44403F;

    font-size: calc(20*var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    line-height: calc(32*var(--vw-base));

    letter-spacing: 0em;

}





/* === 基本設定 === */

.form {

    position: relative;

    margin: calc(150*var(--vw-base)) 0 0 calc(250*var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    display: flex;

    flex-direction: column;

    align-items: center;

    width: fit-content;

}



.form-title {

    color: #B67024;

    font-size: calc(24 * var(--vw-base));

    margin-bottom: calc(30 * var(--vw-base));

    /* font-weight: bold; */

    align-self: center;

}



/* === Grid 容器 === */

.input-box {

    display: flex;

    flex-direction: column;

    gap: calc(20 * var(--vw-base));

}



/* === 共用 input 區塊 === */

.input {

    position: relative;

    width: calc(700 * var(--vw-base));

    height: calc(46 * var(--vw-base));

    border: 1px solid #B67024;

    display: flex;

    align-items: center;

    padding: 0 calc(16 * var(--vw-base));

    box-sizing: border-box;

    background: transparent;

}



.input>label {

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    white-space: nowrap;

    margin-right: calc(8 * var(--vw-base));

}



.input>input[type="text"],

.input>input[type="date"] {

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    height: 100%;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    color: #4C4948;

}



.input>input[type="text"]::placeholder,

.input>input[type="date"]::placeholder {

    color: #4C4948;

    opacity: 0.6;

}



.input>input[type="date"] {

    /* 從隱藏原生樣式除外，確保原生日期選擇器顯示 */

    -webkit-appearance: auto;

    -moz-appearance: auto;

    appearance: auto;

    margin-right: -0.2vw;

}



/* === 子欄位（性別 / 預約人數）絕對定位靠右 === */

.has-sub .sub-field {

    position: absolute;

    right: calc(16 * var(--vw-base));

    top: 50%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    gap: calc(12 * var(--vw-base));

    background: inherit;

}



.has-sub .sub-field.gender {

    gap: calc(36 * var(--vw-base));

}



.sub-field .sub-label {

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    white-space: nowrap;

}



.sub-field .sub-input {

    width: calc(80 * var(--vw-base));

    border: none;

    outline: none;

    background: transparent;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    color: #4C4948;

    /* border-bottom: 1px solid #B67024; */

}



/* 性別 radio 改成自訂方框（與勾選 svg 一致風格） */

.gender .radio-label {

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    font-size: calc(20 * var(--vw-base));

    color: #4C4948;

    font-family: "jf-jinxuan-fresh-book";

}



.gender .radio-label input[type="radio"] {

    display: none;

}



.gender .radio-box {

    display: inline-block;

    width: calc(15 * var(--vw-base));

    height: calc(15 * var(--vw-base));

    margin-right: calc(6 * var(--vw-base));

    background-image: url("../img2/check.svg");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}



.gender .radio-label input[type="radio"]:checked+.radio-box {

    background-image: url("../img2/checked.svg");

}



/* === Select 樣式 === */

.select-input {

    position: relative;

}



.select-input select {

    flex: 1;

    height: 100%;

    border: none;

    outline: none;

    background: transparent;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    color: #4C4948;



    /* 隱藏原生樣式 */

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;



    /* 自訂下拉圖示 */

    background-image: url("../img2/select.svg");

    background-size: calc(18*var(--vw-base));

    background-repeat: no-repeat;

    background-position: right calc(0 * var(--vw-base)) center;

    padding-right: calc(0 * var(--vw-base));

    cursor: pointer;

}



/* 移除 IE 預設箭頭 */

.select-input select::-ms-expand {

    display: none;

}



/* option 樣式 */

.select-input select option {

    background-color: #D3E3FA;

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

}



/* === 我同意 勾選區 === */

.check-item {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: calc(4 * var(--vw-base));

    margin-top: calc(60 * var(--vw-base));

}



.check-label {

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    font-size: calc(20 * var(--vw-base));

    color: #4C4948;

    font-family: "jf-jinxuan-fresh-book";

}



.check-label input[type="checkbox"] {

    display: none;

}



.check-box {

    display: inline-block;

    width: calc(15 * var(--vw-base));

    height: calc(15 * var(--vw-base));

    margin-right: calc(6 * var(--vw-base));

    background-image: url("../img2/check.svg");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}



.check-label input[type="checkbox"]:checked+.check-box {

    background-image: url("../img2/checked.svg");

}



.check-item-txt {

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

}



.agreeBtn {

    position: relative;

}



.agreeBtn .openTxtBtn {

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    line-height: calc(24*var(--vw-base));

    cursor: pointer;

    text-decoration: none;

    font-family: "jf-jinxuan-fresh-book";

    display: inline-block;

}



.agreeBtn ::before {



    content: "";

    position: absolute;

    bottom: 0px;

    left: 0;

    width: 100%;

    height: 1px;

    background-color: #555555;

    opacity: 0.5;

}



/* === 送出按鈕 === */

.form-btn {

    display: flex;

    justify-content: center;

    margin-top: calc(25 * var(--vw-base));

}



.form-btn input[type="button"] {

    width: calc(572 * var(--vw-base));

    height: calc(46 * var(--vw-base));

    background-color: #B67024;

    border: 1px solid #B67024;

    color: #fff;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    cursor: pointer;

    letter-spacing: calc(4 * var(--vw-base));

}



.form-btn input[type="button"]:hover {

    opacity: 0.9;

}



/* === 底部說明文字 === */

.form-note {

    text-align: center;

    font-size: calc(14 * var(--vw-base));

    color: #4C4948;

    margin-top: calc(12 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

}



/* === 覆蓋瀏覽器自動填入的白色/黃色底 === */

.input input:-webkit-autofill,

.input input:-webkit-autofill:hover,

.input input:-webkit-autofill:focus,

.input input:-webkit-autofill:active {

    /* 用一個夠大的 inset shadow 覆蓋 autofill 背景 */

    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;

    box-shadow: 0 0 0 1000px transparent inset !important;



    /* 文字顏色也要重設，否則會變成瀏覽器預設色 */

    -webkit-text-fill-color: #4C4948 !important;



    /* 字型同步 */

    font-family: "jf-jinxuan-fresh-book" !important;



    /* 緩和顏色過渡（避免閃一下） */

    transition: background-color 5000s ease-in-out 0s;

}





/* 隱藏數字輸入框的預設上下箭頭 */

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



input[type=number] {

    -moz-appearance: textfield;

}



.input #txtReasonOther {

    display: none;

    position: absolute;

    left: calc(170 * var(--vw-base));

    top: 0.35vw;

    width: calc(200*var(--vw-base));

    height: calc(30 * var(--vw-base));

    border: none;

    border-bottom: 1px solid #000;

    background: transparent;

    outline: none;

    z-index: 10;

    font-size: calc(20 * var(--vw-base));

    font-family: 'jf-jinxuan-fresh-book';

    color: #4C4948;



}



.input .txtPinOther-box {

    display: none;

    position: absolute;

    left: calc(170 * var(--vw-base));

    top: 0.35vw;

    /* width: calc(100*var(--vw-base)); */

    height: calc(30 * var(--vw-base));

    /* border: none;

    border-bottom: 1px solid #000;

    background: transparent; */

    outline: none;

    z-index: 10;

    font-size: calc(20 * var(--vw-base));

    font-family: 'jf-jinxuan-fresh-book';

    color: #4C4948;

}



.input .txtPinOther-box input {

    width: calc(100*var(--vw-base));

    height: calc(30 * var(--vw-base));

    border: none;

    border-bottom: 1px solid #000;

    background: transparent;

    outline: none;

    z-index: 10;

    font-size: calc(20 * var(--vw-base));

    font-family: 'jf-jinxuan-fresh-book';

    color: #4C4948;

}



















/* === 購屋主因 === */

.input.reason-input {

    height: auto;

    border: none;

    align-items: flex-start;

    flex-direction: column;

    padding: 0;

}



.reason-input .reason-title {

    color: #4C4948;

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    margin-bottom: calc(16 * var(--vw-base));

}



.reason-group {

    display: flex;

    flex-wrap: wrap;

    gap: calc(5 * var(--vw-base));

    padding-left: calc(24 * var(--vw-base));

}



.reason-radio-label {

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    font-size: calc(20 * var(--vw-base));

    color: #4C4948;

    font-family: "jf-jinxuan-fresh-book";

}



.reason-radio-label input[type="radio"] {

    display: none;

}



.reason-radio-box {

    display: inline-block;

    width: calc(15 * var(--vw-base));

    height: calc(15 * var(--vw-base));

    margin-right: calc(12 * var(--vw-base));

    background-image: url("../img2/check.svg");

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

}



.reason-radio-label input[type="radio"]:checked+.reason-radio-box {

    background-image: url("../img2/checked.svg");

}



.other-input {

    border: none;

    border-bottom: 1px solid #4C4948;

    background: transparent;

    outline: none;

    width: calc(150 * var(--vw-base));

    margin-left: calc(10 * var(--vw-base));

    font-size: calc(20 * var(--vw-base));

    font-family: "jf-jinxuan-fresh-book";

    color: #4C4948;

}























.black {

    display: none;

    width: 100%;

    height: 100%;

    position: fixed;

    left: 0px;

    top: 0px;

    background-color: rgba(0, 0, 0, 0.9);

    z-index: 11111;

    font-family: "KozGoPr6N-R";

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

    cursor: pointer;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 70%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

    font-size: 1vw;

    padding-inline-start: 2vw;

}



.infoWrap ul>li>ul {

    list-style: none;

    font-size: 1vw;

    padding-inline-start: 1vw;

}



.li1::before {

    content: "一、";

    position: absolute;

    left: 0vw;

}



.li2::before {

    content: "二、";

    position: absolute;

    left: 0vw;

}



.li3::before {

    content: "三、";

    position: absolute;

    left: 0vw;

}



.li4::before {

    content: "四、";

    position: absolute;

    left: 0vw;

}



.li5::before {

    content: "五、";

    position: absolute;

    left: 0vw;

}



.li1-li::before {

    content: "（１）";

    position: absolute;

    left: 0vw;

}



.li2-li::before {

    content: "（２）";

    position: absolute;

    left: 0vw;

}



.li3-li::before {

    content: "（３）";

    position: absolute;

    left: 0vw;

}



.li4-li::before {

    content: "（４）";

    position: absolute;

    left: 0vw;

}



.infoBox {

    width: 100%;

    height: calc(100% - 10vw);

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 25px;

    text-align: center;

}



.infoBox h4 {

    font-size: 1vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox h5 {

    font-size: 1.2vw;

    line-height: 180%;

    margin-bottom: 1vw;

}



.infoBox p {

    font-size: 1vw;

    line-height: 180%;

}