* {
    /* outline: 1px salmon solid; */
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}

body {
    /* overflow: hidden; */
}

.main-container {
    max-width: 1920px;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.for-mb {
    display: none;
}

@media screen and (max-width:767px) {
    .main-container {
        max-width: 767px;
        margin: 0 auto;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .for-pc {
        display: none;
    }

    .for-mb {
        display: block;
    }
}

.number {
    display: flex;
    text-align: center;
    margin: 0 auto;
    justify-content: center;
    font-weight: 600;
    max-height: 5.22vw;
    font-family: Microsoft JhengHei;
}

/* cta start */
/* ============================================================================================================================================================================================================================================================================================================== */
.cta {
    max-width: 1920px;
    margin: 0 auto;
    position: fixed;
    width: 18.6%;
    background-image: url(../images/cta-pc.png);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 21.3%;
    z-index: 500;
    top: 57%;
    right: 0;
    cursor: pointer;
}

.cta-light {
    max-width: 1920px;
    margin: 0 auto;
    position: fixed;
    width: 18.6%;
    background-image: url(../images/cta-light-pc.png);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 21.3%;
    z-index: 499;
    top: 57%;
    right: 0;
    animation: cta-light-opacity-ani 1s infinite linear alternate;
}

@keyframes cta-light-opacity-ani {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width:767px) {
    .cta {
        max-width: 1920px;
        margin: 0 auto;
        position: fixed;
        width: 35%;
        background-image: url(../images/cta-pc.png);
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: 40%;
        z-index: 500;
        top: auto;
        right: 0;
        bottom: 5%;
        cursor: pointer;
    }

    .cta-light {
        max-width: 1920px;
        margin: 0 auto;
        position: fixed;
        width: 35%;
        background-image: url(../images/cta-light-pc.png);
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: 40%;
        z-index: 499;
        top: auto;
        right: 0;
        bottom: 5%;
        animation: cta-light-opacity-ani 1s infinite linear alternate;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* cta end */


/* meun start */
/* ============================================================================================================================================================================================================================================================================================================== */
.menu {
    max-width: 1920px;
    margin: 0 auto;
    position: fixed;
    width: 100%;
    background-image: url('../images/menu-pc.png');
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 5.16%;
    z-index: 1;
    margin-top: 1.65%;
}

.menu.move {
    z-index: 999;
    background-image: url('../images/menu-pc-active.png');
    margin-top: 0%;
}

.home {
    position: absolute;
    width: 16.5%;
    height: 93.6%;
    cursor: pointer;
    top: 4%;
    left: 2%;
    display: block;
}

.menu .effective-coverage {
    position: absolute;
    padding-top: 4.7%;
    cursor: pointer;
    top: 4%;
}

.menu .effective-coverage:nth-of-type(1):hover::after {
    position: absolute;
    content: '';
    width: 103.5%;
    height: 127.6%;
    left: -2%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu .effective-coverage:nth-of-type(1) {
    width: 9.76%;
    left: 22.3%;
}

.menu .option-1 {
    position: absolute;
    background-image: url('../images/meun-option-1-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 15.5%;
    width: 79.5%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .play {
    position: absolute;
    background-image: url('../images/meun-play.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 18.9%;
    width: 18.9%;
    top: 33.5%;
    left: 80.4%;
    z-index: 2;
}

.menu .effective-coverage:nth-of-type(2):hover::after {
    position: absolute;
    content: '';
    width: 85.9%;
    height: 127.6%;
    left: 7%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;

}

.menu .effective-coverage:nth-of-type(2) {
    width: 11.77%;
    left: 35.8%;
}

.menu .option-2 {
    position: absolute;
    background-image: url('../images/meun-option-2-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 12.85%;
    width: 100%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .effective-coverage:nth-of-type(3):hover::after {
    position: absolute;
    content: '';
    width: 92.9%;
    height: 127.6%;
    left: 3%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu .effective-coverage:nth-of-type(3) {
    width: 10.88%;
    left: 52.3%;
}

.menu .option-3 {
    position: absolute;
    background-image: url('../images/meun-option-3-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 13.85%;
    width: 100%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .effective-coverage:nth-of-type(4):hover::after {
    position: absolute;
    content: '';
    width: 140.7%;
    height: 127.6%;
    left: -22%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu .effective-coverage:nth-of-type(4) {
    width: 7.18%;
    left: 67.47%;
}

.menu .option-4 {
    position: absolute;
    background-image: url('../images/meun-option-4-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 21.1%;
    width: 100%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .effective-coverage:nth-of-type(5):hover::after {
    position: absolute;
    content: '';
    width: 163%;
    height: 127.6%;
    left: -29%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu .effective-coverage:nth-of-type(5) {
    width: 6.2%;
    left: 78.4%;
}

.menu .option-5 {
    position: absolute;
    background-image: url('../images/meun-option-5-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 25.2%;
    width: 100%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .effective-coverage:nth-of-type(6):hover::after {
    position: absolute;
    content: '';
    width: 118.9%;
    height: 127.6%;
    left: -11%;
    top: 0;
    background-image: url('../images/meun-hover.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.menu .effective-coverage:nth-of-type(6) {
    width: 8.5%;
    left: 88.6%;
}

.menu .option-6 {
    position: absolute;
    background-image: url('../images/meun-option-6-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 18.4%;
    width: 72.3%;
    top: 34.5%;
    left: 0;
    z-index: 2;
}

.menu .cart {
    position: absolute;
    background-image: url('../images/meun-cart.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 23.5%;
    width: 27.83%;
    top: 30.5%;
    left: 74%;
    z-index: 2;
}

@media screen and (max-width:767px) {
    .menu {
        max-width: 767px;
        margin: 0 auto;
        position: fixed;
        width: 100%;
        background-image: url('../images/menu-mb.png');
        padding-top: 12.39%;
        z-index: 1;
        margin-top: 2.61%;
    }

    .menu.move {
        background-image: url('../images/menu-mb-active.png');
        margin-top: 2.61%;
    }

    .menu::before {
        width: 0;
        height: 0;
    }

    .menu .effective-coverage {
        display: none;
    }

    .mb-menu-btn {
        position: absolute;
        width: 10%;
        padding-top: 9%;
        top: 12.5%;
        left: 87%;
        cursor: pointer;
        z-index: 1201;
    }

    .mb-menu-container {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1200;
        overflow-y: auto;
        display: none;
    }

    .mb-menu {
        position: absolute;
        top: 0;
        left: -100%;
        margin-top: 14.6%;
        width: 52.28%;
        padding-top: 152.55%;
        z-index: 1200;
        background-image: url(../images/mb-menu.png);
        background-size: contain;
        background-repeat: no-repeat;
        transition: left linear 0.3s;
    }

    .mb-menu.active {
        left: 0;
    }

    .mb-menu a {
        position: absolute;
        display: block;
        width: 100%;
        padding-top: 20%;
        top: 0;
        left: 0;
        cursor: pointer;
    }

    .mb-menu .mb-menu-option-1 {
        top: 18%;
    }

    .mb-menu .mb-menu-option-2 {
        top: 30.5%;
    }

    .mb-menu .mb-menu-option-3 {
        top: 43%;
    }

    .mb-menu .mb-menu-option-4 {
        top: 54.5%;
    }

    .mb-menu .mb-menu-option-5 {
        top: 65.9%;
    }

    .mb-menu .mb-menu-option-6 {
        top: 77%;
    }

    .home {
        position: absolute;
        width: 33.5%;
        height: 93.6%;
        cursor: pointer;
        top: 4%;
        left: 2%;
        display: block;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* meun end */

/* kv start */
/* ============================================================================================================================================================================================================================================================================================================== */

.kv {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 53.2%;
    overflow: hidden;
    pointer-events: none;
}

.kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.56%;
    height: 100%;
    background-color: #00FF00;
    z-index: 1000;
}

.kv .bg {
    position: absolute;
    padding-top: 48.54%;
    width: 71.41%;
    background-image: url('../images/kv-pc.png');
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
    left: 14.1%;
    bottom: 0;
    z-index: 1;
}

.kv .kv-left-title-pc {
    pointer-events: none;
    position: absolute;
    padding-top: 30.73%;
    width: 36.1%;
    background-image: url('../images/kv-left-title-pc.png');
    background-size: contain;
    background-repeat: no-repeat;
    left: -36.6%;
    top: -28.7%;
    z-index: 101;
    transition: top 1s linear,
        left 1s linear;
}

.kv-left-title-pc[data-aos^=fade][data-aos^=fade] {
    transition: top 1s linear,
        left 1s linear;
}

.kv .kv-left-title-pc.active {
    left: 8.3%;
    top: 10.1%;
}

.kv .kv-left-title-speaker-pc {
    pointer-events: none;
    position: absolute;
    padding-top: 30.73%;
    width: 36.1%;
    background-image: url('../images/kv-left-title-speaker-pc.png');
    background-size: contain;
    background-repeat: no-repeat;
    left: 8.3%;
    top: 10.1%;
    z-index: 102;
    opacity: 0;
    animation: kv-opacity-ani infinite 2s alternate linear;
    display: none;
}

.kv .kv-left-title-speaker-pc.active {
    display: block;
}

.kv .kv-right-title-pc.active {
    top: 43.1%;
    right: 0;
}

.kv .kv-right-title-pc {
    pointer-events: none;
    position: absolute;
    padding-top: 16.88%;
    width: 36.5%;
    background-image: url('../images/kv-right-title-pc.png');
    background-size: contain;
    background-repeat: no-repeat;
    top: 24.7%;
    right: -38.6%;
    z-index: 2;
    transition: top 1s linear,
        right 1s linear;
}

.kv-right-title-pc[data-aos^=fade][data-aos^=fade] {
    transition: top 1s linear,
        right 1s linear;
}

@keyframes kv-opacity-ani {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width:767px) {
    .kv {
        max-width: 767px;
        margin: 0 auto;
        position: relative;
        padding-top: 196.2%;
        z-index: 3;
        overflow: hidden;
    }

    .kv::before {
        width: 0;
        height: 0;
    }

    .kv .bg {
        padding-top: 120.51%;
        width: 100%;
        background-image: url('../images/kv-mb.png');
        left: 0;
        bottom: 0;
    }

    .kv .kv-left-title-pc {
        padding-top: 64.41%;
        width: 96.35%;
        background-image: url('../images/kv-left-title-mb.png');
        left: -97%;
        top: 5.1%;
        z-index: 101;
    }

    .kv .kv-left-title-pc.active {
        left: 3.59%;
        top: 5.1%;
    }

    .kv .kv-left-title-speaker-pc {
        padding-top: 64.41%;
        width: 96.35%;
        background-image: url('../images/kv-left-title-speaker-mb.png');
        background-size: contain;
        background-repeat: no-repeat;
        left: 3.59%;
        top: 5.1%;
        z-index: 102;
        opacity: 0;
        animation: kv-opacity-ani infinite 2s alternate linear;
        display: none;
    }

    .kv .kv-left-title-speaker-pc.active {
        display: block;
    }

    .kv .kv-right-title-pc {
        display: none;
    }

    .kv-right-title-mb.active {
        top: -12.5%;
        right: 0;
    }

    .kv-right-title-mb {
        position: absolute;
        padding-top: 42.24%;
        width: 91.8%;
        background-image: url(../images/kv-right-title-mb.png);
        top: -12.5%;
        right: -92%;
        z-index: 4;
        background-size: contain;
        background-repeat: no-repeat;
        transition: top 1s linear,
            right 1s linear;
    }

    .kv-right-title-mb[data-aos^=fade][data-aos^=fade] {
        transition: top 1s linear,
            right 1s linear;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* kv end */


/* tv start */
/* ============================================================================================================================================================================================================================================================================================================== */
.tv {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 61%;
    overflow: hidden;
    /* pointer-events: none; */
    z-index: 3;
    margin-top: -5%;
}

.tv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.56%;
    height: 50%;
    background-color: #00FF00;
}

.tv .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url('../images/tv-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    z-index: 3;
}

.tv .play {
    position: absolute;
    width: 6.095%;
    padding-top: 6.095%;
    background-image: url('../images/tv-play-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    top: 41%;
    left: 54.65%;
    animation: tv-size-ani infinite 1s alternate linear;
}

.tv .video {
    position: absolute;
    width: 55.5%;
    padding-top: 31.2%;
    z-index: 3;
    top: 19.9%;
    left: 30.9%;
    cursor: pointer;
}

.tv .video #mb-video {
    display: none;
}

@keyframes tv-size-ani {
    0% {
        transform: scale(1);
    }

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

@media screen and (max-width:767px) {
    .tv {
        max-width: 767px;
        padding-top: 143.7%;
        overflow: visible;
        z-index: 3;
        margin-top: -15.5%;
    }

    .tv::before {
        width: 0;
        height: 0;
    }

    .tv .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: url('../images/tv-mb.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        z-index: 3;
        margin-top: -2%;
    }

    .tv .play {
        position: absolute;
        width: 10.69%;
        padding-top: 10.69%;
        background-image: url('../images/tv-play-mb.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 3;
        top: 38%;
        left: 44.65%;
        animation: tv-size-ani infinite 1s alternate linear;
    }

    .tv .video {
        width: 94.5%;
        padding-top: 53.2%;
        z-index: 3;
        top: 21.2%;
        left: 3.7%;
    }

    .tv .video #mb-video {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* tv end */

/* NO1 start */
/* ============================================================================================================================================================================================================================================================================================================== */
.NO1 {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 122.97%;
    /* pointer-events: none; */
    z-index: 2;
    margin-top: -16.3%;
    background-image: url('../images/NO1-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-title-bg {
    position: absolute;
    width: 9.64%;
    padding-top: 5.39%;
    top: 17.7%;
    left: 36.5%;
    background-color: #fff;
    z-index: 2;
}

.NO1 .NO1-title-light {
    position: absolute;
    width: 10.64%;
    padding-top: 6%;
    top: 17.5%;
    left: 30.5%;
    background-image: url(../images/PC_180x100.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    animation: NO1-title-light-ani 2.5s infinite linear;
}

@keyframes NO1-title-light-ani {
    0% {
        left: 30.5%;
    }

    50% {
        left: 45.5%;
    }

    100% {
        left: 45.5%;
    }
}

.NO1 .NO1-title {
    position: absolute;
    width: 55.63%;
    padding-top: 11.98%;
    top: 14%;
    left: 22%;
    background-image: url('../images/NO1-title-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.NO1 .NO1-left-circle {
    position: absolute;
    width: 30.78%;
    padding-top: 29.85%;
    top: 26%;
    left: 6.5%;
    background-image: url('../images/NO1-left-circle-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-left-circle-text {
    position: absolute;
    width: 11.72%;
    padding-top: 1.82%;
    top: 43.5%;
    left: 9.5%;
    background-image: url('../images/NO1-left-circle-text-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-left-circle-light {
    position: absolute;
    width: 37.55%;
    padding-top: 35.83%;
    top: 23.5%;
    left: 3.1%;
    background-image: url('../images/NO1-left-light-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* animation: NO1-circle-ani infinite 1s linear; */
}

.NO1 .NO1-left-circle-number {
    position: absolute;
    width: 12.72%;
    top: 42%;
    left: 21.9%;
    font-size: 4.2vw;
    color: #000;
    overflow: hidden;
}

.NO1 .NO1-left-circle-number-focus {
    position: absolute;
    width: 12.61%;
    padding-top: 5.16%;
    top: 42.1%;
    left: 21.2%;
    background-image: url('../images/NO1-left-focus-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-right-circle-number {
    position: absolute;
    width: 12.72%;
    top: 56.5%;
    left: 72.9%;
    font-size: 4.2vw;
    color: #000;
    overflow: hidden;
}

.NO1 .NO1-right-circle-number-focus {
    position: absolute;
    width: 12.87%;
    padding-top: 6.3%;
    top: 56.5%;
    left: 74%;
    background-image: url('../images/NO1-right-focus-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-bottom-number-1 {
    position: absolute;
    width: 12.72%;
    top: 79.5%;
    left: 19.2%;
    font-size: 5.2vw;
    color: #006A00;
    overflow: hidden;
    max-height: 6.5vw;
}

.NO1 .NO1-bottom-number-1 .small div {
    font-size: 3.2vw;
    min-height: 6.5vw;
    display: flex;
    align-items: flex-end;
}

.NO1 .NO1-bottom-number-2 {
    position: absolute;
    width: 12.72%;
    top: 79.5%;
    left: 43.7%;
    font-size: 5.2vw;
    color: #009F1A;
    overflow: hidden;
    max-height: 6.5vw;
}

.NO1 .NO1-bottom-number-2 .small div {
    font-size: 3.2vw;
    min-height: 6.5vw;
    display: flex;
    align-items: flex-end;
}

.NO1 .NO1-bottom-number-3 {
    position: absolute;
    width: 12.72%;
    top: 79.5%;
    left: 68.2%;
    font-size: 5.2vw;
    color: #4DC052;
    overflow: hidden;
    max-height: 6.5vw;
}

.NO1 .NO1-bottom-number-3 .small div {
    font-size: 3.2vw;
    min-height: 6.5vw;
    display: flex;
    align-items: flex-end;
}

.NO1 .NO1-right-circle {
    position: absolute;
    width: 34.43%;
    padding-top: 35.52%;
    top: 37.3%;
    left: 56.43%;
    background-image: url('../images/NO1-right-circle-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .NO1-right-circle-light {
    position: absolute;
    width: 43.24%;
    padding-top: 41.25%;
    top: 35.46%;
    left: 51.6%;
    background-image: url('../images/NO1-right-light-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    /* animation: NO1-circle-ani infinite 1s linear; */
}

.NO1 .NO1-bottom {
    position: absolute;
    width: 65.62%;
    padding-top: 25.21%;
    top: 69.7%;
    left: 17.4%;
    background-image: url('../images/NO1-bottom-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.NO1 .green-logo {
    position: absolute;
    width: 34.01%;
    padding-top: 26.04%;
    top: 96.2%;
    left: 7.5%;
    background-image: url('../images/green-logo-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


@keyframes NO1-circle-ani {
    0% {
        transform: rotate(-130deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media screen and (max-width:767px) {

    .NO1 .NO1-title-bg {
        position: absolute;
        width: 18.64%;
        padding-top: 8.39%;
        top: 8%;
        left: 24.5%;
        background-color: #fff;
        z-index: 2;
    }

    .NO1 .NO1-title-light {
        position: absolute;
        width: 18.64%;
        padding-top: 8.39%;
        top: 8%;
        left: 24.5%;
        background-color: #fff;
        z-index: 2;
        background-image: url(../images/MB_143x64.png);
    }

    @keyframes NO1-title-light-ani {
        0% {
            left: 14.5%;
        }

        50% {
            left: 40.5%;
        }

        100% {
            left: 40.5%;
        }
    }

    .NO1 .NO1-title {
        position: absolute;
        width: 95.307%;
        padding-top: 24.512%;
        top: 5.09%;
        left: 2.5%;
        background-image: url(../images/NO1-title-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .NO1 .NO1-left-circle-number {
        position: absolute;
        width: 28.72%;
        top: 24.5%;
        left: 55.9%;
        font-size: 9.2vw;
        color: #000;
        overflow: hidden;
    }

    .NO1 .NO1-left-circle-number-focus {
        position: absolute;
        width: 24.61%;
        padding-top: 10.16%;
        top: 25.1%;
        left: 55.2%;
        background-image: url(../images/NO1-left-focus-pc.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .NO1 .NO1-right-circle-number {
        position: absolute;
        width: 26.72%;
        top: 53%;
        left: 45.9%;
        font-size: 9.2vw;
        color: #000;
        overflow: hidden;
    }

    .NO1 .NO1-right-circle-number-focus {
        position: absolute;
        width: 24.61%;
        padding-top: 10.16%;
        top: 53.5%;
        left: 45%;
        background-image: url('../images/NO1-right-focus-pc.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .NO1 .NO1-bottom-number-1 {
        position: absolute;
        width: 26.72%;
        top: 69.5%;
        left: 5.5%;
        font-size: 9.2vw;
        color: #006A00;
        overflow: hidden;
        max-height: 11.5vw;
    }

    .NO1 .NO1-bottom-number-1 .small div {
        font-size: 4.5vw;
        min-height: 9.5vw;
        display: flex;
        align-items: flex-end;
    }

    .NO1 .NO1-bottom-number-2 {
        position: absolute;
        width: 26.72%;
        top: 69.5%;
        left: 36.7%;
        font-size: 9.2vw;
        color: #009F1A;
        overflow: hidden;
        max-height: 11.5vw;
    }

    .NO1 .NO1-bottom-number-2 .small div {
        font-size: 4.5vw;
        min-height: 9.5vw;
        display: flex;
        align-items: flex-end;
    }

    .NO1 .NO1-bottom-number-3 {
        position: absolute;
        width: 26.72%;
        top: 69.5%;
        left: 68.2%;
        font-size: 9.2vw;
        color: #4DC052;
        overflow: hidden;
        max-height: 11.5vw;
    }

    .NO1 .NO1-bottom-number-3 .small div {
        font-size: 4.5vw;
        min-height: 9.5vw;
        display: flex;
        align-items: flex-end;
    }

    .number {
        display: flex;
        text-align: center;
        margin: 0 auto;
        justify-content: center;
        font-weight: bold;
        max-height: 11.22vw;
        font-family: Microsoft JhengHei;
    }

    .NO1 {
        max-width: 767px;
        padding-top: 395.84%;
        z-index: 2;
        background-image: url('../images/NO1-mb.png');
    }

    .NO1 .NO1-left-circle {
        width: 66.23%;
        padding-top: 66.63%;
        top: 12.2%;
        left: auto;
        right: 0;
        background-image: url('../images/NO1-left-circle-mb.png');
    }

    .NO1 .NO1-left-circle-light {
        width: 74.05%;
        padding-top: 80.05%;
        top: 10.5%;
        left: auto;
        right: -0.3%;
        background-image: url('../images/NO1-left-light-mb.png');
        /* animation: NO1-circle-ani infinite 1s linear; */
    }

    .NO1 .NO1-right-circle {
        width: 79.79%;
        padding-top: 76.4%;
        top: 40.4%;
        left: 9%;
        background-image: url('../images/NO1-right-circle-mb.png');
    }

    .NO1 .NO1-right-circle-light {
        width: 95.95%;
        padding-top: 92.2%;
        top: 38.4%;
        left: -0.5%;
        background-image: url('../images/NO1-right-light-mb.png');
        /* animation: NO1-circle-ani infinite 1s linear; */
    }

    .NO1 .NO1-bottom {
        width: 89.7%;
        padding-top: 50.85%;
        top: 62.55%;
        left: 5.45%;
        background-image: url('../images/NO1-bottom-mb.png');
    }

    .NO1 .green-logo {
        position: absolute;
        width: 34.01%;
        padding-top: 26.04%;
        top: 96.2%;
        left: 7.5%;
        background-image: url('../images/green-logo-mb.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: none;
    }

    .NO1 .NO1-left-circle-text {
        display: none;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* NO1 end */


/* green start */
/* ============================================================================================================================================================================================================================================================================================================== */
.green {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 88.54%;
    overflow: hidden;
    /* pointer-events: none; */
    z-index: 1;
    margin-top: -5.22%;
    background-image: url('../images/green-pc.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.green .green-title {
    position: absolute;
    width: 45.83%;
    padding-top: 12.45%;
    top: -3.6%;
    left: 105%;
    background-image: url('../images/green-title-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.green .green-left-line {
    position: absolute;
    width: 48.49%;
    padding-top: 33.75%;
    top: 61.3%;
    left: 43.5%;
    background-image: url('../images/green-left-line-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.green .green-right-line {
    position: absolute;
    width: 42.6%;
    padding-top: 54.01%;
    top: 38.2%;
    right: -4.5%;
    background-image: url('../images/green-right-line-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.green .green-left-circle {
    position: absolute;
    width: 85.73%;
    padding-top: 89.12%;
    top: 1%;
    left: -0.1%;
    background-image: url('../images/green-left-circle-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.green .green-right-circle {
    position: absolute;
    width: 35.89%;
    padding-top: 45.89%;
    top: 30%;
    right: 0;
    background-image: url('../images/green-right-circle-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.green .green-arrow {
    position: absolute;
    width: 8.49%;
    padding-top: 10.57%;
    top: 71.9%;
    left: 31.4%;
    background-image: url('../images/green-arrow-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.green .green-left-circle-text {
    position: absolute;
    width: 16.88%;
    padding-top: 14.06%;
    top: 71.4%;
    left: 19.9%;
    background-image: url('../images/green-left-circle-text-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width:767px) {
    .green .green-logo-mb {
        position: absolute;
        width: 61.68%;
        padding-top: 47.2%;
        top: -1.63%;
        left: 23.2%;
        background-image: url('../images/green-logo-mb.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .green {
        max-width: 767px;
        padding-top: 274.19%;
        overflow: visible;
        z-index: 2;
        margin-top: -58.22%;
        background-image: url('../images/green-mb.png');
    }

    .green .green-title {
        width: 89.7%;
        padding-top: 28.55%;
        top: 6%;
        left: 100.2%;
        background-image: url('../images/green-title-mb.png');
    }

    .green .green-left-line {
        position: absolute;
        width: 84.75%;
        padding-top: 87.22%;
        top: 67.35%;
        left: 0%;
        background-image: url('../images/green-left-line-mb.png');
        z-index: 2;
    }

    .green .green-right-line {
        position: absolute;
        width: 82.65%;
        padding-top: 106.39%;
        top: 60.4%;
        right: 0%;
        background-image: url('../images/green-right-line-mb.png');
    }

    .green .green-left-circle {
        position: absolute;
        width: 100%;
        padding-top: 185.4%;
        top: 30.6%;
        left: 0%;
        background-image: url('../images/green-left-circle-mb.png');
    }

    .green .green-right-circle {
        width: 67.67%;
        padding-top: 112%;
        top: 28.3%;
        right: 0;
        background-image: url('../images/green-right-circle-mb.png');
    }

    .green .green-arrow {
        width: 18%;
        padding-top: 22.43%;
        top: 79%;
        left: 42.1%;
        background-image: url('../images/green-arrow-mb.png');
    }

    .green .green-left-circle-text {
        width: 38.59%;
        padding-top: 32.6%;
        top: 78.15%;
        left: 16.3%;
        background-image: url('../images/green-left-circle-text-mb.png');
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* green end */

/* pain start */
/* ============================================================================================================================================================================================================================================================================================================== */
.pain {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 76.2%;
    overflow: hidden;
    /* pointer-events: none; */
    z-index: 1;
    margin-top: 0%;
    background-image: url('../images/pain-pc.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.pain .pain-arrow {
    position: absolute;
    width: 4.17%;
    padding-top: 3.02%;
    top: 90.8%;
    left: 48%;
    background-image: url('../images/pain-arrow-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width:767px) {
    .pain {
        max-width: 1920px;
        margin: 0 auto;
        position: relative;
        padding-top: 285.14%;
        overflow: hidden;
        z-index: 2;
        margin-top: -11.6%;
        background-image: url(../images/pain-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .pain .pain-arrow {
        position: absolute;
        width: 10.43%;
        padding-top: 7.57%;
        top: 93.8%;
        left: 45%;
        background-image: url(../images/pain-arrow-pc.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* pain end */

/* form start */
/* ============================================================================================================================================================================================================================================================================================================== */
.form {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    padding-top: 104.95%;
    /* pointer-events: none; */
    z-index: 1;
    margin-top: 0%;
    background-image: url('../images/form-pc.jpg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .bottle {
    position: absolute;
    width: 47.24%;
    padding-top: 34.22%;
    top: -3.8%;
    right: 0;
    background-image: url(../images/form-bottle-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .form-title-1 {
    position: absolute;
    width: 26.46%;
    padding-top: 5.99%;
    top: 3.65%;
    left: 17.4%;
    background-image: url(../images/form-title-1-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.form .form-title-2 {
    position: absolute;
    width: 37.14%;
    padding-top: 11.25%;
    top: 6.12%;
    left: 14%;
    background-image: url(../images/form-title-2-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .form-7-title {
    position: absolute;
    width: 3.5%;
    padding-top: 6.51%;
    top: 61.5%;
    left: 25.8%;
    background-image: url(../images/form-7-title-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.form .form-7 {
    position: absolute;
    width: 3.75%;
    padding-top: 3.02%;
    top: 63.28%;
    left: 31.6%;
    background-image: url(../images/form-7-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.form .form-7-bg {
    position: absolute;
    width: 13.7%;
    padding-top: 8.86%;
    top: 61.12%;
    left: 24.1%;
    background-image: url(../images/form-7-bg-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .form-1250-title {
    position: absolute;
    width: 3.5%;
    padding-top: 6.51%;
    top: 61.59%;
    left: 53.88%;
    background-image: url(../images/form-1250-title-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.form .form-1250 {
    position: absolute;
    width: 12.71%;
    padding-top: 3.49%;
    top: 63.28%;
    left: 58.1%;
    background-image: url(../images/form-1250-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

.form .form-1250-bg {
    position: absolute;
    width: 17.34%;
    padding-top: 8.02%;
    top: 61.2%;
    left: 55.1%;
    background-image: url(../images/form-1250-bg-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .form-hand {
    position: absolute;
    width: 1.83%;
    padding-top: 2.03%;
    top: 79.89%;
    left: 69.9%;
    background-image: url(../images/form-hand-pc.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: form-hand-ani 1s linear infinite alternate;
}

@keyframes form-hand-ani {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#area.form-select-style {
    position: absolute;
    width: 12.5%;
    height: 3.47%;
    background-color: #fff;
    top: 29.9%;
    left: 37.6%;
    font-family: Microsoft JhengHei;
    font-size: 1.5vw;
    padding: 0px 20px;
}

#counters.form-select-style {
    position: absolute;
    width: 18.24%;
    height: 3.47%;
    background-color: #fff;
    top: 29.9%;
    left: 51%;
    font-family: Microsoft JhengHei;
    font-size: 1.5vw;
    padding: 0px 20px;
}

.form-select-style {
    /*移除箭頭樣式*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*改變右邊箭頭樣式*/
    background-image: url(../images/arrow-down.png);
    background-repeat: no-repeat;
    background-position: 97%;
    background-size: 1vw;
    border: none;
    outline: none;
}

#name.form-input-style {
    position: absolute;
    width: 31.66%;
    height: 3.47%;
    background-color: #fff;
    top: 33.9%;
    left: 37.6%;
    font-family: Microsoft JhengHei;
    font-size: 1.5vw;
    padding: 0px 20px;
    border: none;
    outline: none;
}

#phone.form-input-style {
    position: absolute;
    width: 31.66%;
    height: 3.47%;
    background-color: #fff;
    top: 37.9%;
    left: 37.6%;
    font-family: Microsoft JhengHei;
    font-size: 1.5vw;
    padding: 0px 20px;
    border: none;
    outline: none;
}


/*IE隱藏箭頭樣式*/
.form-select-style::-ms-expand {
    display: none;
}

.form .agree_block {
    position: absolute;
    width: 31%;
    height: 1.6%;
    top: 42.39%;
    left: 38.2%;
}

.form .agree_block label {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.form .agree_block input {
    display: none;
}

.form .agree_block input~i {
    position: absolute;
    width: 1.3vw;
    height: 1.3vw;
    background-image: url('../images/form-agree-pc.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    top: 50%;
    transform: translate(0px, -50%);
    cursor: pointer;
    pointer-events: none;
}

.form .agree_block input:checked~i {
    background-image: url('../images/form-agree-check-pc.png');
}

#rule {
    position: absolute;
    width: 37%;
    height: 100%;
    cursor: pointer;
    right: 0;
}

.form .btn {
    position: absolute;
    width: 31.66%;
    height: 3.47%;
    top: 45.75%;
    left: 37.6%;
    font-family: Microsoft JhengHei;
    font-size: 1.5vw;
    border: none;
    outline: none;
    font-weight: bold;
    background-color: transparent;
    cursor: pointer;
}

.precautions {
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
}

.precautions-container {
    position: fixed;
    background-image: url('../images/precautions-pc.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 71.98%;
    padding-top: 44.95%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.understand {
    position: absolute;
    width: 41.8%;
    padding-top: 5.2%;
    top: 83.8%;
    left: 28.5%;
    cursor: pointer;
}

.precautions-line {
    position: absolute;
    width: 14.8%;
    padding-top: 3.2%;
    top: 37.8%;
    left: 26.2%;
    cursor: pointer;
}

.form .link {
    position: absolute;
    display: block;
}

.form .link.buy {
    width: 26%;
    padding-top: 19%;
    top: 69%;
    left: 23%;
}

.form .link.experience {
    width: 26%;
    padding-top: 19%;
    top: 69%;
    left: 51%;
}

.form .link.fb {
    width: 3%;
    padding-top: 3%;
    top: 91.5%;
    left: 42.5%;
}

.form .link.ig {
    width: 3%;
    padding-top: 3%;
    top: 91.5%;
    left: 46.15%;
}

.form .link.youtube {
    width: 3%;
    padding-top: 3%;
    top: 91.5%;
    left: 49.95%;
}

.form .link.line {
    width: 3%;
    padding-top: 3%;
    top: 91.5%;
    left: 53.8%;
}


@media screen and (max-width:767px) {
    .form {
        max-width: 767px;
        padding-top: 475.9%;
        background-image: url('../images/form-mb.jpg');
        margin-top: -1%;
        z-index: 2;
    }

    .form .bottle {
        display: none;
    }

    .form .form-title-1 {
        position: absolute;
        width: 66.24%;
        padding-top: 14.99%;
        top: 0;
        left: 11.7%;
        background-image: url(../images/form-title-1-mb.png);
    }

    .form .form-title-2 {
        position: absolute;
        width: 88.79%;
        padding-top: 28.29%;
        top: 1.45%;
        left: 3.3%;
        background-image: url(../images/form-title-2-mb.png);
    }

    .form .form-7-title {
        position: absolute;
        width: 11.86%;
        padding-top: 22.17%;
        top: 50.5%;
        left: 15.8%;
        background-image: url(../images/form-7-title-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .form .form-7 {
        position: absolute;
        width: 12.91%;
        padding-top: 10.3%;
        top: 51.77%;
        left: 35.6%;
        background-image: url(../images/form-7-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .form .form-7-bg {
        position: absolute;
        width: 46.95%;
        padding-top: 30.25%;
        top: 50.12%;
        left: 10.3%;
        background-image: url(../images/form-7-bg-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .form .form-1250-title {
        position: absolute;
        width: 11.86%;
        padding-top: 22.17%;
        top: 73%;
        left: 15.8%;
        background-image: url(../images/form-1250-title-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .form .form-1250 {
        position: absolute;
        width: 43.55%;
        padding-top: 12%;
        top: 74.35%;
        left: 29.6%;
        background-image: url(../images/form-1250-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 2;
    }

    .form .form-1250-bg {
        position: absolute;
        width: 59.33%;
        padding-top: 27.38%;
        top: 72.8%;
        left: 20%;
        background-image: url(../images/form-1250-bg-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .form .form-hand {
        position: absolute;
        width: 6.25%;
        padding-top: 6.91%;
        top: 86.65%;
        left: 70.5%;
        background-image: url(../images/form-hand-mb.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        animation: form-hand-ani 1s linear infinite alternate;
    }


    #area.form-select-style {
        position: absolute;
        width: 60.5%;
        height: 1.8%;
        background-color: #fff;
        top: 27.9%;
        left: 32.6%;
        font-family: Microsoft JhengHei;
        font-size: 4vw;
        padding: 0px 4%;
    }

    #counters.form-select-style {
        position: absolute;
        width: 60.5%;
        height: 1.8%;
        background-color: #fff;
        top: 30.1%;
        left: 32.6%;
        font-family: Microsoft JhengHei;
        font-size: 4vw;
        padding: 0px 4%;
    }

    .form-select-style {
        /*移除箭頭樣式*/
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        /*改變右邊箭頭樣式*/
        background-image: url(../images/arrow-down.png);
        background-repeat: no-repeat;
        background-position: 95%;
        background-size: 3vw;
        border: none;
        outline: none;
    }

    #name.form-input-style {
        position: absolute;
        width: 60.5%;
        height: 1.8%;
        background-color: #fff;
        top: 32.75%;
        left: 32.6%;
        font-family: Microsoft JhengHei;
        font-size: 4vw;
        padding: 0px 4%;
        border: none;
        outline: none;
    }

    #phone.form-input-style {
        position: absolute;
        width: 60.5%;
        height: 1.8%;
        background-color: #fff;
        top: 35.3%;
        left: 32.6%;
        font-family: Microsoft JhengHei;
        font-size: 4vw;
        padding: 0px 4%;
        border: none;
        outline: none;
    }


    /*IE隱藏箭頭樣式*/
    .form-select-style::-ms-expand {
        display: none;
    }

    .form .agree_block {
        position: absolute;
        width: 85%;
        height: 1.4%;
        top: 37.6%;
        left: 8.5%;
    }

    .form .agree_block label {
        position: absolute;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .form .agree_block input {
        display: none;
    }

    .form .agree_block input~i {
        position: absolute;
        width: 3vw;
        height: 3vw;
        background-image: url('../images/form-agree-pc.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        left: 0;
        top: 50%;
        transform: translate(0px, -50%);
        cursor: pointer;
    }

    .form .agree_block input:checked~i {
        background-image: url('../images/form-agree-check-pc.png');
    }

    #rule {
        position: absolute;
        width: 29%;
        height: 100%;
        cursor: pointer;
        right: 0;
    }

    .form .btn {
        position: absolute;
        width: 90.5%;
        height: 2.9%;
        top: 40.2%;
        left: 4%;
        font-family: Microsoft JhengHei;
        font-size: 6.5vw;
        border: none;
        outline: none;
        font-weight: bold;
        background-color: transparent;
        cursor: pointer;
    }

    .precautions-container {
        position: fixed;
        background-image: url('../images/precautions-mb.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 93.62%;
        padding-top: 169.1%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;

    }

    .understand {
        position: absolute;
        width: 74.2%;
        padding-top: 11.7%;
        top: 89.8%;
        left: 12.7%;
        cursor: pointer;
    }

    .precautions-line {
        position: absolute;
        width: 27.8%;
        padding-top: 5.2%;
        top: 37.8%;
        left: 31.5%;
        cursor: pointer;
    }

    .form .link.buy {
        width: 80%;
        padding-top: 60%;
        top: 56.5%;
        left: 10%;
    }

    .form .link.experience {
        width: 80%;
        padding-top: 60%;
        top: 78.6%;
        left: 10%;
    }

    .form .link.fb {
        width: 11%;
        padding-top: 11%;
        top: 94.7%;
        left: 23.5%;
    }

    .form .link.ig {
        width: 11%;
        padding-top: 11%;
        top: 94.7%;
        left: 37%;
    }

    .form .link.youtube {
        width: 11%;
        padding-top: 11%;
        top: 94.7%;
        left: 50.95%;
    }

    .form .link.line {
        width: 11%;
        padding-top: 11%;
        top: 94.7%;
        left: 65%;
        z-index: 1000;
    }
}

/* ============================================================================================================================================================================================================================================================================================================== */
/* form end */

[data-aos=translate_up] {
    transform: translateY(-900%);
}

[data-aos=translate_up].aos-animate {
    transform: translateY(0%);
}

[data-aos=fadeIn] {
    opacity: 0;
}

[data-aos=fadeIn].aos-animate {
    opacity: 1;
}

[data-aos=rotate] {
    opacity: 0;
    transform: rotate(-120deg);
}

[data-aos=rotate].aos-animate {
    opacity: 1;
    transform: rotate(0deg);
}

[data-aos=fadeIn-up] {
    opacity: 0;
    transform: translateY(200px);
}

[data-aos=fadeIn-up].aos-animate {
    opacity: 1;
    transform: translateY(0);
}

[data-aos=green-title] {
    top: -3.6%;
    left: 105%;
}

[data-aos=green-title].aos-animate {
    top: 9.3%;
    left: 35%;
}

[data-aos=point] {
    transform: translateY(0);
}

.green-right-line {
    opacity: 0;
}

.green-left-line {
    opacity: 0;
}

.green-arrow {
    opacity: 0;
    transform: translateY(40px);
}

.green-right-line.active {
    animation: opacity-ani-right 2.5s linear infinite;
}

.green-left-line.active {
    animation: opacity-ani-left 2.5s linear infinite;
}

.green-arrow.active {
    animation: opacity-ani-green-arrow 2.5s linear infinite;
}


@keyframes opacity-ani-right {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes opacity-ani-left {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes opacity-ani-green-arrow {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    60% {
        opacity: 1;
        transform: translateY(40px);
    }

    80% {
        opacity: 1;
        transform: translateY(-40px);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

.pain-arrow.active {
    animation: pain-arrow-ani 2s linear infinite;
}

@keyframes pain-arrow-ani {
    0% {
        opacity: 1;
        transform: translateY(-30px);
    }

    50% {
        transform: translateY(20px);
        opacity: 1;
    }

    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}

@media screen and (max-width: 767px) {
    .green-arrow {
        opacity: 0;
        transform: translateY(0px);
    }

    [data-aos=green-title].aos-animate {
        top: 13.4%;
        left: 5.2%;
    }

    @keyframes opacity-ani-green-arrow {
        0% {
            opacity: 0;
        }

        20% {
            opacity: 0;
        }

        40% {
            opacity: 0;
        }

        60% {
            opacity: 1;
            transform: translateY(0px);
        }

        80% {
            opacity: 1;
            transform: translateY(-30px);
        }

        100% {
            opacity: 0;
            transform: translateY(-30px);
        }
    }

    @keyframes pain-arrow-ani {
        0% {
            opacity: 1;
            transform: translateY(-10px);
        }

        50% {
            transform: translateY(10px);
            opacity: 1;
        }

        100% {
            transform: translateY(10px);
            opacity: 0;
        }
    }
}

.thank-container {
    position: fixed;
    max-width: 1920px;
    width: 100%;
    height: 100%;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    overflow-y: auto;
    display: none;
}

.thank {
    position: absolute;
    top: 40px;
    left: 50%;
    background-image: url(../images/thank-page.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 40%;
    padding-top: 190.89%;
    transform: translate(-50%, 0);
}

.thank-close {
    position: absolute;
    top: 0.6%;
    left: 89%;
    padding-top: 7%;
    width: 7.4%;
    cursor: pointer;
}

.thank-name {
    position: absolute;
    top: 38.5%;
    left: 17%;
    padding-top: 0%;
    width: 75%;
    font-weight: bold;
    font-size: 2.2vw;
    font-family: Microsoft JhengHei;
}

.thank-counter {
    position: absolute;
    top: 40.1%;
    left: 17%;
    padding-top: 0%;
    width: 75%;
    font-weight: bold;
    font-size: 2.2vw;
    font-family: Microsoft JhengHei;
}

.thank .link {
    position: absolute;
}

.thank-buy {
    top: 57.1%;
    left: 10%;
    width: 82%;
    padding-top: 68%;
}

.thank-experience {
    top: 79.1%;
    left: 10%;
    width: 82%;
    padding-top: 68%;
}

.thank-fb {
    top: 94.8%;
    left: 24%;
    width: 11%;
    padding-top: 11%;
}

.thank-ig {
    top: 94.8%;
    left: 37.5%;
    width: 11%;
    padding-top: 11%;
}

.thank-youtube {
    top: 94.8%;
    left: 51.5%;
    width: 11%;
    padding-top: 11%;
}

.thank-line {
    top: 94.8%;
    left: 65.7%;
    width: 11%;
    padding-top: 11%;
}

@media screen and (max-width: 767px) {
    .thank {
        width: 95%;
        padding-top: 451.89%;
    }

    .thank-name {
        font-size: 5vw;
    }

    .thank-counter {
        font-size: 5vw;
    }
}

.mfp-auto-cursor .mfp-content {
    text-align: center;
}

.video-player-container {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    display: none;
}

.video-player-container .video-player {
    position: absolute;
    width: 800px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#youtube-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-player-close {
    position: absolute;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace;
    height: 44px;
    line-height: 44px;
    width: 44px;
    color: #FFF;
    text-align: center;
    right: 0;
    top: -44px;
    cursor: pointer;
}

.video-player-close:hover {
    color: #ccc;
}

@media screen and (max-width:900px) {
    .video-player-container .video-player {
        width: 640px;
        height: 360px;
    }
}

@media screen and (max-width:767px) {
    .video-player-container .video-player {
        width: 100%;
        height: 56.25vw;
    }
}