/* 字體 */

@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-Light-Oblique";
    src: url(../fonts/Futura-Std-Light-Oblique.otf);
}

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

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

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

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

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

@font-face {
    font-family: "GOTHICB";
    src: url(../fonts/GOTHICB.TTF);
}

.Futura-Std-Bold {
    font-family: "Futura-Std-Bold";
}


.Futura-Std-Heavy {
    font-family: "Futura-Std-Heavy";
}

.Futura-Std-Light-Oblique {
    font-family: "Futura-Std-Light-Oblique";
}

.Futura-Std-Book {
    font-family: "Futura-Std-Book";
}

.Futura-Std-Light {
    font-family: "Futura-Std-Light";
}

.Futura-Std-Medium {
    font-family: "Futura-Std-Medium";
}

.GOTHICB {
    font-family: "GOTHICB";
    font-weight: normal;
}

[data-aos="opacity-x"] {
    opacity: 1;
    clip-path: inset(0% 100% 0 100%);
    /* 初始状态下完全隐藏 */
}

[data-aos="opacity-x"].aos-animate {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 显示全部图片 */
}


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

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

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

/*LOADING START*/

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

.la-square-loader,
.la-square-loader>div {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.la-square-loader {
    display: block;
    font-size: 0;
    color: #fff;
}

.la-square-loader.la-dark {
    color: #fff;
}

.la-square-loader>div {
    display: inline-block;
    float: none;
    background-color: currentColor;
    border: 0 solid currentColor;
}

.la-square-loader {
    width: 32px;
    height: 32px;
}

.la-square-loader>div {
    width: 100%;
    height: 100%;
    background: transparent;
    border-width: 2px;
    border-radius: 0;
    -webkit-animation: square-loader 3s infinite ease;
    -moz-animation: square-loader 3s infinite ease;
    -o-animation: square-loader 3s infinite ease;
    animation: square-loader 3s infinite ease;
}

.la-square-loader>div:after {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    content: "";
    background-color: currentColor;
    -webkit-animation: square-loader-inner 3s infinite ease-in;
    -moz-animation: square-loader-inner 3s infinite ease-in;
    -o-animation: square-loader-inner 3s infinite ease-in;
    animation: square-loader-inner 3s infinite ease-in;
}

.la-square-loader.la-sm {
    width: 16px;
    height: 16px;
}

.la-square-loader.la-sm>div {
    border-width: 1px;
}

.la-square-loader.la-2x {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.la-square-loader.la-2x>div {
    border-width: 2px;
}

.la-square-loader.la-3x {
    width: 96px;
    height: 96px;
}

.la-square-loader.la-3x>div {
    border-width: 6px;
}


/*
 * Animations
 */
@-webkit-keyframes square-loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes square-loader {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    50% {
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    75% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes square-loader {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    50% {
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    75% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes square-loader {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    75% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes square-loader-inner {
    0% {
        height: 0;
    }

    25% {
        height: 0;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0;
    }
}

@-moz-keyframes square-loader-inner {
    0% {
        height: 0;
    }

    25% {
        height: 0;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0;
    }
}

@-o-keyframes square-loader-inner {
    0% {
        height: 0;
    }

    25% {
        height: 0;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0;
    }
}

@keyframes square-loader-inner {
    0% {
        height: 0;
    }

    25% {
        height: 0;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0;
    }
}

/*LOADING END*/
.all {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    opacity: 0;
}

.opacity1 {
    opacity: 1;
}


/*footer-nav*/
.footer-nav {
    width: 100%;
    height: 4.2vw;
    position: fixed;
    /* height: auto; */
    bottom: 0vw;
    /* r: 0; */
    right: 0;
    z-index: 998;
    box-sizing: border-box;
    display: none;
    background-image: url(../img/nav.png);
    background-repeat: no-repeat;
    background-position: 0% center;
    background-size: cover;
}

.footer-nav .logo {
    width: 7.9vw;
    height: 1.9vw;
    position: absolute;
    left: 3vw;
    top: 0.9vw;
    cursor: pointer;
}

.footer-nav .logo img {
    width: 100%;
    object-fit: cover;
}

.footer-nav-li {
    width: 6vw;
    float: right;
    display: block;
    position: relative;
    cursor: pointer;
}

.footer-nav-li::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 2.85vw;
    right: 0vw;
    bottom: 0vw;
    background-color: #595757;
    opacity: 0.5;
}

.icon4-line::after {
    background-color: transparent;
}

.icon1 {
    max-width: 9%;
    height: auto;
    display: block;
    margin: 13% auto 8% auto;
}

.icon2 {
    max-width: 22%;
    height: auto;
    display: block;
    margin: 12% auto 7% auto;
}

.icon3 {
    max-width: 20%;
    height: auto;
    display: block;
    margin: 15% auto 5% auto;
}

.icon4 {
    max-width: 16%;
    height: auto;
    display: block;
    margin: 12% auto 5% auto;
}

.icon5 {
    max-width: 17%;
    height: auto;
    display: block;
    margin: 13% auto 11% auto;
}

.icon {
    opacity: 0.8;
}

.icon-content {
    width: 100%;
    height: auto;
    line-height: 1vw;
    font-size: 0.8vw;
    font-family: "Futura-Std-Book";
    color: #bcbcbc;
    text-align: center;
    float: left;
    letter-spacing: 0vw;
    position: relative;
    margin: 0 0 0 0;
    opacity: 0.8;
}

.icon-content.pen {
    width: 100%;
    height: auto;
    line-height: 1vw;
    font-size: 0.7vw;
    font-family: 'Noto Sans TC';
    color: #bcbcbc;
    text-align: center;
    float: left;
    letter-spacing: 0vw;
    position: relative;
    margin: 0 0 0 0;
}

.icon-content a {
    color: #bcbcbc;
}

.opacity {
    opacity: 0;
    transition: all 0.3s linear;
}

.opacity1 {
    opacity: 1;
    transition: all 0.3s linear;
}


/*頁面1*/
/*
.main1 {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    color: #002d49;
    background-color: #fff;
}

.main1>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.5);
    animation: main1 7s ease;
    animation-fill-mode: forwards;
}

@keyframes main1 {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
*/
.main1 {
    width: 100%;
    height: auto;
    position: relative;
}

.main1-img {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

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

.swiper-slide-active .main1-img img {
    animation: img0 7s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

@keyframes img0 {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.logo-mask {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    /*pointer-events: none;*/
}

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

.logo-txt {
    width: calc(370 * var(--vw-base));
    position: absolute;
    left: 65vw;
    top: calc(352 * var(--vw-base));
    z-index: 6;
}

.end-txt {
    width: calc(370 * var(--vw-base));
    position: absolute;
    left: 65vw;
    top: calc(352 * var(--vw-base));
    z-index: 6;
}

.last-txt {
    width: calc(450 * var(--vw-base));
    position: absolute;
    left: 63.05vw;
    bottom: calc(530 * var(--vw-base));
    z-index: 6;

}

.last-txt .t1 {
    color: #fff;
    font-family: 'Noto Sans TC';
    line-height: 5vw;
    text-align: center;
    font-size: 1.82vw;
    font-weight: 500;
    letter-spacing: 0.05vw;
    transform: scaleX(1) scaleY(0.7);
}

.m1-dot {
    position: relative;
    display: inline-block;
    margin: 0 -0.5vw 0 -1vw;
}

.logo-line {
    position: absolute;
    left: 71.80vw;
    top: calc(455 * var(--vw-base));
    width: calc(114*var(--vw-base));
    height: 1px;
    background-color: #fff;
    z-index: 6;
}

/*頁面2*/
.main2 {
    width: 100%;
    height: auto;
    position: relative;
}

.banner {
    width: 100%;
    position: relative;
    margin: 0;
    overflow: hidden;
}

.banner .swiper-button-prev {
    width: 1.5vw !important;
    height: 3vw !important;
    left: 0vw;
    top: 47%;
    margin: 0;
    z-index: 998 !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;
}

.banner .swiper-button-next {
    width: 1.5vw !important;
    height: 3vw !important;
    right: 0vw;
    top: 47%;
    margin: 0;
    z-index: 998 !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;
}

.pic-txt {
    position: absolute;
    right: 2vw;
    bottom: 1.5vw;
    color: #fff;
    font-family: 'Noto Sans TC';
    font-size: 0.85vw;
    letter-spacing: 0.05vw;
    font-weight: 100;
}

.pic-txt .bolder {
    font-weight: 300;
}

.pic-txt-m {
    width: 30vw;
    position: absolute;
    right: 0vw;
    bottom: 1vw;
    height: 2.3vw;
    background-image: url(../img/bg1-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
}

.pic-txt-m2 {
    width: 15vw;
    position: absolute;
    right: 0vw;
    bottom: 1vw;
    height: 2.3vw;
    background-image: url(../img/bg1-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
}

.pic-txt-m5 {
    width: 15vw;
    position: absolute;
    right: 0vw;
    bottom: 1vw;
    height: 2.3vw;
    background-image: url(../img/bg1-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0% 50%;
}



.main2-txt {
    width: auto;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 63vw;
    top: 12vw;
    opacity: 0;
}

.swiper-slide-active .main2-txt {
    animation: txt2-1fadein 0.5s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt2-1fadein {
    0% {
        top: 15vw;
        opacity: 0;

    }

    100% {
        top: 10vw;
        opacity: 1;
    }
}



.main2-txt .line {
    position: absolute;
    left: -1.5vw;
    top: 0vw;
    width: 2px;
    height: 0vw;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main2-txt .line {
    animation: txt2-1-line 1.5s linear;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes txt2-1-line {
    0% {
        height: 0vw;
        opacity: 0;
        top: -2vw;
    }

    100% {
        height: 6.7vw;
        opacity: 1;
        top: 0.5vw;
    }
}



.main2-img {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

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

.swiper-slide-active .main2-img img {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

.img-no {
    animation: none;
}

.img-ani {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

@keyframes img {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.main2-txt2 {
    width: 18vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 63vw;
    top: 10vw;
    opacity: 0;
}

.swiper-slide-active .main2-txt2 {
    animation: txt2-2fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt2-2fadein {
    0% {
        top: 15vw;
        opacity: 0;

    }

    100% {
        top: 10vw;
        opacity: 1;
    }
}

.main2-txt h2 {
    position: relative;
    width: 18vw;
    font-size: 1.8vw;
    line-height: 2.5vw;
    letter-spacing: 0.1vw;
    font-weight: normal;
    margin: 0 0 0.5vw 0;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-ideograph;
    transform: scale(1, 0.85);
}

.main2-txt h4 {
    position: relative;
    width: 27vw;
    font-size: 1vw;
    /* letter-spacing: 0.1vw; */
    line-height: 1.5vw;
    font-weight: 200;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 0;
    transform: scale(1, 0.85);
}

.main2-txt2 h4 {
    letter-spacing: 0vw;
    width: 28vw;
}




/*頁面3*/
.main3 {
    width: 100%;
    height: auto;
    position: relative;
}

.main3-txt {
    /* width: 18vw; */
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 60vw;
    top: 8vw;
}

.swiper-slide-active .main3-txt1 {
    animation: txt3-1fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt3-1fadein {
    0% {
        top: 18vw;
        opacity: 0;

    }

    100% {
        top: 13vw;
        opacity: 1;
    }
}

.main3-txt1 .line {
    position: absolute;
    left: -1.5vw;
    top: 0vw;
    width: 1px;
    height: 0vw;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main3-txt1 .line {
    animation: txt3-1-line 1.5s linear;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes txt3-1-line {
    0% {
        height: 0vw;
        opacity: 0;
        top: -2vw;
    }

    100% {
        height: 5.8vw;
        opacity: 1;
        top: 0.5vw;
    }
}

.main3-txt2 .line {
    position: absolute;
    left: -1.5vw;
    top: 0vw;
    width: 1px;
    height: 0vw;
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main3-txt2 .line {
    animation: txt3-2-line 1.5s linear;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes txt3-2-line {
    0% {
        height: 0vw;
        opacity: 0;
        top: 2vw;
    }

    100% {
        height: 2.5vw;
        opacity: 1;
        top: 5.8vw;
    }
}



.main3-txt h2 {
    position: relative;
    width: 18vw;
    font-size: 1.8vw;
    line-height: 2.5vw;
    letter-spacing: 0.1vw;
    font-weight: normal;
    margin: 0 0 0vw 0;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-ideograph;
    transform: scale(1, 0.85);
}

.main3-txt1 h4 {
    position: relative;
    width: 34vw;
    font-size: 1vw;
    /* letter-spacing: 0.1vw; */
    line-height: 1.5vw;
    font-weight: 300;
    letter-spacing: 0.05vw;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 1vw 0;
    transform: scale(1, 0.85);
}

.main3-txt2 h4 {
    position: relative;
    width: 28vw;
    font-size: 1vw;
    /* letter-spacing: 0.1vw; */
    line-height: 1.5vw;
    font-weight: 300;
    letter-spacing: 0.05vw;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 1vw 0;
    transform: scale(1, 0.85);
}

.swiper-slide .main3-txt2 {
    width: 18vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 67vw;
    top: 2.5vw;
    padding-top: 4.5vw;
}

.swiper-slide-active .main3-txt2 {
    animation: txt3-2fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt3-2fadein {
    0% {
        top: 7.5vw;
        opacity: 0;

    }

    100% {
        top: 2.5vw;
        opacity: 1;
    }
}

.main3-txt3 {
    width: 18vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 18.1vw;
    top: 13vw;
    padding-top: 4.5vw;
}

.main3-txt2.m3-left {
    left: 18.1vw;
}

.swiper-slide-active .main3-txt3 {
    animation: txt3-3fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt3-3fadein {
    0% {
        top: 18vw;
        opacity: 0;

    }

    100% {
        top: 13vw;
        opacity: 1;
    }
}


.main3-img,
.main3-img-no {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

.main3-img img,
.main3-img-no img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide-active .main3-img img {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

.swiper-slide-active .main3-img-no img {
    animation: none;
}

.pic-txt.topr {
    position: absolute;
    left: auto;
    right: 3vw;
    bottom: 103vw;
    font-family: 'Noto Sans TC';
    font-size: 3vw;
    letter-spacing: 0.15vw;
    line-height: 4vw;
    font-weight: 300;
    color: #fff;
}

.pic-txt.bttr {
    position: absolute;
    left: auto;
    right: 3vw;
    bottom: 3vw;
    font-family: 'Noto Sans TC';
    font-size: 3vw;
    letter-spacing: 0.15vw;
    line-height: 4vw;
    font-weight: 300;
    color: #fff;
}

.pic-txt-m2-t {
    width: 50vw;
    position: absolute;
    right: 0vw;
    bottom: 101.8vw;
    height: 7vw;
    background-image: url(../img/bg3-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 50%;
}

.pic-txt-m2-d {
    width: 50vw;
    position: absolute;
    right: 0vw;
    bottom: 1.5vw;
    height: 7vw;
    background-image: url(../img/bg3-mask.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 100% 50%;
}



/*頁面4*/
.main4 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main4-bg {
    position: absolute;
    width: 100vw;
    height: 56.25vw;
    top: 0;
    left: 0;
    /* animation: logoshine 1s ease 0.5s infinite; */
}

.main4 .swiper-slide {
    position: relative;
    width: 100%;
    height: 56.25vw;
    overflow: hidden;
}

.main4-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

.main4-bg .shine {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: logoshine 1s ease 0.5s infinite;
}

@keyframes logoshine {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.main4-txt {
    /* width: 18vw; */
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 8vw;
    top: 4.2vw;
}

.main4-txt .line {
    position: absolute;
    left: -1.5vw;
    top: 0.5vw;
    width: 1px;
    height: 0vw;
    background-color: rgba(255, 255, 255, 0.5);
}


.swiper-slide-active .main4-txt .line {
    animation: txt4-line 1.5s ease;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt4-line {
    0% {
        height: 0vw;
        opacity: 0;
    }

    100% {
        height: 5vw;
        opacity: 1;
    }
}

.main4-txt .line2 {
    position: absolute;
    left: -1.5vw;
    top: 0.5vw;
    width: 1px;
    height: 0vw;
    background-color: rgba(255, 255, 255, 0.5);
}


.swiper-slide-active .main4-txt .line2 {
    animation: txt4-line2 1.5s ease;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt4-line2 {
    0% {
        height: 0vw;
        opacity: 0;
    }

    100% {
        height: 8.2vw;
        opacity: 1;
    }
}



.main4-txt h2 {
    position: relative;
    font-size: 2vw;
    line-height: 2.5vw;
    letter-spacing: 0vw;
    font-weight: normal;
    margin: 0 0 1vw 0;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;

}

.main4-txt h2 .t1 {
    transform: scale(1, 0.85);
}

.main4-txt h4 {
    position: relative;
    /* width: 30vw; */
    font-size: 0.95vw;
    letter-spacing: 0.05vw;
    line-height: 1.7vw;
    font-weight: 200;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 0vw 0;
}

.main4-txt h4 .t1 {
    transform: scale(1, 0.85);
    width: 31vw;
}

.main4-txt h2 .lighter {
    font-weight: 200;
    position: relative;
}

.main4-bg .nvidia-site {
    position: absolute;
    width: 1vw;
    height: 8.1vw;
    top: 15.5vw;
    left: 62.93vw;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding-top: 0.3vw;
    color: #333333;
    font-family: "Noto Sans TC";
    font-weight: 400;
    font-size: 0.65vw;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%); */
    transform: translate(-50%, 0%);
    animation: site-jump 1s ease 0.5s infinite;
}

.main4-bg .nvidia-site img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes site-jump {
    0% {
        transform: translate(-50%, 5%);
    }

    50% {
        transform: translate(-50%, 0%);
    }

    100% {
        transform: translate(-50%, 5%);
    }
}





/*頁面5*/
.main5 {
    width: 100%;
    height: auto;
    position: relative;
}

.main5-img {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

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

.swiper-slide-active .main5-img img {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

/*
.swiper-slide-active .main5-img-1 img {
    animation: none;
    transform: scale(1);
}*/
.main5-txt-icon {
    width: 21vw;
    position: absolute;
    left: 38vw;
    top: -5.5vw;

}

.main5-txt-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*mix-blend-mode: screen;*/
    /*mix-blend-mode: multiply;*/
    /*mix-blend-mode: overlay;*/
    /*mix-blend-mode: hard-light ;*/
    /*mix-blend-mode: lighten;*/
}

.main5-txt1 {
    /* width: 29.28vw; */
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 27vw;
    top: 11vw;
}

.swiper-slide-active .main5-txt1 {
    animation: txt5-1fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes txt5-1fadein {
    0% {
        top: 9vw;
        opacity: 0;

    }

    100% {
        top: 11vw;
        opacity: 1;
    }
}

.main5-txt-line {
    width: 30vw;
    position: absolute;
    left: 9vw;
    top: 7vw;
}

.main5-txt-line img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main5-txt h2 {
    position: relative;
    font-size: 3.1vw;
    line-height: 3vw;
    letter-spacing: 0.1vw;
    font-weight: 500;
    margin: 0;
    text-align: justify;
    text-align-last: left;
    transform: scale(1, 0.7);
}


.main5-txt2 {
    width: calc(650* var(--vw-base));
    position: absolute;
    left: 7vw;
    top: 8vw;
}

.main5-txt2 h4 {
    margin: 0;
    margin-top: 0.5vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    font-weight: 200;
    font-size: 1vw;
    white-space: nowrap;
    letter-spacing: 0.06vw;
    line-height: 1.6vw;
    transform: scale(1, 0.85);
}

.swiper-slide-active .main5-txt2 {
    animation: txt5-2fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes txt5-2fadein {
    0% {
        top: 8.5vw;
        opacity: 0;

    }

    100% {
        top: 10vw;
        opacity: 1;
    }
}

.main5-txt-title {
    position: relative;
    width: 100%;
}

.main5-txt-title img {
    width: 100%;
    object-fit: contain;
}

.m5-dot {
    font-family: "Futura-Std-Heavy";
    position: relative;
    display: inline-block;
    margin: 0 -0.8vw 0 -1.8vw;
}

.main5-txt2 .line {
    position: absolute;
    left: -1.5vw;
    top: 0vw;
    width: 1px;
    height: 0vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main5-txt2 .line {
    animation: txt5-2-line 1.2s linear;
    animation-fill-mode: forwards;
}

@keyframes txt5-2-line {
    0% {
        height: 0vw;
        opacity: 0;
    }

    100% {
        height: 7vw;
        opacity: 1;
    }
}


/*頁面6*/
.main6 {
    width: 100%;
    height: auto;
    position: relative;
}

.main6-img,
.main6-img-no {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

.main6-img img,
.main6-img-no img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide-active .main6-img img {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

.swiper-slide-active .main6-img-no img {
    animation: none;
}



.main6-txt h4 {
    position: relative;
    font-size: 1vw;
    letter-spacing: 0.05vw;
    line-height: 2vw;
    font-weight: 300;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin-top: 1vw;
    transform: scale(1, 0.85);
}

.main6-txt1 {
    width: calc(620* var(--vw-base));
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 55vw;
    top: 10vw;
    opacity: 0;
}


.main6-txt1 h4 {
    margin: 0;
    margin-top: 0.5vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    font-weight: 200;
    font-size: 1vw;
    line-height: 1.6vw;
    transform: scale(1, 0.9);
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-ideograph;
    white-space: nowrap;
}

.swiper-slide-active .main6-txt1 {
    animation: txt6-1fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt6-1fadein {
    0% {
        top: 15vw;
        opacity: 0;

    }

    100% {
        top: 10vw;
        opacity: 1;
    }
}

.main6-txt-title {
    width: 100%;
    position: relative;
}

.main6-txt-title img {
    width: 100%;
    object-fit: contain;
}

.main6-txt1 .line {
    position: absolute;
    left: -1.5vw;
    top: 0vw;
    width: 1px;
    height: 0vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main6-txt1 .line {
    animation: txt6-1-line 1s linear 0.7s;
    animation-fill-mode: forwards;
}

@keyframes txt6-1-line {
    0% {
        height: 0vw;
        opacity: 0;
    }

    100% {
        height: 6.5vw;
        opacity: 1;
    }
}

.main6-txt2 {
    width: 25.5vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 9vw;
    bottom: 2vw;
    top: auto;
    opacity: 0;
}

.swiper-slide-active .main6-txt2 {
    animation: txt6-2fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt6-2fadein {
    0% {
        bottom: 5vw;
        opacity: 0;

    }

    100% {
        bottom: 2vw;
        opacity: 1;
    }
}

.main6-txt2 .line {
    position: absolute;
    left: -1.5vw;
    bottom: -8vw;
    width: 2px;
    height: 15vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main6-txt2 .line {
    animation: txt6-2-line 1.5s linear;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt6-2-line {
    0% {
        height: 0vw;
        opacity: 0;
        bottom: -3.8vw;
    }

    100% {
        height: 4.4vw;
        opacity: 1;
        bottom: 2.1vw;
    }
}




.main6-txt3 {
    width: 26vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    right: 9vw;
    bottom: 2vw;
    top: auto;
    opacity: 0;
}

.swiper-slide-active .main6-txt3 {
    animation: txt6-3fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    opacity: 0;
}

@keyframes txt6-3fadein {
    0% {
        bottom: 5vw;
        opacity: 0;

    }

    100% {
        bottom: 2vw;
        opacity: 1;
    }
}

.main6-txt3 .line {
    position: absolute;
    left: -1.5vw;
    bottom: 0vw;
    width: 2px;
    height: 7vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main6-txt3 .line {
    animation: txt6-3-line 1.5s linear;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt6-3-line {
    0% {
        height: 0vw;
        opacity: 0;
        bottom: -4vw;
    }

    100% {
        height: 4.4vw;
        opacity: 1;
        bottom: 2vw;
    }
}






/*頁面7*/
.main7 {
    width: 100%;
    height: auto;
    position: relative;
}

.main7-img,
.main7-img-no {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

.main7-img img,
.main7-img-no img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide-active .main7-img img {
    animation: img 6s linear;
    animation-fill-mode: forwards;
    transform: scale(1.2);
}

.swiper-slide-active .main7-img-no img {
    animation: none;
}


.main7-txt h4 {
    position: relative;
    font-size: 1vw;
    letter-spacing: 0.05vw;
    line-height: 1.7vw;
    font-weight: 200;
    text-align: justify;
    text-align-last: left;
    padding: 0;
    margin: 0;
    transform: scale(1, 0.85);
    /* white-space: nowrap; */
}

.main7-txt1 h4 {
    margin-top: 0.65vw;
}

.main7-txt1 {
    width: 20vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 73vw;
    top: 33vw;
    opacity: 0;
}

.swiper-slide-active .main7-txt1 {
    animation: txt7-1fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes txt7-1fadein {
    0% {
        top: 38vw;
        opacity: 0;

    }

    100% {
        top: 33vw;
        opacity: 1;
    }
}

.main7-txt-title {
    width: 32vw;
    position: absolute;
    left: -8vw;
    top: -11.15vw;
}

.main7-txt-title img {
    width: 100%;
    object-fit: cover;
}

.main7-txt2 .line {
    position: absolute;
    left: -1.5vw;
    bottom: 0vw;
    width: 2px;
    height: 15vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main7-txt2 .line {
    animation: txt7-2-line 1s linear;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt7-2-line {
    0% {
        height: 0vw;
        opacity: 0;
        bottom: 0vw;
    }

    100% {
        height: 2.5vw;
        opacity: 1;
        bottom: 0.5vw;
    }
}



.main7-txt2 {
    width: 18vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 68vw;
    top: 15vw;
    opacity: 0;
}


.swiper-slide-active .main7-txt2 {
    animation: txt7-2fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes txt7-2fadein {
    0% {
        top: 20vw;
        opacity: 0;

    }

    100% {
        top: 15vw;
        opacity: 1;
    }
}

.main7-txt3 {
    width: 22vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 72vw;
    top: 15vw;
    opacity: 0;
}

.swiper-slide-active .main7-txt3 {
    animation: txt7-3fadein 0.7s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes txt7-3fadein {
    0% {
        top: 23vw;
        opacity: 0;

    }

    100% {
        top: 18vw;
        opacity: 1;
    }
}

.main7-txt3 .line {
    position: absolute;
    left: -1.5vw;
    bottom: -8vw;
    width: 2px;
    height: 0vw;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-slide-active .main7-txt3 .line {
    animation: txt7-3-line 1s linear;
    animation-fill-mode: forwards;
    height: 0vw;
    opacity: 0;
}

@keyframes txt7-3-line {
    0% {
        height: 0vw;
        opacity: 0;
        bottom: -2vw;
    }

    100% {
        height: 4vw;
        opacity: 1;
        bottom: 0.5vw;
    }
}






/*頁面11*/
.main11 {
    width: 100%;
    /*    height: calc(1360*var(--vw-base));*/
    position: relative;
}

.main11-txt {
    width: 65vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.main11-txt.main11-txt1 {
    width: 22.7vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    /* right: -4vw; */
    left: 75vw;
    top: 15vw;
    opacity: 0;
}

.main11-txt.main11-txt2 {
    width: 23vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    right: 0vw;
    left: auto;
    top: 14vw;
    opacity: 0;
}

.main11-txt.main11-txt3 {
    width: 25vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 71vw;
    top: 12vw;
    opacity: 0;
}

.main11-txt.main11-txt4 {
    width: 19.8vw;
    color: #ffffff;
    font-family: 'Noto Sans TC';
    position: absolute;
    left: 30vw;
    right: auto;
    top: 12vw;
    opacity: 0;
}

.swiper-slide-active .main11-txt.main11-txt1 {
    animation: main11-txt1 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes main11-txt1 {
    0% {
        opacity: 0;
        top: 14vw;
    }

    100% {
        opacity: 1;
        top: 8vw;
    }
}

.swiper-slide-active .main11-txt.main11-txt2 {
    animation: main11-txt2 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes main11-txt2 {
    0% {
        opacity: 0;
        top: 20vw;
    }

    100% {
        opacity: 1;
        top: 14vw;
    }
}

.swiper-slide-active .main11-txt.main11-txt3 {
    animation: main11-txt3 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes main11-txt3 {
    0% {
        opacity: 0;
        top: 15vw;
    }

    100% {
        opacity: 1;
        top: 10vw;
    }
}


.swiper-slide-active .main11-txt.main11-txt4 {
    animation: main11-txt4 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes main11-txt4 {
    0% {
        opacity: 0;
        top: 18vw;
    }

    100% {
        opacity: 1;
        top: 13vw;
    }
}


.main11-txt.main11-txt3 .lef {
    width: 22%;
    float: left;

}

.main11-txt.main11-txt3 .rig {
    position: relative;
    width: 78%;
    float: left;
}

.main11-txt .line {
    position: relative;
    width: 100%;
    height: 1px;
    margin: 0.3vw 0 0.5vw 0;
    background-color: #ffffff8a;
}

.main11-txt .line2,
.main11-txt .line3 {
    position: absolute;
    width: 42vw;
    height: 1px;
    right: -2.5vw;
    top: 11vw;
    /* margin: 2.5vw 0; */
    background-image: url(../img/bg11-line.png);
    background-position: 0%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.main11-txt .line4 {
    position: absolute;
    width: 42vw;
    height: 1px;
    left: -5vw;
    right: auto;
    top: 11vw;
    /* margin: 2.5vw 0; */
    background-image: url(../img/bg11-line2.png);
    background-position: 0%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-size: cover;
}


.main11-txt h2 {
    width: 100%;
    position: relative;
    font-size: 1.7vw;
    /* letter-spacing: 0.3vw; */
    font-weight: 500;
    margin: 0 0 1vw 0;
    text-align-last: justify;
    font-family: 'Noto Sans TC';
    transform: scale(1, 0.85);
}

.main11-txt .work-title {
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
    font-size: 1vw;
    letter-spacing: 0.05vw;
    line-height: 1.8vw;
    font-weight: 100;
    margin: 0vw;
    transform: scale(1, 0.85);
    vertical-align: top;
}

.main11-txt.main11-txt3 h2 {
    width: auto;
    position: relative;
    font-size: 1.7vw;
    letter-spacing: 0.3vw;
    font-weight: 500;
    margin: 0 0 1vw 0;
    text-align-last: start;
    font-family: 'Noto Sans TC';
    transform: scale(1, 0.85);
}


.main11-txt h2 .m11-title-1 {
    display: inline-block;
    text-align-last: left;
}

.main11-txt h2 .lighter {
    font-weight: 100;
    position: relative;
}

/*
.main11-txt h2 .lighter::after{
    content: "";
    width: 1.5px;
    height: 1.9vw;
    background-color: #fff;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    position: absolute;
    right: -0.4vw;
    top: 0.1vw;
}*/
.main11-txt h3 {
    position: relative;
    font-size: 1.05vw;
    letter-spacing: 0.15vw;
    line-height: 2vw;
    font-weight: 300;
    text-align: left;
    margin: 0vw 0 0 0;
    padding-top: 0vw;
    font-family: 'Noto Sans TC';
    transform: scale(1, 0.85);
}

.main11-txt h4 {
    position: relative;
    font-size: 1.05vw;
    letter-spacing: 0.1vw;
    line-height: 1.8vw;
    font-weight: 400;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 0vw;
    transform: scale(1, 0.85);
}

.main11-txt h4 .dis {
    opacity: 0;
}

.main11-txt h4 .job {
    font-weight: 100;
}

.main11-txt.main11-txt h4 {
    /* width: 80%; */
}

.main11-txt h5 {
    padding: 0;
    margin: 0;
    position: relative;
    /* top: -0.7vw; */
    font-size: 1vw;
    letter-spacing: 0.06vw;
    line-height: 1.8vw;
    font-weight: 100;
    text-align: justify;
    text-align-last: left;
    text-justify: inter-ideograph;
    padding: 0;
    margin: 0vw;
    vertical-align: top;
    transform: scale(1, 0.85);
}

.main11-txt4 h5 {
    position: relative;
    /* text-align: justify;
    text-align-last: justify; */
    letter-spacing: 0.075em;
}

.m11-qrcode {
    position: relative;
    width: 6.6vw;
}

.m11-qrcode img {
    filter: brightness(80%);
}

.dot {
    position: relative;
    display: inline-block;
    margin: 0 -0.25vw 0 -0.25vw;
}

.dot-l {
    position: relative;
    display: inline-block;
    margin: 0 0vw 0 -0.5vw;
}

.dot-r {
    position: relative;
    display: inline-block;
    margin: 0 -0.6vw 0 0vw;
}


.main11-img {
    width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

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

.main11-img .man-txt {
    position: absolute;
    left: 0vw;
    top: 0vw;
    font-family: 'Noto Sans TC';
    font-size: 1vw;
    letter-spacing: 0.1vw;
    line-height: 1.5vw;
    font-weight: 300;
    color: #fff;

}

.swiper-slide-active .main11-img .man-txt {
    animation: man-st 1s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes man-st {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.main11-img .man-txt.man1 {
    position: absolute;
    left: 12.5vw;
    top: 31vw;
}

.main11-img .man-txt.man2 {
    position: absolute;
    top: 25.2vw;
    left: 30.5vw;
    text-align: left;
}

.main11-img .man-txt.man3 {
    position: absolute;
    top: 43vw;
    left: 27vw;
}

.main11-img .man-txt.man4 {
    position: absolute;
    top: 38.5vw;
    left: 46vw;
}

.main11-img .man-txt.man5 {
    position: absolute;
    top: 65vw;
    left: 18vw;
}

.main11-img .man-txt.man6 {
    position: absolute;
    top: 58vw;
    left: 60vw;
}

.main11-img .man-txt.man7 {
    position: absolute;
    top: 74vw;
    left: 18vw;
}

/*頁面12*/
.main12 {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    color: #002d49;
    background-color: #fff;
}

.main12>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.5);
    animation-fill-mode: forwards;
}

.main12-bg img.shine {
    position: absolute;
    top: 0;
    left: 0;
    animation: mapshine 1s ease infinite;
    opacity: 0;
}

@keyframes mapshine {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.main12 .logo-txt {
    width: calc(450 * var(--vw-base));
    position: absolute;
    left: 58vw;
    top: calc(440 * var(--vw-base));
}

.main12 .end-txt {
    width: calc(450 * var(--vw-base));
    position: absolute;
    left: 58vw;
    top: calc(440 * var(--vw-base));
}

.main12 .mid-txt {
    width: calc(450 * var(--vw-base));
    position: absolute;
    left: 58.5vw;
    bottom: calc(430 * var(--vw-base));
    color: #fff;
    font-family: 'Noto Sans TC';
    line-height: 3vw;
    font-size: 1.8vw;
    font-weight: 100;
    text-align: left;
    letter-spacing: 0.25vw;
}

.main12 .last-txt {
    width: calc(450 * var(--vw-base));
    position: absolute;
    left: 58.5vw;
    bottom: calc(380 * var(--vw-base));
    color: #fff;
    font-family: 'Noto Sans TC';
    line-height: 3vw;
    font-size: 1.65vw;
    font-weight: 100;
    text-align: left;
    letter-spacing: 0.2vw;
}

.main12 .last-txt .sm {
    font-size: 1.3vw;
}



/*頁面13*/
.main13 {
    position: relative;
    width: 100%;
    height: 50vw;
    padding: 0;
}

.main13-bg {
    position: relative;
    width: 100%;
}

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

.form-title1 {
    position: absolute;
    left: 50%;
    top: 2.5vw;
    width: 35vw;
    transform: translateX(-50%);
}

.form-title2 {
    position: absolute;
    left: 0;
    top: 5vw;
    width: 100%;
    text-align: center;
}

.form-title2 .title-h1 {
    color: #fff;
    font-family: 'Noto Sans TC';
    line-height: 5vw;
    text-align: center;
    font-size: 1.82vw;
    font-weight: 500;
    letter-spacing: 0.05vw;
    transform: scaleX(1) scaleY(0.7);
}

.m13-main {
    position: absolute;
    left: 50%;
    top: 15vw;
    /* width: 50vw; */
    transform: translateX(-50%);
    display: flex;
    gap: 0.3vw;
    height: 19.3vw;
}


@media (min-width: 780px) and (max-width: 1450px) {
    .m13-main {
        height: 27vw;
    }
}

@media (min-width: 300px) and (max-width: 780px) {
    .main13 {
        position: relative;
        width: 100%;
        height: 55vw;
        padding: 0;
    }

    .m13-main {
        height: 30vw;
    }
}

.m13-shine {
    position: relative;
    height: 100%;
}

.m13-shine img.true {
    position: relative;
    width: auto;
    height: 100%;
}

.m13-shine img.shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: mapshine 1s ease infinite;
    opacity: 0;
}

@keyframes mapshine {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.form {
    position: relative;
    width: 38vw;
    font-family: 'Noto Sans TC' !important;
    color: #fff;
    background-color: #595757;
    box-sizing: border-box;
    padding: 0 5vw 2vw 5vw;
}

.form-t1 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2.5vw;
    font-size: 0.8vw;
    color: #fff;
    letter-spacing: 0.5em;
    padding-top: 1vw;
}

.form-title {
    width: 100%;
    margin: 0 0 8vw 0;
    font-family: 'Noto Sans TC' !important;
    text-align: center;
    color: #fff;
    height: 2.5vw;
    line-height: 2.5vw;
    letter-spacing: 0.3vw;
    font-size: 3vw;
    font-weight: 300;
}

.form select {
    width: 100%;
    box-sizing: border-box;
    height: 2.5vw;
    line-height: 2.5vw;
    font-size: 1.05vw;
    color: #fff;
    padding-left: 2%;
    background-color: transparent;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    background-image: url(../img/select.png);
    background-position-x: 97%;
    background-position-y: 54%;
    background-repeat: no-repeat;
    background-size: 3.5%;
    outline: none;
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    letter-spacing: 0.2vw;
    position: relative;
    padding: 0 0 0 6.5vw;
    display: block;
}

.select {
    width: 100%;
    position: relative;
    height: 2.5vw;
    line-height: 2.5vw;
    margin-bottom: 0.25vw;
    font-weight: 300;
}


.input {
    width: 100%;
    position: relative;
    height: 2vw;
    line-height: 2vw;
    margin-bottom: 0.25vw;
    font-weight: 300;
}

.input::before,
.select::before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -2px;
    background-color: rgba(255, 255, 255, 0.3);
}

.input.first::after {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    top: -8px;
    background-color: rgba(255, 255, 255, 0.3);
}

.input.last {
    margin-bottom: 0.5vw;
}

.check-item-sex {
    position: relative;
    /* right: -1.7vw; */
    top: 0;
    height: 2vw;
    line-height: 2vw;
    font-size: 0.8vw;
    letter-spacing: 0.2vw;
    font-family: 'Noto Sans TC';
    display: block;
    color: #fff;
    z-index: 1;
}

.check-item-sex label {
    width: 4vw;
    height: 2.5vw;
    line-height: 2.5vw;
    cursor: pointer;
    display: block;
    float: left;
}

.check-item-sex label input[type="radio"] {
    width: 0.8vw;
    height: 0.8vw;
    margin: 0% 8% -3% 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    background: url(../img/check.png) no-repeat top center;
    background-size: 0.8vw 0.8vw;
    border: none;
    cursor: pointer;
}

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

.input-title {
    position: absolute;
    left: 0vw;
    top: 0;
    height: 2vw;
    line-height: 2vw;
    letter-spacing: 0.3vw;
    font-size: 0.8vw;
    font-family: 'Noto Sans TC';
    font-weight: 300;
    z-index: 1;
}

.form input[type="text"],
.form input[type="tel"],
.form input[type="email"] {
    width: 100%;
    height: 2vw;
    line-height: 1vw;
    font-size: 0.8vw;
    border: none;
    background-color: transparent;
    color: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    -moz-appearance: none;
    outline: none;
    letter-spacing: 0.2vw;
    padding: 0 0 0 6.5vw;
    position: relative;
    box-sizing: border-box;
    display: block;
    font-weight: 300;
    vertical-align: middle;
}

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

.check-item {
    width: 100%;
    height: 2vw;
    line-height: 2vw;
    font-size: 0.8vw;
    color: #fff;
    margin: 0vw auto 0 auto;
    vertical-align: middle;
    font-weight: 300;
    letter-spacing: 0.2vw;
    position: relative;
    margin-bottom: 2vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.check-item::after {
    /* content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0px;
    background-color: rgba(255, 255, 255, 0.3); */
}

.check-item::after {
    content: "";
    clear: both;
    display: block;
}

.check-item a:link,
.check-item a:visited,
.check-item a:hover,
.check-item a:active {
    color: #fff;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

.check-label {
    width: 25%;
    height: 2.5vw;
    line-height: 2.5vw;
    float: left;
}

.check-item label {
    line-height: 2vw;
    cursor: pointer;
    font-weight: 300;
}

.check-item label input {
    width: 0.8vw;
    height: 0.8vw;
    margin: 0% 3% -1.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: 0.8vw 0.8vw;
    border: none;
}

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

.agreeBtn {
    height: 2vw;
    float: left;
    font-weight: 300;
}

.openTxtBtn {
    display: inline-block;
    height: 2vw;
    line-height: 2vw !important;
    font-weight: 300;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

.form input[type="submit"],
.form input[type="button"] {
    /* width: 100%; */
    height: 2vw;
    line-height: 2vw;
    letter-spacing: 0.2vw;
    border: none;
    background-color: #595757;
    font-size: 0.8vw;
    font-weight: 300;
    color: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    outline: none;
    position: relative;
    font-family: 'Noto Sans TC';
    display: block;
    cursor: pointer;
    padding: 0;
    border-bottom: 2px solid #fff;
}

.infor {
    width: 100vw;
    position: absolute;
    height: auto;
    left: 0;
    bottom: 20vw;
    letter-spacing: 0;
    font-family: 'Noto Sans TC';
    color: #fff;
    font-size: 2.2vw;
    text-align: center;
    font-weight: lighter;
}

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

.dropdown-dark {
    background: #595757;
    border-color: #595757;
    text-align: left;
    width: 100%;
    text-align: center;
}

.dropdown-dark:before {
    border-bottom-color: #595757;
}

.dropdown-dark:after {
    border-top-color: #595757;
}

.dropdown-dark .dropdown-select {
    color: #fff;
    width: 100%;
    background: #595757;
    padding: 0 0 0 6.5vw !important;
    text-align: left;
    background-image: url(../img/select.png);
    background-position-x: 97%;
    background-position-y: 54%;
    background-repeat: no-repeat;
    background-size: 3.5%;
}

.dropdown-dark .dropdown-select:focus {
    color: #fff;
    background: transparent !important;
}

.dropdown-dark .dropdown-select>option {
    background: #595757 !important;
    text-align: left;
    line-height: 2vw;
    color: #fff !important;
}

option:hover,
option:focus,
option:active,
option:checked {
    color: #fff !important;
    background: #000 !important;
}


.form-end {
    position: absolute;
    left: 0%;
    top: 110%;
    width: 90%;

}

.form-end img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.phone-click {
    position: absolute;
    right: 2.4vw;
    bottom: 0vw;
    width: 12.5vw;
    height: 1vw;
    cursor: pointer;
    background-color: transparent;
}


.verify {
    position: absolute;
    bottom: 8%;
    right: 0;
    height: 90%;
    width: calc(80*var(--vw-base));
    background-color: #353535;
    box-sizing: border-box;
    padding: calc(3*var(--vw-base)) calc(0*var(--vw-base));
    cursor: pointer;
}

.verify img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.check-gre {
    position: relative;
    margin-left: 6.5vw;
    line-height: 2vw;
    letter-spacing: 0.08vw;
    font-size: 0.8vw;
    font-family: 'Noto Sans TC';
    font-weight: 300;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.gre-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gre-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.gre-popup.active {
    display: flex;
}

.gre-content {
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    position: relative;
}

.gre-close {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-size: 16px;
}



@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%;
    }
}

/*同意書照片預覽*/

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



/*廣告縮圖*/

.black2 {
    width: 100%;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    display: none;
}

.black2 .index_pop {
    width: 100%;
    height: 100%;
    position: fixed;
    height: 100vh;
    left: 0px;
    top: 0px;
    overflow: hidden;
    transition: opacity 0.5s ease-in-out;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.9);
}

.black2 .open_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    height: 100vh;
    left: 0px;
    top: 0px;
    opacity: 0;
    background-color: #000000;
}

.black2 .index_pop img {
    width: 80%;
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
    position: relative;
}

.black2 .box_close {
    width: calc(50* var(--vw-base));
    height: calc(50* var(--vw-base));
    position: absolute;
    top: calc(50* var(--vw-base));
    right: calc(50* var(--vw-base));
    ;
    background-image: url(../img/close.png);
    background-size: contain;
    cursor: pointer;
    transition: ease-in-out 0.4s 0.6s;
}