@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");



@font-face {

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

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

}



@font-face {

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

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

}



.Futura-Std-Medium {

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

}





.Futura-Std-Light {

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

}





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

    opacity: 1;

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

    /* 初始状态下完全隐藏 */

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



[data-aos="opacity-left"] {

    opacity: 1;

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

    /* 初始状态下完全隐藏 */

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



[data-aos="opacity-right"] {

    opacity: 1;

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

    /* 初始状态下完全隐藏 */

}



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

    opacity: 1;

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

    /* 显示全部图片 */

}



/* --- 從上往下刷 (TTB) --- */

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

    /* 1. 定義三段式遮罩：透明 | 黑色(顯示) | 透明 */

    -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. 高度設為 300%，寬度 100% */

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

    mask-size: 100% 300%;



    /* 3. 初始位置：讓黑色區塊藏在上方 (顯示透明部分) */

    -webkit-mask-position: 0% 100%;

    mask-position: 0% 100%;



    /* 過渡效果 */

    transition-property: mask-position, -webkit-mask-position, opacity;

}



/* 動態激活時的狀態 */

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

    /* 4. 移動位置：讓黑色區塊覆蓋到圖片上 */

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

    mask-position: 0% 50%;

}



[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.08 -> 1.00) */

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

    opacity: 0;

    transform: scale(1.08);

    transition-property: transform, opacity;

}



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

    opacity: 1;

    transform: scale(1);

}







body,

html {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

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

    /* 防止 iOS 橫屏時字體變大 */

    -webkit-text-size-adjust: none;

    /* 防止某些瀏覽器自動縮放字體 */

    text-size-adjust: none;

    background-color: #000;

}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

    font-weight: 100;

}



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,

video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}





.pic-txt {

    position: absolute;

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

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

    color: #fff;

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

    font-family: "Noto Sans TC";

    font-weight: 400;

    letter-spacing: 0.1em;

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

    z-index: 10;

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

}



.fz-17 {

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

}



.sw-prev {

    position: absolute;

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

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

    left: 0;

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

    margin: 0;

    z-index: 990 !important;

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

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.sw-next {

    position: absolute;

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

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

    right: 0;

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

    margin: 0;

    z-index: 990 !important;

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

    background-repeat: no-repeat;

    background-position: center center;

    background-size: contain;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.voice,

.voice2 {

    width: 2vw;

    z-index: 9;

    color: #fff;

    position: absolute;

    right: 2vw;

    bottom: 10vw;

    cursor: pointer;

}





.haveVoice,

.noVoice {

    width: 100%;

    position: relative;

}



.haveVoice2,

.noVoice2 {

    width: 100%;

    position: relative;

}



.main-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}





.side-menu {

    position: fixed;

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

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

    z-index: 100;

    display: flex;

    flex-direction: column;

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s ease, visibility 0s linear 0.3s;

}



.side-menu.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition: opacity 0.3s ease;

}



.side-menu-button {

    display: flex;

    align-items: center;

    justify-content: center;

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

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

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

    background-color: #7c7c7c83;

}



.side-menu-button img {

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

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

    object-fit: contain;

}





.container {

    width: 100%;

    height: auto;

    position: relative;

    background-color: #121212;

}



.container .en-title {

    position: relative;

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

    color: #7d8dad;

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

    line-height: 1.15em;

    letter-spacing: 0.1em;

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

}



.container .en-title.orange {

    color: #ee5a24;

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

}



.container .cn-title {

    position: relative;

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

    color: #7d8dad;

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

    line-height: 1.15em;

    letter-spacing: 0.1em;

    font-family: "Noto Sans TC";

    font-weight: 500;

}



.container .cn-title .fw-300 {

    font-weight: 300;

}



.container .cn-title.orange {

    color: #ee5a24;

    font-weight: 500;

}



.container .contain {

    position: relative;

    /* margin: 0 auto; */

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

}





.container p {

    color: #ffffff;

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

    font-weight: 300;

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

    letter-spacing: 0.1em;

    text-align: justify;

}



.fw-500 {

    font-weight: 500;

}



.m1 h1 {

    position: absolute;

    bottom: -200px;

    left: 0;



}



.m1 {

    position: relative;

    width: 100%;

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

    /* 白色背景開始 */

    overflow: hidden;

}



.m1-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m1-logo {

    position: absolute;

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

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

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

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

}



.m1-logo img {

    object-fit: contain;

}





.m2 {

    position: relative;

    width: 100%;

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

    /* 白色背景開始 */

    overflow: clip;

    overflow-y: visible;

    display: flex;

    flex-direction: column;

    align-items: center;

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



}



.m2-bg1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

}



.m2-bg2 {

    position: absolute;

    left: 0;

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

    width: 100%;

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

    overflow: hidden;

}



.m2-bg2>img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: none;

}



.m2-bg2.m2-water-active>img {

    filter: url(#m2-water-ripple);

}



.m2-water-filter {

    position: absolute;

    width: 0;

    height: 0;

    pointer-events: none;

}



.m2-vl-box {

    position: relative;

    width: 100%;

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

    display: flex;

    justify-content: center;

    align-items: center;

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

}



.m2-vl-box .t1,

.m2-vl-box .t2 {

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

    font-weight: 300;

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

    letter-spacing: 0.1em;

    /* writing-mode: vertical-lr; */

    color: #ffffff;

    padding-right: 0.1em;

}



.m2-vl-box .line {

    position: relative;

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

    height: 1px;

    opacity: 0.4;

}



.m2-vl-box .line .ani {

    width: 100%;

    height: 100%;

    background-color: #fff;

}



.m2 .contain {

    position: absolute;

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

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

}



.m2 .contain p {

    text-align: start;

}



.m2-video-box {

    position: absolute;

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

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

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

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

    overflow: hidden;

}



.m2-video-ani {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 0;

    overflow: hidden;

}



.m2-video {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

}



.video-cover {

    position: absolute;

    inset: 0;

    z-index: 5;

    display: block;

    width: 100%;

    height: 100%;

    padding: 0;

    overflow: hidden;

    border: 0;

    background: #111;

    cursor: pointer;

    touch-action: manipulation;

}



.video-cover[hidden] {

    display: none;

}



.video-cover img {

    pointer-events: none;

}



.video-cover:focus-visible {

    outline: calc(4*var(--vw-base)) solid #fff;

    outline-offset: calc(-8*var(--vw-base));

}



.video-cover-play {

    position: absolute;

    top: 50%;

    left: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

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

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

    border: calc(3*var(--vw-base)) solid rgba(255, 255, 255, 0.9);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.28);

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

    pointer-events: none;

}



.video-cover-play::before {

    content: "";

    width: 0;

    height: 0;

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

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

    border-bottom: calc(18*var(--vw-base)) solid transparent;

    border-left: calc(27*var(--vw-base)) solid #fff;

}



.m3 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m3 .contain {

    position: absolute;

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

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

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

    text-align: justify;

}



.m3 .pic {

    position: absolute;

    right: 0;

    top: 0;

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

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

}





.m4 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}





.m4 .contain {

    position: absolute;

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

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

    text-align: justify;

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

}



.m4 .contain .en-title {

    letter-spacing: 0;



}



.m4 .pic {

    position: absolute;

    top: 0;

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

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

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

}



.m5 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m5 .contain {

    position: absolute;

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

    top: 0;



}



.m5 .japan-title {

    display: flex;

    align-items: center;

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

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

}



.m5 .contain .en-title {

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

    letter-spacing: 0;

    text-align-last: justify;

}



.m5 .contain .cn-strong {

    color: #ee5a24;

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

    font-weight: 300;

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

    letter-spacing: 0.12em;

}



.m5 .contain .cn-title {

    /* letter-spacing: 0;

    text-align-last: justify; */

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

}





.m5 .contain p {

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

}



.m5 .swiper {

    position: absolute;

    right: 0;

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

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

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

}



.m5 .swiper .swiper-slide,

.m6 .swiper .swiper-slide,

.m7 .swiper .swiper-slide,

.m8 .swiper .swiper-slide {

    width: auto;

    height: 100%;

}



.m5 .swiper .swiper-slide .pic,

.m6 .swiper .swiper-slide .pic,

.m7 .swiper .swiper-slide .pic,

.m8 .swiper .swiper-slide .pic {

    position: relative;

    width: max-content;

    height: 100%;

    overflow: hidden;

}



.m5 .swiper .swiper-slide .pic>img,

.m6 .swiper .swiper-slide .pic>img,

.m7 .swiper .swiper-slide .pic>img,

.m8 .swiper .swiper-slide .pic>img {

    width: auto;

    height: 100%;

    max-width: none;

}



.m5 .swiper .swiper-slide.double {

    display: flex;

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

    /* justify-content: space-between; */

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

}



.m5 .swiper .swiper-slide.double .pic {

    position: relative;

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

    height: 100%;

}



.m6 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m6 .contain {

    position: absolute;

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

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

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



}



.m6 .contain .cn-title {

    /* letter-spacing: 0;

    text-align-last: justify; */

}





.m6 .swiper {

    position: absolute;

    left: 0;

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

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

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

}





.m7 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m7 .contain {

    position: absolute;

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

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

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



}



.m7 .contain .cn-title {

    /* letter-spacing: 0;

    text-align-last: justify; */

}





.m7 .swiper {

    position: absolute;

    right: 0;

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

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

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

}







.m8 {

    position: relative;

    width: 100%;

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

    overflow: hidden;

}



.m8 .contain {

    position: absolute;

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

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

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



}



.m8 .contain .cn-title {

    /* letter-spacing: 0;

    text-align-last: justify; */

}





.m8 .swiper {

    position: absolute;

    left: 0;

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

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

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

}



.m9 {

    position: relative;

    width: 100%;

    overflow: hidden;

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

}





.m9 .contain {

    position: absolute;

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

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

    /* text-align: justify; */

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

}



.m9 .contain .cn-title {

    text-align: start;

}



.m9 .contain p {

    /* letter-spacing: 0.075em; */

}



.m9 .pic {

    position: absolute;

    right: 0;

    top: 0;

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

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



}





.m10 {

    position: relative;

    width: 100%;

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

    /* 白色背景開始 */

    overflow: clip;

    overflow-y: visible;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 10;

    background-color: #000;

}





.m10 .contain {

    position: absolute;

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

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

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



}



.m10 .contain .cn-title {

    text-align: start;

    line-height: 1.4em;

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

}



.m10 .contain p {

    letter-spacing: 0.1em;

}



.m10 .pic {

    position: absolute;

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

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

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

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

    overflow: hidden;



}



.m10-video-ani {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 0;

    overflow: hidden;

}



.m10-video {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

}



.m10-bg {

    position: absolute;

    left: 0;

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

    width: 100%;

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

    overflow: hidden;

}



.m10-bg>img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: none;

}



.m10-bg.m10-water-active>img {

    filter: url(#m10-water-ripple);

}



.m10-water-filter {

    position: absolute;

    width: 0;

    height: 0;

    pointer-events: none;

}





.m11 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    overflow: hidden;

    z-index: 12;

}



.m11-bg1 {

    position: absolute;

    left: 0;

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

    width: 100%;

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

    z-index: -1;

}





.m11-bg2 {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

    overflow: hidden;

}



.m11-bg2>img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.03);

    transform-origin: center center;

    filter: none;

}



.m11-bg2.m11-water-active>img {

    filter: url(#m11-water-ripple);

}



.m11-water-filter {

    position: absolute;

    width: 0;

    height: 0;

    pointer-events: none;

}



.build-info {

    position: absolute;

    left: 0;

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

    width: 100%;

    color: #ee5a24;

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

    font-weight: 300;

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

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

    letter-spacing: 0.1em;

    text-align: center;

    z-index: 10;

}



.m11-slogan {

    position: relative;

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

    width: 100%;

    display: flex;

    flex-direction: column;

    /* align-items: center; */

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

}



.m11-slogan .en {

    position: relative;

    left: calc(50% - 10 * var(--vw-base));

    color: #ffffff;

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

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

    line-height: 1.6em;

    letter-spacing: 0.1em;

    /* text-align: center; */

}



.m11-slogan .line {

    position: relative;

    align-self: center;

    width: 1px;

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

    opacity: 0.4;

}



.m11-slogan .line .ani {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: #ffffff;

}



.m11-door-txt {

    position: relative;

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

    color: #ffffff;

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

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

    font-weight: 500;

    line-height: 1.6em;

    letter-spacing: 0.1em;

    text-align: center;

}



.m11-logo {

    position: relative;

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

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

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

}



.m11-logo img {

    /* object-fit: contain; */

}



.m11-pin {

    position: relative;

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

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

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

}



.m11-icon {

    position: relative;

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

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

}



.m11-icon .phone {

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

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

}



.m11-icon .map {

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

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

}



.m11-icon .phone-num {

    position: relative;

    display: block;

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

    color: #7d8dad;

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

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

    /* font-family: "Fu", sans-serif; */

    /* font-weight: 500; */

    line-height: 1.6em;

    letter-spacing: 0.20em;

    text-align-last: center;

    padding-left: 0.02em;



}





.form {

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

    height: auto;

    position: relative;

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

    z-index: 20;

    color: #7d8dad;

    font-family: 'Noto Sans TC', sans-serif;

}



.form form {

    position: relative;

}



.form-title {

    width: 100%;

    height: auto;

    position: relative;

    margin: 0 auto;

    text-align: center;

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

    letter-spacing: 0.5vw;

    white-space: nowrap;

    text-align: justify;

    text-align-last: justify;

    text-justify: inter-ideograph;

}



.form-title h2 {

    margin: 0;

    line-height: 7vw;

    letter-spacing: 0.9vw;

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

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

    font-weight: normal;

    position: relative;

}



.form-title h2::before {

    content: "";

    width: 0.5px;

    position: absolute;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 4vw;

    background-color: #7d8dad;

}



.form-title h2::after {

    content: "";

    width: 0.5px;

    position: absolute;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    height: 4vw;

    background-color: #7d8dad;

}



.form-title h4 {

    margin: 0;

    line-height: 5vw;

    letter-spacing: 0vw;

    text-indent: 0;

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

    font-weight: 300;

    text-align: center;

    color: #7d8dad;

    font-family: 'Noto Sans TC', sans-serif;

}



.text-input {

    width: 99%;

    height: 3vw;

    line-height: 3vw;

    margin-bottom: 0.5vw;

    position: relative;

    padding: 0;

    box-sizing: border-box;

}



.input-title {

    width: 33%;

    height: 3vw;

    line-height: 3vw;

    float: left;

    letter-spacing: 0.05vw;

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

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: 300;

    color: #7d8dad;

}



.input {

    width: 67%;

    height: 3vw;

    line-height: 3vw;

    float: left;

    position: relative;

    overflow: hidden;

    box-sizing: border-box;

}



.input::after {

    content: "";

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 5%;

    height: 1px;

    background-color: #7d8dad;

}



.check-item-time::after {

    background-color: transparent;

}



.input input {

    width: 100%;

    height: 3vw;

    line-height: 3vw;

    padding: 0 0 0 2%;

    box-sizing: border-box;

    border: none;

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

    background-color: transparent;

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: 300;

    outline: none;

    letter-spacing: 0.3vw;

    color: #7d8dad;

}



.form input::placeholder {

    color: #7d8dad !important;

}



.form-btn {

    width: 65%;

    margin: 2.5vw auto 0 auto;

    position: relative;

}



.form input[type="button"],

.form input[type="submit"],

.form input[type="reset"] {

    width: 100%;

    background-color: transparent;

    color: #000;

    background-color: #7d8dad;

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

    outline: none;

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

    box-sizing: border-box;

    letter-spacing: 0.25vw;

    line-height: 2.5vw;

    border: none;

    border-radius: 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    position: relative;

    cursor: pointer;

    padding-top: 0vw;

}



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus,

input:-webkit-autofill:active {

    -webkit-text-fill-color: #7d8dad;

    -webkit-box-shadow: 0 0 0px 1000px transparent inset;

    /*淡淡的白*/

    transition: background-color 5000s ease-in-out 0s;

    /*透明*/

}



.check-item-time {

    overflow: hidden;

}



.check-item-time label {

    width: 45%;

    height: 7vw;

    line-height: 7vw;

    cursor: pointer;

    font-size: 4.7vw;

    display: block;

    float: left;

}



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

    width: 4vw;

    height: 4vw;

    margin: 0 0 -0.5% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background: url(../img/check.png) no-repeat top center;

    background-size: 4vw 4vw;

    border: none;

    cursor: pointer;

}



.check-item-time label input[type="radio"]:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 4vw 4vw;

}



.input select {

    width: 100%;

    height: 7vw;

    line-height: 7vw;

    box-sizing: border-box;

    letter-spacing: 0.3vw;

    font-size: 4.7vw;

    border: none;

    background-color: transparent;

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: 300;

    outline: none;

    color: #7d8dad;

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    padding: 0 0 0 2%;

}



/* 聯絡時段自訂樣式 */

.text-input.time-section {

    height: auto;

    margin: 0.5vw 0;

}



.text-input.time-section::after {

    content: "";

    display: table;

    clear: both;

}



.text-input.time-section .input-title {

    height: 3vw;

    line-height: 3vw;

}



.time-content {

    width: 67%;

    float: left;

    box-sizing: border-box;

}



.time-checkboxes {

    width: 100%;

    height: 3vw;

    display: flex;

    align-items: center;

    gap: 3vw;

}



.time-checkboxes label {

    display: flex;

    align-items: center;

    cursor: pointer;

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

    font-weight: 300;

    color: #7d8dad;

}



.time-checkboxes label input[type="checkbox"] {

    width: 1.35vw;

    height: 1.35vw;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background: url(../img/check.png) no-repeat center center;

    background-size: 1.35vw 1.35vw;

    border: none;

    cursor: pointer;

    padding-right: 2vw;

}



.time-checkboxes label input[type="checkbox"]:checked {

    background: url("../img/checked.png") no-repeat center center;

    background-size: 1.35vw 1.35vw;

}



.time-range {

    width: 100%;

    height: 3vw;

    display: flex;

    align-items: center;

    margin-top: 0vw;

}



.hour-input-wrap {

    width: 18vw;

    height: 3vw;

    position: relative;

    box-sizing: border-box;

}



.hour-input-wrap::after {

    content: "";

    width: 100%;

    position: absolute;

    left: 0;

    bottom: 5%;

    height: 1px;

    background-color: #7d8dad;

}



.hour-input-wrap input {

    width: 100%;

    height: 3vw;

    line-height: 3vw;

    border: none;

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

    background-color: transparent;

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: 300;

    outline: none;

    color: #7d8dad;

    text-align: center;

}



.time-txt {

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

    font-weight: 300;

    color: #7d8dad;

    margin-left: 0.5vw;

    margin-right: 0.5vw;

}



.time-split {

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

    font-weight: 300;

    color: #7d8dad;

    margin-right: 1vw;

}



.input.check-item-time {

    border: none;

}



.check-item {

    position: relative;

    margin: 1.5vw auto 0 auto;

    color: #7d8dad;

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

    line-height: 3vw;

    cursor: pointer;

    overflow: hidden;

    letter-spacing: 0.1vw;

    font-family: 'Noto Sans TC', sans-serif;

    font-weight: 300;

}



.check-label {

    white-space: nowrap;

    cursor: pointer;

}



.check-item-txt {

    cursor: pointer;

    float: left;

    padding-left: 0.5vw;

}



.check-item label input {

    width: 1.35vw;

    height: 1.35vw;

    margin: 0.85vw 0 0% 0;

    -webkit-appearance: none;

    -webkit-border-radius: 0px;

    -moz-appearance: none;

    appearance: none;

    background: url(../img/check.png) no-repeat top center;

    background-size: 1.35vw 1.35vw;

    border: none;

    cursor: pointer;

    float: left;

}



.check-item label input:checked {

    background: url("../img/checked.png") no-repeat top center;

    background-size: 1.35vw 1.35vw;

}







































































.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: "微軟正黑體";

}



.closeBtn {

    width: 30px;

    position: absolute;

    right: 5%;

    top: 4%;

}



.infoWrap {

    width: 100%;

    margin: 0 auto;

    max-width: 78%;

    position: relative;

    height: 100vh;

    overflow: auto;

}



.infoWrap ul {

    list-style: none;

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

    padding-inline-start: 3vw;

    line-height: 150%;

}



.infoWrap ul>li>ul {

    list-style: none;

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

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

    position: absolute;

    left: 50%;

    top: 50%;

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

    overflow-y: auto;

    color: #fff;

    text-align: left;

}



.infoBox h3 {

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

    line-height: 150%;

    margin-bottom: 1vw;

    text-align: center;

}



.infoBox h4 {

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

    line-height: 130%;

    margin: 1vw 0;

}



.infoBox h5 {

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

    line-height: 130%;

    margin-bottom: 1vw;

}



.infoBox p {

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

    line-height: 200%;

}