@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: "Futura Std Medium";

    src: url(../fonts/Futura\ Std\ Medium.otf);

}



@font-face {

    font-family: "Futura Std Heavy";

    src: url(../fonts/Futura\ Std\ Heavy.otf);

    background-color: #a5a5a5a1;

}



@font-face {

    font-family: "Futura Std Light";

    src: url(../fonts/Futura\ Std\ Light.otf);

}



@font-face {

    font-family: "GenKiGothi-L";

    src: url(../fonts/GenKiGothic2TW-L.otf);

}



@font-face {

    font-family: "DFHeiStd-W7";

    src: url(../fonts/DFHeiStd-W7.otf);

}



@font-face {

    font-family: "DFHeiStd-W5";

    src: url(../fonts/DFHeiStd-W5.otf);

}





@font-face {

    font-family: "DFHeiStd-W3";

    src: url(../fonts/DFHeiStd-W3.otf);

}



@font-face {

    font-family: "FZLTZHB";

    src: url(../fonts/FZLTZHB.TTF);

}



@font-face {

    font-family: "KoHo-Light";

    src: url(../fonts/KoHo-Light.ttf);

}



@font-face {

    font-family: "KoHo-Regular";

    src: url(../fonts/KoHo-Regular.ttf);

}



.Futura-Std-Medium {

    font-family: "Futura Std Medium";

    font-weight: normal;

}



.Futura-Std-Heavy {

    font-family: "Futura Std Heavy";

    font-weight: normal;

}



[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);

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



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

    opacity: 1;

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

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

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



.opacity {

    animation: opacity 2s ease 0s forwards;



}



@keyframes opacity-left {



    from {

        opacity: 0;

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

    }



    to {

        opacity: 1;

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

    }

}



.opacity-left {

    animation: opacity-left 2s ease 0s forwards;

    animation-delay: 1s;

}



:root {}



body,

html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

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

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0;

    padding: 0;

}



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(15* var(--vw-base));

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

    color: #fff;

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

    font-family: "FZLTZHB";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 10;

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

}



.h1 {

    font-family: "GenKiGothi-L";

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

}



.h2 {

    font-family: "FZLTZHB";

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

}



.sw-prev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

    cursor: pointer;

    background-image: url(../img/sw-prev.svg);

    background-size: contain;

    background-repeat: no-repeat;

}





.sw-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

    cursor: pointer;

    background-image: url(../img/sw-next.svg);

    background-size: contain;

    background-repeat: no-repeat;

}



.container {

    width: 100%;

    height: auto;

    position: relative;

    opacity: 0;

}



.desktop {

    opacity: 1;

}



.main1 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.main1-bg {

    position: absolute;

    width: 100%;

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

    top: 0;

    left: 0;

    animation: main1-bg 2s ease 0.2s forwards;

    filter: brightness(0.3);

}



@keyframes main1-bg {

    from {

        filter: brightness(0.3);

    }



    to {    

        filter: brightness(1);

    }

}





.m1-contain {

    position: relative;

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

    display: inline-flex;

    flex-direction: column;

}



.main1 .txt1 {

    position: relative;

    width: 100%;

    display: flex;

    align-items: end;

    justify-content: space-between;

}



.m1-logo {

    position: relative;

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

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

}



.m1-logo>div {

    position: absolute;

    opacity: 0;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

}



.m1-logo img {

    object-fit: contain;

}



.main1 .l1 {

    transform: translateY(5.5vw) ;

    animation: opacity1 1s ease 0.2s forwards, l1move 1s ease-in-out 1s forwards;

}



.main1 .l2 {

    transform: translateY(5.5vw);

    animation: opacity1 1s ease 0.35s forwards, l1move 1s ease-in-out 1s forwards;

}



.main1 .l3 {

    transform: translateX(11vw);

    animation: opacity1 1s ease 0.5s forwards, l1move 1.4s ease-in-out 1.4s forwards;

}



.main1 .l4 {

    transform: translateX(11vw);

    animation: opacity1 1s ease 0.65s forwards, l1move 1.4s ease-in-out 1.4s forwards;

}



@keyframes opacity1 {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes l1move {



    100% {



        transform: translateX(0%) scale(1);

    }

}





.m1-contain h1 {

    position: relative;

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

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

    font-family: "DFHeiStd-W5";

    font-weight: lighter;

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

    color: #fff;   

    letter-spacing: 0.3em;

    text-align: end;

    opacity: 0;



}



.main1 h1 {

    /* transform: translateX(10vw) scale(2.3);

    animation: zoom-big 1.4s ease-in-out 0.6s forwards, zoom-move 1.4s ease-in-out 1.9s forwards;

    transform-origin:left bottom; */

}



@keyframes zoom-big {

    0% {

        opacity: 0;

        color: #ffffff23;   

        transform: translateX(10vw) scale(2.3);

    }



    100% {

        opacity: 1;

        transform: translateX(10vw) scale(2);

        color: #fff;

    }

}



@keyframes zoom-move {

 0%{

    transform: translateX(10vw) scale(2);

 }

 100%{

    transform: translateX(0%) scale(1);

 }   

}



.m1-contain h2 {

    position: relative;

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

    font-family: "KoHo-Light";

    font-weight: lighter;

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

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

    color: #dee8da62;

    letter-spacing: 0em;

}



.m1-contain h3 {

    position: relative;

    width: 100%;

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

    font-family: "FZLTZHB";

    font-weight: lighter;

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

    color: #fff;

    letter-spacing: 0.058em;



}



.yellow-bird {

    color: #f7ee81;

}



.main2 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.main2-bg {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

}



.main2-logo {

    position: absolute;

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

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

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

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

}



[data-aos="logo-jump"] {

    opacity: 0;

}



[data-aos="logo-jump"].aos-animate {

    opacity: 1;

    animation: logofloat 2s ease 0.5s infinite;

}



@keyframes logofloat {

    0% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px);

    }



    100% {

        transform: translateY(0);

    }

}



.main2-logo img {

    object-position: top left;

    object-fit: contain;

}



.m2-txt1 {

    position: relative;

    padding-top: calc(103*var(--vw-base));

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

    display: flex;

    align-items: end;

}



.main2 h1 {

    color: #fff;

    font-family: "GenKiGothi-L";

    font-weight: lighter;

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

    letter-spacing: 0.075em;

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

}



.main2 h2 {

    position: relative;

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

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

    color: #c9ab8b;

    font-family: "KoHo-Light";

    font-weight: lighter;

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

    letter-spacing: 0.4em;

}



.main2 h2 span{

    opacity: 0;

}



.main2 h2 span {

    /* display: inline-block;

    animation:opacity-span 1s ease-in-out forwards, jump 4s ease-in-out infinite; */

}



[data-aos="main2-h2"] {



}



[data-aos="main2-h2"].aos-animate span {

    display: inline-block;

    animation:opacity-span 1s ease-in-out forwards, jump 2s ease-in-out 0.2s forwards;

}



@keyframes opacity-span {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}



@keyframes jump {

    0% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px) scale(0.9);

    }

    100% {

        transform: translateY(0);

    }

}









.main2 span:nth-child(1) {

    animation-delay: 0s;

}



.main2 span:nth-child(2) {

    animation-delay: 0.1s;

}



.main2 span:nth-child(3) {

    animation-delay: 0.2s;

}



.main2 span:nth-child(4) {

    animation-delay: 0.3s;

}



.main2 span:nth-child(5) {

    animation-delay: 0.4s;

}



.main2 span:nth-child(6) {

    animation-delay: 0.5s;

}



.main2 span:nth-child(7) {

    animation-delay: 0.6s;

}



.main2 span:nth-child(8) {

    animation-delay: 0.7s;

}



.main2 span:nth-child(9) {

    animation-delay: 0.8s;

}



.main2 span:nth-child(10) {

    animation-delay: 0.9s;

}



.main2 span:nth-child(11) {

    animation-delay: 1.0s;

}



.main2 span:nth-child(12) {

    animation-delay: 1.1s;

}



.main2 span:nth-child(13) {

    animation-delay: 1.2s;

}



.main2 span:nth-child(14) {

    animation-delay: 1.3s;

}



.main2 span:nth-child(15) {

    animation-delay: 1.4s;

}





.main2 span:nth-child(16) {

    animation-delay: 1.5s;

}





.main2 h3 {

    position: absolute;

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

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

    color: #ffffff;

    font-family: "DFHeiStd-W5";

    font-weight: lighter;

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

    letter-spacing: 0em;

}



.m2-light1 {

    position: absolute;

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

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

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

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

}



.m2-light2 {

    position: absolute;

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

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

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

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

}



.m2-light1 img,

.m2-light2 img {

    object-fit: contain;

}



.contain {

    position: relative;

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

}



.contain .en {

    color: #c9ab8b;

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

    font-family: "KoHo-Regular";

    /*font-weight: lighter;*/

    letter-spacing: 0.4em;

    transition: transform 0.3s ease-in-out;

    object-position: center bottom;

}





.contain h1 {

    position: relative;

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

    color: #231815;

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

    font-weight: lighter;

    font-family: "GenKiGothi-L";

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

    letter-spacing: 0.075em;



}



.contain h2 {

    position: relative;

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

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

    color: #231815;

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

    text-align: justify;

    font-family: "FZLTZHB";

    font-weight: lighter;

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

    letter-spacing: 0.053em;

}



.swiper {

    position: relative;

    margin: 0 !important;

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

}



.sw-pic {

    overflow: hidden;

}



.sw-pic img {

    /* transform: scale(1.2); */

    transition: transform 7s linear;

}



.main3,

.main5 {

    position: relative;

    background-color: #fff;

    width: 100%;

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

    overflow: hidden;

    display: flex;

    justify-content: end;

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

}



.main4,

.main6 {

    position: relative;

    background-color: #fff;

    width: 100%;

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

    overflow: hidden;

    display: flex;

    flex-direction: row-reverse;

    justify-content: start;

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

}



.main5 h1,

.main6 h1 {

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

}



.main6-h1 {

    text-align-last: justify;

    text-align: justify;



}



.main7 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    display: flex;

    justify-content: center;

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

}



.main7-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.main7-tree1 {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



.main7-tree1.show{

    transform-origin:center top;

    animation: tree-t 6s ease 0.5s infinite;

}



@keyframes tree-t {



    0%,

    50%,

    100% {

        transform: skew(0deg) scaleY(1);

    }



    25% {

        transform: skew(-5deg, 0deg) scaleY(1);

    }



    75%{

        transform: skew(1.5deg, 0deg) scaleY(0.995);

    }



}



.main7-tree2 {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

}



.main7-tree2.show{

    transform-origin:center bottom;

    animation: tree-b 6s ease 0.5s infinite;

}



@keyframes tree-b {



    0%,

    50%,

    100% {

        transform: skew(0deg) scaleY(1);

    }



    25% {

        transform: skew(-2deg, 0deg) scaleY(1);

    }



    75%{

        transform: skew(1deg, 0deg) scaleY(0.995);

    }



}





.main7-contain {

    position: relative;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.main7 h1 {

    position: relative;

    color: #231815;

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

    font-family: "FZLTZHB";

    font-weight: lighter;

    letter-spacing: 0.05em;

}



.main7-line1 {

    position: relative;

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

    display: block;

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

    height: 1px;

    background-color: #231815;

}



.main7 h2 {

    position: relative;

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

    color: #231815;

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

    font-family: "FZLTZHB";

    font-weight: lighter;

    letter-spacing: 0.05em;

}



.main7-phone {

    position: relative;

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

    display: flex;

    align-items: center;

    justify-content: center;

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

}



.main7-phone img {

    object-fit: contain;

}



.blue-ball {

    position: relative;

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

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

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

}



.phone-txt {

    position: relative;

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

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

}



.main7-num {

    position: relative;

    color: #231815;

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

    font-family: "Futura Std Heavy";

}



.m7-line2 {

    position: relative;

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

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

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

}



.main7-loc {

    position: relative;

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

    display: flex;

    align-items: center;

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

}





.main7-loc .m1 {

    position: relative;

    color: #231815;

    font-family: "DFHeiStd-W7";

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

    letter-spacing: 0.075em;

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

}



.main7-loc .m2 {

    position: relative;

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

    color: #231815;

    font-family: "FZLTZHB";

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

    letter-spacing: 0.1em;

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

}



.main7-map {

    position: relative;

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

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

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

}

.main7-map img.be {

    position: relative;

    

}

.main7-map img.af {

    position: absolute;

    left: 0;

    top: 0;

    animation: map-shine 1s ease 0.5s infinite;

}



@keyframes map-shine {



    0%,

    100% {

        opacity: 0;

    }



    50% {

        opacity: 1;

    }





}















.main7-map .map-m1 {

    position: absolute;

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

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

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

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

}



.main7-map .map-m2 {

    position: absolute;

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

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

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

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

}



.main8 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

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

    margin-top: -1px;

    box-sizing: border-box;

    padding-bottom: calc(56*var(--vw-base));

}



.main8-contain {

    position: relative;

    /* margin: calc(308*var(--vw-base)) 0 0 calc(0*var(--vw-base)); */

    display: flex;

    flex-direction: column;

    font-family: "FZLTZHB";

    color: #231815;

}



.main8-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.main8-tree {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}



.main8-tree.show{

    transform-origin:center top;

    animation: tree-8 6s ease 0.5s infinite;

}



@keyframes tree-8 {



    0%,

    50%,

    100% {

        transform: skew(0deg) scaleY(1);

    }



    25% {

        transform: skew(1.5deg, 0deg) scaleY(1.005);

    }



    75%{

        transform: skew(-1.5deg, 0deg) scaleY(0.995);

    }



}





.main8-water {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}



.del li {

    color: #231815;

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

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

    letter-spacing: 0.1em;

}



.form {

    position: relative;

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

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

    display: flex;

    flex-direction: column;

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

    align-items: center;

    font-family: "FZLTZHB";

    /* font-weight: 400; */

}



.form-title {

    position: relative;

    color: #bc9671;

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

    letter-spacing: 0.075em;

    font-family: "DFHeiStd-W7";

}



.input {

    position: relative;

    width: 100%;

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

    display: flex;

    align-items: center;

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

    box-sizing: border-box;

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

    background-color: #bc9671;

    color: #ffffff;

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

    letter-spacing: 0.075em;

}



.input-text {

    align-items: center;

}



.space-word {

    color: transparent;

    pointer-events: none;

    user-select: none;

}



.input label {

    position: relative;

    flex-shrink: 0;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #ffffff;

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

    /*淡淡的白*/

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

    /*透明*/

}



.input input[type="text"],

.input input[type="tel"],

.input input[type="email"] {

    position: relative;

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

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

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

    font-family: "FZLTZHB";

    font-weight: lighter;

    letter-spacing: 0.1em;

    border: none;

    background-color: transparent;

    color: #ffffff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

}



.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

    cursor: pointer;

}



.check-item-sex label {

    cursor: pointer;

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

    text-align: end;



}



.check-item-sex label input[type="radio"] {

    position: relative;

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

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

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

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

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-image: url(../img/check.png);

    background-size: contain;

    background-position: 0 0;

    background-repeat: no-repeat;

    cursor: pointer;

}



.check-item-sex label input:checked {

    background-image: url(../img/checked.png);

}





select {

    position: relative;

    color: #ffffff;

    flex: 1;

    background-color: transparent;

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    outline: none;

    border: none;

    cursor: pointer;

    background-image: url(../img/select_trangle.svg);

    background-position-x: 92%;

    background-position-y: 62%;

    background-repeat: no-repeat;

    background-size: 2.5%;

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

    font-family: "FZLTZHB";

    font-weight: lighter;

}



select option {

    background-color: #bc9671;

    position: relative;

    width: inherit;

    font-size: inherit;

    /* 继承 select 的字体大小 */

    color: inherit;

    font-family: "FZLTZHB";

    font-weight: lighter;

}



.check-item {

    position: relative;

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

    display: flex;

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

    color: #000000;

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

    letter-spacing: 0.075em;

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item-txt {

    display: inline-block;

    cursor: pointer;

}



.check-item label input {

    position: relative;

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

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

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

    margin: 0% 0% -2% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #231815;

    -webkit-mask-image: url(../img/check.png);

    /* 使用 -webkit-mask-image */

    mask-image: url(../img/check.png);

    /* 正確語法 */

    -webkit-mask-repeat: no-repeat;

    /* 設置不重複 */

    mask-repeat: no-repeat;

    -webkit-mask-position: top center;

    /* 設置位置 */

    mask-position: top center;

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

    /* 設置大小 */

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

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

    mask-image: url(../img/checked.png);



}



.openTxtBtn {

    font-family: "DFHeiStd-W7";

    border-bottom: #000000 solid 1px;

}



.submitbtn {

    position: relative;

    width: 100%;

    font-family: "FZLTZHB";

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

    color: #ffffff;

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

    letter-spacing: 0.075em;

    appearance: none;

    /* 移除預設樣式 */

    -webkit-appearance: none;

    /* 對 Safari 特別設定 */

    border-radius: 0;

    /* 將圓角設為 0 */

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

    border: none;

    background-color: transparent;

    background-color: #bc9671;

    cursor: pointer;

    transition: all 0.4s ease;

}



.submitbtn:hover {

    background-color: #ffffff;

    color: #bc9671;

}



.verify {

    position: absolute;

    top: 0;

    right: 0;

    height: 100%;

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

    background-color: #827367;

    box-sizing: border-box;

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

    cursor: pointer;

}



.verify img {

    object-fit: contain;

}



.nav {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

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

    background-color: #bc9671;

    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(19*var(--vw-base));

    letter-spacing: 0.075em;

    transition: background-color 0.4s ease;

}



.nav-item:hover {

    /* background-color: #82736754; */

}



.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: "FZLTZHB";

    letter-spacing: 0.075em;

    transition: all 0.3s ease;

}



.nav-icon {

    position: relative;

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

    height: calc(28*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;

}



.nav-pen {

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

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

}



.nav-phone {

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

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

}



.nav-fb {

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

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

}



.nav-msg {

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

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

}



.nav-map {

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

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

}



.nav-item:hover {

    color: #ffffffb9;

}



.nav-item:hover .nav-icon {

    background-color: #ffffffb9;

}



.nav-icon img {

    object-fit: contain;

}





























































/*同意書照片預覽*/



.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: "Noto Sans TC";

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

    cursor: pointer;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 65%;

    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% - 20vw);

    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%;

}