@charset "UTF-8";
header {
    z-index: 60
}

.pop-bg {
    z-index: 120
}

.pop-wrap {
    z-index: 129
}

.menu-mask {
    z-index: 115
}

.gotop {
    z-index: 84
}

.float-banner,
.searchpage {
    z-index: 80
}

.launch-game-content {
    z-index: 115
}

.tips-display {
    z-index: 116
}

.loader-box,
.loading-mask {
    z-index: 129
}

.rotating-pop {
    z-index: 130
}

#chat-widget-container {
    z-index: 120 !important
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box
}

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

* {
    outline: none
}

select,
input {
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none
}

input[type=number] {
    -moz-appearance: textfield
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.gotop {
    display: none;
    opacity: 0;
    background: linear-gradient(180deg, #3976ff 0%, #054ea1 100%)
}

.gotop.is-visible {
    display: block;
    animation: gotopShow .3s linear forwards;
    opacity: 0
}

@keyframes gotopShow {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.s-app {
    font-family: "Source Sans 3", sans-serif;
    line-height: 1;
    touch-action: manipulation;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-feature-settings: normal;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
}

.gotop:before,
.gotop:after {
    content: "";
    position: absolute;
    top: 35%;
    left: 47%;
    width: 3px;
    height: 15px;
    border-radius: .5333333333vw;
    background: #ffffff
}

.gotop:before {
    margin-left: 2px;
    transform: rotate(40deg);
    transform-origin: top left
}

.gotop:after {
    margin-right: 2px;
    transform: rotate(-40deg);
    transform-origin: top right
}

.gotop.gotop-index {
    right: 0;
    bottom: 0;
    transform: scale(.7)
}

.gotop.bottom-1 {
    bottom: 10px
}

.gotop.bottom-2 {
    bottom: 78px
}

.gotop.bottom-3 {
    bottom: 146px
}

.gotop.bottom-4 {
    bottom: 214px
}

.gotop {
    position: fixed;
    right: 2.6666666667vw;
    bottom: 5.3333333333vw;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    transition: all .3s ease-in;
    border-radius: 50%;
    background: linear-gradient(180deg, #3976ff 0%, #054ea1 100%);
    box-shadow: 0 3.2vw 2.6666666667vw #281a7021, inset 0 .2666666667vw .8vw #ffffff80;
    color: #fff
}

.menu-mask {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.menu {
    display: none;
    position: fixed;
    z-index: 116;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* transform: translateX(-100%); */
    -webkit-overflow-scrolling: touch;
}

.menu.active {
    animation: slideIn 0.7s forwards;
    display: flex;
    transition-delay: .6s;
}

@keyframes slideIn {
    0% {
        left: -100%;
    } 
    100% {
        left: 0%;
    }
}

.main-box li {
    opacity: 0; 
    transform: translate(0px, 20px);
}

.menu.active .main-box li ,.menu.active .menu-first .menu-item .home-box{ 
    animation: slideUP 0.6s forwards;
    animation-delay: var(--delay); 
}
.menu.active .main-box li:nth-child(1) {
    --delay: 0.4s;
} 
.menu.active .main-box li:nth-child(2) {
    --delay: 0.4s;
} 
.menu.active .main-box li:nth-child(3) {
    --delay: 0.4s;
}
.menu.active .main-box li:nth-child(4) {
    --delay: 0.4s;
}
.menu.active .main-box li:nth-child(5) {
    --delay: 0.5s;
} 
.menu.active .main-box li:nth-child(6) {
    --delay: 0.6s;
} 
.menu.active .main-box li:nth-child(7) {
    --delay: 0.7s;
} 
.menu.active .main-box li:nth-child(8) {
    --delay: 0.8s;
} 
.menu.active .main-box li:nth-child(9) {
    --delay: 0.9s;
} 
.menu-first .menu-item .home-box {
    opacity: 0; 
    transform: translate(0px, 20px) ;
}
.menu.active .menu-first .menu-item .home-box {
    --delay: 1s;
} 
@keyframes slideUP {
    0% {
        transform: translate(0px, 20px);
        opacity: 0;
    } 
    50% { 
        opacity: 0.9;
    } 
    100% {
        transform: translate(0px, 0%);
        opacity: 1;
    }
} 
.menu.active .btn-close {
    position: absolute;
    z-index: 117;
    top: 0;
    right: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    animation: closeshow .6s .6s cubic-bezier(.25, .46, .45, .94) both;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 50%;
    mask-size: 50%
}

@keyframes closeshow {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.menu-first {
    /* position: relative; */
    top: 10.6666666667vw;
    left: 2.1333333333vw;
    z-index: 116;
    height: -moz-fit-content;
    height: fit-content
}

.menu-first .beforelogin,
.menu-first .afterlogin {
    width: 100%;
    height: 16vw;
    margin: 0;
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    background: #ffb80c;
    box-shadow: none
}

.menu-first .beforelogin a {
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: #0e2749;
    text-shadow: 0 0 .8vw #ffd259
}

.menu-first .beforelogin .login-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 50%;
    background: none;
    box-shadow: none
}

.menu-first .beforelogin .login-button span {
    flex: 0 0 4vw;
    background: #222222;
    height: 16vw;
    margin: 0 2.1333333333vw 0 6.6666666667vw;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 4vw
}

.menu-first .beforelogin .login-button a {
    background: none;
    text-shadow: none
}

.menu-first .beforelogin .register-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 50%;
    border-radius: 0;
    background: none;
    box-shadow: none
}

.menu-first .beforelogin .register-button span {
    flex: 0 0 4vw;
    background: #222222;
    height: 16vw;
    margin: 0 2.1333333333vw 0 6.6666666667vw;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    width: 4vw
}

.menu-first .beforelogin .register-button a {
    background: none;
    text-shadow: none
}

.menu-first .afterlogin {
    align-items: center;
    overflow: hidden
}

.menu-first .afterlogin .main-wallet,
.menu-first .afterlogin .balance {
    width: 70%;
    margin: 0 4.2666666667vw;
    padding: 0;
    background: none;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden
}

.menu-first .afterlogin .main-wallet:before,
.menu-first .afterlogin .balance:before {
    display: none
}

.menu-first .afterlogin .main-wallet .wallet,
.menu-first .afterlogin .main-wallet .text,
.menu-first .afterlogin .balance .wallet,
.menu-first .afterlogin .balance .text {
    color: #222
}

.menu-first .afterlogin .main-wallet .bonus,
.menu-first .afterlogin .main-wallet .amount,
.menu-first .afterlogin .balance .bonus,
.menu-first .afterlogin .balance .amount {
    color: #222222;
    overflow: hidden;
    text-overflow: ellipsis
}

.menu-first .afterlogin .main-wallet .icon-refresh,
.menu-first .afterlogin .balance .icon-refresh {
    background: #222222
}

.menu-first .afterlogin .main-wallet .icon-refresh.active,
.menu-first .afterlogin .balance .icon-refresh.active {
    animation: rotate 1s forwards
}

.menu-first .afterlogin .btn-wallet {
    position: absolute;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%)
}

.menu-first .afterlogin .btn-wallet .icon-wallet {
    display: block;
    z-index: 1;
    top: 0;
    position: absolute;
    width: 8vw;
    height: 8vw;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center
}

.menu-first .afterlogin .btn-wallet .icon-wallet-bg {
    display: block;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6)
}

.menu-first .afterlogin .balance {
    display: none
}

.menu-first .afterlogin.marquee .balance {
    display: flex;
    /* position: absolute; */
    top: 100%
}

.menu-first .menu-item {
    position: relative;
    margin-top: 2.1333333333vw;
    padding-bottom: 4.2666666667vw
}

.menu-first .menu-item ul {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    width: 61.8666666667vw
}

.menu-first .menu-item .item-box,
.menu-first .menu-item .contact-box,
.menu-first .menu-item .home-box {
    margin-bottom: 2.1333333333vw;
    border-radius: 2.6666666667vw;
    background: linear-gradient(45deg, #2f2e2c 0%, #24221c 100%);
    box-shadow: 0 2.1333333333vw 2.6666666667vw #0000004d, inset .2666666667vw .2666666667vw #fff3
}

.menu-first .menu-item .item-box li,
.menu-first .menu-item .contact-box li,
.menu-first .menu-item .home-box li {
    margin: 0 2.1333333333vw 0 0;
    background: none;
    box-shadow: none
}

.menu-first .menu-item .item-box li:nth-child(3n),
.menu-first .menu-item .contact-box li:nth-child(3n),
.menu-first .menu-item .home-box li:nth-child(3n) {
    margin: 0
}

.menu-first .menu-item .home-box {
    display: block
}

.menu-first .menu-item .home-box li {
    display: inline-flex;
    align-items: center;
    width: 29.8666666667vw;
    margin: 0
}

.menu-first .menu-item .home-box li a {
    display: flex;
    align-items: center;
    margin: 0 0 0 2.6666666667vw
}

.menu-first .menu-item .home-box li p {
    overflow: visible;
    white-space: normal;
    line-height: 1.2;
    margin-left: 1.0666666667vw
}

.menu-first .menu-item li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 19.2vw;
    height: 19.2vw;
    margin: 0 2.1333333333vw 2.1333333333vw 0;
    padding: 1.0666666667vw;
    transition: all .3s;
    border-radius: 2.6666666667vw;
    background: linear-gradient(45deg, #2f2e2c 0%, #24221c 100%);
    box-shadow: 0 2.1333333333vw 2.6666666667vw #0000004d, inset .2666666667vw .2666666667vw #fff3;
    font-size: 2.9333333333vw;
    text-align: center
}

.menu-first .menu-item li:nth-child(3n) {
    margin: 0 0 2.6666666667vw
}

.menu-first .menu-item li a {
    color: #fff;
    text-decoration: none
}

.menu-first .menu-item li a span {
    display: block;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0 auto
}

.menu-first .menu-item li a img {
    display: block;
    width: 8vw;
    height: 8vw;
    margin: 0 auto
}

.menu-first .menu-item li a p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
    margin-top: 1.0666666667vw
}

.menu-first .menu-item li.active {
    background: rgba(255, 255, 255, .3)
}

.menu-first .menu-item li.active p {
    color: #fff
}

.menu-first .menu-item .shortcut-box li[data-category=bonuses] a:before {
    background-image: url(/mostplayfiles/images/menu/icon-bonuses.svg)
}

.menu-first .menu-item .shortcut-box li[data-category=withdrawal] a:before {
    background-image: url(/mostplayfiles/images/menu/icon-withdrawal.svg)
}

.menu-first .menu-item .shortcut-box li[data-category=inbox] a:before {
    background-image: url(/mostplayfiles/images/menu/icon-inbox.svg)
}

.menu-first .menu-item .fantacy-game a:before {
    display: none
}

.menu-first .menu-item .fantacy-game .voucher-mark {
    position: absolute;
    top: -1.0666666667vw;
    right: -1.0666666667vw;
    width: 4.8vw;
    height: 4.8vw;
    border-radius: 50%;
    background: #ff3a3a;
    line-height: 4.8vw;
    text-align: center;
    font-weight: 600;
    color: #fff
}

.menu-first .toggle-box {
    position: absolute;
    top: -8vw;
    right: 0
}

.menu-top {
    position: relative;
    z-index: 116;
    width: 61.8666666667vw
}

.menu-banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    box-shadow: 0 .2666666667vw .8vw #ebebeb80;
    background: #ebebeb
}

.menu-banner__img {
    width: 100%;
    height: 100%
}

.menu .menu-banner {
    height: 36vw;
    padding: 2.1333333333vw
}

.menu .menu-banner .banner-v1 {
    height: 125px !important
}

.menu .menu-banner .banner-v1 .carousel-wrap {
    height: 33.3333333333vw
}

.menu .menu-banner .banner-v1 .carousel-wrap .item {
    height: 33.3333333333vw;
    padding: 0
}

.menu .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 33.3333333333vw;
    background-size: cover
}

.menu.show .menu-banner {
    height: 21.3333333333vw;
    padding: 0;
    margin-top: 2.1333333333vw
}

.menu.show .menu-banner .banner-v1 {
    height: 21.3333333333vw !important
}

.menu.show .menu-banner .banner-v1 .carousel-wrap {
    height: 21.3333333333vw
}

.menu.show .menu-banner .banner-v1 .carousel-wrap .item {
    height: 21.3333333333vw;
    padding: 0
}

.menu.show .menu-banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 21.3333333333vw;
    background-size: cover
}

.btn-voucher {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    bottom: 6.4vw
}

.btn-voucher .voucher-img {
    position: relative;
    left: 6.6666666667vw;
    width: 9.6vw;
    height: 9.6vw
}

.btn-voucher .voucher-content {
    display: flex;
    padding: 0 2.6666666667vw 0 8vw;
    line-height: 5.3333333333vw;
    max-width: 61.3333333333vw;
    background: rgba(34, 34, 34, .9);
    border-radius: 13.3333333333vw;
    border: 1px solid #494949
}

.btn-voucher .voucher-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2.6666666667vw;
    color: #fff
}

.btn-voucher .voucher-value {
    margin-left: 1.0666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 600;
    color: #ff3a3a
}

.menu-header {
    display: flex;
    position: relative;
    width: 100%;
    height: 16vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #222222;
    box-shadow: inset 0 .2666666667vw .2666666667vw #fff3
}

.menu-header video,
.menu-header img {
    position: absolute;
    z-index: 117;
    bottom: -.2666666667vw;
    left: -2.6666666667vw;
    width: 28vw;
    height: 19.7333333333vw
}

.menu-header .member-name {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 16vw;
    padding-left: 26.6666666667vw;
    font-size: 3.2vw;
    font-weight: 600
}

.menu-header .member-name .account {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 32vw;
    margin: 2.1333333333vw 0
}

.menu-header .member-name .account,
.menu-header .member-name span {
    color: #ffb80c
}

.menu-header .member-name p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    width: 26.6666666667vw;
    color: #f4b600;
    font-weight: 400
}

.menu-header .icon-arrow {
    position: absolute;
    right: 0;
    bottom: 2.1333333333vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: rotate(180deg);
    background-color: #f4b600;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 60%;
    mask-size: 60%
}

.menu-header .vip-points {
    display: none;
    width: -moz-fit-content;
    width: fit-content;
    padding: .8vw 2.6666666667vw;
    border-radius: 6.4vw;
    background: rgba(255, 255, 255, .15);
    color: #f4b600;
    font-size: 3.4666666667vw;
    font-weight: 400
}

.menu-header .vip-points span {
    display: inline-block;
    margin-left: 2.6666666667vw;
    color: #fff;
    font-weight: 500
}

.menu-second {
    position: relative;
    top: 10.6666666667vw;
    left: 2.6666666667vw;
    height: 100%
}

.menu-second ul {
    position: absolute;
    top: 0;
    left: -29.3333333333vw;
    width: 29.3333333333vw;
    height: auto;
    max-height: 170.6666666667vw;
    overflow-y: scroll;
    transition: all .5s;
    opacity: 0;
    box-shadow: inset .2666666667vw .2666666667vw #fff3
}

.menu-second ul.active { 
    border-radius: 2.6666666667vw; 
    background: rgba(246, 249, 255, .2);
    animation: slideprovider 1s forwards;
}  
@keyframes slideprovider {
    0% {
        left: -29.3333333333vw;
        opacity: 0;
    }
    50% {
        left: 0vw;
        opacity: 0.5;
    }
    100% {
        left:2.6666666667vw;
        opacity: 1;
    }
}


.menu-second ul li {
    width: 66%;
    height: auto;
    margin: 0 auto;
    padding: 2.6666666667vw 0
}

.menu-second ul li a {
    text-decoration: none
}

.menu-second ul li img {
    display: block;
    width: 55%;
    height: auto;
    max-height: 16vw;
    margin: 0 auto 1.3333333333vw;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5))
}

.menu-second ul li p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-align: center;
    margin-bottom: 9px;
}

.menu-second ul li:last-child {
    border: 0
}

.menu-second .icon-sport {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.menu.player .title {
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500;
    line-height: 5.3333333333vw
}

.menu.player .shortcut-box li {
    background: none;
    box-shadow: none
}

.menu.player .shortcut-box li:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 36%;
    left: 50%;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffffff
}

.menu.player .shortcut-box li a {
    color: #0e2749
}

.menu.player .shortcut-box li a:before {
    margin: .5333333333vw auto 2.1333333333vw
}

.menu.player .wallet-box li[data-category=deposit] {
    width: 40.5333333333vw;
    padding-left: 4vw;
    padding-right: 4vw;
    align-items: flex-start
}

.menu.player .wallet-box li[data-category=deposit] span {
    margin-left: 0;
    margin-right: 0
}

.menu.player .wallet-box li[data-category=deposit] p {
    text-align: right
}

.menu.player .wallet-box li[data-category=withdrawal] {
    margin: 0 0 2.6666666667vw
}

.whatsapp-upline {
    display: flex;
    align-items: center;
    gap: 0px 15px;
}

.whatsapp-upline .fa-whatsapp {
    color: #f3b00d;
    font-size: 35px;
}

.skeleton-item__text,
.skeleton-item__icon {
    opacity: .7;
    animation: skeleton-loading 1s linear infinite alternate;
    background-size: 400% 100%;
    background-image: var(--skeleton-item-bg, linear-gradient(to left, #dcdcdc 0%, #e5e5e5 50%, #d8d8d8 100%))
}

.skeleton-item__icon {
    border-radius: var(--skeleton-item-radius, 5px)
}

.skeleton-item__text {
    width: 16vw;
    height: 3.2vw;
    border-radius: var(--skeleton-item-radius, 3px)
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%
    }
    to {
        background-position: 0 50%
    }
}

.menu-first .menu-item .skeleton-item li a span {
    background-size: 400% 100%
}

.tab {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    flex-direction: row;
    width: 100%;
    height: 13.3333333333vw
}

.tab.search-tab {
    background: #ffffff
}

.tab.search-tab ul li {
    background: #ebebeb;
    color: #0e2749;
    position: relative;
    display: inline-table;
    padding: 0
}

.tab.search-tab ul li label,
.tab.search-tab ul li p {
    display: block;
    width: 100%;
    padding: 0 4.2666666667vw
}

.tab.search-tab ul li.active {
    z-index: 0;
    color: #0e2749;
    font-weight: 500
}

.tab.search-tab ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.6666666667vw;
    background: #f4b600
}

.tab.search-tab .btn {
    background: #ffffff
}

.tab.search-tab .btn span {
    background: #0e2749
}

.tab.filter-tab {
    background: #2b2922
}

.tab.filter-tab ul li {
    background: #ebebeb;
    color: #222222
}

.tab.filter-tab ul li.active {
    z-index: 0;
    color: #222222;
    font-weight: 500
}

.tab.filter-tab ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.6666666667vw;
    background: #f4b600
}

.tab.filter-tab .btn {
    background: linear-gradient(180deg, #ffb80c 0%, #ffb80c 100%)
}

.tab.filter-tab .btn span {
    background: #2b2922
}

.tab.search-tab,
.tab.filter-tab {
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.tab.search-tab .search-btn,
.tab.search-tab .filter-btn,
.tab.filter-tab .search-btn,
.tab.filter-tab .filter-btn {
    border-radius: 0 1.3333333333vw 1.3333333333vw 0
}

.tab.search-tab ul,
.tab.filter-tab ul {
    line-height: 0;
    text-align: left
}

.tab.search-tab ul li,
.tab.filter-tab ul li {
    border-radius: 1.3333333333vw
}

.tab.search-tab ul li.active:after,
.tab.filter-tab ul li.active:after {
    border-radius: 1.3333333333vw
}

.tab.search-tab .btn span,
.tab.filter-tab .btn span {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 40%;
    mask-size: 40%
}

.tab.active {
    position: fixed;
    top: 13.3333333333vw
}

.tab ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 0 0 2.1333333333vw;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 13.3333333333vw;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.tab ul li {
    display: inline-block;
    position: relative;
    margin-right: 1.0666666667vw;
    padding: 0 4.2666666667vw;
    border-radius: 2.6666666667vw;
    font-size: 3.4666666667vw;
    line-height: 8vw;
    vertical-align: middle;
    text-align: center
}

.tab .btn {
    display: block;
    width: 13.3333333333vw;
    height: 100%;
    padding: inherit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%
}

.input-group {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 1.2vw;
    font-size: 3.2vw;
    line-height: 1.5
}

.input-group .input-wrap+.input-wrap {
    margin-top: 2.6666666667vw
}

.input-group label {
    position: relative;
    height: 6.4vw;
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    line-height: 6.4vw;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333vw
}

.input-group input {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333vw;
    padding: 0 4.2666666667vw;
    transition: background .3s;
    border: .2666666667vw solid #3b392f;
    border-radius: 2.6666666667vw;
    background: #3b392f;
    color: #fff;
    font-family: "Source Sans 3", sans-serif;
    font-size: 4.8vw
}

.input-group input::placeholder {
    color: #aeaeae
}

.input-group input:focus {
    padding: 0 11.7333333333vw 0 4.2666666667vw;
    border: .2666666667vw solid #f4b600
}

.input-group input:disabled {
    border: .2666666667vw solid #e5e5e5;
    background: transparent;
    color: #ffb80c;

}

.input-group input.active+.delete-btn {
    background: #ff5757
}

.input-group .clear {
    position: absolute;
    top: 6.4vw;
    right: 0;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    padding: 0;
    opacity: 0;
    background: #7e919e;
    color: transparent;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/30%;
    mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/30%
}

.input-group .clear.active {
    opacity: 1
}

.input-group .eyes {
    position: absolute;
    z-index: 1;
    top: 6.4vw;
    right: 0;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    transform: none;
    background: #7e919e;
    -webkit-mask: url(../images/icon-eye-close-type.svg) no-repeat center/50%;
    mask: url(../images/icon-eye-close-type.svg) no-repeat center/50%
}

.input-group .eyes.active {
    -webkit-mask: url(../images/icon-eye-open-type03.svg) no-repeat center/50%;
    mask: url(../images/icon-eye-open-type03.svg) no-repeat center/50%
}

.input-group .refresh {
    position: absolute;
    top: 6.4vw;
    right: 0;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    border-radius: .8vw;
    background-color: #7e919e;
    -webkit-mask: url(../../assets/images/icons/icon-arrow-type01.svg) no-repeat center/40%;
    mask: url(../../assets/images/icons/icon-refresh-type01.svg) no-repeat center/40%
}

.input-group .refresh.active {
    animation: rotate 1s forwards
}

.input-group.error select,
.input-group.error input {
    border: 1px solid #ff5757
}

.input-group.password .clear {
    right: 10.6666666667vw
}

.input-group.password .clear.hasbutton {
    right: 29.3333333333vw
}

.input-group.money label {
    position: absolute;
    z-index: 2;
    top: 6.4vw;
    left: 4.2666666667vw;
    transform: translateY(-50%)
}

.input-group.money input {
    text-align: right
}

.input-group.money .clear {
    top: 0
}

.input-group.upload-file .input-wrap:before {
    content: "";
    display: flex;
    position: absolute;
    z-index: 1;
    inset: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 0 2.6666666667vw;
    border-radius: 2.1333333333vw;
    background: #f2f2f2;
    pointer-events: none
}

.input-group.upload-file input {
    opacity: 0
}

.input-group.date input:focus {
    padding: 0 4.2666666667vw
}

.input-group .info {
    margin-top: 2.1333333333vw
}

.input-group .info:before {
    content: "$";
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    transform: translateY(-50%);
    border-radius: 5.3333333333vw;
    background-color: #ffae12;
    color: #fff;
    font-size: 2.4vw;
    font-weight: 700;
    line-height: 4.2666666667vw;
    text-align: center;
    vertical-align: middle
}

.input-group .info span {
    display: inline-block;
    width: calc(100% - 5.6vw);
    margin-left: 5.6vw;
    vertical-align: middle
}

.input-group .info span .highlight {
    display: inline-block;
    color: #ffae12;
    font-weight: 700
}

.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group select:-webkit-autofill,
.input-group select:-webkit-autofill:hover,
.input-group select:-webkit-autofill:focus,
.input-group textarea:-webkit-autofill,
.input-group textarea:-webkit-autofill:hover,
.input-group textarea:-webkit-autofill:focus {
    background-image: none;
    box-shadow: 0 0 0 50px #f2f2f2 inset !important;
    -webkit-text-fill-color: #0e2749 !important;
    text-fill-color: #0e2749 !important
}

.input-wrap {
    position: relative
}

.input-wrap .status {
    position: absolute;
    top: 50%;
    right: 0;
    flex-flow: row nowrap;
    padding: 0 4.2666666667vw;
    transform: translateY(-50%);
    color: #09ac6b;
    font-size: 3.2vw;
    text-decoration: none
}

.input-wrap .status:before {
    content: "";
    display: inline-block;
    position: relative;
    top: .5333333333vw;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background-color: #09ac6b;
    -webkit-mask: url(../images/icons/icon-check-type07.svg) no-repeat 50% 50%/contain;
    mask: url(../images/icons/icon-check-type07.svg) no-repeat 50% 50%/contain
}

.input-wrap .unconfirm-btn {
    color: #feb032;
    text-decoration: underline
}

.input-wrap .unconfirm-btn:before {
    content: "";
    display: inline-block;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background-color: #feb032;
    -webkit-mask: url(../images/icons/icon-unconfirm.svg) no-repeat 100% 100%/contain;
    mask: url(../images/icons/icon-unconfirm.svg) no-repeat 100% 100%/contain
}

.input-wrap .save-btn {
    color: #054ea1;
    text-decoration: underline
}

.input-wrap .save-btn.hide {
    display: none
}

.input-wrap .save-btn:before {
    display: none
}

.input-wrap .get-vcode-btn span {
    padding: .5333333333vw 1.6vw;
    border-radius: 8vw;
    background: #f4b600;
    color: #fff
}

.input-wrap .get-vcode-btn.active {
    background: transparent;
    color: #f4b600;
    pointer-events: none
}

.input-wrap .number-default {
    position: absolute;
    top: -3.2vw;
    right: 2.6666666667vw;
    padding: .2666666667vw 2.1333333333vw;
    border-radius: 4vw;
    background: #09ac6b;
    color: #fffc;
    font-size: 3.2vw;
    text-align: center
}

.error-message {
    display: flex;
    flex-grow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2.1333333333vw;
    color: #ff5757;
    font-size: 3.2vw;
    text-align: left
}

.error-message:before {
    content: "!";
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    border-radius: 50%;
    background-color: #ff5757;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4.2666666667vw;
    text-align: center
}

.error-message span {
    display: inline-block;
    width: 90%;
    line-height: 1.2
}

.input-group-wrapper .error-message {
    margin-top: 0;
    margin-bottom: 2.1333333333vw
}

.delete-btn {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    transition: all .3s;
    background: #7e919e;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/30%;
    mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/30%
}

.verification input {
    padding-right: 34.1333333333vw
}

.verification-code {
    display: flex;
    position: absolute;
    top: 8.8vw;
    right: 12vw;
    justify-content: flex-end;
    height: 6.6666666667vw
}

.verification-code img {
    height: 100%
}

.checkbox-agree label,
.pop-checkbox-agree label {
    display: flex;
    position: relative;
    padding: 0 2.1333333333vw;
    transition: .3s;
    color: #7e919e;
    font-size: 3.2vw;
    font-weight: 500;
    line-height: 1.5
}

.checkbox-agree label:before,
.pop-checkbox-agree label:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 4vw;
    height: 4vw;
    transform: translateY(-50%);
    transition: .3s;
    border-radius: .8vw;
    background: #7e919e
}

.checkbox-agree label span,
.pop-checkbox-agree label span {
    padding: 0 0 0 5.3333333333vw
}

.checkbox-agree input,
.pop-checkbox-agree input {
    display: none
}

.checkbox-agree input:checked+label,
.pop-checkbox-agree input:checked+label {
    color: #09ac6b
}

.checkbox-agree input:checked+label i,
.pop-checkbox-agree input:checked+label i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 4vw;
    height: 4vw;
    transform: translateY(-50%);
    transition: .3s;
    border-radius: .8vw;
    background: #09ac6b;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.checkbox-agree input:checked+i,
.pop-checkbox-agree input:checked+i {
    background: #09ac6b
}

.checkbox-agree input:checked+label:before,
.pop-checkbox-agree input:checked+label:before {
    background: none
}

.check-group {
    display: flex;
    flex-direction: column;
    padding-bottom: 4.2666666667vw;
    font-size: 3.2vw;
    line-height: 1.5
}

.check-group label {
    color: #0e2749;
    font-weight: 500;
    line-height: 6.4vw
}

.check-group ul {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100;
    width: 100%
}

.check-group ul.col2 {
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(auto-fill, calc((100% - 2.1333333333vw) / 2))
}

.check-group ul.col3 {
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(auto-fill, calc((100% - 4.2666666667vw) / 3))
}

.check-group ul.col4 {
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(auto-fill, calc((100% - 6.4vw)/4))
}

.check-group ul.col5 {
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(auto-fill, calc((100% - 8.5333333333vw) / 5))
}

.check-group [type=checkbox],
.check-group [type=radio] {
    display: none
}

.check-group [type=checkbox]+label,
.check-group [type=radio]+label {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.1333333333vw;
    transition: .3s;
    border-radius: 2.6666666667vw;
    line-height: 9.3333333333vw;
    background: #f2f2f2;
    color: #0e2749;
    font-size: 3.2vw;
    text-align: center
}

.check-group [type=checkbox]+label span,
.check-group [type=radio]+label span {
    z-index: 3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.check-group [type=checkbox]:checked+label,
.check-group [type=radio]:checked+label {
    z-index: 2;
    background: #f4b600;
    color: #fff
}

.check-group [type=checkbox]:checked+label:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 2.5333333333vw;
    background: #222222
}

.check-group [type=checkbox]:checked+label i {
    position: absolute;
    z-index: 2;
    right: -.2666666667vw;
    bottom: -.2666666667vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 2.1333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

.check-group [type=radio]:checked+label {
    background: #f4b600
}

.check-group [type=radio]:checked+label:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 2.5333333333vw;
    background: #222222
}

.check-group.checkbox-icon-style [type=checkbox]+label,
.check-group.checkbox-icon-style [type=radio]+label {
    display: inline-flex;
    flex-direction: row;
    width: 100%
}

.check-group.checkbox-icon-style [type=checkbox]+label .payment-img,
.check-group.checkbox-icon-style [type=radio]+label .payment-img {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 5.3333333333vw;
    height: 100%;
    margin: 0 2.1333333333vw 0 0
}

.check-group.checkbox-icon-style [type=checkbox]+label .payment-img img,
.check-group.checkbox-icon-style [type=radio]+label .payment-img img {
    width: 100%;
    margin: auto
}

.check-group.checkbox-icon-style [type=checkbox]+label span,
.check-group.checkbox-icon-style [type=radio]+label span {
    width: auto
}

.check-group.style-add-amount input[type=checkbox]+label span:before,
.check-group.style-add-amount input[type=radio]+label span:before {
    content: "+";
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
    transition: width .7s
}

.check-group.style-add-amount.active input[type=checkbox]+label span:before,
.check-group.style-add-amount.active input[type=radio]+label span:before {
    width: 10px;
    height: 10px;
    overflow: visible
}

.check-group.style-add-amount.active input[type=checkbox]+label.ani,
.check-group.style-add-amount.active input[type=radio]+label.ani {
    animation: moneyBtn-Animation .5s ease-in-out 1
}

@keyframes moneyBtn-Animation {
    0% {
        filter: drop-shadow(0 0 0 #f4b600)
    }
    to {
        filter: drop-shadow(0 -20px 0 rgba(244, 182, 0, 0))
    }
}

.check-group+.check-group {
    padding-top: 2.6666666667vw;
    border-top: .2666666667vw dashed rgba(255, 255, 255, .05)
}

.check-group.type li label {
    min-height: 10.6666666667vw;
    padding: 1.6vw 5.3333333333vw !important
}

.check-group.type li label span {
    z-index: 3;
    width: 90%;
    font-style: italic;
    line-height: 1 !important
}

.check-group.type li label p {
    z-index: 3;
    width: 90%;
    margin-top: .5333333333vw;
    overflow: hidden;
    color: #0e2749;
    font-size: 2.6666666667vw;
    font-style: italic;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.check-group.type li label img {
    display: inline-block;
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 0;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    transform: translateY(-50%)
}

.check-group.type li label .instant {
    animation: fly 1.8s linear infinite
}

.check-group.type li label .super-fast {
    animation: fly .8s linear infinite
}

.check-group.type li label .express {
    animation: fly .15s linear infinite
}

@keyframes fly {
    0% {
        transform: translate(-50%, -50%) translate(0)
    }
    50% {
        transform: translate(-50%, -50%) translate(-3px, 3px)
    }
    to {
        transform: translate(-50%, -50%) translate(0)
    }
}

.overflow {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: bg-gradient 2s ease alternate infinite;
    border-radius: 1.3333333333vw;
    background: transparent
}

.overflow:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 1.2vw;
    background: #f2f2f2
}

.overflow .slow {
    position: absolute;
    z-index: 3;
    top: 20%;
    left: 100%;
    width: 3.2vw;
    height: .5333333333vw;
    animation: shoot-slow 1.5s infinite linear;
    opacity: .3;
    background: #f4b600
}

.overflow .slow:before {
    content: "";
    position: absolute;
    top: 2.6666666667vw;
    right: -2.6666666667vw;
    width: 2.6666666667vw;
    height: .5333333333vw;
    background: #f4b600
}

.overflow .slow:after {
    content: "";
    position: absolute;
    top: 3.2vw;
    right: 16vw;
    width: 2.6666666667vw;
    height: .5333333333vw;
    background: #f4b600
}

.overflow .medium {
    position: absolute;
    top: 80%;
    left: 100%;
    width: 4vw;
    height: .5333333333vw;
    animation: shoot-medium 1s linear infinite;
    opacity: .3;
    background: #f4b600
}

.overflow .medium:before {
    content: "";
    position: absolute;
    top: -2.6666666667vw;
    right: 10.6666666667vw;
    width: 4vw;
    height: .5333333333vw;
    background: #f4b600
}

.overflow .medium:after {
    content: "";
    position: absolute;
    top: 0;
    right: 16vw;
    width: 4vw;
    height: .5333333333vw;
    background: #f4b600
}

.overflow .fast {
    position: absolute;
    top: 20%;
    left: 100%;
    width: 4.8vw;
    height: .5333333333vw;
    animation: shoot-fast .8s linear infinite;
    opacity: .3;
    background: #f4b600
}

.overflow .fast:before {
    content: "";
    position: absolute;
    top: 2.6666666667vw;
    right: -2.6666666667vw;
    width: 4.8vw;
    height: .5333333333vw;
    background: #f4b600
}

.overflow .fast:after {
    content: "";
    position: absolute;
    top: 3.2vw;
    right: 16vw;
    width: 4.8vw;
    height: .5333333333vw;
    background: #f4b600
}

.super-fast .overflow {
    background: linear-gradient(60deg, #32d5cf, #00b5ff, #a4ff80, #00b5ff);
    background-size: 300% 300%
}

.express .overflow {
    background: linear-gradient(60deg, #a480ff, #ffa380, #c880ff, #ff85f0);
    background-size: 300% 300%
}

@keyframes bg-gradient {
    0% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
    to {
        background-position: 0% 50%
    }
}

@keyframes shoot-slow {
    0% {
        margin-left: 0
    }
    to {
        margin-left: -120%
    }
}

@keyframes shoot-medium {
    0% {
        margin-left: 0
    }
    to {
        margin-left: -120%
    }
}

@keyframes shoot-fast {
    0% {
        margin-left: 0
    }
    to {
        margin-left: -120%
    }
}

.checkbox-only-txt [type=checkbox]+label,
.checkbox-only-txt [type=radio]+label,
.style-add-amount [type=checkbox]+label,
.style-add-amount [type=radio]+label {
    line-height: 9.3333333333vw
}

.payment-img {
    z-index: 2;
    margin: 2.1333333333vw 0 .8vw
}

.payment-img img {
    display: block;
    width: auto;
    height: 6.4vw
}

.select-group {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 3.2vw;
    font-size: 3.2vw;
    line-height: 1.5
}

.select-group label {
    position: relative;
    height: 6.4vw;
    overflow: hidden;
    color: #0e2749;
    font-weight: 500;
    line-height: 6.4vw;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333vw
}

.select-group select {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333vw;
    padding: 0 11.7333333333vw 0 4.2666666667vw;
    transition: background .3s;
    border: 0;
    border-radius: 2.6666666667vw;
    background: #f2f2f2;
    color: #0e2749;
    font-family: "Source Sans 3", sans-serif;
    font-size: 4.8vw
}

.select-group:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 11.7333333333vw;
    right: 4.2666666667vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.select-group .error-message {
    margin: 2.1333333333vw 0 0;
    padding: 0
}

.select-group ul {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 100;
    width: 100%
}

.select-group ul.col2 {
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, calc((100% - 10px)/2))
}

.select-group ul.col3 {
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, calc((100% - 20px) / 3))
}

.select-group ul.col4 {
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, calc((100% - 30px)/4))
}

.select-group ul.col5 {
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, calc((100% - 40px)/5))
}

.select-group li {
    display: inline-block;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select-group [type=checkbox],
.select-group [type=radio] {
    display: none
}

.select-group [type=checkbox]+label,
.select-group [type=radio]+label {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 0 2.6666666667vw;
    border-radius: .8vw;
    background-color: #fff;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 9.3333333333vw;
    text-align: center
}

.select-group [type=checkbox]+label span,
.select-group [type=radio]+label span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select-group [type=checkbox]:checked+label,
.select-group [type=radio]:checked+label {
    border: .2666666667vw solid #f4b600;
    background-color: #fff;
    color: #0e2749
}

.style-bank {
    position: relative;
    padding: 2.6666666667vw 0
}

.style-bank:after {
    display: none
}

.style-bank ul {
    grid-template-columns: none
}

.style-bank li {
    overflow: hidden
}

.style-bank li input[type=checkbox]+label,
.style-bank li input[type=radio]+label {
    height: auto;
    padding: 0;
    transition: all .3s;
    border: .4vw solid transparent;
    border-radius: 2.6666666667vw;
    background: #a4b5da
}

.style-bank li input[type=checkbox].active+label,
.style-bank li input[type=radio].active+label {
    border: .4vw solid #f4b600;
    background: #6481c0
}

.style-bank li input[type=checkbox].active+label i,
.style-bank li input[type=radio].active+label i {
    position: absolute;
    z-index: 2;
    right: -.2666666667vw;
    bottom: -.2666666667vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 1.0666666667vw;
    background-repeat: no-repeat;
    background-position: center
}

.style-bank li .bg-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: cover;
    mask-size: cover
}

.frost-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: .2666666667vw solid rgba(14, 39, 73, .2);
    border-radius: 2.1333333333vw;
    opacity: 0
}

.frost-mask .frost-bg {
    opacity: 0
}

.frost-card .frost-bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2.1333333333vw;
    opacity: 1
}

.frost-card .frost-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: frost 2s ease both
}

.frost-card .frost-bg img:nth-child(2) {
    animation-delay: 2s
}

.frost-card .frost-bg img:nth-child(3) {
    animation-delay: 3s
}

.frost-card .frost-mask {
    animation: frost 2s ease both;
    opacity: 1;
    background: rgba(234, 234, 234, .8);
    font-weight: 600;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.frost-card .frost-mask .frost-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.3333333333vw 3.2vw
}

.frost-card .frost-mask .frost-tag .text {
    display: -webkit-box;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 1.2;
    white-space: break-spaces;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.frost-card .frost-mask .frost-tag .frost-icon {
    margin: 0 2.1333333333vw 0 0
}

.frost-card .frost-mask .frost-tag .lock {
    position: relative;
    width: 3.7333333333vw;
    height: 2.6666666667vw;
    margin-top: 1.6vw;
    border-radius: .5333333333vw;
    background-color: #0e2749
}

.frost-card .frost-mask .frost-tag .lock:before {
    content: "";
    position: absolute;
    top: -1.6vw;
    left: .5333333333vw;
    width: 1.6vw;
    height: 1.6vw;
    border-top: .5333333333vw solid #0e2749;
    border-right: .5333333333vw solid #0e2749;
    border-left: .5333333333vw solid #0e2749;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0
}

.frost-card .frost-mask .frost-btn {
    display: inline-flex;
    justify-content: center;
    margin-top: 2.1333333333vw
}

.frost-card .frost-mask .frost-btn .btn {
    height: 8.5333333333vw;
    margin: 0 1.0666666667vw;
    padding: 0 2.6666666667vw;
    border-radius: 2.1333333333vw;
    font-size: 3.2vw;
    line-height: 8.5333333333vw
}

.frost-card .frost-mask .frost-btn .btn.add-card {
    box-sizing: border-box;
    border: .4vw solid #0e2749;
    color: #0e2749
}

.frost-card .frost-mask .frost-btn .btn.contact-cs {
    background: #0e2749;
    color: #fff
}

@keyframes frost {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.select-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 2.6666666667vw 2.6666666667vw 2.6666666667vw 4.2666666667vw;
    overflow: hidden;
    border-radius: 2.1333333333vw;
    box-shadow: 0 .5333333333vw .8vw #0000004d;
    font-size: 3.2vw
}

.select-card .select-card-inner {
    color: #fff;
    text-align: left
}

.select-card .select-card-inner .unitname {
    display: inline-flex;
    width: inherit;
    font-size: 4.2666666667vw;
    line-height: 1.3;
    white-space: break-spaces
}

.select-card .select-card-inner .username {
    padding: 1.3333333333vw 0;
    opacity: .7;
    font-size: 3.2vw;
    line-height: 1.3
}

.select-card .select-card-inner .username img,
.select-card .select-card-inner .username span {
    display: inline;
    height: 3.2vw;
    margin-right: 1.3333333333vw;
    font-size: 3.2vw;
    vertical-align: middle
}

.select-card .select-card-inner .username img {
    transform: translateY(-1px)
}

.select-card .select-card-inner .cardnumber {
    font-size: 4.2666666667vw;
    font-weight: 400;
    line-height: 1.2;
    text-align: left
}

.select-card .select-card-inner .cardnumber span {
    word-break: break-all;
    white-space: normal
}

.withdrawalSwift {
    margin-top: 1.3333333333vw;
    line-height: 0
}

.withdrawalSwift p {
    display: inline-block;
    padding: 0 1.3333333333vw;
    border-radius: 10px;
    background: rgba(0, 0, 0, .2);
    line-height: 1.5
}

.file-box {
    display: flex;
    position: absolute;
    z-index: 2;
    inset: 0;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 2.1333333333vw;
    color: #0e2749;
    pointer-events: none
}

.file-name {
    flex: 3;
    padding: 0 2.6666666667vw;
    pointer-events: inherit
}

.file-name.tip {
    color: #0e274966;
    font-size: 3.2vw;
    font-weight: 400
}

.upload-btn {
    display: flex;
    flex: 1;
    flex-basis: 8vw;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #f4b600;
    pointer-events: none
}

.upload-btn img {
    display: block;
    height: 35%
}

.upload-group {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 0;
    margin-top: 1.8666666667vw;
    overflow: hidden;
    transition: .3s;
    border: 0;
    text-align: center
}

.upload-group.active {
    height: 40vw;
    border: 1px dashed #999999
}

.upload-group.active .delete-btn {
    display: block
}

.upload-group.active>img {
    height: auto;
    max-height: 100%
}

.upload-group>img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: 0;
    transition: .3s
}

.area-pic {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    border: 0;
    text-align: center;
    pointer-events: none
}

.area-pic img {
    max-width: 100%;
    max-height: 100%
}

.area-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1.0666666667vw;
    background: rgba(0, 0, 0, .7)
}

.area-mask .m-icon {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    margin: 2.6666666667vw;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    box-shadow: 0 0 1.0666666667vw #00000080
}

.area-mask .m-text {
    font-size: 3.7333333333vw;
    text-shadow: 0 0 4px rgba(0, 0, 0, .5)
}

.area-mask .m-btn {
    margin-top: 1.8666666667vw;
    padding: 1.3333333333vw 4.5333333333vw;
    border-radius: 1.0666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    color: #fff;
    font-size: 3.2vw
}

.area-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.area-inner input {
    position: absolute;
    z-index: 1;
    inset: 0;
    height: 100%;
    opacity: 0
}

.u-icon {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    background: rgba(14, 39, 73, .2);
    -webkit-mask: url(/mostplayfiles/images/icon-set/player/kyc/upload.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/icon-set/player/kyc/upload.svg) no-repeat center/100%
}

.u-text {
    color: #7e919e;
    font-size: 3.7333333333vw
}

.upload-wrap .upload-group {
    flex-direction: column;
    height: 35.2vw;
    border: 1px dashed rgba(255, 255, 255, .3);
    border-radius: 2.6666666667vw;
    background: #f2f2f2
}

.upload-wrap .upload-group.active {
    height: 35.2vw
}

.upload-wrap .pending .m-icon {
    background-color: #054ea1
}

.upload-wrap .pending .m-text {
    color: #054ea1
}

.upload-wrap .failed .area-mask {
    pointer-events: none
}

.upload-wrap .failed .m-icon {
    background-color: #ff5757
}

.upload-wrap .failed .m-text {
    color: #ff5757
}

.upload-wrap .failed .delete-btn {
    display: block
}

.upload-wrap .success .m-icon {
    background-color: #09ac6b
}

.upload-wrap .success .m-text {
    color: #09ac6b
}

.area-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 2.1333333333vw 0;
    background-color: transparent;
    font-size: 3.2vw;
    line-height: 2
}

.area-group .item {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%
}

.area-group h3 {
    flex: 1;
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.area-group .tip {
    display: flex;
    justify-content: flex-end;
    color: #0e274999;
    font-size: 2.6666666667vw
}

.area-group .text {
    color: #f4b600;
    word-break: break-all
}

.qrcode {
    position: absolute;
    z-index: 131;
    top: -6.4vw;
    right: 0;
    width: 12vw;
    margin-right: 2.6666666667vw;
    transform: translateY(-50%)
}

.qrcode img {
    width: 100%
}

.tag-recommond {
    position: absolute;
    z-index: 1;
    top: 1.3333333333vw;
    left: -1.0666666667vw;
    width: 5.3333333333vw;
    height: 4vw;
    border-top-left-radius: .5333333333vw;
    border-top-right-radius: .8vw;
    border-bottom-right-radius: .8vw;
    background-color: #054ea1
}

.tag-recommond span {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 55%;
    mask-size: 55%
}

.tag-recommond:before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 4px 4px 0;
    border-style: solid;
    border-color: transparent #00060d transparent transparent
}

.pop-get-vcode,
.pop-confirm-password {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 95vh;
    padding-top: 6.4vw;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #ebebeb
}

.pop-get-vcode.active,
.pop-confirm-password.active {
    bottom: 0
}

.pop-get-vcode .btn-closed,
.pop-confirm-password .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    background: #7e919e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.pop-get-vcode .menu-box,
.pop-confirm-password .menu-box {
    background: #ffffff
}

.pop-get-vcode .menu-box .status,
.pop-confirm-password .menu-box .status {
    top: 5.8666666667vw
}

.pop-get-vcode .phone-code-list,
.pop-confirm-password .phone-code-list {
    max-height: 28.5333333333vw
}

.pop-get-vcode .input-group label,
.pop-confirm-password .input-group label {
    height: auto;
    white-space: normal;
    margin-bottom: 1.0666666667vw
}

.acc-copy {
    background: #7e919e;
    cursor: pointer;
    height: 5.3333333333vw;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
    mask-size: 80%;
    position: relative;
    width: 5.3333333333vw
}

.icon-copy {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 1.3333333333vw 2.6666666667vw;
    transform: translateY(-100%);
    border-radius: .8vw;
    opacity: 0;
    background: #ffffff;
    box-shadow: 0 0 .5333333333vw #fff;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 1.5
}

.icon-copy:before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: #ffffff transparent transparent
}

.icon-copy.show {
    display: block;
    animation: icon-copy-show .3s linear forwards
}

.icon-copy.hide {
    display: block;
    animation: icon-copy-hide .2s linear forwards
}

.pop-get-vcode {
    z-index: 2147483999
}

.resend-btn {
    display: none;
    margin-bottom: -15px;
    text-align: end
}

.resend-btn span {
    padding: 1.8666666667vw;
    color: #f4b600;
    font-size: 2.6666666667vw;
    text-decoration: underline
}

.resend-btn.show {
    display: inline-block
}

.resend-btn.enable {
    opacity: 1;
    pointer-events: auto
}

@keyframes icon-copy-show {
    0% {
        top: -8vw;
        opacity: 0
    }
    to {
        top: -1.3333333333vw;
        opacity: 1
    }
}

@keyframes icon-copy-hide {
    0% {
        top: -1.3333333333vw;
        opacity: 1
    }
    to {
        top: -8vw;
        opacity: 0
    }
}

.vip-area-group {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10.6666666667vw
}

.vip-area-group .left-box {
    position: relative;
    width: 50%;
    height: 6.6666666667vw
}

.vip-area-group .item {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%
}

.vip-area-group .item h3 {
    color: #0e2749
}

.vip-area-group .item .points-number {
    flex: 1;
    color: #f4b600;
    font-size: 5.6vw;
    text-align: center
}

.vip-area-group .right-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    height: 100%
}

.vip-area-group .right-box a {
    text-decoration: none
}

.vip-area-group .right-box .goto-myvip {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40vw;
    height: 11.7333333333vw;
    border-radius: 2.6666666667vw;
    background: #054ea1
}

.vip-area-group .right-box .goto-myvip .myvip-text {
    color: #fff;
    font-size: 3.7333333333vw
}

.vip-area-group .right-box .goto-myvip .myvip-text span {
    display: inline-block;
    width: 4.2666666667vw;
    height: 3.7333333333vw;
    margin-left: 2.1333333333vw;
    background: #ffffff;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover
}

.crypto-group-2 {
    position: relative
}

.crypto-group-2 .crypto-wrap {
    padding-bottom: 3.2vw
}

.crypto-group-2 .crypto-input {
    position: relative;
    width: 100%;
    margin: 2.6666666667vw 0 1.3333333333vw
}

.crypto-group-2 .crypto-input .currency {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    height: 11.7333333333vw;
    padding: 0 4.2666666667vw;
    color: #0e2749
}

.crypto-group-2 .crypto-input .currency .icon {
    width: 6.4vw;
    height: 6.4vw
}

.crypto-group-2 .crypto-input .currency .icon img {
    width: 100%;
    height: 100%
}

.crypto-group-2 .crypto-input .currency .unit {
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 50%;
    background: #ffae12;
    color: #fff;
    font-size: 4.2666666667vw;
    line-height: 6.4vw;
    text-align: center
}

.crypto-group-2 .crypto-input input {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333vw;
    padding: 0 2.6666666667vw 0 11.7333333333vw;
    transition: border .3s;
    border: .2666666667vw solid #f2f2f2;
    border-radius: 2.6666666667vw;
    background-color: #f2f2f2;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 400;
    text-align: right;
    -webkit-appearance: none;
    appearance: none
}

.crypto-group-2 .crypto-input input::placeholder {
    color: #0e274966
}

.crypto-group-2 .crypto-input input:focus {
    padding-right: 8.5333333333vw;
    border: .2666666667vw solid #f4b600;
    outline: none
}

.crypto-group-2 .crypto-input .delete-btn {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 8vw;
    height: 10.6666666667vw;
    transform: translateY(-50%);
    transition: all .3s;
    opacity: 0;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat 40% center/40%;
    mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat 40% center/40%
}

.crypto-group-2 .switch-btn {
    display: inline-block;
    position: relative;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 2.1333333333vw;
    background: #7e919e;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 80%;
    mask-size: 80%
}

.crypto-group-2 .input-text {
    display: inline-block;
    color: #7e919e;
    font-size: 3.2vw
}

.crypto-group-2 .input-text i {
    margin: 0 2.1333333333vw;
    color: #0e2749;
    font-weight: 500
}

.upload-box {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 0;
    margin-top: 1.8666666667vw;
    overflow: hidden;
    transition: all .3s;
    border: 0;
    text-align: center;
    cursor: pointer
}

.upload-box.active {
    height: 40vw;
    border: 1px dashed #999999
}

.upload-box.active .delete-btn {
    opacity: 1
}

.upload-box.active img {
    height: auto;
    max-height: 100%
}

.upload-box .delete-btn {
    display: block;
    transition: all .3s;
    opacity: 0
}

.upload-box img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: 0;
    transition: all .3s
}

.personal-phone-group .add-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 1.3333333333vw;
    padding: 0 .5333333333vw;
    border-radius: .8vw;
    background: #f4b600;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 1.2;
    vertical-align: sub
}

.personal-phone-group .add-btn span {
    padding-right: 1.3333333333vw
}

.personal-phone-group .add-btn-icon {
    position: relative;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

.personal-phone-group .add-btn-icon:before,
.personal-phone-group .add-btn-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .8vw;
    height: 2.6666666667vw;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    background: #0e2749
}

.personal-phone-group .add-btn-icon:after {
    transform: translate(-50%, -50%) rotate(90deg)
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.toggle-box {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    cursor: pointer
}

.toggle-box__title {
    color: #fffc
}

.toggle-box__inner {
    width: 12vw;
    height: 6.6666666667vw;
    margin-left: 1.3333333333vw
}

.toggle-box__input {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 2
}

.toggle-box__switch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 12vw;
    height: 6.6666666667vw;
    padding: .8vw;
    background: #032682;
    border-radius: 8vw;
    cursor: pointer
}

.toggle-box__disc {
    width: 4.8vw;
    height: 4.8vw;
    padding: 1.0666666667vw;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 1px #0003;
    transition: left .5s, transform .5s
}

.toggle-box__toggle-img {
    width: 100%;
    height: 100%;
    background: #000000;
    -webkit-mask-size: contain
}

.toggle-box__toggle-img--light {
    display: block
}

.toggle-box__toggle-img--dark {
    display: none
}

.toggle-box__input~.toggle-box__switch {
    position: absolute
}

.toggle-box__input~.toggle-box__switch .toggle-box__disc {
    position: relative;
    left: 0;
    transform: translate(0)
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__disc {
    left: 100%;
    transform: translate(-100%)
}

.toggle-box__input:checked~.toggle-box__switch {
    background: #333333
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__toggle-img--dark {
    display: block
}

.toggle-box__input:checked~.toggle-box__switch .toggle-box__toggle-img--light {
    display: none
}

.member-content .password-condition p {
    margin-top: 1.3333333333vw;
    padding: 0;
    text-align: left;
    color: #6481c0;
    font-size: 3.2vw
}

.content-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 5.3333333333vw);
    margin: 0 auto;
    padding: 2.1333333333vw 0
}

.content-title h2 {
    color: #0e2749;
    font-size: 4vw;
    font-weight: 700
}

.content-title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    background-color: #f4b600;
    vertical-align: middle
}

.content-title h2 span {
    display: inline-block;
    vertical-align: middle
}

.content-title .layout-btn {
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-radius: 6.6666666667vw;
    background-color: #f4b600;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.content-title .layout-btn.active {
    background-image: url(/mostplayfiles/images/icon-set/index-theme-icon/theme-brand-icon.svg)
}

.banner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: -.2666666667vw 0 0;
    overflow: hidden;
    background-color: #f4b600
}

.banner:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 13.3333333333vw;
    transform: translateY(-100%);
    background-color: #2254ba;
    pointer-events: none
}

.banner .banner-v1 {
    height: 36vw
}

.banner .slick-dots {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    pointer-events: none
}

.banner .slick-dots li {
    display: inline-block;
    position: relative;
    width: 5.3333333333vw;
    height: .5333333333vw;
    margin: 0 .5333333333vw;
    overflow: hidden;
    border-radius: .5333333333vw;
    background-color: #054ea180;
    text-indent: -2666.4vw
}

.banner .slick-dots li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #054ea1
}

.banner .slick-dots li.slick-active:after {
    animation: slick--times-animation 3s
}

.banner .banner-v2 {
    height: 32vw
}

.banner .banner-v3 {
    height: 56vw
}

.banner-image {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

@keyframes slick--times-animation {
    0% {
        width: 0
    }
    to {
        width: 100%
    }
}

.member-content .banner {
    background-color: #0e2749
}

.member-content .banner li {
    background-color: #ffffff4d
}

.member-content .banner li:after {
    background-color: #fff
}

.popup-page {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: start
}

@supports (height: 100dvh) {
    .popup-page {
        height: 100dvh
    }
}

@supports not (height: 100dvh) {
    .popup-page {
        height: 100vh
    }
}

.popup-page__backdrop {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: auto;
    background: transparent;
    opacity: 0;
    transition: opacity 1s, -webkit-backdrop-filter 1s;
    transition: opacity 1s, backdrop-filter 1s;
    transition: opacity 1s, backdrop-filter 1s, -webkit-backdrop-filter 1s;
    pointer-events: none;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px)
}

.popup-page--active .popup-page__backdrop {
    background: rgba(0, 0, 0, .7);
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.popup-page:not(.popup-page--active) {
    pointer-events: none
}

.popup-page--align-top {
    align-items: flex-start
}

.popup-page__main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3
}

.popup-page--active .popup-page__main {
    display: block
}

.popup-page-main {
    flex: none;
    width: 100%;
    height: 100%;
    box-shadow: 0 .2666666667vw 1.6vw #0000000d, inset 0 .2666666667vw .5333333333vw #0000000d;
    background-color: #ebebeb;
    transform: translate(-50%);
    transition: transform .5s, opacity .5s;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto
}

.popup-page-main--show {
    transform: translate(-50%, -50%);
    opacity: 1
}

.popup-page-main__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    flex: none;
    top: 0;
    flex: 0;
    width: 100%;
    height: 13.3333333333vw;
    padding-bottom: 0;
    background: linear-gradient(180deg, #2254ba 0%, #163e90 100%)
}

.popup-page-main__back {
    cursor: pointer;
    opacity: 1;
    position: absolute;
    left: 2.6666666667vw;
    width: 5vw;
    height: 5vw;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 80%;
    mask-size: 80%
}

.popup-page-main__back:hover {
    opacity: .7
}

.popup-page-main__title {
    color: #fff;
    font-size: 4.8vw;
    text-align: center
}

.popup-page-main__close {
    cursor: pointer;
    opacity: 1;
    position: relative;
    width: 5vw;
    height: 5vw;
    position: absolute;
    right: 2.6666666667vw;
    z-index: 2
}

.popup-page-main__close:hover {
    opacity: .7
}

.popup-page-main__close:after,
.popup-page-main__close:before {
    content: "";
    display: block;
    height: 80%;
    width: .5vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background-color: gray;
    transform-origin: 50% 50%
}

.popup-page-main__close:after {
    transform: translateY(-50%) rotate(-45deg)
}

.popup-page-main__close:before {
    transform: translateY(-50%) rotate(45deg)
}

.popup-page-main__close:before,
.popup-page-main__close:after {
    border-radius: 10vw
}

.popup-page-main__container {
    flex: 1;
    position: absolute;
    top: 13.3333333333vw;
    width: 100%;
    height: calc(100% - 13.3333333333vw);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #0e2749
}

.popup-page-main__container .pop-bg {
    height: 100%
}

.popup-page-main__container .content {
    padding-top: 0
}

.popup-page-main__container .content.fixed-tab {
    padding-top: 52px
}

.popup-page-main__container .vip-content {
    padding-top: 10px;
    top: -10px
}

html,
body {
    min-height: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100vh;
    background-color: #1f1f1f;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 400
}

body.menu-active {
    height: 100%;
    overflow: hidden
}

body.no-scroll {
    overflow: hidden
}

.content {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: auto;
    padding-top: 13.3333333333vw;
    background-color: #1f1f1f
}

.cricket .announcement-row {
    width: auto;
    margin: 0 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.player-content {
    padding: 13.3333333333vw 0 0
}

.menu-box {
    position: relative;
    height: auto;
    margin: 4.2666666667vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background: #2b2922
}

.menu-box .title {
    width: 100%;
    line-height: 8vw
}

.menu-box .title h2 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding-left: 4.2666666667vw;
    color: #0e2749;
    font-size: 4vw;
    font-weight: 500
}

.menu-box .title h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.menu-box .title span {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

.menu-box .title i {
    display: flex;
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500;
    white-space: nowrap
}

.menu-box .title+.input-group {
    padding: 2.6666666667vw 0
}

.menu-box .title+.input-group .clear {
    top: 9.0666666667vw
}

.fixed-tab {
    padding-top: 26.6666666667vw
}

.tab-btn-section:not(.no-fix) {
    position: fixed;
    z-index: 4;
    top: 13.3333333333vw
}

.fixed-tab .tab-btn-wrap {
    box-shadow: none
}

.fixed-tab .search-tab {
    top: 0
}

.fixed-tab .promotion .promotion-main {
    padding: 0 4.2666666667vw
}

.content-main {
    position: relative;
    left: 0;
    width: 100%;
    height: auto
}

.content-main:after {
    content: "";
    display: block;
    clear: both
}

.content-main .content-box {
    width: 100%
}

.button {
    position: relative;
    width: auto;
    height: 12.8vw;
    border-radius: 1.3333333333vw;
    color: #222222;
    font-size: 5.3333333333vw;
    font-weight: 500;
    line-height: 12.8vw;
    text-align: center;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d;
    text-shadow: none
}

.button a {
    display: block;
    padding: 0 4.2666666667vw;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.button.gray {
    background: #cfcfcf
}

.button.gray-ol {
    border: #cfcfcf;
    border-width: .2666666667vw;
    border-style: solid;
    background-color: transparent
}

.button.btn-primary {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.button.btn-primary a {
    color: #222222
}

.button.btn-primary.btn-disabled {
    background: #cfcfcf;
    text-shadow: 0 .2666666667vw .8vw rgba(207, 207, 207, .5);
    pointer-events: none;
    color: #0e2749
}

.button.btn-primary.btn-disabled a {
    color: #0e2749
}

.button.btn-secondary {
    background: linear-gradient(180deg, #4d4d4d 0%, #363636 100%)
}

.button.btn-secondary a {
    color: #fff
}

.button.btn-secondary.btn-disabled {
    background: #79a5fc;
    pointer-events: none
}

.button.btn-secondary.btn-disabled a {
    color: #fff
}

.pointer-none {
    border-radius: 1.3333333333vw
}

.prompt {
    display: block;
    width: 100%;
    color: #0e274966;
    font-size: 3.4666666667vw;
    text-align: center;
    padding: 4.2666666667vw 0
}

.top-banner {
    display: block;
    position: relative;
    height: 24vw
}

.top-banner .top-banner_img {
    width: calc(100% - 3.7333333333vw);
    height: 19.7333333333vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 1.8666666667vw
}

.top-banner .btn-voucher {
    left: -1.3333333333vw;
    bottom: 8.5333333333vw
}

.top-banner .btn-voucher .voucher-content {
    max-width: 94.9333333333vw
}

.custom-banner-wrapper {
    position: relative
}

.custom-banner-wrapper .carousel-wrap {
    position: relative;
    width: 100%;
    left: 50%;
    transform: translate(-50%);
    max-width: none;
    font-size: 0
}

.custom-banner-wrapper .slick-arrow {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 13.3333333333vw);
    height: 5.3333333333vw;
    z-index: 3;
    pointer-events: none
}

@media screen and (max-width: 1400px) {
    .custom-banner-wrapper .slick-arrow {
        width: 98%
    }
}

.custom-banner-wrapper .slick-arrow img {
    width: auto;
    height: 100%;
    transition: transform .5s;
    cursor: pointer;
    pointer-events: auto
}

.custom-banner-wrapper .slick-arrow img:hover {
    transform: scale(1.5)
}

.custom-banner-wrapper--thin {
    width: calc(100% - 6.4vw);
    position: relative;
    margin: 0 auto;
    overflow: hidden
}

.custom-banner-wrapper--shrink .item,
.custom-banner-wrapper--thin .item {
    border-radius: 1.3333333333vw
}

.custom-banner-wrapper .carousel-wrap .dot-group {
    bottom: -5.3333333333vw
}

.custom-banner-wrapper .carousel-wrap .dot-group.style-dot li {
    width: 2.1333333333vw;
    height: 2.1333333333vw
}

.custom-banner-wrapper .carousel-wrap .item {
    overflow: visible;
    cursor: pointer
}

.custom-banner-wrapper .carousel-wrap .item .item-pic {
    background-size: cover
}

.custom-banner-wrapper .carousel-wrap .pagination {
    height: 7.4666666667vw;
    margin-top: 0;
    background: #203f61
}

.custom-banner-wrapper .carousel-wrap .pagination__bullet {
    background: #4d8ab9
}

.custom-banner-wrapper .carousel-wrap .pagination__bullet--active {
    background-color: #fff
}

.banner .banner-v1 {
    height: auto !important
}

.banner .banner-v1 .carousel-wrap .item {
    padding: 0
}

.banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 41.6vw
}

.custom-banner-wrapper .carousel-wrap.background-size-contain .item .item-pic {
    background-size: contain
}

.custom-banner-wrapper.unit-3 .carousel-wrap {
    width: 245.6%
}

header {
    display: flex;
    position: fixed;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333vw;
    overflow: hidden;
    transition: all .3s
}

header.normal {
    background: linear-gradient(180deg, #2254ba 0%, #163e90 100%)
}

header.normal .logo,
header.normal .menu-btn,
header.normal .service-btn,
header.normal .forum-btn,
header.normal .app-download,
header.normal .inbox-btn {
    display: flex
}

header.login .login-btn {
    display: flex
}

header.member {
    height: 13.3333333333vw;
    background: #161616
}

header.member .back-btn,
header.member .header-title {
    display: flex
}

header.member .header-title {
    color: #fff;
    font-size: 4.8vw;
    text-align: center
}

header.member .back-btn {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    background: #ffffff
}

header.member .back-btn a {
    display: block;
    width: 100%;
    height: 100%
}

header.player {
    background: linear-gradient(180deg, #2254ba 0%, #163e90 100%)
}

header.player .header-title {
    color: #fff
}

header.player .back-btn {
    background: #ffffff
}

header.register {
    background: #2254ba
}

header.register .header-title {
    color: #fff
}

header.register .service-btn,
header.register .forum-btn {
    display: none
}

header.register.active {
    background: #2254ba
}

header.editor {
    background: #161616
}

header.editor .editor-btn {
    display: flex
}

header.editor .header-title {
    color: #fff
}

header.editor .back-btn {
    background: #ffffff
}

header.editor.active {
    background: #2254ba
}

header.vip {
    background: transparent;
    font-family: "Source Sans 3", sans-serif
}

header.vip .service-btn {
    display: none
}

header.vip .forum-btn {
    display: none
}

header.vip .back-btn {
    background: #ffffff
}

header.vip .header-title {
    color: #fff;
    font-size: 5.3333333333vw
}

header.vip.active {
    background: #2254ba
}

header.vip.active .header-title {
    color: #fff
}

header.slot {
    border-bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%)
}

header.slot .back-btn {
    background-color: #fff
}

header.slot .header-title {
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500
}

header.slot .header-right-btn-group .layout-icon,
header.slot .header-right-btn-group .filter {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 13.3333333333vw;
    height: 13.3333333333vw
}

header.slot .header-right-btn-group .layout-icon g {
    stroke: #fff
}

header.slot .header-right-btn-group .filter span {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background-color: #fff;
    margin-bottom: .5333333333vw;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat
}

header.slot .header-right-btn-group .badge {
    display: flex;
    position: absolute;
    top: 1.0666666667vw;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    border-radius: 50%;
    background: #cd1818;
    color: #fff;
    font-size: 3.4666666667vw;
    font-weight: 500
}

header.slot.active {
    transition: all 1s ease;
    background: #2254ba
}

header.slot.active .back-btn {
    background-color: #fff !important
}

header.slot.active .header-title {
    color: #fff
}

header.slot.active .header-right-btn-group .layout-icon g {
    stroke: #fff
}

header.slot.active .header-right-btn-group .filter:before {
    background-color: #fff
}

header.cricket,
header.normal-logo-left {
    height: 13.3333333333vw;
    margin-top: 0;
    background: #161616
}

header.cricket .menu-btn,
header.normal-logo-left .menu-btn {
    display: flex
}

header.cricket .logo,
header.normal-logo-left .logo {
    display: flex;
    left: 13.3333333333vw;
    transform: translate(0);
    background-position: left
}

header.cricket a,
header.cricket .cricket-money,
header.cricket .exp,
header.normal-logo-left a,
header.normal-logo-left .cricket-money,
header.normal-logo-left .exp {
    padding: 1.0666666667vw 4.2666666667vw;
    border: 0;
    font-size: 3.2vw
}

header.cricket .login,
header.normal-logo-left .login {
    background: #ffb80c;
    color: #222
}

header.cricket .register,
header.normal-logo-left .register {
    background: transparent;
    color: #fff
}

header.cricket a,
header.normal-logo-left a {
    border-radius: 1.3333333333vw
}

header.cricket .cricket-money,
header.cricket .exp,
header.normal-logo-left .cricket-money,
header.normal-logo-left .exp {
    display: inline-flex;
    align-items: center;
    padding: 1.0666666667vw;
    -webkit-user-select: none;
    user-select: none
}

header.cricket .cricket-money span,
header.cricket .exp span,
header.normal-logo-left .cricket-money span,
header.normal-logo-left .exp span {
    margin-left: 1.0666666667vw;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -.1333333333vw;
    font-weight: 700
}

header.cricket .cricket-money,
header.normal-logo-left .cricket-money {
    max-width: 32vw;
    background:  linear-gradient(180deg, #4d4d4d 0%, #363636 100%);;
    border-radius: 1.3333333333vw 0 0 1.3333333333vw;
    color: #fff
}

header.cricket .exp,
header.normal-logo-left .exp {
    max-width: 26.6666666667vw;
    background: #e62626;
    border-radius: 0 1.3333333333vw 1.3333333333vw 0;
    color: #fff
}

header.cricket .exp .negative,
header.normal-logo-left .exp .negative {
    color: #ff5757
}

header.cricket .icon-refresh {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    background: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    margin-right: 1.0666666667vw
}

header.cricket .icon-refresh.active {
    animation: rotate 1s forwards
}

header.active {
    transition: all .3s ease;
    background: #2254ba
}

header.no-shadow {
    box-shadow: none
}

header .logo,
header .header-title,
header .menu-btn,
header .service-btn,
header .forum-btn,
header .back-btn,
header .login-btn,
header .editor-btn,
header .app-download,
header .inbox-btn {
    display: none
}

header.player.editor .service-btn,
header.player.editor .forum-btn {
    display: none
}

header.player .header-title,
header.player .service-btn,
header.player .forum-btn,
header.player .back-btn,
header.register .header-title,
header.register .service-btn,
header.register .forum-btn,
header.register .back-btn {
    display: flex
}

header.player .service-btn:before,
header.register .service-btn:before {
    background-color: #fff
}

header.player .service-btn p,
header.register .service-btn p {
    color: #fff
}

header.player .forum-btn:before,
header.register .forum-btn:before {
    background-color: #fff
}

header.player .forum-btn p,
header.register .forum-btn p {
    color: #fff
}

header .header-left-btn-group {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    z-index: 99999;
}

header .header-right-btn-group {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end
}

header .header-right-btn-group .language-select {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 12vw;
    max-width: 13.3333333333vw
}

header .header-right-btn-group .language-select img {
    width: 4.8vw;
    height: 4.8vw
}

header .logo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 26.6666666667vw;
    height: 100%;
    transform: translate(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    text-indent: -2666.4vw
}

header .header-title {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%);
    font-size: 4.8vw;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.menu-btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    padding: 0 4.2666666667vw
}

.menu-btn ul li {
    width: 5.3333333333vw;
    height: .5333333333vw;
    margin: 1.0666666667vw 0;
    border-radius: .5333333333vw;
    background-color: #fff
}

.service-btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 12vw;
    max-width: 17.3333333333vw;
    height: 13.3333333333vw
}

.service-btn p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.service-btn p a {
    color: #fff
}

.forum-btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 12vw;
    max-width: 17.3333333333vw;
    height: 13.3333333333vw
}

.forum-btn p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.forum-btn p a {
    color: #fff
}

.login-btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 12vw;
    max-width: 17.3333333333vw;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background: none
}

.login-btn p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.login-btn p a {
    color: #fff
}

.back-btn,
.editor-btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 13.3333333333vw;
    height: 13.3333333333vw
}

.back-btn a,
.editor-btn a {
    display: block;
    width: 100%;
    height: 100%
}

.back-btn {
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 30%;
    mask-size: 30%
}

.editor-btn {
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 35%;
    mask-size: 35%
}

.app-download {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 12vw;
    max-width: 17.3333333333vw;
    height: 13.3333333333vw
}

.app-download p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.app-download p a {
    color: #fff
}

.nav-category {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    background: linear-gradient(179deg, #f4b600 0%, #ffb80c 100%)
}

.nav-category:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 1.3333333333vw;
    background: #0e2749
}

.nav-category:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .4vw;
    background: transparent
}

.nav-category .btn {
    position: relative;
    width: 100%;
    margin-top: 2.6666666667vw;
    transition: all .3s
}

.nav-category .btn a {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-decoration: none
}

.nav-category .btn .icon-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto 3.7333333333vw;
    padding-top: .5333333333vw;
    border-radius: 100%;
    background: linear-gradient(162deg, #948acc 0%, #353390 100%);
    box-shadow: .2666666667vw .2666666667vw .2666666667vw #7878a2, inset 0 1.3333333333vw 1.3333333333vw #222071
}

.nav-category .btn .icon-list img {
    display: none
}

.nav-category .btn .icon-list video {
    display: block;
    width: 8vw;
    height: 8vw
}

.nav-category .btn p {
    margin-bottom: 3.2vw;
    color: #054ea1;
    font-size: 3.2vw;
    font-weight: 600;
    text-align: center
}

.nav-category.active {
    position: fixed;
    z-index: 2;
    top: 12.8vw;
    animation: slide-out-top .2s cubic-bezier(.55, .085, .68, .53) both
}

.nav-category.active .btn p {
    display: none
}

@keyframes slide-out-top {
    0% {
        height: 88px;
        opacity: 1
    }
    to {
        height: 64px;
        opacity: 1
    }
}

.nav-category .slick-current .icon-list {
    z-index: 2;
    padding-top: 0;
    transform: translateY(-2px) scale(1.25);
    transition: transform .5s ease;
    background: linear-gradient(to bottom, #ff9fa2 0%, #6d25f4 80%);
    box-shadow: inset -.2666666667vw -.2666666667vw .5333333333vw #ffffff40, inset .2666666667vw .5333333333vw .5333333333vw #ffffff40
}

.nav-category .slick-current .icon-list img {
    display: block;
    width: 8vw;
    height: 8vw
}

.nav-category .slick-current .icon-list video {
    display: none
}

.nav-category .slick-current p {
    color: #f4b600
}

.nav-category .slick-current:before {
    background-color: #054ea1;
    box-shadow: 0 .5333333333vw 1.3333333333vw #0000004d
}

.nav-category .slick-current:after {
    display: block
}

.nav-category .tab-indicator {
    position: absolute;
    z-index: -1;
    top: 0;
    width: auto;
    min-width: 18.1818181818%;
    height: 100%;
    transform: translate(0);
    transition: transform .3s ease-out;
    border-radius: 4vw 4vw 13.3333333333vw 13.3333333333vw
}

.nav-category .tab-indicator:after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    width: 100%;
    height: 18.1333333333vw;
    background: #0e2749;
    -webkit-mask: url(/mostplayfiles/images/tab-indicator.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/tab-indicator.svg) no-repeat center/100%
}

.footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0 2.1333333333vw;
    background-color: var(--footer-bg)
}

.footer-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    padding: 4.2666666667vw 0;
    text-align: left
}

.footer-top .pay {
    width: 100%
}

.footer-top div {
    margin-bottom: 2.1333333333vw
}

.footer-top div li {
    display: inline-block;
    margin: 1.0666666667vw 0
}

.footer-top div li+li {
    margin-right: 2.1333333333vw
}

.footer-top div li:first-child {
    margin-right: 2.1333333333vw
}

.footer-top div h2 {
    margin: 0 0 1.0666666667vw;
    color: #fff;
    font-size: 3.2vw
}

.footer-top div img {
    height: 4.8vw
}

.footer-top div a {
    display: block
}

.footer-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: #2b2922;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.footer-top .pay-normal-size {
    flex: 0 0 100%
}

.footer-top .pay-normal-size li:nth-child(4n) {
    margin: 0
}

.footer-top .pay-normal-size img {
    height: 6.4vw
}

.footer-top .safe,
.footer-top .license {
    flex: 0 0 47.6%
}

.footer-top .safe img,
.footer-top .license img {
    height: 7.4666666667vw
}

.footer-top .license {
    flex: 0 0 50%;
    margin-right: 2.1333333333vw
}

.footer-top .footer-social {
    flex: 1 0 50%
}

.footer-top .footer-social ul {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(7, 1fr)
}

.footer-top .footer-social ul li {
    margin: 0;
    text-align: center
}

.footer-top .footer-social img {
    height: 8vw
}

.footer-top .about-us {
    width: 100%;
    flex: 1 0 50%
}

.footer-top .about-us ul {
    display: inline-flex;
    gap: 2.1333333333vw;
    justify-content: center;
}

.footer-top .about-us ul li {
    display: inline-grid;
    position: relative;
    margin: 1.0666666667vw 0;
    padding: 0 1.0666666667vw
}

.footer-top .about-us ul li+:nth-child(3n):after {
    display: none
}

.footer-top .about-us ul li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + 1.0666666667vw);
    width: .2666666667vw;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 1.6vw 1.6vw
}

.footer-top .about-us a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffb80c;
    font-size: 3.4666666667vw;
    text-align: center;
    text-decoration: underline
}

.footer-column div:nth-child(2n-1) {
    margin-right: 0
}

.footer-column .pay {
    flex: 1 0 100%;
    margin: 0 0 2.6666666667vw
}

.footer-column .safe,
.footer-column .footer-social {
    flex: 1 0 40%
}

.float-banner {
    position: fixed;
    bottom: 2.6666666667vw;
    left: 2.6666666667vw;
    filter: drop-shadow(0 0 1.6vw #ebebeb)
}

.float-banner .close {
    position: absolute;
    z-index: 2;
    top: -4vw;
    right: -4vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-radius: 100%;
    opacity: 1;
    background-color: #0e2749
}

.float-banner .close:before,
.float-banner .close:after {
    content: "";
    display: block;
    position: absolute;
    top: 2.9333333333vw;
    left: 1.3333333333vw;
    width: 4vw;
    height: .5333333333vw;
    background-color: #0e2749
}

.float-banner .close:before {
    transform: rotate(45deg)
}

.float-banner .close:after {
    transform: rotate(-45deg)
}

.float-banner a {
    display: inline-flex;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.float-banner img {
    width: auto;
    height: auto;
    min-width: 13.3333333333vw;
    min-height: 13.3333333333vw;
    max-width: 32vw;
    max-height: 32vw
}

.loading .banner-v1,
.loading .banner-v2 {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, #ffc20f 50%, transparent 75%, transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%
}

.loading .nav-category .btn:before {
    background-color: #4a4a4a
}

.loading .recommend-card:before {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, #ffc20f 50%, transparent 75%, transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%;
    background-color: #f4b600
}

.loading .content-main .content-box {
    width: auto;
    margin: 0 2.6666666667vw
}

.loading .content-main .content-box .card-banner li {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, #12325e 50%, transparent 75%, transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%;
    height: 30.4vw
}

.loading .lobby-icon {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg, transparent 0%, transparent 25%, #163e74 50%, transparent 75%, transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%;
    height: 16.5333333333vw;
    background-color: #12325e
}

@keyframes shine {
    to {
        background-position: 640% 0
    }
}

.pop-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: height .5s;
    background: rgba(0, 0, 0, .4);
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

@supports (height: 100dvh) {
    .pop-bg {
        height: 100dvh
    }
}

@supports not (height: 100dvh) {
    .pop-bg {
        height: 100vh
    }
}

.pop-bg.zindex-up {
    z-index: 122
}

.pop-wrap {
    display: none;
    position: fixed;
    top: 55%;
    left: 50%;
    width: 90%;
    max-height: 95vh;
    transform: translate(-50%, -55%);
    transition: transform .3s;
    animation: hide 0s 1s 1 forwards;
    border-radius: 1.3333333333vw;
    opacity: 0;
    background: #ebebeb;
    background-image: transparent;
    box-shadow: 0 1px 6px #0000000d, inset 0 1px 2px #0000000d;
    color: #0e2749cc
}

.pop-wrap.show {
    display: block
}

.pop-wrap.ani {
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform .3s .3s ease-in-out;
    opacity: 1
}

.pop-wrap.promotion-pop {
    position: fixed;
    height: auto;
    background: #2d2f30;
    color: #fff
}

.pop-wrap.promotion-pop .pop-title {
    padding: 2.1333333333vw;
    border-radius: 0;
    background: #131313
}

.pop-wrap.promotion-pop .content-style .times {
    color: #0e2749
}

.pop-wrap.promotion-pop .content-style .times:before {
    background-color: #0e2749
}

.pop-wrap.pop-success .btn-closed,
.pop-wrap.pop-fail .btn-closed {
    position: absolute;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    background: #7e919e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.pop-wrap.pop-prompt {
    display: inline-flex;
    align-items: center;
    top: 53%;
    left: 0;
    right: 0;
    margin: 5% auto;
    padding: 2.1333333333vw 3.2vw 2.1333333333vw 2.1333333333vw;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90%;
    text-align: center;
    background: #ebebeb;
    color: #0e2749;
    transform: scale(0)
}

.pop-wrap.pop-prompt h4 {
    line-height: 4.2666666667vw;
    word-break: break-word
}

.pop-wrap.pop-prompt.show {
    transform: scale(1);
    opacity: 1
}

.pop-wrap.pop-prompt .item-icon {
    display: block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin: 0 1.0666666667vw 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 65%;
    mask-size: 65%;
    background-color: #0e2749
}

.pop-wrap .detail-banner {
    overflow: hidden;
    border-radius: 1.3333333333vw 1.3333333333vw 0 0;
    line-height: 0
}

.pop-wrap .detail-banner img {
    width: 100%;
    height: auto
}

.pop-wrap .btn-close {
    position: absolute;
    display: inline-block;
    z-index: 1;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    transition: .5s;
    background: #7e919e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.pop-wrap .pop-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 13.3333333333vw;
    padding: 2.1333333333vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    text-align: center
}

.pop-wrap .pop-title h3 {
    display: inline-block;
    width: 82%;
    height: auto;
    overflow: hidden;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 500;
    line-height: 1.2
}

.pop-wrap .pop-inner {
    position: relative;
    padding: 2.1333333333vw 2.1333333333vw 4.2666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left
}

.pop-language {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: #ffffff;
    opacity: 1
}

@supports (height: 100dvh) {
    .pop-language {
        height: 100dvh
    }
}

@supports not (height: 100dvh) {
    .pop-language {
        height: 100vh
    }
}

@supports (height: 100dvh) {
    .pop-language {
        max-height: 100dvh
    }
}

@supports not (height: 100dvh) {
    .pop-language {
        max-height: 100vh
    }
}

.pop-language .pop-title {
    border-radius: 0
}

.pop-language .pop-inner {
    height: calc(100% - 13.3333333333vw);
    max-height: calc(100vh - 13.3333333333vw);
    overflow-x: auto;
    overflow-y: auto;
    background: #0e2749
}

.pop-language .pop-inner .language-list {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    height: auto;
    padding: 0
}

.pop-language .pop-inner .language-list li {
    display: block;
    position: relative;
    flex-flow: nowrap;
    width: 100%;
    border: 0;
    border-radius: 1.3333333333vw;
    background: #ffffff
}

.pop-language .pop-inner .language-list li:nth-child(2n) {
    margin-right: 0
}

.pop-language .pop-inner .language-list .left-language-area {
    position: relative;
    width: 100%
}

.pop-language .pop-inner .language-list .left-language-area img {
    display: block;
    margin: 4vw auto 1.3333333333vw
}

.pop-language .pop-inner .language-list .left-language-area p {
    display: block;
    width: 100%;
    line-height: 3;
    text-align: center
}

.pop-language .pop-inner .language-list .right-language-area {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.pop-language .pop-inner .language-list .right-language-area .radio-box {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 2.1333333333vw;
    font-size: 3.7333333333vw;
    vertical-align: top
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li {
    z-index: 0;
    flex: auto;
    width: calc(50% - 1.0666666667vw);
    height: 9.0666666667vw;
    margin-bottom: 2.1333333333vw;
    padding: 0 2.1333333333vw;
    overflow: hidden;
    border-radius: 1.3333333333vw;
    background: #f2f2f2;
    box-shadow: inset 0 .2666666667vw .2666666667vw #ffffff1a, inset 0 -.2666666667vw .2666666667vw #ffffff1a;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 9.0666666667vw;
    text-align: center;
    word-break: break-all;
    font-family: "Source Sans 3", sans-serif
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li:nth-child(even) {
    margin-left: 2.1333333333vw
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active {
    border: 0;
    background: transparent;
    color: #0e2749
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 1.3333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.btn-box {
    display: flex;
    width: 100%;
    margin: 4.2666666667vw 0 0;
    text-align: right
}

.btn-box .button {
    display: inline-block;
    width: 100%;
    padding: 0 2.6666666667vw
}

.btn-box .button+.button {
    margin-left: 4.2666666667vw
}

.btn-box.other-choice {
    margin-top: 0
}

.pop-inner {
    max-height: 60vh
}

.pop-inner h4 {
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.pop-inner .times {
    font-size: 3.7333333333vw;
    line-height: 1.5
}

.pop-inner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto
}

.pop-inner .btn-box .button {
    width: 100%
}

.promotion-pop {
    height: auto;
    background-color: #fff
}

.promotion-pop .pop-title h3 {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #f4b600
}

.promotion-pop .btn-close:before {
    background: #ffffff
}

.language-list {
    display: block;
    margin: 0 auto
}

.language-list .left-language-area,
.language-list .right-language-area {
    display: inline-block;
    text-align: left;
    vertical-align: top
}

.language-list .left-language-area p,
.language-list .right-language-area p {
    padding-bottom: 0
}

.language-list .left-language-area {
    width: 35%
}

.language-list .left-language-area img {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    margin-right: 2.6666666667vw;
    border-radius: 100%;
    box-shadow: 0 0 .5333333333vw #0006;
    vertical-align: middle
}

.language-list .left-language-area p {
    display: inline-block;
    width: 53%;
    color: #0e274999;
    font-size: 3.2vw;
    line-height: 3;
    vertical-align: middle
}

.language-list .left-language-area span {
    display: inline-block;
    min-width: 2.6666666667vw
}

.language-list .right-language-area {
    display: inline-flex;
    flex-flow: row wrap;
    width: 65%
}

.pop-setwallet {
    padding: 4.2666666667vw 2.1333333333vw
}

.pop-setwallet .btn-closed {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%;
    background: #7e919e
}

.pop-setwallet .title {
    padding: 0 8.5333333333vw 2.1333333333vw 0;
    color: #0e2749;
    font-size: 4.2666666667vw
}

.pop-setwallet .wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4.2666666667vw 0;
    padding: 6.4vw 4.2666666667vw;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    color: #0e2749;
    font-size: 3.2vw
}

.pop-setwallet label {
    position: relative;
    height: 6.4vw;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500;
    line-height: 6.4vw;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pop-setwallet .number {
    margin: 2.1333333333vw 0;
    color: #0e2749;
    font-size: 6.4vw
}

.pop-setwallet .number span {
    margin-right: 1.0666666667vw;
    font-size: 5.3333333333vw
}

.pop-setwallet .prompt {
    margin-bottom: 0;
    color: #0e2749
}

.pop-setwallet .bonus {
    display: flex;
    justify-content: space-between;
    color: #0e2749;
    font-size: 3.2vw
}

.pop-setwallet .btn-box {
    margin-top: 4.2666666667vw
}

.pop-setwallet .button {
    height: 9.6vw;
    font-size: 3.7333333333vw;
    line-height: 9.6vw
}

.pop-setwallet .deposit-now {
    margin-top: 4.2666666667vw;
    text-align: center
}

.pop-setwallet .deposit-now a {
    color: #f4b600;
    text-decoration: underline
}

.pop-setwallet .tips {
    position: relative;
    width: 100%;
    margin: 4.2666666667vw 0;
    font-size: 3.7333333333vw;
    text-align: center
}

.pop-setwallet .tips:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    width: 100%;
    border: .2666666667vw solid rgba(14, 39, 73, .2)
}

.pop-setwallet .tips span {
    display: inline;
    padding: 0 2.1333333333vw;
    background: #ebebeb
}

.pop-wrap.pop-editor {
    display: block;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translate(0);
    opacity: 1
}

.pop-wrap.pop-editor ul {
    width: 100%
}

.pop-wrap.pop-editor ul li {
    display: inline-block;
    width: 100%;
    padding: 0 5.3333333333vw;
    overflow: hidden;
    transition: all .3s;
    font-size: 3.7333333333vw;
    line-height: 14.6666666667vw;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pop-wrap.pop-editor ul li:active {
    filter: brightness(.95)
}

.pop-wrap.pop-editor ul.editor-menu {
    display: none;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #ebebeb
}

.pop-wrap.pop-editor ul.editor-menu.show {
    display: block
}

.pop-wrap.pop-editor ul.editor-menu li {
    color: #0e2749
}

.pop-wrap.pop-editor ul.editor-check {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #0e2749
}

.pop-wrap.pop-editor ul.editor-check.show {
    display: flex
}

.pop-wrap.pop-editor ul.editor-check li {
    width: auto;
    color: #fff
}

.primary-btn {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none
}

.pop-go-to-biometrics {
    width: 90%;
    height: auto;
    padding: 10.6666666667vw 5.3333333333vw 5.3333333333vw;
    border-radius: 5.3333333333vw;
    background: #ebebeb;
    background-image: transparent
}

.pop-go-to-biometrics .btn-close {
    background: #7e919e
}

.pop-go-to-biometrics .box-loading {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 48vw;
    height: 48vw;
    margin: 0 auto 10.6666666667vw
}

.pop-go-to-biometrics .box-loading video {
    position: absolute;
    z-index: 10;
    width: 32vw;
    height: 32vw
}

.pop-go-to-biometrics .box-loading .circle-wave {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 40%
}

.pop-go-to-biometrics .box-loading .circle-wave:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.3333333333vw;
    right: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebebeb 0%, #ebebeb 100%);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-1 {
    z-index: 5;
    width: 49.3333333333vw;
    animation: circle-spin 4s infinite linear;
    opacity: .6;
    background-image: linear-gradient(to bottom right, #ffffff, #0e2749)
}

.pop-go-to-biometrics .box-loading .circle-wave-1:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.3333333333vw;
    left: 2.6666666667vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebebeb 0%, #ebebeb 100%);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-2 {
    z-index: 4;
    width: 50.6666666667vw;
    animation: circle-spin 8s infinite linear;
    opacity: .7;
    background-image: linear-gradient(to bottom right, #0e2749, #f4b600)
}

.pop-go-to-biometrics .box-loading .circle-wave-2:after {
    content: "";
    display: block;
    position: absolute;
    right: 2.6666666667vw;
    bottom: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebebeb 0%, #ebebeb 100%);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-3 {
    z-index: 3;
    width: 52vw;
    animation: circle-spin 12s infinite linear;
    opacity: .4;
    background-image: linear-gradient(to bottom right, #ffffff, #0e2749)
}

.pop-go-to-biometrics .box-loading .circle-wave-3:after {
    content: "";
    display: block;
    position: absolute;
    top: 2.6666666667vw;
    left: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebebeb 0%, #ebebeb 100%);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-4 {
    z-index: 2;
    width: 53.3333333333vw;
    animation: circle-spin 18s infinite linear;
    opacity: .6;
    background-image: linear-gradient(to bottom right, #0e2749, #f4b600)
}

.pop-go-to-biometrics .box-loading .circle-wave-4:after {
    content: "";
    display: block;
    position: absolute;
    right: 1.3333333333vw;
    bottom: 2.6666666667vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(180deg, #ebebeb 0%, #ebebeb 100%);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .title {
    margin-bottom: 2.6666666667vw;
    color: #0e2749;
    font-size: 7.4666666667vw;
    font-weight: 600;
    text-align: center
}

.pop-go-to-biometrics .sub-title {
    margin-bottom: 10.6666666667vw;
    color: #0e274980;
    font-size: 4.2666666667vw;
    line-height: 1.4;
    text-align: center
}

.pop-go-to-biometrics .button {
    height: 14.9333333333vw;
    font-size: 5.3333333333vw;
    line-height: 14.9333333333vw
}

.pop-checkbox-agree {
    display: flex;
    justify-content: center;
    margin-top: 2.6666666667vw;
    line-height: 3
}

.pop-wrap.pop-bonus-complete {
    display: none;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 112vw;
    background: none;
    background-image: url(/mostplayfiles/images/bonus-complete/bonus-complete-bg.png);
    background-repeat: no-repeat;
    background-position: center -12vw;
    background-size: contain;
    font-weight: 700;
    text-align: center
}

.pop-wrap.pop-bonus-complete .btn-close {
    display: flex;
    top: -1.3333333333vw;
    right: 0;
    width: 16vw;
    height: 16vw;
    background: none
}

.pop-wrap.pop-bonus-complete .pop-title {
    position: relative;
    bottom: -51.2vw
}

.pop-wrap.pop-bonus-complete .pop-title .title {
    display: none
}

.pop-wrap.pop-bonus-complete .pop-title .number {
    display: block;
    justify-content: center;
    background: linear-gradient(to top, #ffffff 15%, #cacaca 45%, #ffffff 70%);
    color: transparent;
    font-size: 8vw;
    -webkit-background-clip: text;
    background-clip: text
}

.pop-wrap.pop-bonus-complete .pop-title .number span {
    display: flex;
    justify-content: center;
    padding: 1.6vw 0 0;
    background: linear-gradient(135deg, #ffc20f 0%, #f4b600 50%);
    color: transparent;
    font-size: 11.7333333333vw;
    line-height: 11.2vw;
    -webkit-background-clip: text;
    background-clip: text
}

.pop-wrap.pop-bonus-complete .pop-title .number span:before {
    content: attr(data-currency);
    font-size: 8.5333333333vw
}

.pop-wrap.pop-bonus-complete .kv-block {
    position: relative;
    right: 0;
    bottom: 5.8666666667vw
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img {
    display: inline-block;
    position: relative;
    width: 27.7333333333vw;
    height: 27.7333333333vw
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1.3333333333vw;
    left: -1.3333333333vw;
    width: 24vw;
    height: 24vw;
    padding: 2.6666666667vw;
    border: .5333333333vw solid transparent;
    border-radius: 50%;
    background: linear-gradient(to top, #ffffff 0%, #8da5c0 50%, #ffffff 100%);
    background-clip: padding-box
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    top: -2.1333333333vw;
    left: -2.1333333333vw;
    width: 25.6vw;
    height: 25.6vw;
    padding: 2.6666666667vw;
    border: .5333333333vw solid transparent;
    border-radius: 50%;
    background: linear-gradient(to top, #a5bad1 0%, #ffffff 50%, #8da5c0 100%);
    background-clip: padding-box
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img img {
    z-index: 1;
    width: 100%;
    border-radius: 50%
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img img:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 29.3333333333vw;
    box-shadow: 1.6vw 1.6vw 1.6vw #0006 inset
}

.pop-wrap.pop-bonus-complete .bonus-wallet-title {
    display: block;
    position: relative;
    bottom: 57.6vw;
    width: 90%;
    height: 20vw;
    margin: 0 5%;
    overflow: hidden;
    background: linear-gradient(to top, #ffffff 15%, #bacfe7 50%, #ffffff 70%);
    color: transparent;
    font-size: 7.4666666667vw;
    line-height: 9.6vw;
    text-overflow: ellipsis;
    -webkit-background-clip: text;
    background-clip: text;
    line-clamp: 2;
    box-orient: vertical;
    filter: drop-shadow(0 .5333333333vw 1.3333333333vw rgba(0, 0, 0, .7))
}

.pop-wrap.pop-bonus-complete .btn-bolck {
    display: flex;
    position: relative;
    top: 4vw;
    justify-content: center
}

.pop-wrap.pop-bonus-complete .btn-bolck .button {
    width: 32vw;
    height: 9.0666666667vw;
    margin: 0 2.6666666667vw;
    font-size: 4vw;
    line-height: 8.8vw
}

.pop-wrap.pop-bonus-complete.show {
    display: flex
}

.promotion-pop ul {
    padding-left: 20px;
    list-style: disc
}

.promotion-pop ul ul {
    list-style: circle
}

.promotion-pop ul ul ul {
    list-style: square
}

.pop-otp-verification {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 95vh;
    padding-top: 4.2666666667vw;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #ebebeb
}

.pop-otp-verification.active {
    bottom: 0
}

.pop-otp-verification .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%;
    background: #7e919e
}

.pop-transaction-records-details {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 9000;
    bottom: -150%;
    width: 100%;
    height: 80%;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #ebebeb
}

.pop-transaction-records-details.active {
    bottom: 0
}

.pop-transaction-records-details .bank-name {
    position: absolute;
    z-index: 10000;
    top: -14.9333333333vw;
    left: 50%;
    max-width: 100%;
    padding: 2.1333333333vw 4.2666666667vw;
    transform: translate(-50%);
    border-radius: 2.1333333333vw;
    background: #ffffff;
    color: #0e2749;
    font-weight: 500;
    white-space: nowrap
}

.pop-transaction-records-details .bank-name img {
    display: inline-block;
    width: auto;
    height: 6.4vw;
    margin-right: 4.2666666667vw;
    vertical-align: middle
}

.pop-transaction-records-details .bank-name span {
    display: inline-block;
    position: relative;
    width: auto;
    white-space: nowrap
}

.pop-transaction-records-details .btn-closed {
    position: absolute;
    z-index: 101;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.pop-transaction-records-details .header {
    flex: none;
    position: relative;
    z-index: 60;
    width: 100%;
    height: 13.3333333333vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #161616;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500;
    line-height: 13.3333333333vw;
    text-align: center
}

.pop-transaction-records-details .pop-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: inherit;
    overflow: hidden;
    padding-top: 0
}

.pop-transaction-records-details .pop-content .tab-btn-page {
    background: #2b2922
}

.pop-transaction-records-details .pop-content .tab-btn-section {
    flex: none
}

.pop-transaction-records-details .pop-content .tab-content {
    flex: 1;
    height: 100%
}

.pop-transaction-records-details .pop-content .inner-wrap {
    height: inherit
}

.pop-transaction-records-details .member-content {
    background: #054ea1;
    text-align: center
}

.pop-transaction-records-details .member-content .tips {
    display: none;
    margin: 4vw 0;
    color: #f4b600
}

.pop-transaction-records-details .member-content .button {
    margin: 4.2666666667vw;
    overflow: hidden
}

.pop-transaction-records-details .member-content .button .countdown {
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 12vw;
    border-radius: .8vw;
    background-color: #cfcfcf;
    color: #0e2749;
    font-size: 4vw;
    line-height: 8vw;
    text-align: center
}

.pop-transaction-records-details .member-content .button .countdown.fadeIn {
    animation: button-push .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fadeIn:before {
    content: "";
    display: block;
    position: absolute;
    top: -5.3333333333vw;
    width: 100%;
    height: 5.3333333333vw;
    background: #cfcfcf;
    -webkit-mask: url(/mostplayfiles/images/player/bg-wave.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/player/bg-wave.svg) no-repeat center/100%
}

.pop-transaction-records-details .member-content .button .countdown.fadeOut {
    animation: button-pull .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fadeOut:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5.3333333333vw;
    transform: rotate(180deg);
    background: #f4b600;
    -webkit-mask: url(/mostplayfiles/images/player/bg-wave.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/player/bg-wave.svg) no-repeat center/100%
}

.pop-transaction-records-details .member-content .button .countdown .timer {
    position: relative;
    top: 0;
    left: -2.6666666667vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 .4vw #0e2749
}

.pop-transaction-records-details .member-content .button .countdown .timer:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36.5%;
    height: .4vw;
    transform-origin: 0 50%;
    animation: spinClockwise 2s linear infinite;
    border-radius: 1.3333333333vw;
    background-color: #0e2749
}

.pop-transaction-records-details .member-content .button .countdown .timer:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: .4vw;
    transform-origin: 0 50%;
    animation: spinClockwise 12s linear infinite;
    border-radius: 1.3333333333vw;
    background-color: #0e2749
}

.transaction-details-wrap {
    height: 100%;
    margin: 0;
    padding: 4.2666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 50px
}

.transaction-details-wrap .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.6666666667vw 0
}

.transaction-details-wrap .title h3 {
    width: 70%;
    color: #fff;
    font-size: 4.5333333333vw;
    font-weight: 500
}

.transaction-details-wrap .title .tags {
    min-width: 21.8666666667vw;
    padding: 1.3333333333vw;
    overflow: hidden;
    transform: scale(.9);
    border-radius: 1.0666666667vw;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap
}

.timeline-box {
    position: relative;
    margin-top: 2.6666666667vw;
    padding-bottom: 2.6666666667vw
}

.timeline-box .date {
    margin-bottom: 2.6666666667vw;
    margin-left: 13.3333333333vw;
    color: #7e919e;
    font-size: 3.4666666667vw
}

.timeline-block {
    position: relative;
    margin-bottom: 2.9333333333vw
}

.timeline-block:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 4.5333333333vw;
    width: .5333333333vw;
    height: calc(100% + 9.3333333333vw);
    border-radius: 2.6666666667vw
}

.timeline-block:last-child:before {
    top: -9.3333333333vw;
    height: 14.6666666667vw
}

.timeline-block .point {
    position: absolute;
    top: -5.3333333333vw;
    left: 3.4666666667vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%;
    outline: 1.3333333333vw solid #2b2922;
    box-shadow: .2666666667vw .2666666667vw #0000001a
}

.timeline-block .bounce {
    animation: bounce-point .5s .8s
}

.timeline-block .content {
    display: inline-flex;
    width: calc(100% - 12.8vw);
    min-height: 14.6666666667vw;
    margin-left: 12.8vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background: #2b2922;
    box-shadow: .5333333333vw .5333333333vw #ebebeb1a, inset 0 .2666666667vw .2666666667vw #fff3
}

.timeline-block .content .text {
    width: 76%;
    color: #ffb80c;
    font-size: 3.7333333333vw;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-line
}

.timeline-block .content .text+.time {
    margin-top: 1.3333333333vw
}

.timeline-block .content .time {
    width: 24%;
    color: #ffb80c;
    font-size: 2.9333333333vw;
    text-align: right
}

.timeline-block.current:before {
    height: 110%
}

.timeline-block.current .point {
    display: flex;
    z-index: 1;
    top: -6.4vw;
    left: 1.8666666667vw;
    align-items: center;
    justify-content: center;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    border: .8vw solid #0e2749;
    box-shadow: .2666666667vw .2666666667vw #0000001a, inset .2666666667vw .2666666667vw #0000001a
}

.timeline-block.current .point span {
    position: relative;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.timeline-block.current .text {
    color: #ffb80c;
    font-weight: 500
}

.details-box {
    padding: 2.6666666667vw 0;
    overflow: hidden;
    border-radius: 2.6666666667vw
}

.details-box .info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 4.2666666667vw;
    background: #ffffff;
    color: #0e2749
}

.details-box .info:nth-child(2n) {
    background: #f2f2f2
}

.details-box .info .name {
    font-size: 3.4666666667vw;
    font-weight: 500
}

.details-box .info .value {
    font-size: 3.4666666667vw;
    text-align: right;
    word-break: break-word
}

.pop-content.success .transaction-details-wrap .tags,
.pop-content.success .transaction-details-wrap .timeline-block .point {
    background: #09ac6b
}

.pop-content.success .transaction-details-wrap .timeline-block:before {
    background: #09ac6b
}

.pop-content.success .transaction-details-wrap .current .point {
    outline: .5333333333vw solid #09ac6b;
    background: #09ac6b !important
}

.pop-content.success .transaction-details-wrap .current .point span {
    top: 3%
}

.pop-content.processing .transaction-details-wrap .tags,
.pop-content.processing .transaction-details-wrap .timeline-block .point {
    background: #feb032
}

.pop-content.processing .transaction-details-wrap .timeline-block:before {
    background: #feb032
}

.pop-content.processing .transaction-details-wrap .current .point {
    outline: .5333333333vw solid #feb032;
    background: #feb032 !important
}

.pop-content.processing .transaction-details-wrap .current .point span {
    top: 5%;
    animation: wiggle 2s .5s infinite
}

.pop-content.fail .transaction-details-wrap .tags,
.pop-content.fail .transaction-details-wrap .timeline-block .point {
    background: #ff5757
}

.pop-content.fail .transaction-details-wrap .timeline-block:before {
    background: #ff5757
}

.pop-content.fail .transaction-details-wrap .current .point {
    outline: .5333333333vw solid #ff5757;
    background: #ff5757 !important
}

.pop-content.reverted .tags,
.pop-content.reverted .timeline-block .point {
    background: #054ea1
}

.pop-content.reverted .timeline-block:before {
    background: #054ea1
}

.pop-content.reverted .current .point {
    outline: .5333333333vw solid #054ea1;
    background: #054ea1 !important
}

@keyframes table-arrow {
    0% {
        transform: translate(-50%, -50%) rotate(180deg)
    }
    to {
        transform: translateY(-50%) rotate(180deg)
    }
}

@keyframes circle-spin {
    0% {
        transform: rotate(360deg)
    }
}

@keyframes error-ani {
    0%,
    to {
        transform: translateZ(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-3px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(3px, 0, 0)
    }
}

@keyframes bounce-point {
    0% {
        transform: scale(.6)
    }
    60% {
        transform: scale(1.2)
    }
    to {
        transform: scale(1)
    }
}

@keyframes wiggle {
    0%,
    7% {
        transform: rotate(0)
    }
    15% {
        transform: rotate(-15deg)
    }
    20% {
        transform: rotate(10deg)
    }
    25% {
        transform: rotate(-10deg)
    }
    30% {
        transform: rotate(6deg)
    }
    35% {
        transform: rotate(-4deg)
    }
    40%,
    to {
        transform: rotate(0)
    }
}

@keyframes slide {
    0% {
        visibility: hidden;
        transform: translate(100px)
    }
    60% {
        transform: translate(-5px)
    }
    to {
        visibility: visible;
        transform: translate(0)
    }
}

@keyframes spinClockwise {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes button-push {
    0% {
        bottom: -12vw
    }
    to {
        bottom: 0
    }
}

@keyframes button-pull {
    0% {
        bottom: 0
    }
    to {
        bottom: -12vw
    }
}

.pop-login-fail {
    position: absolute;
    width: calc(100% - 8.5333333333vw);
    height: auto;
    padding: 2.1333333333vw 4.2666666667vw;
    transition: top .3s;
    animation: errorTipsShow .5s alternate linear forwards;
    border: .2666666667vw solid #ff5757;
    border-radius: 2.6666666667vw;
    background: rgba(255, 87, 87, .2)
}

.pop-login-fail .login-fail-tip {
    display: flex;
    align-items: center;
    justify-content: center
}

.pop-login-fail .login-fail-tip .login-fail-icon {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin-right: 2.1333333333vw
}

.pop-login-fail .login-fail-tip .login-fail-icon video {
    width: 100%
}

.pop-login-fail .login-fail-tip span {
    width: 90%;
    color: #ff5757;
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: .2666666667vw;
    line-height: 4vw
}

.pop-login-fail.active {
    display: inline;
    opacity: 1
}

.pop-login-fail.hide {
    animation: errorTipsHIde .5s alternate linear forwards
}

.pop-login-success {
    position: absolute;
    width: calc(100% - 8.5333333333vw);
    height: auto;
    padding: 2.1333333333vw 4.2666666667vw;
    transition: top .3s;
    animation: errorTipsShow .5s alternate linear forwards;
    border: .2666666667vw solid #56c8bc;
    border-radius: 2.6666666667vw;
    background: rgba(255, 87, 87, .2)
}

.pop-login-success .login-success-tip {
    display: flex;
    align-items: center;
    justify-content: center
}

.pop-login-success .login-success-tip .login-success-icon {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin-right: 2.1333333333vw
}

.pop-login-success .login-success-tip .login-success-icon video {
    width: 100%
}

.pop-login-success .login-success-tip span {
    width: 90%;
    color: #56c8bc;
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: .2666666667vw;
    line-height: 4vw
}

.pop-login-success.active {
    display: inline;
    opacity: 1
}

.pop-login-success.hide {
    animation: errorTipsHIde .5s alternate linear forwards
}

@keyframes errorTipsShow {
    0% {
        top: -13.8666666667vw
    }
    to {
        top: 13.8666666667vw
    }
}

@keyframes errorTipsHIde {
    0% {
        top: 13.8666666667vw
    }
    to {
        top: -13.8666666667vw
    }
}

.pop-reset-password,
.pop-account-lock {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 90vh;
    padding: 4.2666666667vw;
    transform: translate(0);
    transition: bottom .5s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #ebebeb;
    box-shadow: 0 -.5333333333vw 4vw #0003
}

.pop-reset-password .title,
.pop-account-lock .title {
    margin-bottom: 8.5333333333vw;
    color: #ff5757;
    font-weight: 600;
    letter-spacing: .2666666667vw;
    text-align: center
}

.pop-reset-password p,
.pop-account-lock p {
    margin-bottom: 8vw;
    color: #0e2749;
    font-size: 3.4666666667vw;
    letter-spacing: .2666666667vw;
    line-height: 5.3333333333vw;
    text-align: center
}

.pop-reset-password .pop-btn-box,
.pop-account-lock .pop-btn-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between
}

.pop-reset-password .pop-btn-box .button,
.pop-account-lock .pop-btn-box .button {
    width: 100%;
    height: 12vw;
    margin: 0 auto 2.6666666667vw;
    font-size: 4vw;
    line-height: 12vw
}

.pop-reset-password .pop-btn-box .button+.button,
.pop-account-lock .pop-btn-box .button+.button {
    margin-left: 4.2666666667vw
}

.pop-reset-password.active,
.pop-account-lock.active {
    bottom: 0
}

.pop-reset-password.active img,
.pop-account-lock.active img {
    animation: fallin .6s .2s forwards
}

.icon-check,
.icon-close,
.icon-lock {
    position: relative;
    z-index: 10;
    left: 50%;
    width: 32vw;
    height: 32vw;
    margin: 4.2666666667vw 0;
    transform: translate(-50%)
}

.icon-check video,
.icon-close video,
.icon-lock video {
    width: 100%
}

.pop-notification .content-style .table {
    margin-bottom: 17.3333333333vw
}

.pop-notification .content-style p {
    margin: 2.6666666667vw 0
}

.pop-notification .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
    background: #ebebeb
}

.pop-notification .btn-box .button {
    color: #fff
}

.pop-notification .btn-box .btn-primary {
    background-image: #054ea1
}

.pop-notification .btn-box .btn-cancel {
    background-image: linear-gradient(to bottom, #d15454 0%, #cb4141 100%)
}

.rotating-pop {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity .5s .1s;
    opacity: 0;
    background: rgba(0, 0, 0, .9);
    pointer-events: none;
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

@supports (height: 100dvh) {
    .rotating-pop {
        height: 100dvh
    }
}

@supports not (height: 100dvh) {
    .rotating-pop {
        height: 100vh
    }
}

.rotating-pop.show {
    opacity: 1;
    pointer-events: auto
}

.rotating-phone-wrap {
    position: relative;
    bottom: 10%;
    width: 26.6666666667vw;
    height: 26.6666666667vw
}

.phone-rotating-tips {
    position: relative;
    bottom: 10%;
    width: 90%;
    color: #fff;
    font-size: 2.4vw;
    text-align: center
}

.phone-rotating-tips span {
    display: inline-block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover;
    vertical-align: middle;
    background: #ffffff
}

.beforelogin,
.afterlogin {
    display: flex;
    position: relative;
    z-index: 1;
    bottom: 0;
    width: calc(100% - 8.5333333333vw);
    height: 16vw;
    margin: 4.2666666667vw;
    box-shadow: 0 2.1333333333vw 2.1333333333vw #19066c
}

.beforelogin a,
.afterlogin a {
    text-align: left;
    padding: 1.0666666667vw 4.2666666667vw;
    border-radius: 5.3333333333vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #8800da, inset -.5333333333vw .2666666667vw .8vw #ffffff80;
    font-size: 3.2vw;
    line-height: 1.2;
    text-decoration: none
}

.beforelogin .main-wallet,
.afterlogin .main-wallet {
    width: 33%;
    border-radius: 2.6666666667vw 0 0 2.6666666667vw;
    box-shadow: inset .2666666667vw .2666666667vw #fff3
}

.beforelogin .main-wallet video,
.afterlogin .main-wallet video {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 31.4666666667vw;
    height: 20.8vw
}

.beforelogin .login-button,
.afterlogin .login-button {
    width: 34%;
    height: 100%;
    background: linear-gradient(220deg, #ff9fa2 0%, #7900e2 100%);
    box-shadow: inset 0 .2666666667vw #ffffff80;
    font-weight: 600;
    text-align: center
}

.beforelogin .login-button a,
.afterlogin .login-button a {
    margin-left: 2.1333333333vw;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    color: #222222;
    text-shadow: 0 0 .8vw #f364bc
}

.beforelogin .register-button a,
.afterlogin .register-button a,
.beforelogin .deposit-button a,
.afterlogin .deposit-button a {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    color: #222;
    text-shadow: 0 0 .8vw #ffd259
}

.beforelogin .register-button,
.beforelogin .deposit-button,
.afterlogin .register-button,
.afterlogin .deposit-button {
    width: 33%;
    height: 100%;
    border-radius: 0 2.6666666667vw 2.6666666667vw 0;
    background: linear-gradient(220deg, #63e9ec 0%, #7900e2 100%);
    box-shadow: inset 0 .2666666667vw #ffffff80;
    font-weight: 700;
    text-align: center
}

.beforelogin .main-wallet,
.afterlogin .main-wallet {
    background: linear-gradient(120deg, rgba(155, 199, 255, 0) 0%, #9bc7ff 100%)
}

.afterlogin .main-wallet,
.afterlogin .balance {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 65%;
    height: 100%;
    padding: 2.6666666667vw 4.8vw
}

.afterlogin .main-wallet video,
.afterlogin .balance video {
    left: 42.5%
}

.afterlogin .main-wallet .wallet,
.afterlogin .main-wallet .text,
.afterlogin .balance .wallet,
.afterlogin .balance .text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a0a2ca;
    font-size: 3.2vw;
    line-height: 4.8vw
}

.afterlogin .main-wallet .amount,
.afterlogin .main-wallet .bonus,
.afterlogin .balance .amount,
.afterlogin .balance .bonus {
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500;
    line-height: 6.9333333333vw
}

.afterlogin .main-wallet .icon,
.afterlogin .balance .icon {
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw
}

.afterlogin .icon-refresh {
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    margin-left: 2.1333333333vw;
    background: #a0a2ca;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.afterlogin .icon-refresh.active {
    animation: rotate 1s forwards
}

.afterlogin .deposit-button {
    width: 37%
}

.announcement-row {
    display: flex;
    position: relative;
    width: 100%;
    height: 8vw;
    background-color: #f4b600;
    color: #6f87d6;
    font-size: 3.2vw;
    line-height: 8vw
}

.announcement-row:before {
    content: "";
    display: block;
    width: 8vw;
    height: 8vw;
    margin-left: 3.2vw;
    background: #ffb80c;
    -webkit-mask: url(../../assets/images/icons/announcement-icon.svg) no-repeat center center/50%;
    mask: url(../../assets/images/icons/announcement-icon.svg) no-repeat center center/50%
}

.announcement-row .marquee {
    width: 100%;
    margin: 0 2.6666666667vw;
    overflow: hidden
}

.announcement-row .marquee ul {
    display: flex;
    flex-direction: row;
    width: -moz-fit-content;
    width: fit-content
}

.announcement-row .marquee li {
    display: inline-block;
    margin-right: 150px
}

.announcement-row .marquee li p {
    white-space: nowrap
}

.announcement-row .marquee li a {
    color: #6f87d6;
    text-decoration: none
}

.member-menu {
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
}

.member-menu.active {
    display: block
}

.member-head {
    position: relative;
    width: 100%;
    height: 45.3333333333vw
}

.member-menu-content {
    padding: 3.2vw;
    background: #1f1f1f
}

.member-menu-box {
    width: 100%;
    height: auto;
    margin: 0 0 3.2vw;
    padding-top: 1.0666666667vw;
    border-radius: 2.6666666667vw;
    background: #2b2922;
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a;
    font-size: 3.2vw
}

.member-menu-box:nth-child(1) {
    background: none;
    box-shadow: none
}

.member-menu-box:nth-child(1) .title {
    padding: 0
}

.member-menu-box .title {
    width: 100%;
    padding: 0 4.2666666667vw
}

.member-menu-box .title h2 {
    color: #fff;
    line-height: 8vw
}

.member-menu-box ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0 2.1333333333vw
}

.member-menu-box ul :nth-child(2n).active {
    animation: shake-r 1s linear infinite both
}

.member-menu-box ul li {
    position: relative;
    width: 25%;
    padding: 2.1333333333vw;
    background: none;
    box-shadow: none
}

.member-menu-box ul li.active {
    animation: shake-lr 1s linear infinite both
}

.member-menu-box ul li.scalein {
    animation: scale-in-center .2s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes shake-lr {
    0%,
    to {
        transform: rotate(0);
        transform-origin: 50% 50%
    }
    10% {
        transform: rotate(1deg)
    }
    20%,
    40%,
    60% {
        transform: rotate(-2deg)
    }
    30%,
    50%,
    70% {
        transform: rotate(2deg)
    }
    80% {
        transform: rotate(-1deg)
    }
    90% {
        transform: rotate(1deg)
    }
}

@keyframes shake-r {
    0%,
    to {
        transform: rotate(0);
        transform-origin: 50% 50%
    }
    10% {
        transform: rotate(-1deg)
    }
    20%,
    40%,
    60% {
        transform: rotate(2deg)
    }
    30%,
    50%,
    70% {
        transform: rotate(-2deg)
    }
    80% {
        transform: rotate(1deg)
    }
    90% {
        transform: rotate(-1deg)
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.member-menu-box ul li a {
    display: block;
    text-decoration: none
}

.member-menu-box ul li a p {
    color: #fff;
    line-height: 3.7333333333vw;
    text-align: center
}

.member-menu-box ul li a h6 {
    display: block;
    color: #0e2749;
    font-size: 2.6666666667vw;
    line-height: 3.7333333333vw
}

.member-menu-box ul li a span {
    display: block;
    position: relative;
    left: 50%;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    border-radius: 50%;
    background-color: #222222;
    transform: translate(-50%);
    margin-bottom: 2.1333333333vw
}

.member-menu-box ul li .notice {
    display: none;
    position: absolute;
    top: 30%;
    right: 45%;
    width: 4vw;
    height: 4vw;
    transform: translate(150%, -150%);
    border-radius: 50%;
    background: #054ea1
}

.member-menu-box ul li .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 2.6666666667vw;
    height: .5333333333vw;
    transform: translate(-50%, -50%);
    border-radius: 1.3333333333vw;
    background: #f4b600
}

.member-menu-box ul li .notice:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: .5333333333vw;
    height: 2.6666666667vw;
    transform: translate(-50%, -50%);
    border-radius: 1.3333333333vw;
    background: #f4b600
}

.member-menu-box ul li .notice.inbox {
    display: block;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4vw;
    text-align: center;
    color: #f4b600
}

.member-menu-box ul li .notice.inbox:after,
.member-menu-box ul li .notice.inbox:before {
    content: none
}

.member-menu-box .member-menu-shortcut li .notice {
    background: #0e2749;
    color: #f4b600;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 3.7333333333vw;
    text-align: center
}

.member-menu-box .member-menu-shortcut li .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 2.6666666667vw;
    height: .5333333333vw;
    border-radius: 1.3333333333vw;
    background: #f4b600
}

.member-menu-box .member-menu-shortcut li .notice:before {
    display: none
}

.member-menu-box .button-set,
.member-menu-box .button-setup {
    position: relative;
    width: 25%;
    padding: 1.8666666667vw
}

.member-menu-box .button-set .icon-set,
.member-menu-box .button-setup .icon-set {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto 2.6666666667vw;
    border-radius: 50%;
    background: #f4b600
}

.member-menu-box .button-set .icon-set:before,
.member-menu-box .button-setup .icon-set:before {
    content: "";
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: #ebebeb;
    -webkit-mask: url(/mostplayfiles/images/menu/member-menu/icon-setting.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/menu/member-menu/icon-setting.svg) no-repeat center/100%
}

.member-menu-box .button-set p,
.member-menu-box .button-setup p {
    color: #0e2749;
    line-height: 3.7333333333vw;
    text-align: center
}

.member-menu-box .button-setup {
    display: none;
    animation: button-center .1s cubic-bezier(.25, .46, .45, .94) both
}

.member-menu-box .button-setup .icon-set {
    background: #f4b600
}

.member-menu-box .button-setup .icon-set:before {
    -webkit-mask: url(/mostplayfiles/images/menu/member-menu/icon-setup.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/menu/member-menu/icon-setup.svg) no-repeat center/100%
}

@keyframes button-center {
    0% {
        transform: scale(.6);
        opacity: 1
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.member-menu-box .member-menu-service {
    padding: 2.1333333333vw 5.3333333333vw
}

.member-menu-box .member-menu-service li {
    width: 50%
}

.member-menu-box .member-menu-service li a:before {
    display: none
}

.member-menu-box .member-menu-service li.active {
    animation: none
}

.member-menu-box .member-menu-service a {
    display: block;
    font-size: 3.2vw;
    text-decoration: none
}

.member-menu-box .member-menu-service a p {
    margin-bottom: 1.3333333333vw;
    color: #0e2749;
    font-weight: 600;
    text-align: left
}

.member-menu-box .member-menu-service a span {
    color: #0e2749;
    text-align: left
}

.member-menu-point {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0 6.4vw 4.2666666667vw;
    text-align: center
}

.member-menu-point i {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    margin-right: 2.1333333333vw
}

.member-menu-point i .item-icon {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 60%;
    background-size: 100%;
    z-index: 2
}

.member-menu-point i:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.member-menu-point p {
    display: block;
    max-width: 70%;
    color: #7e919e;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: start
}

.member-menu-point p span {
    color: #f4a000
}

.member-menu-logout {
    width: 100%;
    height: auto;
    margin: 4.2666666667vw 0;
    border-radius: 2.6666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a;
    font-weight: 500
}

.member-menu-logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.2666666667vw;
    text-decoration: none
}

.member-menu-logout a p {
    display: inline-block;
    color: #0e2749;
    font-size: 5.3333333333vw;
    line-height: 4.2666666667vw;
    text-align: center;
    text-shadow: 0 .2666666667vw .8vw rgba(244, 182, 0, .5)
}

@keyframes scale-out-center {
    0% {
        transform: scale(1);
        opacity: 1
    }
    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes setbubble {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }
    10% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 40px
    }
    20%,
    90%,
    to {
        transform: translate(-50%, -50%) scale(1);
        border-width: 0
    }
}

@keyframes seticon {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(180deg)
    }
}

.member-content {
    display: block;
    position: relative;
    width: 100%;
    height: auto
}

.member-content .phone p {
    padding: 0
}

.member-content .button {
    width: calc(100% - 8.5333333333vw);
    margin: 4.2666666667vw auto
}

.login-info-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 1.0666666667vw 4.2666666667vw 0
}

.forgetpassword-buttn {
    font-size: 3.4666666667vw
}

.forgetpassword-buttn a {
    display: block;
    padding: 1.0666666667vw;
    border: .2666666667vw solid #6481c0;
    border-radius: 1.3333333333vw;
    color: #6481c0;
    text-decoration: none
}

.member-content p,
.login-biometric-content p {
    padding: 0 4.2666666667vw;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 1.2;
    text-align: center
}

.member-content p a,
.login-biometric-content p a {
    color: #ffb80c
}

.member-content .signup a,
.login-biometric-content .signup a {
    margin-left: 2.1333333333vw;
    text-decoration: underline
}

.member-box {
    position: relative;
    margin: 4.2666666667vw 4.2666666667vw 0
}

.member-box:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .2666666667vw;
    background-color: #fff3
}

.radius .inputbox:after {
    left: 1%;
    width: 98%
}

.radius .inputbox:last-child:after {
    height: 0
}

.radius.member-box:after {
    height: 0
}

.login-biometric-content {
    text-align: center
}

.login-biometric-content .member-box {
    text-align: left
}

.login-biometric-content .button {
    margin: 4.2666666667vw
}

.biometric-group {
    display: inline-block;
    margin-top: 8.5333333333vw;
    text-decoration: none
}

.biometric-group .btn-biometric {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    margin: 0 auto 2.1333333333vw;
    animation: pop 2.5s linear infinite;
    border-radius: 50%;
    background: #f4b600
}

.biometric-group .btn-biometric video,
.biometric-group .btn-biometric img {
    position: relative;
    width: 21.3333333333vw;
    height: 21.3333333333vw
}

.biometric-group .btn-biometric .ripple {
    position: absolute;
    z-index: -1;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    animation: shrink 2.5s linear infinite;
    border-radius: 50%;
    background: #f4b600
}

.biometric-group span {
    display: block;
    color: #0e2749;
    font-size: 4vw;
    text-align: center
}

.biometric-group.identify {
    position: relative;
    padding: 2.6666666667vw
}

.biometric-group.identify:before,
.biometric-group.identify:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 32vw;
    height: 32vw;
    transform: translate(-50%);
    border: 2.1333333333vw solid transparent;
    border-radius: 100%
}

.biometric-group.identify:before {
    z-index: 130;
    animation: identify 1s linear infinite;
    border-top-color: #f4b600
}

.biometric-group.identify:after {
    border: 2.1333333333vw solid rgba(244, 182, 0, .2)
}

.biometric-group.identify .ripple {
    display: none
}

.biometric-group.identify .btn-biometric {
    margin-bottom: 8.5333333333vw
}

@keyframes pop {
    0% {
        transform: scale(1)
    }
    80% {
        transform: scale(1)
    }
    90% {
        transform: scale(1.05)
    }
    to {
        transform: scale(1)
    }
}

@keyframes shrink {
    0% {
        width: 0;
        height: 0;
        opacity: 0
    }
    80% {
        opacity: .3
    }
    to {
        width: 37.3333333333vw;
        height: 37.3333333333vw;
        opacity: 0
    }
}

@keyframes identify {
    0% {
        transform: rotate(0) translate(-50%);
        transform-origin: 0
    }
    to {
        transform: rotate(360deg) translate(-50%);
        transform-origin: 0
    }
}

.layout-brand {
    display: block
}

.layout-brand.active {
    display: none
}

.layout-brand.fish .card1 li img {
    width: 75%;
    margin: 0 auto 1.6vw
}

.layout-list {
    display: none
}

.layout-list.active {
    display: block
}

.card1,
.card2 {
    width: 100%;
    height: auto;
    margin-bottom: 2.6666666667vw;
    border-radius: .8vw
}

.card1 ul,
.card2 ul {
    display: grid;
    grid-gap: 1.0666666667vw;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    height: auto
}

.card1 li,
.card2 li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-radius: 4.2666666667vw;
    background: #ffffff;
    box-shadow: 0 1.6vw 1.3333333333vw #281a701a, inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.card1 li span,
.card2 li span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 8vw;
    height: 5.3333333333vw;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 70%
}

.card1 li a,
.card2 li a {
    display: block;
    text-decoration: none
}

.card1 li img,
.card2 li img {
    display: block;
    width: 50%;
    margin: 1.0666666667vw auto 0
}

.card1 li p,
.card2 li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .5333333333vw 1.3333333333vw 2.6666666667vw;
    color: #0e2749;
    font-size: 3.2vw;
    text-align: center
}

.card2 ul {
    grid-template-columns: repeat(3, 1fr)
}

.card2 li img {
    width: 40%
}

.icon-sport {
    display: block;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 1.0666666667vw auto
}

.nextevent {
    position: relative;
    height: 62.9333333333vw
}

.nextevent .title {
    display: flex;
    align-items: center;
    margin: 2.1333333333vw 4.2666666667vw;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    letter-spacing: .2666666667vw;
    vertical-align: middle
}

.nextevent .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 3.2vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.nextevent .event-card {
    display: flex;
    width: 100%
}

.nextevent .case {
    position: relative;
    width: 45%;
    margin: 4vw 0 4vw 5.3333333333vw
}

.nextevent .case .team-img {
    display: flex
}

.nextevent .case .team-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16vw;
    height: 16vw;
    margin-right: 5.3333333333vw
}

.nextevent .case .team-flag img {
    display: block;
    z-index: 1;
    width: auto;
    height: 55%;
    filter: drop-shadow(0 .5333333333vw 1.0666666667vw #281a70)
}

.nextevent .case .teamVsUpcoming .team-name {
    margin: 2.6666666667vw 0 1.3333333333vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 1.2
}

.nextevent .case .teamVsUpcoming .team-name span {
    margin: 0 1.6vw;
    font-size: 3.2vw
}

.nextevent .case .teamVsUpcoming .team-date {
    font-size: 3.2vw
}

.nextevent .event-img {
    position: relative;
    width: 50%;
    height: 41.3333333333vw;
    margin-right: 4vw
}

.nextevent .event-img img {
    display: block;
    position: absolute;
    right: 0;
    bottom: 5%;
    width: 100%;
    height: auto
}

.nextevent .slider {
    width: 100%;
    margin: 0 auto;
    transition: all ease-in-out .3s;
    opacity: 1
}

.nextevent .slider .slick-track {
    position: relative;
    padding: 2.1333333333vw 0 0
}

.nextevent .slider .slick-slide {
    position: relative;
    height: 46.6666666667vw;
    margin: 0 4.2666666667vw;
    border-radius: 4.2666666667vw
}

.nextevent .slider .slick-slide a {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%)
}

.nextevent .slick-dots {
    position: absolute;
    z-index: 2;
    bottom: -7.4666666667vw;
    left: 50%;
    transform: translate(-50%)
}

.nextevent .slick-dots li {
    display: inline-block;
    position: relative;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin: 0 2.1333333333vw;
    overflow: hidden;
    text-indent: -2666.4vw;
    cursor: pointer
}

.nextevent .slick-dots li button {
    display: block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    padding: 1.0666666667vw;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer
}

.nextevent .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%;
    background: #054ea1
}

.nextevent .slick-dots .slick-active button:before {
    background-color: #f4b600
}

.progress-bar .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333vw;
    margin-bottom: 1.3333333333vw;
    border-radius: 1.3333333333vw;
    background: rgba(5, 78, 161, .1);
    box-shadow: inset 0 0 .2666666667vw #999
}

.progress-bar .bar-inner {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 1.3333333333vw;
    background: linear-gradient(to right, #f26969, #cd3336);
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #f2696966, 0 0 .8vw #f2696966
}

.progress-bar .bar-inner:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: .8vw;
    height: .8vw;
    transform: translate(-50%, -50%);
    border-radius: .8vw;
    background-color: #fff;
    box-shadow: 0 0 .5333333333vw .2666666667vw #f26969
}

.progress-bar .number {
    display: flex;
    align-content: center;
    justify-content: space-between;
    color: #0e2749;
    font-size: 2.6666666667vw
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner,
.ticket-wrap .progress-bar .bar .bar-inner {
    background: linear-gradient(270deg, #8aaeff 0%, #054ea1 100%);
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #8aaeff66, 0 0 .8vw #8aaeff66
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner:after,
.ticket-wrap .progress-bar .bar .bar-inner:after {
    box-shadow: 0 0 .5333333333vw .2666666667vw #8aaeff
}

.searchpage {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 17.0666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #1f1f1f;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    right: -100%;
    opacity: 0;
    transition: right .3s, opacity 0s .3s
}

.searchpage.active {
    right: 0;
    opacity: 1;
    transition: right .3s, opacity 0s 0s
}

.searchpage .button {
    border: 0;
    outline: none;
    font-size: 5.3333333333vw;
    line-height: 13.3333333333vw
}

.search-top-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 13.3333333333vw;
    background: #2b2922
}

.search-top-info .back {
    display: block;
    width: 13.3333333333vw;
    height: 100%;
    text-indent: -2666.4vw;
    background: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 30%;
    mask-size: 30%;
    cursor: pointer
}

.search-top-info input {
    position: relative;
    width: calc(100% - 26.6666666667vw);
    height: 10.6666666667vw;
    padding: 0;
    border: 0;
    border-radius: 2.6666666667vw;
    outline: none;
    background: #f2f2f2;
    color: #0e2749;
    font-size: 3.7333333333vw;
    text-indent: 5.3333333333vw
}

.search-top-info input::placeholder {
    color: #0e274980
}

.search-top-info .icon-search {
    display: block;
    width: 13.3333333333vw;
    height: 100%;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 35%;
    mask-size: 35%
}

.search-top-info h6 {
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    line-height: 13.3333333333vw;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 4.8vw
}

.search-top-info h6~.back {
    position: absolute;
    left: 0
}

.searchpage-main {
    position: relative;
    padding: 9.6vw 2.1333333333vw 4.2666666667vw
}

.searchpage-main .clear-result {
    position: absolute;
    top: 4.2666666667vw;
    right: 2.1333333333vw;
    color: #f4a000;
    font-size: 3.2vw;
    text-decoration: underline
}

.searchpage-main h2 {
    margin-bottom: 1.0666666667vw;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.searchpage-main .check-group {
    padding: 2.1333333333vw;
    background: #2b2922
}

.searchpage-main ul {
    margin-bottom: 0
}

.search-checkbox-group ul {
    display: grid;
    grid-gap: 1.0666666667vw;
    grid-template-columns: repeat(3, 1fr);
    justify-content: flex-start;
    margin-bottom: 4.2666666667vw;
    overflow: hidden
}

.search-checkbox-group li {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-checkbox-group li:nth-child(3n) {
    margin-right: 0
}

.search-checkbox-group [type=checkbox]+label,
.search-checkbox-group [type=radio]+label {
    padding: 0 3.2vw;
    overflow: hidden;
    background: #222222;
    color: #fff;
    line-height: 10.6666666667vw
}

.searchpage-bar {
    position: fixed;
    z-index: 10;
    right: -50%;
    bottom: 0;
    width: 100%;
    padding: 2.1333333333vw;
    transform: translate(50%);
    transition: all .3s;
    background-color: #1f1f1f
}

.searchpage-bar.active {
    right: 50%
}

.date-input {
    position: relative;
    width: 100%;
    margin-right: 0
}

.date-input input {
    box-sizing: border-box;
    border: 0;
    border-radius: 1.3333333333vw;
    outline: none;
    color: #0e2749;
    text-align: left
}

.date-input input::placeholder {
    color: #0e2749
}

.date-input input::-webkit-calendar-picker-indicator {
    display: none
}

.no-result {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100vw;
    background: #2b2922
}

.no-result .pic {
    display: flex
}

.no-result img {
    display: block;
    width: 30%;
    height: auto;
    margin: auto;
    opacity: .3;
    filter: brightness(2)
}

.no-result video {
    position: relative;
    left: 50%;
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    transform: translate(-50%);
    opacity: .7
}

.no-result .img-no-data {
    position: relative;
    left: 50%;
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    transform: translate(-50%);
    opacity: .7;
    filter: brightness(1);
    margin: 0
}

.no-result .text {
    margin-top: 2.6666666667vw;
    color: #9fa7ab;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center
}

.switch-mode {
    display: grid;
    grid-gap: 4.2666666667vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 4.2666666667vw
}

.switch-mode li {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background: #f2f2f2;
    color: #0e2749;
    text-align: center
}

.switch-mode li.active {
    background: #f4b600;
    color: #0e2749
}

.switch-mode li.active i {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 2.1333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

.switch-mode li.active:after {
    content: "";
    position: absolute;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 2.5333333333vw;
    background: #ffffff
}

.switch-mode li video,
.switch-mode li h4,
.switch-mode li p,
.switch-mode li img {
    z-index: 1;
    color: #0e2749
}

.switch-mode li video,
.switch-mode li img {
    position: relative;
    left: 10%;
    width: 80%;
    margin-bottom: 2.1333333333vw
}

.switch-mode li h4 {
    margin: 2.1333333333vw 0;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.switch-mode li p {
    font-size: 3.2vw
}

.mode-tips {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 4.2666666667vw;
    transform: translate(-50%);
    border-radius: 1.3333333333vw;
    background: #ffffff;
    color: #0e2749;
    font-weight: 500
}

.inner-block {
    margin: 5.3333333333vw
}

.inner-block li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background: #f2f2f2;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    color: #0e2749
}

.inner-block .toggle-box p {
    color: #0e2749cc
}

.lobby-wrap {
    display: block;
    padding: 2.1333333333vw 0;
    background: #0e2749
}

.lobby-wrap .lobby-area {
    padding: 2.1333333333vw 0 0
}

.lobby-wrap .lobby-area:last-child {
    padding: 2.1333333333vw 0
}

.lobby-wrap .lobby-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 4.2666666667vw 2.1333333333vw;
    font-weight: 500
}

.lobby-wrap .lobby-title h2 {
    color: #0e2749
}

.lobby-wrap .lobby-title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 3.2vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.lobby-wrap .lobby-title .lobby-arrow {
    display: block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    transform: rotate(180deg);
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 70%;
    mask-size: 70%
}

.lobby-wrap .lobby-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.1333333333vw 0 2.1333333333vw 4.2666666667vw;
    overflow: auto
}

.lobby-wrap .lobby-list .lobby-item {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    width: 44vw;
    margin: 0 2.6666666667vw 0 0;
    padding: 0;
    border-radius: 1.3333333333vw;
    background: #342e80;
    box-shadow: 0 0 1.6vw #0130494d
}

.lobby-wrap .lobby-list .lobby-item .lobby-icon {
    position: relative;
    width: 100%;
    height: 28vw;
    overflow: hidden;
    border-radius: 1.3333333333vw;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.lobby-wrap .lobby-list .lobby-item .lobby-icon img {
    width: 100%;
    height: 100%
}

.lobby-wrap .lobby-list .lobby-item .lobby-text {
    padding: 2.1333333333vw 2.6666666667vw;
    color: #b9c9ff;
    font-size: 3.2vw
}

.lobby-wrap .tag {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5333333333vw 1.6vw;
    transform: scale(.8);
    transform-origin: left bottom;
    border-radius: 0 .5333333333vw 0 0;
    font-size: 3.2vw
}

.lobby-wrap .tag.new {
    background: #ffd259;
    color: #fff;
    text-shadow: 0 .2666666667vw .2666666667vw rgba(244, 182, 0, .2)
}

.games {
    position: relative;
    width: 100%;
    height: auto
}

.games .jackpot {
    position: relative;
    height: 24vw;
    margin: 2.1333333333vw auto;
    background-position: center;
    background-size: cover;
    width: calc(100% - 4.2666666667vw);
    border-radius: 1.3333333333vw
}

.games .jackpot .text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: center
}

.games .jackpot h2 {
    margin-bottom: 1.3333333333vw;
    color: #fff;
    font-size: 4vw;
    text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, .5)
}

.games .jackpot span {
    display: block;
    color: #ffef3c;
    font-size: 7.4666666667vw;
    font-weight: 700;
    text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, .5)
}

.games .games-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2.1333333333vw;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 1.0666666667vw
}

.games .games-box {
    position: relative;
    width: 100%;
    height: 6.928571428571429rem;
    overflow: hidden;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

.games .games-box .text {
    position: relative;
    width: 100%;
    height: auto;
    padding: 1.3333333333vw 2.6666666667vw;
    background-color: #fff;
    display: none
}

.games .games-box .text h3 {
    width: 83%;
    margin-bottom: 1.3333333333vw;
    overflow: hidden;
    color: #0e2749;
    font-size: 4vw;
    text-overflow: ellipsis;
    white-space: nowrap
}

.games .games-box .text p {
    width: 83%;
    color: #0e2749;
    font-size: 3.4666666667vw
}

.games .games-box .text span {
    display: inline-block;
    color: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    font-weight: 700;
    vertical-align: middle
}

.games .games-box .like {
    position: absolute;
    top: 50%;
    right: 2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto
}

.games .games-box.new:before {
    content: "NEW";
    display: block;
    position: absolute;
    z-index: 1;
    top: 2.6666666667vw;
    left: 2.6666666667vw;
    padding: 0 1.0666666667vw;
    border-radius: .5333333333vw;
    background-color: #f4b600;
    color: #0e2749;
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
    text-align: center;
    text-shadow: 0 .2666666667vw .2666666667vw rgba(244, 182, 0, .2)
}

.games .pic {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0
}

.games .pic img {
    width: 100%;
    height: 6.928571428571429rem
}

.games .prompt {
    width: 100%;
    padding: 4.2666666667vw 0;
    font-size: 3.4666666667vw;
    text-align: center
}

:root {
    --date-ball-translateX: 600%
}

.slot-game,
.casino-game {
    position: relative;
    top: 24vw;
    width: 100%;
    height: auto;
    padding-bottom: 22.6666666667vw
}

.slot-game .banner,
.casino-game .banner {
    background-color: transparent
}

.slot-game .banner .slider .slick-slide,
.casino-game .banner .slider .slick-slide {
    height: 56vw
}

.slot-game .banner .slider .slick-slide .banner-image,
.casino-game .banner .slider .slick-slide .banner-image {
    border-radius: 4.2666666667vw;
    background-position: bottom
}

.slot-game .banner .slider .slick-slide .banner-image:after,
.casino-game .banner .slider .slick-slide .banner-image:after {
    content: "";
    display: block;
    height: 100%;
    border-radius: 4.2666666667vw;
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, .5) 20%, rgba(0, 0, 0, 0) 40%);
    box-shadow: .5333333333vw .5333333333vw 2.1333333333vw #0000004d
}

.slot-game .ranking,
.casino-game .ranking {
    display: flex;
    position: relative;
    z-index: 2;
    top: -8vw;
    margin: 0;
    padding: 4.2666666667vw 4.2666666667vw 0;
    overflow-x: scroll;
    overflow-y: hidden;
    list-style: none
}

.slot-game .ranking li,
.casino-game .ranking li {
    position: relative;
    margin: 0 .8vw
}

.slot-game .ranking li:first-child,
.casino-game .ranking li:first-child {
    margin-left: 0
}

.slot-game .ranking li:last-child,
.casino-game .ranking li:last-child {
    margin-right: 0
}

.slot-game .ranking li span,
.casino-game .ranking li span {
    position: absolute;
    z-index: -1;
    top: -5.3333333333vw;
    left: 0;
    color: transparent;
    font-size: 14.6666666667vw;
    font-weight: 700;
    text-shadow: 0 0 1.0666666667vw rgba(244, 182, 0, .4), 0 .2666666667vw 1.0666666667vw rgba(244, 182, 0, .4);
    -webkit-text-stroke: .2666666667vw #ffffff
}

.slot-game .ranking li a,
.casino-game .ranking li a {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 25.6vw;
    height: 29.3333333333vw;
    filter: drop-shadow(0 0 1.0666666667vw rgba(244, 182, 0, .5))
}

.slot-game .ranking li .outline-border,
.casino-game .ranking li .outline-border {
    width: 100%;
    height: 100%;
    background: url(/mostplayfiles/images/slotgame/hexagon.svg) no-repeat center
}

.slot-game .ranking li img,
.casino-game .ranking li img {
    position: absolute;
    z-index: -1;
    width: 90%;
    height: 90%;
    -webkit-mask: url(/mostplayfiles/images/slotgame/hexagon-mask.svg) no-repeat center;
    mask: url(/mostplayfiles/images/slotgame/hexagon-mask.svg) no-repeat center
}

.slot-game .recommend-wrap,
.casino-game .recommend-wrap {
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 4vw;
    padding: 1.6vw 4.2666666667vw 2.6666666667vw;
    overflow-x: auto;
    overflow-y: hidden
}

.slot-game .recommend-wrap .recommend-scroll,
.casino-game .recommend-wrap .recommend-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    list-style: none
}

.slot-game .recommend-wrap .recommend-scroll li,
.casino-game .recommend-wrap .recommend-scroll li {
    display: flex;
    position: relative;
    width: 42.6666666667vw;
    height: 53.3333333333vw;
    overflow: visible;
    transform: rotateY(0)
}

.slot-game .recommend-wrap .recommend-scroll li a,
.casino-game .recommend-wrap .recommend-scroll li a {
    display: block;
    position: relative;
    width: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    perspective: 213.3333333333vw
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-rotate,
.casino-game .recommend-wrap .recommend-scroll li .recommend-rotate {
    display: block;
    width: 100%
}

.slot-game .recommend-wrap .recommend-scroll li img,
.casino-game .recommend-wrap .recommend-scroll li img {
    position: absolute;
    bottom: -.8vw;
    left: -.5333333333vw;
    width: 43.7333333333vw;
    border-radius: 0 0 3.2vw 3.2vw
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-bg,
.casino-game .recommend-wrap .recommend-scroll li .recommend-bg {
    transform: translateZ(-20px);
    transform-origin: center;
    -webkit-mask: url(/mostplayfiles/images/slotgame/trapezoid-mask.svg) no-repeat center;
    mask: url(/mostplayfiles/images/slotgame/trapezoid-mask.svg) no-repeat center
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-char,
.casino-game .recommend-wrap .recommend-scroll li .recommend-char {
    transform: translateZ(15px);
    transition: all .5s
}

.slot-game .recommend-wrap .recommend-scroll li .info-block,
.casino-game .recommend-wrap .recommend-scroll li .info-block {
    position: absolute;
    bottom: 1.0666666667vw;
    left: 3%;
    width: 94%;
    height: 14.4vw;
    padding-top: 2.1333333333vw;
    transform: translateZ(20px);
    border-radius: 2.6666666667vw;
    -webkit-backdrop-filter: blur(.1066666667vw);
    backdrop-filter: blur(.1066666667vw)
}

.slot-game .recommend-wrap .recommend-scroll li h4,
.casino-game .recommend-wrap .recommend-scroll li h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.0666666667vw 4.2666666667vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.slot-game .recommend-wrap .recommend-scroll li h5,
.casino-game .recommend-wrap .recommend-scroll li h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.0666666667vw 4.2666666667vw;
    opacity: .7;
    color: #fff;
    font-size: 3.2vw
}

.slot-game .games-wrap,
.casino-game .games-wrap {
    margin: 4.2666666667vw 3.2vw
}

.slot-game .games-wrap .grid,
.casino-game .games-wrap .grid {
    margin: 0;
    padding: 0;
    list-style: none
}

.slot-game .games-wrap .grid li,
.casino-game .games-wrap .grid li {
    display: flex;
    justify-content: center;
    width: 33%;
    margin-bottom: 1.0666666667vw;
    padding: 1.0666666667vw 1.0666666667vw 2.1333333333vw;
    float: left;
    border-radius: 2.6666666667vw;
    opacity: 0
}

.slot-game .games-wrap .grid li:before,
.casino-game .games-wrap .grid li:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2.1333333333vw;
    width: calc(100% - 2.1333333333vw);
    height: 8vw;
    background: linear-gradient(180deg, rgba(14, 39, 73, 0) 0%, #0e2749 100%)
}

.slot-game .games-wrap .grid li:after,
.casino-game .games-wrap .grid li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2.6666666667vw;
    left: 50%;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    transform: translate(-50%);
    background: url(/mostplayfiles/images/slotgame/icon-white-circle-star.svg) no-repeat center
}

.slot-game .games-wrap .grid li img,
.casino-game .games-wrap .grid li img {
    max-width: 100%;
    border-radius: 2.6666666667vw
}

.slot-game .games-wrap .grid li.shown,
.casino-game .games-wrap .grid li.shown {
    opacity: 1
}

.slot-game .games-wrap .grid li.animate,
.casino-game .games-wrap .grid li.animate {
    transform: translateY(53.3333333333vw);
    animation: effect-2 .65s ease forwards
}

.slot-game .games-wrap .grid li .favorite,
.casino-game .games-wrap .grid li .favorite {
    position: absolute;
    z-index: 1;
    bottom: 1.2vw;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    padding: 2.1333333333vw;
    transform: translateZ(0);
    transform-style: preserve-3d
}

.slot-game .games-wrap .grid li .favorite.active video,
.casino-game .games-wrap .grid li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -10.6666666667vw;
    left: 50%;
    width: 8.5333333333vw;
    height: auto;
    transform: translate(-50%)
}

.slot-game .games-wrap .grid.effect-2,
.casino-game .games-wrap .grid.effect-2 {
    transform: translateY(53.3333333333vw);
    animation: effect-2 .65s ease forwards
}

.slot-game .title,
.casino-game .title {
    display: flex;
    align-items: center;
    height: 4.2666666667vw;
    margin: 0 4.2666666667vw 0 8.5333333333vw;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.slot-game .title:before,
.casino-game .title:before {
    content: "";
    position: absolute;
    left: 4.2666666667vw;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.provider-wrap {
    display: flex;
    position: fixed;
    z-index: 110;
    top: 13.0666666667vw;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    background: #ffffff
}

.provider-wrap .provider-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 3.2vw 2.1333333333vw
}

.provider-wrap .provider-scroll .search-block {
    position: relative;
    text-align: center
}

.search-block .magnifier {
    display: flex;
    position: absolute;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 14.4vw;
    height: 14.4vw;
    margin: 0 2.1333333333vw
}

.search-block .magnifier svg {
    z-index: 999;
    margin: 0 auto
}

.search-block .magnifier svg g {
    stroke: #0e2749
}

.search-block .magnifier circle {
    stroke-dasharray: 45.55 45.55;
    stroke-dashoffset: 91.1
}

.search-block .magnifier path {
    stroke-dasharray: 27.91 27.91;
    stroke-dashoffset: -23
}

.search-block .input-box {
    display: flex;
    position: relative;
    align-items: center;
    width: 14.4vw;
    height: 14.4vw;
    margin: 0 2.1333333333vw;
    border: .5333333333vw solid #d8d8d8;
    border-radius: 50%;
    background: #ffffff
}

.search-block .input-box .search {
    display: block;
    width: 100%;
    min-width: 9.0666666667vw;
    height: 100%;
    padding: 0 4.2666666667vw;
    border: 0;
    border-radius: 2.6666666667vw;
    outline: none;
    background: transparent;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.search-block .input-box .clear {
    display: none;
    position: relative;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 4.2666666667vw;
    padding: 2.1333333333vw;
    border: 0;
    border-radius: 50%;
    background: #7e919e;
    font-size: 3.2vw;
    font-weight: 500;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/icons/icon-cross-type.svg) no-repeat center/100%
}

.search-block .input-box .cancel {
    display: none;
    position: relative;
    padding: 1.0666666667vw 4.2666666667vw;
    border-left: .4vw solid rgba(14, 39, 73, .08);
    color: #0e2749cc;
    font-size: 3.2vw
}

.provider-scroll ul {
    display: flex;
    margin: 0;
    padding-left: 0;
    list-style: none
}

.provider-scroll ul li {
    display: grid;
    position: relative;
    grid-template-columns: 14.4vw;
    grid-template-rows: 14.4vw auto;
    margin: 1.0666666667vw 2.1333333333vw 0;
    text-align: center;
    background: #0e2749;
    border-radius: 50%
}

.provider-scroll ul li .provider {
    position: absolute;
    left: 50%;
    width: 8vw;
    height: 8vw;
    margin-top: 3.2vw;
    transform: translate(-50%)
}

.provider-scroll ul li:before {
    content: "";
    display: block;
    border: .5333333333vw solid #d8d8d8;
    border-radius: 50%;
    box-shadow: 0 0 0 1.0666666667vw #d8d8d84d
}

.provider-scroll ul li.active:before {
    border: .5333333333vw solid #f4b600;
    box-shadow: 0 0 1.0666666667vw 1.0666666667vw #f4b6004d
}

.search-wrap,
.results-wrap {
    display: none;
    position: fixed;
    z-index: 114;
    top: 34.6666666667vw;
    left: 0;
    width: 100%;
    height: calc(100% - 34.6666666667vw);
    overflow-x: hidden;
    overflow-y: auto
}

.search-box {
    display: none;
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    padding: 4.2666666667vw 4.2666666667vw 17.0666666667vw;
    overflow-y: auto;
    border-radius: 0 0 4vw 4vw;
    background: #ffffff
}

.search-box:after {
    content: "";
    display: block;
    position: fixed;
    bottom: 0;
    width: calc(100% - 8.5333333333vw);
    height: 21.3333333333vw;
    background: #ffffff
}

.search-box .recently-played,
.search-box .my-favorites {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 48%;
    height: 15.4666666667vw;
    margin-bottom: 6.4vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-decoration: none
}

.search-box .recently-played:before,
.search-box .my-favorites:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    height: 15.4666666667vw;
    mix-blend-mode: overlay
}

.search-box .recently-played {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.search-box .recently-played:before {
    background: url(/mostplayfiles/images/slotgame/recently-played.png) no-repeat center/contain
}

.search-box .my-favorites {
    float: right;
    background: linear-gradient(0deg, #3976ff 0%, #054ea1 100%)
}

.search-box .my-favorites:before {
    background: url(/mostplayfiles/images/slotgame/my-favorites.png) no-repeat center/contain
}

.search-box .button {
    position: fixed;
    z-index: 9000;
    bottom: 4.2666666667vw;
    width: calc(100% - 8.5333333333vw)
}

.results-box {
    display: none;
    position: relative;
    z-index: 9000;
    top: 0;
    width: 100%;
    height: auto;
    padding: 0 4.2666666667vw 4.2666666667vw;
    overflow-y: auto;
    border-radius: 0 0 4vw 4vw;
    background: #ffffff
}

.results-box .results-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.1333333333vw
}

.results-box .results-info span {
    align-self: center;
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500
}

.results-box .results-info .layout-icon {
    width: 4vw;
    height: 8.2666666667vw
}

.results-box .results-info .layout-icon g {
    stroke: #0e2749
}

.game-list {
    display: none;
    padding: 0
}

.game-list li {
    display: grid;
    position: relative;
    grid-template-columns: 17.0666666667vw auto 6.4vw 21.3333333333vw;
    align-items: center;
    column-gap: 4.2666666667vw;
    row-gap: 1.0666666667vw
}

.game-list li+li {
    margin-top: 4.2666666667vw
}

.game-list li img {
    grid-row: 1/span 2;
    max-width: 100%;
    border-radius: 1.3333333333vw
}

.game-list li h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    grid-column-start: 2;
    grid-row-start: 1;
    align-self: flex-end;
    margin: 0;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.game-list li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column-start: 2;
    grid-row-start: 2;
    align-self: flex-start;
    margin: 0;
    color: #0e274980;
    font-size: 3.2vw
}

.game-list li .favorite {
    position: relative;
    grid-row: 1/span 2;
    width: 6.4vw;
    height: 6.4vw;
    padding: 2.6666666667vw;
    background: url(/mostplayfiles/images/slotgame/icon-dark-star.svg) no-repeat center;
    justify-self: center
}

.game-list li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -12.5333333333vw;
    left: 50%;
    width: 9.6vw;
    height: auto;
    transform: translate(-50%)
}

.game-list li button {
    grid-row: 1/span 2;
    height: 10.6666666667vw;
    border: transparent;
    border-radius: 2.6666666667vw;
    background: #f4b600;
    color: #0e2749;
    font-size: 3.4666666667vw;
    font-weight: 500
}

.game-list li button.active {
    background: linear-gradient(180deg, #ffc20f 0, #f4b600 100%);
    color: #0e2749
}

.game-list.active {
    display: block
}

.game-grid {
    display: none;
    grid-gap: 2.1333333333vw;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0
}

.game-grid li {
    display: flex;
    position: relative;
    justify-content: center;
    padding-bottom: 2.1333333333vw;
    float: left;
    border-radius: 2.6666666667vw
}

.game-grid li:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2.1333333333vw;
    width: 100%;
    height: 8vw;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%)
}

.game-grid li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2.6666666667vw;
    left: 50%;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    transform: translate(-50%);
    background: url(/mostplayfiles/images/slotgame/icon-white-circle-star.svg) no-repeat center
}

.game-grid li img {
    max-width: 100%;
    border-radius: 2.6666666667vw
}

.game-grid li .favorite {
    position: absolute;
    z-index: 1;
    bottom: 1.2vw;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    padding: 2.1333333333vw;
    transform: translateZ(0);
    transform-style: preserve-3d
}

.game-grid li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -10.6666666667vw;
    left: 50%;
    width: 8.5333333333vw;
    height: auto;
    transform: translate(-50%)
}

.game-grid.active {
    display: grid
}

.category {
    padding-bottom: 4.2666666667vw
}

.category h4 {
    display: inline-block;
    align-items: center;
    height: 4.2666666667vw;
    opacity: 0;
    color: #0e2749;
    font-family: "Source Sans 3", sans-serif;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.category span {
    margin-left: 4.2666666667vw;
    opacity: 0;
    color: #0e274980;
    font-size: 3.2vw
}

.category ul {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(4, 1fr);
    margin: 4.2666666667vw 0;
    padding: 0;
    list-style: none
}

.category ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 10.6666666667vw;
    border-radius: 2.6666666667vw;
    opacity: 0;
    background: #f2f2f2;
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500;
    line-height: 10.6666666667vw;
    text-align: center;
    padding: 0 1.0666666667vw
}

.category ul li.active {
    background: #f4b600;
    color: #0e2749
}

.category ul li.active:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 3.2vw;
    background: url(/images/rain/h5/check.svg) no-repeat center
}

.category ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 2.5333333333vw;
    background: #ffffff
}

.category.history span {
    float: right
}

.category.history ul {
    grid-gap: .2666666667vw;
    grid-template-columns: 1fr
}

.category.history ul li {
    display: flex;
    position: relative;
    align-items: center;
    padding: 4.2666666667vw 6.4vw 4.2666666667vw 8vw;
    border-radius: 0;
    background: transparent;
    text-align: left
}

.category.history ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 32%;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #0e2749;
    -webkit-mask: url(/mostplayfiles/images/icon-set/icon-clock.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/icon-set/icon-clock.svg) no-repeat center/100%
}

.category.history ul li+li {
    border-top: .2666666667vw solid rgba(14, 39, 73, .08)
}

.category.history ul li .clear {
    display: block;
    position: absolute;
    right: 0;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #7e919e;
    -webkit-mask: url(/mostplayfiles/images/icon-set/icon-delete.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/icon-set/icon-delete.svg) no-repeat center/100%
}

.category.history ul li.active {
    background: transparent
}

.category.history ul li.active:before {
    border-bottom-right-radius: 0
}

.category.history ul li.active:after {
    display: none
}

.prize-pool-wrap {
    position: relative;
    margin: 0 4.2666666667vw
}

.prize-pool-wrap .jackpot {
    width: 100%
}

.prize-pool-wrap .marquee-block {
    position: absolute;
    top: 17.6vw;
    left: 50%;
    width: 100%;
    height: 4.5333333333vw;
    overflow: hidden;
    transform: translate(-50%)
}

.prize-pool-wrap .marquee {
    position: relative;
    color: #ffef27;
    font-size: 4vw;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(0, 0, 0, .5)
}

.prize-pool-wrap .marquee .player-id,
.prize-pool-wrap .marquee .money {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
}

.prize-pool-wrap .marquee span {
    position: relative;
    top: -.5333333333vw;
    margin: 0 1.0666666667vw;
    color: #fff
}

.prize-pool-wrap .marquee .player-id {
    max-width: 26.6666666667vw
}

.prize-pool-wrap .marquee .money {
    max-width: 40vw
}

.prize-pool-wrap .prize-pool-money {
    position: absolute;
    right: 5.3333333333vw;
    bottom: 11.4666666667vw;
    color: #fff;
    font-family: Inconsolata, monospace;
    font-size: 7.4666666667vw;
    font-weight: 700;
    letter-spacing: 1.0666666667vw
}

.prize-pool-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.recently-played-wrap,
.my-favorites-wrap {
    position: relative;
    height: 100%
}

.recently-played-wrap .banner-wrap,
.my-favorites-wrap .banner-wrap {
    position: relative
}

.recently-played-wrap .banner-wrap img,
.my-favorites-wrap .banner-wrap img {
    width: 100%;
    height: auto;
    -webkit-mask: url(/mostplayfiles/images/slotgame/irregular-mask.svg) no-repeat center;
    mask: url(/mostplayfiles/images/slotgame/irregular-mask.svg) no-repeat center;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto
}

.recently-played-wrap .game-box,
.my-favorites-wrap .game-box {
    position: relative;
    top: -21.3333333333vw;
    width: 100%;
    height: auto;
    padding: 4.2666666667vw;
    overflow-y: auto
}

.recently-played-wrap .game-box .date-info,
.my-favorites-wrap .game-box .date-info {
    position: relative;
    top: 0;
    margin-bottom: 4.2666666667vw;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 500;
    letter-spacing: .5333333333vw;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(255, 255, 255, .8)
}

.recently-played-wrap .game-box .date-info:after,
.my-favorites-wrap .game-box .date-info:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 80%;
    height: .2666666667vw;
    transform: translateY(-50%);
    opacity: .08;
    background: #0e2749
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info,
.my-favorites-wrap .game-box:nth-of-type(2) .date-info {
    color: #fff;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(0, 0, 0, .8)
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info:after,
.my-favorites-wrap .game-box:nth-of-type(2) .date-info:after {
    background: transparent
}

.recently-played-wrap .list-loading,
.my-favorites-wrap .list-loading {
    top: -23.4666666667vw
}

.recently-played-wrap .select-date,
.my-favorites-wrap .select-date {
    display: grid;
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    width: 100%;
    height: 21.3333333333vw;
    border-top-left-radius: 2.6666666667vw;
    border-top-right-radius: 2.6666666667vw;
    background: #ffffff;
    box-shadow: 0 0 2.1333333333vw #0003;
    text-align: center
}

.recently-played-wrap .select-date .day,
.my-favorites-wrap .select-date .day {
    display: flex;
    z-index: 5000;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.recently-played-wrap .select-date .day.active .date,
.my-favorites-wrap .select-date .day.active .date {
    transition: color .5s ease-in-out;
    color: #fff
}

.recently-played-wrap .select-date span,
.my-favorites-wrap .select-date span {
    color: #0e274980;
    font-size: 3.7333333333vw
}

.recently-played-wrap .select-date .date,
.my-favorites-wrap .select-date .date {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    margin-top: 2.1333333333vw;
    transform: translate(50%);
    color: #0e2749;
    font-size: 3.7333333333vw;
    line-height: 7.2vw
}

.recently-played-wrap .select-date svg,
.my-favorites-wrap .select-date svg {
    position: absolute
}

.recently-played-wrap .target-wrap,
.my-favorites-wrap .target-wrap {
    position: absolute;
    z-index: 4000;
    bottom: 0;
    left: .2666666667vw;
    width: 100%;
    height: 16vw;
    filter: url(#goo)
}

.recently-played-wrap .target-wrap .ball-box,
.my-favorites-wrap .target-wrap .ball-box {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 14.2857142857%;
    height: 100%
}

.recently-played-wrap .target-wrap .ball-box .ball,
.my-favorites-wrap .target-wrap .ball-box .ball {
    position: absolute;
    width: 9.6vw;
    height: 9.6vw;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.recently-played-wrap .target-wrap .ball-box:first-child,
.my-favorites-wrap .target-wrap .ball-box:first-child {
    transform: translate(600%)
}

.recently-played-wrap .target-wrap .ball-box.big,
.my-favorites-wrap .target-wrap .ball-box.big {
    transform: translate(var(--date-ball-translateX));
    transition: transform .5s ease-in-out .35s;
    pointer-events: none
}

.recently-played-wrap .game-grid li:before,
.my-favorites-wrap .game-grid li:before {
    background: linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, #ebebeb 100%)
}

.my-favorites-wrap .game-box {
    position: absolute;
    top: 53.3333333333vw
}

.animate-jello {
    animation: jello-horizontal .9s both
}

.pop-slot-details-filter,
.pop-casino-details-filter {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 80vh;
    padding: 4.2666666667vw 4.2666666667vw 14.9333333333vw;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #ffffff
}

.pop-slot-details-filter.active,
.pop-casino-details-filter.active {
    bottom: 0
}

.pop-slot-details-filter .category h4,
.pop-slot-details-filter .category span,
.pop-slot-details-filter .category li,
.pop-casino-details-filter .category h4,
.pop-casino-details-filter .category span,
.pop-casino-details-filter .category li {
    opacity: 1
}

.pop-slot-details-filter .category li.active,
.pop-casino-details-filter .category li.active {
    position: relative;
    z-index: 0
}

.pop-slot-details-filter .pop-btn-group,
.pop-casino-details-filter .pop-btn-group {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 2.1333333333vw #0003
}

.pop-slot-details-filter .pop-btn-group .btn-left,
.pop-slot-details-filter .pop-btn-group .btn-right,
.pop-casino-details-filter .pop-btn-group .btn-left,
.pop-casino-details-filter .pop-btn-group .btn-right {
    position: relative;
    width: 50%;
    height: 14.9333333333vw;
    background: #f4b600;
    color: #0e2749;
    font-weight: 500;
    line-height: 14.9333333333vw;
    text-align: center
}

.pop-slot-details-filter .pop-btn-group .btn-left,
.pop-casino-details-filter .pop-btn-group .btn-left {
    border-top-left-radius: 2.6666666667vw;
    color: #0e274980
}

.pop-slot-details-filter .pop-btn-group .btn-left:after,
.pop-casino-details-filter .pop-btn-group .btn-left:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: .2666666667vw;
    height: calc(100% - 6.4vw);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .1098039216)
}

.pop-slot-details-filter .pop-btn-group .btn-right,
.pop-casino-details-filter .pop-btn-group .btn-right {
    border-top-right-radius: 2.6666666667vw
}

header.empty .header-right-btn-group {
    display: none
}

.game-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    text-align: center
}

.game-empty-box video {
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    margin-bottom: 4.2666666667vw;
    opacity: .7
}

.game-empty-box h5 {
    margin-bottom: 2.1333333333vw;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.game-empty-box h6 {
    margin-bottom: 6.4vw;
    opacity: .5;
    color: #0e2749;
    font-size: 3.2vw
}

.game-empty-box .button {
    height: 9.6vw;
    line-height: 9.6vw;
    font-size: 3.4666666667vw
}

.my-favorites-wrap .game-empty-box {
    margin-top: 10.6666666667vw
}

.my-favorites-wrap .game-empty-box .icon-no-data {
    width: 21.3333333333vw;
    height: 21.3333333333vw
}

.recommend-box {
    padding: 4.2666666667vw
}

.recommend-box .title {
    display: flex;
    align-items: center;
    height: 4.2666666667vw;
    margin: 4.2666666667vw;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.recommend-box .title:before {
    content: "";
    position: absolute;
    left: 4.2666666667vw;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.recommend-box .title:after {
    content: "";
    position: absolute;
    right: 4.2666666667vw;
    width: 50%;
    height: .2666666667vw;
    opacity: .08;
    background: #0e2749
}

@keyframes effect-2 {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes scale-up-center {
    0% {
        transform: rotate(0) scale(.6);
        opacity: 0
    }
    to {
        transform: rotate(360deg) scale(1);
        opacity: 1
    }
}

@keyframes jello-horizontal {
    0% {
        transform: scaleZ(1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
    to {
        transform: scaleZ(1)
    }
}

@keyframes data-loading {
    0%,
    50%,
    to {
        transform: scale(1)
    }
    25% {
        transform: scale(.6)
    }
    75% {
        transform: scale(1.4)
    }
}

.casino-game {
    top: 4.2666666667vw;
    margin-bottom: 0;
    padding-bottom: 0
}

.casino-game .banner {
    margin-bottom: 6.6666666667vw
}

.casino-game .game-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.casino-game .game-title .filter {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 13.3333333333vw;
    height: 13.3333333333vw
}

.casino-game .game-title .filter:before {
    content: "";
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background-color: #0e2749;
    -webkit-mask: url(/mostplayfiles/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
    mask: url(/mostplayfiles/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto
}

.casino-game .game-title .filter .badge {
    display: flex;
    position: absolute;
    top: 1.0666666667vw;
    right: .5333333333vw;
    align-items: center;
    justify-content: center;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    border-radius: 50%;
    background: #cd1818;
    color: #fff;
    font-size: 3.4666666667vw;
    font-weight: 500
}

.pop-casino-details-filter {
    padding: 8vw 4.2666666667vw 14.9333333333vw
}

.pop-casino-details-filter .recently-played,
.pop-casino-details-filter .my-favorites {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 48%;
    height: 15.4666666667vw;
    margin-bottom: 6.4vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-decoration: none
}

.pop-casino-details-filter .recently-played:before,
.pop-casino-details-filter .my-favorites:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    height: 15.4666666667vw;
    mix-blend-mode: overlay
}

.pop-casino-details-filter .recently-played {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.pop-casino-details-filter .recently-played:before {
    background: url(/mostplayfiles/images/slotgame/recently-played.png) no-repeat center/contain
}

.pop-casino-details-filter .my-favorites {
    float: right;
    background: linear-gradient(0deg, #3976ff 0%, #054ea1 100%)
}

.pop-casino-details-filter .my-favorites:before {
    background: url(/mostplayfiles/images/slotgame/my-favorites.png) no-repeat center/contain
}

.iplimit-card-wrap {
    display: block;
    height: auto;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .8vw 1.3333333333vw #ebebeb1a;
    font-size: 0;
    word-wrap: break-word;
    word-break: break-all
}

.iplimit-card-wrap .top-inner,
.iplimit-card-wrap .bottom-inner {
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.iplimit-card-wrap .top-inner h3 {
    font-family: "Source Sans 3", sans-serif;
    font-size: 12.8vw;
    font-weight: 700;
    line-height: normal
}

.iplimit-card-wrap .top-inner h4 {
    margin-bottom: 8vw;
    font-size: 4.8vw
}

.games-empty-container {
    display: inline-block;
    position: relative;
    width: calc(100% - 4.2666666667vw);
    margin: 0 2.1333333333vw 12.8vw;
    padding: 4.2666666667vw;
    background: #ffffff;
    text-align: center;
    vertical-align: middle
}

.games-empty-container .bottom-inner {
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.games-empty-container .top-inner {
    width: 100%;
    margin: auto;
    text-align: center
}

.games-empty-container .top-inner h3,
.games-empty-container .top-inner h4 {
    color: #0e2749
}

.games-empty-container .top-inner h3 {
    display: inline-block;
    font-size: 18.1333333333vw;
    vertical-align: middle
}

.games-empty-container .top-inner h4 {
    margin-bottom: 15px;
    opacity: .8;
    line-height: 1.8
}

.content-full-height {
    text-align: center
}

.logo-box {
    display: flex;
    position: relative;
    width: 53.3333333333vw;
    height: 12vw;
    margin: 8.5333333333vw auto;
    overflow: hidden;
    border: 0;
    background: no-repeat center center/contain
}

.register-content {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 2.6666666667vw
}

.register-content p {
    color: #0e2749;
    font-size: 4.8vw;
    text-align: center
}

.register-content .button {
    width: auto;
    font-size: 5.3333333333vw
}

.register-content .button:not(.btn-vcode) {
    height: 12.8vw;
    margin: 4.2666666667vw;
    line-height: 12.8vw
}

.register-content .verification-wrap input {
    flex: 1;
    margin-right: 2.6666666667vw
}

.register-content .tab-btn-page {
    position: fixed;
    top: 13.3333333333vw
}

.register-content .tab-content-page {
    min-height: 90vh;
    padding-top: 13.3333333333vw
}

.phone-area-code {
    flex: 0 0 32%;
    margin-right: 2.1333333333vw
}

.phone-area-code .btn-select span {
    max-width: 19.2vw;
    overflow: hidden;
    font-family: "Source Sans 3", sans-serif;
    font-size: 4.8vw
}

.phone-area-code .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 2.1333333333vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.social-area-code {
    flex: 0 0 48%;
    margin-right: 2.1333333333vw
}

.social-area-code .btn-select span {
    max-width: 19.2vw;
    overflow: hidden
}

.social-area-code .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 2.1333333333vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.phone-info {
    display: flex;
    flex-flow: row nowrap;
    width: 100%
}

.vodiapicker {
    display: none
}

.lang-select {
    position: relative;
    font-size: 3.7333333333vw
}

.phone-code-list,
.currency-code-list,
.social-code-list {
    position: absolute;
    z-index: 135;
    top: 12vw;
    left: 0;
    width: 100%;
    max-height: 58.6666666667vw;
    padding: 0 1.3333333333vw;
    overflow: scroll;
    border-radius: 1.3333333333vw;
    background: #f2f2f2;
    box-shadow: 0 .5333333333vw 1.0666666667vw #345ece26
}

.phone-code-list li,
.currency-code-list li,
.social-code-list li {
    margin-bottom: 0;
    padding-top: 1.3333333333vw;
    padding-bottom: 1.3333333333vw;
    list-style: none
}

.phone-code-list img,
.currency-code-list img,
.social-code-list img {
    margin: 1.3333333333vw;
    border-radius: 50%
}

.phone-code-list span,
.currency-code-list span,
.social-code-list span {
    color: #0e2749;
    font-size: 3.2vw
}

.phone-code-list img,
.social-code-list img,
.btn-select img {
    width: 8vw;
    border-radius: 50%;
    background: #f4b600
}

.phone-code-list span,
.social-code-list span,
.btn-select span {
    margin-left: 2.1333333333vw;
    font-family: "Source Sans 3", sans-serif
}

.phone-code-list img,
.phone-code-list span,
.social-code-list img,
.social-code-list span,
.btn-select img,
.btn-select span {
    display: inline-block;
    vertical-align: middle
}

.phone-code-list-group,
.currency-code-list-group,
.social-code-list-group {
    display: none;
    width: 100%;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #345ece26
}

.open {
    display: show !important
}

.btn-select {
    position: relative;
    width: 100%;
    height: 11.7333333333vw;
    padding: 0 0 0 2.1333333333vw;
    border: 0;
    border-radius: 2.6666666667vw;
    background: #f2f2f2;
    color: #0e2749;
    font-size: 3.2vw
}

.btn-select li {
    padding-bottom: 0;
    float: left;
    list-style: none
}

.btn-select:hover li {
    margin-left: 0
}

.btn-select:focus {
    outline: none
}

.btn-select:disabled {
    border-bottom: .2666666667vw solid rgba(255, 255, 255, .5);
    border-radius: 0;
    background: none
}

.vcode-group .btn-vcode {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%
}

.resend-set {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 4.2666666667vw;
    color: #4b6cb6;
    font-size: 3.2vw;
    line-height: 11.7333333333vw
}

.resend-set.active {
    display: inline-block
}

.btn-vcode {
    height: 11.7333333333vw;
    padding: 0 2.6666666667vw;
    transition: .3s;
    background: #4b6cb6;
    font-size: 3.4666666667vw;
    line-height: 11.7333333333vw;
    text-shadow: none
}

.btn-vcode>i,
.btn-vcode p {
    display: inline-block;
    text-align: center;
    vertical-align: middle
}

.btn-vcode p {
    padding: 0;
    color: #fff;
    font-size: 4.2666666667vw;
    line-height: 10.6666666667vw
}

.btn-vcode p span {
    display: none;
    width: .8vw;
    height: .8vw;
    margin-left: .8vw;
    border-radius: 50%;
    background-color: #fff
}

.btn-vcode.active {
    padding: 0;
    animation: btnmove .4s forwards ease-in
}

.btn-vcode.active .line {
    animation: none;
    opacity: 0
}

.btn-vcode.active.sending {
    opacity: 0
}

@keyframes btnmove {
    0% {
        right: 0%
    }
    99% {
        right: -100%
    }
    to {
        width: 0
    }
}

.btn-vcode.resend {
    padding: 0 2.6666666667vw;
    animation: resend .3s forwards ease-in
}

.btn-vcode.resend .svg-mail {
    transform-origin: left;
    animation: mail .6s ease-in-out alternate-reverse infinite
}

@keyframes mail {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(1.1)
    }
}

@keyframes resend {
    0% {
        right: -100%
    }
    to {
        right: 0%
    }
}

.btn-vcode.sending {
    background-color: #6f8ac5;
    pointer-events: none
}

.btn-vcode.sending .svg-phone {
    left: 0;
    opacity: 1
}

.btn-vcode.sending .svg-mail {
    width: 8vw;
    -webkit-mask: url(/mostplayfiles/images/icon-set/icon-mail-type01.svg) no-repeat center/30%;
    mask: url(/mostplayfiles/images/icon-set/icon-mail-type01.svg) no-repeat center/30%
}

.btn-vcode.sending .line {
    animation: none;
    opacity: 0
}

.btn-vcode.sending p span {
    display: inline-block
}

.btn-vcode.mail-rotate .svg-mail {
    transform-origin: center;
    animation: mailani .3s ease-out alternate-reverse infinite
}

@keyframes mailani {
    0% {
        transform: rotate(-5deg)
    }
    to {
        transform: rotate(5deg)
    }
}

.sms-svg-group {
    display: inline-block;
    position: relative;
    left: 0;
    width: auto;
    height: 10.6666666667vw;
    vertical-align: middle
}

.sms-svg-group .svg-sms {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(1)
}

.sms-svg-group .path-sms {
    fill: transparent
}

.svg-phone {
    display: block;
    position: absolute;
    bottom: 1.3333333333vw;
    left: -2.6666666667vw;
    width: 8vw;
    height: 8vw;
    transition: .3s;
    opacity: 0;
    background: #ffffff;
    -webkit-mask: url(/images/v2/h5/img-template/icon-set/icon-phone-type01.svg) no-repeat center/contain;
    mask: url(/images/v2/h5/img-template/icon-set/icon-phone-type01.svg) no-repeat center/contain
}

.svg-mail-group {
    width: 8vw;
    height: 100%
}

.svg-mail-group .line {
    position: absolute;
    top: 50%;
    left: -3.4666666667vw;
    width: 3.2vw;
    transform: translateY(-49%)
}

.svg-mail-group .line li {
    width: 100%;
    height: .5333333333vw;
    margin: .2666666667vw 0;
    float: right;
    border-radius: .8vw;
    background: #ffffff
}

.svg-mail-group .line li:first-child {
    width: 70%
}

.svg-mail-group .line li:last-child {
    width: 50%
}

.svg-mail-outer,
.svg-mail {
    height: 100%;
    transition: .3s
}

.svg-mail {
    height: 100%;
    background: #ffffff;
    -webkit-mask: url(/images/v2/h5/img-template/icon-set/icon-mail-type01.svg) no-repeat center/50%;
    mask: url(/images/v2/h5/img-template/icon-set/icon-mail-type01.svg) no-repeat center/50%
}

.register-tip {
    display: inline-block;
    position: relative;
    left: 50%;
    margin-top: 4.2666666667vw;
    transform: translate(-50%, -50%);
    border: .2666666667vw solid #f4b600;
    color: #f4b600;
    border-radius: .8vw;
    line-height: 0
}

.register-tip label,
.register-tip span {
    display: inline-block;
    padding: 0 1.0666666667vw;
    line-height: 1.2;
    vertical-align: middle
}

.register-tip label {
    background: #f4b600;
    color: #0e2749
}

.forgetpassword .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 2.6666666667vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.phone-wrap,
.social-wrap {
    display: flex;
    flex-flow: row nowrap;
    border-radius: 2.6666666667vw
}

.phone-wrap .clear,
.social-wrap .clear {
    top: 0
}

.phone-wrap input:-webkit-autofill,
.phone-wrap input:-webkit-autofill:hover,
.phone-wrap input:-webkit-autofill:focus,
.social-wrap input:-webkit-autofill,
.social-wrap input:-webkit-autofill:hover,
.social-wrap input:-webkit-autofill:focus {
    box-shadow: 0 0 0 50px #f2f2f2 inset !important
}

.text-box {
    padding: 0 4.2666666667vw 4.2666666667vw;
    color: #6481c0;
    font-size: 3.4666666667vw;
    line-height: 1.2;
    text-align: center
}

.text-box .text {
    display: inline-block
}

.text-box .btn {
    display: inline-block;
    color: #a4b5da;
    margin-left: 2.1333333333vw;
    text-decoration: underline
}

.text-box .btn:active {
    opacity: .8
}

.reguster-success-body {
    background: #333333
}

.register-success-cont .btn-secondary {
    color: #0e2749
}

.reguster-success-fast-body {
    display: flex;
    flex-direction: inherit;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    text-align: center
}

.reguster-success-fast-body .register-success-cont {
    width: 90%
}

.reguster-success-fast-body .register-success-cont .top-inner h3,
.reguster-success-fast-body .register-success-cont .top-inner h4 {
    color: #09ac6b
}

.reguster-success-fast-body .register-success-cont .top-inner>p {
    color: #555
}

.reguster-success-fast-body .register-success-btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%
}

.reguster-success-fast-body .register-success-btn>.btn-default {
    width: 100%;
    margin: 0
}

.reguster-success-fast-body .register-success-btn .button {
    flex: 1 1 auto;
    margin: 0 1.3333333333vw 2.6666666667vw;
    border: 0
}

.register-success-wrap,
.register-fail-wrap,
.pop-biometric-success {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 4.2666666667vw;
    transform: translate(-50%, -50%);
    border-radius: 2.6666666667vw;
    background: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 .5333333333vw .5333333333vw .2666666667vw #0000001a, 0 1.0666666667vw 1.0666666667vw .2666666667vw #0000001a, 0 2.1333333333vw 2.1333333333vw .2666666667vw #0000001a, 0 4.2666666667vw 4.2666666667vw .2666666667vw #0000001a, 0 8.5333333333vw 8.5333333333vw .2666666667vw #0000001a;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.register-success-wrap:before,
.register-fail-wrap:before,
.pop-biometric-success:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.register-success-cont,
.register-fail-cont,
.biometric-success-cont {
    display: inline-block;
    width: 98%;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle
}

.register-success-cont .top-inner h3,
.register-fail-cont .top-inner h3,
.biometric-success-cont .top-inner h3 {
    color: #09ac6b;
    font-family: "Source Sans 3", sans-serif;
    font-size: 10.6666666667vw
}

.register-success-cont .top-inner h4,
.register-fail-cont .top-inner h4,
.biometric-success-cont .top-inner h4 {
    margin-bottom: 2.1333333333vw;
    color: #0e2749;
    font-size: 4.8vw;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all
}

.register-success-cont .top-inner p,
.register-fail-cont .top-inner p,
.biometric-success-cont .top-inner p {
    max-height: 42.6666666667vw;
    margin-bottom: 4.2666666667vw;
    padding: 1.0666666667vw 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: #0e2749;
    font-size: 4vw;
    line-height: 1.5;
    word-break: break-word
}

.register-success-cont .top-inner .link,
.register-fail-cont .top-inner .link,
.biometric-success-cont .top-inner .link {
    display: block;
    color: #f4a000;
    text-decoration: underline;
    white-space: nowrap
}

.register-success-cont .btn-default,
.register-success-cont .btn-cancel,
.register-fail-cont .btn-default,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-default,
.biometric-success-cont .btn-cancel {
    display: inline-block;
    width: auto;
    min-width: 40%;
    height: 12vw;
    padding: 0 2.6666666667vw;
    line-height: 12vw;
    text-decoration: none
}

.register-success-cont .btn-secondary,
.register-fail-cont .btn-secondary,
.biometric-success-cont .btn-secondary {
    margin-right: 2.6666666667vw
}

.register-success-cont .btn-cancel,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-cancel {
    background: #555555
}

.register-fail-cont .top-inner h3 {
    color: #ff5757
}

.register-fail-cont .top-inner>p {
    padding: 0
}

.comfirm-info {
    text-align: left
}

.btn-edit-group,
.register-success-btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%
}

.btn-edit-group .button,
.register-success-btn .button {
    flex: 1 1 auto;
    margin: 0 1.0666666667vw 2.1333333333vw;
    border: 0
}

.success-checkmark {
    width: 24vw;
    height: 25.3333333333vw;
    margin: 0 auto;
    overflow: hidden
}

.success-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid #4caf50;
    border-radius: 50%
}

.success-checkmark .check-icon:before {
    top: .8vw;
    left: -.5333333333vw;
    width: 8vw;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667vw 0 0 26.6666666667vw
}

.success-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

.success-checkmark .check-icon:before,
.success-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667vw;
    transform: rotate(-45deg);
    background: transparent
}

.success-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    height: 1.3333333333vw;
    border-radius: .5333333333vw;
    background-color: #4caf50
}

.success-checkmark .check-icon .icon-line.line-tip {
    top: 12.2666666667vw;
    left: 3.7333333333vw;
    width: 6.6666666667vw;
    transform: rotate(45deg);
    animation: icon-line-tip .7s
}

.success-checkmark .check-icon .icon-line.line-long {
    top: 10.1333333333vw;
    right: 2.1333333333vw;
    width: 12.5333333333vw;
    transform: rotate(-45deg);
    animation: icon-line-long .7s
}

.success-checkmark .check-icon .icon-circle {
    position: absolute;
    z-index: 10;
    top: -1.0666666667vw;
    left: -1.0666666667vw;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid rgba(76, 175, 80, .5);
    border-radius: 50%
}

.success-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333vw;
    left: 6.9333333333vw;
    width: 1.3333333333vw;
    height: 22.6666666667vw;
    transform: rotate(-45deg);
    background-color: transparent
}

.fail-checkmark {
    width: 24vw;
    height: 25.3333333333vw;
    margin: 0 auto;
    overflow: hidden
}

.fail-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid #ff5959;
    border-radius: 50%
}

.fail-checkmark .check-icon:before {
    top: .8vw;
    left: -.5333333333vw;
    width: 8vw;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667vw 0 0 26.6666666667vw
}

.fail-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

.fail-checkmark .check-icon:before,
.fail-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667vw;
    transform: rotate(-45deg);
    background: transparent
}

.fail-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 0;
    height: 1.3333333333vw;
    transform-origin: left;
    border-radius: .5333333333vw;
    background-color: #ff5959
}

.fail-checkmark .check-icon .icon-line.line-tip {
    transform: rotate(45deg) translate(-50%);
    animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-line.line-long {
    transform: rotate(-45deg) translate(-50%);
    animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-circle {
    position: absolute;
    z-index: 10;
    top: -1.0666666667vw;
    left: -1.0666666667vw;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid rgba(255, 89, 89, .5);
    border-radius: 50%
}

.fail-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333vw;
    left: 6.9333333333vw;
    width: 1.3333333333vw;
    height: 22.6666666667vw;
    transform: rotate(-45deg);
    background-color: transparent
}

@keyframes icon-line {
    0% {
        width: 0
    }
    to {
        width: 13.3333333333vw
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    to {
        transform: rotate(-405deg)
    }
}

@keyframes icon-line-tip {
    0% {
        top: 5.0666666667vw;
        left: .2666666667vw;
        width: 0
    }
    54% {
        top: 5.0666666667vw;
        left: .2666666667vw;
        width: 0
    }
    70% {
        top: 9.8666666667vw;
        left: -2.1333333333vw;
        width: 13.3333333333vw
    }
    84% {
        top: 12.8vw;
        left: 5.6vw;
        width: 4.5333333333vw
    }
    to {
        top: 12vw;
        left: 3.7333333333vw;
        width: 6.6666666667vw
    }
}

@keyframes icon-line-long {
    0% {
        top: 14.4vw;
        right: 12.2666666667vw;
        width: 0
    }
    65% {
        top: 14.4vw;
        right: 12.2666666667vw;
        width: 0
    }
    84% {
        top: 9.3333333333vw;
        right: 0;
        width: 14.6666666667vw
    }
    to {
        top: 10.1333333333vw;
        right: 2.1333333333vw;
        width: 12.5333333333vw
    }
}

.promotion {
    width: 100%;
    height: auto
}

.promotion .promotion-main {
    padding: 0 2.1333333333vw
}

.promotion .prompt {
    margin: 4.2666666667vw 0;
    font-size: 3.4666666667vw;
    text-align: center
}

.content-style h3 {
    margin-bottom: 1.0666666667vw;
    overflow: hidden;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-style h4 {
    margin-bottom: 2.1333333333vw;
    font-size: 3.7333333333vw;
    font-weight: 700
}

.content-style p {
    min-height: 6.6666666667vw;
    margin: 1.0666666667vw 0;
    font-size: 3.7333333333vw;
    line-height: 1.5
}

.content-style ol,
.content-style ul {
    margin: 2.6666666667vw 0
}

.content-style ol li,
.content-style ul li {
    margin: 0 0 1.3333333333vw;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw
}

.content-style ol li {
    margin: 0 0 1.3333333333vw 4vw;
    list-style-type: decimal;
    text-indent: 0
}

.content-style .table {
    width: 100%;
    margin-bottom: 4vw;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 2.6666666667vw;
    text-align: left;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.content-style table tbody {
    border-radius: 2.6666666667vw
}

.content-style table th,
.content-style table td {
    width: 20%;
    padding: 2.1333333333vw 4.2666666667vw;
    border: .2666666667vw solid rgba(255, 255, 255, .2);
    font-size: 3.4666666667vw;
    line-height: 4.2666666667vw;
    text-align: left
}

.content-style table td {
    background: #ebebeb;
    color: #0e2749
}

.content-style table th {
    background: #054ea1;
    color: #f4b600
}

.content-style .times {
    display: flex;
    align-items: center;
    position: relative;
    color: #0e274980;
    font-size: 3.4666666667vw
}

.content-style .times i {
    display: inline-block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.3333333333vw;
    background-color: #0e274980;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 80%;
    mask-size: 80%
}

.content-style .times span {
    text-align: center
}

.content-style .form-wrap {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 2.6666666667vw;
    overflow-x: scroll;
    border-radius: 2.6666666667vw;
    background: #ffffff;
    -webkit-overflow-scrolling: touch
}

.content-style .form-wrap .arrow {
    position: absolute;
    top: 50%;
    right: .5333333333vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    animation: table-arrow .5s infinite alternate;
    background: #f4b600;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 50%;
    mask-size: 50%
}

.content-style .form-wrap .form-wrap-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

.content-style .form-wrap .form-wrap-col div {
    display: flex;
    width: -webkit-fill-available;
    padding: 2.6666666667vw 2.1333333333vw;
    color: #0e2749;
    font-size: 3.2vw;
    white-space: nowrap
}

.content-style .game-platform ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 2.6666666667vw
}

.content-style .game-platform li {
    flex: 0 0 23%;
    margin-right: 2%;
    font-weight: 500
}

.content-style .game-platform img {
    width: 100%;
    height: auto
}

.content-style .button {
    width: 100%;
    height: 9.6vw;
    margin-top: 2.1333333333vw;
    font-size: 3.7333333333vw;
    line-height: 9.6vw
}

.content-style .button .toggle {
    display: inline-block;
    position: relative;
    width: 4vw;
    height: 4vw;
    margin-right: .8vw;
    transition: all .3s;
    border-radius: 4vw;
    background-color: #fff;
    vertical-align: middle
}

.content-style .button .toggle:before,
.content-style .button .toggle:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.1333333333vw;
    height: .4vw;
    transform: translate(-50%, -50%);
    border-radius: .5333333333vw;
    background-color: #f4b600
}

.content-style .button .toggle:after {
    width: .4vw;
    height: 2.1333333333vw
}

.content-style .button-box .button {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    color: #fff;
    overflow: hidden
}

.content-style .button-box .button:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 100%
}

.content-style .button-box .button+.button {
    margin-left: 2.6666666667vw
}

.content-style .button-box .button__attend {
    background: #00cc66
}

.content-style .button-box .button__request {
    background: #e20000;
    color: #878e92
}

.content-style .button-box .button__joined {
    background: #f4b600;
    color: #878e92
}

.content-style .button-box .button__apply {
    background: #054ea1
}

.promotion-toggle {
    height: auto
}

.promotion-toggle.active .text-main {
    max-height: 800vw
}

.promotion-toggle.active .text-main h3,
.promotion-toggle.active .text-main p {
    overflow: auto;
    text-overflow: inherit;
    white-space: normal
}

.promotion-toggle.active .button .toggle {
    transform: rotate(225deg)
}

.promotion-box {
    position: relative;
    width: 100%;
    margin-bottom: 2.1333333333vw;
    overflow: hidden;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    color: #0e2749cc;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.promotion-box__tag {
    display: block;
    position: absolute;
    z-index: 2;
    top: 2.6666666667vw;
    left: 0;
    border-radius: 0 1.3333333333vw 1.3333333333vw 0;
    padding: 0 2.1333333333vw;
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
    text-align: center;
    text-shadow: 0 .2666666667vw .2666666667vw rgba(244, 182, 0, .2)
}

.promotion-box__tag:before,
.promotion-box__tag:after {
    content: "";
    position: absolute;
    left: 0;
    width: 1.3333333333vw;
    height: 1.3333333333vw
}

.promotion-box__tag:before {
    top: -5px
}

.promotion-box__tag:after {
    display: none
}

html.is-mobile .promotion-box__tag:after {
    display: block;
    bottom: -5px;
    transform: rotateX(180deg)
}

.promotion-box .tag--free {
    background-color: #ff777c;
    color: #fff
}

.promotion-box .tag--free:before,
.promotion-box .tag--free:after {
    background: radial-gradient(circle at right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 71%, #ff777c 0%)
}

.promotion-box .tag--bonus {
    background-color: #40d0cb;
    color: #fff
}

.promotion-box .tag--bonus:before,
.promotion-box .tag--bonus:after {
    background: radial-gradient(circle at right top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 71%, #40d0cb 0%)
}

.promotion-box .pic {
    position: relative;
    width: 100%;
    height: 31.4666666667vw;
    background-color: #ddd
}

.promotion-box .pic img {
    display: block;
    width: 100%;
    height: 100%
}

.promotion-box .cutoff {
    position: absolute;
    right: 2.1333333333vw;
    bottom: 2.1333333333vw;
    width: auto;
    height: 6.6666666667vw;
    padding: 0 2.1333333333vw;
    border-radius: .5333333333vw;
    background: #054ea1;
    color: #fff;
    font-size: 3.2vw;
    line-height: 6.6666666667vw;
    text-align: center
}

.promotion-box .promotion-box-inner {
    display: block;
    width: 100%;
    height: auto;
    padding: 3.2vw
}

.promotion-box .promotion-box-inner .text-main {
    display: block;
    width: 100%;
    max-height: 12.8vw;
    overflow: hidden;
    transition: all .6s
}

.button-box {
    display: flex;
    overflow: hidden
}

.promo-code-form {
    margin-bottom: 4.2666666667vw
}

.promo-code-form .input-group {
    height: 8vw;
    padding-bottom: 0;
    border-radius: 1.3333333333vw
}

.promo-code-form .input-group .promo-code-add-btn {
    position: absolute;
    text-align: center;
    line-height: 8vw;
    border-radius: 0 3px 3px 0;
    opacity: 1;
    background-color: #f4b600;
    color: #fff;
    inset: 0 0 0 auto;
    width: 12vw;
    height: 8vw
}

.promo-code-form .input-group input {
    height: 8vw;
    background-color: #e6e6e6;
    color: #0e2749;
    border-color: #f2f2f2
}

.promo-code-form .input-group input::placeholder {
    color: #b8b8b8
}

.promo-code-form .input-group input:focus {
    border-color: #f4b600
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.custom-promo-code-form {
    margin-bottom: 3.7333333333vw
}

.custom-promo-code-form .promo-code-title {
    cursor: pointer;
    opacity: 1;
    display: block;
    color: #0e2749;
    margin-bottom: 2.6666666667vw;
    font-size: 3.7333333333vw;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-title .icon-arrow {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    padding-top: .5333333333vw;
    margin-left: 2.6666666667vw;
    transition: transform .3s;
    background: #0e2749
}

.custom-promo-code-form .promo-code-title.fold .icon-arrow {
    transform: rotateX(180deg)
}

.custom-promo-code-form .promo-code-title:hover {
    opacity: .7
}

.custom-promo-code-form .input-group {
    height: 13.3333333333vw;
    padding-bottom: 0;
    border-radius: 1.3333333333vw;
    font-size: 3.7333333333vw;
    margin-bottom: 2.6666666667vw;
    transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    padding: 0 1.3333333333vw;
    opacity: 1;
    background-color: #f4b600;
    color: #fff;
    inset: 0 0 0 auto;
    min-width: 18.6666666667vw;
    max-width: 37.3333333333vw;
    height: 13.3333333333vw;
    transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn span {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.custom-promo-code-form .input-group .promo-code-add-btn:hover {
    opacity: .7
}

.custom-promo-code-form .input-group .icon-loader {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    background: #ffffff;
    animation: spin 2s linear infinite
}

.custom-promo-code-form .input-group input {
    height: 13.3333333333vw;
    padding: 0 3.2vw;
    transition: height .3s;
    font-size: 3.7333333333vw;
    background-color: #e6e6e6;
    color: #0e2749
}

.custom-promo-code-form .input-group input:focus {
    padding: 0 2.9333333333vw;
    border: .2666666667vw solid #f4b600
}

.custom-promo-code-form .input-group input::placeholder {
    font-size: 3.7333333333vw
}

.custom-promo-code-form .input-group.fold {
    height: 0vw
}

.custom-promo-code-form .input-group.fold input {
    height: 0vw;
    border: 0
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn {
    height: 0vw
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn span,
.custom-promo-code-form .input-group.fold .promo-code-msg {
    display: none
}

.custom-promo-code-form .promo-code-msg {
    font-size: 3.7333333333vw;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-msg .icon {
    flex-shrink: 0;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.6vw;
    padding: .5333333333vw;
    display: none
}

.custom-promo-code-form .promo-code-msg.error {
    color: #ff5757
}

.custom-promo-code-form .promo-code-msg.error .icon-error {
    display: block;
    background: #ff5757
}

.custom-promo-code-form .promo-code-msg.success {
    color: #09ac6b
}

.custom-promo-code-form .promo-code-msg.success .icon-success {
    display: block;
    background: #09ac6b
}

.custom-promo-code-form .icon {
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 90%;
    mask-size: 90%
}