:root {
    font-size: 3.38vw;
    line-height: 1.5;
    font-family: "Lexend",sans-serif;
    color: #414141;
    --w-primary: #174c9b;
    --w-secondary: #174c9b;
    --w-active: #009999;
    --w-bg-color: #050505;
    --w-offcanvas: #fff;
    --w-vgp: #ff6600;
    --w-nav: #fff;
    --w-border: #1f5285;
    --w-border-download: #38adfd;
    --w-backdrop-color: rgba(30, 30, 30, 0.8);
    --w-scrolldown-color: rgba(0, 165, 255, 1);
    --w-bodycontent: #efefef;
    --swiper-pagination-color: #174c9b;
    --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.5)
}

body {
    background: var(--w-bg-color) url("../images/bg-sm.png") no-repeat center top;
    background-size: 100vw auto;
    overflow-x: hidden
}

.wcontainer {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden
}

.page-wrapper {
    width: 100%;
    max-width: 1920px
}

.bg-primary {
    background-color: var(--w-primary)
}

.bg-secondary {
    background-color: var(--w-secondary)
}

.text-primary {
    color: var(--w-primary)
}

.text-secondary {
    color: var(--w-secondary)
}

.w-image-block,.w-image-ratio {
    max-width: 100%;
    display: block
}

.w-image-ratio {
    position: relative;
    overflow: hidden
}

.w-image-ratio>.content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center
}

.w-image-inline {
    max-width: 100%;
    display: inline-block
}

.w-image-button>img,.w-image-ratio>img,.w-image-inline>img,.w-image-block>img {
    display: block;
    width: 100%;
    height: auto
}

.w-image-button {
    max-width: 100%;
    display: block;
    border: none;
    padding: 0 !important
}

.layout {
    grid-template-areas: "download download button button button button button button" "download download newsboard newsboard newsboard support support support" "feature feature feature feature news news news news"
}

.block-download {
    grid-area: download
}

.block-button {
    grid-area: button
}
.block-download-m {
    grid-area: button
}

.block-support {
    grid-area: support
}

.newsboard {
    grid-area: newsboard
}

.block-news {
    grid-area: news
}

.block-feature {
    grid-area: feature
}

.block-download-inside {
    background: url("../images/block-download.png") no-repeat scroll;
    background-size: cover;
    border-radius: 1em;
    position: absolute;
    width: calc(100% - .69em);
    height: 82%;
    bottom: 0;
    color: #fff;
    z-index: 0
}

.block-download-inside>.wrapper a {
    font-size: 1.25em;
    display: flex;
    justify-content: start;
    align-items: center;
    line-height: 1;
    padding: 0 0 0 1.75em;
    transition: all .36s ease;
    height: 5.5em;
    border-bottom: solid 1px var(--w-border-download)
}

.block-download-inside>.wrapper a:last-child {
    border-bottom: none
}

.block-download-inside>.wrapper a>.w-image-block {
    width: 3em;
    margin-right: .25em
}

.block-download-inside>.wrapper a:hover {
    filter: drop-shadow(0 0 1em rgba(255, 255, 255, 0.5))
}

.block-button a {
    background: rgba(0,0,0,0) url("../images/btn-big-m.png") no-repeat scroll;
    background-size: 400% auto;
    text-indent: -9999px
}
.block-download-m a {
	text-align: center
}
.block-download-m>img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto
}
.block-button a:hover {
    filter: brightness(125%)
}
.block-download-m a:hover {
    filter: brightness(125%)
}

a.giftcode {
    background-position: 0% 0%
}

a.fanpage {
    background-position: 33.33% 0%
}

a.napxu {
    background-position: 66.66% 0%
}

a.sukien {
    background-position: 100% 0%
}

@media(min-width: 960px) {
    .block-button a {
        background:rgba(0,0,0,0) url("../images/btn-big.png") no-repeat scroll;
        background-size: auto 300%;
        text-indent: -9999px
    }

    a.giftcode {
        background-position: 0% 0%
    }

    a.fanpage {
        background-position: 0% 50%
    }

    a.napxu {
        background-position: 0% 100%
    }
}
    .block-download-m a {
		text-align: center
    }
	.block-download-m>img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto
	}
    a.giftcode {
        background-position: 0% 0%
    }

    a.fanpage {
        background-position: 0% 50%
    }

    a.napxu {
        background-position: 0% 100%
    }
}

.block-support {
    background: rgba(0,0,0,0) url("../images/block-support.png") no-repeat scroll;
    background-size: cover
}

.block-support a {
    background: rgba(0,0,0,0) url("../images/btn-support.png") no-repeat scroll;
    background-size: 400% auto;
    text-indent: -9999px
}

.block-support a:hover {
    filter: brightness(125%)
}

a.tanthu {
    background-position: 0% 0%
}

a.camnang {
    background-position: 33.33% 0%
}

a.vip {
    background-position: 66.66% 0%
}

a.hotro {
    background-position: 100% 0%
}

.block-news {
    background: rgba(0,0,0,0) url("../images/bg-news.png") center center no-repeat;
    background-size: cover
}

.news-list ul li {
    line-height: 2.8em;
    height: 2.8em;
    width: 100%;
    overflow: hidden;
    border-bottom: 1px dotted var(--w-secondary)
}

.news-list ul li a {
    display: grid;
    grid-template-columns: 1.8em auto;
    width: 100%;
    height: 100%;
    color: #414141;
    white-space: nowrap
}

.news-list ul li a::before {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    background-color: var(--w-secondary);
    margin: 1.15em .5em;
    transform: rotate(45deg)
}

.news-list ul li a:hover {
    color: var(--w-secondary)
}

@media(min-width: 1200px) {
    .news-list ul li {
        line-height:3.4em;
        height: 3.4em
    }

    .news-list ul li a::before {
        margin: 1.35em .5em
    }
}

.block-feature a {
    background: rgba(0,0,0,0) url("../images/btn-feature.png") no-repeat scroll;
    background-size: 300% auto;
    text-indent: -9999px
}

a.landing {
    background-position: 0% 0%
}

a.tonghopsukien {
    background-position: 50% 0%
}

a.trailer {
    background-position: 100% 0%
}

a.hotro {
    background-position: 100% 0%
}

.character-slider {
    background: rgba(0,0,0,0) url("../images/block-char.png") no-repeat scroll;
    background-size: 100% 100%
}

.footer {
    background-color: #050505;
    background-size: 100% auto
}

.footer-menu a {
    display: block;
    font-size: 1em;
    line-height: 1;
    color: #666;
    padding: 0em .75em;
    border-left: 1px solid #333
}

.footer-menu a:hover {
    color: #fff
}

.footer-menu a:first-child {
    border: none
}

.btn-wnav {
    filter: drop-shadow(0em 0em 0.5em rgba(255, 255, 255, 0.5));
    fill: var(--w-nav)
}

.offcanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--w-backdrop-color);
    filter: drop-shadow(0em 0em 0.5em rgba(0, 0, 0, 0.5));
    -webkit-backdrop-filter: blur(0.5em);
    backdrop-filter: blur(0.5em);
    opacity: 0;
    transition: opacity .36s ease
}

.offcanvas.show {
    z-index: 9999;
    opacity: 1
}

.offcanvas.hide {
    z-index: -1
}

.offcanvas-inside {
    background-color: rgba(20,20,20,.8);
    border-radius: 2em;
    margin: 1em 0 0 1em;
    overflow: hidden;
    transform: translateX(-50%);
    transition: transform .36s ease
}

.offcanvas.show .offcanvas-inside {
    transform: translateX(0)
}

.block-icon {
    padding: 1.25em;
    background-color: var(--w-primary)
}

.block-menu ul {
    width: 90%;
    line-height: 3em;
    margin: 0 auto
}

.block-menu ul li {
    color: #fff;
    border-bottom: 1px solid #222
}

@media(min-width: 1024px) {
    .block-support::after {
        content:"";
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--w-border);
        display: block
    }

    .block-support::before {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
        background-color: var(--w-border);
        display: block
    }
}

.block-float {
    position: fixed;
    transition: transform .36s ease,height .36s ease
}

.block-float .link a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase
}

.block-float:not(.minimize) {
    background: rgba(0,0,0,0) url("../images/float/float-bg.png") no-repeat center center;
    background-size: 100% 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.block-float:not(.minimize) .block-mini {
    display: none
}

.block-float.minimize {
    padding: 0;
    bottom: 0;
    right: 0;
    transform: translateY(0);
    aspect-ratio: auto
}

.block-float.minimize>* {
    display: none
}

.block-float.minimize .block-mini {
    display: block
}

.wmodal {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: var(--w-backdrop-color);
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .36s ease
}

.wmodal-content {
    transform: scale(1);
    transition: transform .5s ease
}

.wmodal:not(.show) {
    opacity: 0;
    z-index: -1
}

.wmodal:not(.show) .wmodal-content {
    transform: scale(0.8)
}

.wmodal>.wmodal-content>.wrap {
    background-color: var(--w-popup-color);
    border-radius: 1em;
    overflow: hidden
}

@media(min-width: 1024px) {
    body {
        background:var(--w-bg-color) url("../images/bg-body.jpg") no-repeat center bottom fixed;
        background-size: 100vw auto;
        font-size: .8333vw
    }

    .page-wrapper {
        background: rgba(0,0,0,0) url("../images/bg-bigw.png") no-repeat center top scroll;
        background-size: 100% auto
    }

    .wcontainer {
        width: 62.5%
    }

    #block-002 {
        background: none
    }
}

.block-18 {
    background: rgba(0,0,0,0) url("../images/img-pg18.webp") no-repeat center bottom scroll;
    background-size: 100% 100%;
    aspect-ratio: 585/274
}

.block-18>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 33%;
    width: 100%
}

.block-18>div a {
    text-indent: -9999px;
    display: block
}

.offcanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5
}

.offcanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--w-backdrop-color);
    opacity: 1;
    transition: opacity .36s ease
}

.offcanvas-content {
    background-color: var(--w-offcanvas);
    opacity: 1;
    transition: all .36s ease;
    overflow: hidden;
    height: 100vh;
    filter: drop-shadow(0em 0em 0.5em rgba(0, 0, 0, 0.5))
}

.offcanvas-content>.icon {
    padding: 1.5em;
    background: var(--w-primary) url(../images/block-download.png) no-repeat center center;
    background-size: 100% 100%
}

.offcanvas-content .link a {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: dotted #ccc 1px
}

.offcanvas:not(.show) {
    opacity: 0;
    z-index: -1
}

.offcanvas:not(.show) .offcanvas-content {
    opacity: 0;
    margin-left: -50%
}

.btn-login-vgp {
    background-color: var(--w-primary);
    border-radius: 100em
}

.btn-login-vgp span.content {
    width: 0;
    margin: 0;
    transition: width .36s ease;
    overflow: hidden;
    white-space: nowrap
}

.btn-login-vgp:hover span.content {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 .5em
}

.w-accordion-button {
    background: rgba(0,0,0,0) url("../images/character/accordion-button.png.jpg") no-repeat scroll;
    background-size: 400% auto;
    width: 6.8376%
}

.w-accordion-button[data-no="01"] {
    background-position: 0% 0%
}

.w-accordion-button[data-no="02"] {
    background-position: 33.33% 0%
}

.w-accordion-button[data-no="03"] {
    background-position: 66.66% 0%
}

.w-accordion-button[data-no="04"] {
    background-position: 100% 0%
}

.w-accordion .w-accordion-slide {
    transition: width .36s ease;
    overflow: hidden
}

.w-accordion .w-accordion-slide img {
    height: 100%;
    width: auto;
    max-width: 9999% !important
}

.w-accordion .w-accordion-slide:not(.active) {
    width: 0%
}

.w-accordion .w-accordion-slide.active {
    width: 72.64%;
    height: 100%
}

/*# sourceMappingURL=wstyle.min.css.map */