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

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');



@font-face {

    font-family: "Futura-Std-Medium-Oblique";

    src: url(../fonts/FuturaStdMediumOblique.otf);

}



@font-face {

    font-family: "Futura-Std-Book";

    src: url(../fonts/Futura-Std-Book.otf);

}



@font-face {

    font-family: "Futura-Std-Light";

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

}



@font-face {

    font-family: "Futura-Std-Medium";

    src: url(../fonts/Futura-Std-Medium.OTF);

}



@font-face {

    font-family: "TrajanPro-Regular";

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

}



.Futura-Std-Book {

    font-family: "Futura-Std-Book";

}



.Futura-Std-Light {

    font-family: "Futura-Std-Light";

}



.Futura-Std-Medium {

    font-family: "Futura-Std-Medium";

}



.Futura-Std-Medium-oblique {

    font-family: "Futura-Std-Medium-Oblique";

}



body,

html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

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

    scroll-behavior: smooth;

    display: flex;

    flex-direction: column;

}



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;

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    object-position: top center;

}





.header {

    width: 100%;

    height: 3.5vw;

    line-height: 3.5vw;

    background-color: #363636;

    position: fixed;

    left: 0;

    bottom: 0;

    z-index: 999;

    transform: translateY(0);

    transition: all 0.6s ease;

    opacity: 0;

}



.show {

    display: flex;

    opacity: 1;

    transform: translateY(0);

    z-index: 999;

}



.header.show {

    opacity: 1;

    transform: translateY(0);

}



.header-logo {

    width: 7vw;

    position: absolute;

    left: 4vw;

    top: 50%;

    transform: translateY(-50%);

}



.menu-icon {

    width: 40vw;

    height: 100%;

    position: absolute;

    /* right: -0.5vw; */

    right: 0;

    top: 50%;

    transform: translateY(-50%);

}



.menu-icon-li {

    width: 33.33333%;

    height: 100%;

    float: left;

    display: block;

    box-sizing: border-box;

    position: relative;

    cursor: pointer;

}



.menu-icon-li::after {

    content: "";

    width: 1px;

    height: 1.7vw;

    background-color: #fff;

    right: 1.1vw;

    top: 0.95vw;

    position: absolute;

}



.menu-icon-li:last-child:after {

    background-color: transparent;

}



.menu-icon-li img {

    width: 100%;

    display: block;

    height: auto;

}



.fb {

    /*padding: 2.3% 19% 0 3.5%;*/

    padding: 3% 25.4% 0% 5.5%;

}



.book {

    padding: 3% 25% 0 5.5%;

}



.phone {

    padding: 2.3% 18.3% 0 4%;

}



.locate {

    padding: 3% 25% 0 6.4%;

}



.locate::after {

    background-color: none;

}



.menu-txt {

    font-family: "Futura-Std-Book";

    color: #fff;

    font-size: 0.95vw;

    font-weight: 400;

    letter-spacing: 0.1vw;

    margin: 0;

    position: absolute;

    left: 5.5vw;

    top: 50%;

    transform: translateY(-50%);

    text-align: center;

    text-transform: uppercase;

}



.fb .menu-txt {

    left: 4vw;

}



.book .menu-txt {

    left: 4vw;

}



.phone .menu-txt {

    left: 4vw;

}



.locate .menu-txt {

    left: 4vw;

}







.chg-pic {

    overflow: hidden;

}



.chg-pic img {

    /*filter: brightness(0.7);*/

    transform: scale(1.15);

    transition: all 6s liner;

}



.active-bg {

    opacity: 1;

    transform: scale(1) !important;

    /*filter: brightness(1) !important;*/

}



.opacity {

    opacity: 0;

    transition: all 0.3s linear;

}



.opacity1 {

    opacity: 1;

    transition: all 0.3s linear;

}







.container {

    width: 100%;

    height: auto;

    position: relative;

    background-color: #000;

}









.t1 {

    position: relative;

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

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

    letter-spacing: 0.1vw;

    font-weight: 500;

    margin: 0;

    text-align: center;

    font-family: "Noto Sans TC";

    color: #3e3a39;

}



.t3 {

    position: relative;

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

    letter-spacing: 0.05vw;

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

    font-weight: 400;

    text-align: center;

    font-family: "Noto Sans TC";

    padding: 0;

    margin: 2vw 0 0 0;

    color: #3e3a39;

}



.t3 .nott {

    font-family: "Noto Sans JP";

    font-weight: 400;

}



.t1.whit {

    color: #fff;

}



.t2.whit {

    color: #fff;

}



.t3.whit {

    color: #fff;

}



.pic-txt {

    position: absolute;

    right: 1vw;

    bottom: 1vw;

    font-family: "Noto Sans TC";

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

    letter-spacing: 0.01vw;

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

    font-weight: 400;

    color: #fff;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

    z-index: 9;

}



.pic-txt.left {

    position: absolute;

    left: 1vw;

    right: auto;

    bottom: 1vw;

}







.swiper .sw-pic {

    position: relative;

    overflow: hidden;

}



.swiper .sw-pic img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.15);

    transition: transform 6s ease-out, opacity 1s ease-out;

    opacity: 0.25;

    will-change: transform, opacity;

}



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

    transform: scale(1);

    opacity: 1;

}



.swiper-pagination {

    position: absolute;

    bottom: 1vw !important;

    right: auto;

    top: auto;

}



/* === 懶載入淡入 === */

img.lozad {

    opacity: 0;

    transition: opacity 1s ease-out;

}



img.lozad.lozad--loaded {

    opacity: 1;

}





.swiper-pagination-bullet {

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

    display: inline-block;

    background-repeat: no-repeat;

    background-size: contain;

    width: 1vw;

    height: 1vw;

    margin-left: 0.5vw !important;

    margin-right: 0.5vw !important;

    opacity: 1;

    border: none;

    background-color: transparent;

    border-radius: 0;

}



.swiper-pagination-bullet-active {

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

    background-color: transparent;

}









/*第1頁*/

.m1 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

    z-index: 1;

}



.m1-bg img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}



.active-big {

    opacity: 1;

    transform: scale(1) !important;

}



.m1-txt {

    width: 100%;

    height: 100%;

    position: relative;

    z-index: 10;

}



.m1-txt img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    left: 0;

    top: 0;

}











/*第2頁*/

.m2 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

    margin-top: -1px;

}



.m-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

    z-index: 1;

}



.m2-pic {

    position: absolute;

    right: 0;

    top: 0;

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

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

    z-index: 2;

}



.m2-pic img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}



.m2-txt {

    width: 38vw;

    position: absolute;

    left: 0;

    top: 18vw;

    z-index: 10;

}









/*第3頁*/

.m3 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m3-bg {

    position: absolute;

    left: 0;

    top: 0;

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

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

    z-index: 1;

}



.m3-logo,

.m3-tg {

    position: absolute;

    left: 0;

    top: 0;

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

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

    z-index: 10;

}



.m3-logo {

    position: absolute;

    left: 0;

    top: 0;

    animation: m3logo 1s infinite alternate;

    transition-timing-function: linear;

    animation-delay: 1.5s;

}



@keyframes m3logo {

    0% {

        top: 0;

    }



    50% {

        top: -1%;

    }



    100% {

        top: 0;

    }

}



.m3-bg img {

    width: 100%;

    object-fit: contain;

    position: absolute;

    left: 0;

    top: 0;

}



.m3-txt {

    width: 38vw;

    position: absolute;

    right: 0;

    top: 14vw;

    z-index: 10;

}



.m3-txt .t3 {

    letter-spacing: 0;

}



.fakeline {

    font-size: 4vw;

    font-weight: 300;

    line-height: 4vw;

    position: absolute;

    right: 11vw;

    top: -0.87vw;

    color: #3e3a39;

    font-family: "Noto Sans TC";

}





/*第4頁*/

.m4 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m4-swiper {

    position: absolute;

    right: 0;

    top: 0;

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

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

}



.m4-txt {

    width: 38vw;

    position: absolute;

    left: 0;

    top: 14vw;

    z-index: 10;

}











/*第5頁/第6頁/第7頁*/

.m5,

.m6,

.m7 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m5-bg,

.m7-bg {

    position: absolute;

    left: 0;

    top: 0;

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

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

    z-index: 1;

}



.m6-bg {

    position: absolute;

    right: 0;

    top: 0;

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

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

    z-index: 1;

}



.m5-bg img,

.m6-bg img,

.m7-bg img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}



.m5-txt,

.m7-txt {

    width: 38vw;

    position: absolute;

    right: 0;

    top: 16vw;

    z-index: 10;

}



.m6-txt {

    width: 38vw;

    position: absolute;

    left: 0;

    top: 14vw;

    z-index: 10;

}







/*第8頁*/

.m8,

.m82 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m8-bg {

    position: absolute;

    right: 0;

    top: 0;

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

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

    z-index: 1;

}



.m81-bg {

    position: absolute;

    left: 0;

    top: 0;

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

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

    z-index: 1;

}



.m82-bg {

    position: absolute;

    right: 0;

    top: 0;

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

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

    z-index: 1;

}



.m8-txt {

    width: 38vw;

    position: absolute;

    left: 0;

    top: 17vw;

    z-index: 10;

}



.m8-bg img,

.m81-bg img,

.m82-bg img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}





/*第9頁*/

.m9 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m9-bg {

    position: absolute;

    right: 0;

    top: 0;

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

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

    z-index: 1;

}



.m9-txt {

    width: 38vw;

    position: absolute;

    left: 0;

    top: 16vw;

    z-index: 10;

}



.m9-bg img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}









/*第10頁*/

.m10,

.m102 {

    width: 100%;

    position: relative;

    overflow: hidden;

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

}



.m10-bg {

    position: absolute;

    left: 0;

    top: 0;

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

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

    z-index: 1;

}



.m102-bg {

    position: absolute;

    right: 0;

    top: 0;

    width: 100%;

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

    z-index: 1;

}



.m10-txt {

    width: 38vw;

    position: absolute;

    right: 0;

    top: 14vw;

    z-index: 10;

}



.m10-bg img,

.m102-bg img {

    transform: scale(1.13);

    transition: all 3s ease-in-out;

}







/*第11頁*/

.m11 {

    width: 100%;

    position: relative;

    overflow: hidden;

    /* height: calc(9700*var(--vw-base)); */

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

}



.m11-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    overflow: hidden;

}



.m11-bg img {

    position: relative;

    width: 100%;

    height: auto;

}



.m11-txt {

    width: 100%;

    position: relative;

    margin-top: 48vw;

    z-index: 10;

}



.m11-table {

    width: 100%;

    position: relative;

    margin-top: 0vw;

    z-index: 10;

}



.m11-table img {

    width: 100%;

    object-fit: contain;

}



.m11-obj {

    width: 100%;

    position: relative;

    margin: 6vw 0;

    z-index: 10;

}



.m11-obj img {

    width: 100%;

    object-fit: contain;

}



.m11-obj-li {

    width: 100%;

    position: relative;

    margin: 3vw auto;

}



.m11-obj-li .m11-obj1-tag {

    width: 100%;

    position: absolute;

    left: 0;

    top: 0;

}



.m11-obj2-txt {

    position: absolute;

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

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

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

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

}



.m11-obj2-txt img {

    object-fit: contain;

}



.m11-obj3 .m11-obj3-txt {

    width: 50vw;

    position: relative;

    margin: 5vw auto;

}



.m11 .m11-txt {

    margin-bottom: 5vw;

}



.m11 .m11-txt .t1 {

    position: relative;

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

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

    letter-spacing: 0.1vw;

    font-weight: 400;

    margin: 0;

    text-align: center;

    font-family: "Noto Sans TC";

    color: #fff;

}



.m11 .m11-txt .t3 {

    position: relative;

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

    letter-spacing: 0.05vw;

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

    font-weight: 400;

    text-align: center;

    font-family: "Noto Sans TC";

    padding: 0;

    margin: 5vw 0 0 0;

    color: #fff;

}





.m11 .m11-obj3-txt {

    width: 50vw;

    margin: 0 auto;

}



.m11 .m11-obj3-txt .t1 {

    position: relative;

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

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

    letter-spacing: 0.1vw;

    font-weight: 400;

    margin: 0;

    text-align: left;

    font-family: "Noto Sans TC";

    color: #fff;

}



.m11 .m11-obj3-txt .t3 {

    position: relative;

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

    letter-spacing: 0vw;

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

    font-weight: 300;

    text-align: justify;

    text-align-last: left;

    text-justify: inter-ideograph;

    font-family: "Noto Sans TC";

    padding: 0;

    margin: 2vw 0 4vw 0;

    color: #fff;

    text-indent: -1vw;

}



.m11 .m11-obj3-txt .t3 .tt2 {

    text-indent: -1vw;

    letter-spacing: -0.6px;

}



.m11-obj4 {

    position: absolute;

    left: 0;

    bottom: 0;

    z-index: 10;

    width: 100%;

}



.m11-obj4-title {

    position: relative;

    margin: 0 auto;

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

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

}



.m11-obj4-title .t1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m11-obj4-title img {

    object-fit: contain;

}



.m11-obj4-pic {

    position: relative;

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

    width: 100%;

}





/*第12頁*/

.m12 {

    width: 100%;

    /*height: calc(2134*var(--vw-base));*/

    position: relative;

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

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.form-logo {

    position: relative;

    width: 60vw;

    margin: 0 auto;

}



.form-title {

    position: relative;

    width: 85vw;

    margin: 5vw auto 0 auto;

}



.form-title-bt {

    position: relative;

    width: 85vw;

    margin: 2.5vw auto 12vw auto;

}



.form-title a {

    display: block;

}



.form-title a.form-map {

    width: 35vw;

    height: 10vw;

    position: absolute;

    left: 0;

    top: 18vw;

}



.form-title a.form-tel {

    width: 45vw;

    height: 10vw;

    position: absolute;

    left: 37vw;

    top: 18vw;

}



.form-logo {

    padding: 10vw 0 5vw 0

}



.form-title img,

.form-logo img {

    object-fit: contain;

    width: 100%;

}



.form-title img.mp2 {

    margin: 3vw auto 4vw auto;

}



.form-title img.mp3 {

    margin: 0 auto 3vw auto;

}



.form-title img.mp4 {

    margin: 0 auto 5vw auto;

}



.form-title img.mp5 {

    position: relative;

    padding-top: 2vw;

    margin: 0 auto 3vw auto;

}



.form-container {

    position: relative;

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

    margin: 0 auto;

    width: 85vw;

    padding-bottom: 0vw;

}



.input {

    position: relative;

    background: transparent;

}



.input::before {

    content: "";

    position: absolute;

    inset: 0;

    background-color: #cacbcb;

    mix-blend-mode: multiply;

    z-index: 0;



    /* 👇 關鍵：強制 GPU 合成層 */

    transform: translateZ(0);

    will-change: opacity, transform;

}



.input * {

    position: relative;

    z-index: 1;

    /* 確保文字與input在上層 */

}



.input {

    position: relative;

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

    width: 100%;

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

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.input label {

    position: relative;

    flex-shrink: 0;

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

    text-align: justify;

    text-align-last: justify;

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    color: #fff;

    letter-spacing: 0.15em;

    flex-shrink: 0;

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

}



.nosee {

    opacity: 0;

    user-select: none;

}





input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

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

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 300;

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

}



.input select {

    position: relative;

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

    flex-grow: 1;

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

    border: none;

    background-color: transparent;

    color: #fff;

    box-sizing: border-box;

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

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: "Futura-Std-Light";

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

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

    background-position-x: 96%;

    background-position-y: 50%;

    background-repeat: no-repeat;

    background-size: 4%;

}



select option {

    color: #fff;

    background-color: #363636;

    position: relative;

    width: 100%;

    font-size: inherit;

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

    color: inherit;

    font-family: "Futura-Std-Light";

}



form button,

#submitbtn {

    position: relative;

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

    appearance: none;

    -webkit-appearance: none;

    border-radius: 0;

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

    width: 100%;

    background-color: transparent;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: .1em;

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

    border: none;

    background: transparent;

    transition: all 0.3s ease;

    cursor: pointer;

}





form button,

#submitbtn::before {

    content: "";

    position: absolute;

    inset: 0;

    background-color: #cacbcb;

    mix-blend-mode: multiply;

    z-index: 0;

    pointer-events: none;

    /* 👇 關鍵：強制 GPU 合成層 */

    transform: translateZ(0);

    will-change: opacity, transform;

}



form button,

#submitbtn * {

    position: relative;

    z-index: 1;

    /* 確保文字與input在上層 */

}











.check-txt {

    position: relative;

    width: 100%;

    margin: 2vw auto;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

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

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

    letter-spacing: 0em;

    text-align: left;

}



.check-item {

    position: relative;

    width: 100%;

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

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

    display: flex;

    justify-content: left;

    align-items: left;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    color: #fff;

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

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

    letter-spacing: 0.1em;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item label input {

    position: relative;

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

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

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

    margin: 0% 5% -2% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #fff;

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

    /* 設置大小 */

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

    border: none;

    cursor: pointer;

}



.check-item label input:checked {

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



}



.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



.check-item-sex label {

    cursor: pointer;

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

    text-align: end;

    word-wrap: nowrap;

    white-space: nowrap;



}



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

    position: relative;

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

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

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

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

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #fff;

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

    /* 設置大小 */

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

    cursor: pointer;

}



.check-item-sex label input:checked {

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



}



.openTxtBtn {

    font-family: "Noto Sans TC";

    font-weight: 400;

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

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

    color: #fff;

    cursor: pointer;

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

}



.m13 {

    position: relative;

    width: 100%;

    position: relative;

    overflow: hidden;

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

    background-color: #bacbc1;

}



.m13-left,

.m13-right {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m13-txt {

    position: absolute;

    left: 50%;

    top: 10%;

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

}



.m13-title {

    position: absolute;

    left: 50%;

    top: 50%;

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



}



.m13-title 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%;

}