@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: "TrajanPro-Bold";

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

}



@font-face {

    font-family: "TrajanPro-Regular";

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

}



@font-face {

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

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

}



@font-face {

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

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

}



@font-face {

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

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

}



@font-face {

    font-family: "Times-Roman";

    src: url(../fonts/Times Roman.otf);

}





.Times-Roman {

    font-family: "Times-Roman";

}



.Futura-Std-Medium {

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

}



.Futura-Std-Light {

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

}



.Futura-Std-Book {

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

}



/* --- 2. 從上往下刷 --- */

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

    /* 1. 將漸層方向改為 to bottom (由上往下) */

    /* 結構：透明(上) -> 黑色(中) -> 透明(下) */

    -webkit-mask-image: linear-gradient(to bottom, transparent 33.33%, black 33.33%, black 66.66%, transparent 66.66%);

    mask-image: linear-gradient(to bottom, transparent 33.33%, black 33.33%, black 66.66%, transparent 66.66%);



    /* 2. 尺寸改為寬度 100%，高度 300% */

    -webkit-mask-size: 100% 300%;

    mask-size: 100% 300%;



    /* 3. 初始位置設為底部 (100%)，此時圖片被上方的透明區遮住 */

    -webkit-mask-position: 0 100%;

    mask-position: 0 100%;

}



/* --- AOS 觸發後的狀態 --- */

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

    /* 4. 目標位置設為中間 (50%)，讓黑色區塊對準圖片 */

    -webkit-mask-position: 0 50% !important;

    mask-position: 0 50% !important;



    transition: -webkit-mask-position 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),

        mask-position 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



body,

html {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    /* scroll-behavior: smooth; */

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

    -ms-overflow-style: none;

    scrollbar-width: none;

}



html::-webkit-scrollbar {

    /* display: none; */

}



html,

body {

    scroll-behavior: auto !important;

}



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;

}



.chg-pic {

    overflow: hidden;

}



.chg-pic img {

    /*filter: brightness(0.7);*/

    transform: scale(1.15);

    transition: all 6s ease;

}



.active-bg {

    opacity: 1;

    transform: scale(1) !important;

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

}



video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.OKBlack {

    position: fixed;

    top: 0px;

    left: 0px;

    width: 100vw;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4);

    display: none;

    z-index: 99999;

}



.OKContainer {

    width: 20vw;

    position: absolute;

    top: 50%;

    left: 0px;

    right: 0px;

    margin: 0px auto;

    transform: translateY(-50%);

    cursor: pointer;

}



.OKContainer img {

    width: 100%;

}







.pic-txt {

    position: absolute;

    bottom: 1vw;

    right: 1vw;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

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

    z-index: 10;

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

}



.pic-txt-top {

    position: absolute;

    top: 1vw;

    right: 1vw;

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

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

    z-index: 10;

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

}



.top_nav {

    width: 100vw;

    height: 2.6vw;

    position: fixed;

    left: 0;

    top: 0;

    z-index: 9999;

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

    background-repeat: no-repeat;

    background-position: 100% 50%;

    background-size: cover;

}



.nav-logo {

    width: 8vw;

    height: auto;

    position: absolute;

    left: 2.2vw;

    top: 50%;

    transform: translateY(-50%);

}



/*內容*/

.container {

    position: relative;

    width: 100%;

    height: auto;

    /* opacity: 0; */

}



.container h2 {

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

    color: #9b4c34;

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.2em;

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

}



.container h3 {

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

    color: #4d4d4d;

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.2em;

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

}



.container h4 {

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



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

    color: #000;

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0.1em;

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

}



.main-en-green {

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

    color: #4a8487;

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

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

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

    letter-spacing: 0.1em;



}





.container .main-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

}



/*第1頁*/

.m1 {

    position: relative;

    width: 100%;

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

    background-color: #000;

}



.m1 .main-bg video {

    width: 101%;

    height: 101%;

    position: absolute;

    left: 50%;

    top: 50%;

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

}



.m1-logo {

    position: absolute;

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

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

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

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

}





.m1-txt {

    position: absolute;

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

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

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

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

}



.m1-txt .txt-img {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-logo img,

.m1-txt img {

    object-fit: contain;

}



.m2 {

    position: relative;

    width: 100%;

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



}



.m2 video {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 101%;

    height: 101%;

    object-fit: cover;

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

}



.m2-txt {

    position: absolute;

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

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

}



.m2-txt h3 {

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

}



.m2-txt h4 {

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

}



.m3 {

    position: relative;

    width: 100%;

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

    background-color: #fff;

}



.m3-video {

    position: absolute;

    left: 0;

    top: 0;

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

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

    cursor: pointer;

    overflow: hidden;

}



.m3-video video {

    position: absolute;

    left: 50%;

    top: 50%;

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

    width: 101%;

    height: 101%;

}



.m3 .slogan-en {

    position: absolute;

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

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

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

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

}



.slogan-en img {

    object-fit: contain;

}



.m3-txt {

    position: absolute;

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

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

}



.m3-txt h3 {

    color: #4a8487;

}





.m3-txt .main-en-green {}





.m3-txt h4 {

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

    text-align: justify;

}



.m4 {

    position: relative;

    width: 100%;

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

}



.m4-pic {

    position: absolute;

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

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

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

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

}



.m4 .slogan-en {

    position: absolute;

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

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

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

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

}



.m4-txt {

    position: absolute;

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

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

}



.m4-txt h3 {

    color: #4a8487;

}



.m4-txt h4 {

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

    text-align: justify;

    letter-spacing: 0.087em;

}



.m5 {

    position: relative;

    width: 100%;

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

}



.m5-txt {

    position: absolute;

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

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

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

}



.m5-txt h3 {

    color: #4a8487;

    text-align: center;

}



.m5-txt .main-en-green {

    letter-spacing: 0;

    text-align-last: justify;

}



.m5-txt h4 {

    text-align: justify;

}



.m5-swiper {

    position: absolute;

    right: 0;

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

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

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

}



.m5-swiper .swiper-slide {

    position: relative;

    background-color: #fff;

    display: flex;

    justify-content: start;

}



.m5-swiper .sw-pic {

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

    height: 100%;

}





.m5-swiper .sw-txt {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;

}





.m5-swiper .sw-txt .en {

    color: #4a8487;

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

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

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

    letter-spacing: 0.1em;

    width: 100%;

    text-align: center;

}



.m5-swiper .sw-txt .t1 {

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

    color: #3e3a39;

    font-family: "Noto Sans TC";

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

    font-weight: 400;

    letter-spacing: 0.1em;

    line-height: 1.1em;

    text-align: center;

}





.m5-swiper .sw-txt .t2 {

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

    color: #3e3a39;

    font-family: "Noto Sans TC";

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

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: 1.1em;

    text-align: center;

}



.m5 .sw-control {

    position: absolute;

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

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

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

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

    display: flex;

    /* flex-direction: column; */

    align-items: center;

    justify-content: center;

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

    z-index: 10;

}



.m5 .sw-control .swiper-pagination {



    position: relative;

    margin: 1vw 0 0 0;

    display: flex;

    justify-content: center;

    /* flex-direction: column; */

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

    align-items: center;

    width: auto;

    align-self: center;

}



.m5 .swiper-pagination-bullet-active {

    background-color: #4a8487;

}



.m6 {

    position: relative;

    width: 100%;

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

    display: flex;

}



.m6-pic {

    position: relative;

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

    height: 100%;

}



.m6-pic-shadow {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    mix-blend-mode: multiply;

}



.m6 .shadow-top {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

    mix-blend-mode: multiply;

}



.m6-pic-txt {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    box-sizing: border-box;

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

    text-align: end;

}



.m6-pic-txt .name {

    position: relative;

    color: #fff;

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

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

    letter-spacing: 0.1em;

}



.m6-pic-txt .word {

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

    position: relative;

    color: #fff;

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

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

    letter-spacing: 0.1em;

}



.m6-txt {

    position: relative;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    box-sizing: border-box;

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

}



.m6 .slogan-en {

    position: absolute;

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

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

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

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

}





.m6-txt h3 {

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

    text-align: center;

    color: #9b4c34;

}



.m6-txt h2 {

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

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

    text-align: center;

}



.m6-txt h4 {

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

    text-align: justify;

}



.m7 {

    position: relative;

    width: 100%;

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



}



.m7 video {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 101%;

    height: 101%;

    object-fit: cover;

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

}



.m7 .slogan-en {

    position: absolute;

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

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

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

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



}



.m7-txt {

    position: absolute;

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

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



}



.m7-txt h2 {

    color: #f2d8b6;

}





.m7-txt h3 {

    color: #f2d8b6;

}



.m7-txt h4 {

    color: #fff;

    letter-spacing: 0.1em;

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

}



.m8 {

    position: relative;

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

    width: 100%;

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

}



.m8 video {

    margin: 0 auto;

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

    height: 100%;

}



.m8 .slogan-en {

    position: absolute;

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

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

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

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

}





.m9 {

    position: relative;

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

    width: 100%;

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

}



.m10 {

    position: relative;

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

    width: 100%;

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

}



.m9-txt {

    position: absolute;

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

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

}





.m10-txt {

    position: absolute;

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

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



}



.m9-txt h3,

.m10-txt h3 {

    color: #9b4c34;

}



.m9-txt h4,

.m10-txt h4 {

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

    text-align: justify;

}



.m9-swiper,

.m10-swiper {

    position: absolute;

    right: 0;

    top: 0;

    height: 100%;

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

}



.m9-swiper .swiper-slide,

.m10-swiper .swiper-slide {

    display: flex;

    justify-content: end;

}



.m9-swiper .sw-pic,

.m10-swiper .sw-pic {

    position: relative;

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

    height: 100%;

}



.m9 .slogan-en,

.m10 .slogan-en {

    position: absolute;

    left: 0;

    bottom: 0;

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

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

}



.m9 .sw-control,

.m10 .sw-control {

    position: absolute;

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

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

    height: 100%;

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

    /* 稍微加寬增加點擊友善度 */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    z-index: 10;

    /* 確保在 slide 之上 */

}



.m9 .sw-control .swiper-pagination,

.m10 .sw-control .swiper-pagination {

    position: static;

    margin: 0;

    display: flex;

    flex-direction: column;

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

    align-items: center;

}



.sw-prev-in,

.sw-next-in {

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

    /* 增加容器大小 */

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

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 3;

    cursor: pointer;

}



.sw-prev-in img,

.sw-next-in img {

    width: 100%;

    /* 保持圖片原始大小 */

    height: 100%;

    object-fit: contain;

    pointer-events: none;

    /* 避免圖片干擾點擊 */

}



.swiper-pagination-bullet {

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

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

    background-color: #9c9c94;

}



.swiper-pagination-bullet-active {

    background-color: #eaa674;

}



.m11 {

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

    position: relative;

    width: 100%;

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

}



.m11-txt {

    position: absolute;

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

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

}



.m11-txt h2,

.m11-txt h3 {

    color: #9b4c34;

    text-align: center;

}



.m11-txt h4 {

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

    text-align: justify;

}



.m11-pic {

    position: absolute;

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



    top: 0;

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

    height: 100%;

}



.m11-pic-txt {

    position: absolute;

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

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

    color: #9b4c34;

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

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

    display: flex;

    flex-direction: column;

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

}



.m11-pic-txt .t1 {

    display: flex;

    align-items: center;

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

}



.m11-pic-txt .tittle {

    font-family: "Times-Roman";

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

}



.m11-pic-txt .word {

    font-family: "Noto Sans TC";

}





.m12 {

    position: relative;

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

    width: 100%;

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

}



.m12 .slogan-en {

    position: absolute;

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

    top: 0;

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

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

}



.m12-swiper {

    position: absolute;

    top: 0;

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

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

    height: 100%;

}



.m12-swiper .sw-pic {

    position: relative;

    height: 100%;

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

}





.m12 .shadow-bottom {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    mix-blend-mode: multiply;

}



.m12 .shadow-top {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

    mix-blend-mode: multiply;

}



.m12-pic-info {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    box-sizing: border-box;

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

    text-align: end;

}



.m12-pic-info .name {

    position: relative;

    color: #fff;

    font-family: "Noto Sans TC";

    font-weight: 400;

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

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

    letter-spacing: 0.1em;

}



.m12-pic-info .word {

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

    position: relative;

    color: #fff;

    font-family: "Noto Sans TC";

    font-weight: 300;

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

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

    letter-spacing: 0.1em;

}



.m12 .pic-txt {

    left: auto;

    bottom: auto;

    top: 1vw;

    right: 1vw;

}



.m12-txt {

    position: absolute;

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

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

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

}



.m12-txt h2,

.m12-txt h3 {

    color: #4a8487;

    text-align: center;

}



.m12-txt h4 {

    text-align: justify;

}



.m12-txt h4 {

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

    text-align: justify;

}



.m12 .sw-control {

    position: absolute;

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

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

    height: 100%;

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

    /* 稍微加寬增加點擊友善度 */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    z-index: 10;

    /* 確保在 slide 之上 */

}



.m12 .sw-control .swiper-pagination {

    position: static;

    margin: 0;

    display: flex;

    flex-direction: column;

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

    align-items: center;

}



.m13 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m13-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m13-bg img {

    object-position: center bottom;

}



.m13-txt1 {

    position: relative;

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

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

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

}



.m13-txt1 img {

    object-fit: contain;

}



.m13-txt2 {

    position: relative;

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

    color: #9b4c34;

    font-family: "Noto Sans TC";

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

    font-weight: 400;

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

    letter-spacing: 0.05em;

}



.m13-txt3 {

    position: relative;

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

    color: #9b4c34;

    font-family: "Noto Sans TC";

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

    font-weight: 400;

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

    letter-spacing: 0.5em;

}



.m13-pin {

    position: relative;

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

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.m13-pin .pin1 {

    color: #9b4c34;

    font-family: "Noto Sans TC";

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

    font-weight: 400;

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

    letter-spacing: 0.1em;

}



.m13-pin .pin-num {

    color: #9b4c34;

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

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

    font-weight: 400;

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

    letter-spacing: 0.1em;

}



.pin-line {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 1px;

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

    /* background-color: #9b4c34; */

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

}



.pin-line .ani {

    position: absolute;

    left: 0%;

    top: 0%;

    width: 100%;

    height: 100%;

    /* 初始高度直接給100% */

    background-color: #9b4c34;



    /* 關鍵設定 */

    transform: scaleY(0);

    transform-origin: top;

    /* 確保從頂部開始展開 */

    /* transition: transform 1s ease-in-out; */

}



[data-aos="pin-line"] {

    transform: scaleY(0);

}



[data-aos="pin-line"].aos-animate {

    transform: scaleY(1);

}



.m13-txt4 {

    position: relative;

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

    color: #9b4c34;

    font-family: "Noto Sans TC";

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

    font-weight: 300;

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

    letter-spacing: 0.18em;

}



.m13-txt5 {

    position: relative;

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

    color: #9b4c34;

    font-family: "Noto Sans TC";

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

    font-weight: 300;

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

    letter-spacing: 0.1em;

}







.m13-txt5 .phone {

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

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

    font-weight: 300;

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

    letter-spacing: 0.025em;

}





.form-info-icon {

    width: 100%;

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

    position: relative;

    z-index: 20;

    display: flex;

    justify-content: center;

    align-items: center;

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

}



.icons-li {

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

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

    display: block;

    flex-shrink: 0;

    /* 防止圖示被壓縮 */

}



.icons-li img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: contain;

    /* 改為 contain 確保圖示比例不被切掉 */

}







.form-info {

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

    position: relative;

    display: block;

    margin: 0 auto;

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

    z-index: 10;

}



.form-title {

    position: relative;

    width: 100%;

    box-sizing: border-box;

    text-align-last: justify;

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

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0em;

    color: #8f4f38;

    margin-bottom: 0.2vw;

}



.form-container {

    position: relative;

    width: 100%;

    box-sizing: border-box;

}



.input {

    position: relative;

    width: 100%;

    /* height: 10vw; */

    box-sizing: border-box;

    display: flex;

    align-items: center;

    box-sizing: border-box;

    margin-bottom: 0vw;

}



.input label {

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

    position: relative;

    text-align-last: justify;

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

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

    font-family: "Noto Sans TC";

    font-weight: 300;

    letter-spacing: 0em;

    color: #8f4f38;

    padding-right: 0.5vw;

}



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

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

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

    position: relative;

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

    border: none;

    background-color: rgba(210, 148, 127, 0.5);

    color: #fff;

    box-sizing: border-box;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    font-family: 'Noto Sans TC';

    font-weight: 300;

    letter-spacing: 0.1em;

    line-height: 10vw;

    box-sizing: border-box;

    padding: 0 0.5vw;

}



form button,

#submitbtn {

    position: relative;

    appearance: none;

    -webkit-appearance: none;

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

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

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

    border: none;

    outline: none;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;

    background-color: #8f4f38;

    color: #fff;

    letter-spacing: 0.25em;

    font-weight: 300;

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

    font-family: 'Noto Sans TC';

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

    text-align: center;

}





.form-btn {

    position: relative;

    right: 0vw;

    width: 100%;

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

    text-align: center;

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    justify-content: center;



}



.bt_cent {

    position: absolute;

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

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

    left: 0;

    bottom: 3vw;

    z-index: 20;

}



.bt_cent img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    /* 改為 contain 確保圖示比例不被切掉 */

}







.check-item {

    position: relative;

    display: flex;

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

    font-family: 'Noto Sans TC';

    font-weight: 400;

    letter-spacing: 0.2em;

    color: #fff;

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

    cursor: pointer;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.openTxtBtn {

    position: relative;

    display: inline-block;

    letter-spacing: 0.2em;

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

}



.openTxtBtn::before {

    content: '';

    position: absolute;

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

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

    width: 100%;

    height: 1px;

    background-color: #fff;

}



.check-item label input {

    position: relative;

    top: calc(1 * 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: #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(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));

}



.input .check-item-sex {

    position: absolute;

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

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

    display: flex;

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

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

}



.input .check-item-sex label {

    cursor: pointer;

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

    text-align: end;

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

}



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

    position: relative;

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

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

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

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    -webkit-border-radius: 0px;

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

}



















































/*同意書照片預覽*/



.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", serif;

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 80%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

    font-size: 3.2vw;

    padding-inline-start: 7vw;

}



.infoWrap ul>li>ul {

    list-style: none;

    font-size: 3.2vw;

    padding-inline-start: 4vw;

}



.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% - 150px);

    position: absolute;

    left: 50%;

    top: 50%;

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

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

    font-size: 5vw;

    line-height: 130%;

    margin-bottom: 25px;

    text-align: center;

}



.infoBox h4 {

    font-size: 3.2vw;

    line-height: 130%;

    margin-bottom: 25px;

}



.infoBox h5 {

    font-size: 4vw;

    line-height: 130%;

    margin-bottom: 25px;

}



.infoBox p {

    font-size: 3.2vw;

    line-height: 150%;

}



.sw-pic {

    overflow: hidden;

}



/* 輪播圖片縮放動畫：從 1.08 變回 1，動畫 5 秒 (排除 m5) */

.swiper:not(.m5-swiper) .swiper-slide .sw-pic>img:first-child {

    transform: scale(1.08);

    /* 預設放大 1.08 倍 */

    transition: transform 5s ease;

}



/* 作用中的圖片恢復原比例 1 */

.swiper:not(.m5-swiper) .swiper-slide-active .sw-pic>img:first-child,

.swiper:not(.m5-swiper) .swiper-slide-duplicate-active .sw-pic>img:first-child {

    transform: scale(1);

}