/* 字體 */

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

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #efefef;
    --vw-base: calc(100vw / 1920);
}

a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}

img {
    display: block;
    width: 100% !important;
}

.all {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    visibility: hidden;
}

.visible {
    visibility: visible !important;
}


/*loading*/

.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    background-color: #efefef;
}

.spinner {
    width: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pic-txt {
    position: absolute;
    right: 1.5vw;
    bottom: 1.2vw;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9vw;
    letter-spacing: 0.1vw;
}

.video {
    width: 73%;
    height: 41vw;
    position: relative;
    margin: 0 auto 13vw auto;
}

.video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
}

/*頁面1*/

.main1 {
    position: relative;
    width: 100%;
    height: calc(1900*var(--vw-base));
    overflow: hidden;
}

.main1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m1-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.m1-white-block {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.m1-white-block img {
    /* object-fit: contain; */
}

.m1-circle {
    position: absolute;
    right: calc(-15*var(--vw-base));
    top: calc(-20*var(--vw-base));
    width: calc(504*var(--vw-base));
    height: calc(504*var(--vw-base));
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-circle-txt {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(184*var(--vw-base));
    height: calc(273*var(--vw-base));
    transform: translate(-50%, -50%);
}

.m1-circle-txt img {
    object-fit: contain;
}

.m1-card1 {
    position: absolute;
    left: calc(-133*var(--vw-base));
    top: calc(228*var(--vw-base));
    width: calc(1260*var(--vw-base));
    height: calc(1260*var(--vw-base));
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-card2 {
    position: absolute;
    left: calc(265*var(--vw-base));
    top: calc(-602*var(--vw-base));
    width: calc(820*var(--vw-base));
    height: calc(820*var(--vw-base));
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-card3 {
    position: absolute;
    right: calc(-537*var(--vw-base));
    top: calc(540*var(--vw-base));
    width: calc(880*var(--vw-base));
    height: calc(880*var(--vw-base));
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-txt1 {
    position: absolute;
    left: calc(172*var(--vw-base));
    top: calc(637*var(--vw-base));
    width: calc(1017*var(--vw-base));
    /* height: calc(134*var(--vw-base)); */
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-txt2 {
    position: absolute;
    left: calc(172*var(--vw-base));
    top: calc(772*var(--vw-base));
    width: calc(781*var(--vw-base));
    /* height: calc(56*var(--vw-base)); */
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
}

.m1-txt1 img,
.m1-txt2 img {
    object-fit: contain;
}

.m1-light {
    position: absolute;
    left: calc(580*var(--vw-base));
    top: calc(120*var(--vw-base));
    width: calc(1041*var(--vw-base));
    height: calc(753*var(--vw-base));
    /* z-index: -1; */
    opacity: 0;
    /* 預設隱藏 (Initially hidden) */
    mix-blend-mode: screen;
    /* 容器設定濾色 (Screen blend mode on container to avoid black box artifact) */
}

.m1-light img {
    object-fit: contain;
    mix-blend-mode: screen;
}

.m1-word {
    position: absolute;
    left: 0;
    top: calc(1300*var(--vw-base));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m1-word .w1 {
    color: #3d3d3d;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: calc(28*var(--vw-base));
    letter-spacing: 0.05em;
    line-height: calc(55*var(--vw-base));
}

/* ===== main1 動態效果 (Animation Effects) 已改由 GSAP 統一控制 (Controlled via GSAP in index.html) ===== */

/*頁面3*/

.main2 {
    width: 100%;
    height: auto;
    position: relative;
}

.main2-txt {
    width: 45%;
    position: absolute;
    left: 7vw;
    top: 3.5vw;
    font-family: 'Noto Sans JP', sans-serif;
}

.main2-txt h2 {
    font-size: 1.9vw;
    letter-spacing: 0.2vw;
    color: #f4da26;
    font-weight: normal;
    margin: 0;
    line-height: 2.5vw;
    position: relative;
}

.main2-txt h3 {
    font-size: 1.5vw;
    letter-spacing: 0.1vw;
    color: #fff;
    font-weight: normal;
    margin: 0.5vw 0 0 0;
}

.main2-txt h4 {
    width: 100%;
    font-size: 1.25vw;
    letter-spacing: 0.05vw;
    color: #fff;
    font-weight: 300;
    margin: 1.3vw 0 0 0;
    line-height: 2vw;
    text-align: justify;
    text-justify: inter-ideograph;
}


/*頁面3*/

.main3 {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #efefef;
}

.main3-1,
.main3-2,
.main3-3,
.main3-4 {
    width: 86%;
    height: auto;
    margin: 0 auto;
    position: relative;
}

.main3::after,
.main3-1::after,
.main3-2::after,
.main3-3::after,
.main3-4::after {
    content: "";
    clear: both;
    display: block;
}

.main3-txt {
    width: 38%;
    position: relative;
    float: left;
    margin: 0 0 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 14vw 0 0 0;
}

.main3-txt h2 {
    font-size: 1.9vw;
    letter-spacing: 0.2vw;
    color: #03b8df;
    font-weight: normal;
    margin: 0;
    line-height: 2.5vw;
    position: relative;
}

.main3-txt h3 {
    font-size: 1.5vw;
    letter-spacing: 0.1vw;
    color: #313131;
    font-weight: normal;
    margin: 0.5vw 0 0 0;
}

.main3-txt h4 {
    width: 100%;
    font-size: 1.25vw;
    letter-spacing: 0.05vw;
    color: #313131;
    font-weight: 300;
    margin: 1.3vw 0 0 0;
    line-height: 2vw;
    text-align: justify;
    text-justify: inter-ideograph;
}

.main3-banner {
    width: 57%;
    position: relative;
    float: right;
    margin: 8% auto 5vw 0;
    z-index: 9;
}

.main3-2 .main3-banner {
    float: left;
}

.main3-2 .main3-txt {
    float: right;
    padding: 6.6vw 0 0 0;
}

.main3-4 .main3-banner {
    float: left;
}

.main3-4 .main3-txt {
    float: right;
    padding: 16.6vw 0 0 0;
}

.swiper-container {
    overflow: visible;
    padding: 0 0 5vw 0;
}

.swiper-button-prev {
    background-image: url(../img/arrow-l.png);
    width: 2.5vw !important;
    height: 2.5vw !important;
    z-index: 999 !important;
    left: auto;
    right: 3.5vw;
    top: 92%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.swiper-button-next {
    background-image: url(../img/arrow-r.png);
    width: 2.5vw !important;
    height: 2.5vw !important;
    z-index: 999 !important;
    left: auto;
    right: 0;
    top: 92%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.swiper-pagination {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1vw;
    letter-spacing: 0;
    color: #313131;
    width: 4vw;
    position: absolute;
    left: auto;
    right: 6.5vw;
    bottom: 2.3vw;
}

.main3-2 .swiper-button-prev,
.main3-4 .swiper-button-prev {
    right: auto;
    left: 0;
}

.main3-2 .swiper-button-next,
.main3-4 .swiper-button-next {
    right: auto;
    left: 3.5vw;
}

.main3-2 .swiper-pagination,
.main3-4 .swiper-pagination {
    right: auto;
    left: 6.5vw;
}

.main3-banner-en {
    width: 100%;
    position: relative;
    margin: 0 auto 0 auto;
    z-index: 0;
}

.main3-pic {
    width: 12vw;
    position: absolute;
    left: -7vw;
    top: 25vw;
    display: none;
    opacity: 0;
}

.main3-1 .main3-pic {
    transform: rotate(-180deg);
    animation: main31 2s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}

@keyframes main31 {
    0% {
        opacity: 0;
        left: -7vw;
        transform: rotate(-180deg);
    }

    100% {
        opacity: 1;
        left: 24vw;
        transform: rotate(0deg);
    }
}

.main3-2 .main3-pic {
    width: 11vw;
    left: auto;
    right: -2vw;
    top: 3vw;
    transform: rotate(180deg);
    animation: main32 2s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}

@keyframes main32 {
    0% {
        opacity: 0;
        top: 3vw;
        transform: rotate(180deg);
    }

    100% {
        opacity: 1;
        top: 31vw;
        transform: rotate(0deg);
    }
}

.main3-2-pic2 {
    width: 100%;
    position: relative;
    margin: 1.2vw auto 8vw 0;
}

.main3-3 .main3-pic {
    transform: rotate(180deg);
    animation: main33 2s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}

@keyframes main33 {
    0% {
        opacity: 0;
        left: -7vw;
        transform: rotate(-180deg);
    }

    100% {
        opacity: 1;
        left: 24vw;
        transform: rotate(0deg);
    }
}

.main3-4 .main3-pic {
    width: 11vw;
    left: auto;
    right: -2vw;
    top: 3vw;
    transform: rotate(180deg);
    animation: main34 2s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
}

@keyframes main34 {
    0% {
        opacity: 0;
        top: 3vw;
        transform: rotate(180deg);
    }

    100% {
        opacity: 1;
        top: 24vw;
        transform: rotate(0deg);
    }
}

.main3-line {
    width: 86%;
    height: auto;
    margin: 0 auto;
}


/*頁面4*/

.main4 {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #efefef;
    padding: 5vw 0 0 0;
}

.main4-logo {
    width: calc(870*var(--vw-base));
    height: calc(210*var(--vw-base));
    position: relative;
    margin: 0 auto calc(100*var(--vw-base)) auto;
}

.main4-logo .pic {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.main4-logo img {
    object-fit: contain;
}

.main4-txt {
    width: 72%;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.2vw;
    letter-spacing: 0.05vw;
    color: #313131;
    margin: 0 auto 0 auto;
    line-height: 2.8vw;
    transform: scale(1, 1.05) !important;
}

.main4-txt::after {
    content: "";
    clear: both;
    display: block;
}

.main4-txt-li {
    width: 47%;
    padding: 0 1.5vw;
    margin: 0 1.5%;
    border-bottom: 0.5px solid #979797;
    box-sizing: border-box;
    float: left;
}

.main4-txt-li::after {
    content: "";
    display: block;
    clear: both;
}

.main4-txt-li:last-child {
    border-bottom: none;
}

.main4-txt-title {
    width: 30%;
    float: left;
}

.main4-txt-content {
    width: 70%;
    float: left;
}

.infor {
    width: 66%;
    position: relative;
    margin: 5vw auto 5vw auto;
}

.infor-li {
    position: absolute;
    top: 0;
    height: 100%;
    cursor: pointer;
}

.infor1 {
    width: 40%;
    left: 0;
}

.infor2 {
    width: 25%;
    left: 48%;
}

.infor3 {
    width: 18%;
    left: 83%;
}

.main4-line-b {
    width: 2px;
    height: 8vw;
    position: relative;
    margin: 0 auto;
}

.main4-line {
    width: 2px;
    height: 0;
    position: relative;
    margin: 0 auto;
    background-image: url(../img/main4-line_v2.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.form {
    width: 29%;
    height: auto;
    position: relative;
    margin: 2vw auto 0 auto;
    color: #313131;
    font-family: 'Noto Sans JP', sans-serif;
}

.form form {
    position: relative;
}

.form-title {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 auto 4vw auto;
}

.form-title h2 {
    width: 100%;
    text-align: center;
    color: #313131;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.75vw;
    letter-spacing: 0.5vw;
    margin: 0;
    font-weight: normal;
}

.text-input {
    width: 100%;
    height: 3.2vw;
    line-height: 3.2vw;
    color: #313131;
    border: 1.5px solid #989898;
    font-size: 1vw;
    margin-bottom: 1vw;
    padding: 0 0.5vw;
    box-sizing: border-box;
    position: relative;
}

.input-title {
    height: 3.2vw;
    line-height: 3.2vw;
    font-family: 'Noto Sans JP', sans-serif;
    color: #313131;
    letter-spacing: 0.1vw;
    position: absolute;
    left: 1vw;
    top: 0;
}

.input {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.input input {
    width: 100%;
    height: 3.2vw;
    line-height: 3.2vw;
    padding: 0 0 0 6vw;
    border: none;
    color: #313131;
    font-size: 1vw;
    box-sizing: border-box;
    background-color: transparent;
    font-family: 'Noto Sans JP', sans-serif;
    outline: none;
    letter-spacing: 0.1vw;
}

.form input::placeholder {
    color: #313131 !important;
}

.check-item {
    width: 100%;
    height: 3.2vw;
    line-height: 3.2vw;
    margin: 1vw 0 1vw 0;
    vertical-align: middle;
}

.check-item label {
    height: 6.2vw;
    line-height: 3.2vw;
    cursor: pointer;
    font-size: 0.8vw;
    letter-spacing: 0vw;
}

.check-item label input {
    width: 1vw;
    height: 1vw;
    margin: 0 1% -0.7% 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    -moz-appearance: none;
    appearance: none;
    background: url(../img/check.png) no-repeat top center;
    background-size: 1vw 1vw;
    border: none;
    cursor: pointer;
}

.check-item label input:checked {
    background: url("../img/checked.png") no-repeat top center;
    background-size: 1vw 1vw;
}

.form-btn {
    width: 50%;
    float: right;
    position: relative;
    clear: both;
}

.form input[type="button"],
.form input[type="submit"],
.form input[type="reset"] {
    width: 100%;
    background-color: #6c6c6c;
    color: #fff;
    font-family: "DFLiHeiStd-W3";
    outline: none;
    font-size: 1.1vw;
    box-sizing: border-box;
    letter-spacing: 0.2vw;
    line-height: 3.2vw;
    border: none;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    left: 50%;
    top: 0;
    cursor: pointer;
    padding: 0 3%;
}

.openTxtBtn {
    border-bottom: 1px solid #313131;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #313131;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    /*淡淡的白*/
    transition: background-color 5000s ease-in-out 0s;
    /*透明*/
}

.remind {
    width: 100%;
    margin: 1vw 0 0 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9vw;
    letter-spacing: 0.05vw;
    color: #313131;
    line-height: 3vw;
    text-align: center;
}

.main4-map {
    width: 100%;
    height: 19.5vw;
    position: relative;
    margin: 2vw 0 0 0;
    clear: both;
}

.main4-map iframe {
    width: 100%;
    height: 100%;
}

.main4-map img {
    width: 100%;
}

.map1 {
    width: 10.5vw;
    height: 1.7vw;
    display: block;
    position: absolute;
    left: 39.5vw;
    top: 2.3vw;
    cursor: pointer;
}

.map2 {
    width: 10.5vw;
    height: 1.7vw;
    display: block;
    position: absolute;
    left: 54.5vw;
    top: 14.2vw;
    cursor: pointer;
}


/*footer-nav*/

.footer-nav {
    width: auto;
    position: fixed;
    height: auto;
    top: 70%;
    transform: translateY(-50%);
    right: 0;
    z-index: 999;
    box-sizing: border-box;
    visibility: hidden;
}

.footer-nav-all {
    width: 100%;
    margin: 0 auto;
    background-image: url("../img/footer-bg_v2.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.footer-line-img {
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.footer-nav-li {
    width: 100%;
    height: auto;
    position: relative;
    display: block;
    margin: 0 0 0 0;
    padding: 0 0.8vw;
    transition: all 0.5s linear;
    cursor: pointer;
    box-sizing: border-box;
}

.footer-nav-li:hover {
    opacity: 0.7;
}

.footer-nav a {
    color: #3d3d3d;
}

.icon-txt {
    width: 100%;
    position: relative;
    margin: 0.5vw 0 0vw 0;
    padding: 0 0 1.1vw 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.6vw;
    color: #3d3d3d;
    text-align: center;
}

.footer-locate {
    width: 1.1vw;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 1.1vw 0 0 0;
}

.footer-phone {
    width: 1.5vw;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 1.1vw 0 0 0;
}

.footer-book {
    width: 1.4vw;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 1.1vw 0 0 0;
}

.footer-line {
    width: 30%;
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 1.1vw 0 0 0;
}


/*同意書照片預覽*/

.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%;
    cursor: pointer;
}

.infoWrap {
    width: 100%;
    margin: 0 auto;
    max-width: 47%;
    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% - 150px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    color: #fff;
    text-align: left;
}

.infoBox h3 {
    font-size: 1.5vw;
    line-height: 130%;
    margin-bottom: 25px;
    text-align: center;
}

.infoBox h4 {
    font-size: 1.1vw;
    line-height: 130%;
    margin-bottom: 25px;
}

.infoBox h5 {
    font-size: 1.5vw;
    line-height: 130%;
    margin-bottom: 25px;
}

.infoBox p {
    font-size: 1.1vw;
    line-height: 150%;
}

.toast {
    display: none;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 18rem;
    height: 18rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 1rem;
    color: #f0f0f0;
    font-size: 30px;
    z-index: 999;
}