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

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

}



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

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

    color: #fff;

    font-size: calc(18* 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;

}





.sw-prev {

    position: absolute;

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

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

    left: 0;

    top: calc(50% - 1vw);

    margin: 0;

    z-index: 990 !important;

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

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.sw-next {

    position: absolute;

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

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

    right: 0;

    top: calc(50% - 1vw);

    margin: 0;

    z-index: 990 !important;

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

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    overflow: hidden;

    transition: all 0.3s ease;

    cursor: pointer;

}



.container {

    width: 100%;

    height: auto;

    position: relative;

    /* background-color: #000; */

}



.fw-500 {

    font-weight: 500;

}



.m1 {

    position: relative;

    width: 100%;

    height: calc(1214* 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;

}



.m1-txt {

    position: absolute;

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

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

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 300;

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

    letter-spacing: 0.2em;

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

    display: flex;

    flex-direction: column;

    align-items: end;

}



.m1-txt .t2 {

    font-weight: 500;

}



.m1-mask {

    width: 100%;

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

    position: absolute;

    left: 0;

    bottom: 0;

}



.m1-mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}









.m2 {

    position: relative;

    width: 100%;

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

}



.m2-video {

    position: absolute;

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

    top: 0;

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

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

}



.m2-txt {

    position: absolute;

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

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

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 100;

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

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

    letter-spacing: 0.08em;

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

    text-align: left;

}







.m3 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m3-video {

    position: relative;

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

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

}











.m4 {

    position: relative;

    width: 100%;

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

}



.m4-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

}



.m4-mask {

    width: 100%;

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

    position: absolute;

    left: 0;

    top: 0;

}



.m4-mask img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.m4-txt {

    position: relative;

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 200;

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

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

    letter-spacing: 0.1em;

    text-align: center;

}



.m4-txt.txt1 {

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

}







.m5 {

    position: relative;

    width: 100%;

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

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m5-bg1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

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

}



.m5-bg2 {

    position: absolute;

    left: 0;

    bottom: 0;

    width: 100%;

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

}



.m5-title {

    position: relative;

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

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.m5-title .en {

    color: #ffffff;

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

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

    letter-spacing: 0.1em;

    line-height: 1.2em;

}



.m5-title .cn {

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

    color: #ffffff;

    font-family: "Noto Sans TC";

    font-weight: 300;

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

    letter-spacing: 0.1em;

    line-height: 1.2em;

}



.m5-logo {

    position: relative;

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

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

}



.m5-pin {

    position: relative;

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

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

}



.m5-icon {

    position: relative;

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

    width: 100%;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

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

}



.m5-icon .phone {

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

}



.build-info {

    position: absolute;

    left: 0;

    bottom: 4vw;

    width: 100%;

    color: #7d8dad;

    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;

}



.form {

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

    height: auto;

    position: relative;

    margin: 0 0 10vw 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-Book";

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

    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;

}



/* 水波遮罩效果樣式 */

.water_mask {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 5;

}



img#w1 {

    width: 101vw;

    position: absolute;

    top: 0vh;

    left: 0vw;

    -o-object-fit: cover;

    object-fit: cover;

    filter: url(#water1);

}





/*同意書照片預覽*/



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

}



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

}



.gre-box {

    position: relative;

    margin-top: 2vw;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}





@media screen and (min-width: 1220px) {

    .gre-box .g-recaptcha {

        scale: 100%;

    }



}



@media (min-width: 924px) and (max-width: 1219px) {

    .gre-box .g-recaptcha {

        scale: 80%;

    }

}



@media (min-width: 300px) and (max-width: 923px) {

    .gre-box .g-recaptcha {

        scale: 70%;

    }

}