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

}



@font-face {

    font-family: "Futura Std Light";

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

}

@font-face {

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

    src: url(../fonts/jf-jinxuan-medium.otf);

}

@font-face {

    font-family: "Anavio";

    src: url(../fonts/Anavio W01 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-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;

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

    display: flex;

    flex-direction: column;

    background-image: url(../img/bg1.jpg);

    background-size: cover;

    background-repeat: repeat-y;

}



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: 9vw;

    right: 38vw;

    color: #fff;

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

    font-family: "Noto Sans TC", serif;

    letter-spacing: 0.1em;

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

    z-index: 10;

}



.sw-prev {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    cursor: pointer;

}





.sw-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    cursor: pointer;

}

.sw-prev-g {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    cursor: pointer;

}





.sw-next-g {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

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

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

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

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    cursor: pointer;

}

.sw-next img,

.sw-prev img {

    object-fit: contain;

}



.container {

    width: 100%;

    height: auto;

    position: relative;

}





.main1 {

    margin: 0 auto;

    position: relative;

    width: 100%;

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

    display: block;

    text-align: center;

}

.main1-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}

.main1-flower {

    position: absolute;

    left: 29vw;

    top: 4vw;

    width: 40vw;

    mix-blend-mode: multiply;

    animation: bg1_flower 1.5s ease 1s forwards;

    transform: scale(0.5);

    opacity: 0;

}

@keyframes bg1_flower {

    0% {

        opacity: 0;

        transform: scale(0.5);

    }

    100% {

        opacity: 1;

        transform: scale(1);

    }

}

.main1-logo {

    margin: 0 auto;

    position: relative;

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

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

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

}

.main1-logo>div {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

}

 .main1 .l1 {

    animation: l1anima 2.5s ease 1s forwards;

    animation-delay: 8s;

}

 .main1 .l2 {

    animation: l2anima 2.5s ease 1s forwards;

    animation-delay: 8s;

}

@keyframes l1anima {

    0% {

        opacity: 0;

        transform: translateY(-10vw);

    }

    100% {

        opacity: 1;

        transform: translateY(0vw);

    }

} 

@keyframes l2anima {

    0% {

        opacity: 0;

        transform: translateY(10vw);

    }

    100% {

        opacity: 1;

        transform: translateY(0vw);

    }

} 





.main1-logo img {

    width: 100%;

    object-fit: contain;

}

.main1-flower img {

    width: 100%;

    object-fit: contain;

}

.main1 h2 {

    position: relative;

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

    color: #fff;

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

    font-weight: lighter;

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

    letter-spacing: 0.05em;

    line-height: 5vw;

    animation: h2-ani 1s ease 1s forwards;

    animation-delay: 10s;

    opacity: 0;

}

@keyframes h2-ani {

    0% {

        opacity: 0;

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

    }

    100% {

        opacity: 1;

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

    }

} 



.main1-arr {

    position: absolute;

    left: 48.9vw;

    bottom: 3vw;

    width: 2.2vw;

    animation: bg1-arrow 1.4s ease 1s infinite;

    animation-delay: 3s;



}

.main1-arr img {

    width: 100%;

    object-fit: contain;

}

@keyframes bg1-arrow {

    0% {

        bottom: 3vw;

    }

    50% {

        bottom: 4vw;

    }

    100% {

        bottom: 3vw;

    }

} 



video{

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    object-fit: cover;

    border: none;

    font-size: 0;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;



}



.swiper {

    width: 100%;

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

}

.sw-pic img {

    /* transform: scale(1.2); */

    transition: transform 5s linear;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.swiper.main9{

    width: 100vw;

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

    position: absolute;

    right: 0;

    top:0;

}

.swiper.main7{

    width: 100vw;

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

    position: absolute;

    left: 0;

    top:0;

}

.swiper.main9 .sw-pic{

    width: 50.5vw;

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

    position: absolute;

    right: 0;

    top:0;

    overflow: hidden;

}

.swiper.main9 img {

    transform: scale(1.2); 

    transition: transform 5s linear;

}





.sw-pic-no  {

    width: 100%;

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

}



.sw-pic-no img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.chg-pic {

    overflow: hidden;

}



.chg-pic img {

    transform: scale(1.2);

    transition: transform 5s linear;

}



.active-bg {

    opacity: 1;

    transform: scale(1) !important;

}



.main4 .main4-pic{

    width: 45.3vw;

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

    position: absolute;

    right: 4.8vw;

    top: 5.5vw;

    overflow: hidden;

}







/*02*/

.main2{

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}

.cent {

    width: 31vw;

    position: absolute;

    left: 13vw;

    top:15vw;



}

.cent h1 {

    position: relative;

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

    color: #fff;

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

    text-align: center;

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

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

    letter-spacing: 0.05em;

    font-weight: 600;

}

.cent h1 img{

    width: 6vw;

    height: 6vw;

    position: absolute;

    left: 6vw;

    top: -1.5vw;

    object-fit: contain;

}

.cent h2 {

    position: relative;

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

    color: #fff;

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

    text-align: center;

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

    font-weight: 400;

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

    letter-spacing: 0.05em;

}

.cent h3 {

    position: relative;

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

    color: #fff;

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

    text-align: justify;

    font-family: "Noto Sans TC", serif;

    font-weight: normal;

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

    letter-spacing: 0.01em;

}









/*03*/

.main3 {

    position: relative;

    width: 100%;

    overflow: hidden;

}

.main3>img {

    width: 100%;

    object-fit: cover;

}

.main3-bg {

    position: relative;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    display: flex;

    flex-direction: column;

    align-items: start;

}

.main3 .bg-contain {

    position: relative;

    width: 100%;

}

.main3 .bg-area {

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

}

.main3 .bg-tg {

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

}

.main3 .bg-logo {

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

}

.main3 .bg-logo-shine {

    position: absolute;

    width: 100%;

    left: 0;

    top: 0;

    opacity: 0;

    animation: m3-light 2s ease 0.5s infinite;

    animation-delay: 5s;

}

@keyframes m3-light {

    0% {

        opacity: 0%;

    }

    50% {

        opacity: 100%;

    }

    100% {

        opacity: 0%;

    }

}

.main3 .cent{

    width: 80vw;

    position: absolute;

    left: 10vw;

    top: 5vw;

    text-align: center;

}

.main3 .cent h1 {

    letter-spacing: 0.05em;

}

.main3 .cent h3 {

    margin-top: 1vw;

    text-align: center;

}





/*04*/

.main4 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}

.main-bg{

    position: relative;

    width: 100%;

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

}

.main-bg img{

    width: 100%;

    object-fit: cover;

}

.main4 .cent {

    top: 10vw;

    left: 10vw;

}

.main4 .cent h1 {

    color: #009e96;

    letter-spacing: 0.05em;

}

.main4 .cent h3 {

    color: #333333;

    margin-top: 1vw;

}

.main4 .pic-txt {

    position: absolute;

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

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

    color: #fff;

}

.main4-mrt{

    width: 31vw;

    position: absolute;

    left: 10vw;

    top: 28vw;

}

.main4-mrt img {

    width: 100%;

    object-fit: cover;

}

.main4 .pic-txt {

    position: absolute;

    bottom: 9vw;

    right: 44.6vw;

    left: auto;

}





/*05*/

.main5 , .main6{

    width: 100%;

    position: relative;

}

.main5 .pic-txt.top , .main6 .pic-txt.top {

    position: absolute;

    bottom: 8.5vw;

    right: auto;

    left: 8.5vw;

}

.main5 .pic-txt.bottom ,.main6 .pic-txt.bottom {

    position: absolute;

    bottom: 8.5vw;

    right: auto;

    left: 50.8vw;

}

.main5 .cent ,.main6 .cent {

    width: 83vw;

    position: absolute;

    left: 8vw;

    top: 5vw;

    z-index: 1;

}

.main5 .cent h1 ,.main6 .cent h1 {

    text-align: left;

}

.main5 .cent h3 ,.main6 .cent h3 {

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

}



/*07*/

.main7{

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

}

.main7 .cent {

    width: 35vw;

    position: absolute;

    left: 9vw;

    top: 15vw;



}

.main7 .cent h1 {

    position: relative;

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

    color: #009e96;

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

    text-align: left;

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

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

    letter-spacing: 0.01em;

    font-weight: 600;

    z-index: 1;

}

.main7 .sw-cent{

    width: 31vw;

    position: absolute;

    left: 9vw;

    top: 19vw;



}

.main7 .sw-cent.right{

    width: 31vw;

    position: absolute;

    right: 12.5vw;

    left: auto;

    top:19vw;

}

.main7 .sw-cent .sw-sign{

    width: 13vw;

    position: absolute;

    left: 43vw;

    top: -2.7vw;

}

.main7 .sw-cent .sw-title{

    width: 30vw;

    position: absolute;

    left: 43vw;

    top: -5vw;

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

    color: #333333;

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

    text-align: justify;

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

    font-weight: normal;

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

    letter-spacing: 0em;

}

.main7 .sw-cent h3 {

    position: relative;

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

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

    color: #333333;

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

    text-align: justify;

    font-family: "Noto Sans TC", serif;

    font-weight: normal;

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

    letter-spacing: 0em;

}

.main7 .sw-cent h4 {

    position: relative;

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

    color: #333333;

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

    text-align: justify;

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

    font-weight: 500;

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

    letter-spacing: 0em;

}

.main7 .sw-cent h5 {

    position: relative;

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

    color: #333333;

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

    text-align: justify;

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

    font-weight: normal;

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

    letter-spacing: 0em;

}







/*08*/

.main8 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}

.main8 .main8-pic{

    width: 50.5vw;

    position: absolute;

    right: 0;

    top: 0;

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

    overflow: hidden;

}

.main8 .cent {

    top: 15vw;

    left: 9vw;

}

.main8 .cent h1 {

    letter-spacing: 0.05em;

}

.main8 .cent h3 {

    margin-top: 1.5vw;

}

.main8 .pic-txt {

    position: absolute;

    bottom: 1vw;

    left: 50vw;

    color: #fff;

    width: 30vw;

}





/*09*/

.main9{

    width: 100%;

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

    overflow: hidden;

    position: relative;

}

.main9 .pic-txt.bottom {

    position: absolute;

    bottom: 1vw;

    left: 50vw;

    color: #fff;

}

.main9 .cent {

    width: 31vw;

    position: absolute;

    top: 18vw;

   /*top: 20vw;*/

    left: 9vw;

    z-index: 1;

   /* opacity: 0;*/

}

.main9 .cent h1 {

    color: #009e96;

}

.main9 .cent h3 {

    color: #333333;

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

}

/*

.swiper-slide-active .cent.main9{

    animation: txt9-fadein 0.5s ease;

    animation-fill-mode: forwards;

    animation-delay: 0.5s;

    opacity: 0;

}



@keyframes txt9-fadein {

    0% {

        top: 20vw;

        opacity: 0;



    }

    100% {

        top: 18vw;

        opacity: 1;

    

}

*/



/*10*/

.main10{

    width: 100%;

    position: relative;

    background-image: url(../img/bg1.jpg);

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    overflow: hidden;

}

.main10 .main10-left{

    width: 40vw;

    float: left;

    padding-left: 8vw;

}

.main10 .main10-right{

    float: right;

    padding-right: 10vw;

}



.main10 .main10-logo{

    width: 9vw;

    position: relative;

    margin: 0 auto;

    padding: 11vw 0 4vw 0;

}

.main10 .main10-logo img {

    width: 100%;

    object-fit: cover;

}

.main10 .main10-info{

    width: 28vw;

    position: relative;

    margin: 0 auto;

    padding: 0;

}

.main10 .main10-info .hide{

    width: 100%;

    position: absolute;

    left: 0;

    top: 0;

}

.main10 .main10-info .fake_btn_tel{

    width: 100%;

    height: 10vw;

    position: absolute;

    bottom: 0;

    left: 0;

    /*background-color: rgba(0, 0, 255, 0.5);*/

}

.main10 .main10-info img {

    width: 100%;

    object-fit: contain;

}



.form-title {

    position: relative;

    color: #005261;

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

    letter-spacing: 0.075em;

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

    margin-top: 7vw;

    text-align: center;

    margin: 8vw auto 1vw auto;

}

.form {

    position: relative;

    width: 36vw;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 2vw 3vw 0 3vw;

    display: flex;

    flex-direction: column;

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

    font-family: "Noto Sans TC", serif;

    font-weight: 500;

    color: #005261;

    background-color: rgba(255, 255, 255, 0.7);

    margin-bottom: 20vw;

}

.input {

    position: relative;

    width: 100%;

    display: flex;

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

    box-sizing: border-box;

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

    background-color: transparent;

    color: #005261;

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

    letter-spacing: 0.075em;

    border-bottom: 1px solid #005261;

}



.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: #005261;

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

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

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

    letter-spacing: 0.1em;

    border: none;

    background-color: transparent;

    color: #005261;

    font-weight: lighter;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-weight: 500;

}

.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



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

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

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

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

}



.check-item-sex label input:checked {

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

}

select {

    width: 23vw;

    position: absolute;

    left: 7vw;

    top: 1.5vw;

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

    background-position-y: 40%;

    background-repeat: no-repeat;

    background-size: 5%;

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

    color: #005261;

    font-weight: 500;

    /* padding-top: 0.1vw;*/

}



select option {

    background-color: #00928a;

    position: relative;

    width: 100%;

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

    color: #fff;

    font-weight: 500;

}



.check-item {

    position: relative;

    margin: 0.2vw 0 2vw 0;

    display: flex;

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

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

    letter-spacing: 0.075em;

    text-align: left;

}

.check-label {

    white-space: nowrap;

    cursor: pointer;

}

.check-item label input {

    position: relative;

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

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

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

    margin: 0% 5% -2% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #005261;

    -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 {

    border-bottom: #005261 solid 1px;

    position: absolute;

    left: 5.2vw;

    top: 0.1vw;

    cursor: pointer;

}

.submitbtn {

    position: absolute;

    width: 100%;

    bottom: -5vw;

    left: 0;

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

    color: #ffffff;

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

    letter-spacing: 0.1em;

    appearance: none;

    /* 移除預設樣式 */

    -webkit-appearance: none;

    /* 對 Safari 特別設定 */

    border-radius: 0;

    /* 將圓角設為 0 */

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

    border: none;

    background-color: transparent;

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

    /*mix-blend-mode: multiply;*/

    cursor: pointer;



}

.fake_bg{

    position: absolute;

    width: 100%;

    bottom: -5vw;

    left: 0;

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

    background-color: #079a92;

    mix-blend-mode: multiply;

    pointer-events: none;





}



.case_info{

    width: 28vw;

    position: absolute;

    right: 14vw;

    bottom: 10vw;

}





.nav {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

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

    background-color: #fff;

    display: flex;

    opacity: 0;

    transform: translateY(100%);

    transition: all 0.5s ease;

    z-index: 999;

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

}

.show {

    display: flex;

    opacity: 1;

    transform: translateY(0);

    z-index: 999;

}

.nav .nav-logo{

    width: 9vw;

    position: absolute;

    bottom: 0.7vw;

    left: 2vw;

}

.nav-btn{

    width: 60vw;

    position: absolute;

    right: 0;

    bottom: 0;

    text-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items:center;

    justify-content:center;

    color: #231815;

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

    letter-spacing: 0.075em;

    transition: all 0.3s ease;

}

.nav-item {

    width: 33.33%;

    position: relative;

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

    height: 100%;

    text-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items:center;

    justify-content:center;

    color: #231815;

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

    letter-spacing: 0.075em;

    transition: all 0.3s ease;

}



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

    content: "";

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: 0;

    width: 1px;

    height: 60%;

    background-color: #7d7d7d;

    opacity: 0.5;

}







.nav-icon {

    position: relative;

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

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

    margin-right: 0.2vw;

    background-color: #231815;

    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-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: "jf-jinxuan-medium";

}



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

    letter-spacing: 0.05vw;

}



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

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

    margin-bottom: 25px;

    text-align: center;

    letter-spacing: 0.05vw;

}



.infoBox h4 {

    font-size: 1vw;

    line-height: 200%;

    margin-bottom: 1vw;

    letter-spacing: 0.05vw;

}



.infoBox h5 {

    font-size: 1.2vw;

    line-height: 200%;

    margin-bottom: 1vw;

    letter-spacing: 0.05vw;

}



.infoBox p {

    font-size: 1vw;

    line-height: 200%;

    letter-spacing: 0.05vw;

}



.spinner {

    /* width: 5vw;

    height: 5vw;

    position: absolute;

    left: 47.5%;

    top: 47.5%;

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

    background-color: #353535;

    border-radius: 100%;

    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;

    animation: sk-scaleout 1.0s infinite ease-in-out; */

}



@-webkit-keyframes sk-scaleout {

    0% {

        -webkit-transform: scale(0)

    }

    100% {

        -webkit-transform: scale(1.0);

        opacity: 0;

    }

}