@font-face {
    font-family: "NotoSans-ExtraCondensedMedium";
    src: url("../fonts/NotoSans-ExtraCondensedMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "BarlowCondensed-Bold";
    src: url("../fonts/BarlowCondensed-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "BarlowCondensed-Medium";
    src: url("../fonts/BarlowCondensed-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "NotoSans-ExtraCondensedBold";
    src: url("../fonts/NotoSans-ExtraCondensedBold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "utm_avo";
    src: url("../fonts/utm_avo.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "utm_azuki";
    src: url("../fonts/utm_azuki.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "utm_cafeta";
    src: url("../fonts/utm_cafeta.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("../fonts/Roboto-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

.fatf_volcanoGothic {
    font-family: "atf_volcanoGothic"
}

.futm_avo {
    font-family: "utm_avo"
}

.fatf_gala {
    font-family: "atf_gala"
}

.fBarlowCondensed_Bold {
    font-family: "BarlowCondensed-Bold"
}

.fBarlowCondensed_Medium {
    font-family: "BarlowCondensed-Medium"
}

.fNotoSans_Medium {
    font-family: "NotoSans-ExtraCondensedMedium"
}

.ffzCoTrang {
    font-family: "fzCoTrang"
}

.futm_azuki {
    font-family: "utm_azuki"
}

.futm_cafeta {
    font-family: "utm_cafeta"
}

.fNotoSans_B,.fNotoSans_Bold {
    font-family: "NotoSans-ExtraCondensedBold"
}

.fRoboto {
    font-family: "Roboto-Regular"
}

/*
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var {
    border: 0;
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline
}

:focus {
    outline: 0
}

ol,ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0
}

caption,td,th {
    font-weight: normal;
    text-align: left
}

blockquote:after,blockquote:before,q:after,q:before {
    content: ""
}

blockquote,q {
    quotes: "" ""
}

a img {
    border: 0
}

figure {
    margin: 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:after,blockquote:before,q:after,q:before {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a:focus,a:hover,a:hover p,select:active,select:focus,select:hover {
    text-decoration: none;
    outline: none!important
}

a,a:link {
    text-decoration: none;
    outline: none!important;
    color: #fff
}
*/

.clearfix:after {
    content: "";
    visibility: hidden;
    display: table;
    clear: both
}

::-webkit-input-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

::-moz-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

:-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

::-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

::placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

:-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

::-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
    font-family: "utm_cafeta";
    font-style: italic
}

*,.box_sizing_border_box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.a100 {
    width: 100%;
    height: 100%;
    display: block
}

.c-p,.c-pointer,.cp {
    cursor: pointer
}

.p-r,.pr {
    position: relative
}

.p-a,.pa {
    position: absolute
}

.w100percent {
    width: 100%
}

.m__inline {
    margin-left: auto;
    margin-right: auto
}

/*.dFlex,.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}*/

.aCenter,.act {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.jCenter,.jct {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.fCl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

button,input,select {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    display: block
}

input,select {
    font-family: "BarlowCondensed-Medium";
    font-size: clamp(15px,3vw,23px);
    color: #fff
}

.tUpper,.tup {
    text-transform: uppercase
}

.tUnder {
    text-decoration: underline
}

.tCenter,.tct {
    text-align: center
}

.f-left {
    float: left
}

.f-right {
    float: right
}

.img-res {
    max-width: 100%;
    width: auto;
    height: auto
}

.c-white,.cWhite {
    color: #ffffff!important
}

.c-black,.cBlack {
    color: #000!important
}

.cPage {
    color: #542e18!important
}

.cRed {
    color: #dd371c!important
}

.cLightYellow {
    color: #ffc678!important
}

.cLightRed {
    color: #ffbbd7!important
}

.cPink {
    color: #f0237d!important
}

.cOrange {
    color: #ff9600!important
}

.cBrown {
    color: #9d825e!important
}

.link-under {
    text-decoration: underline!important
}

.t-shadow {
    text-shadow: 0px 4px 0px rgba(0,0,0,0.3)
}

.t-shadow-red {
    text-shadow: 0px 3px 0px rgb(204,70,30)
}

@-webkit-keyframes zoomInOut {
    0% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }

    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }
}

@keyframes zoomInOut {
    0% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }

    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    to {
        -webkit-transform: scale(0.95);
        transform: scale(0.95)
    }
}

@-webkit-keyframes glowing {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000
    }

    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000
    }

    to {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000
    }
}

@keyframes glowing {
    0% {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000
    }

    50% {
        background-color: #FF0000;
        -webkit-box-shadow: 0 0 40px #FF0000
    }

    to {
        background-color: #B20000;
        -webkit-box-shadow: 0 0 3px #B20000
    }
}

@-webkit-keyframes rock-boat {
    0% {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }

    50% {
        -webkit-transform: rotate(-7deg) translateY(-5px);
        transform: rotate(-7deg) translateY(-5px)
    }

    to {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }
}

@keyframes rock-boat {
    0% {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }

    50% {
        -webkit-transform: rotate(-7deg) translateY(-5px);
        transform: rotate(-7deg) translateY(-5px)
    }

    to {
        -webkit-transform: rotate(0) translateY(0);
        transform: rotate(0) translateY(0)
    }
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px)
    }

    50% {
        -webkit-transform: translate(0px,5px);
        transform: translate(0px,5px)
    }

    to {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px)
    }
}

@keyframes move {
    0% {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px)
    }

    50% {
        -webkit-transform: translate(0px,5px);
        transform: translate(0px,5px)
    }

    to {
        -webkit-transform: translate(0px,0px);
        transform: translate(0px,0px)
    }
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    10%,20% {
        -webkit-transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }

    to {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

.zoomInOut {
    -webkit-animation: zoomInOut 1s linear infinite;
    animation: zoomInOut 1s linear infinite
}

.ring {
    -webkit-animation: vibrate 1s linear infinite;
    animation: vibrate 1s linear infinite
}

.animated_shake {
    -webkit-animation: shake 2.5s linear infinite;
    animation: shake 2.5s linear infinite;
    -webkit-transform-origin: top center;
    transform-origin: top center
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    25% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    75% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@keyframes shake {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    25% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    50% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    75% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@-webkit-keyframes vibrate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    10% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    20% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    30% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    40% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    50% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    70% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    80% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    90% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }
}

@keyframes vibrate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    10% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    20% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    30% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    40% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    50% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    60% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    70% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }

    80% {
        -webkit-transform: rotate(1deg);
        transform: rotate(1deg)
    }

    90% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg)
    }
}

html.root__page {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 62.5%
}

body.wpage {
    font-family: "atf_volcanoGothic";
    font-size: 1.6rem;
    line-height: 1.5;
    color: #fff;
    background-color: #c3c8d1;
    min-height: 100vh;
    margin-inline:auto;overflow-x: hidden!important
}

@media only screen and (min-width: 992px) {
    body.wpage {
        background:url(../images/full__big.jpg) #c3c8d1;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center top
    }
}

@media only screen and (max-width: 991px) {
    body.wpage {
        background:url(../images/sm__full.jpg) #c3c8d1;
        background-position: center 0;
        background-size: 100% auto;
        background-repeat: no-repeat
    }
}

.limit__game {
    position: relative;
    width: 100%;
    margin-inline:auto}

@media only screen and (min-width: 992px) {
    .limit__game {
        max-width:62.5vw
    }
}

@media only screen and (max-width: 991px) {
    .hidden__mobile {
        display:none!important
    }
}

@media only screen and (max-width: 499px) {
    .hidden_sm {
        display:none!important
    }
}

@media only screen and (min-width: 992px) {
    .hidden__PC {
        display:none!important
    }
}

@media only screen and (min-width: 500px) {
    .hidden_lg {
        display:none!important
    }
}

.link-hv.active .img-hv,.link-hv:hover .img-hv {
    display: inline-block
}

.link-hv .img-ac,.link-hv .img-hv {
    width: 100%
}

.link-hv .img-hv {
    display: none;
    position: absolute;
    left: 0;
    top: 0
}

.btn-tranY {
    -webkit-transition: all 0.25s;
    transition: all 0.25s
}

.btn-tranY.active,.btn-tranY:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px)
}

.btn-Zoom {
    -webkit-transition: all 0.25s;
    transition: all 0.25s
}

.btn-Zoom.active,.btn-Zoom:hover {
    -webkit-transform: scale(1.1)!important;
    transform: scale(1.1)!important
}

.mt-1per {
    margin-top: 1%
}

.mt-2per {
    margin-top: 2%
}

.mt-3per {
    margin-top: 3%
}

.mt-4per {
    margin-top: 4%
}

@media only screen and (max-width: 667px) {
    .btn-img-hv {
        width:60%
    }
}

.btn-img-hv .img-ac,.btn-img-hv .img-hv {
    width: 100%
}

.btn-img-hv .img-hv {
    display: none;
    position: absolute;
    left: 0;
    top: 0
}

.btn-img-hv:hover .img-hv {
    display: inline
}

.btn-page {
    width: 160px;
    height: 43px
}

@media only screen and (min-width: 768px) {
    .btn-page {
        width:271px;
        height: 72px
    }
}

@media only screen and (min-width: 992px) {
    .pagination {
        margin-top:1.0416666667vw
    }
}

@media only screen and (max-width: 991px) {
    .pagination {
        margin-top:1.3333333333vw
    }
}

.pagination ul {
    text-align: center
}

.pagination ul li {
    display: inline-block;
    width: 4.6666666667vw;
    height: 4.6666666667vw;
    line-height: 4.6666666667vw;
    background: #ffffff;
    font-size: 1.1rem;
    border-radius: 0.8vw;
    border: 1px solid #141414;
    margin: 0 0.1333333333vw
}

@media only screen and (min-width: 992px) {
    .pagination ul li {
        margin:0.1041666667vw;
        width: 2.0833333333vw;
        height: 2.0833333333vw;
        line-height: 2.0833333333vw;
        font-size: 1.0416666667vw;
        border-radius: 0.3125vw
    }
}

.pagination ul li a {
    color: #141414
}

.pagination ul li.active,.pagination ul li:hover {
    background: #00ffde
}

.pagination ul li.active a,.pagination ul li:hover a {
    color: #141414
}

.slick-custom-dots .slick-dots {
    bottom: 0;
    position: relative;
    margin-top: 4.4vw;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 992px) {
    .slick-custom-dots .slick-dots {
        margin-top:1.71875vw
    }
}

.slick-custom-dots .slick-dots li {
    background: url(../images/dot.png) no-repeat center center;
    background-size: 100% 100%;
    margin: 0 2.6666666667vw;
    width: 3.6vw;
    height: 3.6vw
}

@media only screen and (min-width: 992px) {
    .slick-custom-dots .slick-dots li {
        margin:0 1.0416666667vw;
        width: 1.40625vw;
        height: 1.40625vw
    }
}

.slick-custom-dots .slick-dots li.slick-active {
    background: url(../images/dot__sl.png) no-repeat center center;
    background-size: 100% 100%
}

.slick-custom-dots .slick-dots li button {
    width: 100%;
    height: 100%
}

.slick-custom-dots .slick-dots li button:before {
    width: 100%;
    height: 100%;
    content: ""
}

.slick-custom-dots.slick-dot-black .slick-dots li {
    background: #fff
}

.slick-arrow {
    width: 8.6666666667vw;
    height: 7.6vw;
    background: url(../images/arrow-left.png) no-repeat center center;
    background-size: contain;
    z-index: 2;
    top: 100%;
    margin-top: -2vw
}

.slick-arrow:focus,.slick-arrow:hover {
    background: url(../images/arrow-left.png) no-repeat center center;
    background-size: contain
}

.slick-arrow.slick-disabled {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

.slick-arrow:before {
    content: ""
}

@media only screen and (min-width: 992px) {
    .slick-arrow {
        width:3.3854166667vw;
        height: 2.96875vw
    }
}

.slick-arrow.slick-prev {
    left: 6%
}

@media only screen and (min-width: 992px) {
    .slick-arrow.slick-prev {
        left:0%
    }
}

.slick-arrow.slick-next {
    right: 6%;
    background: url(../images/arrow-right.png) no-repeat center center;
    background-size: contain
}

@media only screen and (min-width: 992px) {
    .slick-arrow.slick-next {
        right:0%
    }
}

@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes scaleIn {
    0%,to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes scaleIn {
    0%,to {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.out-hv {
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}

.out-hv:hover {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px)
}

.tit__FTL img {
    width: 100vw
}

@media only screen and (min-width: 992px) {
    .tit__FTL img {
        width:40.3645833333vw
    }
}

.logo-top {
    position: absolute;
    width: 13.59375vw;
    top: 0;
    left: 0
}

.logo-top img {
    display: block;
    width: 100%
}

.main_head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: #140032;
    border-bottom: 0 solid #ff37a0;
    height: 11.7333333333vw;
    width: 100%;
    padding: 1.3333333333vw 1.3333333333vw;
    background: url(../images/bg_sm.png) no-repeat center top/100% 100%
}

@media only screen and (min-width: 992px) {
    .main_head {
        border-bottom:0;
        height: 4.6354166667vw;
        padding: 0;
        background: url(../images/bg_lg.png) no-repeat center top;
        background-size: 100% 100%;
        position: absolute
    }
}

@media only screen and (min-width: 992px) {
    .main_head .limit__game {
        max-width:52.0833333333vw
    }
}

#toggle-menu__header-page:checked~.navbar #menu__header-page .inner-menu__header-page:before {
    top: 0px;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

#toggle-menu__header-page:checked~.navbar #menu__header-page .inner-menu__header-page:after {
    top: 0px;
    -webkit-transform: rotate(0);
    transform: rotate(0)
}

#toggle-menu__header-page:checked~.navbar .navbar-content {
    right: 0
}

@media only screen and (max-width: 991px) {
    .navbar .limit__game {
        width:100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

.left-header {
    width: 40%;
    float: left
}

.icon-name-game .icon-game img {
    position: relative;
    z-index: 2;
    width: 14.4vw;
    display: block
}

.txt-name-game {
    color: #ffffff;
    font-size: 2.9333333333vw;
    margin-top: 0.6666666667vw;
    margin-left: 1.3333333333vw
}

.txt-name-game .name-game {
    line-height: 1.1
}

.navbar-content {
    z-index: 2;
    right: -100%;
    top: 10.6666666667vw;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: fixed;
    background: rgba(0,0,0,0.9);
    width: 100%;
    height: calc(100% - 10.6666666667vw);
    padding-top: 4vw;
    padding-left: 0.6666666667vw;
    padding-right: 0.6666666667vw
}

@media only screen and (min-width: 992px) {
    .navbar-content {
        left:0;
        top: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background: transparent;
        position: inherit;
        padding: 0;
        width: auto;
        margin-top: 0;
        height: 4.6354166667vw
    }
}

@media only screen and (min-width: 992px) {
    .navbar-content ul {
        display:-webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.navbar-content ul li {
    padding-top: 10px;
    padding-bottom: 13px;
    position: relative;
    border-bottom: 1px solid #3d3d3d
}

@media only screen and (min-width: 992px) {
    .navbar-content ul li {
        padding:0;
        display: inline-block;
        margin: 0 0.625vw;
        border-bottom: 0
    }
}

@media only screen and (min-width: 992px) {
    .navbar-content ul li .icHeader__ {
        width:4.375vw
    }
}

.navbar-content ul li:before {
    position: absolute;
    content: ""
}

@media only screen and (max-width: 991px) {
    .navbar-content ul li:before {
        width:94%;
        height: 2px;
        left: 5px;
        top: 0
    }
}

@media only screen and (min-width: 992px) {
    .navbar-content ul li:first-child:before {
        opacity:0
    }
}

.navbar-content ul li a {
    color: #fff;
    position: relative;
    text-transform: uppercase;
    font-size: 5.3333333333vw
}

@media only screen and (min-width: 992px) {
    .navbar-content ul li a {
        display:-webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        color: #fff;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0 0.2604166667vw;
        font-size: 1.0416666667vw;
        width: 8.6458333333vw;
        height: 2.8125vw;
        font-family: "utm_azuki";
        text-shadow: 1px 2px 3px rgb(0,0,0);
        line-height: 1em;
        text-transform: capitalize
    }
}

@media only screen and (min-width: 992px) {
    .navbar-content ul li a:after {
        content:" ";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 118%;
        height: 116%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        background: url(../images/effect_2.png) no-repeat center center/100% 100%;
        z-index: 1
    }
}

.navbar-content ul li a img {
    width: auto;
    height: 100%
}

.link-download {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media only screen and (min-width: 992px) {
    .link-download {
        margin-right:0;
        float: right
    }
}

@media only screen and (max-width: 991px) {
    .link-download a {
        display:-webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        color: #fff;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0 0.6666666667vw;
        font-size: 2.6666666667vw;
        width: 22.1333333333vw;
        height: 7.2vw;
        margin: 0 1.6vw;
        font-family: "utm_azuki";
        text-shadow: 1px 2px 3px rgb(0,0,0);
        line-height: 1em
    }
}

.link-download a img {
    width: auto;
    height: 100%
}

.icon-hamburger {
    float: right;
    margin-top: 1.3333333333vw
}

.icon-hamburger #menu__header-page {
    display: inline-block;
    position: relative;
    width: 7.3333333333vw;
    height: 6vw;
    cursor: pointer
}

.icon-hamburger #menu__header-page .inner-menu__header-page {
    height: 0.6666666667vw;
    width: 100%;
    top: 2.4vw;
    background-color: #fff;
    position: absolute;
    -webkit-transition: -webkit-transform 0.2s ease 0s;
    transition: -webkit-transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s,-webkit-transform 0.2s ease 0s
}

.icon-hamburger #menu__header-page .inner-menu__header-page:after,.icon-hamburger #menu__header-page .inner-menu__header-page:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: 0.6666666667vw;
    width: 100%;
    background-color: #fff
}

.icon-hamburger #menu__header-page .inner-menu__header-page:before {
    top: -2vw
}

.icon-hamburger #menu__header-page .inner-menu__header-page:after {
    top: 1.7333333333vw
}

.icon-hamburger .menu__cus {
    width: 130%
}

.logo-header {
    position: absolute;
    left: 3%;
    top: 0
}

@media only screen and (min-width: 1600px) {
    .logo-header {
        left:15%
    }
}

@media only screen and (min-width: 1920px) {
    .logo-header {
        left:19%
    }
}

.footer__game {
    background: #0a0e10;
    width: 100%;
    padding: 13.3333333333vw 0 26.6666666667vw;
    text-align: center;
    color: #fff;
    font-size: 14px;
    line-height: 1.5
}

@media only screen and (min-width: 992px) {
    .footer__game {
        padding:5.2083333333vw 0 1.8229166667vw;
        font-size: 0.8333333333vw
    }
}

.footer__game .listLinkFGFt a {
    margin-inline:0.5208333333vw}

.footer__game .listLinkFGFt img {
    width: 11.7333333333vw
}

@media only screen and (min-width: 992px) {
    .footer__game .listLinkFGFt img {
        width:4.5833333333vw
    }
}

.footer-link-privacy {
    margin-bottom: 10px
}

.footer-link-privacy a {
    color: #fff;
    text-decoration: none
}

.footer-link-privacy a:hover {
    color: #ffa000
}

.footer__game p {
    margin-bottom: 6px
}

.footer__game-inner {
    width: 100%;
    text-align: center;
    position: relative;
    margin: 0 auto
}

@media only screen and (min-width: 992px) {
    .footer__game-inner {
        width:52.0833333333vw
    }
}

.ftace__ace {
    position: absolute;
    display: block;
    text-indent: -999em;
    background: url(../images/logo_ACE.png) 0 0 no-repeat;
    background-size: contain;
    left: 0;
    top: -0.5208333333vw;
    width: 5.7291666667vw;
    height: 2.8645833333vw
}

@media only screen and (max-width: 991px) {
    .ftace__ace {
        position:inherit;
        top: 0;
        margin: 0 auto 1.3333333333vw;
        width: 26.6666666667vw;
        height: 9.3333333333vw
    }
}

.ft__oka-18 {
    position: absolute;
    right: 0;
    top: 0;
    width: 3.6458333333vw;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: top center;
    object-position: top center
}

@media only screen and (max-width: 991px) {
    .ft__oka-18 {
        width:13.3333333333vw;
        display: block;
        position: relative;
        left: 50%;
        margin-top: 1.3333333333vw;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.fixed_bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    height: 25.8666666667vw;
    background: url("../images/bg_fixed.png") no-repeat top center/100% 100%
}

.fixed_bottom .grBtn__dlFix {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 2vw
}

.fixed_bottom .btnDlFixed__ {
    color: #ffffec;
    width: 36.6666666667vw;
    height: 13.8666666667vw;
    font-size: 3.4666666667vw;
    padding-top: 0.6666666667vw;
    padding-left: 5.6vw;
    background: url("../images/btn_fixed.png") no-repeat top center/100% 100%
}

.fixed_bottom .imgFixed__ {
    width: 60.2666666667vw
}

.w100per {
    width: 100%
}

.h100per {
    height: 100%
}

.left0 {
    left: 0
}

.top0 {
    top: 0
}

.fs1424px {
    font-size: clamp(1.4rem,4vw,2.4rem)
}

@media only screen and (max-width: 1199px) {
    .box_game {
        padding-top:20%;
        padding-bottom: 9%
    }
}

.tsdWhite {
    text-shadow: 2px 0 0 #fff,-1px 0 0 #fff,0 2px 0 #fff,0 -1px 0 #fff,2px 2px #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff
}

.tsdBlack {
    text-shadow: 2px 0 0 #000,-1px 0 0 #000,0 2px 0 #000,0 -1px 0 #000,2px 2px #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000
}

.tsdYellow {
    text-shadow: 2px 0 #fa8737,-2px 0 #fa8737,0 2px #fa8737,0 -2px #fa8737,1px 1px #fa8737,-1px -1px #fa8737,1px -1px #fa8737,-1px 1px #fa8737
}

.tsdGreen {
    text-shadow: 2px 0 #14d2c8,-2px 0 #14d2c8,0 2px #14d2c8,0 -2px #14d2c8,1px 1px #14d2c8,-1px -1px #14d2c8,1px -1px #14d2c8,-1px 1px #14d2c8
}

.tsdPink {
    text-shadow: 2px 0 #c82364,-2px 0 #c82364,0 2px #c82364,0 -2px #c82364,1px 1px #c82364,-1px -1px #c82364,1px -1px #c82364,-1px 1px #c82364
}

.tsdRed {
    text-shadow: 2px 0 #bb3e02,-2px 0 #bb3e02,0 2px #bb3e02,0 -2px #bb3e02,1px 1px #bb3e02,-1px -1px #bb3e02,1px -1px #bb3e02,-1px 1px #bb3e02
}

.tsdPage {
    text-shadow: 1px 2px 3px rgb(0,0,0)
}

.linearRed {
    background: -webkit-linear-gradient(-90deg,#0b0000,#700000,#8f0000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.linearYellow {
    background: -webkit-gradient(linear,left top,left bottom,from(#deac66),color-stop(#f6d5a8),to(#fff2e1));
    background: linear-gradient(to bottom,#deac66,#f6d5a8,#fff2e1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.linearYellow2 {
    background: -webkit-gradient(linear,left top,left bottom,from(#ffc674),to(#fff));
    background: linear-gradient(to bottom,#ffc674,#fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.linearYellow3 {
    background: -webkit-gradient(linear,left top,left bottom,from(#ffed1f),to(#ffffff));
    background: linear-gradient(to bottom,#ffed1f,#ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.linearPink {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff19c2),color-stop(#ff6ece),to(#ffffff));
    background: linear-gradient(to bottom,#ff19c2,#ff6ece,#ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.tit__frs {
    font-size: 4.6666666667vw;
    gap: 0 2vw
}

@media only screen and (min-width: 992px) {
    .tit__frs {
        font-size:1.8229166667vw;
        gap: 0 1.3020833333vw
    }
}

.tit__frs img {
    width: 12.5333333333vw
}

@media only screen and (min-width: 992px) {
    .tit__frs img {
        width:4.8958333333vw
    }
}

.btnLog {
    background: url(../images/btLog.png) no-repeat center center;
    background-size: 100% 100%
}

.btnLog:hover {
    background-image: url(../images/btLog_hv.png)
}

.btnWhite {
    background: url(../images/btnWhite.png) no-repeat center center;
    background-size: 100% 100%
}

.btnWhite:hover {
    background-image: url(../images/btnWhite_hv.png)
}

.btnCheck {
    text-shadow: 2px 0 #fa8737,-2px 0 #fa8737,0 2px #fa8737,0 -2px #fa8737,1px 1px #fa8737,-1px -1px #fa8737,1px -1px #fa8737,-1px 1px #fa8737;
    color: #ffffff!important;
    background: url(../images/btnCheck.png) no-repeat center center;
    background-size: 100% 100%
}

.btnGC {
    color: #ffffff!important;
    background: url(../images/btnGC.png) no-repeat center center;
    background-size: 100% 100%
}

.btn_cod {
    background: url(../images/btn_cod.png) no-repeat center center;
    background-size: 100% 100%
}

.bgInput {
    border: 2px solid #d44545;
    background: #d44545
}

.btn_game1 {
    background: url(../images/btn_game1.png) no-repeat center center;
    background-size: 100% 100%
}

.btn_game1:hover {
    background-image: url(../images/btn_game1_hv.png)
}

.btn_game10 {
    background: url(../images/btn_game10.png) no-repeat center center;
    background-size: 100% 100%
}

.btn_game10:hover {
    background-image: url(../images/btn_game10_hv.png)
}

.bt__log {
    background: url(../images/bt__log.png) no-repeat center center;
    background-size: 100% 100%
}

.btn-getMDG {
    background: url(../images/bt__getMDG.png) no-repeat center center;
    background-size: 100% 100%
}

.img-hv .in-img-hv {
    top: 0;
    left: 0;
    opacity: 0
}

.img-hv.active .in-img-hv,.img-hv:hover .in-img-hv {
    opacity: 1
}

.list-img,.list_gift {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (max-width: 1199px) {
    .list-img,.list_gift {
        width:90%
    }
}

.list-img .thumb-img,.list-img .thumb__img,.list_gift .thumb-img,.list_gift .thumb__img {
    background: url(../images/bg-img.png) no-repeat center center;
    background-size: 100% 100%;
    margin: 1%
}

@media only screen and (max-width: 991px) {
    .list-img .thumb-img,.list-img .thumb__img,.list_gift .thumb-img,.list_gift .thumb__img {
        padding:6px 3px;
        width: 10vw;
        height: 10vw
    }
}

@media only screen and (min-width: 992px) {
    .list-img .thumb-img,.list-img .thumb__img,.list_gift .thumb-img,.list_gift .thumb__img {
        width:80px;
        height: 80px
    }
}

.list-img .thumb-img img,.list-img .thumb__img img,.list_gift .thumb-img img,.list_gift .thumb__img img {
    width: 90%;
    width: auto;
    max-width: 90%
}

.list-img .thumb-img .numberGift,.list-img .thumb-img .sl,.list-img .thumb__img .numberGift,.list-img .thumb__img .sl,.list_gift .thumb-img .numberGift,.list_gift .thumb-img .sl,.list_gift .thumb__img .numberGift,.list_gift .thumb__img .sl {
    position: absolute;
    line-height: 1;
    background: rgba(0,0,0,0.6);
    padding: 2px;
    right: 0;
    bottom: 0;
    font-size: clamp(10px,2vw,14px)
}

#videoBgMb,#videoBgPC {
    position: absolute;
    top: 0
}

#videoBgMb {
    width: 100%;
    top: 20px
}

#videoBgPC {
    width: 100vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width: 991px) {
    .logo__tfrG {
        z-index:1;
        position: fixed;
        right: 0.5%;
        top: 0.5%;
        width: 20vw
    }
}

@media only screen and (min-width: 992px) {
    .logo__tfrG {
        width:10.625vw;
        position: absolute;
        top: 3.6458333333vw;
        left: 19.7916666667vw
    }
}

.front__game {
    padding-top: 99.4666666667vw
}

@media only screen and (min-width: 992px) {
    .front__game {
        padding-top:39.1666666667vw
    }
}

.front__game:after {
    pointer-events: none;
    position: absolute;
    content: ""
}

.getGC__ftop {
    background: url(../images/bgImg_gc.png) no-repeat center center;
    background-size: 100% 100%;
    width: 45.6vw;
    height: 20.1333333333vw;
    font-size: 4.4vw;
    padding-top: 5.8666666667vw;
    padding-left: 8vw;
    line-height: 1em
}

@media only screen and (min-width: 992px) {
    .getGC__ftop {
        width:17.8125vw;
        height: 7.8645833333vw;
        font-size: 1.71875vw;
        padding-top: 2.2916666667vw;
        padding-left: 3.125vw
    }
}

.getGC__ftop:hover {
    background-image: url(../images/bgImg_gchv.png)
}

.reg_counter {
    color: #dabc83;
    background: url(../images/reg_counter.png) no-repeat center center;
    background-size: 100% 100%;
    width: 58.6666666667vw;
    height: 6.8vw;
    font-size: 4vw;
    margin-top: 2.6666666667vw;
    line-height: 1.1em
}

@media only screen and (min-width: 992px) {
    .reg_counter {
        width:22.9166666667vw;
        height: 2.65625vw;
        font-size: 1.5625vw;
        margin-top: 1.0416666667vw
    }
}

.grBtn__dlGame {
    gap: 2.6666666667vw;
    padding: 0 4vw
}

@media only screen and (min-width: 992px) {
    .grBtn__dlGame {
        gap:1.0416666667vw;
        padding: 0 1.5625vw
    }
}

.grBtn__dlGame .btnDlGame__ {
    text-align: left;
    line-height: 1em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 25.3333333333vw;
    height: 7.4666666667vw;
    font-size: 1.6vw;
    padding-left: 7.4666666667vw
}

@media only screen and (min-width: 992px) {
    .grBtn__dlGame .btnDlGame__ {
        width:9.8958333333vw;
        height: 2.9166666667vw;
        font-size: 0.625vw;
        padding-left: 2.9166666667vw
    }
}

@media only screen and (max-width: 991px) {
    .grBtn__dlGame .btnDlGame__ {
        position:relative;
        z-index: 2
    }
}

.grBtn__dlGame .btnDlGame__#btnIOS {
    padding-left: 4.1666666667vw
}

@media only screen and (max-width: 991px) {
    .grBtn__dlGame .btnDlGame__#btnIOS {
        padding-left:16vw
    }
}

.grBtn__dlGame .btnDlGame__ .effect {
    top: -6%;
    left: -10%;
    width: 120%;
    height: 113%
}

.grBtn__dlGame .btnDlGame__ .tBig__ {
    font-size: 3.4666666667vw;
    line-height: 1em
}

@media only screen and (min-width: 992px) {
    .grBtn__dlGame .btnDlGame__ .tBig__ {
        font-size:1.3541666667vw
    }
}

.grBtn__dlGame .btnAPP__ {
    background: url(../images/bg__ap.png) no-repeat center center;
    background-size: 100% 100%
}

.grBtn__dlGame .btnGG__ {
    background: url(../images/bg__gg.png) no-repeat center center;
    background-size: 100% 100%
}

@-webkit-keyframes zoomIcon {
    0% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.1,1.1);
        transform: scale(1.1,1.1)
    }

    to {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@keyframes zoomIcon {
    0% {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }

    50% {
        -webkit-transform: scale(1.1,1.1);
        transform: scale(1.1,1.1)
    }

    to {
        -webkit-transform: scale(1,1);
        transform: scale(1,1)
    }
}

@-webkit-keyframes imgScrDown {
    0%,to {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
}

@keyframes imgScrDown {
    0%,to {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    50% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px)
    }
}

.all__ {
    margin-top: 13.3333333333vw
}

@media only screen and (min-width: 992px) {
    .all__ {
        margin-top:5.2083333333vw
    }
}

.all__ .imgTT__ {
    width: 100vw;
    display: block
}

@media only screen and (min-width: 992px) {
    .all__ .imgTT__ {
        width:45.5729166667vw
    }
}

.all__ .textAll {
    color: #2f363f;
    font-style: italic;
    text-align: center;
    font-size: 3.2vw
}

@media only screen and (min-width: 992px) {
    .all__ .textAll {
        font-size:1.25vw
    }
}

.menAll__ {
    width: 100%
}

.menAll__ .lstPrs__reg {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 98%;
    margin-top: 2.6666666667vw;
    padding-bottom: 0vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg {
        width:59.4270833333vw;
        margin-top: 1.0416666667vw;
        padding-bottom: 0vw
    }
}

.menAll__ .lstPrs__reg .process {
    border-radius: 3px;
    background: url("../images/process.png") no-repeat top center/100% 100%;
    width: 100%;
    height: 2.6666666667vw;
    top: 9.6vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .process {
        height:1.0416666667vw;
        top: 3.75vw
    }
}

.menAll__ .lstPrs__reg .process .numReg__all {
    color: #fff;
    font-size: 3.0666666667vw;
    height: 3.0666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .process .numReg__all {
        font-size:1.1979166667vw;
        height: 1.1979166667vw
    }
}

.menAll__ .lstPrs__reg .process .process__in {
    background: #d7ae73;
    min-width: 2%;
    max-width: 96%;
    height: 2.6666666667vw;
    top: 0vw;
    left: 2vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .process .process__in {
        height:1.0416666667vw;
        top: 0vw;
        left: 1.1458333333vw
    }
}

.menAll__ .lstPrs__reg .process .process__in:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translateX(-99%);
    transform: translateX(-99%);
    border-top: 1.3333333333vw solid transparent;
    border-right: 1.3333333333vw solid #d7ae73;
    border-bottom: 1.3333333333vw solid transparent
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .process .process__in:before {
        border-top:0.5208333333vw solid transparent;
        border-right: 0.78125vw solid #d7ae73;
        border-bottom: 0.5208333333vw solid transparent
    }
}

.menAll__ .lstPrs__reg .process .process__in:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translateX(99%);
    transform: translateX(99%);
    border-top: 1.3333333333vw solid transparent;
    border-left: 1.3333333333vw solid #d7ae73;
    border-bottom: 1.3333333333vw solid transparent
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .process .process__in:after {
        border-top:0.5208333333vw solid transparent;
        border-left: 0.78125vw solid #d7ae73;
        border-bottom: 0.5208333333vw solid transparent
    }
}

.menAll__ .lstPrs__reg .eaREgall__.active .imgGifReg__ {
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.menAll__ .lstPrs__reg .eaREgall__.active .imgGifReg__ img {
    -webkit-animation: scaleIn 1s linear infinite;
    animation: scaleIn 1s linear infinite
}

.menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ {
    background: url("../images/imgGifReg.png") no-repeat top center/100% 100%;
    width: 18vw;
    height: 24.9333333333vw;
    padding-bottom: 2.8vw;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ {
        width:7.5vw;
        height: 9.6875vw;
        padding-bottom: 1.09375vw
    }
}

.menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ img {
    display: block;
    width: 15.7333333333vw;
    font-size: 2.9333333333vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ img {
        display:block;
        width: 6.1458333333vw
    }
}

.menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ .numberGift {
    left: 0;
    right: 0;
    color: #ffe1b1;
    margin: 0 auto;
    position: absolute;
    bottom: 2.1333333333vw;
    font-size: 2.9333333333vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .eaREgall__ .imgGifReg__ .numberGift {
        display:block;
        bottom: 0.8333333333vw;
        font-size: 1.1458333333vw
    }
}

.menAll__ .lstPrs__reg .eaREgall__ .numREg__all {
    color: #ffe1b1;
    line-height: 1em
}

.menAll__ .lstPrs__reg .eaREgall__ .numREg__all span {
    font-size: 2.9333333333vw;
    width: 19.3333333333vw;
    height: 4.9333333333vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .eaREgall__ .numREg__all span {
        font-size:1.1458333333vw;
        width: 7.5520833333vw;
        height: 1.9270833333vw
    }
}

.menAll__ .lstPrs__reg .eaREgall__ .numREg__all:after {
    content: " ";
    display: block;
    width: 4.5333333333vw;
    height: 11.0666666667vw;
    margin: 0.6666666667vw auto;
    background: url("../images/numb__.png") no-repeat top center/100% 100%
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstPrs__reg .eaREgall__ .numREg__all:after {
        width:1.7708333333vw;
        height: 4.3229166667vw;
        margin: 0.2604166667vw auto
    }
}

.menAll__ .lstImgLInk__ev {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5.3333333333vw;
    margin-top: 6.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev {
        margin-top:2.6041666667vw;
        margin-left: auto;
        gap: 2.0833333333vw;
        width: 33.3333333333vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg {
    position: relative;
    background: url(../images/bgLinkEv.png) no-repeat center center;
    background-size: 100% 100%;
    width: 20vw;
    height: 33.3333333333vw;
    font-size: 1.6vw;
    padding-top: 0.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg {
        width:7.8125vw;
        height: 13.0208333333vw;
        font-size: 0.625vw;
        padding-top: 0.2604166667vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg:first-child {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg)
}

.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(3) {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg)
}

.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(4) {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg)
}

.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(5) {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg)
}

.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(6) {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg)
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(4),.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(5),.menAll__ .lstImgLInk__ev .eacLink__evImg:nth-child(6) {
        left:1.8229166667vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .imgLinkEv__ {
    width: 18.6666666667vw;
    height: 16vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg .imgLinkEv__ {
        width:7.2916666667vw;
        height: 6.25vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .imgLinkEv__ img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .nameEv__link {
    line-height: 1.1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 6.6666666667vw;
    padding-left: 0.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg .nameEv__link {
        height:2.6041666667vw;
        padding-left: 0.2604166667vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .nameEv__link .nbig__ {
    font-size: 2.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg .nameEv__link .nbig__ {
        font-size:1.0416666667vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .imGbt__link {
    margin-top: 0.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg .imGbt__link {
        margin-top:0.2604166667vw
    }
}

.menAll__ .lstImgLInk__ev .eacLink__evImg .imGbt__link img {
    width: 9.3333333333vw
}

@media only screen and (min-width: 992px) {
    .menAll__ .lstImgLInk__ev .eacLink__evImg .imGbt__link img {
        width:3.6458333333vw
    }
}

.reg_counterAll {
    color: #dabc83;
    background: url(../images/reg_counterAll.png) no-repeat center center;
    background-size: 100% 100%;
    width: 51.8666666667vw;
    height: 7.3333333333vw;
    font-size: 4vw;
    margin-top: 3.3333333333vw;
    padding-top: 1.7333333333vw;
    line-height: 1.1em
}

@media only screen and (min-width: 992px) {
    .reg_counterAll {
        width:20.2604166667vw;
        height: 2.8645833333vw;
        font-size: 1.5625vw;
        margin-top: 1.3020833333vw;
        padding-top: 0.6770833333vw
    }
}

.___register {
    padding-top: 13.3333333333vw;
    margin-top: 7.3333333333vw
}

@media only screen and (min-width: 992px) {
    .___register {
        padding-top:5.2083333333vw;
        margin-top: 2.6041666667vw
    }
}

@media only screen and (min-width: 992px) {
    .___register .inner__ {
        -webkit-box-pack:end;
        -ms-flex-pack: end;
        justify-content: flex-end
    }
}

.formRegister {
    background: url("../images/form___register.png") no-repeat top center/100% 100%;
    width: 75.8666666667vw;
    height: 94.8vw;
    margin-top: 8.6666666667vw;
    padding-top: 3.2vw
}

@media only screen and (min-width: 992px) {
    .formRegister {
        width:29.6354166667vw;
        height: 37.03125vw;
        margin-top: 3.3854166667vw;
        padding-top: 1.25vw
    }
}

.formRegister:after {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    background: url("../images/reg_gift.png") no-repeat top center/100% 100%;
    width: 25.4666666667vw;
    height: 24.4vw;
    -webkit-transform: translate(41%,12%);
    transform: translate(41%,12%)
}

@media only screen and (min-width: 992px) {
    .formRegister:after {
        width:9.9479166667vw;
        height: 9.53125vw
    }
}

.formRegister .imgTT__ {
    width: 100%
}

.formRegister #phone {
}

.formRegister #phone::-webkit-inner-spin-button,.formRegister #phone::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.formRegister #phone[type=number] {
    -moz-appearance: textfield
}

.formRegister .group__reg {
    padding: 0 5.3333333333vw;
    margin-bottom: 0.8vw
}

@media only screen and (min-width: 992px) {
    .formRegister .group__reg {
        padding:0 2.0833333333vw;
        margin-bottom: 0.3125vw
    }
}

.formRegister .group__reg .reg_ico {
    top: 0;
    right: 0;
    width: 18.6666666667vw;
    -webkit-transform: translateY(-23%);
    transform: translateY(-23%)
}

@media only screen and (min-width: 992px) {
    .formRegister .group__reg .reg_ico {
        width:7.2916666667vw
    }
}

.formRegister .stepReg_label {
    color: #ffe1b1;
    font-size: 2.9333333333vw;
    margin-top: 2.6666666667vw
}

@media only screen and (min-width: 992px) {
    .formRegister .stepReg_label {
        font-size:1.1458333333vw;
        margin-top: 1.0416666667vw
    }
}

.formRegister .stepReg_label .step__inner {
    background: url("../images/stepReg_label.png") no-repeat bottom left/100% 100%;
    padding: 2.6666666667vw
}

@media only screen and (min-width: 992px) {
    .formRegister .stepReg_label .step__inner {
        padding:1.0416666667vw
    }
}

.formRegister .stepReg_label .bigText {
    font-size: 2.9333333333vw;
    line-height: 1em;
    font-style: normal;
    width: 3.0666666667vw;
    margin-right: 3.2vw
}

@media only screen and (min-width: 992px) {
    .formRegister .stepReg_label .bigText {
        font-size:1.1458333333vw;
        width: 1.1979166667vw;
        margin-right: 1.25vw
    }
}

.formRegister .stepReg_label .strongText {
    color: #ffff00;
    font-size: 4.2666666667vw
}

@media only screen and (min-width: 992px) {
    .formRegister .stepReg_label .strongText {
        font-size:1.6666666667vw
    }
}

.formRegister .box-input {
    height: 5.3333333333vw;
    width: 62%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(0,0,0,0.5)
}

@media only screen and (min-width: 992px) {
    .formRegister .box-input {
        height:2.0833333333vw
    }
}

.formRegister .box-input input {
    width: 100%;
    height: 100%;
    padding: 5px;
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    color: #fff;
    font-size: 2.9333333333vw
}

@media only screen and (min-width: 992px) {
    .formRegister .box-input input {
        font-size:1.1458333333vw
    }
}

.formRegister .box-input input::-webkit-input-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input::-moz-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input:-ms-input-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input::-ms-input-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input::placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input:-ms-input-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .box-input input::-ms-input-placeholder {
    color: #333333;
    opacity: 1;
    font-style: initial
}

.formRegister .noteReg {
    width: 51.3333333333vw;
    margin-top: 0vw
}

@media only screen and (min-width: 992px) {
    .formRegister .noteReg {
        width:20.0520833333vw;
        margin-top: 0vw
    }
}

.formRegister .noteReg .inner_noteReg {
    color: #555555;
    display: inline-block;
    font-size: 2.4vw;
    padding: 0 2.4vw;
    background: url("../images/noteReg.png") no-repeat center left/2vw auto,url("../images/noteReg.png") no-repeat center right/2vw auto
}

@media only screen and (min-width: 992px) {
    .formRegister .noteReg .inner_noteReg {
        font-size:0.9375vw;
        padding: 0 0.9375vw;
        background: url("../images/noteReg.png") no-repeat center left/0.78125vw auto,url("../images/noteReg.png") no-repeat center right/0.78125vw auto
    }
}

.formRegister .btn-log {
    width: 31.6vw;
    height: 10vw;
    font-size: 3.2vw;
    padding-top: 0vw;
    padding-left: 6vw
}

@media only screen and (min-width: 992px) {
    .formRegister .btn-log {
        width:12.34375vw;
        height: 3.90625vw;
        font-size: 1.25vw;
        padding-top: 0vw;
        padding-left: 2.34375vw
    }
}

.formRegister .btn-join {
    width: 34.9333333333vw;
    height: 15.0666666667vw;
    font-size: 3.2vw;
    padding-top: 2.1333333333vw;
    padding-left: 10vw;
    margin-top: -2.6666666667vw;
    position: relative;
    z-index: 2;
    background: url("../images/btn_join.png") no-repeat top center/100% 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s
}

@media only screen and (min-width: 992px) {
    .formRegister .btn-join {
        width:13.6458333333vw;
        height: 5.8854166667vw;
        font-size: 1.25vw;
        padding-top: 0.8333333333vw;
        padding-left: 3.90625vw;
        margin-top: -1.0416666667vw
    }
}

.formRegister .btn-join:hover {
    background-image: url("../images/btn_join_hv.png")
}

.game__ {
    margin-top: 20vw;
    overflow: hidden
}

@media only screen and (min-width: 992px) {
    .game__ {
        margin-top:5.1041666667vw
    }
}

.game__ .tit__FTL {
    overflow: hidden
}

.game__ .tit__FTL img {
    width: 131.3333333333vw;
    margin-left: -15.3333333333vw
}

@media only screen and (min-width: 992px) {
    .game__ .tit__FTL img {
        width:54.53125vw;
        margin-left: 0
    }
}

.game__ .lst_card {
    margin-top: 3.3333333333vw;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media only screen and (min-width: 992px) {
    .game__ .lst_card {
        margin-top:1.3020833333vw
    }
}

.game__ .lst_card .cardGame {
    position: relative;
    width: 32.9333333333vw
}

@media only screen and (min-width: 992px) {
    .game__ .lst_card .cardGame {
        width:14.0625vw
    }
}

.game__ .lst_card .cardGame.active:before {
    content: " ";
    display: block;
    bottom: 3%;
    right: 3%;
    width: 28%;
    height: 15%;
    position: absolute;
    z-index: 2;
    position: absolute;
    z-index: 2;
    background: url(../images/done.png) no-repeat right center/contain
}

.game__ .lst_card .cardGame img {
    display: block;
    width: 100%
}

.counterGame {
    color: #ffe1b1;
    line-height: 1.1em;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 76.8vw;
    height: 9.3333333333vw;
    font-size: 3.4666666667vw;
    margin-top: 2.6666666667vw;
    background: url(../images/counterGame.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    .counterGame {
        width:30vw;
        height: 3.6458333333vw;
        font-size: 1.3541666667vw;
        margin-top: 1.0416666667vw
    }
}

.counterGame .fSmall {
    font-size: 73%
}

.btn_game {
    width: 46.1333333333vw;
    height: 14.8vw;
    font-size: 4.4vw;
    margin-top: 2.1333333333vw
}

@media only screen and (min-width: 992px) {
    .btn_game {
        width:18.0208333333vw;
        height: 5.78125vw;
        font-size: 1.71875vw;
        margin-top: 0.8333333333vw
    }
}

.___feature {
    margin-top: 15.3333333333vw;
    overflow: hidden
}

@media only screen and (min-width: 992px) {
    .___feature {
        margin-top:10.2083333333vw
    }
}

.___feature .tit__FTL img {
    width: 100vw
}

@media only screen and (min-width: 992px) {
    .___feature .tit__FTL img {
        width:40.3645833333vw
    }
}

.bgsl__ft {
    width: 113.3333333333vw;
    margin-left: -6.6666666667vw;
    margin-top: 6.6666666667vw
}

@media only screen and (min-width: 992px) {
    .bgsl__ft {
        width:182vw;
        margin-left: -41vw;
        margin-top: 2.6041666667vw
    }
}

.bgsl__ft .imgFT__sl {
    position: relative;
    padding: 1.0666666667vw 1.0666666667vw;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    transition: opacity 0.5s,-webkit-transform 0.5s;
    -webkit-transition: opacity 0.5s,-webkit-transform 0.5s;
    transition: transform 0.5s,opacity 0.5s;
    transition: transform 0.5s,opacity 0.5s,-webkit-transform 0.5s;
    background: url(../images/bg_itFT.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    .bgsl__ft .imgFT__sl {
        padding:0.3125vw 0.3125vw
    }
}

.bgsl__ft .imgFT__sl.slick-active:not(.slick-current) {
    -webkit-transform: translate3d(100%,0,0px) scale(0.8);
    transform: translate3d(100%,0,0px) scale(0.8)
}

.bgsl__ft .imgFT__sl.slick-active:not(.slick-current).slick-sprev {
    -webkit-transform: translate3d(72%,0,0px) scale(0.9);
    transform: translate3d(72%,0,0px) scale(0.9);
    z-index: 2
}

.bgsl__ft .imgFT__sl.slick-active:not(.slick-current).slick-snext {
    -webkit-transform: translate3d(-72%,0,0px) scale(0.9);
    transform: translate3d(-72%,0,0px) scale(0.9);
    z-index: 2
}

.bgsl__ft .imgFT__sl.slick-active:not(.slick-current).slick-snext~.slick-active {
    -webkit-transform: translate3d(-100%,0,0px) scale(0.8);
    transform: translate3d(-100%,0,0px) scale(0.8);
    z-index: 1
}

.bgsl__ft .imgFT__sl.slick-current {
    z-index: 3
}

.bgsl__ft .imgFT__sl:not(.slick-current) {
    z-index: 1;
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6)
}

.bgsl__ft .imgFT__sl:not(.slick-active) {
    opacity: 0
}

.bgsl__ft .imgFT__sl:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/bg_itFT_in.png) no-repeat center center/100% 100%;
    z-index: 2
}

.bgsl__ft .imgFT__sl img {
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    display: block
}

@media only screen and (max-width: 991px) {
    .bgsl__ft .slick-dotted {
        margin-bottom:4vw
    }
}

.about__ {
    margin-top: 2.2666666667vw;
    padding-top: 3.4666666667vw;
    padding-bottom: 18.4vw;
    background: url(../images/bg_sm.jpg) no-repeat top center/cover
}

@media only screen and (min-width: 992px) {
    .about__ {
        margin-top:0.8854166667vw;
        padding-top: 1.3541666667vw;
        padding-bottom: 7.1875vw;
        background: url(../images/bg.jpg) no-repeat top center/cover
    }
}

.about__ .imgTT__ {
    width: 72.6666666667vw
}

@media only screen and (min-width: 992px) {
    .about__ .imgTT__ {
        width:28.3854166667vw
    }
}

.menAbout__ .lgoLink__ {
    gap: 6.6666666667vw;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media only screen and (min-width: 992px) {
    .menAbout__ .lgoLink__ {
        gap:7.65625vw
    }
}

.menAbout__ .logFt__ab {
    width: 38.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .logFt__ab {
        width:18.0208333333vw
    }
}

@media only screen and (max-width: 991px) {
    .menAbout__ .grBtn__dlGame {
        width:100%;
        padding: 0;
        gap: 0
    }
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ {
    color: #ffffec;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 52vw;
    height: 24vw;
    font-size: 2.5333333333vw;
    padding-top: 4vw;
    padding-left: 22.4vw;
    margin-left: -1.3333333333vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .grBtn__dlGame .btnDlAbout__ {
        width:26.3020833333vw;
        height: 11.9791666667vw;
        font-size: 1.3020833333vw;
        padding-top: 1.5104166667vw;
        padding-left: 12.3958333333vw;
        margin-left: -0.5208333333vw
    }
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ .tBig__,.menAbout__ .grBtn__dlGame .btnDlAbout__ .tSm__ {
    position: relative;
    z-index: 3
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ .tBig__ {
    font-size: 5.6vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .grBtn__dlGame .btnDlAbout__ .tBig__ {
        font-size:2.9166666667vw
    }
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ .tSm__ {
    padding: 0 1.6vw;
    line-height: 1.25em;
    background: url(../images/btn_small.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    .menAbout__ .grBtn__dlGame .btnDlAbout__ .tSm__ {
        padding:0 0.625vw
    }
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ .icon {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.menAbout__ .grBtn__dlGame .btnDlAbout__ .icon.icon_hv {
    opacity: 0;
    visibility: hidden
}

.menAbout__ .grBtn__dlGame .btnDlAbout__:hover .icon.icon_normal {
    opacity: 0;
    visibility: hidden
}

.menAbout__ .grBtn__dlGame .btnDlAbout__:hover .icon.icon_hv {
    opacity: 1;
    visibility: visible
}

.menAbout__ .link__cdS_ {
    color: #0a0a19
}

@media only screen and (min-width: 992px) {
    .menAbout__ .link__cdS_ {
        width:30.5208333333vw
    }
}

.menAbout__ .link__cdS_ .name__cls {
    font-size: 4vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .link__cdS_ .name__cls {
        font-size:1.5625vw
    }
}

.menAbout__ .link__cdS_ .name__cls span {
    color: #f5236e;
    font-size: 4.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .link__cdS_ .name__cls span {
        font-size:1.8229166667vw
    }
}

.menAbout__ .link__cdS_ .lstIMG__sc {
    gap: 2.6666666667vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .link__cdS_ .lstIMG__sc {
        gap:1.0416666667vw
    }
}

.menAbout__ .link__cdS_ .lstIMG__sc img {
    width: 10.1333333333vw
}

@media only screen and (min-width: 992px) {
    .menAbout__ .link__cdS_ .lstIMG__sc img {
        width:3.9583333333vw
    }
}

.about_fb {
    width: 320px;
    max-width: 100vw;
    display: block!important;
    margin-top: 5.0666666667vw
}

@media only screen and (min-width: 500px) {
    .about_fb {
        width:500px;
        margin-top: 1.9791666667vw
    }
}

.modal {
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    display: none;
    overflow: auto;
    position: fixed;
    color: #333333;
    max-height: 100vh;
    font-family: "utm_cafeta";
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-size: clamp(14px,3vw,24px);
    background-color: rgba(0,0,0,0.6)
}

.modal.open {
    display: block
}

.modal .content-modal {
    top: 10vh;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 9;
    width: 96%;
    max-width: 858px
}

.modal .content-modal:after,.modal .content-modal:before {
    pointer-events: none;
    position: absolute;
    content: ""
}

.modal .wrapper-modal {
    background: url(../images/bg-modal.png) no-repeat center center;
    background-size: 100% 100%;
    width: 100%;
    position: relative;
    min-height: 312px;
    padding: 10% 6% 6%;
    border-top: 0
}

@media only screen and (min-width: 768px) {
    .modal .wrapper-modal {
        padding:6% 6% 6%
    }
}

.modal .wrapper-modal:before {
    pointer-events: none;
    position: absolute;
    content: ""
}

.modal .wrapper-modal .ic_br,.modal .wrapper-modal .ic_tl {
    pointer-events: none
}

@media only screen and (max-width: 767px) {
    .modal .wrapper-modal .ic_br,.modal .wrapper-modal .ic_tl {
        width:15vw
    }
}

.modal .wrapper-modal .ic_tl {
    left: -4%;
    top: 0
}

.modal .wrapper-modal .ic_br {
    right: -7%;
    bottom: 3%
}

.modal .main-modal {
    position: relative;
    z-index: 1
}

.modal .imgTop__Ct img {
    width: 104%
}

.modal .title-modal {
    width: 100%;
    color: #4c3e2e;
    line-height: 1.2;
    text-align: left;
    font-weight: 700;
    margin-bottom: 5%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-family: "utm_cafeta";
    text-transform: uppercase;
    font-size: clamp(15px,5vw,40px)
}

.modal .title-modal>span {
    padding: 0 17vw;
    background: url(../images/bgTitLeft.png) no-repeat center left,url(../images/bgTitRight.png) no-repeat center right;
    background-size: 15vw auto
}

@media only screen and (min-width: 768px) {
    .modal .title-modal>span {
        padding:0 150px;
        background-size: 107px 23px
    }
}

.modal .note {
    width: 80%;
    margin-top: 15px;
    font-size: clamp(1.3rem,3.5vw,1.8rem)
}

@media only screen and (min-width: 768px) {
    .modal .note {
        margin-top:25px
    }
}

.modal .note a {
    color: #ffe138;
    text-decoration: underline
}

.close_modal {
    position: absolute;
    background: url(../images/close-modal.png) no-repeat center center;
    background-size: contain;
    top: 0%;
    right: 0%;
    width: 35px;
    height: 36px;
    cursor: pointer;
    z-index: 99;
    -webkit-transition: all 0.5s;
    transition: all 0.5s
}

@media only screen and (min-width: 768px) {
    .close_modal {
        width:75px;
        height: 59px;
        top: 0%;
        right: 0%
    }
}

.close_modal-full {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1
}

#modal__login2 .content-modal {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 42.7083333333vw;
    max-width: 100%
}

@media only screen and (max-width: 991px) {
    #modal__login2 .content-modal {
        width:98.6666666667vw;
        max-width: 100%
    }
}

#modal__login2 .content-modal .wrapper-modal {
    background: url("../images/bg-modal-reg.png") no-repeat top center/100% auto;
    height: 25.1041666667vw;
    padding-top: 35%
}

@media only screen and (max-width: 991px) {
    #modal__login2 .content-modal .wrapper-modal {
        background:url("../images/bg-modal-reg_sm.png") no-repeat top center/100% auto;
        height: 104.5333333333vw;
        padding-top: 73%
    }
}

#modal__login2 .content-modal .close_modal {
    -webkit-transform: initial;
    transform: initial;
    width: 4.0104166667vw;
    height: 4.0104166667vw
}

@media only screen and (max-width: 991px) {
    #modal__login2 .content-modal .close_modal {
        top:6%;
        right: 8%;
        width: 10vw;
        height: 7.8666666667vw
    }
}

#modal__login2 .content-modal .name__gElres__ {
    font-size: 3.1770833333vw;
    line-height: 1em;
    color: #faf138
}

@media only screen and (max-width: 991px) {
    #modal__login2 .content-modal .name__gElres__ {
        font-size:8.1333333333vw
    }
}

#modal__login2 .lstImg__reg__modal {
    gap: 0vw;
    margin-top: 0vw
}

@media only screen and (max-width: 991px) {
    #modal__login2 .lstImg__reg__modal {
        gap:0vw;
        margin-top: 0vw
    }
}

#modal__login2 .lstImg__reg__modal .eachImg__regModal {
    background: url(../images/bg-img2.png) no-repeat center center;
    background-size: 100% 100%;
    width: 5.78125vw;
    height: 5.5208333333vw;
    position: relative
}

@media only screen and (max-width: 991px) {
    #modal__login2 .lstImg__reg__modal .eachImg__regModal {
        width:15.7333333333vw;
        height: 14.9333333333vw
    }
}

#modal__login2 .lstImg__reg__modal .eachImg__regModal img {
    width: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

#modal__login2 .lstImg__reg__modal .eachImg__regModal .num {
    color: #fff;
    padding: 2px;
    left: 50%;
    bottom: 0;
    line-height: 1;
    font-size: 0.8333333333vw;
    background: rgba(0,0,0,0.6);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width: 991px) {
    #modal__login2 .lstImg__reg__modal .eachImg__regModal .num {
        font-size:2.1333333333vw
    }
}

#modal__login2 .grBtn__dlGame {
    margin-top: 2.6666666667vw
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame {
        margin-top:1.0416666667vw
    }
}

#modal__login2 .grBtn__dlGame .btnDlFixedM__ {
    width: 55.6vw;
    height: 14.9333333333vw;
    font-size: 4.6666666667vw;
    line-height: 1em;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 1em;
    text-transform: capitalize;
    background: url(../images/btnDlFixedM_sm.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__ {
        width:11.7708333333vw;
        height: 4.375vw;
        font-size: 1.71875vw;
        background: url(../images/btnDlFixedM.png) no-repeat center center/100% 100%
    }
}

@media only screen and (max-width: 991px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__ br {
        display:none
    }
}

#modal__login2 .grBtn__dlGame .btnDlFixedM__:hover {
    background-image: url("../images/btnDlFixedM_sm_hv.png")
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__:hover {
        background-image:url("../images/btnDlFixedM_hv.png")
    }
}

#modal__login2 .grBtn__dlGame .btnDlFixedM__ .tBig__ {
    font-size: 3.2vw
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__ .tBig__ {
        font-size:1.25vw
    }
}

#modal__login2 .grBtn__dlGame .btnDlFixedM__ .icon {
    position: absolute;
    top: 9.6vw;
    left: 15.3333333333vw;
    width: 4.5333333333vw
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__ .icon {
        top:3.75vw;
        left: 5.9895833333vw;
        width: 1.7708333333vw
    }
}

#modal__login2 .grBtn__dlGame .btnDlFixedM__#btnGG_modal .icon {
    top: 10.5333333333vw
}

@media only screen and (min-width: 992px) {
    #modal__login2 .grBtn__dlGame .btnDlFixedM__#btnGG_modal .icon {
        top:4.1145833333vw
    }
}

@media only screen and (min-width: 768px) {
    #modal__login2 .close_modal {
        -webkit-transform:translate(28%,-48%)!important;
        transform: translate(28%,-48%)!important
    }
}

#modal__confirm .helloUser,#modal__giftcode .helloUser,#modal__login .helloUser,#modal__login2 .helloUser,#modal__mamoi .helloUser,#modal__server .helloUser {
    font-size: clamp(14px,3vw,24px)
}

#modal__confirm .noteEmail,#modal__giftcode .noteEmail,#modal__login .noteEmail,#modal__login2 .noteEmail,#modal__mamoi .noteEmail,#modal__server .noteEmail {
    font-size: clamp(10px,2.7vw,18px)
}

#modal__confirm .box-input,#modal__confirm .login-fb,#modal__giftcode .box-input,#modal__giftcode .login-fb,#modal__login .box-input,#modal__login .login-fb,#modal__login2 .box-input,#modal__login2 .login-fb,#modal__mamoi .box-input,#modal__mamoi .login-fb,#modal__server .box-input,#modal__server .login-fb {
    width: 80%;
    max-width: 462px;
    height: 50px;
    line-height: 50px;
    font-size: clamp(14px,3.5vw,22px);
    margin-bottom: 2%
}

@media only screen and (min-width: 768px) {
    #modal__confirm .box-input,#modal__confirm .login-fb,#modal__giftcode .box-input,#modal__giftcode .login-fb,#modal__login .box-input,#modal__login .login-fb,#modal__login2 .box-input,#modal__login2 .login-fb,#modal__mamoi .box-input,#modal__mamoi .login-fb,#modal__server .box-input,#modal__server .login-fb {
        height:65px;
        line-height: 65px
    }
}

#modal__confirm .login-fb,#modal__giftcode .login-fb,#modal__login .login-fb,#modal__login2 .login-fb,#modal__mamoi .login-fb,#modal__server .login-fb {
    margin-top: 3%;
    color: #915024
}

#modal__confirm .login-fb a,#modal__giftcode .login-fb a,#modal__login .login-fb a,#modal__login2 .login-fb a,#modal__mamoi .login-fb a,#modal__server .login-fb a {
    color: #000
}

#modal__confirm .box-input,#modal__giftcode .box-input,#modal__login .box-input,#modal__login2 .box-input,#modal__mamoi .box-input,#modal__server .box-input {
    font-size: clamp(16px,4vw,25px)
}

#modal__confirm .btn-log,#modal__giftcode .btn-log,#modal__login .btn-log,#modal__login2 .btn-log,#modal__mamoi .btn-log,#modal__server .btn-log {
    color: #fff5e1;
    font-size: clamp(14px,5vw,28px);
    width: 160px;
    height: 55px
}

@media only screen and (min-width: 768px) {
    #modal__confirm .btn-log,#modal__giftcode .btn-log,#modal__login .btn-log,#modal__login2 .btn-log,#modal__mamoi .btn-log,#modal__server .btn-log {
        width:220px;
        height: 75px
    }
}

#modal__login .lstG_RegLLL__ .name__gElres__ {
    font-size: clamp(13px,3.5vw,23px)
}

#modal__login .lstG_RegLLL__ .lstImg__reg__modal {
    gap: 0 10px;
    margin-top: 1%
}

#modal__login .lstG_RegLLL__ .lstImg__reg__modal .eachImg__regModal {
    background: url(../images/bg-img.png) no-repeat center center;
    background-size: 100% 100%;
    width: 15vw;
    height: 15vw;
    max-width: 70px;
    max-height: 70px
}

#modal__login .lstG_RegLLL__ .lstImg__reg__modal .eachImg__regModal img {
    width: auto;
    max-width: 80%
}

#modal__login .lstG_RegLLL__ .lstImg__reg__modal .eachImg__regModal .num {
    color: #fff;
    padding: 1px 2px;
    border-radius: 6px;
    background: rgba(0,0,0,0.5);
    font-size: clamp(10px,2.5vw,15px);
    right: 0;
    bottom: 0
}

#modal__email .main-modal {
    margin-top: 3%
}

#modal__confirm .listGiftCongrat,#modal__giftcode .listGiftCongrat {
    gap: 0 10px;
    margin-block:2% 4%}

#modal__confirm .boxGiftCode,#modal__giftcode .boxGiftCode {
    margin-top: 3%
}

#modal__confirm #codeMamoi,#modal__confirm #myGiftcode,#modal__giftcode #codeMamoi,#modal__giftcode #myGiftcode {
    width: 100%;
    height: 100%
}

#modal__confirm .btn-copy,#modal__giftcode .btn-copy {
    width: 35%;
    height: 80px;
    color: #fff!important;
    font-family: "utm_cafeta";
    font-size: clamp(16px,4vw,28px)
}

#modal__confirm .dlPopup,#modal__giftcode .dlPopup {
    margin-top: 5%;
    gap: 0 10px
}

#modal__confirm .dlPopup .itDLPC img,#modal__giftcode .dlPopup .itDLPC img {
    width: 40vw;
    max-width: 201px
}

#modal__login2 .note,#modal__mamoi .note,#modal__server .note {
    width: 70%
}

#modal__login2 .form-control,#modal__mamoi .form-control,#modal__server .form-control {
    width: 80%;
    max-width: 460px;
    height: 45px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-bottom: 10px
}

@media only screen and (min-width: 768px) {
    #modal__login2 .form-control,#modal__mamoi .form-control,#modal__server .form-control {
        height:55px;
        margin-bottom: 15px
    }
}

#modal__login2 .form-control input,#modal__login2 .form-control select,#modal__mamoi .form-control input,#modal__mamoi .form-control select,#modal__server .form-control input,#modal__server .form-control select {
    width: 100%;
    height: 100%;
    font-size: clamp(13px,2.8vw,20px)
}

#modal__login2 .form-control select,#modal__mamoi .form-control select,#modal__server .form-control select {
    padding-left: 5%;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: url(../images/icon-down.png) no-repeat 96% center;
    background-size: 4%
}

@media only screen and (min-width: 768px) {
    #modal__login2 .form-control select,#modal__mamoi .form-control select,#modal__server .form-control select {
        background-size:auto
    }
}

#modal__login2 .form-control select option,#modal__mamoi .form-control select option,#modal__server .form-control select option {
    background: rgb(0,0,0);
    color: #fff
}

#modal__login2 .btn-login,#modal__mamoi .btn-login,#modal__server .btn-login {
    font-size: clamp(16px,4vw,30px);
    width: 180px;
    height: 50px;
    line-height: 50px
}

@media only screen and (min-width: 768px) {
    #modal__login2 .btn-login,#modal__mamoi .btn-login,#modal__server .btn-login {
        width:260px;
        height: 70px;
        line-height: 70px
    }
}

#modal__login2 .other-login {
    margin-top: 10px;
    gap: 0 10px
}

@media only screen and (max-width: 767px) {
    #modal__login2 .other-login {
        margin-top:10px;
        gap: 0 5px
    }
}

#modal__login2 .other-login a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

@media only screen and (max-width: 767px) {
    #modal__login2 .other-login a img {
        width:50px
    }
}

#modal__gift__all .content-modal,#modal__result .content-modal {
    max-width: 600px
}

#modal__gift__all .wrapper-modal,#modal__result .wrapper-modal {
    min-height: 200px
}

@media only screen and (min-width: 768px) {
    #modal__gift__all .wrapper-modal,#modal__result .wrapper-modal {
        min-height:300px
    }
}

#modal__gift__all .main-modal,#modal__result .main-modal {
    width: 90%;
    padding-top: 3%
}

#modal__gift__all .helloUser,#modal__result .helloUser {
    line-height: 1.2;
    font-size: clamp(14px,3vw,23px)
}

#modal__gift__all .listGiftCongrat,#modal__result .listGiftCongrat {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 3%;
    gap: 4px
}

#modal__gift__all .listGiftCongrat .thumb-img img,#modal__result .listGiftCongrat .thumb-img img {
    width: auto;
    max-width: 80%
}

#modal__gift__all .listGiftCongrat .thumb-img .sl__cus,#modal__result .listGiftCongrat .thumb-img .sl__cus {
    width: 13vw;
    height: 13vw;
    max-width: 30px;
    max-height: 30px;
    line-height: 1;
    color: #fdf8b9;
    font-size: clamp(17px,3.5vw,25px);
    background: #e87842;
    border: 1px solid #ffeea4;
    border-radius: 50%;
    top: 55%;
    padding-bottom: 15%
}

#modal__gift__all .text-gc,#modal__result .text-gc {
    width: 75%;
    font-size: clamp(20px,6vw,28px);
    border-radius: 15px;
    background: #322826;
    padding: 10px 0;
    margin-top: 5%
}

#modal__gift__all .btn-okay,#modal__result .btn-okay {
    margin-top: 3%;
    width: 210px;
    height: 55px
}

#modal__gift__all .btn-close,#modal__result .btn-close {
    display: inline-block;
    font-size: clamp(17px,5vw,30px);
    margin-top: 2%;
    padding: 2% 5%
}

#modal__alert {
    z-index: 999
}

@media only screen and (min-width: 768px) {
    #modal__alert .wrapper-modal {
        height:250px
    }
}

#modal__alert .detail-alert {
    padding: 5% 3% 2%;
    line-height: 1.3;
    min-height: 150px
}

#modal__alert .detail-alert .text-alert {
    font-size: clamp(13px,3vw,22px)
}

.modal__content {
    overflow: auto
}

.modal__content .content-modal {
    max-width: 750px
}

#modal__mission .wrapper-modal {
    min-height: inherit
}

#modal__mission .tit-form {
    padding-top: 5%;
    margin-bottom: 0
}

.list-mission {
    padding-top: 1%
}

.item-mission {
    color: #141414;
    width: 98%;
    padding-bottom: 1%;
    margin-bottom: 1%
}

.item-mission .stt {
    font-size: clamp(12px,3vw,15px);
    background: url(../images/stt.png) no-repeat center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    max-width: 36px;
    max-height: 36px
}

.item-mission .des-mission {
    margin-left: 2%;
    margin-right: 2%;
    width: 60%
}

.item-mission .des-mission .des-top {
    border-bottom: 1px solid #42a6aa;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: clamp(12px,3vw,22px)
}

.item-mission .des-mission .des-bottom {
    line-height: 1.2;
    margin-top: 1%;
    font-size: clamp(12px,2.7vw,18px)
}

.item-mission .btn-get-luot {
    font-size: clamp(12px,3vw,20px);
    padding-block:3% 3%}

@media only screen and (max-width: 767px) {
    .item-mission .btn-get-luot {
        width:100px
    }
}

@media only screen and (min-width: 768px) {
    .item-mission .btn-get-luot {
        width:150px;
        height: 50px
    }
}

.item-mission.done .btn-get-luot {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

#modal__doiqua .f_t_dangco {
    font-size: clamp(10px,3vw,16px);
    line-height: 1
}

@media only screen and (max-width: 767px) {
    #modal__doiqua .f_t_dangco .bg-havevp {
        width:170px
    }
}

#modal__doiqua .listBallHas {
    gap: 0 6px
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .listBallHas {
        gap:0 15px
    }
}

#modal__doiqua .listBallHas .itBallHas .imgBall {
    width: 10vw;
    max-width: 50px
}

#modal__doiqua .listBallHas .itBallHas .sl-ball {
    font-size: clamp(12px,2.5vw,16px)
}

#modal__doiqua .listDoiQua {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px 5px;
    margin-top: 3%;
    width: 90%;
    max-width: 570px
}

@media only screen and (min-width: 768px) {
    #modal__doiqua .listDoiQua {
        grid-gap:10px
    }
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .listDoiQua {
        grid-gap:20px 30px
    }
}

#modal__doiqua .listDoiQua .itDoiQua .boxItDoiqua {
    background: url(../images/doiqua_popup/bg_it_doiqua.png) no-repeat center center;
    background-size: 100% 100%;
    padding: 5px 0
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .listDoiQua .itDoiQua .boxItDoiqua {
        width:267px;
        padding: 10px 0
    }
}

#modal__doiqua .listDoiQua .itDoiQua .listImgDq {
    gap: 0 6px
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .listDoiQua .itDoiQua .listImgDq {
        gap:0 10px
    }
}

#modal__doiqua .listDoiQua .itDoiQua .listImgDq .thumbImg img {
    width: 10vw;
    max-width: 50px
}

#modal__doiqua .listDoiQua .itDoiQua .needBall {
    font-size: clamp(13px,3vw,16px);
    gap: 0 5px
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .listDoiQua .itDoiQua .needBall {
        gap:0 7px
    }
}

#modal__doiqua .listDoiQua .itDoiQua .needBall .imgBall {
    width: 5vw;
    max-width: 30px
}

#modal__doiqua .btn-doiqua {
    display: inline-block;
    padding: 5px 25px;
    font-size: clamp(14px,3vw,18px)
}

@media only screen and (min-width: 1024px) {
    #modal__doiqua .btn-doiqua {
        padding:8px 30px
    }
}

#modal__doiqua .btn-doiqua:not(.active) {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

#modal__history .content-modal {
    max-width: 800px
}

#modal__history .wrapper-modal .main-modal {
    margin: 0 auto
}

#modal__history .tab-history {
    margin-top: 1%;
    gap: 0 10px;
    width: 80%;
    padding-top: 15px
}

@media only screen and (min-width: 768px) {
    #modal__history .tab-history {
        gap:0 20px
    }
}

#modal__history .tab-history .tab-item {
    font-size: clamp(12px,2.5vw,20px);
    width: 120px;
    height: 45px
}

@media only screen and (min-width: 768px) {
    #modal__history .tab-history .tab-item {
        width:190px;
        height: 60px
    }
}

#modal__history .tab-history .tab-item:not(.active) {
    -webkit-filter: grayscale(1);
    filter: grayscale(1)
}

#modal__history .tab-content-his {
    display: none
}

#modal__history .tab-content-his.active {
    display: block
}

#modal__history .table-history {
    width: 96%;
    max-height: 300px;
    overflow-y: auto
}

@media only screen and (min-width: 414px) {
    #modal__history .table-history {
        max-height:350px
    }
}

@media only screen and (min-width: 768px) {
    #modal__history .table-history {
        max-height:450px
    }
}

@media only screen and (min-width: 1024px) {
    #modal__history .table-history {
        max-height:500px
    }
}

#modal__history .table-history::-webkit-scrollbar {
    width: 4px
}

#modal__history .table-history::-webkit-scrollbar-track {
    background: #5b9376
}

#modal__history .table-history::-webkit-scrollbar-thumb {
    background: #bf271a
}

#modal__history .table-history::-webkit-scrollbar-thumb:hover {
    background: #5b9376
}

#modal__history .table-history table {
    width: 100%
}

#modal__history .table-history table tr td {
    text-align: center;
    font-size: clamp(10px,2.5vw,14px);
    padding: 2px;
    border: none
}

@media only screen and (min-width: 768px) {
    #modal__history .table-history table tr td {
        font-size:16px;
        padding: 5px 2px
    }
}

@media only screen and (min-width: 1024px) {
    #modal__history .table-history table tr td {
        padding:7px 2px
    }
}

#modal__history .table-history table thead tr {
    position: sticky;
    top: 0;
    left: 0
}

#modal__history .table-history table thead tr td {
    background: #141414;
    color: #00ffde;
    text-transform: uppercase;
    font-size: clamp(10px,2.5vw,14px);
    padding: 4px
}

@media only screen and (min-width: 768px) {
    #modal__history .table-history table thead tr td {
        font-size:16px;
        padding: 6px 0
    }
}

#modal__history .table-history table tbody tr:first-child td {
    background: transparent;
    color: #654231
}

#modal__history .table-history table tbody tr:nth-child(odd) {
    background: #fff
}

#modal__history .table-history table tbody tr:nth-child(2n) {
    background: #f5f2f2
}

#modal__history .table-history table tbody tr td {
    color: #262d38
}

#modal__mamoi .boxGiftCode {
    width: 90%;
    max-width: 90%;
    color: #4c3e2e;
    font-size: clamp(14px,2vw,30px);
    white-space: nowrap
}

#modal__mamoi input {
    width: 290px;
    color: #2587ad;
    font-family: "utm_cafeta";
    font-size: clamp(12px,2vw,25px)
}

#modal__mamoi .btn-copy {
    width: 107px;
    height: 34px;
    color: #fff;
    font-family: "utm_azuki";
    font-size: clamp(12px,2vw,22px);
    text-shadow: 1px 2px 3px rgb(0,0,0);
    background: url(../images/btn_copy.png) no-repeat center center;
    background-size: 100% 100%
}

#modal__mamoi .btn-copy:hover {
    background-image: url(../images/btn_copy_hv.png)
}

#modal__mamoi .note_invite {
    width: 500px;
    max-width: 80%;
    margin: 0 auto;
    color: #555555;
    padding: 10px 10px;
    background-color: #c5cdd1;
    font-size: clamp(12px,2vw,22px)
}

#modal__giftcode .content-modal {
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 37.03125vw;
    max-width: 100%
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .content-modal {
        width:94.8vw;
        max-width: 100%
    }
}

#modal__giftcode .content-modal .wrapper-modal {
    background: url("../images/bg-modalCode.png") no-repeat top center/100% auto;
    height: 41.3541666667vw;
    padding-top: 33%
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .content-modal .wrapper-modal {
        height:105.8666666667vw
    }
}

#modal__giftcode .content-modal .name__gElres__ {
    font-size: 3.1770833333vw;
    line-height: 1em;
    color: #faf138
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .content-modal .name__gElres__ {
        font-size:8.1333333333vw
    }
}

#modal__giftcode .lstImg__code__modal {
    gap: 0.46875vw;
    margin-top: -10%;
    width: 31.6145833333vw;
    height: 14.9479166667vw;
    background: url(../images/bg_lstgift.png) no-repeat center center/100% 100%
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .lstImg__code__modal {
        gap:0.46875vw;
        margin-top: -10%;
        width: 80.9333333333vw;
        height: 38.2666666667vw
    }
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal {
    background: url(../images/bg_imgcode.png) no-repeat center center;
    background-size: 100% 100%;
    width: 6.1458333333vw;
    height: 10vw;
    position: relative
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .lstImg__code__modal .eachImg__codeModal {
        width:15.7333333333vw;
        height: 25.6vw
    }
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal:first-child {
    margin-top: 9%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal:nth-child(2) {
    margin-top: 11%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal:nth-child(3) {
    margin-top: 7.5%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal:nth-child(4) {
    margin-top: -4%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal:nth-child(5) {
    margin-top: -14%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal img {
    width: 100%;
    max-width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: 11% 17% 19% 12%
}

#modal__giftcode .lstImg__code__modal .eachImg__codeModal .num {
    color: #fff;
    padding: 2px;
    left: 50%;
    bottom: 23%;
    line-height: 1;
    font-size: 0.8333333333vw;
    background: rgba(0,0,0,0.6);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .lstImg__code__modal .eachImg__codeModal .num {
        font-size:2.1333333333vw
    }
}

#modal__giftcode .grBtn__dlGame {
    margin-top: 12vw
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame {
        margin-top:4.6875vw
    }
}

#modal__giftcode .grBtn__dlGame .btnDlFixedM__ {
    width: 55.6vw;
    height: 14.9333333333vw;
    font-size: 4.6666666667vw;
    line-height: 1em;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 1em;
    text-transform: capitalize;
    background: url(../images/btnDlFixedM_sm.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__ {
        width:11.7708333333vw;
        height: 4.375vw;
        font-size: 1.71875vw;
        background: url(../images/btnDlFixedM.png) no-repeat center center/100% 100%
    }
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__ br {
        display:none
    }
}

#modal__giftcode .grBtn__dlGame .btnDlFixedM__:hover {
    background-image: url("../images/btnDlFixedM_sm_hv.png")
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__:hover {
        background-image:url("../images/btnDlFixedM_hv.png")
    }
}

#modal__giftcode .grBtn__dlGame .btnDlFixedM__ .tBig__ {
    font-size: 3.2vw
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__ .tBig__ {
        font-size:1.25vw
    }
}

#modal__giftcode .grBtn__dlGame .btnDlFixedM__ .icon {
    position: absolute;
    top: 9.6vw;
    left: 15.3333333333vw;
    width: 4.5333333333vw
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__ .icon {
        top:3.75vw;
        left: 5.9895833333vw;
        width: 1.7708333333vw
    }
}

#modal__giftcode .grBtn__dlGame .btnDlFixedM__#btnGG_modal .icon {
    top: 10.5333333333vw
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlFixedM__#btnGG_modal .icon {
        top:4.1145833333vw
    }
}

#modal__giftcode .grBtn__dlGame .btnDlGame__ {
    width: 34vw;
    height: 11.8666666667vw;
    font-size: 2.1333333333vw;
    padding-left: 9.0666666667vw
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlGame__ {
        width:13.28125vw;
        height: 4.6354166667vw;
        font-size: 0.8333333333vw;
        padding-left: 3.5416666667vw
    }
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .grBtn__dlGame .btnDlGame__ {
        position:relative;
        z-index: 2
    }
}

#modal__giftcode .grBtn__dlGame .btnDlGame__ .tBig__ {
    font-size: 3.7333333333vw;
    line-height: 1em
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .grBtn__dlGame .btnDlGame__ .tBig__ {
        font-size:1.4583333333vw
    }
}

#modal__giftcode .grBtn__dlGame .btnAPP__ {
    background: url(../images/bg__ap_1.png) no-repeat center center;
    background-size: 100% 100%;
    padding-left: 3.8020833333vw
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .grBtn__dlGame .btnAPP__ {
        padding-left:9.7333333333vw
    }
}

#modal__giftcode .grBtn__dlGame .btnGG__ {
    background: url(../images/bg__gg_1.png) no-repeat center center;
    background-size: 100% 100%
}

#modal__giftcode .close_modal {
    -webkit-transform: initial;
    transform: initial;
    width: 2.96875vw;
    height: 2.96875vw
}

@media only screen and (max-width: 991px) {
    #modal__giftcode .close_modal {
        top:6%;
        right: 8%;
        width: 7.6vw;
        height: 7.6vw
    }
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .close_modal {
        -webkit-transform:translate(28%,-48%)!important;
        transform: translate(28%,-48%)!important;
        top: 11%;
        right: 12%
    }
}

#modal__giftcode .boxGiftCode {
    width: 66.9333333333vw;
    height: 14vw;
    font-size: 5.8666666667vw;
    padding-left: 14.6666666667vw;
    padding-right: 5.3333333333vw;
    position: relative;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0 0 0 7%;
    background: url(../images/boxGiftCode.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .boxGiftCode {
        width:23.0208333333vw;
        height: 4.84375vw;
        font-size: 1.5104166667vw;
        padding-left: 5.2083333333vw;
        padding-right: 2.0833333333vw
    }
}

#modal__giftcode .boxGiftCode .btn-copy {
    width: 13.6vw;
    height: 13.7333333333vw;
    font-size: 4.4vw;
    background: url(../images/btnCopy.png) no-repeat center center/100% 100%;
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 1em
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .boxGiftCode .btn-copy {
        width:4.6875vw;
        height: 4.84375vw;
        font-size: 1.5104166667vw
    }
}

#modal__giftcode .boxGiftCode input {
    width: 100%;
    height: 100%;
    font-size: 4.6666666667vw;
    color: #be0000!important;
    background: transparent;
    font-family: "utm_cafeta";
    text-align: left
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .boxGiftCode input {
        font-size:2.03125vw
    }
}

#modal__giftcode .helloCode {
    margin-top: -3%;
    width: 63.0666666667vw;
    height: 8.8vw;
    font-size: 4.5333333333vw;
    padding-bottom: 0.8vw;
    background: url(../images/helloCode.png) no-repeat center center/100% 100%
}

@media only screen and (min-width: 992px) {
    #modal__giftcode .helloCode {
        margin-top:-2%;
        width: 24.6354166667vw;
        height: 3.4375vw;
        font-size: 1.7708333333vw;
        padding-bottom: 0.46875vw
    }
}

#modal__rule .content-modal,#modal__thuong .content-modal {
    max-width: 900px
}

#modal__rule .wrapper-modal,#modal__thuong .wrapper-modal {
    max-height: 650px
}

@media only screen and (min-width: 1150px) {
    #modal__rule .wrapper-modal,#modal__thuong .wrapper-modal {
        max-height:700px
    }
}

#modal__rule .main-modal,#modal__thuong .main-modal {
    padding-top: 2.5%;
    padding-inline:1%}

#modal__rule .content-rule,#modal__thuong .content-rule {
    height: 300px;
    overflow-y: auto;
    width: 98%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%
}

@media only screen and (min-width: 1024px) {
    #modal__rule .content-rule,#modal__thuong .content-rule {
        height:400px
    }
}

#modal__rule .content-rule::-webkit-scrollbar,#modal__thuong .content-rule::-webkit-scrollbar {
    width: 4px
}

#modal__rule .content-rule::-webkit-scrollbar-thumb,#modal__thuong .content-rule::-webkit-scrollbar-thumb {
    background: #417474;
    border-radius: 5px
}

#modal__rule .content-rule::-webkit-scrollbar-track,#modal__thuong .content-rule::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 5px
}

#modal__giftFirst .content-modal {
    max-width: 800px
}

#modal__giftFirst .tb__gcTh {
    width: 98%
}

#modal__giftFirst .tb__gcTh .rw__gcth {
    line-height: 1.2;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3,1fr);
    font-size: clamp(10px,2vw,20px);
    padding-block:2%}

#modal__giftFirst .tb__gcTh .rw__head {
    color: #fff;
    text-transform: capitalize;
    background-color: #725d3d;
    font-size: clamp(14px,3.2vw,25px)
}

#modal__giftFirst .body__rwTB {
    padding-right: 1%;
    height: 160px;
    overflow-y: auto
}

@media only screen and (min-width: 1024px) {
    #modal__giftFirst .body__rwTB {
        height:300px
    }
}

#modal__giftFirst .body__rwTB::-webkit-scrollbar {
    width: 5px
}

#modal__giftFirst .body__rwTB::-webkit-scrollbar-track {
    background: #0f261b
}

#modal__giftFirst .body__rwTB::-webkit-scrollbar-thumb {
    background: #bf271a
}

#modal__giftFirst .body__rwTB::-webkit-scrollbar-thumb:hover {
    background: #0f261b
}

#modal__giftFirst .btn-getMDG {
    color: #ffffff;
    width: 70%;
    padding: 4% 0 4%;
    font-family: "utm_azuki";
    text-transform: capitalize;
    font-size: clamp(12px,2vw,20px);
    text-shadow: 1px 2px 3px rgb(0,0,0)
}

#modal__giftFirst .sGC__copy {
    gap: 0 5px
}

#modal__giftFirst .sGC__copy .tgccPy {
    width: 55%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

#modal__giftFirst .sGC__copy button img {
    display: block;
    width: 3vw;
    max-width: 17px
}

.fixed__right {
    width: 240px;
    height: 385px;
    position: fixed;
    top: 50%;
    z-index: 9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -198px;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    padding-top: 37px;
    padding-left: 11px
}

.fixed__right.open {
    right: 0px
}

.fixed__right.open .nav-right-content {
    opacity: 1
}

.fixed__right:before {
    position: absolute;
    content: "";
    background: url(../images/bg-navright.png) no-repeat center center;
    background-size: 100%;
    width: 240px;
    height: 385px;
    left: 0;
    top: 0;
    z-index: -1
}

.fixed__right .outBNGame {
    margin-bottom: 15px
}

.fixed__right .outBNGame .icNR {
    width: 136px
}

.fixed__right .grBtn__dlGame {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px
}

@media only screen and (min-width: 992px) {
    .fixed__right .grBtn__dlGame {
        gap:12px
    }
}

.fixed__right .grBtn__dlGame .btnDlGameRight__ {
    color: #ffe29c;
    text-align: left;
    line-height: 1em;
    margin: 0 auto;
    position: relative;
    width: 136px;
    height: 45px;
    font-size: 16px;
    font-family: "utm_azuki";
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-transform: capitalize;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    background: url(../images/btnDlGame__.png) no-repeat center center;
    background-size: 100% 100%
}

.fixed__right .grBtn__dlGame .btnDlGameRight__:hover {
    background-image: url(../images/btnDlGame___hv.png)
}

@media only screen and (min-width: 992px) {
    .fixed__right .grBtn__dlGame .btnDlGameRight__ {
        width:136px;
        height: 45px;
        font-size: 16px;
        padding-left: 38px;
        margin-top: 5px
    }
}

.fixed__right .grBtn__dlGame .btnDlGameRight__ .tBig__ {
    font-size: 16px
}

@media only screen and (min-width: 992px) {
    .fixed__right .grBtn__dlGame .btnDlGameRight__ .tBig__ {
        font-size:16px
    }
}

.fixed__right .grBtn__dlGame .btnDlGameRight__ img {
    position: absolute;
    height: 100%;
    width: auto;
    top: 0;
    left: 3px
}

.fixed__right .dlStore__ {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px 0
}

@media only screen and (min-width: 992px) {
    .fixed__right .dlStore__ {
        gap:8px 0
    }
}

.fixed__right .dlStore__ .aLink__Dlstore {
    gap: 0 5px;
    width: 30vw;
    height: 8vw
}

@media only screen and (min-width: 992px) {
    .fixed__right .dlStore__ .aLink__Dlstore {
        padding:0;
        width: 206px;
        height: 85px
    }
}

.fixed__right .dlStore__ .aLink__Dlstore .icnDL__gamtop {
    width: 4vw
}

@media only screen and (min-width: 992px) {
    .fixed__right .dlStore__ .aLink__Dlstore .icnDL__gamtop {
        width:25px
    }
}

.fixed__right .dlStore__ .aLink__Dlstore .tSl__op_ {
    line-height: 1.2;
    font-size: clamp(8px,2vw,13px)
}

@media only screen and (min-width: 992px) {
    .fixed__right .dlStore__ .aLink__Dlstore .tSl__op_ {
        font-size:13px
    }
}

.fixed__right .dlStore__ .aLink__Dlstore .tSl__op_ .tsl__bil {
    font-size: clamp(13px,3vw,18px)
}

@media only screen and (min-width: 992px) {
    .fixed__right .dlStore__ .aLink__Dlstore .tSl__op_ .tsl__bil {
        font-size:18px
    }
}

.fixed__right .i-control {
    cursor: pointer;
    position: absolute;
    background: url(../images/bg__ar.png) no-repeat center center;
    background-size: contain;
    width: 22px;
    height: 47px;
    left: 16px;
    top: 100px
}

.fixed__right .i-control.i-control-open {
    left: 16px
}

.fixed__right .i-control.i-control-open:before {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg)
}

.fixed__right .i-control:before {
    position: absolute;
    content: "";
    width: 13px;
    height: 34px;
    background: url(../images/img-arrow.png) no-repeat center center;
    background-size: 100%;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    top: 6px;
    left: 6px
}

.fixed__right .go-top {
    cursor: pointer;
    margin-top: 5px;
    width: 29px
}

.fixed__right .go-top img {
    width: 100%
}

.te-content {
    font-size: clamp(1.4rem,3vw,1.8rem);
    color: #000000
}

.te-content span.content-event-first {
    float: left;
    font-size: 4rem;
    line-height: 5px;
    margin: 4px 2px 0px 0px
}

.te-content .content-event-h1,.te-content h1 {
    font-size: 20px;
    color: #d31d29;
    padding: 4px 0 8px 35px;
    position: relative
}

@media only screen and (min-width: 1024px) {
    .te-content .content-event-h1,.te-content h1 {
        font-size:2.4rem
    }
}

.te-content .content-event-h1:before,.te-content h1:before {
    content: "";
    width: 27px;
    height: 27px;
    background: url(../images/icon-h22-b.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 5px
}

.te-content .content-event-h2,.te-content h2 {
    margin-left: 10px;
    font-size: 1.4rem;
    padding: 4px 0 8px 35px;
    color: #d31d29;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative
}

@media only screen and (min-width: 1024px) {
    .te-content .content-event-h2,.te-content h2 {
        font-size:18px
    }
}

.te-content .content-event-h2:before,.te-content h2:before {
    content: "";
    width: 27px;
    height: 27px;
    background: url(../images/icon-h22-b.png) no-repeat center center;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 5px
}

.te-content a {
    color: #d31d29
}

.te-content ul {
    margin-left: 25px
}

.te-content ul li {
    line-height: 28px
}

.te-content p {
    line-height: 1.8
}

.te-content p img {
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 100%;
    height: auto
}

.te-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width: 1024px) {
    .te-content table {
        width:auto
    }
}

.te-content table tr td {
    border: 1px solid #2ccefd;
    margin: 0;
    padding: 5px;
    vertical-align: middle!important;
    text-align: center
}

.te-content table tr:first-child {
    background: #d97815
}

.te-content table tr:first-child td p {
    color: #333
}

.te-content fieldset {
    border: 1px solid #2ccefd;
    margin: 20px 0;
    padding: 10px;
    color: #2a2a2a;
    background: #f3f3f3
}

.te-content fieldset legend {
    color: white;
    background: #fb8142;
    padding: 0 15px
}

.te-content fieldset ul {
    margin-left: 15px
}

.te-content em {
    font-style: italic
}

table img {
    display: block
}

table {
    border-collapse: collapse;
    font-size: 1.4rem;
    margin-top: 10px
}


table tr:first-child td {
    /*background-color: #f0f0f0;
    color: #ffffff;
    text-align: center*/
}


table tr td {
    /*vertical-align: middle;
    color: #f0f0f0;
    font-weight: normal;
    text-align: center;
    padding: 5px 0px*/
}