/* line 2, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/neat-compass-1.6.0/stylesheets/neat/grid/_grid.scss */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* line 5, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
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;
    font-family: 'Oswald', sans-serif;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    font-family: 'Oswald', sans-serif;
}
/* line 22, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
html {
    line-height: 1;
    font-family: 'Oswald', sans-serif;
}

/* line 24, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
    list-style: none;
}

/* line 26, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* line 28, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

/* line 30, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
    quotes: none;
}
    /* line 103, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
    q:before, q:after, blockquote:before, blockquote:after {
        content: "";
        content: none;
    }

/* line 32, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
a img {
    border: none;
}

/* line 116, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

/* line 328, layout/*.png */
.layout-sprite, .layout-Timi_logo, .layout-activision, .layout-app-store, .layout-bt-android-right, .layout-bt-dangky-mobile, .layout-bt-dangky, .layout-bt-ios-right, .layout-bt-napthe-right, .layout-close-right, .layout-coming-footer, .layout-des-coming, .layout-fullscreen, .layout-gg-play, .layout-home, .layout-left-arrow-yellow, .layout-left-hov, .layout-left-mob, .layout-left, .layout-mainsite-footer, .layout-mainsite-footer2, .layout-news-arrow-hov, .layout-news-arrow, .layout-open-right, .layout-play-mobile, .layout-right-arrow-yellow, .layout-right-hov, .layout-right-mob, .layout-right, .layout-search-coming, .layout-vector-circle-next, .layout-vector-circle-pre, .layout-vector-circle-white, .layout-vector-circle, .layout-vng-game, .layout-zoom-in, .layout-zoom-out, #outer main section#section1 .wrapper .btn-dk-tai-truoc-mobile, #outer main section#section1 .wrapper .info-game .btn-container .link-img.dk-tai-truoc, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-button-next, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-button-next:hover, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-button-prev, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-button-prev:hover, #outer main section#section4 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-in, #outer main section#section4 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-out, #outer main section#section4 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-full, #outer main section#section4 .wrapper .swiper-button-next, #outer main section#section4 .wrapper .swiper-button-next:hover, #outer main section#section4 .wrapper .swiper-button-prev, #outer main section#section4 .wrapper .swiper-button-prev:hover, #outer main section#section5 .wrapper .gallery-container .swiper-next-f5, #outer main section#section5 .wrapper .gallery-container .swiper-next-f5:hover, #outer main section#section5 .wrapper .gallery-container .swiper-prev-f5, #outer main section#section5 .wrapper .gallery-container .swiper-prev-f5:hover, #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:after, #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:hover:after, .footer .logo-top, .content-outer section .list-news .tab__detail ul li h3:after, .content-outer section .list-news .tab__detail ul li h3:hover:after, .content-outer section .related-news ul li .info-news > a:hover:after, .content-outer section .related-news ul li .info-news > a:after, .sidebar-right .close, .sidebar-right .open, .sidebar-right .bt_ios, .sidebar-right .bt_ios.off, .sidebar-right .bt_android, .sidebar-right .bt_android.off, .sidebar-right .bt_napthe, .sidebar-right .bt_napthe.off {
    background-image: url('../static/background/layout-s7c8a26958e.png');
    background-repeat: no-repeat;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-Timi_logo {
    background-position: -551px -140px;
    height: 42px;
    width: 107px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-activision {
    background-position: -730px -40px;
    height: 35px;
    width: 147px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-app-store {
    background-position: -800px -100px;
    height: 40px;
    width: 137px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-bt-android-right {
    background-position: -237px -140px;
    height: 42px;
    width: 157px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-bt-dangky-mobile {
    background-position: -182px -570px;
    height: 66px;
    width: 240px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-bt-dangky {
    background-position: -450px -291px;
    height: 111px;
    width: 404px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-bt-ios-right {
    background-position: -394px -140px;
    height: 42px;
    width: 157px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-bt-napthe-right {
    background-position: 0 -570px;
    height: 59px;
    width: 182px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-close-right {
    background-position: -892px 0;
    height: 40px;
    width: 40px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-coming-footer {
    background-position: 0 -225px;
    height: 42px;
    width: 592px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-des-coming {
    background-position: 0 -40px;
    height: 34px;
    width: 646px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-fullscreen {
    background-position: -823px 0;
    height: 29px;
    width: 29px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-gg-play {
    background-position: 0 -291px;
    height: 41px;
    width: 138px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-home {
    background-position: -877px -40px;
    height: 60px;
    width: 60px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-left-arrow-yellow {
    background-position: -664px -40px;
    height: 9px;
    width: 18px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-left-hov {
    background-position: -718px -140px;
    height: 66px;
    width: 60px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-left-mob {
    background-position: 0 -140px;
    height: 28px;
    width: 28px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-left {
    background-position: -858px -225px;
    height: 66px;
    width: 60px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-mainsite-footer {
    background-position: 0 -486px;
    height: 84px;
    width: 959px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-mainsite-footer2 {
    background-position: 0 -402px;
    height: 84px;
    width: 959px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-news-arrow-hov {
    background-position: -682px -40px;
    height: 13px;
    width: 24px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-news-arrow {
    background-position: -706px -40px;
    height: 13px;
    width: 24px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-open-right {
    background-position: -852px 0;
    height: 40px;
    width: 40px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-play-mobile {
    background-position: -838px -140px;
    height: 85px;
    width: 81px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-right-arrow-yellow {
    background-position: -646px -40px;
    height: 9px;
    width: 18px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-right-hov {
    background-position: -778px -140px;
    height: 66px;
    width: 60px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-right-mob {
    background-position: -772px -100px;
    height: 28px;
    width: 28px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-right {
    background-position: -658px -140px;
    height: 66px;
    width: 60px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-search-coming {
    background-position: -592px -225px;
    height: 41px;
    width: 266px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-vector-circle-next {
    background-position: -138px -291px;
    height: 75px;
    width: 156px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-vector-circle-pre {
    background-position: -294px -291px;
    height: 75px;
    width: 156px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-vector-circle-white {
    background-position: 0 -100px;
    height: 36px;
    width: 772px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-vector-circle {
    background-position: 0 0;
    height: 28px;
    width: 764px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-vng-game {
    background-position: -28px -140px;
    height: 29px;
    width: 209px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-zoom-in {
    background-position: -794px 0;
    height: 29px;
    width: 29px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.1.0.alpha.3/stylesheets/compass/utilities/sprites/_base.scss */
.layout-zoom-out {
    background-position: -764px 0;
    height: 29px;
    width: 30px;
}

/* misc styles */
@font-face {
    src: url("../fonts/ProximaNova-Regular.otf") format("woff2");
    font-family: "ProximaNova";
}

@font-face {
    src: url("../fonts/Proxima Nova Thin.otf") format("woff2");
    font-family: "ProximaNova Thin";
}
/* =========== */
/* color styles */
/* ======navigation top===== */
/*Common Tab*/
/*list post*/
/*subpage post*/
/***paging*****/
/*hot event subpage*/
/* CSS CONTENT */
/* title detail page*/
/* ----- TABLE STYLE ----- */
/* =========== */
/* form elements */
/* =========== */
/* ----- UserInfo ----- */
/* ----- Popup ----- */
/* off-canvas menu */
/* =========== */
/* line 22, ../sass/layout/screen.scss */
body {
    width: 100%;
    height: 100%;
    font: 14px arial, "Roboto", sans-serif;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    /* prevent safari in ios auto scale font-size */
    background-image: #0a050b;
}

/* line 32, ../sass/layout/screen.scss */
.inactive, .off {
    cursor: not-allowed;
    filter: grayscale(100%) brightness(0.5) !important;
    pointer-events: none;
}
    /* line 37, ../sass/layout/screen.scss */
    .inactive:hover, .off:hover {
        cursor: not-allowed;
        pointer-events: none;
        filter: grayscale(100%) brightness(0.5) !important;
    }

/* line 44, ../sass/layout/screen.scss */
.hidden {
    display: none !important;
}

/* line 48, ../sass/layout/screen.scss */
.shown {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    -webkit-transform: scale3d(1, 1, 1) !important;
}

/* line 56, ../sass/layout/screen.scss */
.Rating {
    top: 60px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 56, ../sass/layout/screen.scss */
    .Rating {
        display: none;
    }
}

/* line 63, ../sass/layout/screen.scss */
.MRating {
    width: 90px;
    height: 40px;
    display: block;
    position: fixed;
    top: 10px;
    left: 60px;
    z-index: 10;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) {
    /* line 63, ../sass/layout/screen.scss */
    .MRating {
        display: none;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 63, ../sass/layout/screen.scss */
    .MRating {
        display: none;
    }
}

/* line 82, ../sass/layout/screen.scss */
.wrapper {
    display: block;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
    /* line 89, ../sass/layout/screen.scss */
    .wrapper::after {
        display: block;
        content: "";
        clear: both;
    }

/* line 97, ../sass/layout/screen.scss */
#outer {
    display: block;
}
    /* line 99, ../sass/layout/screen.scss */
    #outer main {
        display: block;
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 2;
    }
        /* line 108, ../sass/layout/screen.scss */
        #outer main section {
            display: block;
            position: relative;
        }

/* line 120, ../sass/layout/screen.scss */
.popup01 {
    width: 995px;
    height: 767px;
    background-image: url('../static/background/bg-popup2.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 14% 7% 5% 7%;
    display: none;
}

@media screen and (max-height: 1024px) {
    /* line 120, ../sass/layout/screen.scss */
    .popup01 {
        width: 700px;
        height: 540px;
    }
}

@media screen and (max-height: 414px) {
    /* line 120, ../sass/layout/screen.scss */
    .popup01 {
        width: 485px;
        height: 374px;
    }
}

@media screen and (max-height: 375px) {
    /* line 120, ../sass/layout/screen.scss */
    .popup01 {
        width: 420px;
        height: 332px;
    }
}

@media screen and (max-height: 320px) {
    /* line 120, ../sass/layout/screen.scss */
    .popup01 {
        width: 368px;
        height: 278px;
    }
}
/* line 148, ../sass/layout/screen.scss */
.popup01 .popupWrap {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

/* line 160, ../sass/layout/screen.scss */
.fancyImage-skin, .fancyChar-skin, .fancyPopup-skin {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
    /* line 165, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-close, .fancyChar-skin .fancybox-close, .fancyPopup-skin .fancybox-close {
        background-image: url('../static/background/close.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 56px;
        height: 56px;
        top: 3%;
        right: 3%;
    }

@media screen and (max-width: 1100px) {
    /* line 165, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-close, .fancyChar-skin .fancybox-close, .fancyPopup-skin .fancybox-close {
        width: 36px;
        height: 36px;
    }
}

@media screen and (max-width: 850px) {
    /* line 165, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-close, .fancyChar-skin .fancybox-close, .fancyPopup-skin .fancybox-close {
        width: 26px;
        height: 26px;
    }
}

@media screen and (max-width: 600px) {
    /* line 165, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-close, .fancyChar-skin .fancybox-close, .fancyPopup-skin .fancybox-close {
        width: 16px;
        height: 16px;
    }
}
/* line 186, ../sass/layout/screen.scss */
.fancyImage-skin .fancybox-next span, .fancyImage-skin .fancybox-prev span, .fancyChar-skin .fancybox-next span, .fancyChar-skin .fancybox-prev span, .fancyPopup-skin .fancybox-next span, .fancyPopup-skin .fancybox-prev span {
    width: 115px;
    height: 170px;
    margin-top: -33%;
    visibility: visible;
}

@media screen and (max-width: 1100px) {
    /* line 186, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-next span, .fancyImage-skin .fancybox-prev span, .fancyChar-skin .fancybox-next span, .fancyChar-skin .fancybox-prev span, .fancyPopup-skin .fancybox-next span, .fancyPopup-skin .fancybox-prev span {
        width: 76px;
        height: 146px;
    }
}

@media screen and (max-width: 850px) {
    /* line 186, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-next span, .fancyImage-skin .fancybox-prev span, .fancyChar-skin .fancybox-next span, .fancyChar-skin .fancybox-prev span, .fancyPopup-skin .fancybox-next span, .fancyPopup-skin .fancybox-prev span {
        width: 50px;
        height: 86px;
    }
}

@media screen and (max-width: 600px) {
    /* line 186, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-next span, .fancyImage-skin .fancybox-prev span, .fancyChar-skin .fancybox-next span, .fancyChar-skin .fancybox-prev span, .fancyPopup-skin .fancybox-next span, .fancyPopup-skin .fancybox-prev span {
        width: 18px;
        height: 50px;
    }
}
/* line 206, ../sass/layout/screen.scss */
.fancyImage-skin .fancybox-next span, .fancyChar-skin .fancybox-next span, .fancyPopup-skin .fancybox-next span {
    background-image: url('../static/background/next.png');
    background-position: center center;
    background-size: cover;
    margin-right: -12%;
}
    /* line 211, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-next span:hover, .fancyChar-skin .fancybox-next span:hover, .fancyPopup-skin .fancybox-next span:hover {
        background-image: url('../static/background/next-hov.png');
    }
/* line 217, ../sass/layout/screen.scss */
.fancyImage-skin .fancybox-prev span, .fancyChar-skin .fancybox-prev span, .fancyPopup-skin .fancybox-prev span {
    background-image: url('../static/background/back.png');
    background-position: center center;
    background-size: cover;
    margin-left: -12%;
}
    /* line 222, ../sass/layout/screen.scss */
    .fancyImage-skin .fancybox-prev span:hover, .fancyChar-skin .fancybox-prev span:hover, .fancyPopup-skin .fancybox-prev span:hover {
        background-image: url('../static/background/back-hov.png');
    }

/* line 229, ../sass/layout/screen.scss */
.fancyImage-skin {
    background: #66401f;
    padding: 10% 10px 10px 10px !important;
    box-sizing: border-box;
}

/* line 235, ../sass/layout/screen.scss */
.fancyChar-skin {
    background: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
}

/* line 242, ../sass/layout/screen.scss */
.fancyPopup-skin {
    background: none;
    box-sizing: border-box;
}

/* line 246, ../sass/layout/screen.scss */
.fancybox-title {
    display: none !important;
}

/* line 252, ../sass/layout/screen.scss */
.overlayFancyClip {
    display: block;
    width: 14%;
    height: 14%;
    z-index: 9999;
    position: absolute;
    top: 38%;
    left: 22%;
}

/* line 2, ../sass/content/_content-css.scss */
.article-detail {
    font-size: 16px;
    line-height: 25px;
    color: #4a4a4c;
    font-family: arial, "Roboto", sans-serif;
    padding: 0 0 30px 0;
    /* for table */
}
    /* line 8, ../sass/content/_content-css.scss */
    .article-detail .post__title {
        margin-bottom: 20px;
        text-align: left;
        border-bottom: 1px solid #c7c6cb;
    }
        /* line 12, ../sass/content/_content-css.scss */
        .article-detail .post__title .ptitle {
            font-weight: bold;
            font-size: 20px;
            color: #292d49;
            padding: 0px 0 5px 0;
        }
        /* line 18, ../sass/content/_content-css.scss */
        .article-detail .post__title .ptime {
            font-size: 14px;
            color: #949496;
            font-weight: normal;
            margin: 0;
            padding: 0;
        }
    /* line 28, ../sass/content/_content-css.scss */
    .article-detail a {
        color: #0090ff;
        text-decoration: none;
    }
        /* line 31, ../sass/content/_content-css.scss */
        .article-detail a:hover {
            color: #ed4f0e;
            text-decoration: underline;
        }
    /* line 38, ../sass/content/_content-css.scss */
    .article-detail p {
        padding: 5px 0;
    }
        /* line 42, ../sass/content/_content-css.scss */
        .article-detail p.center img, .article-detail p.TextCenter img {
            display: block;
            text-align: center;
            margin: 0px auto;
        }
    /* line 49, ../sass/content/_content-css.scss */
    .article-detail .FirstChar {
        padding: 4px 4px 0 0;
        line-height: 30px;
        font-size: 40px;
        float: left;
    }
    /* line 56, ../sass/content/_content-css.scss */
    .article-detail .center, .article-detail .TextCenter {
        text-align: center;
    }
    /* line 59, ../sass/content/_content-css.scss */
    .article-detail .strong, .article-detail strong {
        font-weight: bold;
        color: black;
    }
    /* line 63, ../sass/content/_content-css.scss */
    .article-detail h2 {
        font-weight: bold;
        font-size: 20px;
        line-height: 30px;
        color: black;
    }
    /* line 69, ../sass/content/_content-css.scss */
    .article-detail .strong02, .article-detail .Strong02 {
        font-weight: bold;
        color: #cf1d03;
    }
    /* line 76, ../sass/content/_content-css.scss */
    .article-detail img {
        max-width: 100%;
        height: auto;
        /* breakpoint: smartphone | desktop; */
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 76, ../sass/content/_content-css.scss */
    .article-detail img {
        width: 100%;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 76, ../sass/content/_content-css.scss */
    .article-detail img {
        width: 100%;
    }
}
/* line 85, ../sass/content/_content-css.scss */
.article-detail img.BorderImg, .article-detail img.border {
    background-color: #c3c4c8;
    border: 1px solid #c3c4c8;
    padding: 1px;
}
/* line 91, ../sass/content/_content-css.scss */
.article-detail img.NoBorderImg, .article-detail img.no-boder {
    border: none;
    background: none;
    padding: 0;
}
/* line 99, ../sass/content/_content-css.scss */
.article-detail img.ImgLeft, .article-detail img.left {
    float: left;
    margin: 5px 10px 5px 0;
}
/* line 104, ../sass/content/_content-css.scss */
.article-detail img.ImgRight, .article-detail img.right {
    float: right;
    margin: 5px 0 5px 10px;
}
/* line 109, ../sass/content/_content-css.scss */
.article-detail img ~ .center, .article-detail img.ImgCenter, .article-detail img.center {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    color: #424242;
    font-style: italic;
}
/* line 124, ../sass/content/_content-css.scss */
.article-detail ul#tabHeader {
    width: 100%;
    clear: both;
    margin: 10px 0;
    display: block;
    background: transparent;
    border-bottom: red;
}
    /* line 131, ../sass/content/_content-css.scss */
    .article-detail ul#tabHeader ~ .tab__detail {
        display: none;
    }
    /* line 134, ../sass/content/_content-css.scss */
    .article-detail ul#tabHeader:after {
        display: block;
        clear: both;
        content: "";
    }
    /* line 139, ../sass/content/_content-css.scss */
    .article-detail ul#tabHeader > li {
        float: left;
        white-space: nowrap;
    }
        /* line 142, ../sass/content/_content-css.scss */
        .article-detail ul#tabHeader > li > a {
            display: block;
            font: 14px/14px normal tahoma, arial, sans-serif;
            font-weight: bold;
            text-align: center;
            text-decoration: none;
            padding: 10px 10px;
            color: #4a4a4c;
            background: #0090ff;
            border: #c3c4c8;
        }
            /* line 152, ../sass/content/_content-css.scss */
            .article-detail ul#tabHeader > li > a:hover:not(.off), .article-detail ul#tabHeader > li > a.active:not(.off) {
                color: #4a4a4c;
                background: #ed4f0e;
                border: #c3c4c8;
            }
/* line 163, ../sass/content/_content-css.scss */
.article-detail ul.anchor-link, .article-detail ul.AnchorLink {
    display: block;
    clear: both;
    min-height: 50px;
    overflow: hidden;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #c3c4c8;
}
    /* line 171, ../sass/content/_content-css.scss */
    .article-detail ul.anchor-link > li, .article-detail ul.AnchorLink > li {
        width: 50%;
        float: left;
        padding: 0 20px 0 10px;
        background-image: url("../static/background/article/anchorlink.gif");
        background-position: 0 14px;
        background-repeat: no-repeat;
        /* breakpoint: smartphone | desktop; */
    }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 171, ../sass/content/_content-css.scss */
    .article-detail ul.anchor-link > li, .article-detail ul.AnchorLink > li {
        width: 100%;
    }
}
/* line 179, ../sass/content/_content-css.scss */
.article-detail ul.anchor-link > li > a, .article-detail ul.AnchorLink > li > a {
    font-weight: bold;
    color: #0090ff;
    text-decoration: none;
}
    /* line 183, ../sass/content/_content-css.scss */
    .article-detail ul.anchor-link > li > a:hover, .article-detail ul.anchor-link > li > a.active, .article-detail ul.anchor-link > li > a.Active, .article-detail ul.AnchorLink > li > a:hover, .article-detail ul.AnchorLink > li > a.active, .article-detail ul.AnchorLink > li > a.Active {
        color: #ed4f0e;
        text-decoration: underline;
    }
/* line 192, ../sass/content/_content-css.scss */
.article-detail ul {
    list-style-position: inside;
    clear: both;
}
    /* line 195, ../sass/content/_content-css.scss */
    .article-detail ul.icon, .article-detail ul.Icon, .article-detail ul.disc, .article-detail ul.Disc, .article-detail ul.dash, .article-detail ul.Dash, .article-detail ul.decimal, .article-detail ul.Decimal, .article-detail ul.UpperAlpha, .article-detail ul.upper-alpha, .article-detail ul.lower-alpha, .article-detail ul.LowerCase {
        margin: 10px 0 0px 0px;
    }
        /* line 202, ../sass/content/_content-css.scss */
        .article-detail ul.icon li, .article-detail ul.Icon li, .article-detail ul.disc li, .article-detail ul.Disc li, .article-detail ul.dash li, .article-detail ul.Dash li, .article-detail ul.decimal li, .article-detail ul.Decimal li, .article-detail ul.UpperAlpha li, .article-detail ul.upper-alpha li, .article-detail ul.lower-alpha li, .article-detail ul.LowerCase li {
            list-style-type: none;
            text-align: justify;
        }
            /* line 205, ../sass/content/_content-css.scss */
            .article-detail ul.icon li ul, .article-detail ul.Icon li ul, .article-detail ul.disc li ul, .article-detail ul.Disc li ul, .article-detail ul.dash li ul, .article-detail ul.Dash li ul, .article-detail ul.decimal li ul, .article-detail ul.Decimal li ul, .article-detail ul.UpperAlpha li ul, .article-detail ul.upper-alpha li ul, .article-detail ul.lower-alpha li ul, .article-detail ul.LowerCase li ul {
                margin: 0 0 0 18px;
            }
        /* line 210, ../sass/content/_content-css.scss */
        .article-detail ul.icon li, .article-detail ul.Icon li {
            background-image: url('../static/background/article/icon.gif');
            background-position: 0 8px;
            background-repeat: no-repeat;
            text-indent: 14px;
        }
        /* line 215, ../sass/content/_content-css.scss */
        .article-detail ul.disc li, .article-detail ul.Disc li {
            text-indent: 10px;
            background-image: url('../static/background/article/icon_disc.gif');
            background-position: 0 10px;
            background-repeat: no-repeat;
        }
        /* line 220, ../sass/content/_content-css.scss */
        .article-detail ul.dash li, .article-detail ul.Dash li {
            text-indent: 10px;
            background-image: url('../static/background/article/icon_dash.gif');
            background-position: 0 11px;
            background-repeat: no-repeat;
        }
        /* line 225, ../sass/content/_content-css.scss */
        .article-detail ul.decimal li, .article-detail ul.Decimal li {
            list-style-type: decimal;
        }
        /* line 228, ../sass/content/_content-css.scss */
        .article-detail ul.UpperAlpha li, .article-detail ul.upper-alpha li {
            list-style-type: upper-alpha;
        }
        /* line 231, ../sass/content/_content-css.scss */
        .article-detail ul.lower-alpha li, .article-detail ul.LowerCase li {
            list-style-type: lower-alpha;
        }
/* line 237, ../sass/content/_content-css.scss */
.article-detail ol.Icon ol.Disc {
    margin-left: 27px;
}
    /* line 240, ../sass/content/_content-css.scss */
    .article-detail ol.Icon ol.Disc ol.Dash {
        margin-left: 24px;
    }
/* line 245, ../sass/content/_content-css.scss */
.article-detail ol li {
    margin-bottom: 10px;
    line-height: 30px;
}
/* line 250, ../sass/content/_content-css.scss */
.article-detail .notice-box, .article-detail .NoticeBox {
    width: 100%;
    padding: 15px 10px 10px 10px;
    margin-top: 25px;
    border: 1px solid #c3c4c8;
    color: #4a4a4c;
    background: transparent;
}
    /* line 257, ../sass/content/_content-css.scss */
    .article-detail .notice-box p.legend, .article-detail .notice-box .Legend, .article-detail .NoticeBox p.legend, .article-detail .NoticeBox .Legend {
        background-color: #292d49;
        color: #f6f6f6;
        float: left;
        font-size: 14px;
        font-weight: bold;
        height: 25px;
        margin: -30px 0 10px;
        padding: 0 17px 0 16px;
        position: absolute;
    }
/* line 273, ../sass/content/_content-css.scss */
.article-detail table {
    margin: 10px auto;
    border-collapse: collapse;
}
    /* line 277, ../sass/content/_content-css.scss */
    .article-detail table.no-border th, .article-detail table.no-border td {
        border: none;
    }
    /* line 283, ../sass/content/_content-css.scss */
    .article-detail table.no-bg tr:nth-child(odd), .article-detail table.no-bg tr.OddRow, .article-detail table.no-bg tr.odd, .article-detail table.no-bg tr:nth-child(even), .article-detail table.no-bg tr.EvenRow, .article-detail table.no-bg tr.even {
        background: none;
    }
    /* line 292, ../sass/content/_content-css.scss */
    .article-detail table.no-bg th, .article-detail table.no-bg td {
        background: none;
    }
    /* line 298, ../sass/content/_content-css.scss */
    .article-detail table tr:nth-child(odd), .article-detail table tr.OddRow, .article-detail table tr.odd {
        background: #ffffff;
    }
    /* line 303, ../sass/content/_content-css.scss */
    .article-detail table tr:nth-child(even), .article-detail table tr.EvenRow, .article-detail table tr.even {
        background: #e9eef2;
    }
    /* line 309, ../sass/content/_content-css.scss */
    .article-detail table th {
        text-align: center;
        font-weight: bold;
        color: #f6f6f6;
        background: #292d49;
    }
    /* line 316, ../sass/content/_content-css.scss */
    .article-detail table td, .article-detail table th {
        border: 1px solid #bfc5ce;
        padding: 3px 5px;
    }
        /* line 319, ../sass/content/_content-css.scss */
        .article-detail table td.right, .article-detail table td.HorzRight, .article-detail table td.horz-right, .article-detail table th.right, .article-detail table th.HorzRight, .article-detail table th.horz-right {
            text-align: right;
        }
        /* line 322, ../sass/content/_content-css.scss */
        .article-detail table td.center, .article-detail table td.HorzCenter, .article-detail table td.horz-center, .article-detail table th.center, .article-detail table th.HorzCenter, .article-detail table th.horz-center {
            text-align: center;
        }
        /* line 325, ../sass/content/_content-css.scss */
        .article-detail table td.top, .article-detail table td.VertTop, .article-detail table td.vert-top, .article-detail table th.top, .article-detail table th.VertTop, .article-detail table th.vert-top {
            vertical-align: top;
        }
        /* line 328, ../sass/content/_content-css.scss */
        .article-detail table td.middle, .article-detail table td.VertMiddle, .article-detail table td.vert-middle, .article-detail table th.middle, .article-detail table th.VertMiddle, .article-detail table th.vert-middle {
            vertical-align: middle;
        }
/* line 348, ../sass/content/_content-css.scss */
.article-detail h4 {
    font-family: arial, "Roboto", sans-serif;
    font-weight: bold;
    clear: both;
    margin-top: 15px;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: black;
}
    /* line 357, ../sass/content/_content-css.scss */
    .article-detail h4 ~ p, .article-detail h4 ~ ul, .article-detail h4 ~ ol, .article-detail h4 ~ table, .article-detail h4 ~ div {
        max-width: 100%;
        font-family: arial, "Roboto", sans-serif;
        line-height: 25px;
        font-size: 16px;
    }
/* line 365, ../sass/content/_content-css.scss */
.article-detail h5 {
    clear: both;
    margin-top: 15px;
    font-size: 36px;
    line-height: 42px;
    font-weight: 700;
    text-indent: 25px;
    margin-left: 30px;
    color: #d23c2b;
    background-image: url("../static/background/article/icon_h5.png");
    background-repeat: no-repeat;
    background-position: 0 4px;
}
    /* line 375, ../sass/content/_content-css.scss */
    .article-detail h5 ~ p, .article-detail h5 ~ ul, .article-detail h5 ~ ol, .article-detail h5 ~ table, .article-detail h5 ~ div {
        margin-left: 55px;
        max-width: calc(100% - 30px - 25px);
    }

/* line 383, ../sass/content/_content-css.scss */
.Popup {
    background: #ff6633;
    border: 1px solid #ff6633;
    color: #ffffff;
    display: block;
    position: absolute;
    padding: 27px 0 0;
    width: 640px;
    z-index: 100;
}
    /* line 392, ../sass/content/_content-css.scss */
    .Popup a.PopupClose {
        color: #ffffff;
        font-weight: bold;
        text-decoration: none;
        display: block;
        position: absolute;
        top: 0;
        right: 9px;
        width: 50px;
        height: 27px;
        line-height: 27px;
    }
        /* line 403, ../sass/content/_content-css.scss */
        .Popup a.PopupClose:hover {
            color: #ffffff;
            text-decoration: none;
        }
    /* line 408, ../sass/content/_content-css.scss */
    .Popup .InnerContent {
        background: #f0f0f0;
        border: 1px solid #ff6633;
        color: #381919;
        height: auto;
        padding: 10px;
        width: auto;
    }

/* line 418, ../sass/content/_content-css.scss */
.tags {
    margin: 20px 0;
}
    /* line 420, ../sass/content/_content-css.scss */
    .tags span, .tags a {
        display: inline-block;
        margin-right: 5px;
        color: #000000;
        font: normal 16px/16px arial, "Roboto", sans-serif;
    }
    /* line 426, ../sass/content/_content-css.scss */
    .tags span {
        font-weight: bold;
    }

/* line 431, ../sass/content/_content-css.scss */
.block-relate-news {
    width: 100%;
    padding-top: 40px;
}
    /* line 435, ../sass/content/_content-css.scss */
    .block-relate-news > h2 {
        display: block;
        color: #292d49;
        font-size: 22px;
        line-height: 24px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 0px 0 30px;
        padding: 10px 0;
    }
    /* line 440, ../sass/content/_content-css.scss */
    .block-relate-news .posts__list {
        clear: both;
        position: relative;
        z-index: 1;
    }
        /* line 402, ../sass/core/_mixins.scss */
        .block-relate-news .posts__list::after {
            display: block;
            content: "";
            clear: both;
        }
        /* line 409, ../sass/core/_mixins.scss */
        .block-relate-news .posts__list > li {
            display: block;
            padding: 7px 0px;
            cursor: pointer;
            border-bottom: 1px solid #d9dce1;
            border-left: 2px solid transparent;
        }
            /* line 415, ../sass/core/_mixins.scss */
            .block-relate-news .posts__list > li:hover {
                background-color: #e5ecf2;
                border-left: 2px solid #83a1bc;
            }
                /* line 419, ../sass/core/_mixins.scss */
                .block-relate-news .posts__list > li:hover > a h3 {
                    color: #646464;
                }
            /* line 424, ../sass/core/_mixins.scss */
            .block-relate-news .posts__list > li:last-child {
                border-bottom: none;
            }
            /* line 427, ../sass/core/_mixins.scss */
            .block-relate-news .posts__list > li::after {
                display: block;
                content: "";
                clear: both;
            }
            /* line 432, ../sass/core/_mixins.scss */
            .block-relate-news .posts__list > li p {
                line-height: 20px;
            }
                /* line 521, ../sass/core/_mixins.scss */
                .block-relate-news .posts__list > li p .search__cate,
                .block-relate-news .posts__list > li p .posts__cate {
                    display: inline-block;
                    color: #6f6f6f;
                    font-size: 12px;
                    text-transform: uppercase;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
                /* line 530, ../sass/core/_mixins.scss */
                .block-relate-news .posts__list > li p .search__time,
                .block-relate-news .posts__list > li p .posts__time {
                    color: #6f6f6f;
                    margin-left: 5px;
                    font-size: 12px;
                }
            /* line 436, ../sass/core/_mixins.scss */
            .block-relate-news .posts__list > li a {
                text-decoration: none;
            }
                /* line 438, ../sass/core/_mixins.scss */
                .block-relate-news .posts__list > li a h3 {
                    display: block;
                    color: #646464;
                    font-size: 16px;
                    line-height: 24px;
                    font-weight: bold;
                    padding: 0;
                }
                    /* line 545, ../sass/core/_mixins.scss */
                    .block-relate-news .posts__list > li a h3:hover {
                        color: #646464;
                    }
                /* line 442, ../sass/core/_mixins.scss */
                .block-relate-news .posts__list > li a.post__img {
                    width: 198px;
                    height: 110px;
                    display: block;
                    overflow: hidden;
                    float: left;
                    margin-right: 10px;
                    display: table-cell;
                    vertical-align: middle;
                    border-top-left-radius: 2px;
                    border-top-right-radius: 2px;
                    border-bottom-left-radius: 2px;
                    border-bottom-right-radius: 2px;
                    border-top-left-radius: 2px;
                    border-bottom-left-radius: 2px;
                    border-top-right-radius: 2px;
                    border-bottom-right-radius: 2px;
                }
                    /* line 560, ../sass/core/_mixins.scss */
                    .block-relate-news .posts__list > li a.post__img img {
                        height: 100%;
                    }

/* line 2, ../sass/content/_forms.scss */
.article-detail .user-info {
    display: block;
    position: relative;
}
    /* line 6, ../sass/content/_forms.scss */
    .article-detail .user-info p.info {
        width: 100%;
        background: #ff6633;
        border-bottom: none;
        font: 16px/20px Tahoma;
        color: #fff;
        text-align: right;
        display: inline-block;
        padding: 5px 200px 5px 0;
        /* breakpoint: smartphone | desktop; */
    }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 6, ../sass/content/_forms.scss */
    .article-detail .user-info p.info {
        padding: 5px 0px 5px 0;
    }
}
/* line 20, ../sass/content/_forms.scss */
.article-detail .user-info p a {
    display: inline-block;
    text-decoration: none;
    padding: 0px 30px 0 10px;
    color: #ffffff;
}
    /* line 25, ../sass/content/_forms.scss */
    .article-detail .user-info p a:hover {
        color: #fffc00;
    }
/* line 30, ../sass/content/_forms.scss */
.article-detail .user-info .function {
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 30, ../sass/content/_forms.scss */
    .article-detail .user-info .function {
        position: relative;
        width: 100%;
    }
}
/* line 39, ../sass/content/_forms.scss */
.article-detail .user-info .function #link-function {
    display: block;
    background: #ff6633;
    border-bottom: none;
    color: #ffffff;
    font: 16px/20px Tahoma;
    display: block;
    padding: 5px 28px 5px 0;
    text-decoration: none;
    text-align: right;
}
    /* line 49, ../sass/content/_forms.scss */
    .article-detail .user-info .function #link-function:hover {
        color: #fffc00;
    }
        /* line 51, ../sass/content/_forms.scss */
        .article-detail .user-info .function #link-function:hover::after {
            border-color: #fffc00 transparent transparent;
        }
    /* line 55, ../sass/content/_forms.scss */
    .article-detail .user-info .function #link-function::after {
        content: "";
        width: 0;
        height: 0;
        display: block;
        position: absolute;
        top: 12px;
        right: 10px;
        border: solid 6px;
        border-color: #ffffff transparent transparent;
        cursor: pointer;
    }
/* line 68, ../sass/content/_forms.scss */
.article-detail .user-info .function .menu-dropdown {
    display: none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 30px;
    background: #ff6633;
}
    /* line 75, ../sass/content/_forms.scss */
    .article-detail .user-info .function .menu-dropdown > li {
        text-align: left;
        display: block;
        border-bottom: 1px solid #fe6e3e;
    }
        /* line 79, ../sass/content/_forms.scss */
        .article-detail .user-info .function .menu-dropdown > li a {
            display: block;
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 8px;
            color: #ffffff;
        }
            /* line 86, ../sass/content/_forms.scss */
            .article-detail .user-info .function .menu-dropdown > li a:hover, .article-detail .user-info .function .menu-dropdown > li a.active {
                color: #fffc00;
            }
            /* line 89, ../sass/content/_forms.scss */
            .article-detail .user-info .function .menu-dropdown > li a.off {
                color: #ffac91;
            }
/* line 99, ../sass/content/_forms.scss */
.article-detail form {
    clear: both;
    width: 100%;
    max-width: 800px;
    margin: auto;
}
    /* line 107, ../sass/content/_forms.scss */
    .article-detail form h2.title-form {
        text-align: center;
        font: bold 30px/40px 'Tahoma',Arial,Verdana,sans-serif;
        background-color: none;
    }
    /* line 113, ../sass/content/_forms.scss */
    .article-detail form .description-form {
        margin: 0 auto;
        text-align: center;
        border-bottom: solid 2px #525252;
        font: normal 18px/30px 'Tahoma',Arial,Verdana,sans-serif;
        margin-bottom: 20px;
    }
    /* line 121, ../sass/content/_forms.scss */
    .article-detail form .Input-error, .article-detail form .TextNote {
        font: normal 16px/22px arial, "Roboto", sans-serif;
        color: #7f0000;
        position: relative;
        top: 0;
        left: 0px;
        margin-bottom: 0;
        padding: 0 0 0 0px !important;
        /* breakpoint: smartphone | desktop; */
    }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 121, ../sass/content/_forms.scss */
    .article-detail form .Input-error, .article-detail form .TextNote {
        padding-left: 0 !important;
    }
}
/* line 133, ../sass/content/_forms.scss */
.article-detail form .Require {
    color: #cf1d03;
    font-size: 12px;
    position: relative;
    top: -10px;
    right: -2px;
}
/* line 142, ../sass/content/_forms.scss */
.article-detail form ul {
    clear: both;
    list-style: none;
    margin: 0px;
    width: 100%;
    display: block;
}
    /* line 148, ../sass/content/_forms.scss */
    .article-detail form ul > li {
        display: block;
        overflow: hidden;
        padding: 0px;
        margin-bottom: 10px;
    }
        /* line 153, ../sass/content/_forms.scss */
        .article-detail form ul > li:after {
            clear: both;
            display: block;
            content: "";
        }
        /* line 159, ../sass/content/_forms.scss */
        .article-detail form ul > li.Radio > div, .article-detail form ul > li.Checkbox > div {
            float: left;
            overflow: hidden;
            width: 100%;
        }
            /* line 163, ../sass/content/_forms.scss */
            .article-detail form ul > li.Radio > div > input, .article-detail form ul > li.Checkbox > div > input {
                float: left;
                width: 16px;
                height: 16px;
                margin: 11px 5px;
            }
                /* line 168, ../sass/content/_forms.scss */
                .article-detail form ul > li.Radio > div > input ~ .follow-label, .article-detail form ul > li.Checkbox > div > input ~ .follow-label {
                    clear: none;
                    width: auto;
                    margin-right: 30px;
                }
                    /* line 172, ../sass/content/_forms.scss */
                    .article-detail form ul > li.Radio > div > input ~ .follow-label:last-child, .article-detail form ul > li.Checkbox > div > input ~ .follow-label:last-child {
                        margin-right: 0;
                    }
        /* line 179, ../sass/content/_forms.scss */
        .article-detail form ul > li .capcha, .article-detail form ul > li .Capcha {
            display: inline-block;
            position: relative;
            width: 45%;
            float: right;
        }
            /* line 188, ../sass/content/_forms.scss */
            .article-detail form ul > li .capcha .ImgVerify, .article-detail form ul > li .Capcha .ImgVerify {
                float: right;
                height: auto;
                width: 260px;
                max-height: 38px;
            }
            /* line 195, ../sass/content/_forms.scss */
            .article-detail form ul > li .capcha .Verify, .article-detail form ul > li .Capcha .Verify {
                float: left;
                width: 45%;
            }
            /* line 199, ../sass/content/_forms.scss */
            .article-detail form ul > li .capcha .refresh, .article-detail form ul > li .Capcha .refresh {
                width: 50px;
                height: 50px;
                display: block;
                text-indent: -9999px;
                position: absolute;
                left: -8px;
                top: 0;
                bottom: 0;
                margin: auto;
            }
        /* line 211, ../sass/content/_forms.scss */
        .article-detail form ul > li.button-group {
            margin-top: 30px;
            text-align: center;
        }
            /* line 214, ../sass/content/_forms.scss */
            .article-detail form ul > li.button-group > input, .article-detail form ul > li.button-group button {
                float: none;
                display: inline-block;
                width: auto;
                height: 58px;
                text-align: center;
                font-weight: bold;
                cursor: pointer;
                margin: 10px 10px;
                color: #4a2807;
                background: #f56825;
                border: solid 1px #9cabcb;
            }
                /* line 226, ../sass/content/_forms.scss */
                .article-detail form ul > li.button-group > input:hover, .article-detail form ul > li.button-group button:hover {
                    color: #ffffff;
                    background: #000000;
                }
        /* line 232, ../sass/content/_forms.scss */
        .article-detail form ul > li > p {
            margin: 0;
            padding: 0;
            text-align: left;
        }
            /* line 236, ../sass/content/_forms.scss */
            .article-detail form ul > li > p:after {
                clear: both;
                display: block;
                content: "";
            }
/* line 245, ../sass/content/_forms.scss */
.article-detail form input, .article-detail form button, .article-detail form select, .article-detail form textarea {
    display: block;
    font: normal 16px/16px tahoma;
    color: #666666;
    background-color: #ffffff;
    border: 1px solid #9cabcb;
    border-radius: 0px;
    padding: 6px 12px;
    width: 100%;
    height: 38px;
    float: left;
    resize: none;
    /* breakpoint: smartphone | desktop; */
}
    /* line 257, ../sass/content/_forms.scss */
    .article-detail form input:focus, .article-detail form button:focus, .article-detail form select:focus, .article-detail form textarea:focus {
        border-color: #4962c0;
        outline: 0;
    }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 245, ../sass/content/_forms.scss */
    .article-detail form input, .article-detail form button, .article-detail form select, .article-detail form textarea {
        width: 100%;
    }
}
/* line 265, ../sass/content/_forms.scss */
.article-detail form input::-webkit-input-placeholder, .article-detail form button::-webkit-input-placeholder, .article-detail form select::-webkit-input-placeholder, .article-detail form textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #f8bdc9;
}
/* line 268, ../sass/content/_forms.scss */
.article-detail form input::-moz-placeholder, .article-detail form button::-moz-placeholder, .article-detail form select::-moz-placeholder, .article-detail form textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #f8bdc9;
}
/* line 271, ../sass/content/_forms.scss */
.article-detail form input:-ms-input-placeholder, .article-detail form button:-ms-input-placeholder, .article-detail form select:-ms-input-placeholder, .article-detail form textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: #f8bdc9;
}
/* line 274, ../sass/content/_forms.scss */
.article-detail form input:-moz-placeholder, .article-detail form button:-moz-placeholder, .article-detail form select:-moz-placeholder, .article-detail form textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #f8bdc9;
}
/* line 279, ../sass/content/_forms.scss */
.article-detail form input[type='radio'] {
    background: transparent;
}
/* line 283, ../sass/content/_forms.scss */
.article-detail form label {
    clear: both;
    display: block;
    width: 0px;
    height: 38px;
    max-width: 100%;
    float: left;
    text-align: right;
    color: #464646;
    padding-right: 10px;
    font: normal 16px/38px arial, "Roboto", sans-serif;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 283, ../sass/content/_forms.scss */
    .article-detail form label {
        text-align: left;
        width: 100%;
    }
}
/* line 299, ../sass/content/_forms.scss */
.article-detail form input {
    padding: 22px;
    height: 38px;
    line-height: 38px;
}
    /* line 303, ../sass/content/_forms.scss */
    .article-detail form input.Verify {
        width: 50%;
    }
    /* line 306, ../sass/content/_forms.scss */
    .article-detail form input.BtnReg, .article-detail form input.BtnReset {
        border: none !important;
        width: auto !important;
        height: 40px;
    }
    /* line 312, ../sass/content/_forms.scss */
    .article-detail form input.button {
        display: inline-block;
        font-weight: bold;
        width: auto;
        height: 40px;
        line-height: 40px;
        padding: 0px 20px;
        margin: 0px 10px;
        color: #000;
        background: #fff;
        border-radius: 6px;
    }
        /* line 323, ../sass/content/_forms.scss */
        .article-detail form input.button:hover {
            color: #fff;
            background: #e6e6e6;
        }
/* line 333, ../sass/content/_forms.scss */
.article-detail form button {
    display: inline-block;
    font-weight: bold;
    width: auto;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    margin: 0px 10px;
    color: #000;
    background: #fff;
    border-radius: 6px;
}
    /* line 344, ../sass/content/_forms.scss */
    .article-detail form button:hover {
        color: #fff;
        background: #e6e6e6;
    }
/* line 350, ../sass/content/_forms.scss */
.article-detail form select {
    height: 38px;
    line-height: 38px;
}
/* line 354, ../sass/content/_forms.scss */
.article-detail form textarea {
    height: 114px;
}
/* line 357, ../sass/content/_forms.scss */
.article-detail form fieldset {
    margin-top: 50px;
    padding: 20px 10px 20px;
    border: solid 1px #7f0000;
    background-image: #ffffff;
    position: relative;
}
    /* line 364, ../sass/content/_forms.scss */
    .article-detail form fieldset .legend {
        display: block;
        padding: 5px 20px;
        border: none;
        background-image: #7f0000;
        color: #fff;
        font-weight: bold;
        position: absolute;
        top: -20px;
        left: 50px;
    }
/* line 381, ../sass/content/_forms.scss */
.article-detail form .form-control-success {
    color: #3c763d;
}
/* line 384, ../sass/content/_forms.scss */
.article-detail form .form-control-warn {
    color: #f0ad4e;
}
/* line 387, ../sass/content/_forms.scss */
.article-detail form .form-control-error {
    color: #a94442;
}

/* line 1, ../sass/content/_paginator.scss */
.pagination-container {
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
    text-align: center;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1, ../sass/content/_paginator.scss */
    .pagination-container {
        margin-top: 25px;
        margin-bottom: 35px;
    }
}
/* line 10, ../sass/content/_paginator.scss */
.pagination-container > .pagination {
    display: inline-block;
    margin: 0 auto;
}
    /* line 13, ../sass/content/_paginator.scss */
    .pagination-container > .pagination > li {
        float: left;
    }
        /* line 15, ../sass/content/_paginator.scss */
        .pagination-container > .pagination > li > a {
            display: block;
            font-family: inherit;
            color: #222222;
            background-image: #F4F4F4;
            padding: 8px 0;
            min-width: 60px;
            font-size: 18px;
            line-height: 22px;
            text-decoration: none;
            opacity: 0.4;
            /* breakpoint: smartphone | desktop; */
            /* between desktop ~ smartphone */
            text-align: center;
        }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 15, ../sass/content/_paginator.scss */
    .pagination-container > .pagination > li > a {
        min-width: 35px;
    }
}
/* line 33, ../sass/content/_paginator.scss */
.pagination-container > .pagination > li > a:hover, .pagination-container > .pagination > li > a.active {
    color: #222222;
    font-weight: bold;
    opacity: 1;
}
/* line 42, ../sass/content/_paginator.scss */
.pagination-container > .pagination > li:first-child > a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
/* line 46, ../sass/content/_paginator.scss */
.pagination-container > .pagination > li:last-child > a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
/* line 52, ../sass/content/_paginator.scss */
.pagination-container > .pagination > li.active a, .pagination-container > .pagination > li.active a:hover, .pagination-container > .pagination > li.active:hover a, .pagination-container > .pagination > li.active:hover a:hover {
    color: #222222;
    opacity: 1;
    font-weight: 900;
}
/* line 62, ../sass/content/_paginator.scss */
.pagination-container.pagination--bottom {
    padding-bottom: 75px;
}

/* line 1, ../sass/block/_nav.scss */
/* .nav {
  width: 100vw;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  z-index: 20;
  transition: .5s ease-in-out .3s;
  border-bottom: 0.75px solid rgba(255, 233, 59, 0.75);
  transition: .5s ease; */
/* breakpoint: smartphone | desktop; */
/* breakpoint: smartphone | desktop; */
/* between desktop ~ smartphone */
/* breakpoint: smartphone | desktop; */
/*}*/
/* line 11, ../sass/block/_nav.scss */
.nav.open {
    background-color: rgba(0, 0, 0, 0.8);
    transition: .2s ease-in-out;
}

@media (max-width: 860px) {
    /* line 1, ../sass/block/_nav.scss */
    .nav {
        height: 70px;
        position: fixed;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1, ../sass/block/_nav.scss */
    .nav {
        height: 100px;
        position: fixed;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1, ../sass/block/_nav.scss */
    .nav {
        height: 70px;
    }
}
/* line 34, ../sass/block/_nav.scss */
.nav .nav-wrapper {
    height: 100%;
    width: 1160px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform-origin: left center;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 34, ../sass/block/_nav.scss */
    .nav .nav-wrapper {
        width: 100%;
    }
}
/* line 46, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon {
    margin-left: 25px;
    display: none;
    cursor: pointer;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 46, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon {
        display: block;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 46, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon {
        display: block;
        transform: scale(1);
        margin-left: 15px;
    }
}
/* line 58, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.hamburger {
    padding: 0 !important;
}
/* line 61, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon .hamburger-box {
    height: 45px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 61, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon .hamburger-box {
        height: 35px;
        transform: scale(0.8);
    }
}
/* line 68, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon .hamburger-inner {
    background-color: transparent !important;
    background-image: url('../static/background/nav-3.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 12px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 68, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon .hamburger-inner {
        height: 8px;
    }
}
/* line 76, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon .hamburger-inner:after {
    background-color: transparent !important;
    background-image: url('../static/background/nav-1.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 12px;
    top: -28px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 76, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon .hamburger-inner:after {
        height: 7px;
        top: -26px;
    }
}
/* line 87, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon .hamburger-inner:before {
    background-color: transparent !important;
    background-image: url('../static/background/nav-2.svg');
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    top: -16px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 87, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon .hamburger-inner:before {
        height: 8px;
        top: -14px;
    }
}
/* line 99, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.is-active {
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 99, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon.is-active {
        margin-left: 15px;
    }
}
/* line 103, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.is-active .hamburger-box {
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 103, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon.is-active .hamburger-box {
        height: 35px;
    }
}
/* line 108, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.is-active .hamburger-inner {
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 108, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon.is-active .hamburger-inner {
        background-image: url('../static/background/nav-1.svg');
        background-repeat: no-repeat;
        background-size: cover;
    }
}
/* line 113, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.is-active .hamburger-inner:before {
    background-image: url('../static/background/nav-1.svg');
    background-repeat: no-repeat;
    background-size: contain;
    top: -2px;
    left: 2px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 113, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon.is-active .hamburger-inner:before {
        background-size: cover;
        top: 1px;
        left: 1px;
    }
}
/* line 124, ../sass/block/_nav.scss */
.nav .nav-wrapper #nav-icon.is-active .hamburger-inner:after {
    top: 0;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 124, ../sass/block/_nav.scss */
    .nav .nav-wrapper #nav-icon.is-active .hamburger-inner:after {
        background-size: cover;
    }
}
/* line 133, ../sass/block/_nav.scss */
.nav .nav-wrapper .btn-right {
    width: 160px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 133, ../sass/block/_nav.scss */
    .nav .nav-wrapper .btn-right {
        display: inline-block;
        float: right;
        width: auto;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 133, ../sass/block/_nav.scss */
    .nav .nav-wrapper .btn-right {
        transform: scale(0.7);
        transform-origin: right;
    }
}
/* line 146, ../sass/block/_nav.scss */
.nav .nav-wrapper .link-img {
    display: inline-block;
    text-indent: -9999px;
}
    /* line 149, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img:hover {
        filter: brightness(1.3);
    }
    /* line 152, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img.logo-icon {
        width: 136px;
        height: 45px;
        background-image: url('../static/background/COD-logo.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
        /* breakpoint: smartphone | desktop; */
        /* breakpoint: smartphone | desktop; */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 152, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img.logo-icon {
        position: absolute;
        left: 80px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 152, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img.logo-icon {
        transform: scale(0.8);
        transform-origin: left;
        left: 65px;
    }
}

@media (max-width: 320px) {
    /* line 152, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img.logo-icon {
        transform: scale(0.7);
    }
}
/* line 177, ../sass/block/_nav.scss */
.nav .nav-wrapper .link-img.nhap-code {
    float: left;
}
/* line 181, ../sass/block/_nav.scss */
.nav .nav-wrapper .link-img.nap-the {
    width: 155px;
    height: 57px;
    background-image: url('../static/background/nap-the.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    float: left;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 181, ../sass/block/_nav.scss */
    .nav .nav-wrapper .link-img.nap-the {
        margin-right: 30px;
    }
}
/* line 193, ../sass/block/_nav.scss */
.nav .nav-wrapper ul {
    width: 85%;
    list-style-type: none;
    width: 70%;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 860px) {
    /* line 193, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul {
        top: 90px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 193, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul {
        display: none;
        position: absolute;
        top: 90px;
        width: 100%;
        height: 100vh;
        background-image: rgba(34, 34, 34, 0.96);
        z-index: 1;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 193, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul {
        top: 70px;
    }
}
/* line 219, ../sass/block/_nav.scss */
.nav .nav-wrapper ul li {
    display: inline;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 219, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul li {
        height: calc((90vh - 90px) / 6);
        display: block;
        margin-right: 0;
        margin-left: 16px !important;
        border-bottom: 0.25px solid white;
        height: calc((90vh - 90px) / 6);
        line-height: calc((90vh - 90px) / 6);
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 219, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul li {
        height: calc((90vh - 70px) / 6);
        line-height: calc((90vh - 70px) / 6);
    }
}
/* line 241, ../sass/block/_nav.scss */
.nav .nav-wrapper ul li a {
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    font-family: inherit, sans-serif;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    font-weight: 600;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}
    /* line 251, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul li a:hover {
        color: #FFE93B;
        font-weight: bold;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 241, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul li a {
        font-weight: bold;
        line-height: calc((100vh - 70px) / 6);
        text-align: left;
        font-weight: 600;
        width: 100%;
        height: 100%;
        display: block;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 241, ../sass/block/_nav.scss */
    .nav .nav-wrapper ul li a {
        font-size: bold;
    }
}

/* line 13, ../sass/style.scss */
html, body {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 13, ../sass/style.scss */
    html, body {
        touch-action: manipulation;
    }
}

/* line 20, ../sass/style.scss */
.wrapper {
    display: block;
    position: relative;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
}

/* line 28, ../sass/style.scss */
.btn-scroll-down {
    display: block;
    text-indent: -9999px;
    left: 50%;
    margin-left: -17px;
    bottom: 10px;
    z-index: 4;
    position: fixed;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 28, ../sass/style.scss */
    .btn-scroll-down {
        display: none !important;
    }
}

/* line 40, ../sass/style.scss */
.gradient-bg {
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(180deg, rgba(25, 27, 26, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(245, 247, 246, 0.2) 100%);
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 40, ../sass/style.scss */
    .gradient-bg {
        display: block;
    }
}

/* line 54, ../sass/style.scss */
.img-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* line 62, ../sass/style.scss */
.gallery-container {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 64, ../sass/style.scss */
    .gallery-container .chart-img {
        display: none;
    }
    /* line 67, ../sass/style.scss */
    .gallery-container .gallery-top {
        height: 60% !important;
    }
    /* line 70, ../sass/style.scss */
    .gallery-container .gallery-top {
        position: absolute;
        bottom: 0;
    }
    /* line 74, ../sass/style.scss */
    .gallery-container .gallery-thumbs {
        width: 710px !important;
        height: 300px !important;
        position: absolute;
        top: 20px;
        margin: auto;
        left: 0;
        right: 0;
    }
        /* line 82, ../sass/style.scss */
        .gallery-container .gallery-thumbs .swiper-wrapper {
            display: block;
            background-image: url('../static/background/frame.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            transform: none !important;
        }
        /* line 88, ../sass/style.scss */
        .gallery-container .gallery-thumbs .swiper-slide {
            height: calc(280px / 2) !important;
            display: inline-block;
            width: calc(710px / 4) !important;
            float: left;
        }
            /* line 93, ../sass/style.scss */
            .gallery-container .gallery-thumbs .swiper-slide:nth-child(5) {
                float: left;
            }
            /* line 96, ../sass/style.scss */
            .gallery-container .gallery-thumbs .swiper-slide:nth-child(6) {
                width: calc(710px - ((710px / 4 )*2)) !important;
                margin: auto;
            }
            /* line 100, ../sass/style.scss */
            .gallery-container .gallery-thumbs .swiper-slide:nth-child(7) {
                float: right;
            }
            /* line 103, ../sass/style.scss */
            .gallery-container .gallery-thumbs .swiper-slide p {
                font-size: 25px !important;
                line-height: 29px !important;
            }
}

/* line 111, ../sass/style.scss */
#outer {
    display: block;
}
    /* line 113, ../sass/style.scss */
    #outer main {
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 113, ../sass/style.scss */
    #outer main {
        overflow-x: hidden;
    }
}
/* line 117, ../sass/style.scss */
#outer main section {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 117, ../sass/style.scss */
    #outer main section {
        overflow-x: hidden;
        overflow-y: hidden;
    }
}
/* line 125, ../sass/style.scss */
#outer main section#section0 {
    position: fixed;
    top: 0;
    width: 100%;
}
/* line 130, ../sass/style.scss */
#outer main section .wrapper {
    display: block;
    width: 2000px;
    min-height: 1000px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -1000px;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 130, ../sass/style.scss */
    #outer main section .wrapper {
        width: 768px;
        height: auto;
        left: unset;
        margin-left: unset;
        top: unset;
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
    }
}
/* line 155, ../sass/style.scss */
#outer main section#section1 {
    background-image: url('../static/background/bg1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 155, ../sass/style.scss */
    #outer main section#section1 {
        background-image: url('../static/background/bg1.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}
/* line 162, ../sass/style.scss */
#outer main section#section1 .img-section-1 {
    object-position: top;
}
/* line 165, ../sass/style.scss */
#outer main section#section1 .social-btn {
    width: 250px;
    height: 30px;
    position: absolute;
    right: calc((100vw - 1160px) / 2);
    bottom: 8%;
    transform-origin: right;
    z-index: 9;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 165, ../sass/style.scss */
    #outer main section#section1 .social-btn {
        display: none;
    }
}
/* line 176, ../sass/style.scss */
#outer main section#section1 .social-btn ul {
    width: 100%;
}
    /* line 179, ../sass/style.scss */
    #outer main section#section1 .social-btn ul li {
        position: relative;
        display: inline-block;
        margin-left: 20px;
    }
        /* line 184, ../sass/style.scss */
        #outer main section#section1 .social-btn ul li:nth-child(1) {
            margin-right: 80px;
        }
        /* line 187, ../sass/style.scss */
        #outer main section#section1 .social-btn ul li .link-img {
            display: inline-block;
            text-indent: -9999px;
            width: 30px;
            height: 30px;
            float: left;
        }
            /* line 193, ../sass/style.scss */
            #outer main section#section1 .social-btn ul li .link-img:hover {
                filter: brightness(1.3);
            }
            /* line 196, ../sass/style.scss */
            #outer main section#section1 .social-btn ul li .link-img.logo-face {
                background-image: url('../static/background/fb-header.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            /* line 201, ../sass/style.scss */
            #outer main section#section1 .social-btn ul li .link-img.logo-vector {
                background-image: url('../static/background/instagram.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            /* line 205, ../sass/style.scss */
            #outer main section#section1 .social-btn ul li .link-img.logo-youtube {
                width: 30px;
                height: 30px;
                background-image: url('../static/background/youtube.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
/* line 215, ../sass/style.scss */
#outer main section#section1 .scroll-img {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: -3%;
    transform-origin: bottom center;
    /*breakpoint: smartphone | desktop;
  */ /*betweendesktop~smartphone*/ /*breakpoint: smartphone | desktop;
   */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 215, ../sass/style.scss */
    #outer main section#section1 .scroll-img {
        bottom: 0%;
    }
}

@media (max-width: 320px) {
    /* line 215, ../sass/style.scss */
    #outer main section#section1 .scroll-img {
        height: 100px;
    }
}

@supports (-webkit-touch-callout: none) {
    /* line 215, ../sass/style.scss */
    #outer main section#section1 .scroll-img {
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
        /* breakpoint: smartphone | desktop; */
    }

    @media (max-width: 1024px) and (orientation: portrait) {
        /* line 215, ../sass/style.scss */
        #outer main section#section1 .scroll-img {
            height: 170px;
        }
    }

    @media (max-width: 320px) {
        /* line 215, ../sass/style.scss */
        #outer main section#section1 .scroll-img {
            height: 130px;
        }
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 155, ../sass/style.scss */
    #outer main section#section1 {
        height: 100vh !important;
    }
}
/* line 244, ../sass/style.scss */
#outer main section#section1 .wrapper {
    display: block;
    width: 1160px;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -580px;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 244, ../sass/style.scss */
    #outer main section#section1 .wrapper {
        width: 100%;
        height: 1000px;
        left: unset;
        margin-left: unset;
    }
}
/* line 264, ../sass/style.scss */
#outer main section#section1 .wrapper .btn-video {
    display: block;
    text-indent: -9999px;
    position: absolute;
    right: 30%;
    top: -236px;
    bottom: 10%;
    margin: auto;
    width: 145px;
    height: 135px;
    background-image: url("../static/background/play-video.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: scale(1);
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
}

#outer main section#section1 .wrapper .btnVideoEs {
    right: auto;
    bottom: 55%;
}
/* line 282, ../sass/style.scss */
#outer main section#section1 .wrapper .btn-video:hover {
    filter: brightness(1.3);
}

@keyframes jump {
    0% {
        transform: scale3d(1, 1, 1);
        filter: brightness(1);
    }

    40% {
        transform: scale3d(1.1, 1.1, 1);
        filter: brightness(1.2);
    }

    100% {
        transform: scale3d(1.15, 1.15, 1);
        filter: brightness(1.5);
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 264, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-video {
        right: 0;
        left: 0;
        top: 25%;
        bottom: unset;
        margin: auto;
        background-image: url('../static/background/watch-trailer.svg');
        background-repeat: no-repeat;
        width: 77px;
        height: 88px;
        background-size: cover;
        transform: scale(1.5);
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 264, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-video {
        top: 25%;
        transform: scale(1.2);
    }

    #outer main section#section1 .wrapper .btnVideoEs {
        bottom: 98%;
    }
}

@media (max-width: 320px) {
    /* line 264, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-video {
        top: 22%;
    }
}
/* line 320, ../sass/style.scss */
#outer main section#section1 .wrapper .btn-download-mobile {
    display: none;
    background-image: url('../static/background/google-play.svg');
    background-repeat: no-repeat;
    width: 160px;
    height: 50px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 320, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-download-mobile {
        right: 0;
        left: 0;
        top: 60%;
        margin: auto;
        display: block;
        position: absolute;
        text-indent: -999px;
        transform: scale(1.5);
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 320, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-download-mobile {
        top: 60%;
        transform: scale(1);
    }
}
/* line 341, ../sass/style.scss */
#outer main section#section1 .wrapper .btn-dk-tai-truoc-mobile {
    display: none;
    background-position: -182px -570px;
    height: 66px;
    width: 240px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 341, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-dk-tai-truoc-mobile {
        right: 0;
        left: 0;
        top: 60%;
        margin: auto;
        display: block;
        position: absolute;
        text-indent: -999px;
        transform: scale(1.5);
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 341, ../sass/style.scss */
    #outer main section#section1 .wrapper .btn-dk-tai-truoc-mobile {
        top: 60%;
        transform: scale(1);
    }
}
/* line 359, ../sass/style.scss */
#outer main section#section1 .wrapper .info-game {
    width: 560px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 359, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game {
        left: 0;
        right: 0;
        margin: auto;
        top: 40%;
        height: auto;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 359, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game {
        left: 0;
        right: 0;
        margin: auto;
        width: 243px;
        height: 81px;
        top: 0;
        bottom: 0;
    }
}
/* line 395, ../sass/style.scss */
#outer main section#section1 .wrapper .info-game > img {
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 395, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game > img {
        width: 243px;
        height: 81px;
    }
}
/* line 401, ../sass/style.scss */
#outer main section#section1 .wrapper .info-game .btn-container {
    width: 480px;
    height: 150px;
    position: relative;
    margin: auto;
    margin-top: 30px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 401, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container {
        display: none;
    }
}
/* line 410, ../sass/style.scss */
#outer main section#section1 .wrapper .info-game .btn-container .link-img {
    display: inline-block;
    text-indent: -9999px;
}
    /* line 413, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container .link-img.app-store {
        width: 222px;
        height: 67px;
        background-image: url('../static/background/app-store.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        float: left;
        margin-bottom: 20px;
    }
        /* line 421, ../sass/style.scss */
        #outer main section#section1 .wrapper .info-game .btn-container .link-img.app-store:hover {
            filter: brightness(1.1);
        }
    /* line 425, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container .link-img.dk-tai-truoc {
        background-position: -450px -291px;
        height: 111px;
        width: 404px;
        display: block;
        margin: auto;
    }
    /* line 430, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container .link-img.google-icon {
        width: 222px;
        height: 67px;
        background-image: url('../static/background/google-play.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        float: right;
    }
        /* line 437, ../sass/style.scss */
        #outer main section#section1 .wrapper .info-game .btn-container .link-img.google-icon:hover {
            filter: brightness(1.1);
        }
    /* line 441, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container .link-img.nhap-code {
        margin: auto;
        display: block;
        clear: both;
        width: 222px;
        height: 67px;
        background-image: url('../static/background/nhapcode.svg');
        background-repeat: no-repeat;
        background-position: center;
    }
        /* line 449, ../sass/style.scss */
        #outer main section#section1 .wrapper .info-game .btn-container .link-img.nhap-code:hover {
            filter: brightness(1.1);
        }
    /* line 453, ../sass/style.scss */
    #outer main section#section1 .wrapper .info-game .btn-container .link-img.apk-store {
        margin: auto;
        display: block;
        clear: both;
        width: 222px;
        height: 67px;
        background-image: url('../static/background/apk.svg');
        background-repeat: no-repeat;
        background-position: center;
    }
        /* line 461, ../sass/style.scss */
        #outer main section#section1 .wrapper .info-game .btn-container .link-img.apk-store:hover {
            filter: brightness(1.1);
        }

/*2-->5*/
/* line 472, ../sass/style.scss */
#outer main section#section5 .wrapper {
    width: 100%;
    left: 0%;
    margin-left: 000px;
    height: 100%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 472, ../sass/style.scss */
    #outer main section#section5 .wrapper {
        height: calc(440px * 2);
    }
}
/* line 481, ../sass/style.scss */
#outer main section#section5 .wrapper .img-banner {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 481, ../sass/style.scss */
    #outer main section#section5 .wrapper .img-banner {
        display: none;
    }
}
/* line 486, ../sass/style.scss */
#outer main section#section5 .wrapper video {
    opacity: 0;
}
/* line 705, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play {
    width: calc(100% / 2);
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: all .6s ease;
    margin: auto;
    position: absolute;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 705, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play {
        display: block;
        width: 768px;
        height: 440px;
        display: inline-block;
        float: left;
        position: relative;
    }
}
/* line 724, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .mode-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
/* line 729, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .mode-bg-1 {
    position: absolute;
    left: 0;
    bottom: 0%;
    width: auto;
    height: auto;
    transform-origin: left bottom;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 729, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .mode-bg-1 {
        display: none;
    }
}
/* line 740, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .mode-bg-2 {
    position: absolute;
    left: 0;
    bottom: 0;
    top: 0;
    width: auto;
    height: auto;
    transform-origin: left top;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 860px) {
    /* line 740, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .mode-bg-2 {
        left: 0px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 740, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .mode-bg-2 {
        display: none;
    }
}
/* line 755, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .mode-bg-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: auto;
    height: auto;
    transform-origin: right top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 755, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .mode-bg-3 {
        display: none;
    }
}
/* line 769, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play.original-mode:nth-child(1) {
    width: calc(100% / 2) !important;
    left: 0 !important;
    right: 100% !important;
}
/* line 774, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play.original-mode:nth-child(2) {
    width: calc(100% / 2) !important;
    right: 0 !important;
}
/* line 779, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play.original-mode:nth-child(3) {
    width: calc(100% / 3) !important;
    right: 0 !important;
    left: auto !important;
}
/* line 785, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play:nth-child(1) {
    left: 0;
}
/* line 789, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play:nth-child(2) {
    right: 0;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 860px) {
    /* line 789, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(2) {
        left: calc(100% / 2);
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 789, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(2) {
        left: 0px;
    }
}
/* line 798, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play:nth-child(3) {
    right: 0;
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 803, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(1) {
        background-image: url('../static/background/mode-1-mobile-bg.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }
    /* line 807, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(2) {
        background-image: url('../static/background/mode-2-mobile-bg.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
    }
    /* line 811, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(3) {
        background-image: url('../static/background/mode-3-mobile-bg.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}
/* line 816, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .img-thumb {
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 364px;
    height: 364px;
    display: none;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 816, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .img-thumb {
        display: block;
    }
}
/* line 829, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play:nth-child(2) {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 830, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(2) .img-thumb {
        left: 16px;
        right: unset;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 835, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play:nth-child(2) .description-mode {
        left: unset;
        right: 0 !important;
    }
        /* line 838, ../sass/style.scss */
        #outer main section#section5 .wrapper .mode-play:nth-child(2) .description-mode h2 {
            text-align: right;
            background-image: linear-gradient(to left, rgba(255, 253, 59, 0.1), rgba(255, 253, 59, 0));
        }
            /* line 841, ../sass/style.scss */
            #outer main section#section5 .wrapper .mode-play:nth-child(2) .description-mode h2:after {
                content: '';
                display: inline-block;
                margin-left: 10px;
                height: 9px;
                width: 18px;
                background-image: url('../static/background/layout/left-arrow-yellow.png');
                position: absolute;
                left: 15%;
                bottom: 20%;
            }
        /* line 855, ../sass/style.scss */
        #outer main section#section5 .wrapper .mode-play:nth-child(2) .description-mode p {
            text-align: right;
        }
}
/* line 861, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .description-mode {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
    margin: auto;
    height: 100px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 861, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .description-mode {
        right: unset;
        width: 60%;
    }
}
/* line 874, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .description-mode p {
    font-family: inherit;
    font-style: normal;
    font-weight: 900;
    font-size: 3em;
    line-height: 30px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 5px 10px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 874, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .description-mode p {
        font-size: 60px;
        line-height: 34px;
        text-align: left;
        padding: 5px 20px;
    }
}
/* line 891, ../sass/style.scss */
#outer main section#section5 .wrapper .mode-play .description-mode h2 {
    font-family: inherit;
    margin-top: 10px;
    padding: 5px 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    color: #FFFFFF;
    background-image: linear-gradient(to right, transparent 0%, black 50%, transparent 100%);
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 891, ../sass/style.scss */
    #outer main section#section5 .wrapper .mode-play .description-mode h2 {
        font-size: 30px;
        top: 25%;
        line-height: 30px;
        background-image: transparent;
        background-image: linear-gradient(to right, rgba(255, 253, 59, 0.2), rgba(255, 253, 59, 0));
        text-align: left;
        padding: 5px 20px;
    }
        /* line 910, ../sass/style.scss */
        #outer main section#section5 .wrapper .mode-play .description-mode h2:after {
            content: '';
            display: inline-block;
            margin-left: 10px;
            height: 9px;
            width: 18px;
            background-image: url('../static/background/layout/right-arrow-yellow.png');
            transform: scale(2);
        }
}

/*3-->4*/
/* line 926, ../sass/style.scss */
#outer main section#section4 .wrapper {
    z-index: 2;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 926, ../sass/style.scss */
    #outer main section#section4 .wrapper {
        height: 1000px;
    }
}
/* line 931, ../sass/style.scss */
#outer main section#section4 .wrapper .img-banner {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 931, ../sass/style.scss */
    #outer main section#section4 .wrapper .img-banner {
        z-index: 0;
    }
}
/* line 936, ../sass/style.scss */
#outer main section#section4 .wrapper .center-frame {
    width: calc(100% / 3);
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 12%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 936, ../sass/style.scss */
    #outer main section#section4 .wrapper .center-frame {
        width: 70%;
        top: 7%;
    }
}
/* line 948, ../sass/style.scss */
#outer main section#section4 .wrapper .center-frame img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
/* line 956, ../sass/style.scss */
#outer main section#section4 .wrapper .gradient-frame {
    background-image: linear-gradient(180deg, rgba(25, 27, 26, 0) 0%, rgba(25, 27, 26, 0.7) 50%, #191b1a 100%);
    z-index: 9;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 40%;
    width: 100%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 956, ../sass/style.scss */
    #outer main section#section4 .wrapper .gradient-frame {
        background-image: none;
        height: 35%;
    }
}
/* line 970, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
}
    /* line 981, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img {
        opacity: 0;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 12%;
        margin: auto;
        height: 450px;
        -webkit-transition: .7s ease;
        -moz-transition: .7s ease;
        -o-transition: .7s ease;
        transition: .7s ease;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 981, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img {
        height: 715px;
        bottom: 20%;
    }
}
/* line 997, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img.ghost {
    left: -13%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: landscape) {
    /* line 997, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img.ghost {
        left: -5%;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 997, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img.ghost {
        left: -13%;
        width: 600px;
        height: 637px !important;
    }
}
/* line 1008, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .character-img.price {
    left: 5%;
}
/* line 1012, ../sass/style.scss */
#outer main section#section3 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper {
    width: 97%;
    z-index: 10;
    margin: auto;
    position: absolute;
    bottom: 0%;
    opacity: 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: landscape) {
    /* line 1012, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper {
        width: 50% !important;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1012, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper {
        bottom: 3% !important;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1012, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper {
        bottom: 3% !important;
    }
}
/* line 1028, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper h2 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 45px;
    line-height: 49px;
    text-align: center;
    font-family: inherit;
    color: #FFFFFF;
}
/* line 1039, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .char-des {
    font-family: inherit;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    color: #FFFFFF;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1039, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .char-des {
        font-size: 30px;
        line-height: 34px;
        display: none;
    }
}

@media (max-width: 860px) {
    /* line 1039, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .char-des {
        width: 90%;
        margin: auto;
    }
}
/* line 1055, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-master {
    font-family: inherit;
    font-weight: 200;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
    margin-top: 24px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1055, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-master {
        margin-top: 40px;
        font-size: 25px;
        line-height: 29px;
    }
}
/* line 1069, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .arrow-down {
    margin: 10px auto;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #FFE93B;
}
/* line 1077, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container {
    width: 562px;
    height: 35px;
    margin: 20px auto;
    position: relative;
    background-image: url('../static/background/component/decor.png');
    background-repeat: no-repeat;
    background-position: center;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1077, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container {
        margin: 40px auto;
    }
}
/* line 1090, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container .gun-component {
    width: fit-content;
    height: fit-content;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: -moz-fit-content;
    height: -moz-fit-content;
    display: block;
    width: 90%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1090, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container .gun-component {
        width: 100%;
    }
}
/* line 1108, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container .gun-img {
    display: inline-block;
    margin-left: 30px;
    vertical-align: top;
    margin-left: 30px;
    vertical-align: top;
    float: left;
    width: 200px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1116, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container .gun-img:nth-child(2) {
        float: right;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1108, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide .content-wrapper .gun-container .gun-img {
        width: 250px;
    }
}
/* line 1126, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-prev .character-img, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-next .character-img {
    filter: brightness(0.5);
    opacity: 1;
    height: 550px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1126, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-prev .character-img, #outer main section#section3 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-next .character-img {
        height: 715px;
    }
}
/* line 1136, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-active .character-img {
    filter: brightness(1);
    opacity: 1;
    height: 715px;
}
/* line 1141, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-wrapper .swiper-slide.swiper-slide-active .content-wrapper {
    opacity: 1;
    bottom: 0%;
    transition: .5s ease-in .5s;
}
/* line 1149, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-next {
    background-position: -658px -140px;
    height: 66px;
    width: 60px;
    color: transparent;
    right: 28%;
    top: 40%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1154, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-next.swiper-button-disabled {
        filter: brightness(0.5);
    }
    /* line 1157, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-next:hover {
        background-position: -778px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1149, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-next {
        right: 5%;
        width: 56px;
        height: 56px;
        background-image: url('../static/background/right-mob.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        top: 30%;
    }
        /* line 1168, ../sass/style.scss */
        #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-next:hover {
            right: 5%;
            width: 56px;
            height: 56px;
            background-image: url('../static/background/right-mob.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
}
/* line 1178, ../sass/style.scss */
#outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-prev {
    background-position: -858px -225px;
    height: 66px;
    width: 60px;
    color: transparent;
    left: 28%;
    top: 40%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1183, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-prev:hover {
        background-position: -718px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1178, ../sass/style.scss */
    #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-prev {
        left: 5%;
        width: 56px;
        height: 56px;
        background-image: url('../static/background/left-mob.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        top: 30%;
    }
        /* line 1194, ../sass/style.scss */
        #outer main section#section4 .wrapper .swiper-frame-3 .swiper-button-prev:hover {
            left: 5%;
            width: 56px;
            height: 56px;
            background-image: url('../static/background/left-mob.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            background-position: center;
        }
}

/*4-->2*/
/* line 1203, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-3 .swiper-button-prev.swiper-button-disabled {
    filter: brightness(0.5);
}
/* line 1211, ../sass/style.scss */
#outer main section#section2 .wrapper {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1211, ../sass/style.scss */
    #outer main section#section2 .wrapper {
        height: 680px;
    }
}
/* line 1215, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 {
    width: 1150px;
    height: 673px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 112px;
    bottom: 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1215, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 {
        width: 100%;
        height: 680px;
        top: 0;
    }
}
/* line 1230, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide {
    width: 673px !important;
    height: 460px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    filter: brightness(0.5);
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1230, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide {
        width: 100% !important;
        height: 100%;
    }
}
/* line 1238, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .wrapper-slide {
    display: none;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1238, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .wrapper-slide {
        height: calc(100%/4);
        width: 100%;
        position: absolute;
        bottom: 0;
        background-image: rgba(34, 34, 34, 0.9);
    }
}
/* line 1248, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow {
    position: relative;
    text-indent: 20px;
    width: fit-content;
    height: 81px;
    background-color: rgba(255, 233, 59, 0.25);
    display: inline-block;
    zoom: 1;
    padding: 10px 10px 10px 30px;
    line-height: 81px;
    padding-left: 10px;
    margin-left: 0;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1248, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow {
        background-image: transparent;
        padding: 0;
        padding-left: 0;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}
/* line 1277, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow span {
    line-height: 56px;
    height: 56px;
    color: white;
    font-family: inherit;
    font-weight: 900;
    font-size: 56px;
    text-align: center;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1277, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow span {
        font-size: 50px;
    }
}
/* line 1289, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 70px solid rgba(255, 233, 59, 0.25);
    border-bottom: 40px solid transparent;
    margin: -10px 90px 0 10px;
    top: 10px;
    left: calc(100% - 10px);
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1289, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .arrow:after {
        border-left: transparent;
    }
}
/* line 1305, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .des-slide {
    font-family: inherit;
    color: white;
    font-size: 18px;
    line-height: 22px;
    position: absolute;
    bottom: -110px;
    left: 5%;
    width: 50%;
    height: 100px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1305, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .des-slide {
        display: none;
        bottom: 10%;
        font-size: 30px;
        line-height: 34px;
        width: 60%;
    }
}
/* line 1327, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .mini-map {
    position: absolute;
    right: 0;
    bottom: -18%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1327, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .mini-map {
        display: none;
        right: 3%;
        bottom: 0;
        top: 0;
        margin: auto;
        transform: scale(0.8);
        transform-origin: right center;
    }
}
/* line 1343, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn {
    position: absolute;
    right: 18px;
    top: 18px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1343, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn {
        display: none;
    }
}
/* line 1350, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-in {
    display: inline-block;
    background-position: -794px 0;
    height: 29px;
    width: 29px;
}
/* line 1354, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-out {
    display: inline-block;
    background-position: -764px 0;
    height: 29px;
    width: 30px;
}
/* line 1358, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .control-btn .zoom-full {
    display: inline-block;
    background-position: -823px 0;
    height: 29px;
    width: 29px;
}
/* line 1363, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.swiper-slide-active {
    height: 460px;
    filter: brightness(1);
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1363, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.swiper-slide-active {
        height: 100%;
    }
}
/* line 1369, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.swiper-slide-active .wrapper-slide {
    display: block;
}
/* line 1373, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-1 {
    background-image: url('../static/background/slider/image-1.jpg') !important;
    background-size: cover;
}
    /* line 1376, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-1 a {
        width: 100%;
        height: 100%;
        display: block;
    }
/* line 1382, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-2 {
    background-image: url('../static/background/slider/image-2.jpg') !important;
    background-size: cover;
}
/* line 1386, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-3 {
    background-image: url('../static/background/slider/image-3.jpg') !important;
    background-size: cover;
}
/* line 1390, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-4 {
    background-image: url('../static/background/slider/image-4.jpg') !important;
    background-size: cover;
}
/* line 1394, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-5 {
    background-image: url('../static/background/slider/image-5.jpg') !important;
    background-size: cover;
}
/* line 1398, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide.slide-6 {
    background-image: url('../static/background/slider/image-1.jpg') !important;
    background-size: cover;
}
/* line 1402, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .zoom-bg {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
    /* line 1406, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-frame-4 .swiper-wrapper .swiper-slide .zoom-bg img {
        width: 100%;
        height: 100%;
    }
/* line 1415, ../sass/style.scss */
#outer main section#section2 .wrapper .vector-circle {
    position: absolute;
    left: 22px;
    right: 0;
    margin: auto;
    bottom: 293px;
}
/* line 1422, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-pagination-bullet {
    display: none;
}
    /* line 1424, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-pagination-bullet .path {
        display: none;
    }
    /* line 1427, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-image: url('../static/background/vector-circle-white.png') !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100%;
        background-position: center;
        background-color: transparent !important;
        width: 772px;
        height: 36px;
        margin: auto;
        display: block;
        position: absolute;
        left: 0;
        right: 0;
    }
        /* line 1438, ../sass/style.scss */
        #outer main section#section2 .wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active svg {
            transform: scaleX(-1);
            transform-origin: center;
            transform-box: fill-box;
        }
        /* line 1443, ../sass/style.scss */
        #outer main section#section2 .wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active .path {
            display: inline-block !important;
            stroke-dasharray: 2000;
            stroke-dashoffset: 2000;
            animation: dash linear 3s forwards;
            animation-iteration-count: unset;
            -webkit-animation: dash linear 3s forwards;
        }

@keyframes dash {
    from {
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
    }

    to {
        stroke-dasharray: 2000;
        stroke-dashoffset: 1240;
    }
}
/* line 1461, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-pagination-bullet.next {
    background-image: url('../static/background/layout/vector-circle-next.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    width: 155px;
    height: 74px;
    display: block;
    margin: auto;
    position: absolute;
    bottom: 16%;
    right: 5%;
    opacity: 1;
}
/* line 1473, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-pagination-bullet.pre {
    background-image: url('../static/background/layout/vector-circle-pre.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    width: 155px;
    height: 74px;
    display: block;
    margin: auto;
    position: absolute;
    bottom: 16%;
    left: 5%;
    opacity: 1;
}
/* line 1486, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-pagination-bullets {
    bottom: 17%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1486, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-pagination-bullets {
        display: none;
    }
}
/* line 1493, ../sass/style.scss */
#outer main section#section2 .wrapper .zoom {
    display: inline-block;
    position: relative;
    height: 460px;
    width: 673px !important;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1493, ../sass/style.scss */
    #outer main section#section2 .wrapper .zoom {
        width: 100% !important;
        height: 100%;
    }
}
/* line 1502, ../sass/style.scss */
#outer main section#section2 .wrapper .zoom:after {
    content: '';
    display: block;
    width: 33px;
    height: 33px;
    position: absolute;
    top: 0;
    right: 0;
}
/* line 1511, ../sass/style.scss */
#outer main section#section2 .wrapper .zoom .zoom-image {
    width: 100%;
    height: 100%;
}
/* line 1516, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-button-next {
    background-position: -658px -140px;
    height: 66px;
    width: 60px;
    color: transparent;
    right: 15%;
    top: 50%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1521, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-button-next:hover {
        background-position: -778px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1516, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-button-next {
        right: 5%;
        width: 56px;
        height: 56px;
        background-image: url('../static/background/right-mob-white.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
        /* line 1531, ../sass/style.scss */
        #outer main section#section2 .wrapper .swiper-button-next:hover {
            right: 5%;
            width: 56px;
            height: 56px;
            background-image: url('../static/background/right-mob-white.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
}
/* line 1541, ../sass/style.scss */
#outer main section#section2 .wrapper .swiper-button-prev {
    background-position: -858px -225px;
    height: 66px;
    width: 60px;
    color: transparent;
    left: 15%;
    top: 50%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1546, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-button-prev:hover {
        background-position: -718px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1541, ../sass/style.scss */
    #outer main section#section2 .wrapper .swiper-button-prev {
        left: 5%;
        width: 56px;
        height: 56px;
        background-image: url('../static/background/left-mob-white.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
        /* line 1556, ../sass/style.scss */
        #outer main section#section2 .wrapper .swiper-button-prev:hover {
            left: 5%;
            width: 56px;
            height: 56px;
            background-image: url('../static/background/left-mob-white.svg');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
}

/*5-->3*/
/* line 1569, ../sass/style.scss */
#outer main section#section3 .wrapper {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1569, ../sass/style.scss */
    #outer main section#section3 .wrapper {
        height: 950px;
    }
}
/* line 1574, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container {
    width: 1400px;
    height: 600px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1574, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container {
        width: 768px !important;
        height: 75%;
        padding-top: 50px;
    }
}
/* line 1588, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .link-img {
    display: block;
    position: absolute;
    bottom: 5%;
    left: 10%;
    text-align: center;
    line-height: 75px;
    font-family: inherit;
    font-style: normal;
    font-weight: 900;
    font-size: 19px;
    text-align: center;
    color: #222222;
    text-decoration: none;
    background-image: url('..../static/background/view-gun.svg');
    background-repeat: no-repeat;
    width: 285px;
    height: 75px;
    background-size: contain;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1611, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .link-img:hover {
        filter: brightness(1.3);
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1588, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .link-img {
        width: 420px;
        height: 105px;
        background-size: cover;
        font-size: 28px;
        line-height: 105px;
    }
}
/* line 1627, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .chart-img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1627, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .chart-img {
        position: relative;
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* line 1641, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
    /* line 1646, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .swiper-container.gallery-thumbs {
        width: 90%;
    }
/* line 1651, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top {
    height: 80%;
    width: 100%;
}
    /* line 1657, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide {
        overflow-x: hidden;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }
        /* line 1661, ../sass/style.scss */
        #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .all-gun {
            position: absolute;
            left: 7%;
            bottom: 10%;
            /* breakpoint: smartphone | desktop; */
            /* between desktop ~ smartphone */
        }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1661, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .all-gun {
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
    }
}
/* line 1674, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide:nth-child(6) .all-gun {
    left: 6%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1674, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide:nth-child(6) .all-gun {
        left: 50%;
    }
}
/* line 1682, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide:nth-child(7) .all-gun {
    left: 6%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1682, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide:nth-child(7) .all-gun {
        left: 50%;
    }
}
/* line 1689, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide p {
    font-family: inherit;
    font-weight: 200;
    font-size: 20px;
    line-height: 24px;
    color: #FFFFFF;
    opacity: 0.6;
    position: absolute;
    top: -75%;
    left: 10%;
    z-index: 9;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1689, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide p {
        font-size: 30px;
        line-height: 34px;
        top: -80%;
    }
}
/* line 1707, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide h2 {
    font-family: inherit;
    font-style: normal;
    font-weight: 900;
    font-size: 120px;
    line-height: 30px;
    text-align: left;
    color: #FFFFFF;
    position: absolute;
    top: -30%;
    left: 9%;
    z-index: 9;
}
/* line 1721, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .frame-gun {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 790px;
    height: 169px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1728, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .frame-gun .decor-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        object-fit: cover;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1721, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .frame-gun {
        position: relative;
        width: 100%;
        margin-top: 150px;
    }
}
/* line 1740, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .gun-top {
    position: absolute;
    top: 12%;
    left: 8%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1740, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-top .swiper-slide .gun-top {
        transform: scale(0.85);
        transform-origin: left top;
        left: 5%;
    }
}
/* line 1752, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
    /* line 1759, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-wrapper {
        width: 100%;
    }
    /* line 1762, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide {
        width: 20%;
        height: 100%;
        opacity: 0.6;
    }
        /* line 1766, ../sass/style.scss */
        #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:hover {
            opacity: 1;
        }
        /* line 1769, ../sass/style.scss */
        #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide p {
            font-family: inherit;
            font-size: 20px;
            line-height: 24px;
            text-align: center;
            color: #FFFFFF;
            /* breakpoint: smartphone | desktop; */
            /* between desktop ~ smartphone */
        }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1769, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide p {
        font-size: 30px;
        line-height: 34px;
    }
}
/* line 1780, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide .gun-thumb {
    width: 159px;
    height: 87px;
    display: block;
    margin: auto;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    cursor: pointer;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1780, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide .gun-thumb {
        width: 70%;
        height: 65%;
    }
}
/* line 1800, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(1) .gun-thumb {
    background-image: url('../static/component/gun/M4A1off.png');
    background-size: contain;
}
    /* line 1802, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(1) .gun-thumb:hover {
        background-image: url('../static/component/gun/M4A1.png');
        background-size: contain;
    }
/* line 1807, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(1).swiper-slide-thumb-active .gun-thumb {
    background-image: url('../static/component/gun/M4A1.png');
    background-size: contain;
}
/* line 1813, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(2) .gun-thumb {
    background-image: url('../static/component/gun/axebormboff.png');
    background-size: contain;
}
    /* line 1815, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(2) .gun-thumb:hover {
        background-image: url('../static/component/gun/axebormb.png');
        background-size: contain;
    }
/* line 1820, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(2).swiper-slide-thumb-active .gun-thumb {
    background-image: url('../static/component/gun/axebormb.png');
    background-size: contain;
}
/* line 1826, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(3) .gun-thumb {
    background-image: url('../static/component/gun/copoff.png');
    background-size: contain;
}
    /* line 1828, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(3) .gun-thumb:hover {
        background-image: url('../static/component/gun/cop.png');
        background-size: contain;
    }
/* line 1833, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(3).swiper-slide-thumb-active .gun-thumb {
    background-image: url('../static/component/gun/cop.png');
    background-size: contain;
}
/* line 1839, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(4) .gun-thumb {
    background-image: url('../static/component/gun/GrenadeSetoff.png');
    background-size: contain;
}
    /* line 1841, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(4) .gun-thumb:hover {
        background-image: url('../static/component/gun/grenadeset.png');
        background-size: contain;
    }
/* line 1846, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(4).swiper-slide-thumb-active .gun-thumb {
    background-image: url('../static/component/gun/grenadeset.png');
    background-size: contain;
}
/* line 1852, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(5) .gun-thumb {
    background-image: url('../static/component/gun/knucklesoff.png');
    background-size: contain;
}
    /* line 1854, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(5) .gun-thumb:hover {
        background-image: url('../static/component/gun/knuckles.png');
        background-size: contain;
    }
/* line 1859, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide:nth-child(5).swiper-slide-thumb-active .gun-thumb {
    background-image: url('../static/component/gun/knuckles.png');
    background-size: contain;
}
/* line 1891, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}
    /* line 1893, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide-thumb-active p {
        font-family: inherit;
        font-weight: 900;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        color: #FFE93B;
        opacity: 1;
        text-transform: uppercase;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1893, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .gallery-thumbs .swiper-slide-thumb-active p {
        font-size: 30px;
        line-height: 34px;
    }
}
/* line 1910, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .swiper-next-f5 {
    background-position: -658px -140px;
    height: 66px;
    width: 60px;
    color: transparent;
    top: 85%;
    right: 2%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1915, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .swiper-next-f5:hover {
        background-position: -778px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1910, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .swiper-next-f5 {
        display: none;
    }
}
/* line 1922, ../sass/style.scss */
#outer main section#section3 .wrapper .gallery-container .swiper-prev-f5 {
    background-position: -858px -225px;
    height: 66px;
    width: 60px;
    color: transparent;
    top: 85%;
    left: 2%;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 1927, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .swiper-prev-f5:hover {
        background-position: -718px -140px;
        height: 66px;
        width: 60px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1922, ../sass/style.scss */
    #outer main section#section3 .wrapper .gallery-container .swiper-prev-f5 {
        display: none;
    }
}
/* line 1937, ../sass/style.scss */
#outer main section#section6 {
    background-image: #FAFAFA;
}
    /* line 1939, ../sass/style.scss */
    #outer main section#section6 .wrapper {
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
        /* breakpoint: smartphone | desktop; */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1939, ../sass/style.scss */
    #outer main section#section6 .wrapper {
        height: auto !important;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1939, ../sass/style.scss */
    #outer main section#section6 .wrapper {
        height: auto !important;
    }
}
/* line 1949, ../sass/style.scss */
#outer main section#section6 .news-container {
    width: 1300px;
    height: 845px;
    margin: auto;
    position: absolute;
    top: 0%;
    left: 0;
    bottom: 0%;
    right: 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1949, ../sass/style.scss */
    #outer main section#section6 .news-container {
        width: 768px;
        height: auto;
        position: relative;
        padding-top: 50px;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1949, ../sass/style.scss */
    #outer main section#section6 .news-container {
        padding-bottom: 100px;
    }
}
/* line 1968, ../sass/style.scss */
#outer main section#section6 .news-container .link-all {
    clear: both;
    text-indent: -9999px;
    width: 155px;
    height: 57px;
    display: block;
    background-image: url('../static/background/link-all.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1968, ../sass/style.scss */
    #outer main section#section6 .news-container .link-all {
        margin-top: 50px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 1968, ../sass/style.scss */
    #outer main section#section6 .news-container .link-all {
        font-size: 35px;
        line-height: 39px;
        transform: scale(1.5);
        margin-top: 60px;
    }
}
/* line 1987, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 {
    width: 1380px;
    height: 340px;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 1987, ../sass/style.scss */
    #outer main section#section6 .news-container .swiper-container-f6 {
        width: 95%;
    }
}
/* line 1994, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-wrapper {
    height: 300px;
}
/* line 2001, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
/* line 2006, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-slide img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}
/* line 2013, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-pagination {
    bottom: 15%;
}
/* line 2016, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-pagination-bullet {
    background-image: #E8E8E8;
    opacity: 1;
    width: 15.36px;
    height: 15.36px;
}
/* line 2022, ../sass/style.scss */
#outer main section#section6 .news-container .swiper-container-f6 .swiper-pagination-bullet-active {
    background-image: #FFE93B;
}
/* line 2026, ../sass/style.scss */
#outer main section#section6 .news-container .news-col {
    width: 49%;
    height: 450px;
    display: inline-block;
    margin-top: 20px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2026, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col {
        display: block;
        float: none !important;
        margin: auto;
        height: auto;
        width: 95%;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2026, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col {
        height: auto;
        margin: 20px auto;
    }
}
/* line 2042, ../sass/style.scss */
#outer main section#section6 .news-container .news-col.left {
    float: left;
}
/* line 2045, ../sass/style.scss */
#outer main section#section6 .news-container .news-col.right {
    float: right;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2045, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col.right {
        display: none;
    }
}
/* line 2051, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2051, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .posts__tab {
        overflow: auto;
        white-space: nowrap;
    }
}
/* line 2056, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab li {
    display: inline-block;
    margin-right: 70px;
    margin-bottom: 20px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2056, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .posts__tab li {
        margin-bottom: 40px;
        margin-right: 10%;
    }
}
/* line 2064, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab li a {
    text-decoration: none;
    font-family: inherit;
    font-size: 22px;
    line-height: 26px;
    color: #222222;
    padding-bottom: 10px;
    opacity: 0.3;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2064, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .posts__tab li a {
        font-size: 30px;
        line-height: 34px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2064, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .posts__tab li a {
        font-size: 36px;
        line-height: 40px;
    }
}
/* line 2080, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab li a.active {
    border-bottom: 5px solid #FFE93B;
    opacity: 1;
    font-weight: bold;
}
/* line 2085, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab li a.tournament {
    border-bottom: 5px solid #FFE93B !important;
    opacity: 1;
    font-weight: bold;
    pointer-events: none;
}
/* line 2092, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .posts__tab li#tournament {
    display: none;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2092, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .posts__tab li#tournament {
        display: inline-block;
    }
}
/* line 2102, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail .updating-text {
    font-family: inherit;
    font-size: 22px;
    line-height: 38px;
    text-transform: capitalize;
    color: #222222;
    text-decoration: none;
    margin-top: 45px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2102, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail .updating-text {
        font-size: 27px;
        line-height: 31px;
    }
}
/* line 2115, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail#tournament {
    display: block !important;
}
/* line 2118, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul {
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2118, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul {
        margin-bottom: 40px;
    }
}
/* line 2122, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul li {
    font-family: inherit;
    font-size: 22px;
    line-height: 38px;
    text-transform: capitalize;
    color: #222222;
    text-decoration: none;
    margin-top: 20px;
    /* breakpoint: smartphone | desktop; */
}
    /* line 2123, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li hr {
        margin: 20px 0 0px 0;
        opacity: 0.3;
    }
    /* line 2137, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li:nth-last-child(1) {
        border-bottom: 0px;
    }
        /* line 2139, ../sass/style.scss */
        #outer main section#section6 .news-container .news-col .tab__detail ul li:nth-last-child(1) hr {
            display: none;
        }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2122, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li {
        margin-top: 10px;
        padding-bottom: 10px;
    }
}
/* line 2147, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul li .news-date {
    font-family: inherit;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    color: #222222;
    opacity: 0.2;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2147, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li .news-date {
        font-size: 30px;
        line-height: 34px;
        margin-bottom: 10px;
    }
}
/* line 2160, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul li .news-title {
    font-family: inherit;
    font-size: 22px;
    line-height: 26px;
    text-transform: capitalize;
    color: #222222;
    text-decoration: none;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2160, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title {
        display: block;
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2160, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title {
        font-size: 32px;
        line-height: 36px;
    }
}
/* line 2180, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    background-position: -706px -40px;
    height: 13px;
    width: 24px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2180, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:after {
        position: absolute;
        right: 7%;
    }
}
/* line 2190, ../sass/style.scss */
#outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:hover {
    font-weight: bold;
}
    /* line 2192, ../sass/style.scss */
    #outer main section#section6 .news-container .news-col .tab__detail ul li .news-title:hover:after {
        background-position: -682px -40px;
        height: 13px;
        width: 24px;
    }
/* line 2203, ../sass/style.scss */
#outer main section#section7 {
    padding-top: 20px;
    overflow: hidden;
    position: relative;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2203, ../sass/style.scss */
    #outer main section#section7 {
        padding-top: 40px;
    }
}
/* line 2231, ../sass/style.scss */
#outer main section#section7 .wrapper {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

/* line 2245, ../sass/style.scss */
#section-footer {
    padding-top: 20px;
    overflow: hidden;
    position: relative;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2245, ../sass/style.scss */
    #section-footer {
        padding-top: 40px;
    }
}
/* line 2272, ../sass/style.scss */
#section-footer .wrapper {
    display: block;
    width: 2000px;
    height: 1000px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -1000px;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
    max-width: unset;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2272, ../sass/style.scss */
    #section-footer .wrapper {
        width: 768px;
        height: auto;
        left: unset;
        margin-left: unset;
        top: unset;
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        -o-transform-origin: left top;
        transform-origin: left top;
    }
}

/* line 2307, ../sass/style.scss */
.footer .logo-top {
    background-position: -877px -40px;
    height: 60px;
    width: 60px;
    display: block;
    text-indent: -9999px;
    margin: auto;
    position: absolute;
    top: -0;
    left: 0;
    right: 0;
    transform-origin: center top;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 860px) {
    /* line 2307, ../sass/style.scss */
    .footer .logo-top {
        transform: scale(0.8);
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2307, ../sass/style.scss */
    .footer .logo-top {
        transform: scale(0.9);
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2307, ../sass/style.scss */
    .footer .logo-top {
        transform: scale(0.7);
    }
}
/* line 2328, ../sass/style.scss */
.footer .wrapper .footer-info {
    position: absolute;
    height: 90%;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}
/* line 2337, ../sass/style.scss */
.footer .wrapper .logo-container {
    width: 932px;
    height: 90px;
    position: relative;
    margin: auto;
    margin-top: 55px;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 860px) {
    /* line 2337, ../sass/style.scss */
    .footer .wrapper .logo-container {
        margin-top: 30px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2337, ../sass/style.scss */
    .footer .wrapper .logo-container {
        width: 88%;
        height: 41px;
        margin-bottom: 20px;
        margin-top: 30px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2337, ../sass/style.scss */
    .footer .wrapper .logo-container {
        margin-top: 20px;
    }
}
/* line 2356, ../sass/style.scss */
.footer .wrapper .logo-container img {
    position: absolute;
    top: 0;
    bottom: -45px;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2356, ../sass/style.scss */
    .footer .wrapper .logo-container img {
        transform: scale(0.7);
        transform-origin: left;
    }
}
/* line 2392, ../sass/style.scss */
.footer .wrapper .gun-master {
    font-family: inherit;
    font-weight: 200;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    width: max-content;
    margin-top: 20px;
}
/* line 2402, ../sass/style.scss */
.footer .wrapper .arrow-down {
    margin: 0px auto;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #FFE93B;
}
/* line 2410, ../sass/style.scss */
.footer .wrapper .social-btn {
    width: 204px;
    height: 30px;
    margin: 20px auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2410, ../sass/style.scss */
    .footer .wrapper .social-btn {
        width: 300px;
        height: 50px;
    }
}
/* line 2418, ../sass/style.scss */
.footer .wrapper .social-btn ul {
    width: 100%;
    display: table;
}
    /* line 2421, ../sass/style.scss */
    .footer .wrapper .social-btn ul li {
        display: table-cell;
    }
        /* line 2423, ../sass/style.scss */
        .footer .wrapper .social-btn ul li .link-img {
            display: inline-block;
            text-indent: -9999px;
            float: left;
            width: 35px;
            height: 35px;
            /* breakpoint: smartphone | desktop; */
            /* between desktop ~ smartphone */
        }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2423, ../sass/style.scss */
    .footer .wrapper .social-btn ul li .link-img {
        width: 50px;
        height: 50px;
    }
}
/* line 2433, ../sass/style.scss */
.footer .wrapper .social-btn ul li .link-img.logo-face {
    background-image: url('../static/background/fb-footer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* line 2437, ../sass/style.scss */
.footer .wrapper .social-btn ul li .link-img.logo-vector {
    background-image: url('../static/background/instagram-footer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* line 2441, ../sass/style.scss */
.footer .wrapper .social-btn ul li .link-img.logo-youtube {
    background-image: url('../static/background/youtube-footer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* line 2445, ../sass/style.scss */
.footer .wrapper .social-btn ul li .link-img.logo-tw {
    background-image: url('../static/background/twitter-footer.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* line 2449, ../sass/style.scss */
.footer .wrapper .social-btn ul li .link-img.logo-fb-group {
    background-image: url('../static/background/fb-group.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* line 2457, ../sass/style.scss */
.footer .wrapper .copy-right {
    width: 1270px;
    height: 93px;
    margin: 20px auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2457, ../sass/style.scss */
    .footer .wrapper .copy-right {
        width: 95%;
    }
}
/* line 2465, ../sass/style.scss */
.footer .wrapper .copy-right img {
    display: inline-block;
    vertical-align: middle;
}
/* line 2469, ../sass/style.scss */
.footer .wrapper .copy-right p {
    width: 1080px;
    display: inline-block;
    vertical-align: middle;
    font-family: inherit;
    font-size: 15px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.75;
    margin-left: 20px;
    margin-left: 30px;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2469, ../sass/style.scss */
    .footer .wrapper .copy-right p {
        width: 100%;
        font-size: 15px;
        line-height: 19px;
        margin-left: 15px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2469, ../sass/style.scss */
    .footer .wrapper .copy-right p {
        font-size: 15px;
        line-height: 19px;
        margin-left: 5px;
    }
}
/* line 2499, ../sass/style.scss */
.footer .wrapper hr {
    color: #FFFFFF;
    margin: 0px 0 20px 0;
    opacity: 0.3;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2499, ../sass/style.scss */
    .footer .wrapper hr {
        margin: 0px 0 18px 0;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2499, ../sass/style.scss */
    .footer .wrapper hr {
        margin: 0px 0 30px 0;
    }
}
/* line 2511, ../sass/style.scss */
.footer .wrapper > p {
    width: 1040px;
    margin: auto;
    font-family: inherit;
    font-size: 15px;
    line-height: 19px;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.75;
    text-align: center;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2511, ../sass/style.scss */
    .footer .wrapper > p {
        font-size: 13px;
        line-height: 19px;
        text-align: center;
        width: max-content;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2511, ../sass/style.scss */
    .footer .wrapper > p {
        font-size: 13px;
        line-height: 19px;
    }
}

/* line 2533, ../sass/style.scss */
#fp-nav {
    right: 10% !important;
}
    /* line 2536, ../sass/style.scss */
    #fp-nav ul li {
        width: 16px !important;
        height: 16px !important;
        margin: 20px !important;
    }
        /* line 2541, ../sass/style.scss */
        #fp-nav ul li:hover span {
            margin: -2px 0 0 -2px !important;
        }
        /* line 2545, ../sass/style.scss */
        #fp-nav ul li a {
            width: 16px !important;
            height: 16px !important;
        }
            /* line 2549, ../sass/style.scss */
            #fp-nav ul li a.active span {
                margin: -2px 0 0 -2px !important;
                background-image: #FFE93B !important;
            }
            /* line 2554, ../sass/style.scss */
            #fp-nav ul li a span {
                width: 16px !important;
                height: 16px !important;
                background-image: transparent !important;
                background-image: #E8E8E8 !important;
            }

/* line 2568, ../sass/style.scss */
.content-outer {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
}
    /* line 2573, ../sass/style.scss */
    .content-outer .nav {
        z-index: 99;
    }
    /* line 2576, ../sass/style.scss */
    .content-outer .banner-header {
        display: block;
        width: 100%;
        height: 400px;
        background-image: url('../static/background/content-bg.jpg') center no-repeat;
        background-size: cover;
        /* breakpoint: smartphone | desktop; */
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
        /* breakpoint: smartphone | desktop; */
    }

@media (max-width: 860px) {
    /* line 2576, ../sass/style.scss */
    .content-outer .banner-header {
        height: 256px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2576, ../sass/style.scss */
    .content-outer .banner-header {
        width: 100%;
        height: 500px;
        background-image: url('../static/background/content-bg-mobile.jpg');
        background-repeat: no-repeat;
        background-position: center right;
        background-size: cover;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2576, ../sass/style.scss */
    .content-outer .banner-header {
        height: 256px;
    }
}
/* line 2594, ../sass/style.scss */
.content-outer .banner-header .swiper-banner {
    width: 100%;
    height: 100%;
    margin: auto;
    transform-origin: left top;
}
    /* line 2599, ../sass/style.scss */
    .content-outer .banner-header .swiper-banner .swiper-wrapper {
        height: 100%;
    }
    /* line 2602, ../sass/style.scss */
    .content-outer .banner-header .swiper-banner .swiper-slide {
        background-image: url('../static/background/content-bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    /* line 2607, ../sass/style.scss */
    .content-outer .banner-header .swiper-banner .swiper-pagination-bullet {
        background-image: #E8E8E8;
        opacity: 1;
        width: 15.36px;
        height: 15.36px;
    }
    /* line 2613, ../sass/style.scss */
    .content-outer .banner-header .swiper-banner .swiper-pagination-bullet-active {
        background-image: #FFE93B;
    }
/* line 2618, ../sass/style.scss */
.content-outer section {
    padding-top: 40px;
    background-image: #FBFBFB;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2618, ../sass/style.scss */
    .content-outer section {
        padding-top: 50px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2618, ../sass/style.scss */
    .content-outer section {
        padding-top: 30px;
    }
}
/* line 2627, ../sass/style.scss */
.content-outer section .wrapper {
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 2627, ../sass/style.scss */
    .content-outer section .wrapper {
        max-width: 100%;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2627, ../sass/style.scss */
    .content-outer section .wrapper {
        max-width: 100%;
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2627, ../sass/style.scss */
    .content-outer section .wrapper {
        padding-bottom: 70px;
    }
}
/* line 2643, ../sass/style.scss */
.content-outer section .title-post {
    width: 100%;
}
    /* line 2645, ../sass/style.scss */
    .content-outer section .title-post img {
        width: 100%;
        object-fit: cover;
    }
    /* line 2649, ../sass/style.scss */
    .content-outer section .title-post .info-post {
        padding: 15px 0;
        border-bottom: 0.25px solid rgba(0, 0, 0, 0.75);
        position: relative;
        width: 100%;
    }
        /* line 2654, ../sass/style.scss */
        .content-outer section .title-post .info-post .date-news {
            display: inline-block;
        }
            /* line 2658, ../sass/style.scss */
            .content-outer section .title-post .info-post .date-news p {
                display: inline-block;
                font-family: inherit;
                font-size: 18px;
                line-height: 22px;
                color: #222222;
            }
                /* line 2664, ../sass/style.scss */
                .content-outer section .title-post .info-post .date-news p.cate-name {
                    font-weight: bold;
                }
                    /* line 2666, ../sass/style.scss */
                    .content-outer section .title-post .info-post .date-news p.cate-name:after {
                        content: '\00b7';
                        font-size: 35px;
                        vertical-align: sub;
                        margin-left: 10px;
                        margin-right: 7px;
                        /* breakpoint: smartphone | desktop; */
                        /* between desktop ~ smartphone */
                    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2666, ../sass/style.scss */
    .content-outer section .title-post .info-post .date-news p.cate-name:after {
        font-size: 27px;
    }
}
/* line 2677, ../sass/style.scss */
.content-outer section .title-post .info-post .date-news p.date {
    opacity: 0.3;
}
/* line 2682, ../sass/style.scss */
.content-outer section .title-post .info-post .social-btn {
    display: inline-block;
    width: 10%;
    float: right;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2682, ../sass/style.scss */
    .content-outer section .title-post .info-post .social-btn {
        width: 10%;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2682, ../sass/style.scss */
    .content-outer section .title-post .info-post .social-btn {
        width: 20%;
    }
}
/* line 2692, ../sass/style.scss */
.content-outer section .title-post .info-post .social-btn ul {
    width: 100%;
    display: table;
}
    /* line 2695, ../sass/style.scss */
    .content-outer section .title-post .info-post .social-btn ul li {
        display: table-cell;
    }
        /* line 2697, ../sass/style.scss */
        .content-outer section .title-post .info-post .social-btn ul li .link-img {
            display: inline-block;
            text-indent: -9999px;
            float: left;
            float: right;
            margin-left: 10px;
            width: 24px;
            height: 24px;
        }
            /* line 2705, ../sass/style.scss */
            .content-outer section .title-post .info-post .social-btn ul li .link-img.logo-face {
                background-image: url('../static/background/fb-blue.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            /* line 2709, ../sass/style.scss */
            .content-outer section .title-post .info-post .social-btn ul li .link-img.logo-mess {
                background-image: url('../static/background/messenger-blue.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            /* line 2713, ../sass/style.scss */
            .content-outer section .title-post .info-post .social-btn ul li .link-img.logo-tw {
                background-image: url('../static/background/twitter-blue.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
            /* line 2717, ../sass/style.scss */
            .content-outer section .title-post .info-post .social-btn ul li .link-img.logo-fb-group {
                background-image: url('../static/background/twitter-blue.svg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }
/* line 2727, ../sass/style.scss */
.content-outer section .article-detail {
    width: 100%;
}
    /* line 2729, ../sass/style.scss */
    .content-outer section .article-detail .tag-container {
        width: 100%;
        border-top: 0.25px solid rgba(0, 0, 0, 0.75);
    }
        /* line 2732, ../sass/style.scss */
        .content-outer section .article-detail .tag-container a {
            width: fit-content;
            display: inline-block;
            font-family: inherit;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
            text-transform: uppercase;
            color: #222222;
            background-image: #EAEAEA;
            padding: 5px 14px;
            margin: 14px 14px 5px 0;
        }
/* line 2747, ../sass/style.scss */
.content-outer section .news-detail {
    margin-right: 2.35765%;
    width: 65.88078%;
    display: inline-block;
    float: left;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 2747, ../sass/style.scss */
    .content-outer section .news-detail {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2747, ../sass/style.scss */
    .content-outer section .news-detail {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}

@media (max-width: 860px) {
    /* line 2747, ../sass/style.scss */
    .content-outer section .news-detail {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}
/* line 2775, ../sass/style.scss */
.content-outer section .highlight-news {
    width: 33%;
    display: inline-block;
    float: right;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 2775, ../sass/style.scss */
    .content-outer section .highlight-news {
        display: block;
        width: 90%;
        margin-right: 0;
        margin: auto;
        float: none;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2775, ../sass/style.scss */
    .content-outer section .highlight-news {
        display: block;
        width: 90%;
        margin-right: 0;
        margin: auto;
        float: none;
    }
}

@media (max-width: 860px) {
    /* line 2775, ../sass/style.scss */
    .content-outer section .highlight-news {
        display: block;
        width: 90%;
        margin-right: 0;
        margin: auto;
        float: none;
    }
}
/* line 2804, ../sass/style.scss */
.content-outer section .highlight-news ul {
    width: 100%;
    margin-top: 20px;
}
    /* line 2807, ../sass/style.scss */
    .content-outer section .highlight-news ul li {
        height: 238px;
        width: 100%;
        position: relative;
        margin-bottom: 12px;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
        /* breakpoint: smartphone | desktop; */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2807, ../sass/style.scss */
    .content-outer section .highlight-news ul li {
        margin-bottom: 35px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2807, ../sass/style.scss */
    .content-outer section .highlight-news ul li {
        margin-bottom: 25px;
    }
}
/* line 2819, ../sass/style.scss */
.content-outer section .highlight-news ul li:hover .highlight-content {
    filter: brightness(1.5);
}
/* line 2824, ../sass/style.scss */
.content-outer section .highlight-news ul li .thumb-img {
    position: absolute;
    width: 100%;
    height: 100%;
}
    /* line 2828, ../sass/style.scss */
    .content-outer section .highlight-news ul li .thumb-img img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* line 2835, ../sass/style.scss */
.content-outer section .highlight-news ul li .highlight-content {
    width: 100%;
    height: max-content;
    background-image: rgba(34, 34, 34, 0.85);
    position: absolute;
    bottom: 0;
    padding: 7px 11px;
    filter: brightness(0.7);
}
    /* line 2843, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content a {
        text-decoration: none;
    }
    /* line 2846, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content .date-news {
        width: 100%;
    }
        /* line 2848, ../sass/style.scss */
        .content-outer section .highlight-news ul li .highlight-content .date-news p {
            display: inline-block;
            font-family: inherit;
            font-size: 18px;
            line-height: 22px;
            color: white;
            /* breakpoint: smartphone | desktop; */
        }

@media (max-width: 860px) {
    /* line 2848, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content .date-news p {
        font-size: 14px;
        line-height: 25px;
    }
}
/* line 2858, ../sass/style.scss */
.content-outer section .highlight-news ul li .highlight-content .date-news p.cate-name {
    font-weight: bold;
    text-transform: uppercase;
}
    /* line 2861, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content .date-news p.cate-name:after {
        content: '\00b7';
        font-size: 35px;
        vertical-align: sub;
        margin-left: 10px;
        margin-right: 7px;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2861, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content .date-news p.cate-name:after {
        font-size: 27px;
    }
}
/* line 2872, ../sass/style.scss */
.content-outer section .highlight-news ul li .highlight-content .date-news p.date {
    opacity: 0.3;
}
/* line 2877, ../sass/style.scss */
.content-outer section .highlight-news ul li .highlight-content p {
    font-family: inherit;
    font-size: 18px;
    line-height: 24px;
    color: #FFFFFF;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2877, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content p {
        font-size: 22px;
        line-height: 26px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2877, ../sass/style.scss */
    .content-outer section .highlight-news ul li .highlight-content p {
        font-size: 18px;
        line-height: 22px;
    }
}
/* line 2895, ../sass/style.scss */
.content-outer section .list-news {
    margin-right: 4%;
    width: calc(100% - 4% - 33%);
    display: inline-block;
    float: left;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 2895, ../sass/style.scss */
    .content-outer section .list-news {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2895, ../sass/style.scss */
    .content-outer section .list-news {
        display: block;
        width: 90%;
        margin-right: 0;
        margin: auto;
        float: none;
    }
}

@media (max-width: 860px) {
    /* line 2895, ../sass/style.scss */
    .content-outer section .list-news {
        display: block;
        width: 90%;
        margin-right: 0;
        margin: auto;
        float: none;
    }
}
/* line 2922, ../sass/style.scss */
.content-outer section .list-news .posts__tab {
    overflow: auto;
    white-space: nowrap;
}
    /* line 2925, ../sass/style.scss */
    .content-outer section .list-news .posts__tab li {
        display: inline-block;
        margin-right: 70px;
        margin-bottom: 40px;
        /* breakpoint: smartphone | desktop; */
    }

@media (max-width: 860px) {
    /* line 2925, ../sass/style.scss */
    .content-outer section .list-news .posts__tab li {
        margin-right: 8%;
    }
}
/* line 2933, ../sass/style.scss */
.content-outer section .list-news .posts__tab li a {
    text-decoration: none;
    font-family: inherit;
    font-size: 22px;
    line-height: 26px;
    color: #222222;
    padding-bottom: 10px;
    opacity: 0.3;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 860px) {
    /* line 2933, ../sass/style.scss */
    .content-outer section .list-news .posts__tab li a {
        font-size: 15px;
        line-height: 18px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2933, ../sass/style.scss */
    .content-outer section .list-news .posts__tab li a {
        font-size: 28px;
        line-height: 32px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2933, ../sass/style.scss */
    .content-outer section .list-news .posts__tab li a {
        font-size: 18px;
        line-height: 22px;
    }
}
/* line 2953, ../sass/style.scss */
.content-outer section .list-news .posts__tab li a.active {
    border-bottom: 5px solid #FFE93B;
    opacity: 1;
    font-weight: bold;
}
/* line 2961, ../sass/style.scss */
.content-outer section .list-news .tab__detail {
    position: relative;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 2961, ../sass/style.scss */
    .content-outer section .list-news .tab__detail {
        padding-bottom: 0;
    }
}

@media (max-width: 860px) {
    /* line 2961, ../sass/style.scss */
    .content-outer section .list-news .tab__detail {
        padding-bottom: 0;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 2961, ../sass/style.scss */
    .content-outer section .list-news .tab__detail {
        padding-bottom: 0;
    }
}
/* line 3193, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li {
    padding: 0px 0 20px 0;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}
    /* line 3198, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li:hover .info-news {
        background-image: #E0E0E0;
    }

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 3193, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li {
        height: auto;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3193, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li {
        padding: 15px 0 0px 0;
        height: auto;
    }
}

@media (max-width: 860px) {
    /* line 3193, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li {
        height: auto;
    }
}
/* line 3214, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li:nth-last-child(1) {
    border-bottom: 0px;
}
    /* line 3216, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li:nth-last-child(1) hr {
        display: none;
    }
/* line 3220, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li:nth-child(1) {
    padding: 0 0 20px 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3220, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li:nth-child(1) {
        padding: 0 0 10px 0;
    }
}
/* line 3226, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li hr {
    margin: 20px 0 0px 0;
    opacity: 0.3;
}
/* line 3230, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li a {
    text-decoration: none;
    font-family: inherit;
}
/* line 3234, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li .date-news {
    display: inline-block;
    font-family: inherit;
    margin-bottom: 8px;
}
    /* line 3238, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li .date-news a {
        display: inline-block;
        font-size: 18px;
        line-height: 22px;
        color: #222222;
        /* breakpoint: smartphone | desktop; */
    }

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3238, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li .date-news a {
        font-size: 16px;
    }
}
/* line 3246, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li .date-news a .cate-name {
    font-weight: bold;
}
/* line 3249, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li .date-news a:after {
    content: '\00b7';
    font-size: 35px;
    vertical-align: sub;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3249, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li .date-news a:after {
        font-size: 27px;
    }
}
/* line 3258, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li .date-news time {
    font-size: 18px;
    line-height: 22px;
    color: #222222;
    opacity: 0.3;
}
/* line 3265, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li h3 {
    font-family: inherit;
    color: #222222;
    font-style: normal;
    font-weight: normal;
    font-size: 22px;
    line-height: 26px;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3265, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li h3 {
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
/* line 3278, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li h3:after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    background-position: -706px -40px;
    height: 13px;
    width: 24px;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3278, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li h3:after {
        position: absolute;
        right: 0;
    }
}
/* line 3288, ../sass/style.scss */
.content-outer section .list-news .tab__detail ul li h3:hover {
    font-weight: bold;
}
    /* line 3290, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li h3:hover:after {
        background-position: -682px -40px;
        height: 13px;
        width: 24px;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3265, ../sass/style.scss */
    .content-outer section .list-news .tab__detail ul li h3 {
        font-size: 16px;
        line-height: 20px;
    }
}
/* line 3303, ../sass/style.scss */
.content-outer section .load-more {
    display: block;
    text-indent: -9999px;
    margin: auto;
    position: absolute;
    bottom: -15%;
    left: 0;
    right: 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3303, ../sass/style.scss */
    .content-outer section .load-more {
        bottom: 3%;
    }
}

@media (max-width: 860px) {
    /* line 3303, ../sass/style.scss */
    .content-outer section .load-more {
        bottom: 3%;
    }
}
/* line 3319, ../sass/style.scss */
.content-outer section .related-news {
    width: 30%;
    display: inline-block;
    float: right;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (min-width: 1024px) and (max-width: 1024px) {
    /* line 3319, ../sass/style.scss */
    .content-outer section .related-news {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3319, ../sass/style.scss */
    .content-outer section .related-news {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}

@media (max-width: 860px) {
    /* line 3319, ../sass/style.scss */
    .content-outer section .related-news {
        width: 90%;
        float: none;
        margin-right: 0;
        display: block;
        margin: auto;
    }
}
/* line 3345, ../sass/style.scss */
.content-outer section .related-news ul {
    width: 100%;
    margin-top: 20px;
}
    /* line 3348, ../sass/style.scss */
    .content-outer section .related-news ul li {
        height: 93px;
        margin-bottom: 35px;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3348, ../sass/style.scss */
    .content-outer section .related-news ul li {
        overflow: hidden;
        margin-bottom: 15px;
    }
}
/* line 3355, ../sass/style.scss */
.content-outer section .related-news ul li img {
    width: 116px;
    height: 93px;
    display: inline-block;
    object-fit: cover;
}
/* line 3361, ../sass/style.scss */
.content-outer section .related-news ul li .info-news {
    display: inline-block;
    width: calc(100% - 130px);
    float: right;
    position: relative;
    border-bottom: 0.25px solid rgba(0, 0, 0, 0.5);
    height: 100%;
}
    /* line 3368, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news .date-news {
        display: inline-block;
        width: 100%;
    }
        /* line 3371, ../sass/style.scss */
        .content-outer section .related-news ul li .info-news .date-news p {
            display: inline-block;
            font-family: inherit;
            font-size: 18px;
            line-height: 22px;
            color: #222222;
            /* breakpoint: smartphone | desktop; */
            /* breakpoint: smartphone | desktop; */
        }

@media (max-width: 860px) {
    /* line 3371, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news .date-news p {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    /* line 3371, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news .date-news p {
        font-size: 12px;
    }
}
/* line 3383, ../sass/style.scss */
.content-outer section .related-news ul li .info-news .date-news p.cate-name {
    font-weight: bold;
    text-transform: uppercase;
}
    /* line 3386, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news .date-news p.cate-name:after {
        content: '\00b7';
        font-size: 35px;
        vertical-align: sub;
        margin-left: 10px;
        margin-right: 7px;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3386, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news .date-news p.cate-name:after {
        font-size: 27px;
    }
}
/* line 3397, ../sass/style.scss */
.content-outer section .related-news ul li .info-news .date-news p.date {
    opacity: 0.3;
}
/* line 3402, ../sass/style.scss */
.content-outer section .related-news ul li .info-news > a {
    font-family: inherit;
    font-size: 16px;
    line-height: 22px;
    color: #222222;
    text-decoration: none;
    margin-top: 10px;
    /* breakpoint: smartphone | desktop; */
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}
    /* line 3411, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news > a:hover {
        font-weight: bold;
    }
        /* line 3413, ../sass/style.scss */
        .content-outer section .related-news ul li .info-news > a:hover:after {
            background-position: -682px -40px;
            height: 13px;
            width: 24px;
        }

@media (max-width: 860px) {
    /* line 3402, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news > a {
        font-size: 13px;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3402, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news > a {
        font-size: 15px;
    }
}

@media (max-width: 320px) {
    /* line 3402, ../sass/style.scss */
    .content-outer section .related-news ul li .info-news > a {
        font-size: 12px;
    }
}
/* line 3426, ../sass/style.scss */
.content-outer section .related-news ul li .info-news > a:after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    background-position: -706px -40px;
    height: 13px;
    width: 24px;
}
/* line 3437, ../sass/style.scss */
.content-outer section .title-relate {
    font-family: inherit;
    font-weight: bold;
    font-size: 22px;
    line-height: 34px;
    color: #222222;
    width: max-content;
    padding-bottom: 5px;
    border-bottom: 5px solid #FFE93B;
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 860px) {
    /* line 3437, ../sass/style.scss */
    .content-outer section .title-relate {
        font-size: 16px;
        line-height: 18px;
    }
}
/* line 3452, ../sass/style.scss */
.content-outer .gun-list {
    background-image: url('../static/background/gun-bg.png');
    background-size: cover;
    color: white;
}
    /* line 3456, ../sass/style.scss */
    .content-outer .gun-list h3 {
        font-family: inherit;
        font-style: normal;
        font-weight: bold;
        font-size: 30px;
        line-height: 30px;
        text-align: center;
        margin-bottom: 30px;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3456, ../sass/style.scss */
    .content-outer .gun-list h3 {
        font-size: 16px;
        margin-bottom: 10px;
    }
}
/* line 3469, ../sass/style.scss */
.content-outer .gun-list table {
    width: 100%;
    border: 1px solid #424242;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3469, ../sass/style.scss */
    .content-outer .gun-list table {
        width: 90%;
        margin: auto;
    }
}
/* line 3476, ../sass/style.scss */
.content-outer .gun-list table .gun-img {
    max-width: 180px;
}
/* line 3480, ../sass/style.scss */
.content-outer .gun-list table .row-des {
    background-image: #242424;
}
    /* line 3482, ../sass/style.scss */
    .content-outer .gun-list table .row-des td {
        padding: 42px 30px 30px 30px;
        font-family: inherit;
        font-weight: 300;
        font-size: 16px;
        line-height: 22px;
        color: #FFFFFF;
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3482, ../sass/style.scss */
    .content-outer .gun-list table .row-des td {
        padding: 14px;
        font-size: 15px;
    }
}
/* line 3495, ../sass/style.scss */
.content-outer .gun-list table .title-table {
    background-image: #1D1D1D;
    border: 1px solid #424242;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 3498, ../sass/style.scss */
    .content-outer .gun-list table .title-table td {
        padding: 21px 0 25px 0;
        text-align: center;
        font-family: inherit;
        font-style: normal;
        font-weight: 300;
        font-size: 20px;
        line-height: 24px;
        color: #FFFFFF;
        text-transform: uppercase;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3495, ../sass/style.scss */
    .content-outer .gun-list table .title-table {
        display: none;
    }
}
/* line 3513, ../sass/style.scss */
.content-outer .gun-list table tbody {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 3514, ../sass/style.scss */
    .content-outer .gun-list table tbody tr {
        /* breakpoint: smartphone | desktop; */
        /* between desktop ~ smartphone */
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3514, ../sass/style.scss */
    .content-outer .gun-list table tbody tr {
        border-right: 1px solid #424242;
    }
}
/* line 3518, ../sass/style.scss */
.content-outer .gun-list table tbody tr td {
    padding: 42px 0 30px 0;
    text-align: center;
    font-family: inherit;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #949494;
    width: calc((100% - 22%)/6);
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3518, ../sass/style.scss */
    .content-outer .gun-list table tbody tr td {
        font-size: 15px;
        line-height: 18px;
    }
        /* line 3531, ../sass/style.scss */
        .content-outer .gun-list table tbody tr td:nth-child(2) {
            padding: 20px 0 10px 0;
        }
        /* line 3534, ../sass/style.scss */
        .content-outer .gun-list table tbody tr td:nth-child(7) {
            padding: 10px 0 20px 0;
        }
}
/* line 3539, ../sass/style.scss */
.content-outer .gun-list table tbody tr td span:nth-child(1) {
    display: none;
}
/* line 3543, ../sass/style.scss */
.content-outer .gun-list table tbody tr td:nth-child(1) {
    font-weight: 600;
    font-size: 22px;
    line-height: 26px;
    color: #FFFFFF;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3543, ../sass/style.scss */
    .content-outer .gun-list table tbody tr td:nth-child(1) {
        border-bottom: 1px solid #424242;
        font-size: 16px;
        line-height: 18px;
        background-image: #1D1D1D;
        width: 100% !important;
    }
}
/* line 3556, ../sass/style.scss */
.content-outer .gun-list table tbody tr td:nth-child(2) {
    width: 22%;
}
/* line 3561, ../sass/style.scss */
.content-outer .gun-list table tbody tr:nth-child(even) {
    background-image: #282828;
}
/* line 3564, ../sass/style.scss */
.content-outer .gun-list table tbody tr:nth-child(odd) {
    background-image: #242424;
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3513, ../sass/style.scss */
    .content-outer .gun-list table tbody {
        display: block;
    }
        /* line 3569, ../sass/style.scss */
        .content-outer .gun-list table tbody tr {
            display: block;
        }
            /* line 3571, ../sass/style.scss */
            .content-outer .gun-list table tbody tr td {
                padding: 10px 0 10px 0;
                display: block;
                width: 85% !important;
                overflow: auto;
                margin: auto;
            }
                /* line 3581, ../sass/style.scss */
                .content-outer .gun-list table tbody tr td span {
                    display: inline-block;
                    width: 50%;
                    position: relative;
                }
                    /* line 3585, ../sass/style.scss */
                    .content-outer .gun-list table tbody tr td span:nth-child(1) {
                        float: left;
                        text-align: left;
                        display: inline-block;
                    }
                    /* line 3590, ../sass/style.scss */
                    .content-outer .gun-list table tbody tr td span:nth-child(2) {
                        float: right;
                        text-align: right;
                    }
}

/* line 3602, ../sass/style.scss */
.tag-text {
    margin-bottom: 20px;
    font-family: inherit;
    font-weight: bold;
    font-size: 28px;
    line-height: 32px;
    color: #222222;
    width: max-content;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3602, ../sass/style.scss */
    .tag-text {
        font-size: 20px;
        line-height: 24px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3602, ../sass/style.scss */
    .tag-text {
        font-size: 18px;
        line-height: 22px;
    }
}
/* line 3618, ../sass/style.scss */
.tag-text strong {
    width: fit-content;
    display: inline-block;
    font-family: inherit;
    font-size: 18px;
    text-align: center;
    text-transform: uppercase;
    color: #222222;
    background-image: #EAEAEA;
    padding: 5px 14px;
    font-weight: normal;
    vertical-align: middle;
}

/* line 3632, ../sass/style.scss */
#facebook-like {
    position: absolute;
    background-image: transparent;
    left: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 83px;
    height: 36px;
    background-image: url('../static/background/chatbox.svg');
    font-family: inherit;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #FFFFFF;
    padding: 2px;
}
    /* line 3648, ../sass/style.scss */
    #facebook-like span {
        font-weight: 200;
        font-size: 12px;
        line-height: 14px;
        text-align: center;
        color: #FFFFFF;
        font-family: inherit;
    }

/* line 3657, ../sass/style.scss */
.banner-header {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3659, ../sass/style.scss */
    .banner-header.sub-detail {
        height: 0;
        padding: 0;
    }
}

/* line 3665, ../sass/style.scss */
section {
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3667, ../sass/style.scss */
    section.sub-detail {
        padding: 0;
    }
        /* line 3669, ../sass/style.scss */
        section.sub-detail .news-detail {
            width: 100%;
        }
        /* line 3672, ../sass/style.scss */
        section.sub-detail .info-post, section.sub-detail .article-detail {
            width: 90% !important;
            margin: auto;
        }
}

/* line 3679, ../sass/style.scss */
.updating-text {
    font-family: inherit;
    font-size: 20px;
    font-weight: 200;
}

/* line 3684, ../sass/style.scss */
.coming-soon {
    background-image: url('../static/background/frame-1.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3684, ../sass/style.scss */
    .coming-soon {
        background-image: url('../static/background/frame-1-mob.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        height: 100vh !important;
    }
}
/* line 3692, ../sass/style.scss */
.coming-soon .wrapper {
    height: 1000px !important;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3692, ../sass/style.scss */
    .coming-soon .wrapper {
        width: 768px !important;
        height: 1024px !important;
    }
}
/* line 3699, ../sass/style.scss */
.coming-soon .notify {
    text-align: center;
    color: #FFE93B;
    font-size: 30px;
    line-height: 40px;
    left: calc((100vh / 1000) * 150);
    position: absolute;
    top: 60%;
    margin: auto;
    text-transform: uppercase;
    font-weight: bold;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3699, ../sass/style.scss */
    .coming-soon .notify {
        left: 0;
        right: 0;
        margin: auto;
        top: 55%;
        height: auto;
        bottom: unset;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3699, ../sass/style.scss */
    .coming-soon .notify {
        top: 75%;
    }
}
/* line 3722, ../sass/style.scss */
.coming-soon .game-name {
    position: absolute;
    left: calc((100vh / 1000) * 420);
    top: -10%;
    bottom: 0;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media only screen and (max-width: 1128px) {
    /* line 3722, ../sass/style.scss */
    .coming-soon .game-name {
        left: calc((100vh / 768) * 340);
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3722, ../sass/style.scss */
    .coming-soon .game-name {
        left: 0;
        right: 0;
        margin: auto;
        top: 35%;
        height: auto;
        bottom: unset;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3722, ../sass/style.scss */
    .coming-soon .game-name {
        top: 55%;
    }
}
/* line 3744, ../sass/style.scss */
.coming-soon .coming-soon-footer {
    width: 1200px;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}
    /* line 3751, ../sass/style.scss */
    .coming-soon .coming-soon-footer .comming-footer {
        display: block;
        margin: auto;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3744, ../sass/style.scss */
    .coming-soon .coming-soon-footer {
        width: 100%;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3744, ../sass/style.scss */
    .coming-soon .coming-soon-footer {
        bottom: -40vh;
    }
}
/* line 3761, ../sass/style.scss */
.coming-soon .coming-soon-footer ul {
    width: 45%;
    overflow: auto;
    display: flex;
    margin: auto;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3761, ../sass/style.scss */
    .coming-soon .coming-soon-footer ul {
        width: 85%;
        margin: auto;
        display: block;
        margin-bottom: 20px;
    }
}
/* line 3774, ../sass/style.scss */
.coming-soon .coming-soon-footer li {
    display: inline-flex;
    align-items: center;
    margin-right: 35px;
    float: left;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}
    /* line 3779, ../sass/style.scss */
    .coming-soon .coming-soon-footer li:nth-last-child(1) {
        margin-right: 0;
    }

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3774, ../sass/style.scss */
    .coming-soon .coming-soon-footer li {
        width: calc(100% / 3);
        display: inline-flex;
        overflow: hidden;
        height: 45px;
        float: left;
        margin-right: 0;
        position: relative;
    }
        /* line 3791, ../sass/style.scss */
        .coming-soon .coming-soon-footer li img {
            margin: auto;
            display: block;
            position: absolute;
            right: 0;
        }
        /* line 3822, ../sass/style.scss */
        .coming-soon .coming-soon-footer li:nth-child(2) img {
            right: 10px;
        }
}
/* line 3829, ../sass/style.scss */
.coming-soon .coming-soon-footer .des-footer {
    margin: auto;
    margin-top: 31px;
    display: block;
}
/* line 3834, ../sass/style.scss */
.coming-soon .coming-soon-footer p {
    font-size: 16px;
    text-align: center;
    color: white;
    padding-top: 20px;
}

/* line 3842, ../sass/style.scss */
.rule-link {
    text-align: center;
    width: 100%;
    display: block;
    color: #fff;
    vertical-align: middle;
    font-family: inherit;
    font-size: 14px;
    line-height: 35px;
    opacity: 0.75;
}

/* line 3855, ../sass/style.scss */
.age-tag {
    position: absolute;
    left: calc((100vh / 1000) * 420);
    top: 80px;
    margin: auto;
    left: 0;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
    /* breakpoint: smartphone | desktop; */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3855, ../sass/style.scss */
    .age-tag {
        top: 100px;
    }
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3855, ../sass/style.scss */
    .age-tag {
        top: 70px;
        transform: scale(0.8);
    }
}

/* line 3874, ../sass/style.scss */
#popup-mainsite {
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 99;
}

/* line 3883, ../sass/style.scss */
#banner-mainsite {
    display: block;
    text-indent: -9999px;
    max-width: 650px;
    max-height: 400px;
    height: 400px;
    width: 650px;
    overflow: hidden;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3883, ../sass/style.scss */
    #banner-mainsite {
        width: 90vw;
        height: 200px;
    }
}
/* line 3895, ../sass/style.scss */
#banner-mainsite img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    margin: 0;
    width: 100%;
    height: 100%;
    display: none;
    /* breakpoint: smartphone | desktop; */
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    /* line 3895, ../sass/style.scss */
    #banner-mainsite img {
        height: auto;
    }
}

/* line 3910, ../sass/style.scss */
.sidebar-right {
    background-image: #222222;
    border: 0.5px solid #FFE93B;
    width: 210px;
    height: 407px;
    position: fixed;
    top: 20%;
    right: 0;
    z-index: 100;
    -webkit-transform-origin: right 0;
    -moz-transform-origin: right 0;
    -o-transform-origin: right 0;
    transform-origin: right 0;
    /* breakpoint: smartphone | desktop; */
    /* between desktop ~ smartphone */
}

@media (max-width: 1024px) and (orientation: portrait) {
    /* line 3910, ../sass/style.scss */
    .sidebar-right {
        display: none;
    }
}
/* line 3928, ../sass/style.scss */
.sidebar-right a {
    display: block;
    text-indent: -9999px;
}
/* line 3932, ../sass/style.scss */
.sidebar-right .bt-control {
    position: absolute;
    left: -19%;
    bottom: 45%;
}
/* line 3937, ../sass/style.scss */
.sidebar-right .close {
    background-position: -892px 0;
    height: 40px;
    width: 40px;
}
    /* line 3939, ../sass/style.scss */
    .sidebar-right .close:hover {
        filter: brightness(1.1);
    }
/* line 3943, ../sass/style.scss */
.sidebar-right .open {
    background-position: -852px 0;
    height: 40px;
    width: 40px;
}
    /* line 3945, ../sass/style.scss */
    .sidebar-right .open:hover {
        filter: brightness(1.1);
    }
/* line 3951, ../sass/style.scss */
.sidebar-right .qrcode {
    width: 140px;
    height: 140px;
    margin: 25px auto 15px auto;
}
    /* line 3955, ../sass/style.scss */
    .sidebar-right .qrcode img {
        width: 140px;
        height: 140px;
    }
/* line 3960, ../sass/style.scss */
.sidebar-right .bt_ios {
    background-position: -394px -140px;
    height: 42px;
    width: 157px;
    margin: 30px auto 20px auto;
}
    /* line 3963, ../sass/style.scss */
    .sidebar-right .bt_ios:hover {
        filter: brightness(1.1);
    }
    /* line 3966, ../sass/style.scss */
    .sidebar-right .bt_ios.off {
        background-position: -394px -140px;
        height: 42px;
        width: 157px;
        filter: grayscale(100%);
        cursor: not-allowed;
    }
/* line 3972, ../sass/style.scss */
.sidebar-right .bt_android {
    background-position: -237px -140px;
    height: 42px;
    width: 157px;
    margin: 10px auto 10px auto;
}
    /* line 3975, ../sass/style.scss */
    .sidebar-right .bt_android:hover {
        filter: brightness(1.1);
    }
    /* line 3978, ../sass/style.scss */
    .sidebar-right .bt_android.off {
        background-position: -237px -140px;
        height: 42px;
        width: 157px;
        filter: grayscale(100%);
        cursor: not-allowed;
    }
/* line 3984, ../sass/style.scss */
.sidebar-right .bt_napthe {
    background-position: 0 -570px;
    height: 59px;
    width: 182px;
    margin: 10px auto;
}
    /* line 3987, ../sass/style.scss */
    .sidebar-right .bt_napthe:hover {
        filter: brightness(1.1);
    }
    /* line 3990, ../sass/style.scss */
    .sidebar-right .bt_napthe.off {
        background-position: 0 -570px;
        height: 59px;
        width: 182px;
        filter: grayscale(100%);
        cursor: not-allowed;
    }

/* line 3997, ../sass/style.scss */
.fancybox-skin {
    background-image: transparent;
}

/*# sourceMappingURL=style.css.map */

/**top menu**/
.modal-open, .modal-open .navbar-fixed-bottom, .modal-open-noscroll .navbar-fixed-top {
    padding-right: 0 !important
}

header {
    background-image: none;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: fixed;
    min-height: 0;
    margin-bottom: 30px;
    width: 100%;
    z-index: 100;
}

.sgw-page-wrapper {
}

    .sgw-page-wrapper:after {
        content: "";
        display: block;
        height: 70px
    }

#sgw-main-navigation {
    width: 100%;
    margin: 0 auto;
    height: 65px;
    max-height: 65px;
    min-height: 65px;
    background-image: url('../static/background/nav_main_tile.jpg');
    background-position: left top;
    background-repeat: repeat-x;
    background-color: transparent;
    font-family: Oswald,sans-serif;
    text-transform: uppercase;
    border: 0;
}

    #sgw-main-navigation .sgw-container {
        min-width: 980px;
        height: 65px;
        background-image: url('../static/background/nav_main.png');
        background-position: center bottom;
        background-repeat: no-repeat;
    }

.sgw-container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

#sgw-main-navigation .sgw-container .navbar.bs-example-js-navbar {
    width: 980px;
    margin: 0 auto;
    padding: 0 30px;
}

#sgw-leftside-nav {
    display: inline-block !important;
}

#sgw-rightside-nav {
    display: inline-block !important;
}

#sgw-leftside-nav .navbar-nav > li, .navbar-nav {
    margin: 0 !important;
}

    .navbar-nav, .navbar-nav > li {
        float: left !important;
    }

#sgw-ranking-toplink {
    margin-right: -10px;
}

#sgw-community-toplink {
    margin-right: -12px;
}

#sgw-game-toplink, #sgw-news-toplink {
    margin-left: 0;
}

#sgw-main-navigation.navbar-default .navbar-nav > li > a {
    padding-top: 20px;
    padding-bottom: 19px;
}

#sgw-main-navigation a {
    color: #ccc;
}

.nav > li > a {
    position: relative;
    display: inline-block;
    padding: 10px 21px;
}

.navbar-right {
    float: right !important;
}

#sgw-homepage-button {
    left: 30px !important;
}

#sgw-homepage-button {
    display: inline-block;
    position: relative;
    width: 300px;
    height: 60px;
}


.sgw-dropmenu {
    width: 100%;
    position: fixed;
    display: block;
    z-index: 10000;
}

.logoMobile img {
    width: 50%;
}

.topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
}

    .topnav #myLinks {
        display: none;
    }

    .topnav .itemLink {
        background-color: #333;
        height: 100vh;
        transition: transform .5s ease-in-out;
        -webkit-transition: transform .5s ease-in-out;
        -moz-transition: transform .5s ease-in-out;
        -ms-transition: transform .5s ease-in-out;
        -o-transition: transform .5s ease-in-out;
    }

        .topnav a.logoMobile, .topnav .itemLink a {
            color: white;
            padding: 0 16px;
            text-decoration: none;
            font-size: 17px;
            display: block;
            border-bottom: 1px solid #4a4a4c;
        }

        .topnav .itemLink a {
            padding: 14px 16px
        }

    .topnav a.icon {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        padding: 16px 18px;
        color: white;
    }

        .topnav a.icon:focus {
            background-color: transparent;
            color: #bfc5ce;
        }

        .topnav a.icon:active {
            background-color: transparent;
            color: #bfc5ce;
        }

    .topnav a:hover {
        background-color: transparent;
        color: #000;
    }




.topBanner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
}

/*popup video*/
.modal-dialog {
    max-width: 800px;
    margin: 30px auto;
}



.modal-body {
    position: relative;
    padding: 0px;
}

.close {
    background-color: transparent;
    border: none;
    position: absolute;
    right: -30px;
    top: 0;
    z-index: 999;
    font-size: 2rem;
    font-weight: normal;
    color: #fff;
    opacity: 1;
}

.inGame {
    left: auto !important;
    height: 265px !important;
    top: 122px !important;
}

.topSecBanner {
    overflow: hidden;
}

.hiresvideo {
    position: relative;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    -moz-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
    -o-transform: translate(-50%, 50%);
}

    .hiresvideo .boxTran {
        display: block;
        min-height: 100vh;
        min-width: 100%;
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.123);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }

    .hiresvideo img {
        display: block;
        min-height: 100vh;
        min-width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.registerVip {
    background-color: rgba(0, 0, 0, 0.699);
    padding: 20px;
    display: none;
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100vh;
    z-index: 1060;
    outline: 0;
    top: 0;
    left: 0;
}

.vipModal {
    -webkit-box-shadow: 0 24px 54px rgb(0 0 0 / 15%), 0 4.5px 13.5px rgb(0 0 0 / 8%);
    box-shadow: 0 24px 54px rgb(0 0 0 / 15%), 0 4.5px 13.5px rgb(0 0 0 / 8%);
    background-color: #FFF;
    width: 60%;
    margin: 2rem auto;
}

.toptitleVip {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}

._topTitleVip {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

._topBodyVip .fGroup ._fGroup {
    margin-bottom: 1rem;
}

.imgBody {
    width: 100%;
}

._topBodyVipHead {
    display: flex;
    width: 100%;
}

._topTitleVipContent {
    display: block;
    margin-top: 15px;
}

._topBodyVipHeadLeft {
    width: 80%;
}

._topTitleVipHeadRight {
    display: flex;
    width: 20%;
    align-items: center;
    justify-content: flex-end;
}

._topBodyVipHeadLeft h5 {
    text-transform: uppercase;
    display: block;
}

._topBodyVipHeadLeft .ttHead {
    font-size: 18px;
    font-weight: 600;
}

.showed {
    display: block;
}

.closePop {
    position: fixed;
    top: 2%;
    right: 2%;
    color: #fff;
}

/*news*/

.hd-news {
    background-image: url("../static/background/banner-bt.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    position: relative;
    min-height: 200px;
    margin-bottom: 30px;
}

    .hd-news h3 {
        font-family: Oswald,sans-serif;
        ;
        color: white;
        position: absolute;
        bottom: 30px;
        text-transform: uppercase;
        font-size: 2.5rem;
    }

.ct-card-news {
    max-height: 25vh;
    padding: 10px 0 0 0;
}

.card {
    background-color: rgba(0,0,0,1);
    cursor: pointer;
    border: none;
    transition: transform .3s; /* Animation */
}

.card-title {
    font-family: Oswald,sans-serif;
    ;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: .3rem !important;
    box-sizing: content-box;
    overflow: hidden;
}

.card a {
    text-decoration: none;
}

.card:hover {
    transform: scale(1.1); /* Animation */
}

.card:hover {
    color: white;
}

.ct-card-news {
    max-height: 25vh;
    padding: 10px 0 0 0;
}

.ct-bd-tb {
    padding-right: 0 !important;
}

    .ct-card-news p.ct_news,
    .ct-bd-tb p.ct_news {
        font-family: 'Roboto', sans-serif;
        font-size: 13px;
        line-height: 1rem;
        font-weight: 300;
        padding-right: 0 !important;
    }

    .ct-card-news p.d_m_news,
    .ct-bd-tb p.d_m_news {
        font-family: 'Roboto', sans-serif;
    }

section h6 {
    color: #ffffff;
}

section p {
    color: #ffffff;
}

.breadcrumb {
    background-color: rgba(0,0,0,0.00);
    position: absolute;
    bottom: 80px;
    padding-left: 0;
}

h4.date-news {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 200;
    color: antiquewhite;
    bottom: 10px;
}


.footer-slide {
    position: relative;
    background-color: #000;
}

    .footer-slide h2 {
        position: absolute;
        font-family: inherit;
        color: white;
        top: 52px;
        font-size: 50px;
    }

    .footer-slide h3 {
        position: absolute;
        font-family: inherit;
        color: white;
        top: 120px;
        font-size: 20px;
    }

    .footer-slide button {
        font-family: inherit;
        color: white;
        top: 100px;
    }

.btn-donw {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 160px;
}

.btn-create-acc {
    color: #FFF;
    border-radius: 0px;
    font-family: inherit;
    text-transform: uppercase;
    box-shadow: inset 0 0 2px rgba(255,210,0,.1), inset 0 1px 0 #fab81b, inset 0 -1px 0 #ff7e00;
    background: linear-gradient(to bottom,#fab81b 0%,#ff7e00 100%) no-repeat 0,linear-gradient(to bottom,#fab81b 0%,#ff7e00 100%) no-repeat 100%,#ff7e00 linear-gradient(to bottom,#ff7e00 0%,#c2530a 100%) no-repeat;
    background-size: 1px 100%,1px 100%,cover;
    z-index: 1;
    transition: opacity .15s ease-out;
    will-change: opacity;
}

@media screen and (min-width: 1920px) {
    #outer main section#section1 .wrapper .btn-video {
        top: -80px
    }

    #outer main section#section1 .wrapper .info-game {
        height: 200px;
        bottom: -345px
    }
}


.flex-container {
    height: 100vh;
    width: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    overflow: hidden;
}

.flex-title {
    color: #f1f1f1;
    position: relative;
    font-size: 3vw;
    margin: auto;
    text-align: center;
    transform: rotate(90deg);
    top: 15%;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.flex-about {
    opacity: 0;
    color: #f1f1f1;
    position: relative;
    width: 70%;
    font-size: 2vw;
    padding: 5%;
    top: 20%;
    border: 2px solid #f1f1f1;
    border-radius: 10px;
    line-height: 1.3;
    margin: auto;
    text-align: left;
    transform: rotate(0deg);
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}


.flex-slide {
    -webkit-flex: 1; /* Safari 6.1+ */
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    cursor: pointer;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

    .flex-slide:hover {
        -webkit-flex-grow: 3;
        flex-grow: 3;
    }

.home {
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../static/background/UI2.jpg');
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;*/
    @include animation-properties((animation: aboutFlexSlide, animation-duration: $defaultSeconds, animation-iteration-count: 1, animation-delay: 0s));
}

    .home:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../static/background/UI2.jpg');
    }

@keyframes aboutFlexSlide {
    0% {
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }

    50% {
        -webkit-flex-grow: 3;
        flex-grow: 3;
    }

    100% {
        -webkit-flex-grow: 1;
        flex-grow: 1;
    }
}

.flex-title-home {
    transform: rotate(90deg);
    top: 15%;
    @include animation-properties((animation: homeFlextitle, animation-duration: $defaultSeconds, animation-iteration-count: 1, animation-delay: 0s));
}



@keyframes homeFlextitle {
    0% {
        transform: rotate(90deg);
        top: 15%;
    }

    50% {
        transform: rotate(0deg);
        top: 15%;
    }

    100% {
        transform: rotate(90deg);
        top: 15%;
    }
}

.flex-about-home {
    opacity: 0;
    @include animation-properties((animation: flexAboutHome, animation-duration: $defaultSeconds, animation-iteration-count: 1, animation-delay: 0s));
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../static/background/UI3.jpg');
    background-size: cover;
    background-position: center center;
    /*background-attachment: fixed;
  */
}

    .about:hover {
        background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../static/background/UI3.jpg');
    }

.contact-form {
    width: 100%;
}

input {
    width: 100%;
}

textarea {
    width: 100%;
}

.contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.work {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

@media screen and (max-width: 666px) and (orientation: portrait) {
    .flex-container {
        flex-direction: column;
    }

    .home, .about {
        height: 50vh;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .vipModal {
        margin-top: 100px;
        width: 100%;
    }

    .closePop {
        top: 80px;
    }

    .footer-slide h2 {
        font-size: 20px;
        top: 10px;
    }

    .footer-slide h3 {
        font-size: 16px;
        top: 40px;
    }

    .btn-donw {
        top: 70px;
    }

    .btn-create-acc {
        font-size: 12px;
    }
}