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

}



@font-face {

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

    src: url(../fonts/Futura\ Std\ Book\ Oblique.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);

    }

}



/* 自定義 AOS：Scale Fade (1.05 -> 1.00) */

[data-aos="scale-fade"] {

    opacity: 0;

    transform: scale(1.05);

    transition-property: transform, opacity;

}



[data-aos="scale-fade"].aos-animate {

    opacity: 1;

    transform: scale(1);

}



/* 自定義 AOS：Clip Down (由上往下) */

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

    opacity: 1;

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

}



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

    opacity: 1;

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

    transition-property: clip-path;

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    scroll-behavior: smooth;

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

}



body>* {}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

}



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

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

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

}



.pic-txt-lt {

    position: absolute;

    top: 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.1em;

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

    z-index: 10;

    text-shadow: #000000 0px 0px 2px;

}



.pic-txt-lt.b-txt {

    color: #000;

    text-shadow: none;

}





.main-title {

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.05em;

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

    color: #26a2a7;

}



.main-subtitle {

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.2em;

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

    color: #26a2a7;

}



.main-txt {

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.1em;

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

    color: #3e3a39;

}







/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}





.m1 {

    position: relative;

    width: 100%;

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

    background-color: #fff;

    /* 白色背景開始 */

}



.m1-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    z-index: 5;

    transition: opacity 1.4s ease;

}



.m1-video.active {

    opacity: 1;

}



.m1-video video {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m1-start {

    position: absolute;

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

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

    width: 100%;

    height: 100%;

    z-index: 10;

}



.m1-start-txt {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

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

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

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

}



.m1-start-txt .t1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    /* 使用更高級的 Quintic 貝茲曲線 */

    transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),

        clip-path 1.6s cubic-bezier(0.22, 1, 0.36, 1),

        filter 1.6s ease;

}



.m1-start.active .m1-start-txt .t1 {

    opacity: 1;

    transform: translateY(0) scale(1);

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

    filter: blur(0);

}



.m1-start-txt .t1:nth-child(1) {

    transition-delay: 0s;

    transform: translateY(-2vw);

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

    filter: blur(5px);

}



.m1-start-txt .t1:nth-child(2) {

    transition-delay: 0.3s;

    transform: scale(1.1);

    opacity: 0;

    /* 英文行稍微長一點的持續時間增加優雅感 */

    transition-duration: 2s;

}



.m1-start-txt .t1:nth-child(3) {

    transition-delay: 0.6s;

    transform: translateY(2vw);

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

    filter: blur(5px);

}



/* 淡出狀態 */

.m1-start.fade-out .m1-start-txt .t1 {

    opacity: 0;

    transition: opacity 1s;

    transition-delay: 0s !important;

}





.m1-start-txt .t1 img {

    object-fit: contain;

}





.m1-end {

    position: absolute;

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

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

    width: 100%;

    height: 100%;

    z-index: 15;

    opacity: 0;

    visibility: hidden;

    transition: opacity 1.5s ease;

}



.m1-end.active {

    opacity: 1;

    visibility: visible;

}



.m1-end-bg {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #fff;

    z-index: 1;

    overflow: hidden;

}



.m1-end-bg img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m1-end-bg .bg-base {

    opacity: 1;

    transform: scale(1.2);

}



/* 當 active 時啟動 7s 縮放 */

.m1-end.active .bg-base {

    animation: main1 7s ease forwards;

}



.m1-end-bg .bg-pulse {

    z-index: 2;

    width: 175vw;

    left: -37.5vw;

    opacity: 0;

}



/* 呼吸動畫持續進行 */

.m1-end.active .bg-pulse {

    animation: bg1-ani 5s linear infinite;

}



@keyframes main1 {

    0% {

        transform: scale(1.2);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes bg1-ani {



    0%,

    100% {

        opacity: 0;

    }



    50% {

        opacity: 1;

    }

}



.m1-end-txt1 {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

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

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

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

    z-index: 10;

    /* 文字內容設為高層級 */

}



.m1-end-txt1 .t1,

.m1-end-txt2 .t1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    /* 統一更高級的 Quintic 貝茲曲線 */

    transition: opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1),

        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),

        clip-path 1.8s cubic-bezier(0.22, 1, 0.36, 1),

        filter 1.8s ease;

}



/* 上方 Logo 與標題：由下往上揭曉 + 縮放 + 去模糊 */

.m1-end-txt1 .t1 {

    transform: translateY(0vw) scale(1.05);

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

    filter: blur(5px);

}



/* 下方 坪數細節：淡入 + 縮放 + 去模糊 */

.m1-end-txt2 .t1 {

    transform: translateY(6vw) scale(0.95);

    /* filter: blur(5px); */

}



.m1-end.active.show-txt .m1-end-txt1 .t1 {

    opacity: 1;

    transform: translateY(0) scale(1);

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

    filter: blur(0);

    transition-delay: 0.1s;

}



.m1-end.active.show-txt .m1-end-txt2 .t1 {

    opacity: 1;

    transform: translateY(0) scale(1);

    filter: blur(0);

    transition-delay: 0.7s;

    /* 晚一點點進場，增加層次感 */

}





.m1-end-txt1 img,

.m1-end-txt2 img {

    object-fit: contain;

}



.m1-end-txt2 {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

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

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

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

    z-index: 10;

    /* 文字內容設為高層級 */

}









.m2 {

    position: relative;

    width: 100%;

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

    background-color: #fff;

    overflow: hidden;

}



.m2-bg1 {

    position: absolute;

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

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

    width: 100%;

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

}



.m2-bg1 img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* z-index: 1; */

}



.m2-bg1 video {

    position: absolute;

    left: 0;

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

    /* 保留您的位移調整 */

    width: 100%;

    height: 100%;

    object-fit: cover;

    /* z-index: 1; */

    pointer-events: none;

    -webkit-transform: translateZ(0);

    /* 強制開啟 iPhone 硬體加速 */

    transform: translateZ(0);

}





.m2-bg2 {

    position: absolute;

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

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

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

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

}



.m2-bg3 {

    position: absolute;

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

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

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

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

}



.m2-bg2 img,

.m2-bg3 img {

    object-fit: cover;

}



.m2-title-1 {

    position: absolute;

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

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.2em;

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

    color: #fff;

    text-shadow: #00000050 0px 0px 1px;

}



.m2-title-2 {

    position: absolute;

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

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.2em;

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

    color: #fff;

    text-shadow: #00000050 0px 0px 1px;

}



.m2-contain {

    position: absolute;

    right: 0;

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

    width: 100%;

    display: flex;

    justify-content: flex-end;

}



.m2-contain-title {

    position: absolute;

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

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

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

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

}



.m2-contain-title img {

    object-fit: contain;

}



.m2-contain-pic {

    position: relative;

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

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

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

}



.m2-contain-txt {

    position: relative;

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

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

    height: auto;

}



.m2-end-pic {

    position: absolute;

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

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

    width: 100%;

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

}





.m3 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: start;

    overflow-x: hidden;

}



.m3-bg-1 {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

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

}



.m3-bg-2 {

    position: absolute;

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

    right: 0;

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

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

}



.m3-title {

    position: relative;

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

}



.m3-swiper {

    position: relative;

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

    width: 100%;

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

    overflow: hidden;

    /* 確保縮放不超出邊界 */

}



/* Swiper 輪播內的圖片縮放動畫 (Ken Burns Effect) */

.m3-swiper .swiper-slide img {

    transform: scale(1.1);

    /* 初始放大 */

    transition: transform 4s ease-out;

}



.m3-swiper .swiper-slide-active img {

    transform: scale(1);

    /* 滑到時緩緩縮小回原樣 */

}



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

    transform: scale(1.1);

    transition: transform 4s ease-out;

}



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

    transform: scale(1);

}



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

    transform: scale(1.1);

    transition: transform 4s ease-out;

}



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

    transform: scale(1);

}





.m3-subtitle {

    position: relative;

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



}



.m3-txt {

    position: relative;

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

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

    white-space: nowrap;

}



.m3-txt .fs19 {

    display: inline-block;

    letter-spacing: 0.01em;

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

}



.m3-subtitle img,

.m3-txt img {

    object-fit: contain;

    object-position: left center;

}



.m3 .sw-container {

    position: relative;

    align-self: center;

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

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    z-index: 10;

}



.m3 .sw-container .sw-prev {

    position: absolute;

    left: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}



.m3 .sw-container .sw-next {

    position: absolute;

    right: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}





.m4 {

    position: relative;

    width: 100%;

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

    display: flex;

    align-items: start;

    overflow-x: hidden;

    overflow-y: visible;

    /* background-color: #fff; */

}



.m4-bg {

    position: absolute;

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

    left: 0;

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

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

}



.m4-pic1 {

    position: relative;

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

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

}



.m4-pic2 {

    position: relative;

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

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

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

}



.m4-pic2-1 {

    position: relative;

    width: 100%;

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

}



.m4-pic2-2 {

    position: relative;

    width: 100%;

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

}



.m4-txt-box {

    position: relative;

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

}



.m4-txt1 {

    position: relative;





}



.m4-space {

    position: relative;

    display: inline-block;

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

}



.m4-txt1-en {

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

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

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

}



.m4-txt1-line {

    position: relative;

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

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

    display: inline-block;

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

    height: 1px;

    background-color: #2c9a9f;

}



.m4-txt2 {

    position: relative;

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

}



.m4-txt3 {

    position: relative;

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

}





.m5 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: start;

    overflow: hidden;

    /* background-color: #fff; */

}



.m5-bg {

    position: absolute;

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

    right: 0;

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

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

}



.m5-title {

    position: absolute;

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

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

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

    text-align-last: justify;

}



.m5-subtitle {

    position: absolute;

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

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

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

    text-align-last: justify;

}





.m5-swiper {

    position: relative;

    width: 100%;

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

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

    overflow: hidden;

    /* 確保縮放不超出邊界 */

}



.m5-swiper .swiper-slide {

    position: relative;

    display: flex;

    justify-content: flex-end;

}



.m5-swiper .sw-pic {

    position: relative;

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

    overflow: hidden;

}



/* Swiper 輪播內的圖片縮放動畫 (Ken Burns Effect) */

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

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

    transform: scale(1.05);

    transition: transform 2s linear;

    /* 緩慢縮放 */

}



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

    transform: scale(1);

    /* 啟動中的幻燈片放大 */

}





/* 文字初始狀態 (隱藏且位移) */

.m5-swiper .swiper-slide .sw-title,

.m5-swiper .swiper-slide .sw-txt {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



/* 離開中的幻燈片 (立即消失，避免重疊) */

.m5-swiper .swiper-slide:not(.swiper-slide-active) .sw-title,

.m5-swiper .swiper-slide:not(.swiper-slide-active) .sw-txt {

    opacity: 0;

    transform: translateY(-10px);

    transition: opacity 0.4s ease, transform 0.4s ease;

    transition-delay: 0s !important;

}



/* 進場中的幻燈片 (延遲並上升) */

.m5-swiper .swiper-slide-active .sw-title {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.8s;

    /* 等待前一張淡出 */

}



.m5-swiper .swiper-slide-active .sw-txt {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 1.1s;

    /* 比標題再晚一點 */

}



.m5-swiper .swiper-slide .sw-contain {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

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

    box-sizing: border-box;

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

}



.m5-swiper .swiper-slide .sw-title {

    position: relative;



}





.m5-swiper .sw1 .sw-title {

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

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

}



.m5-swiper .sw2 .sw-title {

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

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

}



.m5-swiper .sw3 .sw-title {

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

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

}



.m5-swiper .sw4 .sw-title {

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

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

}



.m5-swiper .sw-title img {

    object-fit: contain;

}





.m5-swiper .swiper-slide .sw-txt {

    position: relative;

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

    /* font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.1em;

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

    color: #3e3a39; */

}



.m5 .sw-container-box {

    position: absolute;

    right: 0;

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

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

}



.m5 .sw-container {

    position: relative;

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    z-index: 10;

}



.m5 .sw-container .sw-prev {

    position: absolute;

    left: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}



.m5 .sw-container .sw-next {

    position: absolute;

    right: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}



.m5 .sw-pic {

    position: relative;

}





.m6 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: start;

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

    box-sizing: border-box;

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

}



.m6-bg {

    position: absolute;

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

    left: 0;

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

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

}





.m6-logo {

    position: absolute;

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

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

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

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

}



.m6-logo img {

    object-fit: contain;

}



.m6-txt-box {

    position: relative;

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

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

    display: flex;

    flex-direction: row;

    align-items: start;

}



.m6-txt1 {

    position: relative;

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

}



.m6-txt2 {

    position: relative;

}



.m6-txt2-1 {

    position: relative;

}



.m6-txt2-2 {

    position: relative;

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

}



.m6-txt2-3 {

    position: relative;

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

}



.m6-sw-box {

    position: relative;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m6-swiper {

    position: relative;

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

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

}



.m6-swiper .sw-pic {

    position: relative;

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

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

}



.m6-swiper .sw-txt {

    position: relative;

    width: 100%;

    text-align: center;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.03em;

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

    color: #3e3a39;

}



.sw6-prev {

    position: absolute;

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

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

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

}



.sw6-next {

    position: absolute;

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

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

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

}



.m6-pic-box {

    position: relative;

    display: flex;

    flex-direction: row;

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

}



.m6-pic-item {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m6-pic {

    position: relative;

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

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

}



.m6-pic-word {

    position: relative;

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

}





.m7 {

    position: relative;

    width: 100%;

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

    display: flex;

    align-items: start;

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

    box-sizing: border-box;

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

}



.m7-bg {

    position: absolute;

    right: 0;

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

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

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

}



.m7-content {

    position: relative;

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

}



.m7-title1 {

    position: relative;



}





.m7-title2 {

    position: relative;

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

}





.m7-swiper-box {

    position: relative;

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

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}



.m7-swiper {

    position: relative;

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

    width: 100%;

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

    overflow: hidden;

}



/* Swiper 縮放感 */

.m7-swiper .swiper-slide img {

    transform: scale(1.08);

    transition: transform 2s linear;

}



.m7-swiper .swiper-slide-active img {

    transform: scale(1);

}



/* 內容文字動畫 */

.m7 .sw-cn,

.m7 .sw-en {

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.8s ease, transform 0.8s ease;

}



/* 離開時立即重設 */

.m7 .swiper-slide:not(.swiper-slide-active) .sw-cn,

.m7 .swiper-slide:not(.swiper-slide-active) .sw-en {

    opacity: 0;

    transition-delay: 0s !important;

}



/* 進場時依序 Fade Up */

.m7 .swiper-slide-active .sw-cn {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.6s;

}



.m7 .swiper-slide-active .sw-en {

    opacity: 1;

    transform: translateY(0);

    transition-delay: 0.9s;

    /* 慢一點點 */

}



.m7 .sw-pic {

    position: relative;

}



.m7 .sw-txt {

    position: absolute;

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

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

    display: flex;

    flex-direction: column;

    align-items: end;

}



.m7 .sw-cn {

    position: relative;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.2em;

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

    color: #26a2a7;

}



.m7 .sw-en {

    position: relative;

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

    /* font-weight: 400; */

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

    letter-spacing: 0.01em;

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

    color: #fff;

}



.m7 .sw-container {

    position: relative;

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

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

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

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

}



.m7 .sw-container .sw-prev {

    position: absolute;

    left: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}



.m7 .sw-container .sw-next {

    position: absolute;

    right: 0;

    top: 0;

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

    height: 100%;

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

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    transform: none;

    cursor: pointer;

}



.m7-headtxt {

    position: relative;

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

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

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

}





.m8 {

    position: relative;

    width: 100%;

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

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

}



.m8-bg {

    position: absolute;

    left: 0;

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

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

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

}



.m8-title {

    position: absolute;

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

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

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

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

}



.m8-title2 {

    position: relative;

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

}



.m8-pic1 {

    position: absolute;

    right: 0;

    top: 0;

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

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

    overflow: hidden;

    /* 確保縮放不超出 */

}



.m8-pic1 img {

    transform: scale(1.08);

    transition: transform 2s ease-out;

}



.m8-pic1.aos-animate img {

    transform: scale(1);

}





.m8-pic2 {

    position: absolute;

    left: 0;

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

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

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

}



.m8-txt {

    position: absolute;

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

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

    display: flex;

    flex-direction: column;

    align-items: start;

}



.m8-txt .t1 {

    position: relative;

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



}





.m9 {

    position: relative;

    width: 100%;

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

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

}





.m9-bg {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

}



.m9-contain {

    position: absolute;

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

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

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

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

}



.m9-contain img {

    object-fit: contain;

    object-position: left;

}



.m9-logo,

.m9-pin,

.m9-loc,

.m9-phone {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;



}



.m9-loc-btn {

    position: absolute;

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

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

    width: 100%;

    height: 1.5vw;

    /* background-color: #009b95; */

}



.m9-phone-btn {

    position: absolute;

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

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

    width: 100%;

    height: 1.5vw;

    /* background-color: #6b2448; */

}



.m9-end {

    position: absolute;

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

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

    font-family: "Noto Sans TC";

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

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

    color: #3e3a39;

}



.form-info {

    position: absolute;

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

    top: 0;

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

    display: flex;

    flex-direction: column;

    justify-content: start;

    align-items: center;

    box-sizing: border-box;

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

    background-color: #ffffff52;

}



.form-title {

    position: relative;

    padding-top: calc(0*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: #009b95;

    /* 視覺樣式 */

}



.input:last-child::after {

    content: '';

    position: absolute;

    bottom: 0;

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

    left: 0;

    width: 100%;

    /* 偽元素寬度填滿 */

    height: .5px;

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

    background-color: #009b95;

    /* 視覺樣式 */

}



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

    position: relative;

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

    font-size: inherit;

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

    color: inherit;

}



form button,

#submitbtn {

    position: relative;

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

    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;

    background-color: #009b95;

    color: #3e3a39;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

    letter-spacing: 0.1em;

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

    cursor: pointer;

}



#submitbtn:hover {

    /* filter: contrast(120%); */

}









.check-item {

    position: relative;

    margin-top: calc(15*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: #0a938d;

    -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: #0a938d;

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

    right: 0;

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

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

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

    z-index: 999;

    opacity: 0;

    transform: translateY(100%);

    transition: all 0.6s ease;

}



.nav.show {

    opacity: 1;

    transform: translateY(0);

}



.nav-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #009b95;

    border-radius: calc(26*var(--vw-base)) 0 0 calc(26*var(--vw-base));

}



.nav-contain {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

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

}







.nav-items {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 100%;

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

    cursor: pointer;

}



.nav-items::after {

    content: "";

    position: absolute;

    bottom: 0%;

    left: 50%;

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

    height: 1px;

    transform: translateX(-50%);

    opacity: 0.4;

    background-color: #fff;

}



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

    display: none;

}



.nav-items img {

    object-fit: contain;

}



.nav-icon {

    position: relative;

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

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

}









/*同意書照片預覽*/



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

}