@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: "Mundial-Hair";
    src: url(../fonts/MundialHair.otf);
}

@font-face {
    font-family: "Mundial-Thin";
    src: url(../fonts/MundialThin.otf);
}

@font-face {
    font-family: "Mundial-Light";
    src: url(../fonts/MundialLight.otf);
}

@font-face {
    font-family: "Mundial-Regular";
    src: url(../fonts/MundialRegular.otf);
}

/* @font-face {
    font-family: "Futura-Light";
    src: url(../fonts/Futura\ Std\ Light.otf);
} */

@font-face {
    font-family: "Futura-Medium";
    src: url(../fonts/Futura\ Std\ Medium.otf);
}

.mundial-hair {
    font-family: "Mundial-Hair";
}


.mundial-thin {
    font-family: "Mundial-Thin";
}

.mundial-light {
    font-family: "Mundial-Light";
}

.mundial-regular {
    font-family: "Mundial-Regular";

}

.futura-medium {
    font-family: "Futura-Medium";
}

.futura-light {
    font-family: "Futura-Light";
}

body,
html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    --vw-base: calc(100vw / 1920);
}

body>* {}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-style: normal;
}

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

button,
input,
textarea,
select,
option {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border-radius: 0;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pic-txt {
    position: absolute;
    bottom: calc(10* 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.05em;
    line-height: calc(20* var(--vw-base));
    z-index: 10;
    text-shadow: #4e484698 1px 1px 1px;
}

.word-x {
    position: relative;
    display: inline-block;
    padding: 0 0.2em 0 calc(3*var(--vw-base));

}

h2.page-title {
    position: relative;
    /* width: calc(743*var(--vw-base)); */
    color: #4dbaab;
    font-size: calc(31*var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 500;
    line-height: 1.67em;
    letter-spacing: 0.025em;
    display: flex;
    flex-direction: column;
}

h2.page-title span {
    display: inline-block;
}

p.page-desc {
    position: relative;
    color: #000000;
    font-size: calc(25*var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    line-height: 1.72em;
    letter-spacing: 0.025em;
    text-align: justify;
}

/*內容*/
.container {
    position: relative;
    width: 100%;
    height: auto;
    /* opacity: 0; */
}

.nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 9000;
    width: 100%;
    height: calc(110*var(--vw-base));
    background: url("../img/nav-bg.svg") center / cover no-repeat;
    transform: translateY(-100%);
    transition: transform 0.45s ease;
}

.nav.show {
    transform: translateY(0);
}

.nav-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 calc(50*var(--vw-base));
}

.nav-logo,
.nav-logo img {
    display: block;
    width: calc(65*var(--vw-base));
    height: calc(65*var(--vw-base));
}

.nav-links {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(12*var(--vw-base));
    min-height: calc(42*var(--vw-base));
    padding: 0 calc(24*var(--vw-base));
    border-right: 1px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    font-family: "Mundial-Thin", sans-serif;
    font-size: calc(20*var(--vw-base));
    font-weight: 300;
    line-height: 1;
    white-space: nowrap;
}

.nav-item.smallicon {
    gap: calc(4*var(--vw-base));
}

.nav-item:last-child {
    padding-right: 0;
    border-right: 0;
}

.nav-item img {
    flex: 0 0 auto;
    width: calc(25*var(--vw-base));
    height: calc(25*var(--vw-base));
    object-fit: contain;
}

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

.main1 .txt {
    position: absolute;
    left: calc(206*var(--vw-base));
    top: 50%;
    transform: translateY(-50%);
}

.main1 .txt .en {
    position: relative;
    color: #4d4d4d;
    font-family: "Mundial-Thin";
    font-size: calc(81*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.04em;
}

.main1 .txt .cn1 {
    position: relative;
    margin-top: calc(20*var(--vw-base));
    color: #4dbaab;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.main1 .txt .cn2 {
    position: relative;
    margin-top: calc(43*var(--vw-base));
    color: #1a1a1a;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(23*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.1em;
}

.main1 .logo-pic {
    position: absolute;
    left: calc(1136*var(--vw-base));
    top: calc(50% - 213.5*var(--vw-base));
    width: calc(427*var(--vw-base));
    height: calc(427*var(--vw-base));

}

.main1 .word-x {
    width: calc(15*var(--vw-base));
    height: calc(15*var(--vw-base));
}

/* Main1: loading-linked letter reveal and a fixed silhouette colour wash. */
.main1 .en {
    visibility: hidden;
}

.main1.hero-ready .en {
    visibility: visible;
}

.main1 .hero-letter-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.main1 .hero-letter {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 115%, 0);
}

.main1 .cn1,
.main1 .cn2,
.main1 .logo-pic {
    opacity: 0;
}

.main1 .logo-pic {
    background: #4dbaab;
    transform: scale(1.08);
    rotate: -180deg;
    transform-origin: center;
    -webkit-mask: url("../img/m1-main-circle.svg") center / 100% 100% no-repeat;
    mask: url("../img/m1-main-circle.svg") center / 100% 100% no-repeat;
}

.main1 .logo-pic img {
    opacity: 0;
}

.main1 .hero-colour {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .7) 45%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .7) 45%, transparent 60%);
    -webkit-mask-size: 100% 300%;
    mask-size: 100% 300%;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.main1 .hero-colour::before {
    content: "";
    position: absolute;
    left: -141.42%;
    top: -141.42%;
    width: 241.42%;
    height: 241.42%;
    background: repeating-linear-gradient(to bottom right,
            #51a4db 0%,
            #50a8d0 14.645%,
            #4db5b5 29.289%,
            #4dbaab 43.934%,
            #51a4db 58.579%);
}

.main1.hero-started .hero-letter {
    animation: hero-letter-reveal 1.1s cubic-bezier(.22, 1, .36, 1) calc(var(--letter-delay) + 0.2s) both;
}

.main1.hero-started .cn1 {
    animation: hero-fade-up 1.2s cubic-bezier(.22, 1, .36, 1) var(--hero-midpoint) both;
}

.main1.hero-started .logo-pic {
    animation: m1-ring-fade 0.6s ease var(--hero-midpoint) both,
        m1-ring-scale 1.6s cubic-bezier(0.45, 0, 0.15, 1) var(--hero-midpoint) both,
        m1-ring-spin 10s ease-out var(--hero-midpoint) both;
}

.main1.hero-started .cn2 {
    animation: hero-fade-in 1.2s ease var(--hero-company-delay) both;
}

.main1.hero-started .hero-colour {
    animation: hero-colour-wash 0.75s ease-out var(--hero-colour-delay) both;
}

.main1.hero-started .hero-colour::before {
    animation: hero-colour-flow 6s linear var(--hero-colour-delay) infinite;
}

@keyframes hero-colour-flow {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(58.579%, 58.579%);
    }
}

@keyframes m1-ring-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes m1-ring-scale {
    from {
        transform: scale(1.08);
        animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    }

    45% {
        transform: scale(0.95);
    }

    55% {
        transform: scale(0.95);
        animation-timing-function: ease-in-out;
    }

    to {
        transform: scale(1);
    }
}

@keyframes m1-ring-spin {
    from {
        rotate: -180deg;
    }

    to {
        rotate: 0deg;
    }
}

@keyframes hero-letter-reveal {
    from {
        opacity: 0;
        transform: translate3d(0, 115%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(calc(24 * var(--vw-base)));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes hero-colour-wash {
    from {
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }

    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

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

}

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

.main2 .main-bg video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main2 .txt {
    position: relative;
    padding-top: calc(370*var(--vw-base));
    margin: 0 auto;
    width: calc(743*var(--vw-base));
    color: #fff;
    font-size: calc(25*var(--vw-base));
    font-family: "Noto Sans TC";
    font-weight: 300;
    line-height: 1.8em;
    letter-spacing: 0.03em;
    text-align: center;
}

.main2 .txt .m2-line {
    display: block;
}

.main2 .txt .m2-line-intro {
    margin-bottom: 1.8em;
}

.main2 .txt .m2-line-outro {
    margin-top: 1.8em;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(100*var(--vw-base));
    box-sizing: border-box;

}

.swiper.left-swiper .swiper-slide {
    padding-left: calc(110*var(--vw-base));
}

.swiper.right-swiper .swiper-slide {
    padding-left: calc(90*var(--vw-base));
}


.swiper .sw-txt {
    position: relative;
    width: calc(515*var(--vw-base));
}

.swiper .sw-txt .page-desc {
    margin-top: calc(55*var(--vw-base));
}

.swiper .sw-pic {
    position: relative;
    width: calc(1120*var(--vw-base));
    height: calc(750*var(--vw-base));
}

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

.main3 .swiper .swiper-slide {
    position: relative;
    display: flex;
}

.swiper .sw-pic {
    overflow: hidden;
}

.swiper .sw-prev,
.swiper .sw-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(24*var(--vw-base));
    height: calc(57*var(--vw-base));
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 10;
}

.swiper .sw-prev {
    left: calc(10*var(--vw-base));
}

.swiper .sw-next {
    right: calc(10*var(--vw-base));
}

.swiper .sw-prev img,
.swiper .sw-next img {
    object-fit: contain;
}

.swiper .m3-pagination,
.swiper .m4-pagination {
    position: absolute;
    top: 92.36%;
    bottom: auto;
    left: 50%;
    width: auto;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.swiper .m3-pagination .swiper-pagination-bullet,
.swiper .m4-pagination .swiper-pagination-bullet {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cccccc;
    opacity: 1;
    cursor: pointer;
}

.swiper .m3-pagination .swiper-pagination-bullet-active,
.swiper .m4-pagination .swiper-pagination-bullet-active {
    background: #4d4d4d;
}

.swiper button:focus-visible {
    outline: 2px solid #4dbaab;
    outline-offset: 5px;
}

.swiper .swiper-button-lock,
.swiper .swiper-pagination-lock {
    display: none;
}

.motion-ready [data-motion="fade-up"],
.motion-ready [data-motion="fade-down"],
.motion-ready [data-motion="fade-in"],
.motion-ready [data-motion="fade-right"],
.motion-ready [data-motion="fade-left"],
[data-motion-section] [data-motion="fade-up"],
[data-motion-section] [data-motion="fade-down"],
[data-motion-section] [data-motion="fade-in"],
[data-motion-section] [data-motion="fade-right"],
[data-motion-section] [data-motion="fade-left"] {
    opacity: 0;
}

.motion-ready [data-motion="zoom-out"],
[data-motion-section] [data-motion="zoom-out"] {
    transform: scale(1.06);
}

.motion-ready [data-motion="pulse-opacity"],
[data-motion-section] [data-motion="pulse-opacity"] {
    opacity: 0;
}

.motion-hold [data-motion="fade-up"],
.motion-hold [data-motion="fade-down"],
.motion-hold [data-motion="fade-in"],
.motion-hold [data-motion="fade-right"],
.motion-hold [data-motion="fade-left"] {
    opacity: 1;
}

.motion-hold [data-motion="zoom-out"] {
    transform: scale(1);
}

.motion-hold [data-motion="pulse-opacity"] {
    opacity: 0;
}

.motion-ready [data-motion="line-expand"] {
    transform: scaleX(0);
    transform-origin: center;
}

[data-motion-section] [data-motion="line-expand"] {
    transform: scaleX(0);
    transform-origin: center;
}

.motion-hold [data-motion="line-expand"] {
    transform: scaleX(1);
}

.main9.motion-hold .main-pic .pic,
.main9.motion-hold .main-pic .pic-txt {
    opacity: 0;
    animation: none;
}

.is-animating [data-motion="fade-up"],
.motion-active [data-motion="fade-up"] {
    animation: motion-fade-up 1.2s ease both;
    animation-delay: var(--motion-delay, 0.2s);
}

.is-animating [data-motion="fade-down"],
.motion-active [data-motion="fade-down"] {
    animation: motion-fade-down 1.2s ease both;
    animation-delay: var(--motion-delay, 0.2s);
}

.main1 .txt,
.main2 .txt,
.main3 .sw-txt,
.main4 .sw-txt,
.main5 .txt,
.main6 .main-txt,
.main7 .main-txt,
.main8 .main-txt,
.main9 .main-txt {
    translate: 0 var(--scroll-follow-y, 0px);
}

.is-animating [data-motion="zoom-out"],
.motion-active [data-motion="zoom-out"] {
    animation: motion-zoom-out 4s ease-out both;
}

.motion-active [data-motion="fade-in"] {
    animation: motion-fade-in 1s ease var(--motion-delay, 0s) both;
}

.motion-active [data-motion="fade-right"] {
    animation: motion-fade-right 1.2s ease var(--motion-delay, 0.2s) both;
}

.motion-active [data-motion="fade-left"] {
    animation: motion-fade-left 1.2s ease var(--motion-delay, 0.2s) both;
}

.motion-active [data-motion="pulse-opacity"] {
    animation: motion-fade-in 1s ease both,
        motion-pulse-opacity 2s ease-in-out var(--motion-delay, 1s) infinite;
}

.motion-active [data-motion="line-expand"] {
    animation: motion-line-expand 0.5s ease-out var(--motion-delay, 0.4s) both;
}

@keyframes motion-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-fade-down {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-zoom-out {
    from {
        transform: scale(1.06);
    }

    to {
        transform: scale(1);
    }
}

@keyframes motion-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes motion-fade-right {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes motion-fade-left {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes motion-pulse-opacity {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes motion-line-expand {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.swiper .m3-pagination {
    top: var(--pagination-top, 92.36%);
}

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

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

.main5 .txt {
    position: absolute;
    left: calc(110*var(--vw-base));
    top: calc(386*var(--vw-base));
}

.main5 .txt .cn0 {
    position: relative;
    color: #4dbaab;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: calc(25*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.025em;
}

.main5 .txt .cn1 {
    position: relative;
    margin-top: calc(20*var(--vw-base));
    color: #4dbaab;
    font-family: "Noto Sans TC";
    font-weight: 500;
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.025em;
}

.main5 .txt .cn2 {
    position: relative;
    margin-top: calc(15*var(--vw-base));
    color: #4dbaab;
    font-family: "Noto Sans TC";
    font-weight: 500;
    font-size: calc(30*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.025em;
}

.main5 .txt .cn3 {
    position: relative;
    margin-top: calc(40*var(--vw-base));
    color: #000000;
    font-family: "Noto Sans TC";
    font-weight: 300;
    font-size: calc(25*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0em;
}

.company-icon {
    position: absolute;
    left: calc(110*var(--vw-base));
    top: calc(820*var(--vw-base));
    width: calc(409*var(--vw-base));
    height: calc(30*var(--vw-base));
}

.main5 .logo-pic {
    position: absolute;
    left: calc(897*var(--vw-base));
    top: calc(233*var(--vw-base));
    width: calc(652*var(--vw-base));
    height: calc(652*var(--vw-base));
    background: #90d1e4;
    -webkit-mask: url("../img/m5-main-circle.svg") center / contain no-repeat;
    mask: url("../img/m5-main-circle.svg") center / contain no-repeat;
    isolation: isolate;
}

.main5 .logo-pic>img {
    opacity: 0;
}

/* Rotate the colour inside the original SVG silhouette, keeping its edge crisp. */
.main5 .logo-pic::after {
    content: "";
    position: absolute;
    inset: -25%;
    /* Sector boundaries: 120 / 60 / 60 / 60 / 60 degrees, with soft blends. */
    background: conic-gradient(from -60deg,
            #90d1e4 0deg, #90d1e4 100deg,
            #e7d3e0 140deg, #e7d3e0 160deg,
            #1f689b 200deg, #1f689b 220deg,
            #e7d3e0 260deg, #e7d3e0 280deg,
            #90d1e4 320deg, #90d1e4 360deg);
    filter: blur(calc(24*var(--vw-base)));
    transform-origin: center;
    pointer-events: none;
}

.main5.motion-ready .logo-pic::after {
    opacity: 0;
}

.main5.motion-ready .logo-pic,
.main5[data-motion-section] .logo-pic {
    opacity: 0;
    transform: scale(0.7);
    rotate: -45deg;
    transform-origin: center;
}

.main5.motion-active .logo-pic {
    animation: m5-ring-enter 1s cubic-bezier(0.45, 0, 0.15, 1) 0.2s both,
        m5-ring-turn 1s cubic-bezier(0.22, 0.65, 0.5, 0.777778) 0.2s both;
}

.main5.motion-active .logo-pic::after {
    animation: m5-colour-bloom 1s ease-in-out 0.2s both,
        m5-colour-orbit 18s linear 1.2s infinite;
}

.main5.motion-exiting [data-motion] {
    animation: m5-content-exit 0.45s ease both !important;
}

.main5.motion-hold .logo-pic {
    opacity: 1;
    transform: scale(1);
    rotate: 0deg;
}

.main5.motion-hold .logo-pic::after {
    opacity: 1;
}

@keyframes m5-ring-enter {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes m5-ring-turn {
    from {
        rotate: -45deg;
    }

    to {
        rotate: 0deg;
    }
}

@keyframes m5-content-exit {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes m5-colour-bloom {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes m5-colour-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.main5 .logo-word {
    position: absolute;
    left: calc(1482*var(--vw-base));
    top: calc(780*var(--vw-base));
    /* color: #646464;
    font-family: "Noto Sans TC";
    font-weight: 800;
    font-size: calc(65*var(--vw-base));
    line-height: 1.1em;
    letter-spacing: 0.25em; */
    width: calc(182*var(--vw-base));
    height: calc(60*var(--vw-base));
}

.main5 .logo-word img {
    object-fit: contain;
}

.main5 .word-x {
    position: relative;
    width: calc(14*var(--vw-base));
    height: calc(14*var(--vw-base));
    margin-bottom: calc(2*var(--vw-base));
    padding: 0 0.1em 0 0.2em;
}

.main5 .word-x img {
    opacity: 0;
}

.main5 .word-x::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #4dbaab;
    -webkit-mask: url("../img/word-x.svg") center / contain no-repeat;
    mask: url("../img/word-x.svg") center / contain no-repeat;
    pointer-events: none;
}

.main6 {
    position: relative;
    height: calc(1080*var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(100*var(--vw-base));
    box-sizing: border-box;
    padding-left: calc(110*var(--vw-base));
    overflow: hidden;
}

.main6 .main-txt {
    position: relative;
    width: calc(515*var(--vw-base));
}

.main6 .main-txt .page-desc {
    margin-top: calc(55*var(--vw-base));
}

.main6 .main-pic {
    position: relative;
    width: calc(1120*var(--vw-base));
    height: calc(750*var(--vw-base));
    overflow: hidden;
}

.main6 .t2 {
    letter-spacing: 0;
    text-align-last: justify;
}


.main7 {
    position: relative;
    height: calc(1080*var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(100*var(--vw-base));
    box-sizing: border-box;
    padding-left: calc(110*var(--vw-base));
    overflow: hidden;
}

.main7 .main-txt {
    position: relative;
    width: calc(515*var(--vw-base));
}

.main7 .main-txt .page-title .t2 {
    letter-spacing: 0;
    text-align-last: justify;

}

.main7 .main-txt .page-desc {
    margin-top: calc(55*var(--vw-base));
}

.main7 .main-pic {
    position: relative;
    width: calc(1120*var(--vw-base));
    height: calc(753*var(--vw-base));
    overflow: hidden;
}


.main8 {
    position: relative;
    height: calc(1080*var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(100*var(--vw-base));
    box-sizing: border-box;
    padding-left: calc(110*var(--vw-base));
    overflow: hidden;
}

.main8 .main-txt {
    position: relative;
    width: calc(515*var(--vw-base));
}

.main8 .main-txt .page-desc {
    margin-top: calc(55*var(--vw-base));
}

.main8 .main-pic {
    position: relative;
    width: calc(1120*var(--vw-base));
    height: calc(750*var(--vw-base));
    overflow: hidden;
}

.main9 {
    position: relative;
    height: calc(1080*var(--vw-base));
    display: flex;
    align-items: center;
    gap: calc(100*var(--vw-base));
    box-sizing: border-box;
    padding-left: calc(90*var(--vw-base));
    overflow: hidden;
}

.main9 .main-txt {
    position: relative;
    width: calc(512*var(--vw-base));
}

.main9 .main-txt .page-desc {
    margin-top: calc(55*var(--vw-base));
}

.main9 .main-pic {
    position: relative;
    width: calc(1120*var(--vw-base));
    height: calc(628*var(--vw-base));
}

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

.main9 .main-pic .pic2 {
    z-index: 2;
}

.main9 .main-pic.main-video {
    height: auto;
    aspect-ratio: 16 / 9;
    background: #ffffff;
    overflow: hidden;
    flex-shrink: 0;
    cursor: default;
}

.main9 .main-video video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #ffffff;
}

.main10 {
    box-sizing: border-box;
    padding: calc(110*var(--vw-base)) 0 calc(85*var(--vw-base));
    color: #333333;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 500;
}

.main10 .form-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(40*var(--vw-base));
    margin-bottom: calc(70*var(--vw-base));
}

.main10 .form-heading h2 {
    font-size: calc(39*var(--vw-base));
    font-weight: 300;
    line-height: 1.5;
}

.main10 .form-heading p {
    font-size: calc(29*var(--vw-base));
    font-weight: 300;
}

.main10 #contactForm {
    width: calc(1418*var(--vw-base));
    margin: 0 auto;
}

.main10 .contact-fields {
    display: grid;
    grid-template-columns: repeat(2, calc(695*var(--vw-base)));
    gap: calc(28*var(--vw-base));
}

.main10 .contact-field,
.main10 #submitbtn {
    box-sizing: border-box;
    width: 100%;
    height: calc(65*var(--vw-base));
    border: 1px solid #51a4db;
    border-radius: 0;
    padding: 0 calc(26*var(--vw-base));
    background: #ffffff;
    color: #333333;
    font-family: "Noto Sans TC", sans-serif;
    font-size: calc(22*var(--vw-base));
    font-weight: 400;
}

.main10 .contact-field {
    display: flex;
    align-items: center;
    gap: calc(10*var(--vw-base));
}

.main10 .contact-field label {
    flex: 0 0 calc(132*var(--vw-base));
    width: calc(132*var(--vw-base));
    white-space: nowrap;
    text-align: justify;
    text-align-last: justify;
    cursor: text;
}

.main10 .select-field label {
    cursor: pointer;
}

.main10 .contact-field input,
.main10 .contact-field select {
    flex: 1;
    min-width: 0;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

.main10 .select-field {
    position: relative;
}

.main10 .select-field select {
    padding-right: calc(65*var(--vw-base));
    cursor: pointer;
}

.main10 .select-field::after {
    content: "";
    position: absolute;
    right: calc(36*var(--vw-base));
    top: 50%;
    width: calc(15*var(--vw-base));
    height: calc(12*var(--vw-base));
    background: #51a4db;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: translateY(-50%);
    pointer-events: none;
}

.main10 #submitbtn {
    border: 0;
    background: url("../img/submit-bg.svg") center / 100% 100% no-repeat;
    color: #ffffff;
    font-size: calc(26*var(--vw-base));
    letter-spacing: calc(5*var(--vw-base));
    cursor: pointer;
}

.main10 .privacy-copy,
.main10 .form-thanks,
.main10 .form-footer {
    font-size: calc(18*var(--vw-base));
    font-weight: 400;
    line-height: 1.9;
}

.main10 .privacy-copy {
    margin-top: calc(56*var(--vw-base));
}

.main10 .privacy-row {
    display: flex;
    align-items: center;
    gap: calc(16*var(--vw-base));
}

.main10 .privacy-row>p {
    flex: 1;
}

.main10 .consent,
.main10 .consent label {
    display: inline-flex;
    align-items: center;
}

.main10 .consent {
    flex-shrink: 0;
}

.main10 .consent label {
    cursor: pointer;
}

.main10 #agree {
    flex-shrink: 0;
    width: calc(18*var(--vw-base));
    height: calc(18*var(--vw-base));
    margin: calc(5*var(--vw-base)) calc(7*var(--vw-base))0 0;
    border: 0;
    background: url("../img/check.png") center / contain no-repeat;
    cursor: pointer;
}

.main10 #agree:checked {
    background-image: url("../img/checked.png");
}

.main10 .openTxtBtn {
    border: 0;
    background: transparent;
    color: #51a4db;
    font: inherit;
    cursor: pointer;
}

.main10 .contact-field:focus-within {
    border-color: #51a4db;
    outline: calc(2*var(--vw-base)) solid #51a4db;
    outline-offset: calc(2*var(--vw-base));
}

.main10 .contact-field input:focus-visible,
.main10 .contact-field select:focus-visible {
    outline: none;
}

.main10 button:focus-visible {
    outline: calc(2*var(--vw-base)) solid #51a4db;
    outline-offset: calc(3*var(--vw-base));
}

.main10 .form-thanks {
    text-align: center;
    margin-top: calc(58*var(--vw-base));
    letter-spacing: calc(3*var(--vw-base));
}

.main10 .fuhua-logo {
    width: calc(130*var(--vw-base));
    height: calc(110*var(--vw-base));
    object-fit: contain;
    margin: calc(78*var(--vw-base)) auto 0;
}

.main10 .footer-rule {
    width: calc(1418*var(--vw-base));
    height: 1px;
    margin: calc(50*var(--vw-base)) auto 0;
    background: #cccccc;
}

.main10 .form-footer {
    width: calc(1418*var(--vw-base));
    margin: 0 auto;
    padding-top: calc(28*var(--vw-base));
    text-align: center;
}

/*同意書照片預覽*/

.black {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 11111;
    font-family: "Noto Sans TC";
}

.closeBtn {
    width: 30px;
    position: absolute;
    right: 5%;
    top: 4%;
    cursor: pointer;
}

.infoWrap {
    width: 100%;
    margin: 0 auto;
    max-width: 65%;
    position: relative;
    height: 100vh;
    overflow: auto;
}

.infoWrap ul {
    list-style: none;
    font-size: 1vw;
    padding-inline-start: 2vw;
}

.infoWrap ul>li>ul {
    list-style: none;
    font-size: 1vw;
    padding-inline-start: 1vw;
}

.li1::before {
    content: "一、";
    position: absolute;
    left: 0vw;
}

.li2::before {
    content: "二、";
    position: absolute;
    left: 0vw;
}

.li3::before {
    content: "三、";
    position: absolute;
    left: 0vw;
}

.li4::before {
    content: "四、";
    position: absolute;
    left: 0vw;
}

.li5::before {
    content: "五、";
    position: absolute;
    left: 0vw;
}

.li1-li::before {
    content: "（１）";
    position: absolute;
    left: 0vw;
}

.li2-li::before {
    content: "（２）";
    position: absolute;
    left: 0vw;
}

.li3-li::before {
    content: "（３）";
    position: absolute;
    left: 0vw;
}

.li4-li::before {
    content: "（４）";
    position: absolute;
    left: 0vw;
}

.infoBox {
    width: 100%;
    height: calc(100% - 20vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    color: #fff;
    text-align: left;
}

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

.infoBox h4 {
    font-size: 1vw;
    line-height: 180%;
    margin-bottom: 1vw;
}

.infoBox h5 {
    font-size: 1.2vw;
    line-height: 180%;
    margin-bottom: 1vw;
}

.infoBox p {
    font-size: 1vw;
    line-height: 180%;
}
/* Start fading 0.2s after the section triggers; finish at 0.8s. */
.main9 .main-video video[data-motion-video] {
    opacity: 0;
}
.main9.motion-active .main-video video[data-motion-video] {
    animation: site-video-reveal 0.6s ease 0.2s both;
}
@keyframes site-video-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slightly zoom the video to trim its built-in side bars. */
.main9 .main-video video[data-motion-video] {
    transform: scale(1.01);
    transform-origin: center;
}