@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,900;1,400;1,500;1,700&display=swap";
@keyframes trowEffect {
    100% {
        transform: translateX(48px);
        -webkit-transform: translateX(48px);
    }
}@keyframes ballEffect1 {
     100% {
         transform: rotate(360deg);
         -webkit-transform: rotate(360deg);
     }
 }@keyframes moveLeftToRight1 {
      100% {
          transform: translate(200px,  -100px) scale(0.7);
          -webkit-transform: translate(200px,  -100px) scale(0.7);
      }
  }@keyframes moveLeftToRight2 {
       100% {
           transform: translate(200px,  -100px) scale(0.7);
           -webkit-transform: translate(318px,  -100px) scale(0.7);
       }
   }@keyframes moveLeftToRight3 {
        100% {
            transform: translate(200px,  -100px) scale(0.7);
            -webkit-transform: translate(-155px,  -100px) scale(0.7);
        }
    }@keyframes moveLeftToRight4 {
         100% {
             transform: translate(200px,  -100px) scale(0.7);
             -webkit-transform: translate(-292px,  -100px) scale(0.7);
         }
     }@keyframes moveLeftToRight5 {
          100% {
              transform: translate(200px,  -100px) scale(0.7);
              -webkit-transform: translate(486px,  -100px) scale(0.7);
          }
      }.webp .spr_art {
           background-image: url("../../.././content/template/S89/images/landing3/spr_art1.webp");
       }
.no-webp .spr_art {
    background-image: url("../../.././content/template/S89/images/landing3/spr_art1.png");
}
.webp .spr_star {
    background-image: url("../../.././content/template/S89/images/landing3/spr_star.webp");
}
.no-webp .spr_star {
    background-image: url("../../.././content/template/S89/images/landing3/spr_star.png");
}
.webp .spr {
    background-image: url("../../.././content/template/S89/images/landing3/spr.webp");
}
.no-webp .spr {
    background-image: url("../../.././content/template/S89/images/landing3/spr.png");
}
.webp .spr2 {
    background-image: url("../../.././content/template/S89/images/landing3/spr2.webp");
}
.no-webp .spr2 {
    background-image: url("../../.././content/template/S89/images/landing3/spr2.png");
}
.webp .btn-ms {
    background-image: url("../../.././content/template/S89/images/landing3/btn_ms.webp");
}
.no-webp .btn-ms {
    background-image: url("../../.././content/template/S89/images/landing3/btn_ms.png");
}
.webp .swiper-pagination-bullet {
    background-image: url("../../.././content/template/S89/images/landing3/spr.webp");
}
.no-webp .swiper-pagination-bullet {
    background-image: url("../../.././content/template/S89/images/landing3/spr.png");
}
.webp .pop-title span::before {
    background-image: url("../../.././content/template/S89/images/landing3/spr.webp");
}
.no-webp .pop-title span::before {
    background-image: url("../../.././content/template/S89/images/landing3/spr.png");
}
.webp .pop-title span::after {
    background-image: url("../../.././content/template/S89/images/landing3/spr.webp");
}
.no-webp .pop-title span::after {
    background-image: url("../../.././content/template/S89/images/landing3/spr.png");
}
.webp .logo {
    background-image: url("../../.././content/template/S89/images/landing3/logo.webp");
}
.no-webp .logo {
    background-image: url("../../.././content/template/S89/images/landing3/logo.png");
}
.webp .slg {
    background-image: url("../../.././content/template/S89/images/landing3/slg.webp");
}
.no-webp .slg {
    background-image: url("../../.././content/template/S89/images/landing3/slg.png");
}
.webp .page1_num {
    background-image: url("../../.././content/template/S89/images/landing3/page1_num.webp");
}
.no-webp .page1_num {
    background-image: url("../../.././content/template/S89/images/landing3/page1_num.png");
}
.webp .loading_bg::before {
    background-image: url("../../.././content/template/S89/images/landing3/loading.webp");
}
.no-webp .loading_bg::before {
    background-image: url("../../.././content/template/S89/images/landing3/loading.png");
}
.webp .loading_bg--active {
    background-image: url("../../.././content/template/S89/images/landing3/loading.webp");
}
.no-webp .loading_bg--active {
    background-image: url("../../.././content/template/S89/images/landing3/loading.png");
}
.webp .turn_num {
    background-image: url("../../.././content/template/S89/images/landing3/num.webp");
}
.no-webp .turn_num {
    background-image: url("../../.././content/template/S89/images/landing3/num.png");
}
.webp .page2_title {
    background-image: url("../../.././content/template/S89/images/landing3/page2_title.webp");
}
.no-webp .page2_title {
    background-image: url("../../.././content/template/S89/images/landing3/page2_title.png");
}
.webp .page2_sub {
    background-image: url("../../.././content/template/S89/images/landing3/page2_sub2.webp");
}
.no-webp .page2_sub {
    background-image: url("../../.././content/template/S89/images/landing3/page2_sub2.png");
}
.webp .page2_art1 {
    background-image: url("../../.././content/template/S89/images/landing3/page2_art1.webp");
}
.no-webp .page2_art1 {
    background-image: url("../../.././content/template/S89/images/landing3/page2_art1.png");
}
.webp .page2_art2 {
    background-image: url("../../.././content/template/S89/images/landing3/page2_art2.webp");
}
.no-webp .page2_art2 {
    background-image: url("../../.././content/template/S89/images/landing3/page2_art2.png");
}
.webp .group_content {
    background-image: url("../../.././content/template/S89/images/landing3/page2_circle.webp");
}
.no-webp .group_content {
    background-image: url("../../.././content/template/S89/images/landing3/page2_circle.png");
}
.webp .page3_title {
    background-image: url("../../.././content/template/S89/images/landing3/page3_title.webp");
}
.no-webp .page3_title {
    background-image: url("../../.././content/template/S89/images/landing3/page3_title.png");
}
.webp .page5_khung {
    background-image: url("../../.././content/template/S89/images/landing3/page5_khung.webp");
}
.no-webp .page5_khung {
    background-image: url("../../.././content/template/S89/images/landing3/page5_khung.png");
}
.webp .page4_title {
    background-image: url("../../.././content/template/S89/images/landing3/page4_title.webp");
}
.no-webp .page4_title {
    background-image: url("../../.././content/template/S89/images/landing3/page4_title.png");
}
.webp .page5_art1 {
    background-image: url("../../.././content/template/S89/images/landing3/page5_art1.webp");
}
.no-webp .page5_art1 {
    background-image: url("../../.././content/template/S89/images/landing3/page5_art1.png");
}
.webp .page5_art2 {
    background-image: url("../../.././content/template/S89/images/landing3/page5_art2.webp");
}
.no-webp .page5_art2 {
    background-image: url("../../.././content/template/S89/images/landing3/page5_art2.png");
}
.webp .page5_title {
    background-image: url("../../.././content/template/S89/images/landing3/page5_title2.webp");
}
.no-webp .page5_title {
    background-image: url("../../.././content/template/S89/images/landing3/page5_title2.png");
}
.webp .changeCode_item {
    background-image: url("../../.././content/template/S89/images/landing3/page5_khung_trang.webp");
}
.no-webp .changeCode_item {
    background-image: url("../../.././content/template/S89/images/landing3/page5_khung_trang.png");
}
.webp .list_gift::after {
    background-image: url("../../.././content/template/S89/images/landing3/long1.webp");
}
.no-webp .list_gift::after {
    background-image: url("../../.././content/template/S89/images/landing3/long1.png");
}
.webp .lightShow {
    background-image: url("../../.././content/template/S89/images/landing3/light.webp");
}
.no-webp .lightShow {
    background-image: url("../../.././content/template/F89vn/images/landing6/light.png");
}
.webp .page1 {
    background-image: url(../../.././content/template/S89/images/landing3/bg1_2.webp);
}
@media only screen and (max-width: 1024px) {
    .webp .page1 {
        background-image: url(../../.././content/template/S89/images/landing3/bg1_mb_2.webp);
    }
}.no-webp .page1 {
     background-image: url(../../.././content/template/S89/images/landing3/bg1_2.jpg);
 }
@media only screen and (max-width: 1024px) {
    .no-webp .page1 {
        background-image: url(../../.././content/template/S89/images/landing3/bg1_mb_2.jpg);
    }
}.webp .page2 {
     background-image: url("../../.././content/template/S89/images/landing3/bg2_1.webp");
 }
@media only screen and (max-width: 1024px) {
    .webp .page2 {
        background-image: url("../../.././content/template/S89/images/landing3/bg2_mb_1.webp");
    }
}.no-webp .page2 {
     background-image: url("../../.././content/template/S89/images/landing3/bg2_1.jpg");
 }
@media only screen and (max-width: 1024px) {
    .no-webp .page2 {
        background-image: url("../../.././content/template/S89/images/landing3/bg2_mb_1.jpg");
    }
}.webp .page3 {
     background-image: url("../../.././content/template/S89/images/landing3/bg3_1.webp");
 }
@media only screen and (max-width: 1024px) {
    .webp .page3 {
        background-image: url("../../.././content/template/S89/images/landing3/bg3_mb_1.webp");
    }
}.no-webp .page3 {
     background-image: url("../../.././content/template/S89/images/landing3/bg3_1.jpg");
 }
@media only screen and (max-width: 1024px) {
    .no-webp .page3 {
        background-image: url("../../.././content/template/S89/images/landing3/bg3_mb_1.jpg");
    }
}.webp .page4 {
     background-image: url("../../.././content/template/S89/images/landing3/bg4_1.webp");
 }
@media only screen and (max-width: 1024px) {
    .webp .page4 {
        background-image: url("../../.././content/template/S89/images/landing3/bg4_mb_1.webp");
    }
}.no-webp .page4 {
     background-image: url("../../.././content/template/S89/images/landing3/bg4_1.jpg");
 }
@media only screen and (max-width: 1024px) {
    .no-webp .page4 {
        background-image: url("../../.././content/template/S89/images/landing3/bg4_mb_1.jpg");
    }
}.webp .page5 {
     background-image: url("../../.././content/template/S89/images/landing3/bg5_1.webp");
 }
@media only screen and (max-width: 1024px) {
    .webp .page5 {
        background-image: url("../../.././content/template/S89/images/landing3/bg5_mb_1.webp");
    }
}.no-webp .page5 {
     background-image: url("../../.././content/template/S89/images/landing3/bg5_1.jpg");
 }
@media only screen and (max-width: 1024px) {
    .no-webp .page5 {
        background-image: url("../../.././content/template/S89/images/landing3/bg5_mb_1.jpg");
    }
}.webp .art_img-2-1 {
     background-image: url("../../.././content/template/S89/images/landing3/img2_1.webp");
 }
.no-webp .art_img-2-1 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_1.png");
}
.webp .art_img-2-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_2.webp");
}
.no-webp .art_img-2-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_2.png");
}
.webp .art_img-2-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_3.webp");
}
.no-webp .art_img-2-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_3.png");
}
.webp .art_img-2-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_4.webp");
}
.no-webp .art_img-2-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_4.png");
}
.webp .art_img-2-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_5.webp");
}
.no-webp .art_img-2-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_5.png");
}
.webp .art_img-2-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_6.webp");
}
.no-webp .art_img-2-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img2_6.png");
}
.webp .art_img-3-1 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_1.webp");
}
.no-webp .art_img-3-1 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_1.png");
}
.webp .art_img-3-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_2.webp");
}
.no-webp .art_img-3-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_2.png");
}
.webp .art_img-3-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_3.webp");
}
.no-webp .art_img-3-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_3.png");
}
.webp .art_img-3-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_4.webp");
}
.no-webp .art_img-3-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_4.png");
}
.webp .art_img-3-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_5.webp");
}
.no-webp .art_img-3-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_5.png");
}
.webp .art_img-3-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_6.webp");
}
.no-webp .art_img-3-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img3_6.png");
}
.webp .art_img-1-1 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_11.webp");
}
.no-webp .art_img-1-1 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_11.png");
}
.webp .art_img-1-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_21.webp");
}
.no-webp .art_img-1-2 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_21.png");
}
.webp .art_img-1-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_31.webp");
}
.no-webp .art_img-1-3 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_31.png");
}
.webp .art_img-1-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_41.webp");
}
.no-webp .art_img-1-4 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_41.png");
}
.webp .art_img-1-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_51.webp");
}
.no-webp .art_img-1-5 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_51.png");
}
.webp .art_img-1-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_61.webp");
}
.no-webp .art_img-1-6 {
    background-image: url("../../.././content/template/S89/images/landing3/img1_61.png");
}
.webp .fixbox {
    background-image: url("../../.././content/template/S89/images/home/fixbox.webp");
}
.no-webp .fixbox {
    background-image: url("../../.././content/template/S89/images/landing3/fixbox.png");
}
.webp .pop-bg {
    background-image: url("../../.././content/template/S89/images/home/pop.webp");
}
.no-webp .pop-bg {
    background-image: url("../../.././content/template/S89/images/landing3/pop.png");
}
.apk {
    background-image: url("../../.././content/template/S89/images/home/apk.svg");
}
.android {
    background-image: url("../../.././content/template/S89/images/home/android.svg");
}
.ios {
    background-image: url("../../.././content/template/S89/images/home/ios1.svg");
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, a:hover {
    text-decoration: none !important;
}
body ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(194, 26, 81, .6);
    border-radius: 10px;
}
body ::-webkit-scrollbar {
    width: 3px;
    border-radius: 3px;
    background: rgba(156, 156, 150, .1607843137);
}
body ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #a81c4a;
    border-radius: 6px;
}
.rs {
    margin: 0;
    padding: 0;
}
* {
    outline: none !important;
}
strong {
    font-weight: bold;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}
body {
    font-family: "Roboto", sans-serif;
}
body.open {
    overflow: hidden;
    position: relative;
}
body.open::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6196078431);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 14;
}
footer {
    width: 100%;
    padding: 40px 15px 30px;
    text-align: center;
    color: #fff;
    background: #000;
    position: relative;
    z-index: 10;
}
.footerInner {
    color: #fff;
    font-size: 13px;
    text-align: center;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
.footerInner a.bs {
    color: #fff;
    display: inline-block;
    margin: 0 10px;
}
.footerInner a:hover {
    color: #ff9500;
}
.footerInner p {
    margin-bottom: 6px;
}
.textright {
    font-size: 13px;
    margin-bottom: 10px !important;
}
.logo2 {
    display: block;
    text-indent: -999em;
    background: url("../../.././content/template/S89/images/landing3/logo2.png") 0 0 no-repeat;
    width: 149px;
    height: 41px;
    left: 0;
    top: -10px;
}
.ghdt {
    position: absolute;
    right: 0;
    top: -10px;
}
.ghdt1 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
@media screen and (max-width: 640px) {
    .logo2, .footer .ghdt {
        position: static;
        margin: auto;
    }
}.positionLeft50, .main .page.page5 .page4_slide, .main .page.page5 .page4_title, .main .page.page4 .group-icon, .main .page.page4 .art_img, .main .page.page4 .group-type, .main .page.page4 .page3_title, .main .page.page3 .group_changeCode, .main .page.page3 .page5_btn-play, .main .page.page3 .page5_khung .list_gift, .main .page.page3 .page5_khung, .main .page.page3 .page5_art, .main .page.page3 .page5_title, .main .page.page2 .group_content .wrap, .main .page.page2 .group_content, .main .page.page2 .page2_code, .main .page.page2 .page2_art, .main .page.page2 .page2_sub, .main .page.page2 .page2_title, .main .page.page1 .loading, .main .page.page1 .page1_btn-login, .main .page.page1 .page1_num, .main .page.page1 .box_download, .main .page.page1 .slg {
     position: absolute;
     left: 50%}
.bgContain, .main .page.page5 .page4_slide, .main .page.page5 .page4_title, .main .page.page4 .art_img, .main .page.page4 .page3_title, .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift .txt_gift, .main .page.page3 .group_changeCode .changeCode_item, .main .page.page3 .page5_khung .list_gift::after, .main .page.page3 .page5_khung, .main .page.page3 .page5_art, .main .page.page3 .page5_title, .main .page.page2 .group_content, .main .page.page2 .page2_art, .main .page.page2 .page2_sub, .main .page.page2 .page2_title, .main .page.page1 .loading .loading_item .img_hover, .main .page.page1 .slg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.bg100 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.bgContain, .main .page.page5 .page4_slide, .main .page.page5 .page4_title, .main .page.page4 .art_img, .main .page.page4 .page3_title, .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift .txt_gift, .main .page.page3 .group_changeCode .changeCode_item, .main .page.page3 .page5_khung .list_gift::after, .main .page.page3 .page5_khung, .main .page.page3 .page5_art, .main .page.page3 .page5_title, .main .page.page2 .group_content, .main .page.page2 .page2_art, .main .page.page2 .page2_sub, .main .page.page2 .page2_title, .main .page.page1 .loading .loading_item .img_hover, .main .page.page1 .slg {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.cnt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,  -50%);
}
.display_flex {
    display: flex;
    -webkit-display: flex;
    -moz-display: flex;
}
.table-responsive {
    border: 0;
}
.table-bordered {
    border: 1px solid #f8e6cc !important;
}
.table th, .table td {
    font-size: 16px;
    padding: 6px 0 !important;
}
@media only screen and (max-width: 640px) {
    .table th, .table td {
        font-size: 13px;
        padding: 3px 0 !important;
    }
}.table>thead>tr>th {
     border-bottom: 0;
 }
.table th {
    font-weight: bold;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: 1px solid #f8e6cc;
}
.pagging {
    position: fixed;
    z-index: 98;
    left: 12px;
    top: 50%;
    margin-top: -234px;
}
@media only screen and (max-width: 1024px) {
    .pagging {
        display: none;
    }
}@media only screen and (max-width: 640px) {
    .pagging {
        margin-top: 0;
        top: auto;
        left: 5px;
        bottom: 30px;
    }
}.pagging:before {
     content: "";
     width: 1px;
     height: 100%;
     position: absolute;
     top: 0;
     left: 50%;
     margin-left: -0.5px;
     z-index: 0;
     border: 1px dashed #db3d07;
 }
.pagging li {
    position: relative;
    z-index: 2;
}
.pagging li a {
    display: block;
    width: 46px;
    height: 46px;
    background: #ffe28b;
    background: linear-gradient(180deg,  #ffe28b 0%,  #ffbb54 71%);
    border-radius: 50%;
    text-align: center;
    line-height: 46px;
    color: #db3d07;
    font-size: 24px;
    margin-bottom: 15px;
    border: 2px solid #000;
    box-shadow: 0px 1px 3px #615e5e;
    font-weight: bold;
}
@media only screen and (max-width: 640px) {
    .pagging li a {
        display: none;
        width: 36px;
        height: 36px;
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 8px;
    }
}.pagging li.active a {
     background: #db3d07;
     color: #fff;
 }
.pagging li:last-of-type a {
    margin-bottom: 0;
}
.lg18 {
    position: absolute;
    top: 0 !important;
    left: 0;
    z-index: 1;
}
@media only screen and (max-width: 1024px) {
    .lg18 {
        max-width: 120px;
    }
}@media only screen and (max-width: 640px) {
    .lg18 {
        max-width: 90px;
        top: 80px !important;
    }
}.btn_hover {
     transition: .5s;
 }
.btn_hover:hover {
    transform: translateY(-3px);
}
.lightbox {
    background-color: rgba(0, 0, 0, .8);
    overflow: hidden;
    position: fixed;
    display: none;
    z-index: 9999;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}
.lightbox-container {
    position: relative;
    max-width: 960px;
    margin: 7% auto;
    display: block;
    padding: 0 3%;
    height: auto;
    z-index: 10;
}
@media screen and (max-width: 768px) {
    .lightbox-container {
        margin-top: 10%}
}@media screen and (max-width: 414px) {
    .lightbox-container {
        margin-top: 13%}
}.lightbox-content {
     box-shadow: 0 1px 6px rgba(0, 0, 0, .7);
 }
.lightbox-close {
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    font-weight: 300;
    font-size: 12px;
    display: block;
    border: none;
    color: #fff;
    top: -22px;
    right: 3%}
.video-container {
    padding-bottom: 56.25%;
    position: relative;
    padding-top: 30px;
    overflow: hidden;
    height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.main {
    overflow: hidden;
}
.main .page {
    position: relative;
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: top center;
}
@media only screen and (max-width: 1024px) {
    .main .page {
        background-size: 1024px;
    }
}@media only screen and (max-width: 640px) {
    .main .page {
        background-size: 640px;
    }
}.main .page.page1 {
     height: 1080px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 {
        height: 1112px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 {
        height: 699px;
    }
}.main .page.page1 .video__wrap {
     position: absolute;
     width: 1920px;
     height: 100%;
     top: 0;
     left: 50%;
     margin-left: -960px;
     overflow: hidden;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .video__wrap {
        display: none;
    }
}.main .page.page1 .video__wrap video {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
 }
.main .page.page1 .video__wrap video.videoFullscreen {
    opacity: 0;
}
.main .page.page1 .video__wrap video.videoFullscreen.active {
    opacity: 1;
    transition: .3s;
}
.main .page.page1 .menu {
    position: absolute;
    z-index: 10;
    width: 100%;
    text-align: center;
    top: 10px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page1 .menu {
        top: 18px;
        padding-left: 105px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .menu {
        top: 15px;
        padding-left: 0;
    }
}.main .page.page1 .menu .menu_item {
     display: inline-block;
     width: 121px;
     height: 48px;
     margin: 0 10px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .menu .menu_item {
        background-size: 600px;
        width: 90.75px;
        height: 36px;
        margin: 0 3px;
    }
}.main .page.page1 .menu .menu_item-home {
     background-position-y: -81px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .menu .menu_item-home {
        background-position-y: -60.75px;
    }
}.main .page.page1 .menu .menu_item-fp {
     background-position-y: -147px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .menu .menu_item-fp {
        background-position-y: -110.25px;
    }
}.main .page.page1 .menu .menu_item-group {
     background-position-y: -16px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .menu .menu_item-group {
        background-position-y: -12px;
    }
}.main .page.page1 .ht1_title {
     color: rgba(0, 0, 0, 0);
     text-indent: -9999px;
     height: 0;
     width: 0;
 }
.main .page.page1 .ht1_title .logo {
    width: 190px;
    height: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -135px;
    top: 256px;
    z-index: 10;
}
@media only screen and (max-width: 1024px) {
    .main .page.page1 .ht1_title .logo {
        margin-left: -107px;
        top: 331px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .ht1_title .logo {
        width: 116px;
        height: 116px;
        margin-left: -58px;
        top: 225px;
    }
}.main .page.page1 .slg {
     z-index: 1;
     width: 1447px;
     height: 365px;
     margin-left: -724px;
     top: 363px;
     animation: 2s zoomEffect2 infinite;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .slg {
        width: 1000px;
        height: 266px;
        margin-left: -478px;
        top: 442px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .slg {
        width: 557px;
        height: 150px;
        margin-left: -269px;
        top: 298px;
    }
}.main .page.page1 .box_download {
     z-index: 3;
     background-color: #000;
     display: grid;
     grid-template-columns: 1fr 1.5fr 1fr;
     width: 499px;
     height: 143px;
     margin-left: -250px;
     top: 670px;
     align-items: center;
     padding-left: 3px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .box_download {
        top: 667px;
        width: 446px;
        height: 120px;
        margin-left: -223px;
        padding-left: 5px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .box_download {
        top: 429px;
        width: 290px;
        height: 79px;
        margin-left: -145px;
        padding-left: 5px;
    }
}.main .page.page1 .box_download .btn_down {
     background-size: 100% 100%;
     display: inline-block;
     width: 205px;
     height: 62px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .box_download .btn_down {
        width: 178px;
        height: 53px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .box_download .btn_down {
        width: 117px;
        height: 35px;
    }
}.main .page.page1 .box_download .btn_down.dl_apk {
     background-size: 800px;
     width: 152px;
     height: 135px;
     background-position: -141px 0;
     grid-area: 1/1/3/2;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .box_download .btn_down.dl_apk {
        background-size: 700px;
        width: 133px;
        height: 118.125px;
        background-position: -123.375px 0;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .box_download .btn_down.dl_apk {
        background-size: 420px;
        width: 79.8px;
        height: 70.875px;
        background-position: -74.025px 0;
    }
}.main .page.page1 .box_download .qrCode {
     display: block;
     width: 124px;
     margin-left: 6px;
     grid-area: 1/3/3/4;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .box_download .qrCode {
        width: 114px;
        margin-left: 0px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .box_download .qrCode {
        width: 74px;
    }
}.main .page.page1 .page1_num {
     z-index: 1;
     background-size: 100% 100%;
     color: #000;
     width: 450px;
     height: 52px;
     margin-left: -225px;
     top: 828px;
     text-align: center;
     line-height: 52px;
     font-size: 25px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .page1_num {
        width: 372px;
        height: 42px;
        margin-left: -186px;
        top: 813px;
        line-height: 44px;
        font-size: 20px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .page1_num {
        width: 270px;
        height: 35px;
        margin-left: -135px;
        top: 521px;
        line-height: 36px;
        font-size: 15px;
    }
}.main .page.page1 .page1_num span {
     display: inline-block;
     color: red;
 }
.main .page.page1 .page1_btn-login {
    z-index: 25;
    width: 270px;
    height: 62px;
    background-position: -208px 0;
    top: 919px;
    margin-left: -620px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page1 .page1_btn-login {
        background-size: 600px;
        width: 202.5px;
        height: 46.5px;
        background-position: -156px 0;
        margin-left: -101.25px;
        top: 875px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .page1_btn-login {
        background-size: 360px;
        width: 121.5px;
        height: 27.9px;
        background-position: -93.6px 0;
        margin-left: -60.75px;
        top: 568px;
    }
}.main .page.page1 .loading {
     z-index: 20;
     width: 968px;
     margin-left: -358px;
     top: 938px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .loading {
        width: 630px;
        margin-left: -305px;
        top: 993px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .loading {
        width: 306px;
        margin-left: -148px;
        top: 629px;
    }
}.main .page.page1 .loading .loading_bg {
     position: absolute;
     width: 100%;
     height: 34px;
     z-index: 2;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .loading .loading_bg {
        height: 22px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_bg {
        height: 11px;
    }
}.main .page.page1 .loading .loading_bg::before {
     content: "";
     display: block;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     position: absolute;
     width: 100%;
     max-width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     filter: grayscale(100%);
 }
.main .page.page1 .loading .loading_bg--active {
    background-size: auto 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 0%;
    max-width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}
.main .page.page1 .loading .loading_item {
    position: absolute;
    z-index: 2;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    bottom: -100px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page1 .loading .loading_item {
        bottom: -88px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item {
        bottom: -54px;
    }
}.main .page.page1 .loading .loading_item .img_hover {
     display: none;
     width: 246px;
     height: 164px;
     position: absolute;
     bottom: 96px;
     left: 50%;
     margin-left: -124px;
     background: rgba(0, 0, 0, .7803921569);
     border-radius: 10px;
     color: #fff;
     font-size: 18px;
     text-align: center;
     padding: 10px;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .img_hover {
        width: 123px;
        height: auto;
        bottom: 59px;
        margin-left: -62px;
        font-size: 13px;
    }
}.main .page.page1 .loading .loading_item .img_hover .txt_num {
     display: none;
     font-weight: bold;
     text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
 }
.main .page.page1 .loading .loading_item .icon {
    display: block;
    background-position-y: -69px;
}
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon {
        background-size: 400px;
        background-position-y: -35px;
    }
}.main .page.page1 .loading .loading_item .icon1 {
     width: 57px;
     height: 50px;
     background-position-x: -293px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon1 {
        width: 28px;
        height: 25px;
        background-position-x: -146px;
    }
}.main .page.page1 .loading .loading_item .icon2 {
     width: 63px;
     height: 68px;
     background-position-x: -350px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon2 {
        width: 32px;
        height: 34px;
        background-position-x: -175px;
    }
}.main .page.page1 .loading .loading_item .icon3 {
     width: 74px;
     height: 82px;
     background-position-x: -413px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon3 {
        width: 37px;
        height: 41px;
        background-position-x: -206px;
    }
}.main .page.page1 .loading .loading_item .icon4 {
     width: 102px;
     height: 96px;
     background-position-x: -487px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon4 {
        width: 51px;
        height: 48px;
        background-position-x: -243px;
    }
}.main .page.page1 .loading .loading_item .icon5 {
     width: 128px;
     height: 127px;
     background-position-x: -589px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .icon5 {
        width: 64px;
        height: 63px;
        background-position-x: -294px;
    }
}.main .page.page1 .loading .loading_item .turn_num {
     background-size: 100% 100%;
     color: #fff;
     width: 106px;
     height: 54px;
     text-align: center;
     font-size: 22px;
     line-height: 1;
     padding: 5px 5px;
     text-shadow: 0px -1.5px 0 #000, 0px -1.5px 0 #000, 0px 1.5px 0 #000, 0px 1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page1 .loading .loading_item .turn_num {
        width: 95px;
        height: 51px;
        font-size: 19px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page1 .loading .loading_item .turn_num {
        width: 52px;
        height: 37px;
        font-size: 12px;
        line-height: 1.2;
        padding: 4px 2px 0;
    }
}.main .page.page1 .loading .loading_item-1 {
     left: 4%}
.main .page.page1 .loading .loading_item-2 {
    left: 22%}
.main .page.page1 .loading .loading_item-3 {
    left: 40%}
.main .page.page1 .loading .loading_item-4 {
    left: 60%}
.main .page.page1 .loading .loading_item-5 {
    left: 79%}
.main .page.page1 .loading .loading_item:hover {
    z-index: 20;
}
.main .page.page1 .loading .loading_item:hover .img_hover {
    display: flex;
}
.main .page.page1 .loading .loading_item:hover .img_hover .txt_num1 {
    display: block;
}
.main .page.page1 .loading .loading_item:hover .img_hover .txt_num2 {
    display: none;
}
.main .page.page1 .loading .loading_item.active {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}
.main .page.page1 .loading .loading_item.active:hover {
    z-index: 20;
}
.main .page.page1 .loading .loading_item.active:hover .img_hover {
    display: flex;
}
.main .page.page1 .loading .loading_item.active:hover .img_hover .txt_num1 {
    display: none;
}
.main .page.page1 .loading .loading_item.active:hover .img_hover .txt_num2 {
    display: block;
}
.main .page.page1 .loading:has(.loading_item:hover) {
    z-index: 50;
}
.main .page.page2 {
    height: 951px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page2 {
        height: 1132px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 {
        height: 702px;
    }
}.main .page.page2 .page2_title {
     z-index: 1;
     width: 532px;
     height: 123px;
     margin-left: -266px;
     top: 49px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_title {
        width: 400px;
        height: 92px;
        margin-left: -200px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_title {
        width: 234px;
        height: 55px;
        margin-left: -117px;
        top: 39px;
    }
}.main .page.page2 .page2_sub {
     z-index: 1;
     width: 582px;
     height: 63px;
     margin-left: -291px;
     top: 150px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_sub {
        width: 410px;
        height: 47px;
        margin-left: -205px;
        top: 126px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_sub {
        width: 196px;
        height: 32px;
        margin-left: -98px;
        top: 86px;
    }
}.main .page.page2 .page2_art {
     z-index: 1;
     top: 0;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_art {
        z-index: 0;
        top: 425px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_art {
        top: 274px;
    }
}.main .page.page2 .page2_art1 {
     width: 516px;
     height: 1002px;
     margin-left: -939px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_art1 {
        width: 459px;
        height: 817px;
        margin-left: -64px;
        margin-top: 74px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_art1 {
        width: 230px;
        height: 408px;
        margin-left: -32px;
        margin-top: 27px;
    }
}.main .page.page2 .page2_art2 {
     width: 550px;
     height: 1054px;
     margin-left: 423px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_art2 {
        width: 515px;
        height: 948px;
        margin-left: -410px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_art2 {
        width: 257px;
        height: 474px;
        margin-left: -205px;
    }
}.main .page.page2 .page2_code {
     z-index: 10;
     margin-left: -122px;
     top: 399px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_code {
        margin-left: -91.5px;
        top: 295px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_code {
        margin-left: -45.75px;
        top: 180px;
    }
}.main .page.page2 .page2_code .recive_code {
     display: block;
     width: 245px;
     height: 69px;
     background-position: -208px -62px;
     filter: grayscale(100%);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_code .recive_code {
        background-size: 600px;
        width: 183.75px;
        height: 51.75px;
        background-position: -156px -46.5px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_code .recive_code {
        background-size: 300px;
        width: 91.875px;
        height: 25.875px;
        background-position: -78px -23.25px;
    }
}.main .page.page2 .page2_code .recive_code.active {
     filter: grayscale(0%);
 }
.main .page.page2 .page2_code .num_star {
    text-shadow: 0px -1.5px 0 #000, 0px -1.5px 0 #000, 0px 1.5px 0 #000, 0px 1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
    font-size: 28px;
    color: #fff;
    text-align: center;
    font-weight: 500;
}
@media only screen and (max-width: 1024px) {
    .main .page.page2 .page2_code .num_star {
        font-size: 20px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .page2_code .num_star {
        font-size: 13px;
    }
}.main .page.page2 .group_content {
     z-index: 5;
     width: 921px;
     height: 406px;
     margin-left: -460px;
     top: 271px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_content {
        width: 640px;
        height: 291px;
        margin-left: -320px;
        top: 198px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_content {
        width: 320px;
        height: 145px;
        margin-left: -160px;
        top: 132px;
    }
}.main .page.page2 .group_content .wrap {
     z-index: 5;
     width: 660px;
     height: 300px;
     top: 53px;
     margin-left: -330px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_content .wrap {
        transform: scale(0.7);
        transform-origin: top center;
        top: 42px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_content .wrap {
        transform: scale(0.35);
        top: 21px;
    }
}.main .page.page2 .group_content .wrap .ball_item {
     position: absolute;
     z-index: 2;
     display: block;
     animation-name: rotate;
     animation-timing-function: ease-out;
     animation-direction: alternate;
     animation-iteration-count: infinite;
     animation-fill-mode: none;
     animation-play-state: running;
     filter: grayscale(100%);
     pointer-events: none;
 }
.main .page.page2 .group_content .wrap .ball_item.active {
    filter: grayscale(0%);
    pointer-events: auto;
}
.main .page.page2 .group_content .wrap .ball_item.current {
    filter: grayscale(0%);
}
.main .page.page2 .group_content .wrap .ball_item1 {
    width: 99px;
    height: 99px;
    background-position: -513px -161px;
    left: -41px;
    top: 69px;
    animation-duration: 20s;
}
.main .page.page2 .group_content .wrap .ball_item2 {
    width: 143px;
    height: 143px;
    background-position: -225px -161px;
    top: 187px;
    margin-left: 41px;
    animation-duration: 25s;
}
.main .page.page2 .group_content .wrap .ball_item3 {
    width: 209px;
    height: 208px;
    top: 184px;
    left: 224px;
    animation-duration: 30s;
}
.main .page.page2 .group_content .wrap .ball_item4 {
    width: 161px;
    height: 161px;
    background-position: -384px 0;
    left: 481px;
    top: 171px;
    animation-duration: 22s;
}
.main .page.page2 .group_content .wrap .ball_item5 {
    width: 142px;
    height: 141px;
    background-position: -576px 0;
    left: 541px;
    top: 6px;
    animation-duration: 26s;
}
.main .page.page2 .group_content .wrap .ball_item6 {
    width: 112px;
    height: 112px;
    background-position: -384px -161px;
    left: 349px;
    top: -47px;
    animation-duration: 28s;
}
.main .page.page2 .group_content .wrap .ball_item7 {
    background-size: 460px;
    width: 91.425px;
    height: 90.85px;
    background-position: -129.375px 0;
    top: -23px;
    left: 127px;
    animation-duration: 25s;
}
.main .page.page2 .group_content .wrap .ball_item8 {
    width: 81px;
    height: 81px;
    background-position: -629px -161px;
    left: 288px;
    top: -37px;
    animation-duration: 21s;
}
.main .page.page2 .group_btn2 {
    position: absolute;
    z-index: 5;
    width: 100%;
    top: 774px;
    text-align: center;
}
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_btn2 {
        top: 968px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_btn2 {
        top: 580px;
    }
}.main .page.page2 .group_btn2 .page2_btn {
     display: inline-block;
     width: 262px;
     height: 94px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_btn2 .page2_btn {
        background-size: 680px;
        width: 222.7px;
        height: 79.9px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_btn2 .page2_btn {
        background-size: 340px;
        width: 111.35px;
        height: 39.95px;
    }
}.main .page.page2 .group_btn2 .page2_btn-rule {
     background-position-y: -214px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_btn2 .page2_btn-rule {
        background-position-y: -181.9px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_btn2 .page2_btn-rule {
        background-position-y: -90.95px;
    }
}.main .page.page2 .group_btn2 .page2_btn-history {
     background-position-y: -308px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page2 .group_btn2 .page2_btn-history {
        background-position-y: -261.8px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page2 .group_btn2 .page2_btn-history {
        background-position-y: -130.9px;
    }
}.main .page.page3 {
     height: 1155px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 {
        height: 1130px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 {
        height: 604px;
    }
}.main .page.page3 .page5_title {
     z-index: 1;
     width: 425px;
     height: 135px;
     margin-left: -212px;
     top: 36px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .page5_title {
        width: 344px;
        height: 105px;
        margin-left: -172px;
        top: 52px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .page5_title {
        width: 200px;
        height: 62px;
        margin-left: -100px;
        top: 30px;
    }
}.main .page.page3 .page5_art {
     z-index: 0;
     top: 375px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .page5_art {
        display: none;
    }
}.main .page.page3 .page5_art1 {
     width: 164px;
     height: 330px;
     margin-left: -560px;
     margin-top: 100px;
 }
.main .page.page3 .page5_art2 {
    width: 229px;
    height: 437px;
    margin-left: 369px;
}
.main .page.page3 .page5_khung {
    z-index: 1;
    width: 962px;
    height: 720px;
    margin-left: -481px;
    top: 140px;
}
@media only screen and (max-width: 640px) {
    .main .page.page3 .page5_khung {
        transform: scale(0.47);
        transform-origin: top center;
        top: 85px;
    }
}.main .page.page3 .page5_khung .list_gift {
     z-index: 1;
     width: 556px;
     height: 532px;
     margin-left: -293px;
     top: 43px;
 }
.main .page.page3 .page5_khung .list_gift::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 3;
}
.main .page.page3 .page5_khung .list_gift .gift_item {
    position: absolute;
    z-index: 1;
}
.main .page.page3 .page5_khung .list_gift .gift_item-1 {
    width: 127px;
    height: 131px;
    background-position: 0 -259px;
    top: 169px;
    left: 53px;
    animation: ball_1 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-2 {
    width: 127px;
    height: 131px;
    background-position: -127px -259px;
    top: 42px;
    left: 195px;
    animation: ball_2 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-3 {
    width: 172px;
    height: 177px;
    background-position: -254px -259px;
    top: 272px;
    left: 324px;
    animation: ball_3 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-4 {
    width: 112px;
    height: 115px;
    background-position: -426px -259px;
    top: 71px;
    left: 305px;
    animation: ball_4 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-5 {
    width: 108px;
    height: 111px;
    background-position: 0 -436px;
    top: 147px;
    left: 244px;
    animation: ball_5 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-6 {
    width: 147px;
    height: 153px;
    background-position: -108px -436px;
    top: 145px;
    left: 349px;
    animation: ball_6 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-7 {
    width: 112px;
    height: 115px;
    background-position: -256px -436px;
    top: 191px;
    left: 155px;
    z-index: 3;
    animation: ball_7 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-8 {
    width: 149px;
    height: 153px;
    background-position: -366px -436px;
    top: 277px;
    left: 115px;
    animation: ball_8 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-9 {
    width: 149px;
    height: 153px;
    background-position: -538px -259px;
    top: 242px;
    left: 236px;
    animation: ball_9 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-10 {
    width: 149px;
    height: 153px;
    background-position: -538px -259px;
    top: 242px;
    left: 236px;
    animation: ball_9 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift .gift_item-11, .main .page.page3 .page5_khung .list_gift .gift_item-12, .main .page.page3 .page5_khung .list_gift .gift_item-13, .main .page.page3 .page5_khung .list_gift .gift_item-14, .main .page.page3 .page5_khung .list_gift .gift_item-15 {
    width: 94px;
    height: 96px;
    background-position: -515px -436px;
    top: 110px;
    left: 165px;
    animation: ball_2 infinite 2s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-1 {
    animation: ballMove_0 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-2 {
    animation: ballMove_1 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-3 {
    animation: ballMove_2 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-4 {
    animation: ballMove_3 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-5 {
    animation: ballMove_4 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-6 {
    animation: ballMove_5 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-7 {
    animation: ballMove_6 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-8 {
    animation: ballMove_7 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-9 {
    animation: ballMove_8 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-10 {
    animation: ballMove_9 4 .5s 0s linear;
}
.main .page.page3 .page5_khung .list_gift.active .gift_item-11, .main .page.page3 .page5_khung .list_gift.active .gift_item-12, .main .page.page3 .page5_khung .list_gift.active .gift_item-13, .main .page.page3 .page5_khung .list_gift.active .gift_item-14, .main .page.page3 .page5_khung .list_gift.active .gift_item-15 {
    animation: ballMove_5 4 .5s 0s linear;
}
.main .page.page3 .page5_btn-play {
    z-index: 10;
    display: block;
    width: 156px;
    height: 156px;
    background-position: -642px 0;
    margin-left: -72px;
    top: 558px;
}
@media only screen and (max-width: 640px) {
    .main .page.page3 .page5_btn-play {
        background-size: 400px;
        width: 78px;
        height: 78px;
        background-position: -321px 0;
        margin-left: -39px;
        top: 277px;
    }
}.main .page.page3 .page5_btn-play.active {
     pointer-events: none;
 }
.main .page.page3 .page5_num {
    position: absolute;
    z-index: 2;
    width: 100%;
    left: 0;
    text-align: center;
    color: #fff;
    top: 715px;
    font-size: 21px;
    text-shadow: 0px -1.5px 0 #000, 0px -1.5px 0 #000, 0px 1.5px 0 #000, 0px 1.5px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000;
}
@media only screen and (max-width: 640px) {
    .main .page.page3 .page5_num {
        top: 355px;
        font-size: 13px;
    }
}.main .page.page3 .group_btn {
     z-index: 12;
     position: absolute;
     width: 1110px;
     margin-left: -555px;
     left: 50%;
     text-align: center;
     top: 756px;
     padding-left: 6px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_btn {
        top: 756px;
        width: 640px;
        margin-left: -320px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_btn {
        top: 376px;
        width: 320px;
        margin-left: -160px;
        padding-left: 0;
    }
}.main .page.page3 .group_btn .page5_btn {
     display: inline-block;
     width: 206px;
     height: 72px;
     margin: 0 2px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_btn .page5_btn {
        background-size: 750px;
        width: 193.125px;
        height: 67.5px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_btn .page5_btn {
        background-size: 380px;
        width: 97.85px;
        height: 34.2px;
    }
}.main .page.page3 .group_btn .page5_btn-addTurn {
     background-position-y: -72px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_btn .page5_btn-addTurn {
        background-position-y: -67.5px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_btn .page5_btn-addTurn {
        background-position-y: -34.2px;
    }
}.main .page.page3 .group_btn .page5_btn-history {
     background-position-y: -144px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_btn .page5_btn-history {
        background-position-y: -135px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_btn .page5_btn-history {
        background-position-y: -68.4px;
    }
}.main .page.page3 .group_changeCode {
     z-index: 20;
     margin-left: -366px;
     top: 865px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode {
        margin-left: -320px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode {
        margin-left: -160px;
        top: 431px;
    }
}.main .page.page3 .group_changeCode .changeCode_item {
     width: 732px;
     height: 127px;
     margin-bottom: 8px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item {
        width: 640px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item {
        width: 320px;
        height: 67px;
        background-size: 100% 100%}
}.main .page.page3 .group_changeCode .changeCode_item .group_item {
     display: flex;
     align-items: center;
 }
.main .page.page3 .group_changeCode .changeCode_item .group_item .item {
    filter: grayscale(100%);
}
.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon {
    display: block;
    width: 99px;
    height: 100px;
    background-position-y: -156px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon {
        background-size: 630px;
        width: 77.9625px;
        height: 78.75px;
        background-position-y: -122.85px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon {
        background-size: 320px;
        width: 39.6px;
        height: 40px;
        background-position-y: -62.4px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon1 {
     background-position-x: -208px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon1 {
        background-position-x: -163.8px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon1 {
        background-position-x: -83.2px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon2 {
     background-position-x: -307px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon2 {
        background-position-x: -241.7625px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon2 {
        background-position-x: -122.8px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon3 {
     background-position-x: -405px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon3 {
        background-position-x: -318.9375px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon3 {
        background-position-x: -162px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon4 {
     background-position-x: -503px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon4 {
        background-position-x: -396.1125px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon4 {
        background-position-x: -201.2px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon5 {
     width: 96px;
     height: 96px;
     background-position-x: -602px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon5 {
        width: 75.6px;
        height: 75.6px;
        background-position-x: -474.075px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon5 {
        width: 38.4px;
        height: 38.4px;
        background-position-x: -240.8px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon6 {
     width: 96px;
     height: 96px;
     background-position-x: -698px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon6 {
        width: 75.6px;
        height: 75.6px;
        background-position-x: -549.675px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-icon6 {
        width: 38.4px;
        height: 38.4px;
        background-position-x: -279.2px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item-num {
     color: #b91e00;
     font-weight: bold;
     text-align: center;
     line-height: 1;
     font-size: 20px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .item-num {
        font-size: 13px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group_item .item.active {
     filter: grayscale(0%);
 }
.main .page.page3 .group_changeCode .changeCode_item .group_item .txt_plus {
    color: #b91e00;
    font-weight: bold;
    font-size: 26px;
    margin: 0 6px;
}
@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group_item .txt_plus {
        font-size: 13px;
        margin: 0 4px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2 {
     position: relative;
     display: block;
     width: 164px;
     height: 45px;
     background-position-x: -478px;
 }
@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2 {
        background-size: 400px;
        width: 82px;
        height: 23px;
        background-position-x: -239px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift {
     margin-bottom: 10px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift {
        margin-bottom: 6px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift {
        margin-bottom: 3px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift .txt_gift {
     display: none;
     width: 246px;
     height: 164px;
     position: absolute;
     bottom: 50px;
     left: 50%;
     margin-left: -124px;
     background: rgba(0, 0, 0, .7803921569);
     border-radius: 10px;
     color: #fff;
     font-size: 18px;
     text-align: center;
     padding: 10px;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift .txt_gift {
        width: 123px;
        height: auto;
        bottom: 59px;
        margin-left: -62px;
        font-size: 13px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-gift:hover .txt_gift {
     display: flex;
 }
.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-changeCode {
    background-position-y: -45px;
    filter: grayscale(100%);
    pointer-events: none;
}
@media only screen and (max-width: 640px) {
    .main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-changeCode {
        background-position-y: -22px;
    }
}.main .page.page3 .group_changeCode .changeCode_item .group5_btn2 .page5_btn2-changeCode.active {
     filter: grayscale(0%);
     pointer-events: auto;
 }
.main .page.page4 {
    height: 1065px;
    background-color: #000;
}
@media only screen and (max-width: 1024px) {
    .main .page.page4 {
        height: 783px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 {
        height: 437px;
        border-bottom: 4px solid #000;
    }
}.main .page.page4 .page3_title {
     z-index: 1;
     width: 398px;
     height: 123px;
     margin-left: -199px;
     top: 49px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .page3_title {
        width: 335px;
        height: 101px;
        margin-left: -167px;
        top: 51px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .page3_title {
        width: 167px;
        height: 51px;
        margin-left: -83px;
        top: 40px;
    }
}.main .page.page4 .group-type {
     z-index: 1;
     margin-left: 141px;
     top: 165px;
     display: flex;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-type {
        margin-left: -8px;
        top: 197px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-type {
        margin-left: -4px;
        top: 115px;
    }
}.main .page.page4 .group-type .type_item {
     display: block;
     filter: grayscale(100%);
     margin: 0 -1px;
     width: 139px;
     height: 145px;
     background-position-x: -765px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-type .type_item {
        background-size: 700px;
        width: 103.5106382979px;
        height: 107.9787234043px;
        background-position-x: -569.6808510638px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-type .type_item {
        background-size: 350px;
        width: 51.7553191489px;
        height: 53.9893617021px;
        background-position-x: -284.8404255319px;
    }
}.main .page.page4 .group-type .type_item-1 {
     background-position-y: 0;
 }
.main .page.page4 .group-type .type_item-2 {
    background-position-y: -163px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-type .type_item-2 {
        background-position-y: -121.3829787234px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-type .type_item-2 {
        background-position-y: -60.6914893617px;
    }
}.main .page.page4 .group-type .type_item-3 {
     background-position-y: -326px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-type .type_item-3 {
        background-position-y: -242.7659574468px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-type .type_item-3 {
        background-position-y: -121.3829787234px;
    }
}.main .page.page4 .group-type .type_item.active {
     filter: grayscale(0);
 }
.main .page.page4 .art_img {
    z-index: 1;
    width: 1133px;
    height: 716px;
    margin-left: -566px;
    top: 274px;
    opacity: 0;
}
@media only screen and (max-width: 1024px) {
    .main .page.page4 .art_img {
        width: 640px;
        height: 417px;
        margin-left: -320px;
        top: 278px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .art_img {
        width: 320px;
        height: 208px;
        margin-left: -160px;
        top: 158px;
    }
}.main .page.page4 .art_img.active {
     animation: fadeLeft 1s forwards;
 }
.main .page.page4 .group-icon {
    z-index: 10;
    top: 863px;
    margin-left: -550px;
    display: none;
}
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon {
        top: 615px;
        margin-left: -308px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon {
        top: 615px;
        margin-left: -154px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon {
        top: 329px;
        margin-left: -154px;
    }
}.main .page.page4 .group-icon1 .icon_item-1 {
     background-position: calc((1 - 1)*-255px) calc((1 - 1)*-187px);
     margin-top: calc((1 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-1 {
        background-position: calc((1 - 1)*-255px/2) calc((1 - 1)*-187px/2);
        margin-top: calc((1 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-1 {
        background-position: calc((1 - 1)*-255px/4) calc((1 - 1)*-187px/4);
        margin-top: calc((1 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon1 .icon_item-2 {
     background-position: calc((1 - 1)*-255px) calc((2 - 1)*-187px);
     margin-top: calc((2 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-2 {
        background-position: calc((1 - 1)*-255px/2) calc((2 - 1)*-187px/2);
        margin-top: calc((2 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-2 {
        background-position: calc((1 - 1)*-255px/4) calc((2 - 1)*-187px/4);
        margin-top: calc((2 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon1 .icon_item-3 {
     background-position: calc((1 - 1)*-255px) calc((3 - 1)*-187px);
     margin-top: calc((3 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-3 {
        background-position: calc((1 - 1)*-255px/2) calc((3 - 1)*-187px/2);
        margin-top: calc((3 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-3 {
        background-position: calc((1 - 1)*-255px/4) calc((3 - 1)*-187px/4);
        margin-top: calc((3 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon1 .icon_item-4 {
     background-position: calc((1 - 1)*-255px) calc((4 - 1)*-187px);
     margin-top: calc((4 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-4 {
        background-position: calc((1 - 1)*-255px/2) calc((4 - 1)*-187px/2);
        margin-top: calc((4 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-4 {
        background-position: calc((1 - 1)*-255px/4) calc((4 - 1)*-187px/4);
        margin-top: calc((4 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon1 .icon_item-5 {
     background-position: calc((1 - 1)*-255px) calc((5 - 1)*-187px);
     margin-top: calc((5 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-5 {
        background-position: calc((1 - 1)*-255px/2) calc((5 - 1)*-187px/2);
        margin-top: calc((5 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-5 {
        background-position: calc((1 - 1)*-255px/4) calc((5 - 1)*-187px/4);
        margin-top: calc((5 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon1 .icon_item-6 {
     background-position: calc((1 - 1)*-255px) calc((6 - 1)*-187px);
     margin-top: calc((6 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon1 .icon_item-6 {
        background-position: calc((1 - 1)*-255px/2) calc((6 - 1)*-187px/2);
        margin-top: calc((6 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon1 .icon_item-6 {
        background-position: calc((1 - 1)*-255px/4) calc((6 - 1)*-187px/4);
        margin-top: calc((6 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-1 {
     background-position: calc((2 - 1)*-255px) calc((1 - 1)*-187px);
     margin-top: calc((1 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-1 {
        background-position: calc((2 - 1)*-255px/2) calc((1 - 1)*-187px/2);
        margin-top: calc((1 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-1 {
        background-position: calc((2 - 1)*-255px/4) calc((1 - 1)*-187px/4);
        margin-top: calc((1 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-2 {
     background-position: calc((2 - 1)*-255px) calc((2 - 1)*-187px);
     margin-top: calc((2 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-2 {
        background-position: calc((2 - 1)*-255px/2) calc((2 - 1)*-187px/2);
        margin-top: calc((2 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-2 {
        background-position: calc((2 - 1)*-255px/4) calc((2 - 1)*-187px/4);
        margin-top: calc((2 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-3 {
     background-position: calc((2 - 1)*-255px) calc((3 - 1)*-187px);
     margin-top: calc((3 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-3 {
        background-position: calc((2 - 1)*-255px/2) calc((3 - 1)*-187px/2);
        margin-top: calc((3 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-3 {
        background-position: calc((2 - 1)*-255px/4) calc((3 - 1)*-187px/4);
        margin-top: calc((3 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-4 {
     background-position: calc((2 - 1)*-255px) calc((4 - 1)*-187px);
     margin-top: calc((4 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-4 {
        background-position: calc((2 - 1)*-255px/2) calc((4 - 1)*-187px/2);
        margin-top: calc((4 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-4 {
        background-position: calc((2 - 1)*-255px/4) calc((4 - 1)*-187px/4);
        margin-top: calc((4 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-5 {
     background-position: calc((2 - 1)*-255px) calc((5 - 1)*-187px);
     margin-top: calc((5 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-5 {
        background-position: calc((2 - 1)*-255px/2) calc((5 - 1)*-187px/2);
        margin-top: calc((5 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-5 {
        background-position: calc((2 - 1)*-255px/4) calc((5 - 1)*-187px/4);
        margin-top: calc((5 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon2 .icon_item-6 {
     background-position: calc((2 - 1)*-255px) calc((6 - 1)*-187px);
     margin-top: calc((6 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon2 .icon_item-6 {
        background-position: calc((2 - 1)*-255px/2) calc((6 - 1)*-187px/2);
        margin-top: calc((6 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon2 .icon_item-6 {
        background-position: calc((2 - 1)*-255px/4) calc((6 - 1)*-187px/4);
        margin-top: calc((6 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-1 {
     background-position: calc((3 - 1)*-255px) calc((1 - 1)*-187px);
     margin-top: calc((1 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-1 {
        background-position: calc((3 - 1)*-255px/2) calc((1 - 1)*-187px/2);
        margin-top: calc((1 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-1 {
        background-position: calc((3 - 1)*-255px/4) calc((1 - 1)*-187px/4);
        margin-top: calc((1 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-2 {
     background-position: calc((3 - 1)*-255px) calc((2 - 1)*-187px);
     margin-top: calc((2 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-2 {
        background-position: calc((3 - 1)*-255px/2) calc((2 - 1)*-187px/2);
        margin-top: calc((2 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-2 {
        background-position: calc((3 - 1)*-255px/4) calc((2 - 1)*-187px/4);
        margin-top: calc((2 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-3 {
     background-position: calc((3 - 1)*-255px) calc((3 - 1)*-187px);
     margin-top: calc((3 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-3 {
        background-position: calc((3 - 1)*-255px/2) calc((3 - 1)*-187px/2);
        margin-top: calc((3 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-3 {
        background-position: calc((3 - 1)*-255px/4) calc((3 - 1)*-187px/4);
        margin-top: calc((3 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-4 {
     background-position: calc((3 - 1)*-255px) calc((4 - 1)*-187px);
     margin-top: calc((4 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-4 {
        background-position: calc((3 - 1)*-255px/2) calc((4 - 1)*-187px/2);
        margin-top: calc((4 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-4 {
        background-position: calc((3 - 1)*-255px/4) calc((4 - 1)*-187px/4);
        margin-top: calc((4 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-5 {
     background-position: calc((3 - 1)*-255px) calc((5 - 1)*-187px);
     margin-top: calc((5 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-5 {
        background-position: calc((3 - 1)*-255px/2) calc((5 - 1)*-187px/2);
        margin-top: calc((5 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-5 {
        background-position: calc((3 - 1)*-255px/4) calc((5 - 1)*-187px/4);
        margin-top: calc((5 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon3 .icon_item-6 {
     background-position: calc((3 - 1)*-255px) calc((6 - 1)*-187px);
     margin-top: calc((6 - 1)*-20px);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon3 .icon_item-6 {
        background-position: calc((3 - 1)*-255px/2) calc((6 - 1)*-187px/2);
        margin-top: calc((6 - 1)*-20px/2);
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon3 .icon_item-6 {
        background-position: calc((3 - 1)*-255px/4) calc((6 - 1)*-187px/4);
        margin-top: calc((6 - 1)*-20px/4);
    }
}.main .page.page4 .group-icon .icon_item {
     display: block;
     width: 245px;
     height: 187px;
     filter-webkit: grayscale(100%);
     filter: grayscale(100%);
     margin-left: -30px;
     margin-right: -30px;
     -webkit-clip-path: polygon(0 0,  92% 0,  100% 100%,  11% 100%);
     clip-path: polygon(0 0,  92% 0,  100% 100%,  11% 100%);
 }
@media only screen and (max-width: 1024px) {
    .main .page.page4 .group-icon .icon_item {
        background-size: 470px;
        width: 122.5px;
        height: 93.5px;
        margin-left: -10px;
        margin-right: -10px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page4 .group-icon .icon_item {
        background-size: 235px;
        width: 61.25px;
        height: 46.75px;
        margin-left: -5px;
        margin-right: -5px;
    }
}.main .page.page4 .group-icon .icon_item.active {
     filter-webkit: grayscale(0);
     filter: grayscale(0);
 }
.main .page.page4 .group-icon.active {
    display: flex;
}
.main .page.page5 {
    height: 1053px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page5 {
        height: 713px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 {
        height: calc(130px + 72vw);
        background-color: #000;
    }
}.main .page.page5 .page4_title {
     z-index: 1;
     width: 838px;
     height: 161px;
     margin-left: -419px;
     top: 26px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_title {
        width: 563px;
        height: 111px;
        margin-left: -281px;
        top: 38px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_title {
        width: 334px;
        height: 69px;
        margin-left: -167px;
        top: 28px;
    }
}.main .page.page5 .page4_slide {
     z-index: 5;
     margin-left: -580px;
     width: 1160px;
     height: 745px;
     top: 191px;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide {
        width: 640px;
        height: 411.0344827586px;
        margin-left: -320px;
        background-image: none;
        top: 150px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide {
        width: 90vw;
        height: 64.224137931vw;
        margin-left: 0;
        left: 5vw;
        top: 108px;
    }
}.main .page.page5 .page4_slide .swiper_feature {
     overflow: hidden;
     padding-bottom: 140px;
     position: relative;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide .swiper_feature {
        padding-bottom: 78px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide .swiper_feature {
        padding-bottom: 50px;
    }
}.main .page.page5 .page4_slide .swiper_feature .swiper-wrapper .swiper-slide {
     display: block;
     opacity: .6;
 }
.main .page.page5 .page4_slide .swiper_feature .swiper-wrapper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}
.main .page.page5 .page4_slide .swiper_feature .swiper-wrapper .swiper-slide-active {
    opacity: 1;
}
.main .page.page5 .page4_slide .swiper_feature .swiper-btn {
    width: 136px;
    height: 83px;
    background-position: -262px -219px;
    top: 100%;
    margin-top: -90px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn {
        background-size: 400px;
        width: 68px;
        height: 42px;
        background-position: -131px -110px;
        margin-top: -45px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn {
        background-size: 200px;
        width: 34px;
        height: 22px;
        background-position: -65px -55px;
        margin-top: -25px;
    }
}.main .page.page5 .page4_slide .swiper_feature .swiper-btn::after {
     display: none;
 }
.main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-next {
    right: 120px;
}
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-next {
        right: 60px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-next {
        right: 30px;
    }
}.main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-prev {
     left: 120px;
     transform: rotate(180deg);
     transform-origin: center;
 }
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-prev {
        left: 60px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-btn.swiper-button-prev {
        left: 30px;
    }
}.main .page.page5 .page4_slide .swiper_feature .swiper-pagination {
     bottom: 0;
 }
.main .page.page5 .page4_slide .swiper_feature .swiper-pagination .swiper-pagination-bullet {
    width: 82px;
    height: 83px;
    background-position: -262px -136px;
    opacity: 1;
    filter: grayscale(100%);
    margin: 0 10px;
    background-color: rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 1024px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-pagination .swiper-pagination-bullet {
        background-size: 400px;
        width: 41px;
        height: 41px;
        background-position: -131px -68px;
        margin: 0 6px;
    }
}@media only screen and (max-width: 640px) {
    .main .page.page5 .page4_slide .swiper_feature .swiper-pagination .swiper-pagination-bullet {
        background-size: 200px;
        width: 21px;
        height: 21px;
        background-position: -65px -34px;
        margin: 0 3px;
    }
}.main .page.page5 .page4_slide .swiper_feature .swiper-pagination .swiper-pagination-bullet-active {
     filter: grayscale(0);
 }
.ballShow {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: none;
}
.ballShow .maskBall {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, .7);
    z-index: 1;
    opacity: 0;
    left: 0;
    animation: domShow .4s 1s linear forwards;
}
.ballShow .outPutBall {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,  -50%);
    width: 100px;
    height: 100px;
    z-index: 10;
}
.ballShow .outPutBall.gift1 {
    width: 127px;
    height: 131px;
    background-position: 0 -259px;
}
.ballShow .outPutBall.gift2 {
    width: 127px;
    height: 131px;
    background-position: -127px -259px;
}
.ballShow .outPutBall.gift3 {
    width: 172px;
    height: 177px;
    background-position: -254px -259px;
}
.ballShow .outPutBall.gift4 {
    width: 112px;
    height: 115px;
    background-position: -426px -259px;
}
.ballShow .outPutBall.gift5 {
    width: 108px;
    height: 111px;
    background-position: 0 -436px;
}
.ballShow .outPutBall.gift6 {
    width: 147px;
    height: 153px;
    background-position: -108px -436px;
}
.ballShow .outPutBall.gift7 {
    width: 112px;
    height: 115px;
    background-position: -256px -436px;
}
.ballShow .outPutBall.gift8 {
    width: 149px;
    height: 153px;
    background-position: -366px -436px;
}
.ballShow .outPutBall.gift9 {
    width: 149px;
    height: 153px;
    background-position: -538px -259px;
}
.ballShow .outPutBall.gift10 {
    width: 149px;
    height: 153px;
    background-position: -538px -259px;
}
.ballShow .outPutBall.gift11, .ballShow .outPutBall.gift12, .ballShow .outPutBall.gift13, .ballShow .outPutBall.gift14, .ballShow .outPutBall.gift15 {
    width: 94px;
    height: 96px;
    background-position: -515px -436px;
}
.ballShow .lightShow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    margin-top: -280px;
    margin-left: -280px;
    background-position: center;
    background-repeat: no-repeat;
}
.ballShow.show .outPutBall {
    animation: outPutBall 1.2s linear forwards;
}
.ballShow.show .lightShow {
    animation: lightShow 5s 3s linear infinite;
}
.comming-soon {
    width: 290px;
    padding: 50px 0px;
    text-align: center;
    font-size: 22px;
    color: #333;
    background: #fff;
    border-radius: 15px;
}
.comming-soon .closeModal88 {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #f44e19;
    color: #fff;
    border-radius: 50%;
    line-height: 38px;
    text-align: center;
    top: -17px;
    right: -17px;
    font-size: 32px;
}
.mt--40 {
    margin-top: 40px;
}
@media only screen and (max-width: 640px) {
    .mt--40 {
        margin-top: 20px;
    }
}.pop-bg {
     width: 864px;
     height: 585px;
     background-size: 100% 100%}
@media only screen and (max-width: 1024px) {
    .pop-bg {
        width: 643px;
        height: 516px;
    }
}@media only screen and (max-width: 640px) {
    .pop-bg {
        width: 322px;
        height: 378px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg {
        width: 322px;
        height: 312px;
    }
}.pop-bg .closeModal {
     position: absolute;
     z-index: 10;
     width: 52px;
     height: 52px;
     background: #f44e19;
     color: #fff;
     border-radius: 50%;
     line-height: 45px;
     text-align: center;
     top: -9px;
     right: -18px;
     font-size: 32px;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .closeModal {
        top: -3px;
        right: 0px;
        width: 40px;
        height: 40px;
        line-height: 35px;
        font-size: 27px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .closeModal {
        top: -3px;
        right: 0px;
        width: 40px;
        height: 40px;
        line-height: 35px;
        font-size: 27px;
    }
}.pop-bg .pop-title {
     z-index: 1;
     position: absolute;
     text-transform: uppercase;
     text-align: center;
     font-size: 29px;
     font-weight: bold;
     color: #030003;
     top: 78px;
     line-height: 1.5;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     width: 100%}
@media only screen and (max-width: 1024px) {
    .pop-bg .pop-title {
        font-size: 25px;
        top: 66px;
    }
}@media only screen and (max-width: 640px) {
    .pop-bg .pop-title {
        font-size: 19px;
        top: 47px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-title {
        font-size: 19px;
        top: 47px;
    }
}.pop-bg .pop-title span {
     position: relative;
 }
.pop-bg .pop-title span::before, .pop-bg .pop-title span::after {
    content: "";
    display: block;
    width: 32px;
    height: 22px;
    background-position: -563px 0;
    position: absolute;
    top: 50%;
    margin-top: -11px;
}
.pop-bg .pop-title span::before {
    transform: rotate(180deg);
    left: -50px;
}
.pop-bg .pop-title span::after {
    right: -50px;
}
.pop-bg .pop-inner {
    font-size: 17px;
    line-height: 1.5;
    padding: 0 10px;
    position: absolute;
    top: 140px;
    left: 68px;
    width: 714px;
    height: 362px;
    overflow-x: hidden;
    overflow-y: auto;
    color: #000;
}
@media only screen and (max-width: 1024px) {
    .pop-bg .pop-inner {
        font-size: 16px;
        line-height: 1.5;
        padding: 0 10px;
        position: absolute;
        top: 113px;
        left: 36px;
        width: 554px;
        height: 334px;
        overflow-x: hidden;
        overflow-y: auto;
        color: #000;
    }
}@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner {
        font-size: 14px;
        padding: 0;
        max-height: unset;
        overflow-y: auto;
        top: 88px;
        left: 27px;
        width: 256px;
        height: 230px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner {
        font-size: 14px;
        padding: 0;
        max-height: unset;
        overflow-y: auto;
        top: 88px;
        left: 27px;
        width: 256px;
        height: 178px;
    }
}.pop-bg .pop-inner .btn_gui {
     display: block;
     border: 0;
     outline: none;
     box-shadow: none;
     background-color: rgba(0, 0, 0, 0);
     text-indent: -9999px;
     background-size: 600px;
     width: 240px;
     height: 69px;
     background-position: -300px -150.75px;
     margin: 10px auto 0;
 }
@media only screen and (max-width: 1024px) {
    .pop-bg .pop-inner .btn_gui {
        background-size: 450px;
        width: 180px;
        height: 51.75px;
        background-position: -225px -113.0625px;
    }
}@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .btn_gui {
        background-size: 225px;
        width: 90px;
        height: 25.875px;
        background-position: -112.5px -56.53125px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .btn_gui {
        background-size: 225px;
        width: 90px;
        height: 25.875px;
        background-position: -112.5px -56.53125px;
    }
}.pop-bg .pop-inner .mission_item {
     align-items: center;
     justify-content: space-between;
     border-bottom: 1px solid rgba(3, 10, 16, .1607843137);
     padding: 12px 0;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mission_item {
        padding: 5px 0;
        flex-direction: column;
        align-items: flex-start;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mission_item {
        padding: 5px 0;
        flex-direction: column;
        align-items: flex-start;
    }
}.pop-bg .pop-inner .mission_item:last-of-type {
     border-bottom: 0;
 }
.pop-bg .pop-inner .mission_item .mission_item-txt {
    padding-right: 10px;
}
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mission_item .mission_item-txt {
        margin-right: 0;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mission_item .mission_item-txt {
        margin-right: 0;
    }
}.pop-bg .pop-inner .mission_item .mission_item-txt h4 {
     font-size: 19px;
     font-weight: bold;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mission_item .mission_item-txt h4 {
        font-size: 15px;
        line-height: 20px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mission_item .mission_item-txt h4 {
        font-size: 15px;
        line-height: 20px;
    }
}.pop-bg .pop-inner .mission_item .mission_item-txt p {
     color: #262626;
     font-size: 15px;
     margin-top: 5px;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mission_item .mission_item-txt p {
        font-size: 13px;
        line-height: 18px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mission_item .mission_item-txt p {
        font-size: 13px;
        line-height: 18px;
    }
}.pop-bg .pop-inner .btn-ms {
     color: #000;
     width: 140px;
     height: 43px;
     line-height: 41px;
     min-width: 123px;
     text-align: center;
     background-size: 100% 100%;
     font-size: 17px;
     font-weight: 500;
     text-transform: uppercase;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .btn-ms {
        width: 100px;
        height: 30px;
        line-height: 30px;
        min-width: 100px;
        font-size: 15px;
        margin-top: 6px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .btn-ms {
        width: 100px;
        height: 30px;
        line-height: 30px;
        min-width: 100px;
        font-size: 15px;
        margin-top: 6px;
    }
}.pop-bg .pop-inner h3 {
     font-size: 24px;
     line-height: 1.5;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner h3 {
        font-size: 18px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner h3 {
        font-size: 18px;
    }
}.pop-bg .pop-inner .mt--40 {
     margin-top: 40px;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mt--40 {
        margin-top: 20px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mt--40 {
        margin-top: 20px;
    }
}.pop-bg .pop-inner .mt--20 {
     margin-top: 20px;
 }
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner .mt--20 {
        margin-top: 12px;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .pop-inner .mt--20 {
        margin-top: 12px;
    }
}.pop-bg .pop-inner form .form-group label {
     font-weight: 600;
 }
.pop-bg .pop-inner form .form-group label.label_dk {
    font-weight: normal;
}
.pop-bg .pop-inner form .form-group .label--err {
    color: red;
    font-size: 15px;
    margin-top: 3px;
    display: block;
}
@media only screen and (max-width: 640px) {
    .pop-bg .pop-inner form .form-group .label--err {
        font-size: 13px;
    }
}@media only screen and (max-width: 640px) {
    .pop-bg .table td, .pop-bg .table th {
        font-size: 13px;
        padding: 5px !important;
    }
}@media only screen and (max-width: 900px)and (max-height: 500px)and (orientation:landscape) {
    .pop-bg .table td, .pop-bg .table th {
        font-size: 13px;
        padding: 5px !important;
    }
}.pop-bg .table th {
     font-weight: bold;
 }
.pyro>.before, .pyro>.after {
    position: absolute;
    width: 7px;
    height: 7px;
    pointer-events: none;
    z-index: 99999999;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #9f0, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #0df, -152px -380.66667px #00ffd0, -50px -37.66667px #0fd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #f60, 97px -325.66667px #f06, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #0bf, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #09f, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #08f, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #f60, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #0f3, 100px -6.66667px #ff008c;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro>.after {
    animation-delay: 1.25s, 1.25s, 1.25s;
    animation-duration: 1.25s, 1.25s, 6.25s;
}
@keyframes bang {
    from {
        box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
    }
}@keyframes gravity {
     to {
         transform: translateY(200px);
         -moz-transform: translateY(200px);
         -webkit-transform: translateY(200px);
         -o-transform: translateY(200px);
         -ms-transform: translateY(200px);
         opacity: 0;
     }
 }@keyframes position {
      0%, 19.9% {
          margin-top: 10%;
          margin-left: 40%}
      20%, 39.9% {
          margin-top: 40%;
          margin-left: 30%}
      40%, 59.9% {
          margin-top: 20%;
          margin-left: 70%}
      60%, 79.9% {
          margin-top: 30%;
          margin-left: 20%}
      80%, 99.9% {
          margin-top: 30%;
          margin-left: 80%}
  }@keyframes light {
       0% {
           border-radius: 0%}
       50% {
           border-radius: 40%}
       100% {
           border-radius: 0%}
   }.fixbox {
        width: 286px;
        height: 467px;
        background-size: 100% 100%;
        position: fixed;
        right: 0;
        top: 50%;
        z-index: 50;
        margin-top: -204px;
        padding-top: 246px;
        padding-right: 11px;
        text-align: center;
    }
@media only screen and (max-width: 1024px) {
    .fixbox {
        display: none !important;
    }
}.fixbox img {
     width: 140px;
     display: block;
     position: absolute;
     top: 83px;
     left: 67px;
 }
.fixbox .controlDownload {
    display: block;
    width: 169px;
    height: 49px;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 10px;
    border: 1px solid #fff;
}
.fixbox .link_support {
    display: block;
    width: 151px;
    height: 38px;
    background-position: -237px -170px;
    margin: 10px auto 0;
}
.fixbox .toggle {
    display: block;
    background: url(../../.././content/template/S89/images/landing3/btn-toggle.jpg) 0/100% no-repeat;
    width: 25px;
    height: 40px;
    position: absolute;
    left: 12px;
    top: 32%;
    transform: rotate(180deg);
    cursor: pointer;
}
.fixbox .toggle.open {
    transform: rotate(0deg);
}
@keyframes zoomEffect2 {
    0% {
        transform: scale(1,  1);
    }
    25% {
        transform: scale(1.02,  1.02);
    }
    50% {
        transform: scale(1,  1);
    }
    75% {
        transform: scale(1.02,  1.02);
    }
    100% {
        transform: scale(1,  1);
    }
}@keyframes lenxuong {
     0% {
         transform: translateX(0px) translateY(5px);
     }
     50% {
         transform: translateX(0px) translateY(0);
     }
     100% {
         transform: translateX(0px) translateY(5px);
     }
 }@keyframes lenxuong1 {
      0% {
          transform: translateX(0px) translateY(5px) rotate(-18deg);
      }
      50% {
          transform: translateX(0px) translateY(0) rotate(-18deg);
      }
      100% {
          transform: translateX(0px) translateY(5px) rotate(-18deg);
      }
  }@keyframes lenxuong2 {
       0% {
           transform: translateX(0px) translateY(5px) rotate(0);
       }
       50% {
           transform: translateX(0px) translateY(0) rotate(0);
       }
       100% {
           transform: translateX(0px) translateY(5px) rotate(0);
       }
   }@keyframes lenxuong3 {
        0% {
            transform: translateX(0px) translateY(5px) rotate(2deg);
        }
        50% {
            transform: translateX(0px) translateY(0) rotate(2deg);
        }
        100% {
            transform: translateX(0px) translateY(5px) rotate(2deg);
        }
    }@keyframes lenxuong4 {
         0% {
             transform: translateX(0px) translateY(5px) rotate(11deg);
         }
         50% {
             transform: translateX(0px) translateY(0) rotate(11deg);
         }
         100% {
             transform: translateX(0px) translateY(5px) rotate(11deg);
         }
     }@keyframes lenxuong5 {
          0% {
              transform: translateX(0px) translateY(5px) rotate(27deg);
          }
          50% {
              transform: translateX(0px) translateY(0) rotate(27deg);
          }
          100% {
              transform: translateX(0px) translateY(5px) rotate(27deg);
          }
      }@keyframes lenxuong6 {
           0% {
               transform: translateX(0px) translateY(5px) rotate(-11deg);
           }
           50% {
               transform: translateX(0px) translateY(0) rotate(-11deg);
           }
           100% {
               transform: translateX(0px) translateY(5px) rotate(-11deg);
           }
       }@keyframes swing {
            0% {
                transform: rotateZ(6deg);
            }
            100% {
                transform: rotateZ(-12deg);
            }
        }@keyframes zoomOpacity {
             from {
                 opacity: 0;
                 transform: scale(0.5);
             }
             to {
                 opacity: 1;
                 transform: scale(1);
             }
         }@keyframes moveafter {
              0% {
                  top: 100%;
                  left: 100%}
              50% {
                  top: -100%;
                  left: -100%}
              100% {
                  top: -100%;
                  left: -100%}
          }@keyframes guidCircle {
               0%, 20% {
                   opacity: 0;
                   transform: scale(0,  0);
               }
               50%, 80% {
                   opacity: 1;
                   transform: scale(1,  1);
               }
               100% {
                   opacity: 0;
                   transform: scale(1,  1);
               }
           }@keyframes shou {
                0%, 100%, 25%, 50% {
                    transform: translateY(0);
                }
                12.5%, 37.5% {
                    transform: translateY(0.3125rem);
                }
            }@keyframes swing {
                 0% {
                     transform: rotateZ(6deg);
                 }
                 100% {
                     transform: rotateZ(-12deg);
                 }
             }@keyframes fadeLeft {
                  0% {
                      opacity: 0;
                  }
                  100% {
                      opacity: 1;
                  }
              }@keyframes move {
                   0%, 100% {
                       transform: translate(220px,  0);
                   }
                   25%, 75% {
                       transform: translate(0,  0);
                   }
                   50% {
                       transform: translate(-220px,  0);
                   }
               }@keyframes rotateCircle {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }@keyframes rotate {
                     to {
                         transform: rotate(-360deg);
                     }
                 }@keyframes ballMove_0 {
                      0%, to {
                          transform: rotate(-12deg) translate(0);
                      }
                      25% {
                          transform: rotate(-12deg) translate(2rem,  -2rem);
                      }
                      50% {
                          transform: rotate(-12deg) translate(0.13333438rem,  -4.66666563rem);
                      }
                      75% {
                          transform: rotate(-12deg) translate(-2.66666562rem,  -2rem);
                      }
                  }@keyframes ballMove_1 {
                       0%, to {
                           transform: rotate(-2deg) translate(0);
                       }
                       25% {
                           transform: rotate(-2deg) translate(-1.6rem,  -2rem);
                       }
                       50% {
                           transform: rotate(-2deg) translate(1.33333438rem,  -3.33333438rem);
                       }
                       75% {
                           transform: rotate(-2deg) translate(2rem,  0.66666563rem);
                       }
                   }@keyframes ballMove_2 {
                        0%, to {
                            transform: rotate(-10deg) translate(0);
                        }
                        25% {
                            transform: rotate(-10deg) translate(-0.8rem,  -2rem);
                        }
                        50% {
                            transform: rotate(-10deg) translate(1.33333438rem,  -4rem);
                        }
                        75% {
                            transform: rotate(-10deg) translate(2.66666562rem);
                        }
                    }@keyframes ballMove_3 {
                         0%, to {
                             transform: rotate(10deg) translate(0);
                         }
                         25% {
                             transform: rotate(10deg) translate(0.13333438rem,  -2.66666562rem);
                         }
                         50% {
                             transform: rotate(10deg) translate(-4rem,  -2.93333438rem);
                         }
                         75% {
                             transform: rotate(10deg) translate(-2.66666562rem);
                         }
                     }@keyframes ballMove_4 {
                          0%, to {
                              transform: rotate(-10deg) translate(0);
                          }
                          25% {
                              transform: rotate(-10deg) translate(-0.4rem,  -2.66666562rem);
                          }
                          50% {
                              transform: rotate(-10deg) translate(-3.46666562rem,  -3.2rem);
                          }
                          75% {
                              transform: rotate(-10deg) translate(-3.73333437rem,  0.66666563rem);
                          }
                      }@keyframes ballMove_5 {
                           0%, to {
                               transform: rotate(-10deg) translate(0);
                           }
                           25% {
                               transform: rotate(-10deg) translate(-2.4rem,  -0.4rem);
                           }
                           50% {
                               transform: rotate(-10deg) translate(-1.06666562rem,  -3.46666562rem);
                           }
                           75% {
                               transform: rotate(-10deg) translate(2.13333438rem,  -3.2rem);
                           }
                       }@keyframes ballMove_6 {
                            0%, to {
                                transform: rotate(4deg) translate(0);
                            }
                            25% {
                                transform: rotate(4deg) translate(0.26666563rem,  -2.66666562rem);
                            }
                            50% {
                                transform: rotate(4deg) translate(3.06666563rem,  -3.2rem);
                            }
                            75% {
                                transform: rotate(4deg) translate(3.73333437rem,  -0.26666562rem);
                            }
                        }@keyframes ballMove_7 {
                             0%, to {
                                 transform: rotate(2deg) translate(0);
                             }
                             25% {
                                 transform: rotate(2deg) translate(-2.13333438rem,  -2.66666562rem);
                             }
                             50% {
                                 transform: rotate(2deg) translate(1.86666563rem,  -4rem);
                             }
                             75% {
                                 transform: rotate(2deg) translate(2.66666562rem,  -3.2rem);
                             }
                         }@keyframes ballMove_8 {
                              0%, to {
                                  transform: rotate(-8deg) translate(0);
                              }
                              25% {
                                  transform: rotate(-8deg) translate(-2.13333438rem,  1.33333438rem);
                              }
                              50% {
                                  transform: rotate(-8deg) translate(-2.4rem,  -1.33333437rem);
                              }
                              75% {
                                  transform: rotate(-8deg) translate(2.13333438rem,  -2.13333438rem);
                              }
                          }@keyframes ballMove_9 {
                               0%, to {
                                   transform: rotate(-2deg) translate(0);
                               }
                               25% {
                                   transform: rotate(-2deg) translate(-2.66666562rem,  0.66666563rem);
                               }
                               50% {
                                   transform: rotate(-2deg) translate(-2.4rem,  -2.8rem);
                               }
                               75% {
                                   transform: rotate(-2deg) translate(0.8rem,  -2.13333438rem);
                               }
                           }@keyframes ball_0 {
                                0%, to {
                                    transform: rotate(-12deg) translate(0);
                                }
                                25% {
                                    transform: rotate(-12deg) translate(0.13333438rem,  0.13333438rem);
                                }
                                75% {
                                    transform: rotate(-12deg) translate(0.16rem,  -0.13333437rem);
                                }
                            }@keyframes ball_1 {
                                 0%, 50%, to {
                                     transform: rotate(2deg) translate(0);
                                 }
                                 25% {
                                     transform: rotate(2deg) translate(0.2rem,  0.2rem);
                                 }
                                 75% {
                                     transform: rotate(2deg) translate(-0.2rem,  0.2rem);
                                 }
                             }@keyframes ball_2 {
                                  0%, to {
                                      transform: rotate(-10deg) translate(0);
                                  }
                                  50% {
                                      transform: rotate(-10deg) translate(0.16rem,  -0.16rem);
                                  }
                              }@keyframes ball_3 {
                                   0%, 50%, to {
                                       transform: rotate(10deg) translate(0);
                                   }
                                   25% {
                                       transform: rotate(10deg) translate(0.05333438rem,  0.05333438rem);
                                   }
                                   75% {
                                       transform: rotate(10deg) translate(-0.05333437rem,  -0.05333437rem);
                                   }
                               }@keyframes ball_4 {
                                    0%, to {
                                        transform: rotate(-10deg) translate(0);
                                    }
                                    50% {
                                        transform: rotate(-10deg) translate(0.10666563rem,  -0.02666562rem);
                                    }
                                }@keyframes ball_5 {
                                     0%, to {
                                         transform: rotate(4deg) translate(0);
                                     }
                                     50% {
                                         transform: rotate(4deg) translate(-0.16rem,  -0.02666562rem);
                                     }
                                 }@keyframes ball_6 {
                                      0%, to {
                                          transform: rotate(4deg) translate(0);
                                      }
                                      50% {
                                          transform: rotate(4deg) translate(-1rem,  -0.8rem);
                                      }
                                  }@keyframes ball_7 {
                                       0%, to {
                                           transform: rotate(2deg) translate(0);
                                       }
                                       50% {
                                           transform: rotate(2deg) translate(-0.13333437rem,  -0.16rem);
                                       }
                                   }@keyframes ball_8 {
                                        0%, to {
                                            transform: rotate(-8deg) translate(0);
                                        }
                                        50% {
                                            transform: rotate(-8deg) translate(-0.08rem,  0.08rem);
                                        }
                                    }@keyframes ball_9 {
                                         0%, to {
                                             transform: rotate(-2deg) translate(0);
                                         }
                                         50% {
                                             transform: rotate(-2deg) translate(0.08rem,  -0.08rem);
                                         }
                                     }@keyframes domShow {
                                          0% {
                                              opacity: 0;
                                          }
                                          to {
                                              opacity: 1;
                                          }
                                      }@keyframes lightShow {
                                           0% {
                                               opacity: 1;
                                               transform: rotate(0deg);
                                           }
                                           to {
                                               opacity: 1;
                                               transform: rotate(1turn);
                                           }
                                       }@keyframes outPutBall {
                                            0% {
                                                transform: translate(0) rotate(0deg) scale(1);
                                            }
                                            40% {
                                                transform: translate(0.8rem,  1.6rem) rotate(120deg) scale(1);
                                            }
                                            42% {
                                                transform: translate(0.8rem,  1.6rem) rotate(120deg) scale(1);
                                                z-index: 30;
                                            }
                                            to {
                                                transform: translate(-1.2rem,  -2.13333438rem) rotate(1turn) scale(2);
                                                z-index: 30;
                                            }
                                        }