body {
    padding: 0;
    margin: 0;
}

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

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

a {
    text-decoration: none;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.nav_bar {
    width: 100%;
    max-width: 1000px;
    height: 100vh;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    /* background: #000; */
    pointer-events: none;
    z-index: 999;
}

.nav_bar .nav_icon_box {
    position: absolute;
    top: 3%;
    right: 5%;
    width: 50px;
    height: 50px;
    /* background: #b9292a; */
    /* padding: 3%; */
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
    z-index: 99;
    pointer-events: fill;
}

.nav_bar .nav_icon_box .nav_icon {
    position: absolute;
    width: 60%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.nav_bar .nav_icon span:nth-child(1) {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 15%;
    color: #fff;
    background: #fff;
    border-radius: 20px;
    transform-origin: left center;
    transition: all 0.2s;
}

.nav_bar .nav_icon span:nth-child(2) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0%;
    width: 100%;
    height: 15%;
    color: #fff;
    background: #fff;
    border-radius: 20px;
    transition: all 0.2s;
}

.nav_bar .nav_icon span:nth-child(3) {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 15%;
    color: #fff;
    background: #fff;
    border-radius: 20px;
    transform-origin: left center;
    transition: all 0.2s;
}

.nav_icon.open span:nth-child(1) {
    left: 15%;
    transform: rotate(45deg);
}

.nav_icon.open span:nth-child(2) {
    opacity: 0;
}

.nav_icon.open span:nth-child(3) {
    left: 15%;
    transform: rotate(-45deg);
}

.nav_list {
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    color: #fff;
    background: #c31d1b;
    text-align: center;
    max-height: 0;
    transition: max-height 0.5s;
    overflow: hidden;
    z-index: 9;
    font-size: 30px;
    pointer-events: fill;
}

.nav_item {
    border-bottom: 1px dashed #fff;
    padding: 10px 0;
}

.nav_item:last-child {
    border-bottom: none;
}

.nav_link {
    color: #fff;
}

.nav_link:hover {
    transition: all .3s;
    color: #f9ca60;
}

@media (max-width:1000px) {
    .nav_item {
        font-size: 3.5vw;
    }
}

@media (max-width:576px) {
    .logo {
        width: 35%;
    }

    .nav_item {
        font-size: 20px;
    }

    .nav_bar .nav_icon_box {
        top: 1%;
        scale: 0.8;
    }
}


.sticky {
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 999;
    max-width: 1920px;
    width: 100%;
}

.timebox {
    background: #fbda7d;
    width: 100%;
}

.timer {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    height: 70px;
    line-height: 70px;
    letter-spacing: 8px;
    font-family: Arial;
}

@media screen and (max-width: 576px) {
    .timer {
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        letter-spacing: 4px;
    }
}

.wrapper {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.content {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.bg {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.s1-1 {
    width: 100%;
    position: absolute;
    top: 11.3%;
    left: 0%;
    opacity: 0;
}

.s1-2 {
    width: 51.4%;
    position: absolute;
    top: 12%;
    right: 8.5%;
    mix-blend-mode: screen;
    z-index: 2;
}

.s1-3 {
    width: 27.7%;
    position: absolute;
    top: 54%;
    left: 64.2%;
}

.s1-4 {
    width: 33.4%;
    position: absolute;
    top: 52%;
    right: 0.3%;
    mix-blend-mode: screen;
}

.s1-5 {
    width: 27.2%;
    position: absolute;
    top: 82%;
    right: 3%;
}

.s1-6 {
    width: 28%;
    position: absolute;
    top: 69%;
    left: 44.4%;
}

.s1-7 {
    width: 43.4%;
    position: absolute;
    top: 72%;
    right: 12.4%;
    mix-blend-mode: screen;
}

.s1-8 {
    width: 16.8%;
    position: absolute;
    top: 82.7%;
    left: 41.6%;
}

.s1-9 {
    width: 13.7%;
    position: absolute;
    top: 83%;
    left: 42%;
    mix-blend-mode: color-dodge;
}

.s1-10 {
    width: 100%;
    position: absolute;
    top: 89.3%;
    left: 0%;
    z-index: 2;
}

.s2-1 {
    width: 82.9%;
    position: absolute;
    top: 9.5%;
    left: 17.4%;
}

.s2-2 {
    width: 33.6%;
    position: absolute;
    top: 63.6%;
    left: 31%;
}

.s2-3 {
    width: 38.5%;
    position: absolute;
    top: 58%;
    left: 1.4%;
}

.s2-4 {
    width: 43%;
    position: absolute;
    top: 55.7%;
    left: 56.5%;
}

.s2-5 {
    width: 64.2%;
    position: absolute;
    top: 81.4%;
    left: 27%;
}

.s3-1 {
    width: 56%;
    position: absolute;
    top: 34.5%;
    right: 0%;
}

.s3-2 {
    width: 56.9%;
    position: absolute;
    top: 72.8%;
    left: 8%;

}

.s3-3 {
    width: 63.2%;
    position: absolute;
    top: 43.5%;
    left: 0%;
    z-index: 3;
}

.s3-4 {
    width: 57.3%;
    position: absolute;
    top: 31%;
    left: 21%;
    z-index: 4;
    mix-blend-mode: screen;
}

.s3-5 {
    width: 79.1%;
    position: absolute;
    top: 55.7%;
    right: 0%;
    z-index: 5;
}

.s4-1 {
    width: 93%;
    position: absolute;
    top: 57.4%;
    left: 2%;
}

.s4-2 {
    width: 62.7%;
    position: absolute;
    top: 55.5%;
    left: 2.4%;
    mix-blend-mode: screen;
}

.s5-1 {
    width: 75.8%;
    position: absolute;
    top: 9.4%;
    left: 12.2%;
}

.s5-2 {
    width: 20.8%;
    position: absolute;
    top: 4.4%;
    left: 38.2%;
    mix-blend-mode: screen;
}

.s5-3 {
    width: 91.1%;
    position: absolute;
    top: 65%;
    left: 2%;
    mix-blend-mode: screen;
}

.s6-1 {
    width: 81.6%;
    position: absolute;
    top: 29.2%;
    left: 8.2%;
}

.s6-2 {
    width: 37.9%;
    position: absolute;
    top: 23.9%;
    left: 17.5%;
    mix-blend-mode: screen;
}

.s7-video {
    width: 100%;
    height: 31.5%;
    position: absolute;
    top: 29.5%;
    left: 0%;
}

.s7-1 {
    width: 82.3%;
    position: absolute;
    top: 2.7%;
    left: 9.1%;
}

.s7-2 {
    width: 94.9%;
    position: absolute;
    top: -6.1%;
    right: 0;
    mix-blend-mode: screen;
}

.s7-3 {
    width: 60.6%;
    position: absolute;
    bottom: 23.5%;
    right: 10%;
}

.popUp-gif-box2 {
    width: 91%;
    height: 11.9%;
    position: absolute;
    top: 39.6%;
    left: 4.5%;
    overflow: hidden;
    background: #000000;
}

.popUp-gif-box2 img {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0%;
}

.s8-1 {
    width: 23.5%;
    position: absolute;
    top: 60.7%;
    left: 9.1%;
}

.s8-2 {
    width: 50.9%;
    position: absolute;
    top: 55%;
    left: 0;
    mix-blend-mode: screen;
}

.s8-3 {
    width: 100%;
    position: absolute;
    bottom: 10.6%;
    left: 0;
}

.s8-4 {
    width: 100%;
    position: absolute;
    bottom: 10.4%;
    left: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

.s9-1 {
    width: 33.3%;
    position: absolute;
    top: 40.5%;
    left: 3.1%;
}

.s9-2 {
    width: 33.4%;
    position: absolute;
    top: 48.5%;
    left: 31.1%;
}

.s9-3 {
    width: 33.3%;
    position: absolute;
    top: 39.7%;
    right: 4.1%;
}

.s9-4 {
    width: 32.5%;
    position: absolute;
    top: 60.7%;
    left: 3.1%;
}

.s9-5 {
    width: 37.1%;
    position: absolute;
    top: 65.7%;
    left: 31.1%;
}

.s9-6 {
    width: 36.7%;
    position: absolute;
    top: 59.7%;
    right: 3%;
}

.s10-videobox {
    width: 68%;
    height: 32.5%;
    position: absolute;
    top: 39%;
    right: 7.5%;
    overflow: hidden;
}

.s10-videobox img {
    width: 100%;
    position: absolute;
    top: -52%;
    left: 0%;
}

.s10-1 {
    width: 55.7%;
    position: absolute;
    top: 37.5%;
    left: 40.1%;
    z-index: 2;
}

.s11-1 {
    width: 91.1%;
    position: absolute;
    top: 18.3%;
    left: 4.1%;
}

.s11-2 {
    width: 84.6%;
    position: absolute;
    top: 53.7%;
    left: 12.5%;
}

.s11-3 {
    width: 53.4%;
    position: absolute;
    top: 48.7%;
    right: 0%;
    mix-blend-mode: screen;
}

.s11-4 {
    width: 34.4%;
    position: absolute;
    top: 67%;
    right: 2.1%;
}

.s11-5 {
    width: 95.7%;
    position: absolute;
    top: 8.3%;
    left: 4%;
}

.s11-6 {
    width: 95.7%;
    position: absolute;
    top: 8.3%;
    left: 4%;
    mix-blend-mode: screen;
}

.s11-7 {
    width: 94.1%;
    position: absolute;
    top: 13%;
    left: 0%;
    mix-blend-mode: screen;
}

.s12-1 {
    width: 93.5%;
    position: absolute;
    top: 4.5%;
    left: 4.1%;
}

.popbtn01 {
    width: 40%;
    height: 14.7%;
    position: absolute;
    top: 31.6%;
    right: 5%;
    cursor: pointer;
    z-index: 1;
}

.popbtn02 {
    width: 40%;
    height: 17.8%;
    position: absolute;
    top: 46.3%;
    right: 5%;
    cursor: pointer;
    z-index: 1;
}

.s12-videobox {
    width: 59%;
    height: 14%;
    position: absolute;
    top: 79.7%;
    right: 12.5%;
    overflow: hidden;
}

.s12-videobox img {
    width: 100%;
    position: absolute;
    top: -46%;
    left: 0%;
}

.s13-1 {
    width: 93.7%;
    position: absolute;
    top: 5.5%;
    left: 4.5%;
}

.s13-2 {
    width: 42.7%;
    position: absolute;
    top: 23.2%;
    left: 7.5%;
}

.s13-3 {
    width: 73.5%;
    position: absolute;
    top: 33.3%;
    left: 13.5%;
}

.s13-4 {
    width: 25.8%;
    position: absolute;
    top: 32.8%;
    left: 2.6%;
}

.s13-5 {
    width: 34.4%;
    position: absolute;
    top: 27.5%;
    right: 6%;
}

.s13-6 {
    width: 39.2%;
    position: absolute;
    top: 48.6%;
    left: 0%;
}

.s13-7 {
    width: 45.5%;
    position: absolute;
    top: 76.9%;
    left: 41%;
}

.s14-1 {
    width: 97.5%;
    position: absolute;
    top: 11.9%;
    left: 2%;
}

.s14-2 {
    width: 80.8%;
    position: absolute;
    top: 29.5%;
    left: 9.7%;
}

.s15-1 {
    width: 34.5%;
    position: absolute;
    top: 36.2%;
    left: 7.5%;
}

.s15-2 {
    width: 47.8%;
    position: absolute;
    top: 72.2%;
    right: 0;
}

.s15-3 {
    width: 55.5%;
    position: absolute;
    top: 73.4%;
    left: 12%;
}

.offer1-btn {
    width: 92.2%;
    position: absolute;
    bottom: 25.5%;
    left: 1%;
}

.offer2-btn {
    width: 92.2%;
    position: absolute;
    bottom: 26.5%;
    left: 1%;
}


.offer3-btn {
    width: 100%;
    position: absolute;
    bottom: 15.5%;
    left: 0%;
    -webkit-mask: url('../images/offer/offer-btn3.gif') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/offer/offer-btn3.gif') no-repeat center center;
    mask-size: contain;
}

.offer4-btn {
    width: 100%;
    position: absolute;
    bottom: 14%;
    left: 0;
    -webkit-mask: url('../images/offer/offer-btn4.gif') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/offer/offer-btn4.gif') no-repeat center center;
    mask-size: contain;
}

.offer5-btn {
    width: 100%;
    position: absolute;
    bottom: 21.7%;
    left: 0;
    -webkit-mask: url('../images/offer/offer-btn5.gif') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/offer/offer-btn5.gif') no-repeat center center;
    mask-size: contain;
}

.phone {
    width: 76.1%;
    position: absolute;
    bottom: 25.5%;
    left: 12%;
}


.popBG {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0%;
    top: 0%;
    z-index: 1000;
    background-color: rgb(0, 0, 0, 0.7);
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
}

.popControl--active {
    opacity: 1;
    visibility: visible;
}

.popContainer {
    max-width: 1000px;
    height: 100vh;
    width: 100%;
    /* margin: -3rem auto 0 auto; */
    margin: 0 auto;
}

.xmarkControl {
    position: absolute;
    right: 2%;
    top: 4%;
    cursor: pointer;
    width: 6.5%;
}

.js-xmark {
    display: block;
    text-align: center;
    font-size: 3rem;
    color: #fff;
    transition: all .3s;
    background-color: #000;
    border-radius: 5px;
}

.js-xmark:hover {
    background-color: #fff;
    color: #000;
    rotate: 180deg;
}

.titleControl {
    position: absolute;
    padding: 2%;
    border-radius: 10px;
    background-color: #fff;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 2rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: justify;
}

@media (max-width:768px) {
    .popContainer {
        width: 90%;
    }

    .js-xmark {
        font-size: 2rem;
        padding: 0 1%;
    }

    .xmarkControl {
        top: 3%;
        width: 9.5%;
    }

    .titleControl {
        font-size: 1.25rem;
        width: 95%;
        padding: 3%;
    }
}


/* 切換offer */
.offerA-before01-1 {
    width: 39.9%;
    left: 0%;
    top: 64%;
}

.offerA-before01-2 {
    width: 100%;
    left: 0%;
    bottom: 13%;
}

.offerA-before01-3 {
    width: 100%;
    left: 0%;
    bottom: 12.7%;
    mix-blend-mode: screen;
    pointer-events: none;
}

.offerB-before01-1 {
    width: 39.9%;
    left: 0%;
    top: 60%;
}

.offerB-before01-2 {
    width: 100%;
    left: 0%;
    bottom: 15.5%;
}

.offerB-before01-3 {
    width: 100%;
    left: 0%;
    bottom: 15.3%;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* after */
.after {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.offerA-after01-1 {
    width: 39.9%;
    left: 0%;
    top: 64%;
}

.offerA-after01-2 {
    width: 88%;
    left: 5%;
    bottom: 15%;
}

.offerA-after01-3 {
    width: 13.7%;
    left: 35%;
    top: 13%;
}

.offerB-after01-1 {
    width: 39.9%;
    left: 0%;
    top: 60%;
}

.offerB-after01-2 {
    width: 88%;
    left: 5%;
    bottom: 17%;
}

.offerB-after01-3 {
    width: 13.7%;
    left: 35%;
    top: 5.5%;
}

.clickChangeBtns {
    position: absolute;
    width: 50%;
    height: 5%;
    top: 11%;
    cursor: pointer;
    z-index: 1;
}

.clickChangeBtns2 {
    position: absolute;
    width: 50%;
    height: 7.5%;
    top: 3%;
    cursor: pointer;
    z-index: 1;
}

.changeBefore,
.changeBefore2 {
    left: 0%;
}

.changeAfter,
.changeAfter2 {
    right: 0%;
}

/* .changeControl,
.changeControl2 {
    transition: all .5s;
    opacity: 0;
}

.changeControl-active,
.changeControl2-active {
    opacity: 1;
} */

.before {
    opacity: 0;
    visibility: hidden;
}

.before.changeControl-active {
    opacity: 1;
    visibility: visible;
}

.before.changeControl2-active {
    opacity: 1;
    visibility: visible;
}

.after {
    opacity: 0;
    visibility: hidden;
}

.after.changeControl-active {
    opacity: 1;
    visibility: visible;
}

.after.changeControl2-active {
    opacity: 1;
    visibility: visible;
}