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

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

}



.Futura-Std-Light {

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

}



.Futura-Std-Heavy {

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

}



.Futura-Std-Medium {

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

}



.noto-sans-200 {

    font-family: "Noto Sans TC";

    font-weight: 200;

}



[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-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-y"] {

    opacity: 0;

}



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

    animation: opacity-y 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;

    animation-delay: 0s;

}



@keyframes opacity-y {

    0% {

        opacity: 0;

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

    }



    50% {

        opacity: 1;

    }



    100% {

        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 {

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 10;

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

}



.pic-txt-black {

    position: absolute;

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

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

    color: #595757;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 10;

}



.pic-txt-left {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 10;

}



.pic-txt-bg {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.05em;

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

    z-index: 10;

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

}



.nav-icon img {

    object-fit: contain;

}





/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}



.sw-prev {

    position: absolute;

    left: 0;

    top: 27%;

    /* transform: translateY(-50%); */

    width: 1.2vw;

    height: 5vw;

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    background-position: left center;

    cursor: pointer;

    transition: all 0.4s ease-in-out;

}



.sw-prev:hover {

    filter: contrast(140%);

}





.sw-next {

    position: absolute;

    right: 0;

    top: 27%;

    /* transform: translateY(-50%); */

    width: 1.2vw;

    height: 5vw;

    z-index: 10;

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

    background-size: contain;

    background-repeat: no-repeat;

    background-position: right center;

    cursor: pointer;

    transition: all 0.4s ease-in-out;



}



.sw-next:hover {

    filter: contrast(140%);

}



.simpleParallax {

    overflow: visible !important;

}



.m1 {

    position: relative;

    width: 100%;

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

    overflow: clip;

    background-color: #e7d3a0;

}





.m1-bg,

.m1-bg2 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-logo {

    position: absolute;

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

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

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

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

}



.m1-logo .m1-logo-main,

.m1-logo .m1-logo-txt {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-txt {

    position: absolute;

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

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

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

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

}



.m1-logo img,

.m1-txt img {

    object-fit: contain;

}



.m1-logo-main {

    position: relative;

    background-image: url('../img/m1-logo-main.svg');

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    mask-image: url('../img/m1-logo-main.svg');

    mask-size: contain;

    mask-repeat: no-repeat;

    mask-position: center;

    overflow: hidden;

    opacity: 1;

    /* 初始狀態為透明 */

    transition: opacity 0.8s ease-in-out;

    /* 自定義的淡入效果 */

}





[data-aos="sweep-custom"].aos-animate {

    /* opacity: 1; */

}



.m1-logo-main::before {

    content: '';

    position: absolute;

    top: 0;

    left: -50%;

    width: 30%;

    height: 100%;

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(185, 139, 63) 50%, rgba(255, 255, 255, 0) 100%);

    transform: skewX(-35deg);

    opacity: 0;

    /* 初始掃光效果為透明 */

}



/* 在淡入完成後觸發掃光效果 */

[data-aos="sweep-custom"].aos-animate::before {

    animation: lightSweep 2.7s forwards cubic-bezier(0.33, 1, 0.68, 1);

    animation-delay: 1.2s;

    /* 延遲開始掃光動畫 */

    opacity: 1;

    /* 掃光效果顯示 */

}



/* 掃光動畫的 keyframes */

@keyframes lightSweep {

    0% {

        left: -50%;

        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(243, 180, 80) 50%, rgba(255, 255, 255, 0) 100%);

    }



    80% {

        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(243, 180, 80) 50%, rgba(255, 255, 255, 0) 100%);

        transform: skewX(10deg);

    }



    100% {

        left: 100%;

        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(185, 139, 63, 671) 50%, rgba(255, 255, 255, 0) 100%);

    }

}



.m2 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m2-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m2-bg-filter {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to right, rgba(71, 67, 67, 0.30) 0%, rgba(255, 255, 255, 0) 100%);

    opacity: 1;

    transition: opacity 1s ease-in-out;

}



.m2-bg-filter.active {

    opacity: 0;

}



/* 

@keyframes m2-bg-filter {

    0% {

        background: linear-gradient(to right, rgba(71, 67, 67, 0.20) 0%, rgba(255, 255, 255, 0) 100%);

    }



    100% {

        background: linear-gradient(to right, rgba(71, 67, 67, 0) 0%, rgba(255, 255, 255, 0) 100%);

    }

} */



.m2-city {

    position: absolute;

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

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

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

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

}



.m2-city .c1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m2-city img {

    object-fit: contain;

}



.m2-txt1 {

    position: absolute;

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

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

    color: #39656e;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.075em;

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

    text-align: end;

}



.m2-txt2 {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

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

}



.m2-txt2-margin {

    position: relative;

    display: inline-block;

    margin-left: -0.7vw;

}



.m3 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m3-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m3-contain {

    position: absolute;

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

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

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

    display: flex;

    flex-direction: column;

    align-items: center;



}



.m3-txt1 {

    position: relative;

    width: 100%;

}



.m3-line {

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

    height: 1px;

    background-color: #000;

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

}



.m3-txt2 {

    position: relative;

    width: 100%;

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m3-pics {

    position: absolute;

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

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

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

    height: 100%;

    display: flex;

    flex-direction: column;

    /* align-items: center; */

    justify-content: center;

    gap: 1px;

}



.m3-pic1 {

    position: relative;

    /* width: 100%; */

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

    overflow: clip;

}



.m3-pic4 {

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

}



.m4 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m4-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m4-contain {

    position: absolute;

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

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m4-txt1 {

    position: relative;

    width: 100%;

}



.m4-line {

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

    height: 1px;

    background-color: #000;

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

}



.m4-txt2 {

    position: relative;

    width: 100%;

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m4-pics {

    position: absolute;

    left: 0;

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

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

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

    overflow: clip;

}



.m4-pic1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m4-site-bg,

.m4-site-txt,

.m4-site-num {

    position: absolute;

    left: 0;

    top: 0;

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

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



}



.m5 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m5-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m5-bg img {

    object-position: left top;

}



.m5-bg-main {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    /* filter: brightness(0.7); */

}



[data-aos="brightness"] {

    filter: brightness(0.7);

}



[data-aos="brightness"].aos-animate {

    animation: brightness-out 1.2s ease-in-out 0s forwards;

}



@keyframes brightness-out {

    0% {

        filter: brightness(0.7);

    }



    100% {

        filter: brightness(1);

    }

}







.m5-bg-pos {

    position: absolute;

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

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

    left: 0;

    top: 0;

}





.m5-pic2 {

    position: absolute;

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

    top: 0;

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

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

}



.m5-pic3 {

    position: absolute;

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

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

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

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



}



.m5-txt1 {

    position: absolute;

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

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

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

}



.m5-line {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

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

    height: 1px;

    background-color: #000;

}



.m5-txt1 {

    position: absolute;

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

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

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

}



.m5-txt2 {

    position: absolute;

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

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

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

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m6 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m6-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m6-contain {

    position: absolute;

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

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

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m6-txt1 {

    position: relative;

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



}



.m6-line {

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

    height: 1px;

    background-color: #000;

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

}



.m6-txt2 {

    position: relative;

    width: 100%;

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m6-pic-main {

    position: absolute;

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

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

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

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

    overflow: clip;

}





.m6-pic-title {

    position: absolute;

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

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

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

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

}



.m6-pic-title>.t1 {

    position: absolute;

    width: 100%;

    height: 100%;

}



.m6-pic-title>.t1 img {

    object-fit: contain;

}



.m6-swiper-box {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

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

    overflow: clip;

    /* background-color: #fff; */

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m6-swiper {

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

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

    overflow: hidden;

}



.m6-swiper .swiper-slide {

    box-sizing: border-box;

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

}



.sw-pic {

    position: relative;

    width: 100%;

    height: 100%;

}



.m7 {

    position: relative;

    width: 100%;

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

    overflow: clip

}



.m7-bg {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m7-bg img {

    object-fit: cover;

    object-position: left top;

}



.m7-txt {

    position: absolute;

    left: 0;

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

    width: 100%;

    display: flex;

    justify-content: center;

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

}



.m7-txt .t1 {

    position: relative;

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

    color: #fff;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.8em;

    text-align: right;



}



.m7-txt .t2 {

    position: relative;

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

    color: #fff;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.2em;

    text-align: left;

}



.m8 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m8-bg,

.m8-bg-2 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m8-bg-2 {}



.m8-contain {

    position: absolute;

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

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

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

    overflow: clip;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m8-txt1 {

    position: relative;

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



}



.m8-line {

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

    height: 1px;

    background-color: #000;

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

}



.m8-txt2 {

    position: relative;

    width: 100%;

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m9 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m9-bg {

    position: absolute;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: left top;

}





.m9 img {

    object-position: left top;

}



.m9-txt {

    position: absolute;

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

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

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

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

    color: #fff;

}



.m9-pic {

    position: absolute;

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

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

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

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

    overflow: hidden;

}



.m9-ptxt1 {

    position: absolute;

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

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

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

}



.m9-ptxt2 {

    position: absolute;

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

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

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

}



.m9-ptxt3 {

    position: absolute;

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

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

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

}



.m9-ptxt4 {

    position: absolute;

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

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

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

}



.m9-ptxt5 {

    position: absolute;

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

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

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

}



.m10 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m10-bg {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

}



.m10-pic {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    overflow: hidden;

}



.m10-pic img {

    transform: scale(1.2);

    filter: brightness(1);

    transition: all 3s ease-in-out;

}



.active-bg {

    opacity: 1;

    transform: scale(1) !important;

    filter: brightness(1) !important;

}





.m10-txt1 {

    position: absolute;

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

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

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

}



.m10-line {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

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

    height: 1px;

    background-color: #000;

}



.m10-txt2 {

    position: absolute;

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

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

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

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m11 {

    position: relative;

    width: 100%;

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

    overflow: clip;

}



.m11-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m11-pics {

    position: absolute;

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

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

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

    display: flex;

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

}



.m11-pic1,

.m11-pic2 {

    height: 100%;

}



.m11-txt1 {

    position: absolute;

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

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

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

}



.m11-line {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

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

    height: 1px;

    background-color: #000;

}



.m11-txt2 {

    position: absolute;

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

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

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

    color: #000;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.075em;

    text-align: center;

}



.m12 {

    position: relative;

    width: 100%;

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

    display: flex;

    overflow: hidden;

}



.m12-bg1,

.m12-bg2 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m12-contain {

    position: relative;

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

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    box-sizing: border-box;

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

}





.m12-logo {

    position: relative;

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

}



.m12-logo img {

    object-fit: contain;

}



.m12-txt {

    position: relative;

    margin-top: 1vw;

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

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    text-align: center;

    color: #231815;

}



.fz27 {

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

}



.m12-pin {

    position: relative;

    margin-top: 1vw;

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

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.1em;

    text-align: center;

    color: #231815;

}



.fz30 {

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

}



.m12-address {

    position: relative;

    margin-top: 1.5vw;

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

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

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.075em;

    text-align: left;

    color: #231815;

}



.m12-phone {

    position: relative;

    margin-top: 0.5vw;

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

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

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.075em;

    text-align: left;

    color: #231815;

}



.m12-phone-num {

    position: relative;

    display: inline-block;

    letter-spacing: 0.17em;

}



.txt-arrow {

    position: relative;

    top: -0.25vw;

    display: inline-block;

    width: 0.4vw;

    height: 0.4vw;

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

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    padding: 0 0.5vw;

}



.m12-info {

    position: relative;

    margin-top: 2vw;

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

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

    font-family: "Noto Sans TC";

    font-weight: 500;

    letter-spacing: 0.075em;

    text-align: center;

    color: #231815;

}



.form-info {

    position: relative;

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

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

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.form-title {

    position: relative;

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

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

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

}



.form-title img {

    object-fit: contain;

}



.form-container {

    position: relative;

    display: flex;

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

    flex-direction: column;

    width: 100%;

}



.input {

    position: relative;

    width: 100%;

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

    box-sizing: border-box;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-sizing: border-box;

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

}



.input::before {

    content: '';

    position: absolute;

    top: 0;

    /* 偽元素位於 .input 上方 */

    left: 0;

    width: 100%;

    /* 偽元素寬度填滿 */

    height: 0.5px;

    /* 偽元素高度，可調整為間隔需求 */

    background-color: #b28247;

    /* 視覺樣式 */

}



.input:last-child::after {

    content: '';

    position: absolute;

    bottom: 0;

    /* 偽元素位於 .input 上方 */

    left: 0;

    width: 100%;

    /* 偽元素寬度填滿 */

    height: .5px;

    /* 偽元素高度，可調整為間隔需求 */

    background-color: #b28247;

    /* 視覺樣式 */

}



.input label {

    position: relative;

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

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

    text-align-last: justify;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.075em;

    color: #231815;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

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

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

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

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

    border: none;

    background-color: transparent;

    color: #231815;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.05em;

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

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

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

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



}



.input textarea {

    position: relative;

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

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

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

    border: none;

    background-color: transparent;

    color: #231815;

    box-sizing: border-box;

    outline: none;

    letter-spacing: 0.05em;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.05em;

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

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

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

    /* 为 textarea 增加顶部的 padding */

    resize: none;

    /* 禁止調整大小 */

    overflow: hidden;

    /* 允许用户调整 textarea 高度 */

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

    max-height: calc(90 * var(--vw-base));

}



.input select {

    position: relative;

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

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

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

    border: none;

    background-color: transparent;

    color: #231815;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.05em;

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

    background-position-x: 99%;

    background-position-y: 50%;

    background-repeat: no-repeat;

    background-size: 3.5%;

}



select option {

    color: #231815;

    background-color: #e7d3a0;

    position: relative;

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

    font-size: inherit;

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

    color: inherit;

}



form button,

#submitbtn {

    position: relative;

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

    appearance: none;

    -webkit-appearance: none;

    border-radius: 0;

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

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

    background-color: transparent;

    border: none;

    outline: none;

    cursor: pointer;

    z-index: 100;

    /* box-shadow: #231815 1px 1px 1px 1px; */

    transition: all 0.2s ease;

}



#submitbtn:hover {

    filter: contrast(120%);

}









.check-item {

    position: relative;

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

    display: flex;

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

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.05em;

    color: #231815;

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

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item label input {

    position: relative;

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

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

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

    margin: 0% 5% -2.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background-color: #000;

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

    /* 正確語法 */

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

}



.check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



.check-item-sex label {

    cursor: pointer;

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

    text-align: end;



}



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

    position: relative;

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

    width: 1.2vw;

    height: 1.2vw;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

    background-color: #000;

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

    cursor: pointer;

}



.check-item-sex label input:checked {

    mask-image: url(../img/checked.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));

}



.openTxtBtn {

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.075em;

    color: #231815;

    cursor: pointer;

    text-decoration: underline;

    text-decoration-thickness: 1px;

}



.nav {

    position: relative;

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

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

    display: flex;

    align-items: center;

}



.nav-items {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

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

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

}



.nav-items::after {

    content: "";

    position: absolute;

    top: 0%;

    right: 0;

    width: 1px;

    height: 100%;



    background-color: #231815;

}



.nav-items:last-child::after {

    display: none;

}



.nav-items img {

    object-fit: contain;

}



.nav-icon {

    position: relative;

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

    filter: contrast(130%) brightness(80%);

}





.nav-txt {

    position: relative;

    color: #231815;

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

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

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

    letter-spacing: 0.1em;

}





/*同意書照片預覽*/



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

}