/* Transition */
.modal-enter-active,
.modal-leave-active {
    transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
    opacity: 0;
}

.modal-enter-to,
.modal-leave-from {
    opacity: 1;
}

.dropdown-content-enter-active,
.dropdown-content-leave-active {
    @apply transition-all duration-300 ease-in-out;
}

.dropdown-content-enter,
.dropdown-content-leave-to {
    @apply opacity-0 -translate-y-1;
}

.dropdown-content-enter-from {
    @apply opacity-0;
}

.rotate180-active {
    transition: all 0.3s;
}

.slide-right-enter-active,
.slide-right-leave-active {
    transition: transform 0.5s;
}

.slide-right-enter-from,
.slide-right-leave-to {
    transform: translateX(100%);
}

/* app */

#app .wap-page {
    height: 100%;
}

.bg-content-sectionn {
    position: relative;
    width: 100%;
}

/* Login Loader */
.dt-loader {
    background-image: url('/images/dt-loader-animate.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.m-loader {
    background-image: url('/images/m-loader-animate.gif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Login */
.register-panel .register-box .content img.logo-img {
    width: 50px;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    padding: initial;
    background: transparent;
}

.mobile-login .input-item {
    position: relative;
}

#app .login-page-box .login-popup .btn-item>button .btn-login {
    margin-top: -0.04rem;
    font-family: nunito-bold;
    color: #fff;
    width: 1.1rem;
    height: 0.38rem;
    cursor: pointer;
    background-color: #001b42;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 0.05rem;
    border-bottom-right-radius: 0.05rem;
    text-transform: uppercase;
    font-size: .16rem;
    line-height: .18rem;
}

#app .login-page-box .login-popup .btn-item>button .btn-login:hover,
#app .login-page-box .login-popup .btn-item>button .btn-login:focus,
#app .login-page-box .login-popup .btn-item>button .btn-login:active {
    background-color: #022e6d
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .btn-next {
    background: var(--blue-gradient);
    color: #ffffff;
    margin-top: 0;
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .msg-error {
    margin-bottom: 0.4rem;
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .to-forget {
    text-decoration: none;
    font-weight: bold;
}

html body input#remember_me {
    -webkit-appearance: checkbox;
    appearance: checkbox;
}

#app .login-page-box .dismissPopup {
    z-index: 9;
}

#app .login-page-box .login-popup {
    /* background-image: url(/images/login/login-page-bg.webp); */
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    background-color: #fff;
    height: auto;
}

/* #app .login-page-box .login-popup .icon-logo2 {
    width: 2.5rem;
    height: 0.52rem;
    margin: 0.57rem 0 0.21rem;
} */

#app .login-page-box .login-popup .icon-close2 {
    filter: grayscale(1) brightness(0.5);
}

#app .login-page-box .login-popup .title {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #000;
    line-height: 0;
    width: 4rem;
    margin-left: auto;
    margin-right: auto;
    font-size: .16rem;
}

#app .login-page-box .login-popup .title span {
    background: #fff;
    padding: 0 0.1rem;
}

#app .login-page-box .login-popup .partner {
    height: 0.9rem;
    margin-bottom: 0.5rem;
}

#app .login-page-box .login-popup .partner img {
    width: .8rem;
    height: .75rem;
    object-fit: contain;
    margin: 0 0.02rem;
}

#app .login-page-box .login-popup .msg-box {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

#app .login-page-box .login-popup .polla {
    position: absolute;
    left: -1rem;
    bottom: 0;
    width: 2.75rem;
}

#app .login-page-box .login-popup .vallent {
    position: absolute;
    left: -.85rem;
    bottom: 0;
    width: 2.3rem;
}

#app .login-page-box .login-popup .wow {
    position: absolute;
    right: -1.16rem;
    bottom: 0;
    width: 3.25rem;
}

.login-popup button {
    border: 0;
}

.register-panel .register-box .title {
    background: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 5px solid;
}

html body .mobile-register.mobile-login .register-panel .register-box {
    background: #ffffff;
    background-image: url(/images/login/login-page-bg.webp);
    background-size: cover;
    background-position: -1rem center;
    background-repeat: no-repeat;
}

html body .mobile-register.mobile-login .register-panel .register-box .icon-close3 {
    filter: contrast(0.5);
}

html body .mobile-register.mobile-login .register-panel .register-box .content {
    padding-top: 0;
}

html body .mobile-register.mobile-login .register-panel .register-box .partner {
    height: 4rem;
    width: 11.5rem;
    margin: auto;
    text-align: center;
}

html body .mobile-register.mobile-login .register-panel .register-box .partner .title {
    color: #000;
    border-top: 0;
    height: 0;
    border-bottom: 1px solid #000;
    line-height: 0;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

html body .mobile-register.mobile-login .register-panel .register-box .partner .title span {
    background: #ffffff;
    padding: 0.1rem 0.15rem;
}

html body .mobile-register.mobile-login .register-panel .register-box .partner img {
    background: transparent;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    margin: auto;
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box form .input input {
    border-color: #C6C6C6;
    background: #ffffff;
    color: #000;
}

/* Forgot Password */
.mobile-reset .register-panel .content .step-content>div>div>span {
    color: #fff;
    display: block;
    text-align: center;
    font-size: 0.4rem;
}

/* .mobile-reset .register-panel .content .step-content .input-item .input {
    margin-bottom: 0.4rem !important;
} */

.mobile-reset .register-panel .content .step-content .input-item:nth-of-type(2) .input {
    margin-top: 0.4rem !important;
}

.mobile-reset .register-panel .btn-next[disabled] {
    opacity: 0.5;
}

/* wechat modal */
#app .wechat-box {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#app .wechat-box .wechat-popup {
    width: 5rem;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 2.77rem;
    border-radius: 0.1rem;
    background: #e5e5e5;
    position: relative;
    text-align: center;
    padding: 0.31rem 0.5rem 0.28rem;
}

#app .wechat-box .wechat-popup .wechat-title {
    padding-bottom: 0.19rem;
    border-bottom: 0.01rem solid rgba(0, 28, 66, 0.2);
    font-size: 0.24rem;
    font-weight: 700;
    color: #000;
}

#app .wechat-box .wechat-popup .wechat-content {
    margin-top: 0.22rem;
    padding-bottom: 0.21rem;
    border-bottom: 0.01rem solid rgba(0, 28, 66, 0.2);
    color: #001b42;
    font-size: 0.16rem;
}

#app .wechat-box .wechat-popup .wechat-content img {
    width: 3.5rem;
}

#app .wechat-box .wechat-popup .btn-item {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#app .wechat-box .wechat-popup .btn-item>span {
    font-size: 0.16rem;
    line-height: 0.18rem;
    cursor: pointer;
}

#app .wechat-box .wechat-popup .btn-item>span.btn-close {
    font-family: nunito-bold;
    color: #fff;
    width: 1.1rem;
    height: 0.38rem;
    cursor: pointer;
    background-color: #001b42;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 0.05rem;
    border-bottom-right-radius: 0.05rem;
}

@media (max-width: 1024px) {
    #app .wechat-box .wechat-popup {
        transform: scale(2);
    }
}

/* footer */
.icon-logo {
    background-size: contain;
    background-repeat: no-repeat;
    width: 2.8rem;
    margin-left: 0.1rem!important;
}

.icon-logo.cny {
    width: 3.8rem;
    height: .85rem;
    margin-left: -.3rem!important;
}

#seo-footer-content .fbody {
    color: rgba(162, 170, 189, 0.4) !important;
    font-size: 11px !important;
    padding: 0 0px;
}

#seo-footer-content h1 {
    font-size: 16px !important;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 10px;
}

#seo-footer-content h2 {
    font-size: 16px !important;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 25px;
}

#seo-footer-content h3 {
    font-size: 11.5px !important;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 5px;
}

#seo-footer-content h4 {
    font-size: 11.5px !important;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 5px;
}

#seo-footer-content a {
    color: var(--primary-color);
}

.wap-page #seo-footer-content {
    display: none !important;
}

#seo-footer-content .seo-content-wrap {
    margin-bottom: 25px;
    color: rgba(162, 170, 189, 0.4);
}

#seo-footer-content .seo-content-wrap:first-child {
    margin-top: 0.75rem;
}

#seo-footer-content ul {
    padding-left: 15px;
    margin-left: 10px;
}

#seo-footer-content ul li {
    list-style-type: disc;
}

#seo-footer-content ol {
    padding-left: 15px;
    margin-left: 10px;
}

#seo-footer-content ol li {
    list-style: decimal;
}

#seo-footer-content p {
    margin-bottom: 5px;
}

#seo-footer-content .seo-toggle-button {
    text-decoration: underline;
    cursor: pointer;
}

#seo-footer-content table {
    border-collapse: collapse;
}

#seo-footer-content td {
    border: 1px solid;
    max-width: 75%;
    padding: 5px;
}

.icon-curacao {
    background-image: url("/images/footer/ftr_curacao.svg");
}

.icon-18 {
    background-image: url("/images/footer/18over.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.icon-bmm {
    background-image: url("/images/footer/bmm-gray.png");
}

.icon-bmm:hover {
    background-image: url("/images/footer/bmm.png");
}

.icon-itechlab {
    background-image: url("/images/footer/itechlab-gray.png");
}

.icon-itechlab:hover {
    background-image: url("/images/footer/itechlab.png");
}

.icon-global {
    background-image: url("/images/footer/global-gray.png");
}

.icon-global:hover {
    background-image: url("/images/footer/global.png");
}

.icon-payouts {
    background-image: url("/images/footer/payouts-gray.png");
}

.icon-payouts:hover {
    background-image: url("/images/footer/payouts.png");
}

.icon-godaddy {
    background-image: url("/images/footer/godaddy-gray.png");
}

.icon-godaddy:hover {
    background-image: url("/images/footer/godaddy.png");
}

.icon-bitcoin {
    background-image: url("/images/footer/ftr_bitcoin_grey.svg");
}

.icon-bitcoin:hover {
    background-image: url("/images/footer/ftr_bitcoin.svg");
}

.icon-usdt {
    background-image: url("/images/footer/ftr_usdt_grey.svg");
}

.icon-usdt:hover {
    background-image: url("/images/footer/ftr_usdt.svg");
}

.icon-ethereum {
    background-image: url("/images/footer/ethereum-grey.svg");
}

.icon-ethereum:hover {
    background-image: url("/images/footer/ethereum.svg");
}

.icon-help2pay {
    background-image: url("/images/footer/help2pay-gray.png");
}

.icon-help2pay:hover {
    background-image: url("/images/footer/help2pay.png");
}

.icon-eeziepay {
    background-image: url("/images/footer/eeziepay-gray.png");
}

.icon-eeziepay:hover {
    background-image: url("/images/footer/eeziepay.png");
}

.icon-visa {
    background-image: url("/images/footer/visa.png");
}

.icon-master-card {
    background-image: url("/images/footer/master-card.png");
}

@media (max-width: 1024px) {
    .icon-master-card {
        width: 1rem;
    }
}

.icon-duitnow {
    background-image: url("/images/footer/duitnow.png");
}

.icon-fpx {
    background-image: url("/images/footer/fpx.png");
}

.icon-tng {
    background-image: url("/images/footer/ftr_tng_grey.svg");
}

.icon-tng:hover {
    background-image: url("/images/footer/ftr_tng.png");
}

.icon-zeon {
    display: inline-block;
    width: .275rem;
    height: .275rem;
    background-image: url("/images/footer/zeonpay_grey.png");
    background-size: 100% 100%
}

.icon-zeon:hover {
    background-image: url("/images/footer/zeonpay.png");
}

.icon-iovation {
    background-image: url("/images/footer/iovation-gray.png");
}

.icon-iovation:hover {
    background-image: url("/images/footer/iovation.png");
}

.icon-threat-metrix {
    background-image: url("/images/footer/threat-metrix.png");
}

.icon-18above {
    background-image: url("/images/footer/18-above.png");
}

.icon-gamcare {
    background-image: url("/images/footer/gamcare.png");
}

.icon-bga {
    background-image: url("/images/footer/bga.png");
}

.icon-youtube {
    background-image: url("/images/footer/youtube.svg");
}

.icon-facebook {
    background-image: url("/images/footer/fb.png");
}

.icon-instagram {
    background-image: url("/images/footer/instagram.svg");
}

.icon-logo-footer {
    background-image: url("/images/footer/logo_footer_v2.png");
    background-size: contain;
    background-position: right;
    background-repeat: no-repeat;
}

.icon-whatsapp {
    display: inline-block;
    background-image: url("/images/icons/svg/whatsapp-icon-dark-grey.svg");
    background-size: auto;
}

.icon-wechat {
    background-image: url("/images/footer/wechat.svg");
}

.icon-livechat {
    background-image: url("/images/footer/livechat.svg");
}

.icon-telegram {
    display: inline-block;
    background-image: url("/images/icons/svg/telegram-icon-dark-grey.svg");
    background-size: auto;
}

html body .mobile-footer .contact-box ul li>a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 3.2rem;
    cursor: pointer;
}

html body .mobile-footer .contact-box ul li>a>span:nth-of-type(2) {
    font-size: 0.24rem;
    font-weight: 600;
    color: #a2aabd;
}

html body .mobile-footer .contact-box ul li>a>span:nth-of-type(3) {
    font-size: 0.3rem;
    color: #f2df6a;
}

/* login form */
#app .mobile-register .register-panel .register-box .content .step-content .input-dropdown-desc svg {
    height: 0.6rem;
    width: 0.8rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container {
    display: block;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__input_icon,
#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__clear_icon {
    display: inline-block !important;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__menu {
    min-width: 7.2rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__input {
    min-height: 1.45rem;
    padding-left: 1.65rem;
    padding-right: 1.65rem;
    font-size: 0.45rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__icon {
    width: 0.68rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar {
    font-size: 0.5rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__month_year_row {
    height: 1.2rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__month_year_row .dp__overlay_cell_pad {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.5rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_header {
    font-size: 0.42rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_header .dp__calendar_header_item {
    height: 0.75rem;
    width: 0.9rem;
    padding: 0.1rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_row {
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_row .dp__cell_inner {
    height: 0.75rem;
    width: 0.9rem;
    padding: 0.1rem;
    font-size: 0.48rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .currency-display i {
    margin-right: .6rem;
    margin-top: .1rem;
}

#app .mobile-register .register-panel .register-box .content .step-content .input .icon-arrow {
    height: 0.22rem;
    width: 0.4rem;
}

#app .mobile-register .register-panel .register-box .content .step-content>div.step3-box .text-p {
    font-size: 0.35rem;
    line-height: 0.45rem;
}

#app .mobile-register .icon-arrow3 {
    height: 0.3rem;
    width: 0.3rem;
    margin-left: 0.25rem;
}

#app .register-panel .register-box .content .img-model {
    padding: 0px;
    padding-bottom: 0.5rem;
}

#app .register-panel .register-box .content .step-content .text-p>a {
    cursor: pointer;
}

#app .register-panel .register-box .content .step-content .input-dropdown-desc {
    border-style: none;
    background-color: transparent;
}

#app .register-panel .register-box .content .step-content .input-dropdown-desc svg {
    margin-left: 0.12rem;
    height: 0.28rem;
    width: 0.35rem;
}

#app .register-panel .register-box .content .step-content .input .m-telcode-dropdown-container {
    margin-top: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(52 51 52 / var(--tw-bg-opacity));
}

#app .register-panel .register-box .content .step-content .input .currency-display svg {
    height: 0.6rem;
    width: 0.55rem;
}

#app .register-panel .register-box .content .step-content .input .dp__menu {
    min-width: 220px;
}

#app .register-panel .register-box .content .step-content .input .date-container {
    display: block;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__input_icon,
#app .register-panel .register-box .content .step-content .input .date-container .dp__clear_icon {
    display: inline-block !important;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__input {
    height: 100%;
    min-height: 0.5rem;
    width: 100%;
    border-radius: 0.09rem;
    border-width: 1px;
    border-color: rgb(25 25 25 / var(--tw-border-opacity));
    --tw-border-opacity: 0.2;
    --tw-bg-opacity: 1;
    background-color: rgb(52 51 52 / var(--tw-bg-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.2rem;
    color: #a2aabd;
}

@media (max-width: 1024px) {
    #app .register-panel .register-box .content .step-content .input .date-container .dp__input {
        font-size: .3rem;
        min-height: .74rem;
        padding-left: .7rem;
    }
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__icon {
    width: 0.24rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar {
    font-size: 0.17rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__month_year_row {
    margin-top: 0.1rem;
    height: .2rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__month_year_row .dp__overlay_cell_pad {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_header {
    font-size: 0.15rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_header .dp__calendar_header_item {
    height: 22px;
    width: 22px;
    padding: 0.1rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_row {
    margin-top: 0.05rem;
    margin-bottom: 0.05rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__calendar_row .dp__cell_inner {
    height: 22px;
    width: 22px;
    font-size: 0.17rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__overlay_cell {
    font-size: 0.15rem;
}

#app .register-panel .register-box .content .step-content .input .date-container .dp__instance_calendar .dp__overlay_cell.dp__overlay_cell_disabled {
    color: #b0b0b0;
}

#app .register-panel .register-box .content .step-content .input .currency-display i {
    margin-right: 0.22rem;
}

#app .register-panel .register-box .content .step-content .input .icon-arrow {
    height: 0.09rem;
    width: 0.15rem;
}

#app .register-panel .register-box .content .steps ul li.done {
    color: #fff;
}

#app .register-panel .register-box .content input#referral:disabled {
    opacity: 1;
    color: #a2aabd;
}

#app .show-hide-button {
    position: absolute;
    right: 0.5rem;
    top: 0.375rem;
    display: flex;
    align-items: center;
}

#app .show-hide-button .icon-eye {
    display: inline-block;
    height: 0.75rem;
    cursor: pointer;
    fill: #a2aabd;
}

#app .icon-arrow3 {
    height: 0.15rem;
    width: 0.14rem;
    background: url(/images/icons/svg/dropdown-icon.svg) no-repeat;
    background-size: 100% 100%;
    margin-left: 0.15rem;
    transition: transform 0.3s ease-in-out;
}

#app .step3-box .icon-logo {
    background-position-x: center;
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .text-box {
    margin-bottom: 0.8rem;
    margin-top: 1rem;
}

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .text-box p:first-of-type {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

/* html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .icon-logo2 {
    height: 1.1rem;
    margin: 0 auto 0.75rem;
} */

html body .mobile-register.mobile-login .register-panel .content .step-content .step-box .login-title {
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 0.48rem;
    font-weight: bold;
}

/* reset password */

#app .reset-page-box .reset-popup {
    height: auto;
}

#app .reset-page-box .reset-popup .btn-item {
    justify-content: right;
}

/* coming soon */
.comingSoon-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100%;
    height: 100%;
    overflow: auto;
    outline: 0;
}

.comingSoon-popup .popup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-width: 6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 100%;
    transform: translate(-50%, -50%);
    border-radius: 0.15rem;
    overflow: hidden;
    background-color: #1f1f1f;
}

.comingSoon-popup .popup .popup-body {
    padding: 0.2rem;
    min-height: 1.2rem;
    width: 100%;
    font-size: 0.22rem;
    line-height: 0.3rem;
    color: #bdbdbd;
    text-align: center;
}

.comingSoon-popup .popup .popup-body .popup-header-right {
    width: 100%;
    text-align: right;
}

.comingSoon-popup .popup .popup-body .popup-header-right i {
    cursor: pointer;
}

.comingSoon-popup .popup .popup-body>div:nth-child(2) {
    margin-bottom: 0.4rem;
}

.comingSoon-popup.m-comingSoon .popup .popup-body {
    font-size: 0.45rem;
    min-height: 2.5rem;
}

/* Start Angpao */
#angpao-popup .angpao-wrap {
    background-color: transparent;
    max-width: 5rem;
}

#angpao-popup .angpao-wrap .popup-body {
    color: #fff;
    padding: 0;
    position: relative;
}

#angpao-popup .angpao-wrap .popup-body .popup-header-right {
    position: absolute;
    top: 0.16rem;
    right: 0.16rem;
    z-index: 2;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content {
    background-image: url(/images/FIFO88/angpao/bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 0;
    height: 7rem;
    width: 5rem;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content {
    height: 14rem;
    width: 11rem;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content .msg {
    top: 37%;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg .title {
    font-size: .24rem;
    font-family: 'nunito-bold';
    margin-bottom: 0.1rem;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg p {
    font-size: .36rem;
    margin-bottom: 0.1rem;
    line-height: .5rem;
    width: 10rem;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg .amount {
    color: #fcff00;
    font-size: .58rem;
    font-family: 'nunito-extrabold';
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg button {
    min-width: 0.98rem;
    height: 0.5rem;
    font-size: .18rem;
    color: #f66d02;
    background: #fdd71d;
    border-radius: 0.25rem;
    font-family: nunito-bold;
    transition: background-color .3s;
    padding: 0 0.32rem;
    white-space: nowrap;
    cursor: pointer;
    border: 4px solid #fbbe05;
    transition: transform .2s ease-in-out;
    animation: bounce1 .3s infinite alternate;
}

#angpao-popup .angpao-wrap .popup-body .angpao-content .msg button:hover{
    transform: scale(1.03);
}

/* Mobile */
.wap-page #angpao-popup.comingSoon-popup .popup .popup-body {
    line-height: normal;
}
.wap-page #angpao-popup .angpao-wrap {
    max-width: 11rem;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content .msg .title {
    font-size: .5rem;
    margin-bottom: 0.3rem;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content .msg .amount {
    font-size: 1.4rem;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content .msg button {
    height: 1.15rem;
    font-size: .38rem;
    border-radius: 0.6rem;
    padding: 0 0.64rem;
    animation: bounce1 .3s infinite alternate;
}

.wap-page #angpao-popup .angpao-wrap .popup-body .angpao-content .msg p {
    font-size: .68rem;
    line-height: 1.2rem;
    width: 10rem;
}

@keyframes bounce1 {
    to { transform: scale(1.2); }
}
/* End Angpao */

/* mobile - dashboard action bar */
.acct-bar>ul li .icon-box {
    position: relative;
}

.acct-bar>ul li .icon-box svg {
    background-size: 100% 100%;
}

.acct-bar>ul li .icon-box .deposit .st1 {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .deposit .st2 {
    fill: none;
    stroke: #A1AABC;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .deposit .st3 {
    fill: #A1AABC;
}

.acct-bar>ul li .icon-box .deposit .st5 {
    fill: none;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .transfer .st1 {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .transfer .st2 {
    fill: none;
    stroke: #A1AABC;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .transfer .st3 {
    fill: #A1AABC;
}

.acct-bar>ul li .icon-box .withdraw .st1 {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .withdraw .st2 {
    fill: none;
    stroke: #A1AABC;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .withdraw .st3 {
    fill: #A1AABC;
}

.acct-bar>ul li .icon-box .history .st1 {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .history .st2 {
    fill: none;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.acct-bar>ul li .icon-box .history .st3 {
    fill: #A1AABC;
}

#app div[data-page=slot-provider] .mobile-wallet-section, #app div[data-page=lottery-provider] .mobile-wallet-section, #app div[data-page=fishing-provider] .mobile-wallet-section {
    position: relative;
    z-index: 2;
}

.mobile-wallet-section .wallet-info {
    background: #27282a;
    font-size: 0.26rem;
}

.mobile-wallet-section .wallet-info .bottom-content {
    display: flex;
    justify-content: center;
    border-top: 0.02rem solid #353637;
    text-align: center;
    transition: 0.3s;
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.mobile-wallet-section .wallet-info .bottom-content.show {
    margin: 0 0.2rem;
    padding: 0.35rem 0;
    opacity: 1;
    visibility: visible;
    height: auto;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box {
    position: relative;
    width: 25%;
    border-right: 1px solid #474747;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box:last-child {
    border-right: 0;
}

.acct-bar>ul li .icon-box .promo-count {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: #fe0100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    font-family: nunito-bold;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0.15rem;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box .action-label {
    margin-top: 0.4rem;
    font-size: 0.28rem;
    color: #a1aabc;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box img {
    width: 1rem;
    height: 1rem;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box .message-container {
    position: relative;
}

.mobile-wallet-section .wallet-info .bottom-content .action-box .message-container .unread-msg {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    right: 27%;
    top: 23%;
    font-size: 0.22rem;
    width: 0.32rem;
}

.mobile-wallet-section .collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    cursor: pointer;
    background: #27282a;
}

.mobile-wallet-section .collapse.show-more svg {
    transform: rotate(270deg);
}

.mobile-wallet-section .collapse svg {
    fill: #6da0dd;
    transform: rotate(90deg);
    width: 0.14rem;
    transition: 0.3s;
}

.mobile-wallet-section .collapse p {
    margin: 0 0 0 0.28rem;
    line-height: 1.2;
    font-size: 0.35rem;
}

/* language dropdown*/
#app .m-language-container .country-language-box .country-box .language-box div:not(:last-child) .language-column {
    border-right: 0.01rem solid #333;
}

#app .m-language-container .country-language-box .country-box .language-box div:not(:first-child) .language-column {
    padding: 0 0.41rem;
}

/* email verify */
.activation-box .success-msg {
    color: #00c600;
    font-weight: 700;
    display: flex;
    justify-content: center;
}

#activate-email-modal input {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    width: 80%;
    font-size: 0.16rem;
    font-weight: 400;
    color: #2f2f2f;
    height: 0.5rem;
    border: 0.01rem solid #ddd;
    border-radius: 0.13rem;
    margin: 0.2rem 0 0.1rem;
}

#activate-email-modal .input-error {
    width: 4rem;
    margin: 0 auto;
    color: #fe0000;
    font-family: nunito-bold;
    font-size: 0.14rem;
}

#activate-email-modal.m-standard-popup-overlay input {
    width: 8rem;
    font-size: .45rem;
    font-weight: 400;
    color: var(--input-text-color);
    background: var(--input-field-background);
    height: 1.25rem;
    border: 1px solid #2A2A2A;
    border-radius: .25rem;
    margin-top: .17rem;
    transition: 0.3s all ease-in-out;
    margin-top: 0.6rem;
    padding-left: 0.5rem;
    padding-right: 0.55rem;
}

#activate-email-modal.m-standard-popup-overlay input::placeholder {
    color: var(--placeholder-color);
}

#activate-email-modal.m-standard-popup-overlay .input-error {
    width: 8rem;
    font-size: .42rem;
    color: #ff7e7e;
    margin-top: .1rem;
}

/* phone verify */
#phone-verify-modal input {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    width: 80%;
    font-size: .16rem;
    font-weight: 400;
    color: #2f2f2f;
    height: 0.5rem;
    border: 0.01rem solid #ddd;
    border-radius: 0.13rem;
    margin-top: 0.2rem;
    margin-bottom: 0.15rem;
}

#phone-verify-modal .input.code {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 0.16rem;
    width: 50%;
    margin: auto;
}

#phone-verify-modal .input.code input[type=text] {
    width: 0.65rem;
    text-align: center;
}

@media (max-width: 1024px) {
    #phone-verify-modal input {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        width: 80%;
        font-size: .85rem;
        font-family: nunito-semibold;
        color: var(--input-text-color);
        background: var(--input-field-background);
        height: 2rem;
        border: 0.01rem solid var(--input-field-border);
        border-radius: 0.25rem;
        margin-top: 0.5rem;
        margin-bottom: 0.3rem;
    }

    #phone-verify-modal .input.code {
        width: 7.8rem;
    }

    #phone-verify-modal .input.code input[type=text] {
        width: 1.8rem;
        text-align: center;
    }
}

/* language */
#app .m-language-container .country-language-box .country-box .language-box div:not(:last-child) .language-column {
    border-right: 0.01rem solid #333;
}

#app .m-language-container .country-language-box .country-box .language-box div:not(:first-child) .language-column {
    padding: 0 0.41rem;
}

/* ic verify */
#app .addBank-popup {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1024px) {
    #app .addBank-popup {
        transform: translateX(-50%) scale(.5);
    }

    #app .wap-page .addBank-popup {
        transform: translateX(-50%) scale(1);
    }
}

.addBank-box.standard-popup-overlay .standard-popup-modal-container .standard-popup-modal-body {
    padding: 0.25rem 0.35rem;
}

#upload-identity-card-modal input {
    margin-top: .2rem;
    padding: 0.12rem 0.16rem;
    border: 0.01rem solid rgba(25, 25, 25, .2);
    border-radius: 0.09rem;
    width: 70%;
    /* font-size: 0.16rem; */
}

.activation-box .note {
    color: red;
    font-size: 0.15rem;
    padding: 0.08rem 0.3rem;
    border-radius: 0.05rem;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0.15rem auto;
    background: #ffdbdb;
}

@media (max-width: 1024px) {

    #upload-identity-card-modal .standard-modal-content {
        display: block;
    }

    .activation-box .note {
        border-radius: 0.13rem;
        padding: 0.25rem 0.1rem;
        margin: 0.4rem 0 0;
        font-size: 0.35rem;
    }
}

/* verification */
.st-user-verification-section {
    width: 18%;
}

@media (max-width: 1024px) {
    .st-user-verification-section .user-verification-container {
        display: flex;
        flex-direction: column;
    }
}

.st-user-verification-section .user-verification-container .verification-icons {
    display: flex;
    justify-content: space-between;
    margin: 0.1rem 0;
}

.st-user-verification-section .user-verification-container .verification-icons .verify-icon {
    align-items: center;
    background: transparent;
    border-radius: 50%;
    display: flex;
    padding: 0.06rem;
    cursor: pointer;
    width: 0.3rem;
    height: 0.3rem;
}

.st-user-verification-section .user-verification-container .verification-icons .verify-icon.verified>img {
    filter: grayscale(0);
}

.st-user-verification-section .user-verification-container .verification-bar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-1 {
    left: 14%;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-2 {
    left: 41%;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-3 {
    left: 68%;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-4 {
    left: 96%;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-bar {
    background: #fff;
    border-radius: 0.5rem;
    height: 0.05rem;
    overflow: hidden;
    width: 20%;
}

.st-user-verification-section .user-verification-container .verification-bar .progress-bar .progress-bar-status {
    background: #ff8a00;
    display: block;
    height: 100%;
}

.st-user-verification-section .user-verification-container .verification-bar .beta-tick {
    height: 0.16rem;
    width: 10%;
}

#app .member-panel .member-com-page .member-main .member-wallet .addBank-popup .title {
    font-size: initial;
    font-weight: 900;
    color: #fff;
    line-height: initial;
}

@media (max-width: 1024px) {

    #upload-identity-card-modal .addBank-popup,
    #activate-email-modal .addBank-popup,
    #phone-verify-modal .addBank-popup {
        width: 10rem;
    }

    #upload-identity-card-modal .addBank-popup .title,
    #activate-email-modal .addBank-popup .title,
    #phone-verify-modal .addBank-popup .title {
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.42rem;
        font-weight: 800;
        color: #fff;
        line-height: 0.18rem;
        position: relative;
    }

    #upload-identity-card-modal .addBank-popup .title .icon-close3,
    #activate-email-modal .addBank-popup .title .icon-close3,
    #phone-verify-modal .addBank-popup .title .icon-close3 {
        width: 0.54rem;
        height: 0.54rem;
    }

    #upload-identity-card-modal .addBank-popup input,
    #activate-email-modal .addBank-popup input,
    #phone-verify-modal .addBank-popup input {
        height: 1.25rem;
        width: 8rem;
        background: #f3f2f2;
        font-size: 0.42rem;
    }

    #upload-identity-card-modal .addBank-popup input::-moz-placeholder,
    #activate-email-modal .addBank-popup input::-moz-placeholder,
    #phone-verify-modal .addBank-popup input::-moz-placeholder {
        font-size: 0.42rem;
    }

    #upload-identity-card-modal .addBank-popup input::placeholder,
    #activate-email-modal .addBank-popup input::placeholder,
    #phone-verify-modal .addBank-popup input::placeholder {
        font-size: 0.42rem;
    }
}

.user-verification-container .verification-icons {
    display: flex;
    justify-content: space-between;
    margin: 0.1rem 0;
}

.user-verification-container .verification-icons .verify-icon {
    align-items: center;
    border: 1px solid #696969;
    border-radius: 50%;
    display: flex;
    padding: 0.05rem;
    cursor: pointer;
    width: 0.28rem;
    height: 0.28rem;
}

.user-verification-container .verification-icons .verify-icon img {
    width: 100%;
    height: 100%;
    filter: saturate(100%) contrast(10%) hue-rotate(20deg) brightness(130%);
}

.user-verification-container .verification-bar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.user-verification-container .verification-bar .beta-tick {
    background: #0071e3;
    border-radius: 50%;
    height: 0.15rem;
    padding: 0.04rem 0.03rem;
    position: absolute;
    width: 10%;
}

.user-verification-container .verification-bar .progress-1 {
    left: 16%;
}

.user-verification-container .verification-bar .progress-2 {
    left: 42%;
}

.user-verification-container .verification-bar .progress-3 {
    left: 70%;
}

.user-verification-container .verification-bar .progress-4 {
    left: 98%;
}

.user-verification-container .verification-bar .progress-bar {
    background: #fff;
    border-radius: 0.5rem;
    height: 0.05rem;
    overflow: hidden;
    width: 20%;
}

.m-user-verification-section .user-verification-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 0.2rem;
    column-gap: 0.2rem;
    align-items: center;
}

.m-user-verification-section .user-verification-container>span {
    color: #aba9a9;
    font-size: 0.38rem;
}

.m-user-verification-section .user-verification-container .verification--container .verification-icons {
    margin: 0 0.1rem;
}

.m-user-verification-section .user-verification-container .verification--container .verification-icons .verify-icon {
    width: 0.9rem;
    height: 0.9rem;
    padding: 0.15rem;
}

.m-user-verification-section .user-verification-container .verification--container .verification-icons .verify-icon.verified>img {
    filter: grayscale(0);
}

.m-user-verification-section .user-verification-container .verification--container .verification-bar {
    margin: 0.16rem 0 0;
}

.m-user-verification-section .user-verification-container .verification--container .verification-bar .beta-tick {
    height: 0.45rem;
    width: 0.45rem;
    padding: 0.08rem;
    background: #26960d;
}

.m-user-verification-section .user-verification-container .verification--container .verification-bar .progress-bar {
    background: #f3f5f6;
    height: 0.15rem;
}

.m-user-verification-section .user-verification-container .verification--container .verification-bar .progress-bar .progress-bar-status {
    background: #26960d;
    border-radius: 0.5rem;
    display: block;
    height: 100%;
}

/* sidebar */
#app .top-header .container {
    margin-left: 15px;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li:nth-child(2) img {
    filter: none!important;
}

html body #fixed-container .side-menu-box .side-menu .icon-box img,
html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li img {
    width: 0.74rem;
    height: auto;
}

html body #fixed-container .side-menu-box .side-menu .icon-box img:nth-child(8) span,
html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li img:nth-child(8) span {
    padding: 0 0.1rem;
}

html body #fixed-container .side-menu-box .side-menu .icon-box img:first-child,
html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li img:first-child {
    filter: saturate(100%) contrast(10%) hue-rotate(20deg) brightness(130%);
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .display-coin {
    display: flex;
    align-items: center;
    gap: .16rem;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .display-coin img {
    width: 0.95rem;
    height: 0.95rem;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .display-coin div {
    display: flex;
    flex-direction: column;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .display-coin span {
    font-size: 0.3rem;
    color: #fff;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .display-coin span:last-child {
    color: #FFEB3B;
    font-family: nunito-bold;
    font-size: .48rem;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu {
    margin-top: 0.8rem;
}

html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li {
    padding: 0 0.1rem;
}

/* html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li:nth-child(9)>img:first-child,
html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li:nth-child(10)>img:first-child,
html body #fixed-container .side-menu-box .side-menu .side-menu-scroll-wrapper .popular-submenu li:nth-child(11)>img:first-child {
    filter: none;
} */

.tool-bar.funds .nav-com ul .icon-box img {
    max-height: 0.9rem;
    filter: saturate(100%) contrast(10%) hue-rotate(20deg) brightness(130%);
}

.tool-bar.funds .nav-com ul .icon-box img#pending {
    height: 1rem;
}

.tool-bar.funds .nav-com ul li.on .icon-box img {
    filter: grayscale(0);
}

#app .header-section #header .top-header .top-header-box {
    /* width: auto; */
    justify-content: flex-start;
}

#app .header-section #header .second-header .second-header-box .left .lan-select-box .lan-list-box li span.divide {
    color: deepskyblue;
}

/* #app .header-section #header .top-header .top-header-box .nav-list {
    padding-left: 1rem;
} */

html body #fixed-container .tool-bar.funds .nav-com .wap-funds-list.scrollable li.profile,
html body #fixed-container .tool-bar.funds .nav-com .wap-funds-list.scrollable li.password,
html body #fixed-container .tool-bar.funds .nav-com .wap-funds-list.scrollable li.messaging,
html body #fixed-container .tool-bar.funds .nav-com .wap-funds-list.scrollable li.banking,
html body #fixed-container .tool-bar.funds .nav-com .wap-funds-list.scrollable li.referral {
    width: 20%;
}

/* #app .header-section #header .second-header .second-header-box .right>div.after-login .account-info-box .account-info .drop-list {
    height: 1.82rem;
} */

.voucher-count {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: #fe0100;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.24rem;
    font-family: nunito-bold;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0.48rem;
}

/* home */
.home-container {
    position: relative;
}

@media (max-width: 1024px) {
    /* .home-container {
        padding-top: .65rem;
    } */

    .wap-page .home-container {
        padding-top: 0;
    }
}

.home-container .swiper {
    height: 100%;
    width: 100%;
}

.home-container .swiper-slide {
    background-size: cover;
    background-position: center;
}

.home-container .swiper-slide img {
    display: block;
    height: 100%;
    width: 100%;
    cursor: pointer;
    -o-object-fit: cover;
    object-fit: cover;
}

.home-container .swiper-thumbs .swiper-wrapper {
    height: 0.4rem;
}

.home-container .swiper-thumbs {
    height: 0.4rem;
}

.home-container .thumbnail {
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.home-container .thumbnail .swiper-wrapper {
    justify-content: center;
}

.home-container .thumbnail .swiper-wrapper .swiper-slide {
    width: auto !important;
}

.home-container .thumbnail .swiper-wrapper .swiper-slide img {
    width: 1.37rem;
    height: 0.37rem;
    display: block;
    margin: 0 0 0.03rem;
}

#app .bg-content-section .banner,
#app .bg-content-section .banner .slider .slider-container>div {
    background: transparent;
}

.home-container .thumbnail .loading-line {
    content: "";
    width: 0;
    height: 0.03rem;
    transition: background .5s;
    position: absolute;
    left: 0;
    bottom: 0;
}

.home-container .thumbnail .swiper-slide-thumb-active .loading-line {
    width: 100%;
    animation: slidein 10s
}

@keyframes slidein {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

.bg-content-section .home-page .banner {
    height: 10rem;
    background: #0b0b0b;
}

#app .home-page .banner .mobileSlider .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0.1rem !important;
}

/* general announcement */
#app .home-notice-box.wap .notice-popup {
    z-index: 9;
    position: absolute;
    transform: unset;
    width: 9.8rem;
    border-radius: 0.2rem;
    padding: 0.51rem 0.7rem 0.48rem;
}

#app .home-notice-box.wap .notice-popup .notice-title,
#app .home-notice-box.wap .notice-popup .notice-content {
    font-size: 0.4rem;
}

#app .home-notice-box.wap .notice-popup .notice-content li {
    margin-left: 0;
}

#app .home-notice-box.wap .notice-popup .btn-item>span.btn-close {
    font-size: 0.4rem;
    width: 2.2rem;
    height: 0.98rem;
    border-radius: .6rem;
}

#app .home-notice-box .notice-popup {
    z-index: 9;
    position: absolute;
}

.announcement-box button {
    border: 0;
}

/* collaboration */
.collab .mv-source .top-container {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 58% 40%;
    justify-content: space-between;
}

.collab .mv-source .top-container .iframe-container {
    margin: 0 1rem 0 0;
    width: 100%;
    height: 100%;
}

.collab .mv-source .selector-container {
    margin-top: 1.5rem;
}

.collab .mv-source .selector-container .selector-content {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.collab .mv-source .selector-container .selector-content .pointer img {
    cursor: pointer;
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.collab .mv-source .selector-container .selector-content .pointer img.active,
.collab .mv-source .selector-container .selector-content .pointer img:hover {
    --tw-grayscale: grayscale(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

#app .wap-page>div .home-page .dota2-box {
    background-size: contain;
    background-position: bottom;
}

#app .wap-page>div .home-page .dota2-box .mv-source .selector-container .selector-content .selector-content-img-container img.active {
    width: 100%;
    filter: grayscale(0);
}

/* sidebar */
#app .submenu-box ul a {
    position: relative;
}

#app .submenu-box ul a .hot-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.55rem;
}

/* home sport slider */
#app .bg-content-section .sports .group {
    position: relative;
}

#app .bg-content-section .sports .group .sports-games {
    position: initial;
}

@media (max-width: 1024px) {
    #app .bg-content-section .sports .group {
        display: grid;
        grid-template-columns: 65% 35%;
    }

    #app .bg-content-section .sports .group .sports-games {
        height: 5.5rem;
        width: 100%;
        padding-left: 0.93rem;
        background-position-x: 8.1rem;
        background-position-y: 0.2rem;
        background-size: contain;
    }
}

/* #app .bg-content-section .sports .group .sports-games .slider .pagination {
    top: 0.92rem;
} */

/* #app .bg-content-section .sports .group .sports-games .slider .pagination li {
    height: 0.4rem !important;
} */

/* #app .bg-content-section .sports .group .sports-games .slider .pagination li:first-child {
    margin-top: 0.31rem;
} */

#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-SB,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-CM,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-MB,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-M8,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-WS,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-DZ-SB,
#app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-UG-SB {
    /* height: auto; */
    filter: brightness(.5) grayscale(1);
}

#app .bg-content-section .sports .group .sports-games .slider .pagination .swiper-slide-prev,
#app .bg-content-section .sports .group .sports-games .slider .pagination .swiper-slide-next {
    opacity: 1;
}

#app .bg-content-section .sports .group .sports-games .slider .slider-container>div .item-content .btn {
    background: #ffe603;
    color: #000000;
}

#app .bg-content-section .sports .group .sports-games .slider .slider-container>div .item-content .btn.disabled {
    cursor: not-allowed;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide .item-content {
    opacity: 0;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide .slider-element {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
    bottom: 0.056rem;
    width: 7.22rem;
    left: 0.52rem;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-active .item-content {
    opacity: 1;
}

@media (max-width: 1024px) {
    #app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide .slider-element {
        bottom: 0;
        width: 9.22rem;
        left: 2.52rem;
    }
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-active .slider-element {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease-in-out 0.1s;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-prev,
#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-next {
    opacity: 0;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-prev .slider-element,
#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-next .slider-element {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease-out 0.1s;
}

#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-prev .item-content,
#app .bg-content-section .sports .group .sports-games .slider .mySwiper2 .swiper-slide-next .item-content {
    opacity: 0;
    display: none;
}

#app .bg-content-section .sports .group .sports-games li.swiper-slide-thumb-active {
    transform: translateY(0);
}

#app .bg-content-section .sports .group .sports-games li.swiper-slide-thumb-active .provider-character, #app .bg-content-section .sports .group .sports-games li:hover .provider-character {
    filter: grayscale(0) !important;
}

@media (max-width: 1024px) {
    #app .bg-content-section .sports .group .sports-games li.swiper-slide-thumb-active .provider-character {
        right: 0;
        top: -.2rem!important;
        width: 0.95rem!important;
    }

    #app .bg-content-section .sports .group .sports-games .slider .pagination li .provider-character.provider-PG {
        width: 0.85rem;
    }
}

/* #app .bg-content-section .sports .group .sports-games .icon-bti-sports {
    background-image: url(/images/sports/sbo_big.webp);
    background-position: center;
    background-size: cover;
    height: 0.7rem;
    width: 2rem;
} */

/* mobile upcoming events */
#app .wap-page>div .home-page .sports-box .group .up-events {
    height: 5.6rem;
    overflow-y: hidden;
}

#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] {
    height: 5.8rem;
    top: -0.8rem;
    position: relative;
}

#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile]>.slider .slider-container.swiper-slide-active>div {
    opacity: 1;
}

#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-wrapper {
    height: 4.81rem;
    margin-top: 0.85rem;
}

#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-pagination-bullets.swiper-pagination-horizontal {
    top: -0.1rem;
    bottom: auto;
    left: auto;
    right: 0.7rem;
    text-align: right;
}

#app .wap-page>div .home-page .sports-box .group .up-events .empty-msg {
    margin-left: 0;
    margin-top: 0.3rem;
    font-size: 0.32rem;
}

.up-events .empty-msg {
    color: #d2d2d2;
    margin-left: 0.4rem;
    font-size: 0.16rem;
}

.up-events .slider-box[data-screen=desktop]>.slider .swiper-button-prev:after,
.up-events .slider-box[data-screen=desktop]>.slider .swiper-rtl .swiper-button-next:after,
.up-events .slider-box[data-screen=desktop]>.slider .swiper-button-next:after,
.up-events .slider-box[data-screen=desktop]>.slider .swiper-rtl .swiper-button-prev:after {
    font-size: 0.25rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
    padding: 0.09rem 0.15rem;
}

.up-events .slider-box[data-screen=desktop]>.slider .swiper-pagination {
    bottom: -5px;
}

/* home mobile sport section */
#app .submenu-box ul a:not(:last-child) {
    margin-bottom: 0.12rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games {
    height: 4.2rem;
    overflow: visible;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-SB {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_sbo.webp);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-TP, #app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-IS {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_mb.webp);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-CM {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_cmd.png);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-PP {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_pp.webp);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-PG {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_pgsoft.webp);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-M8 {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_m8.png);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-WS {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_ws.png);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-DZ-SB {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_dz-sb.png);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .swiper-slide.provider-UG-SB {
    background-image: url(/images/FIFO88/homepage/section/mobile/banner_ug-sb.png);
    background-size: 100% 100%;
    border-radius: 0.25rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] {
    height: 5rem;
    top: -0.8rem;
    position: relative;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper {
    height: 3.57rem;
    margin-top: 0.85rem;
    width: 10rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide {
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.5;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide>div.item-content .icon-box {
    height: 1.15rem;
    display: flex;
    align-items: center;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide>div.item-content .icon-box i {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide>div.item-content p {
    font-size: 0.29rem;
    color: #fff;
    width: 2.8rem;
    line-height: 0.32rem;
    display: grid;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-wrapper .swiper-slide>div.item-content p span:nth-child(2) {
    color: yellow;
    font-size: 0.38rem;
}

#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
    top: -0.05rem;
    bottom: auto;
    left: auto;
    right: 0.7rem;
    text-align: right;
}

/* add arrow navigation mobile */
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-next:after,
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-prev:after {
    font-size: 10px;
    background: #292b2e;
    color: #F5F5F5;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-next,
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-prev {
    top: 12px;
}
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-next {
    right: 10px;
    left: auto;
}
#app .wap-page>div .home-page .sports-box .group .sports-games .sports-games-slider-box[data-screen=mobile] .swiper-button-prev {
    right: 35px;
    left: auto;
}

#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-next:after,
#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-prev:after {
    font-size: 10px;
    background: #292b2e;
    color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-next,
#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-prev {
    top: 12px;
}
#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-next {
    right: 10px;
    left: auto;
}
#app .wap-page>div .home-page .sports-box .group .up-events .slider-box[data-screen=mobile] .swiper-button-prev {
    right: 35px;
    left: auto;
}
/* end navigation */

#app .bg-content-section .sports {
    height: 7.34rem;
    background: #0f181e url(/images/homepage/section/section.webp) no-repeat bottom;
    background-size: cover;
    border-bottom: 0.03rem solid #111;
}

#app .bg-content-section .sports.slots {
    background: #0f181e url(/images/homepage/section/section_slots.webp) no-repeat bottom;
    background-size: cover;
}

@media (max-width: 1024px) {
    #app .bg-content-section .sports.slots {
        height: 8.04rem;
    }
}

#app .bg-content-section .sports .contact-box {
    position: relative;
    bottom: 0.091rem;
}

/* #app .bg-content-section .sports .contact-box .contact-list {
    bottom: 0.3rem;
} */

/* .icon-SB {
    background-image: url(/images/homepage/section/logo5.webp);
} */

/* .icon-MB {
    background-image: url(/images/homepage/section/logo2.png);
    width: 2rem;
    height: 0.55rem;
    margin-bottom: 0.15rem;
} */

/* .icon-CM {
    background-image: url(/images/homepage/section/logo1.png);
    width: 2rem;
    height: 0.55rem;
    margin-bottom: 0.15rem;
} */

.icon-pp {
    background-image: url(/images/homepage/section/pragmatic.png);
}

.icon-pgsoft {
    background-image: url(/images/homepage/section/pgsoft.png);
}

.contact-list a {
    display: flex;
}

/* noticication slider */
#app .notice .content {
    display: block;
    padding-top: 5px;
}

/* home hot section */
.home-page .dropping-hot .group .games-list .game-content li .img-box {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* promotion */

#app .promotion-preview-panel {
    height: 4.8rem;
}

#app .promotion-preview-panel .container {
    position: relative;
}

#app .promotion-preview-panel .item-title {
    color: var(--primary-color);
    display: block;
    padding-top: 0.32rem;
    padding-left: 0.1rem;
    text-transform: capitalize;
    font-size: .25rem;
    font-family: nunito-bold;
    font-weight: 900;
    line-height: 0.3rem;
    padding-bottom: 0.65rem;
}

#app .promotion-preview-panel .more-promo {
    position: absolute;
    right: 0.27rem;
    top: 0.8rem;
    cursor: pointer;
    font-size: .19rem;
}

#app .promotion-preview-panel .more-promo span {
    color: var(--primary-color);
    font-family: nunito-semibold;
}

#app .promotion-preview-panel .promotion-preview {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#app .promotion-preview-panel .promotion-preview li.promo {
    width: 49%;
    position: relative;
    cursor: pointer;
}

#app .promotion-preview-panel .promotion-preview li.promo:hover img {
    filter: brightness(0.8);
}

#app .promotion-preview-panel .promotion-preview li.promo .img {
    height: 2.6rem;
    border-radius: 0.13rem;
    overflow: hidden;
    background: linear-gradient(0deg, var(--primary-color) 0%, var(--primary-color) 100%) padding-box, var(--primary-gradient) border-box;
    border: 0.03rem solid transparent;
}

#app .promotion-preview-panel .promotion-preview li.promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: all .2s ease-in-out;
}

#app .wap-page>div .home-page .promotion-preview-panel {
    overflow: hidden;
    padding: 0 0.71rem;
    height: 5.7rem;
}

#app .wap-page>div .home-page .promotion-preview-panel .more-promo {
    font-size: 0.3rem;
    top: 0.6rem;
}

#app .wap-page>div .home-page .promotion-preview-panel .promotion-preview li.promo .gold-label {
    width: 1.8rem;
    font-size: 0.24rem;
    padding: 0.08rem 0;
}

.announcement-box button {
    border: 0;
}

/* login box*/
#app .login-page-box {
    z-index: 9999;
}

.login-popup button {
    border: 0;
}

/* welcome popup */
#app .welcome-popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    overflow: auto;
    outline: 0;
}

#app .welcome-popup .popup {
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
    position: absolute;
    color: #fff;
}

#app .welcome-popup .popup .popup-header {
    text-overflow: ellipsis;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/images/FIFO88/homepage/welcome/welcome-header.png') no-repeat center;
    position: relative;
    z-index: 99;
}

#app .welcome-popup .popup .popup-header .popup-title {
    white-space: nowrap;
    font-family: nunitosans-regular;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app .welcome-popup .popup .popup-header svg {
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    fill: #000;
    line-height: 1.3em;
}

#app .welcome-popup .popup .popup-body {
    background: linear-gradient(359.75deg, #3E425B -4.21%, #2D2C3E 98.66%);
    z-index: 98;
    position: relative;
}

#app .welcome-popup .popup .popup-body .welcome-box .welcome-title {
    color: #fff;
    text-align: center;
}

#app .welcome-popup .popup .popup-body .welcome-box .welcome-title h3 {
    font-family: nunito-bold;
    line-height: 1.5em;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li {
    display: flex;
    align-items: center;
    box-shadow: 4px 5px 10px 0 rgba(0,0,0,.15);
    background: linear-gradient(180deg, #585B7F 0%, #535577 100%);
    position: relative;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li h4 {
    font-family: nunito-regular;
    line-height: 1.3em;
    font-weight: 400;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li>div:first-child:not(.balance-details) {
    display: flex;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li>div>div, #app .welcome-popup .popup .popup-body .welcome-box ul.list li>div>div>div {
    font-family: nunito-extrabold;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.rebate {
    background: linear-gradient(180deg, #577AF7 0%, #3147BB 100%);
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.rebate .label-tag {
    position: absolute;
    background: linear-gradient(180deg, #fff 0%, #A6B9FF 100%);
    color: var(--primary-color);
    font-family: nunito-semibold;
    box-shadow: 4px 5px 10px 0 rgba(105,105,105,.25);
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.rebate .label-date {
    position: absolute;
    color: #a7bafd;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.voucher button {
    background: linear-gradient(180deg, #9C9FCA 0%, #6A6E9E 100%);
    box-shadow: 7px 9px 20px 0 rgba(0,0,0,.2);
    font-family: nunito-semibold;
    border: none;
    color: #fff;
    cursor: pointer;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins {
    display: block;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .balance-details {
    display: flex;
    background: linear-gradient(180deg, #9C9FCA 0%, #6A6E9E 100%);
    box-shadow: 0px 4px 4px 0 rgba(0,0,0,.15);
    align-items: center;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .balance-details>div:first-child {
    display: flex;
    align-items: center;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .tips {
    text-align: center;
    font-weight: 400;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .games {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .games .cta {
    background: linear-gradient(180deg, #9C9FCA 0%, #6A6E9E 100%);
    box-shadow: 0px 4px 4px 0 rgba(0,0,0,.15);
    position: relative;
    cursor: pointer;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .games .cta img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: contain;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li.coins .games .cta h4 {
    text-align: center;
    text-transform: capitalize      ;
}

#app .welcome-popup .popup .popup-body .welcome-box ul.list li i {
    background-size: contain;
    display: inline-block;
}

#app .welcome-popup .popup .popup-footer {
    background: #3147BB;
}

#app .welcome-popup .popup .popup-footer .front {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(64,90,245,1) 0%, rgba(89,125,247,1) 100%);
    overflow: hidden;
    position: relative;
    z-index: 99;
}

#app .welcome-popup .popup .popup-footer button {
    cursor: pointer;
    color: var(--primary-color);
    font-family: 'nunito-bold';
    border: none;
    background: linear-gradient(180deg, rgba(249,250,255,1) 0%, rgba(179,196,255,1) 100%);
    box-shadow: 4px 5px 10px 0 rgba(0,0,0,.21);
}

#app .welcome-popup .popup2 {
    left: 50%;
    top: 50%;
    width: 7rem;
    transform: translate(-50%, -50%) scale(.8);
    position: absolute;
    color: #fff;
    min-height: 0;
    background: url('/images/homepage/welcome/v2/bg.png');
    background-size: 100% 97%;
    background-repeat: no-repeat;
    background-position: top center;
}

#app .welcome-popup .popup2 .close-button {
    position: absolute;
    width: .3rem;
    height: .3rem;
    right: -.25rem;
    top: .5rem;
    fill: #fff;
    cursor: pointer;
}

#app .welcome-popup .popup2 .content {
    position: relative;
    width: 5.4rem;
    padding-top: .83rem;
    padding-bottom: .28rem;
    margin: 0 auto;
}

#app .welcome-popup .popup2 .content .close-button {
    position: absolute;
    right: 0;
    width: .35rem;
    height: .35rem;
    cursor: pointer;
    fill: #fff;
}

#app .welcome-popup .popup2 .content .popup-header {
    height: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .28rem;
}

#app .welcome-popup .popup2 .content .popup-body {
    padding-top: .17rem;
    padding-bottom: .38rem;
}

#app .welcome-popup .popup2 .content .popup-body .welcome-box {
    height: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title {
    text-align: center;
    font-size: .22rem;
    color: #010101;
}

#app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title span {
    font-size: .23rem;
    color: #380fb0;
    font-family: nunito-semibold;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.85rem;
    margin: .05rem auto;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .coin {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: .28rem;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .coin .icon-coin {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url('/images/homepage/welcome/v2/ff-coin.png') no-repeat;
    /* background: url('/images/homepage/welcome/v2/Fifo_coin.gif') no-repeat; */
    background-size: contain;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details {
    width: auto;
    display: flex;
    flex-direction: column;
    color: #010101;
    font-size: .14rem;
    line-height: 1.2em;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details h4 {
    font-weight: 400;
    font-family: nunito-semibold;
    font-size: .22rem;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details p {
    width: 2.5rem;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details .coins {
    font-size: .53rem;
    font-family: nunito-extrabold;
    color: #380fb0;
    line-height: 1em;
    margin-top: .1rem;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details .coins span {
    font-family: nunito-extrabold;
    text-transform: lowercase;
}

#app .welcome-popup .popup2 .content .popup-body .coin-balance .details .coins span.smaller {
    font-size: .4rem;
}

#app .welcome-popup .popup2 .content .popup-body .list {
    border-top: 1px solid #000;
    margin-top: .2rem;
    display: flex;
    flex-direction: column;
    padding-top: .35rem;
    gap: .25rem;
}

#app .welcome-popup .popup2 .content .popup-body .list>div {
    color: #fff;
    padding: .15rem .15rem .08rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .rebate {
    background: url('/images/homepage/welcome/v2/rebate-box.png') no-repeat;
    background-size: 100% 100%;
}

#app .welcome-popup .popup2 .content .popup-body .list .rebate .icon-rebate {
    display: inline-block;
    height: .8rem;
    width: .8rem;
    background: url('/images/homepage/welcome/v2/rebate.png') no-repeat;
    background-size: contain;
}

#app .welcome-popup .popup2 .content .popup-body .list .top {
    padding-left: 1.7rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .top .value {
    display: flex;
}

#app .welcome-popup .popup2 .content .popup-body .list .top .value .text {
    font-size: .25rem;
    font-family: nunito-bold;
    line-height: 1.2em;
    padding-top: .1rem;
    margin-right: 0.12rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .top .value .number {
    font-size: .56rem;
    font-family: nunito-extrabold;
    line-height: 1.2em;
    overflow-x: auto;
}

#app .welcome-popup .popup2 .content .popup-body .list .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .17rem;
    padding-left: .05rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .bottom .label-date {
    font-size: .13rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher {
    background: url('/images/homepage/welcome/v2/voucher-box.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .top .value .text {
    margin-right: .05rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn,
#app .welcome-popup .popup2 .content .popup-body .list .mission .voucher-btn {
    display: inline-block;
    height: 100%;
    width: .75rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    right: .06rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all .3s ease-in-out;
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn:hover {
    transform: scale(1.05) translateY(-50%);
    transform-origin: top;
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn.en,
#app .welcome-popup .popup2 .content .popup-body .list .mission .voucher-btn.en {
    background-image: url('/images/homepage/welcome/v2/yellow-button-_en.gif');
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn.zh {
    background-image: url('/images/homepage/welcome/v2/yellow-button-_zh.gif');
}

#app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn.km {
    background-image: url('/images/homepage/welcome/v2/yellow-button-_km.gif');
}

#app .welcome-popup .popup2 .content .popup-body .list .mission {
    background: url('/images/homepage/welcome/v2/mission-box.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    min-height: 1.14rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .games {
    display: flex;
    padding: 0;
    gap: .22rem;
}

#app .welcome-popup .popup2 .content .popup-body .list .games .cta {
    width: 50%;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

#app .welcome-popup .popup2 .content .popup-body .list .games .cta:hover {
    transform: scale(1.05);
}

#app .welcome-popup .popup2 .content .popup-body .list .games .cta img {
    width: 100%;
}

#app .welcome-popup .popup2 .content .popup-footer .close-btn {
    width: 1.6rem;
    margin: auto;
    cursor: pointer;
    transition: all .3s ease-in-out;
    margin-bottom: .015rem;
}

#app .welcome-popup .popup2 .content .popup-footer .close-btn:hover {
    transform: scale(1.05);
}

#app .welcome-popup .popup2 .content .popup-footer .close-btn img {
    width: 100%;
}

@media (max-width: 1024px) {
    #app .welcome-popup .popup2 {
        width: 11.8rem;
    }

    #app .welcome-popup .popup2 .close-button {
        width: .5rem;
        height: .5rem;
        right: -.5rem;
        top: .8rem;
    }

    #app .welcome-popup .popup2 .content {
        width: 9.3rem;
        padding-top: 1.38rem;
    }

    #app .welcome-popup .popup2 .content .popup-header {
        height: 1.35rem;
        font-size: .45rem;
    }

    #app .welcome-popup .popup2 .content .popup-body {
        padding-top: .28rem;
        padding-bottom: .5rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box {
        height: 1.7rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title {
        font-size: .38rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title span {
        font-size: .39rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance {
        width: 7.8rem;
        margin: .1rem auto;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .coin {
        width: 2rem;
        height: 2rem;
        margin-right: .35rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details {
        font-size: .24rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details h4 {
        font-size: .39rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details .coins {
        font-size: .9rem;
        line-height: 1.2em;
        margin-top: .1rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details .coins span.smaller {
        font-size: .52rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details p {
        width: 4rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list {
        margin-top: .3rem;
        padding-top: .5rem;
        gap: .38rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list>div {
        padding: .3rem .3rem .15rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list>div.mission {
        min-height: 2.14rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .top {
        padding-left: 2.6rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .top .value .number {
        font-size: .92rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .top .value .text {
        font-size: .4rem;
        margin-right: .15rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .bottom {
        font-size: .27rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .bottom .label-date {
        font-size: .24rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn {
        width: 1.35rem;
        right: .12rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .games {
        gap: .38rem;
    }

    #app .welcome-popup .popup2 .content .popup-footer .close-btn {
        width: 2.5rem;
        margin: 0 auto .22rem;
    }
}

@media (max-width: 767px) {
    #app .welcome-popup .popup2 {
        /* top: 1.2rem; */
    }

    #app .welcome-popup .popup2 .close-button {
        width: .65rem;
        height: .65rem;
        right: 0rem;
        top: .6rem;
    }

    #app .welcome-popup .popup2 .content {
        padding-top: 1.55rem;
    }

    #app .welcome-popup .popup2 .content .popup-header {
        height: 1.58rem;
        font-size: .54rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box {
        height: 2.2rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title {
        font-size: .45rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .welcome-box .welcome-title span {
        font-size: .46rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance {
        width: 8.5rem;
        margin: .05rem auto;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .coin {
        width: 2.3rem;
        height: 2.3rem;
        margin-right: .45rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details {
        font-size: .3rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details h4 {
        font-size: .45rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .coin-balance .details p {
        width: 4.5rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list {
        margin-top: .35rem;
        padding-top: .7rem;
        gap: .4rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list>div {
        padding: .4rem .4rem .2rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .top .value .text {
        font-size: .45rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .top .value .number {
        font-size: 1rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .bottom {
        font-size: .33rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .bottom .label-date {
        font-size: .26rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .voucher .voucher-btn,
    #app .welcome-popup .popup2 .content .popup-body .list .mission .voucher-btn {
        width: 1.5rem;
        right: .12rem;
    }

    #app .welcome-popup .popup2 .content .popup-body .list .games {
        gap: .4rem;
    }

    #app .welcome-popup .popup2 .content .popup-footer .close-btn {
        width: 3rem;
        margin-bottom: .2rem;
    }
}

/* do not miss */
/* #app .donot-miss .donot-miss-list li:first-child {
    background-image: url(/images/homepage/donotmiss/1_.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

#app .donot-miss .donot-miss-list li:first-child .hover-box {
    background-image: url(/images/homepage/donotmiss/1.webp);
}

#app .donot-miss .donot-miss-list li:nth-child(2) {
    background-image: url(/images/homepage/donotmiss/2_.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

#app .donot-miss .donot-miss-list li:nth-child(2) .hover-box {
    background-image: url(/images/homepage/donotmiss/2.webp);
}

#app .donot-miss .donot-miss-list li:nth-child(3) {
    background-image: url(/images/homepage/donotmiss/3_.webp);
    background-size: cover;
    background-repeat: no-repeat;
}

#app .donot-miss .donot-miss-list li:nth-child(3) .hover-box {
    background-image: url(/images/homepage/donotmiss/3.webp);
} */

@media (max-width: 1024px) {
    #app .donot-miss .donot-miss-list li:first-child {
        background-image: url(/images/homepage/donotmiss/pad/1_.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    #app .donot-miss .donot-miss-list li:nth-child(2) {
        background-image: url(/images/homepage/donotmiss/pad/2_.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    #app .donot-miss .donot-miss-list li:nth-child(3) {
        background-image: url(/images/homepage/donotmiss/pad/3_.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

/* sport page */

#app .sports-panel .slider .pagination li .disabled {
    pointer-events: none;
}

.icon-IS {
    background-image: url(/images/sports/ibc_big.png);
    background-size: contain;
    display: inline-block;
    width: 3.31rem;
    height: 0.77rem;
}

.icon-SB {
    background: url(/images/sports/sbo_big.webp) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 2.55rem;
    height: 0.82rem;
}

.icon-MB {
    background: url(/images/sports/nova_big.webp) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 1.8rem;
    height: 0.77rem;
}

.icon-TP {
    background: url(/images/sports/nova_big.webp) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 1.8rem;
    height: 0.77rem;
}

.icon-CM {
    background: url(/images/sports/cmd_big.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 2.55rem;
    height: 0.72rem;
}

.icon-M8 {
    background: url(/images/sports/m8bet_big.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 2.55rem;
    height: 0.72rem;
}

.icon-WS {
    background: url(/images/sports/ws_big.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 2.55rem;
    height: 0.72rem;
}

.icon-DZ-SB {
    background: url(/images/sports/dz-sb_big.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 2.55rem;
    height: 0.72rem;
}

.icon-UG-SB {
    background: url(/images/sports/ug-sb_big.png) no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 2.55rem;
    height: 1.12rem;
}

.icon-small-IS,
.icon-small-SB,
.icon-small-MB,
.icon-small-TP,
.icon-small-CM,
.icon-small-M8,
.icon-small-WS,
.icon-small-DZ-SB,
.icon-small-UG-SB {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 1.05rem;
    height: 0.4rem;
    background-size: 100% 100%;
    filter: grayscale(1);
}

.swiper-slide-thumb-active .icon-small-IS,
li:hover .icon-small-IS,
.swiper-slide-thumb-active .icon-small-SB,
li:hover .icon-small-SB,
.swiper-slide-thumb-active .icon-small-MB,
li:hover .icon-small-MB,
.swiper-slide-thumb-active .icon-small-TP,
li:hover .icon-small-TP,
.swiper-slide-thumb-active .icon-small-CM,
li:hover .icon-small-CM ,
.swiper-slide-thumb-active .icon-small-M8,
li:hover .icon-small-M8,
.swiper-slide-thumb-active .icon-small-WS,
li:hover .icon-small-WS,
.swiper-slide-thumb-active .icon-small-DZ-SB,
li:hover .icon-small-DZ-SB,
.swiper-slide-thumb-active .icon-small-UG-SB,
li:hover .icon-small-UG-SB {
    filter: grayscale(0);
}

@media (max-width: 1024px) {
    .icon-small-IS,
    .icon-small-SB,
    .icon-small-MB,
    .icon-small-TP,
    .icon-small-CM,
    .icon-small-M8,
    .icon-small-WS,
    .icon-small-DZ-SB,
    .icon-small-UG-SB
     {
        width: 1.85rem;
        height: 0.7rem;
    }
}

.sports-panel #suspend_0_0 {
    animation: animate-suspend 10s linear infinite;
}

.sports-panel #suspend_0_1 {
    animation: animate-suspend-2 10s linear infinite;
}

.sports-panel #suspend_1_0 {
    animation: animate-suspend-1 18s linear infinite;
}

.sports-panel #suspend_1_1 {
    animation: animate-suspend-1-1 10s linear infinite;
}

.sports-panel #suspend_1_2 {
    animation: animate-suspend-1-2 15s linear infinite;
}

.sports-panel #suspend_2_0 {
    animation: animate-suspend-2-0 12s linear infinite;
}

.sports-panel #suspend_2_1 {
    animation: animate-suspend-2-1 12s linear infinite;
}

.sports-panel #suspend_2_2 {
    animation: animate-suspend-2-2 12s linear infinite;
}

@keyframes animate-suspend {
    50% {
        transform: translate3d(-15px, 25px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-2 {
    50% {
        transform: translate3d(-15px, 15px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-1 {
    50% {
        transform: translate3d(-5px, -15px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-1-1 {
    50% {
        transform: translate3d(15px, -25px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-1-2 {
    50% {
        transform: translate3d(-15px, -15px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-2-0 {
    50% {
        transform: translate3d(-15px, 15px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-2-1 {
    50% {
        transform: translate3d(25px, -25px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-2-2 {
    50% {
        transform: translate3d(-15px, 25px, 0) rotate(10deg);
    }
}

.icon-holder {
    position: absolute;
    top: 0.1rem;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.icon-holder .hot-icon {
    width: 0.32rem;
}

.icon-holder .new-icon {
    width: 0.326rem !important;
}

.provider-slots-icon .hot-icon {
    width: 0.32rem;
}

.provider-slots-icon .new-icon {
    width: 0.326rem !important;
}

@media screen and (max-width: 1024px) {
    .icon-holder {
        top: 0;
    }

    .icon-holder .hot-icon,
    .icon-holder .new-icon {
        width: .5rem !important;
    }

    .wap-page .icon-holder .hot-icon,
    .wap-page .icon-holder .new-icon {
        width: 1rem !important;
    }
}

/* esport page */

#app .esports-panel .slider .pagination li .disabled {
    pointer-events: none;
}

#root .esports-panel .slider .slider-container>div>div img {
    margin-top: -1.1rem;
}

.icon-SE,
.icon-TE {
    background: url(/images/e-sports/saba_big.webp) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 2.55rem;
    height: 0.82rem;
}

.icon-small-SE,
.icon-small-TE {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 1.05rem;
    height: 0.4rem;
    background-size: 100% 100%;
    filter: grayscale(1);
}

@media (max-width: 1024px) {
    .icon-small-SE,
    .icon-small-TE {
        width: 1.65rem;
        height: 0.65rem;
    }
}

.swiper-slide-thumb-active .icon-small-SE,
li:hover .icon-small-SE,
.swiper-slide-thumb-active .icon-small-TE,
li:hover .icon-small-TE {
    filter: grayscale(0);
}

/* Cockfight */

.icon-SV {
    background: url(/images/cockfight/sv.png) no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 2.55rem;
    height: 1.1rem;
}

.icon-small-SV {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 1.05rem;
    height: 0.4rem;
    background-size: 100% 100%;
    filter: grayscale(1);
}

.swiper-slide-thumb-active .icon-small-SV,
li:hover .icon-small-SV {
    filter: grayscale(0);
}

/* casino page */
#app .casino-panel {
    height: 8.2rem;
}

#app .casino-panel .slider .pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: 5rem;
    align-items: start;
    justify-content: center;
}

#app .casino-panel .slider .pagination li {
    margin-bottom: 0;
}

#app .casino-panel .slider .pagination>div {
    flex-wrap: wrap;
}

#app .casino-panel .slider .pagination .disabled, #app .sports-panel .slider .pagination .disabled, #app .esports-panel .slider .pagination .disabled {
    pointer-events: none;
}

@media (max-width: 1024px) {
    #app .casino-panel {
        height: 11.25rem;
    }
}

.icon {
    display: inline-block;
    background-size: 100% 100%;
    width: 2.51rem;
    height: 0.83rem;
}

.icon-EG {
    background-image: url(/images/casino/evolution_big.webp);
}

.icon-E0-LC {
    background-image: url(/images/casino/evolution_big.webp);
}

.icon-bal {
    background-image: url(/images/casino/playtech_big.webp);
}

.icon-AB {
    background-image: url(/images/casino/allbet_big.webp);
}

.icon-AL {
    background-image: url(/images/casino/ag_big.png);
}

.icon-TL {
    background-image: url(/images/casino/ace_big.png);
    width: 3.5rem;
    height: 0.9rem;
}

.icon-SA {
    background-image: url(/images/casino/sa_gaming_big.png);
}

.icon-GD {
    background-image: url(/images/casino/green_dragon_big.webp);
}

.icon-WM {
    background-image: url(/images/casino/wm_big.webp);
}

.icon-SX {
    background-image: url(/images/casino/ae_sexy_big.webp);
}

.icon-PG {
    background-image: url(/images/casino/pragmatic_play_big.webp);
}

.icon-GMS-G0-LC-0 {
    background-image: url(/images/casino/gameplay_big.webp);
}

.icon-BG {
    background-image: url(/images/casino/big_gaming_big.webp);
}

.icon-ML {
    background-image: url(/images/casino/mg_live_big.png);
    width: 3.07rem;
    height: 0.84rem;
}

.icon-DG {
    background-image: url(/images/casino/dream_gaming_big.png);
    width: 2.07rem;
    height: 1.26rem;
}

.icon-JK {
    background-image: url(/images/casino/joker_big.png);
}

.icon-JI {
    background-image: url(/images/casino/jili_big.webp);
    width: 1.8rem;
}

.icon-WE {
    background-image: url(/images/casino/world_entertainment_big.webp);
    width: 100%;
    height: 1.15rem;
}

.icon-GB-LC {
    background-image: url(/images/casino/bbin_big.png);
    width: 2.25rem;
    height: .95rem;
}

.icon-XP-LC {
    background-image: url(/images/casino/xpro_big.webp);
    width: 2.25rem;
    height: 1.15rem;
}

.icon-small-EG,
.icon-small-E0-LC,
.icon-small-bal,
.icon-small-TL,
.icon-small-AB,
.icon-small-SA,
.icon-small-GD,
.icon-small-WM,
.icon-small-SX,
.icon-small-PG,
.icon-small-GMS-G0-LC-0,
.icon-small-BG,
.icon-small-ML,
.icon-small-DG,
.icon-small-JK,
.icon-small-JI,
.icon-small-WE,
.icon-small-GB-LC,
.icon-small-XP-LC {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 1.05rem;
    height: 0.4rem;
    background-size: 100% 100%;
    filter: grayscale(1);
}

.icon-small-TL {
    width: 1.05rem;
    height: 0.24rem;
}

@media (max-width: 1024px) {
    .icon-small-EG,
    .icon-small-E0-LC,
    .icon-small-bal,
    .icon-small-TL,
    .icon-small-AB,
    .icon-small-SA,
    .icon-small-GD,
    .icon-small-WM,
    .icon-small-SX,
    .icon-small-PG,
    .icon-small-GMS-G0-LC-0,
    .icon-small-BG,
    .icon-small-ML,
    .icon-small-DG,
    .icon-small-JK,
    .icon-small-JI,
    .icon-small-WE,
    .icon-small-GB-LC,
    .icon-small-XP-LC {
        width: 1.5rem;
        height: 0.6rem;
    }
}

.swiper-slide-thumb-active .icon-small-EG,
li:hover .icon-small-EG,
.swiper-slide-thumb-active .icon-small-E0-LC,
li:hover .icon-small-E0-LC,
.swiper-slide-thumb-active .icon-small-bal,
li:hover .icon-small-bal,
.swiper-slide-thumb-active .icon-small-AB,
li:hover .icon-small-AB,
.swiper-slide-thumb-active .icon-small-SA,
li:hover .icon-small-SA,
.swiper-slide-thumb-active .icon-small-GD,
li:hover .icon-small-GD,
.swiper-slide-thumb-active .icon-small-WM,
li:hover .icon-small-WM,
.swiper-slide-thumb-active .icon-small-SX,
li:hover .icon-small-SX,
.swiper-slide-thumb-active .icon-small-PG,
li:hover .icon-small-PG,
.swiper-slide-thumb-active .icon-small-GMS-G0-LC-0,
li:hover .icon-small-GMS-G0-LC-0,
.swiper-slide-thumb-active .icon-small-BG,
li:hover .icon-small-BG,
.swiper-slide-thumb-active .icon-small-TL,
li:hover .icon-small-TL,
.swiper-slide-thumb-active .icon-small-ML,
li:hover .icon-small-ML,
.swiper-slide-thumb-active .icon-small-DG,
li:hover .icon-small-DG,
.swiper-slide-thumb-active .icon-small-JK,
li:hover .icon-small-JK,
.swiper-slide-thumb-active .icon-small-JI,
li:hover .icon-small-JI,
.swiper-slide-thumb-active .icon-small-WE,
li:hover .icon-small-WE,
.swiper-slide-thumb-active .icon-small-GB-LC,
li:hover .icon-small-GB-LC,
.swiper-slide-thumb-active .icon-small-XP-LC,
li:hover .icon-small-XP-LC {
    filter: grayscale(0);
}

#app .casino-panel .slider .slider-container>div .container .suspend {
    bottom: 0;
    left: 2.5rem;
    opacity: 0.001;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.EG .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.EG .suspend_1 {
    left: 6.5rem;
    bottom: 0.8rem;
    width: 1.2rem;
    height: 1.2rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.EG .suspend_2 {
    left: 0.4rem;
    bottom: 2.5rem;
    width: 1rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.bal .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.bal .suspend_1 {
    left: 6.5rem;
    bottom: 1rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.bal .suspend_2 {
    left: 5.2rem;
    bottom: 2.5rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.AB .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.AB .suspend_1 {
    left: 4.8rem;
    bottom: 2.5rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.AB .suspend_2 {
    left: 0.4rem;
    bottom: 3.2rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SA .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SA .suspend_1 {
    left: 5.5rem;
    bottom: 1.8rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SA .suspend_2 {
    left: 6.6rem;
    bottom: 3.3rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GD .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GD .suspend_1 {
    left: 6.6rem;
    bottom: 2.9rem;
    width: 1.3rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GD .suspend_2 {
    left: 0.35rem;
    bottom: 2.6rem;
    width: .9rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.WM .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.WM .suspend_1 {
    left: 6.5rem;
    bottom: 2.65rem;
    width: 1.3rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.WM .suspend_2 {
    left: 0.45rem;
    bottom: 1.3rem;
    width: 1.1rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_1 {
    left: 6rem;
    bottom: 3.6rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_2 {
    left: 4.6rem;
    bottom: 3rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_3 {
    left: 6.2rem;
    bottom: 2.8rem;
    transition: all 0.8s ease-out 0.8s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.PG .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.PG .suspend_1 {
    left: 5.3rem;
    bottom: 2.5rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.PG .suspend_2 {
    left: 6.6rem;
    bottom: 3.3rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GMS-G0-LC-0 .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GMS-G0-LC-0 .suspend_1 {
    left: .2rem;
    bottom: 1.8rem;
    width: 0.85rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GMS-G0-LC-0 .suspend_2 {
    left: 6.3rem;
    bottom: 3.2rem;
    width: 1.4rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.BG .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.BG .suspend_1 {
    left: 5.8rem;
    bottom: 3.3rem;
    width: .95rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.BG .suspend_2 {
    left: 0rem;
    bottom: 2.2rem;
    width: 1.4rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.ML .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.ML .suspend_1 {
    left: 5.4rem;
    bottom: 2.5rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.ML .suspend_2 {
    left: 6.2rem;
    bottom: 3.6rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.DG .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.DG .suspend_1 {
    left: 5.4rem;
    bottom: 2.58rem;
    width: 1.48rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.DG .suspend_2 {
    left: 0.2rem;
    bottom: 2rem;
    width: 1.05rem;
    transition: all 0.8s ease-out 0.6s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.TL .suspend {
    opacity: 1;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.TL .suspend_1 {
    left: 5.1rem;
    bottom: 2.95rem;
    width: 1.3rem;
    transition: all 0.8s ease-out 0.4s;
}

#app .casino-panel .slider .slider-container>div .swiper-slide-active .container.TL .suspend_2 {
    left: 0rem;
    bottom: 2rem;
    width: .9rem;
    transition: all 0.8s ease-out 0.6s;
}

.casino-panel .container.EG .suspend_1 {
    animation: animate-suspend 15s linear infinite;
}

.casino-panel .container.EG .suspend_2 {
    animation: animate-suspend-2 10s linear infinite;
}

.casino-panel .container.GD .suspend_1 {
    animation: animate-suspend 15s linear infinite;
}

.casino-panel .container.GD .suspend_2 {
    animation: animate-suspend-2 10s linear infinite;
}

.casino-panel .container.WM .suspend_1 {
    animation: animate-suspend-1 18s linear infinite;
}

.casino-panel .container.WM .suspend_2 {
    animation: animate-suspend-1-1 10s linear infinite;
}

.casino-panel .container.BG .suspend_1 {
    animation: animate-suspend-2-0 10s linear infinite;
}

.casino-panel .container.BG .suspend_2 {
    animation: animate-suspend-2-1 16s linear infinite;
}

.casino-panel .container.bal .suspend_1 {
    animation: animate-suspend-3-0 12s linear infinite;
}

.casino-panel .container.bal .suspend_2  {
    animation: animate-suspend-3-1 12s linear infinite;
}

.casino-panel .container.SX .suspend_1  {
    animation: animate-suspend-7-0 12s linear infinite;
}

.casino-panel .container.SX .suspend_2  {
    animation: animate-suspend-7-1 12s linear infinite;
}

.casino-panel .container.SX .suspend_3  {
    animation: animate-suspend-4-2 16s linear infinite;
}

.casino-panel .container.TL .suspend_1  {
    animation: animate-suspend-5-0 12s linear infinite;
}

.casino-panel .container.TL .suspend_2  {
    animation: animate-suspend-5-1 12s linear infinite;
}

.casino-panel .container.PG .suspend_1 {
    animation: animate-suspend-6-0 8s linear infinite;
}

.casino-panel .container.PG .suspend_2 {
    animation: animate-suspend-6-1 15s linear infinite;
}

.casino-panel .container.AB .suspend_1 {
    animation: animate-suspend-4-0 20s linear infinite;
}

.casino-panel .container.AB .suspend_2 {
    animation: animate-suspend-4-1 10s linear infinite;
}

.casino-panel .container.ML .suspend_1 {
    animation: animate-suspend-8-0 10s linear infinite;
}

.casino-panel .container.ML .suspend_2 {
    animation: animate-suspend-8-1 15s linear infinite;
}

.casino-panel .container.SA .suspend_1 {
    animation: animate-suspend-9-0 13s linear infinite;
}

.casino-panel .container.SA .suspend_2 {
    animation: animate-suspend-9-1 10s linear infinite;
}

.casino-panel .container.GMS-G0-LC-0 .suspend_1 {
    animation: animate-suspend-10-0 15s linear infinite;
}

.casino-panel .container.GMS-G0-LC-0 .suspend_2 {
    animation: animate-suspend-10-1 10s linear infinite;
}

.casino-panel .container.DG .suspend_1 {
    animation: animate-suspend-11-0 15s linear infinite;
}

.casino-panel .container.DG .suspend_2 {
    animation: animate-suspend-11-1 6s linear infinite;
}

@keyframes animate-suspend {
    50% {
        transform: translate3d(5px, 20px, 0) rotate(20deg);
    }
}

@keyframes animate-suspend-2 {
    50% {
        transform: translate3d(-25px, 15px, 0) rotate(-5deg);
    }
}

@keyframes animate-suspend-1 {
    50% {
        transform: translate3d(-25px, -5px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-1-1 {
    50% {
        transform: translate3d(-5px, 25px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-2-0 {
    50% {
        transform: translate3d(5px, -5px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-2-1 {
    50% {
        transform: translate3d(25px, -15px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-3-0 {
    50% {
        transform: translate3d(5px, -25px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-3-1 {
    50% {
        transform: translate3d(25px, -15px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-4-0 {
    50% {
        transform: translate3d(25px, -15px, 0) rotate(-5deg);
    }
}

@keyframes animate-suspend-4-1 {
    50% {
        transform: translate3d(5px, -15px, 0) rotate(-5deg);
    }
}

@keyframes animate-suspend-4-2 {
    50% {
        transform: translate3d(15px, -15px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-5-0 {
    50% {
        transform: translate3d(-25px, 15px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-5-1 {
    50% {
        transform: translate3d(5px, 5px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-6-0 {
    50% {
        transform: translate3d(15px, 15px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-6-1 {
    50% {
        transform: translate3d(-25px, 15px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-7-0 {
    50% {
        transform: translate3d(-15px, -5px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-7-1 {
    50% {
        transform: translate3d(25px, -15px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-8-0 {
    50% {
        transform: translate3d(5px, 25px, 0) rotate(15deg);
    }
}

@keyframes animate-suspend-8-1 {
    50% {
        transform: translate3d(5px, 35px, 0) rotate(30deg);
    }
}

@keyframes animate-suspend-9-0 {
    50% {
        transform: translate3d(5px, 15px, 0) rotate(10deg);
    }
}

@keyframes animate-suspend-9-1 {
    50% {
        transform: translate3d(-5px, -15px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-10-0 {
    50% {
        transform: translate3d(25px, -15px, 0) rotate(-5deg);
    }
}

@keyframes animate-suspend-10-1 {
    50% {
        transform: translate3d(-15px, 25px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-11-0 {
    50% {
        transform: translate3d(30px, -25px, 0) rotate(-15deg);
    }
}

@keyframes animate-suspend-11-1 {
    50% {
        transform: translate3d(-10px, 25px, 0) rotate(-16deg);
    }
}

@media (max-width: 1024px) {
    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SA .suspend_1 {
        left: 8.3rem;
        bottom: 3.2rem;
        width: 2rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SA .suspend_2 {
        left: 10.7rem;
        bottom: 4.7rem;
        width: 1.5rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.DG .suspend_1 {
        left: 8rem;
        bottom: 3.5rem;
        width: 2rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.DG .suspend_2 {
        width: 1.6rem;
        left: 0.6rem;
        bottom: 2.6rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.AB .suspend_1 {
        left: 8.7rem;
        bottom: 2.2rem;
        width: 1.3rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.AB .suspend_2 {
        left: 7.1rem;
        width: 1.9rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GD .suspend_1 {
        left: 9.8rem;
        bottom: 4.5rem;
        width: 1.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GD .suspend_2 {
        left: .7rem;
        bottom: 3.2rem;
        width: 1.3rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.WM .suspend_1 {
        left: 9.6rem;
        bottom: 3.6rem;
        width: 1.6rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.WM .suspend_2 {
        left: 1rem;
        bottom: 2.5rem;
        width: 1.5rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.BG .suspend_1 {
        left: 9.8rem;
        width: 1.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.BG .suspend_2 {
        left: 7.25rem;
        bottom: 4.2rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.EG .suspend_1 {
        left: 10.3rem;
        bottom: 4.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.EG .suspend_2 {
        width: 2rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.bal .suspend_1 {
        left: 10rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.bal .suspend_2 {
        left: 8rem;
        bottom: 3.4rem;
        width: 1.5rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.TL .suspend_1 {
        left: 9rem;
        bottom: 5.2rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.TL .suspend_2 {
        left: 7rem;
        bottom: 4rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_1 {
        left: 8rem;
        bottom: 4.6rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_2 {
        left: 6.2rem;
        bottom: 3.7rem;
        width: 2.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.SX .suspend_3 {
        left: 8.5rem;
        width: 3.6rem;
        bottom: 3.3rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.PG .suspend_1 {
        left: 6.8rem;
        bottom: 4.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.PG .suspend_2 {
        left: 9.8rem;
        width: 1.8rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.ML .suspend_1 {
        left: 7.4rem;
        bottom: 3.6rem;
        width: 1.5rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.ML .suspend_2 {
        left: 8.8rem;
        bottom: 5.2rem;
        width: 1.5rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GMS-G0-LC-0 .suspend_1 {
        left: 0.5rem;
        width: 1.3rem;
    }

    #app .casino-panel .slider .slider-container>div .swiper-slide-active .container.GMS-G0-LC-0 .suspend_2 {
        left: 9.3rem;
        bottom: 4.2rem;
        width: 2rem;
    }
}

/* mobile casino toolbar */

#app .wap-page>div .casino-page .casino-box-container .brand-page .casino-list-box .ani-ul .maintenance-hover-box {
    margin-top: -4.6rem;
}

#app .wap-page>div .casino-page .casino-box-container .brand-page .casino-list-box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.2rem;
}

#app .wap-page>div .casino-page .casino-box-container .brand-page .casino-list-box ul li {
    height: auto;
    width: 100%;
}

#app .wap-page>div .casino-page .casino-box-container .brand-page .casino-list-box ul li .hoticon-casino-container {
    transform: translate(41%, 299%);
}

/* mobile slot app */
#app .wap-page>div .slots-page .slots-box-container .gamelist-page .scr-info .btn-download {
    margin-bottom: 0.5rem;
}

#app .wap-page>div .slots-page .slots-box-container .gamelist-page .scr-info .btn-download:last-child {
    margin-bottom: 1.87rem;
}

#app .slots-games .slots-games-items .slots-games-right .scr-panel .scr-info .btn-download {
    margin-bottom: 0.25rem;
}

#app .slots-games .slots-games-items .slots-games-right .scr-panel .scr-info .btn-download:last-child {
    margin-bottom: 0.7rem;
}

/* slot */

.icon-search {
    background: url(/images/mobile/search.png) no-repeat;
    background-size: 100% 100%;
}

#app .slots-games .slots-games-items .brand-list li .maintenance-hover-box {
    background-color: rgba(0, 0, 0, 0.4117647059);
}

#app .hot-provider-slots {
    z-index: 1;
}

.slots-games .slots-games-right .swiper {
    margin-left: 1rem;
}

.slots-games .slots-games-right .swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

.slots-games .slots-games-right .swiper .swiper-wrapper img {
    width: 50%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    margin: auto;
}

.slots-games .swiper-button-next:after,
.slots-games .swiper-button-prev:after {
    color: #9ea9bd;
    font-size: 0.5rem;
    font-weight: bold;
}

.slots-page .app-page .swiper .swiper-wrapper {
    display: flex;
    align-items: center;
}

.slots-page .app-page .swiper .swiper-wrapper img {
    width: 65%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    margin: auto;
}

.slots-page .swiper-button-next:after,
.slots-page .swiper-button-prev:after {
    color: #9ea9bd;
    font-size: 0.6rem;
    font-weight: bold;
}

.slots-games-items .icon-box img {
    width: 24px;
    height: 24px;
    filter: grayscale(1);
}

@media (max-width: 1024px) {
    .slots-games-items .icon-box img {
        width: .25rem;
        height: .25rem;
    }
}

.slots-games-items li:hover .icon-box img,
.slots-games-items .on .icon-box img {
    filter: grayscale(0);
}

#app .slots-banner .bottom-item {
    bottom: 21px;
}

#app .slots-banner .bottom-item .center .slider-container>div>div>span:first-child {
    color: #000000;
    font-size: 0.14rem;
}

#app .slots-banner .bottom-item .center .slider-container>div>div>img {
    width: 2rem;
    height: auto;
}

@media (max-width: 1024px) {
    #app .slots-banner .bottom-item .center .slider-container>div>div>img {
        width: 3.5rem;
        height: .94rem;
        top: .75rem;
    }

    #app .slots-banner .bottom-item .center .slider-container>div>div>span:first-child {
        top: .18rem;
        font-size: 0.2rem;
    }
}

.slot-jackpot-carousel {
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.type-game-list-box .game-content li .img-box {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#app .wap-page>div .slots-page .slots-box-container .gamelist-page .tools-box .icon-box img {
    width: 0.82rem;
}

#app .game-content li>p>span {
    width: 100%;
}

.provider-slots-icon {
    position: absolute;
    display: grid;
    background-size: 100% 100%;
    height: 0.41rem;
    right: 0;
    z-index: 1;
}

/* mobile slot toolbar */

#app .wap-page>div .slots-page .slots-box-container .brand-page .slots-list-box .ani-ul .maintenance-hover-box {
    margin-top: -4.6rem;
}

#app .wap-page>div .slots-page .slots-box-container .brand-page .slots-list-box ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 0.2rem;
}

#app .wap-page>div .slots-page .slots-box-container .brand-page .slots-list-box ul li {
    height: auto;
    width: 100%;
}

#app .wap-page>div .slots-page .slots-box-container .brand-page .slots-list-box ul li .hoticon-slots-container {
    transform: translate(41%, 299%);
}

/* slot details */

.type-game-brandList-box .game-content li .img-box {
    background-size: cover;
    background-position: center top;
}


/* fishing mobile toolbar */

#app .wap-page>div .fishing-page .fishing-box-container .brand-page .fishing-list-box ul li {
    height: auto;
}


/* fishing */

.provider-games-items .icon-box img {
    width: 24px;
    height: 24px;
    filter: grayscale(1);
}

@media (max-width: 1024px) {
    .provider-games-items .icon-box img {
        width: .25rem;
        height: .25rem;
    }
}

.provider-games-items li:hover .icon-box img,
.provider-games-items .on .icon-box img {
    filter: grayscale(0);
}

.type-game-brandList-box .game-content li .img-box {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* VIP */

#app .vip-page .vip-panel .vip-table .table-type td:not(:first-child) {
    text-transform: capitalize;
}

#app .vip-page .m-vip-panel .vip-table .swiper-button-next {
    right: 0rem;
    left: auto;
}

#app .vip-page .m-vip-panel .vip-table .swiper-button-prev {
    left: 4.1rem;
    right: auto;
}

#app .vip-page .m-vip-panel .vip-table .swiper-button-next,
#app .vip-page .m-vip-panel .vip-table .swiper-button-prev {
    color: #50545b;
    top: 1.4rem;
}

#app .vip-page .m-vip-panel .vip-table .swiper-button-next::after,
#app .vip-page .m-vip-panel .vip-table .swiper-button-prev::after {
    font-size: 0.6rem;
}

#app .vip-page .m-vip-panel .vip-table .row-title-content {
    z-index: 1;
    padding: 34px 0 0 8px;
    left: 0px;
}

#app .vip-page .m-vip-panel .vip-table .type-details .details-content {
    width: 68%;
}

#app .vip-page .m-vip-panel .vip-table .type-details .details-content:first-child,
#app .vip-page .m-vip-panel .vip-table .type-details .details-content:nth-child(3),
#app .vip-page .m-vip-panel .vip-table .type-details .details-content:nth-child(5) {
    padding-top: .82rem;
    padding-bottom: .2rem;
}

#app .vip-page .m-vip-panel .vip-table .type-details .details-content:nth-child(8),
#app .vip-page .m-vip-panel .vip-table .type-details .details-content:nth-child(9) {
    padding-top: .9rem;
    padding-bottom: .62rem;
}

.special-wording {
    color: #ffda00;
    font-size: 13px
}

#app .m-vip-panel .special-wording {
    color: #ffda00;
    font-size: .28rem;
}

/* mobile vip */
#app .m-vip-panel .vip-status .progress-status .status-level>div .memberGroupLevelArrowContainer hr {
    height: 5px;
}

#app .m-vip-panel .vip-status .progress-status .status-details {
    color: #d2d2d2;
    display: flex;
    margin: 0.4rem 0 0.2rem;
    padding: 0.18rem;
    border-radius: 0.05rem;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    background: #2e3037;
}

#app .m-vip-panel .vip-status .progress-status .status-details>div {
    text-align: center;
}

#app .m-vip-panel .vip-status .progress-status .status-details>div.line {
    height: 0.4rem;
    width: 0.01rem;
    background: #7a7a7a;
}

#app .m-vip-panel .vip-status .progress-status .status-details>div .title {
    font-family: nunito-bold;
    font-size: 0.33rem;
    line-height: 0.48rem;
    margin-bottom: 0.12rem;
}

#app .m-vip-panel .vip-status .progress-status .status-details>div .amount {
    font-size: 0.42rem;
    line-height: 0.52rem;
    color: #fff;
}

#app .vip-panel .vip-status .progress-status .status-level>div .memberGroupLevelArrowContainer hr {
    height: 16px;
}

#app .vip-panel .vip-status .progress-status .status-level .all-level p {
    text-transform: uppercase;
}

#app .vip-panel .vip-status .progress-status .status-details {
    color: #d2d2d2;
    display: flex;
    margin-bottom: 0.3rem;
    padding: 0.18rem;
    border-radius: 0.05rem;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    background: #2e3037;
}

#app .vip-panel .vip-status .progress-status .status-details>div {
    text-align: center;
}

#app .vip-panel .vip-status .progress-status .status-details>div.line {
    height: 0.4rem;
    width: 0.01rem;
    background: #7a7a7a;
}

#app .vip-panel .vip-status .progress-status .status-details>div .title {
    font-weight: 700;
    font-size: 0.16rem;
    line-height: 0.16rem;
    margin-bottom: 0.07rem;
    text-transform: uppercase;
}

#app .vip-panel .vip-status .progress-status .status-details>div .amount {
    font-size: 0.2rem;
    line-height: 0.2rem;
    color: #fff;
}

/* #app .vip-panel .vip-status .status-img {
    top: -1.1rem;
} */

#app .vip-panel .vip-box {
    padding-bottom: 2rem;
}

#app .vip-panel .vip-box .swiper-slide-prev,
#app .vip-panel .vip-box .swiper-slide-next {
    opacity: 0;
    transition: opacity 1s ease-out;
}

#app .vip-panel .vip-box .swiper-slide.swiper-slide-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend .suspend:first-of-type,
#app .vip-panel .slider .slider-container>div .container .vip-suspend .suspend:nth-of-type(2),
#app .vip-panel .slider .slider-container>div .container .vip-suspend .suspend:nth-of-type(3) {
    bottom: 0;
    right: 6.5rem;
    opacity: 0.001;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend.out .suspend {
    opacity: 1;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend.out .suspend:first-of-type {
    right: -0.5rem;
    bottom: 1.2rem;
    transition: all 1s ease-out 0.5s;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend.out .suspend:nth-of-type(2) {
    right: 0.5rem;
    bottom: 0.2rem;
    transition: all 1s ease-out 0.8s;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend #suspend_0_0 {
    animation: animate-suspend 10s linear infinite;
}

#app .vip-panel .slider .slider-container>div .container .vip-suspend #suspend_0_1 {
    animation: animate-suspend-2 10s linear infinite;
}

@keyframes animate-suspend {
    50% {
        transform: translate3d(15px, 15px, 0) rotate(-10deg);
    }
}

@keyframes animate-suspend-2 {
    50% {
        transform: translate3d(15px, 15px, 0) rotate(10deg);
    }
}

/* promotion details */

.promosDetail-popup.promosApply-popup {
    z-index: 99999 !important;
}

/* promotion mobile */
#app .wap-page>div .promos-page .promos-box-container .promos-panel .container .promos-box .promos-list li .bottom-box .time-box {
    position: relative;
    display: flex;
    flex-direction: row;
    left: initial;
    bottom: initial;
    align-items: flex-start;
    font-size: 0.32rem;
    padding-top: 0.4rem;
}

#app .wap-page>div .promos-page .promos-box-container .promos-panel .container .promos-box .promos-list li .bottom-box .time-box>span {
    font-size: inherit;
}

/* sponsorship */
.sponsorship-container {
    color: rgb(134, 151, 162);
    background: #000;
}

.sponsorship-container .sponsorship-row .list-item.top {
    height: 8rem;
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content {
    width: 13rem;
    margin: auto;
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content>div {
    height: 50%;
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content>div .before_title {
    font: 0.36rem/1 Nunito-Regular;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content>div .title {
    font: 0.48rem/1.2 Nunito-Bold;
    text-transform: uppercase;
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content>div .subtitle {
    font: 0.3rem/1.2 Nunito-Bold;
    color: rgb(255, 255, 255);
}

.sponsorship-container .sponsorship-row .list-item .sponsorship-content>div .desc {
    font: 0.16rem Nunito-Regular;
    color: rgb(127, 127, 127);
    width: 42%;
}

.component0.psy .list-item.top .pointer-item {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("/images/sponsorship/psy/banner.webp");
    height: 6.8rem;
}

.component0 .list-item.top .pointer-item .sponsorship-content>div {
    padding: .5rem 0px 0px;
}

.component0 .list-item.top .pointer-item .sponsorship-content>div .before_title {
    margin-left: 7.6rem;
}

.component0 .list-item.top .pointer-item .sponsorship-content>div .title {
    margin: 0px 0px 0.15rem 7.6rem;
}

.component0 .list-item.top .pointer-item .sponsorship-content>div .subtitle {
    margin: 0px 0px 0.12rem 7.6rem;
}

.component0 .list-item.top .pointer-item .sponsorship-content>div .desc {
    margin-left: 7.6rem;
    width: 50%;
}

.component1 .list-item.top .pointer-item {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("/images/sponsorship/kingkong/banner.webp");
    height: 6.8rem;
}

.component1.wow .list-item.top .pointer-item {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("/images/sponsorship/wow/banner.webp");
    height: 6.8rem;
}

.component1 .list-item.top .pointer-item .sponsorship-content>div {
    padding: 1.5rem 0px 0px;
}

.component1 .list-item.top .pointer-item .sponsorship-content>div .title {
    margin: 0px 0px 0.15rem 0.3rem;
}

.component1 .list-item.top .pointer-item .sponsorship-content>div .subtitle {
    margin: 0px 0px 0.12rem 0.3rem;
}

.component1 .list-item.top .pointer-item .sponsorship-content>div .desc {
    margin-left: 0.3rem;
}

.component2 .list-item.top .pointer-item {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("/images/sponsorship/villarreal/banner.webp");
    height: 6.8rem;
}

.component2.polla .list-item.top .pointer-item {
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url("/images/sponsorship/polla/banner.webp");
    height: 6.8rem;
}

.component2 .list-item.top .pointer-item .sponsorship-content>div {
    padding: 1.5rem 0px 0px;
}

.component2 .list-item.top .pointer-item .sponsorship-content>div .before_title {
    margin-left: 7.6rem;
}

.component2 .list-item.top .pointer-item .sponsorship-content>div .title {
    margin: 0px 0px 0.15rem 7.6rem;
}

.component2 .list-item.top .pointer-item .sponsorship-content>div .subtitle {
    margin: 0px 0px 0.12rem 7.6rem;
}

.component2 .list-item.top .pointer-item .sponsorship-content>div .desc {
    margin-left: 7.6rem;
}

.wap-page .sponsorship-container {
    word-break: break-all;
}

.wap-page .sponsorship-container .list-item .pointer-item {
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content {
    width: auto;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div {
    height: 50%;
    padding: 5.2rem 0px 1rem 0.7rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .carousel {
    display: block;
    overflow-x: scroll;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .carousel>div {
    font: 700 0.14rem Nunito-Regular;
    width: auto;
    white-space: nowrap;
    overflow: visible;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .carousel>div>div {
    display: inline-block;
    width: 27%;
    margin: 0px 0.15rem 0px 0px;
    border-radius: 0.06rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .carousel>div>div .lazy-load-image-background {
    color: transparent;
    display: inline-block;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .carousel>div>div .lazy-load-image-background .slider-image {
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .title {
    font: 0.36rem Nunito-ExtraBold;
    margin: 0.6rem 0px 0px;
    width: 11rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .title .left {
    font: 0.5rem/1 Nunito-Regular;
    color: #fff;
    text-transform: uppercase;
    margin-right: 0.08rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .title .right {
    font: 0.65rem Nunito-ExtraBold;
    text-transform: uppercase;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .subtitle {
    font: 0.45rem Nunito-Bold;
    color: #fff;
    margin: 0px 0px 0.5rem;
    width: 11rem;
}

.wap-page .sponsorship-container .list-item .pointer-item .sponsorship-content>div .desc {
    font: 0.36rem/1.2 Nunito-Regular;
    color: #7F7F7F;
    margin: 0px 0.7rem 0px 0px;
    width: auto;
    word-break: normal;
}

/* spinner */

.overlap {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.spinner-container {
    /* width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #0e0e0e;
    opacity: 1;
    z-index: 99999 */
}

.spinner-block {
    /* margin: -17px 0 0 -17px;
    position: absolute;
    top: 30%;
    left: 45% */
}

.spinner {
    margin: 10px;
    width: 84px;
    height: 38px;
    position: relative;
    /* background: url(https://www.westernunion.com/etc/designs/westernunion/responsive_css/images/wuspinner.gif) */
}

.spinner-text {
    color: #FFF
}

.spinner-container .main-loading-spinner {
    width: 200px;
    height: 200px;
}

.spinner-container .main-loading-spinner .main-circle {
    border: 2px solid rgb(85 32 232);
    border-right: 2px solid transparent;
    border-left: 2px solid transparent;
    border-radius: 200px;
    width: 200px;
    height: 200px;
    -moz-animation: spinPulseMain 1s infinite ease-in-out;
    -webkit-animation: spinPulseMain 1s infinite linear;
    /* position: absolute */
}

.spinner-container .main-loading-spinner .main-circle-two {
    border: 1px solid #0f81fa;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 160px;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 26px;
    left: 26px;
    -moz-animation: spinoffPulseMain 1s infinite linear;
    -webkit-animation: spinoffPulseMain 1s infinite linear
}

.spinner-container .main-loading-spinner .main-spinner {
    /* width: 200px; */
    /* height: 200px; */
    /* top: 17px; */
    /* left: 66px; */
    /* position: absolute; */
    border-radius: 999px
}

@keyframes spinPulseMain {
    0% {
        transform: rotate(160deg);
        opacity: 0
    }

    50% {
        transform: rotate(145deg);
        opacity: 1
    }

    100% {
        transform: rotate(-320deg);
        opacity: 0
    }
}

@keyframes spinoffPulseMain {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.spinner-container .main-loading-spinner .content {
    margin-top: 120px;
    font-size: 14px;
    text-align: center;
    color: #fff
}

.logo-img,
.filling-symbol {
    width: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.logo-img {}

.logo-img-fill {}

.logo-img-wave {}

.filling-symbol {
    height: 150px;
    background: transparent;
    animation: move 3s infinite;
    background-image: url("/images/loader/ff_symbol_wave_fill2.svg");
    background-size: 550% 100%;
    background-repeat: no-repeat;
    background-position: -30px 33px;
    /* background-position: 0 0; */
    background-position: -310px 13px;
    -webkit-mask: url("/images/loader/ff_symbol-alpha.svg");
    mask: url("/images/loader/ff_symbol-alpha.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-y: 50% !important;
    -webkit-mask-size: 80px;
    mask-size: 80px;
    z-index: 0;
}

@keyframes move {
    0% {
        background-position: -30px 33px;
    }

    50% {
        background-position: 0% 0%;
        background-position: -310px 13px;
    }
}

@media screen and (max-width: 1024px) {
    .spinner-block {
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .spinner-container .main-loading-spinner {
        width: 100px;
        height: 100px;
    }

    .spinner-container .main-loading-spinner .main-circle {
        width: 100px;
        height: 100px;
    }

    .spinner-container .main-loading-spinner .main-circle-two {
        top: 10px;
        left: 10px;
        width: 80px;
        height: 80px;
    }

    .spinner-container .main-loading-spinner .main-spinner {
        width: 100px;
        height: 100px;
    }

    .logo-img,
    .filling-symbol {
        width: 50px;
    }

    .filling-symbol {
        -webkit-mask-size: 50px;
        mask-size: 50px;
        height: 300px;
        background-size: 750% 100%;
    }
}

/* deposit processing */
.depositProcessing-popup .popup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    padding: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-width: 9rem;
    max-height: 90%;
    z-index: 1;
    width: 100%;
    border-radius: 0.15rem;
    overflow: hidden;
    margin-top: 0.16rem;
    margin-bottom: 0.16rem;
}

.depositProcessing-popup .popup .popup-header {
    padding: 0.13rem 0.15rem;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--modal-background-color);
}

.depositProcessing-popup .popup .popup-header .popup-header-left {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
}

.depositProcessing-popup .popup .popup-header .popup-title {
    white-space: nowrap;
    font-size: 0.2rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

.depositProcessing-popup .popup .popup-header .popup-header-right {
    display: flex;
    justify-content: flex-end;
    color: #fff;
}

.depositProcessing-popup .popup .popup-body {
    padding: 0.4rem 0.7rem;
    overflow-y: scroll;
    min-height: 0.75rem;
    background-color: var(--modal-background-color);
    width: 100%;
    font-size: 0.16rem;
    line-height: 0.3rem;
    color: #bdbdbd;
    text-align: center;
}

.depositProcessing-popup .popup .popup-body .processing-icon {
    width: 100%;
    height: 1.5rem;
    object-fit: contain;
    margin: auto;
}

@media screen and (max-width: 1024px) {
    .depositProcessing-popup .popup {
        margin-top: 0.42rem;
        margin-bottom: 0.42rem;
        max-width: 10.84rem;
    }

    .depositProcessing-popup .popup .popup-header {
        padding: 0.5rem 0.35rem;
    }

    .depositProcessing-popup .popup .popup-header .popup-title {
        font-size: 0.5rem;
    }

    .depositProcessing-popup .popup .popup-body {
        font-size: 0.45rem;
        line-height: 0.74rem;
        padding: 0 .7rem 1rem .7rem;
    }

    .depositProcessing-popup .popup .popup-body .processing-icon {
        height: 4.5rem;
    }
}

/* add bank modal */
#app #addbank-modal .addBank-popup {
    left: 50%;
    transform: translateX(-50%);
}

/* #app #addbank-modal .addBank-popup button.btn-submit {
    margin-left: auto;
} */

@media (max-width: 1024px) {
    #app #addbank-modal .addBank-popup {
        transform: translateX(-50%) scale(.75);
    }

    #app .wap-page #addbank-modal .addBank-popup {
        transform: translateX(-50%) scale(1);
    }
}

/* first time deposit modal */
#first-deposit-modal .header-ico {
    text-align: center;
}

#first-deposit-modal .header-ico img {
    width: 1.25rem;
}

#first-deposit-modal .modal-header.title i {
    top: initial;
}

#first-deposit-modal .modal-body.content {
    text-align: left;
    padding: .1rem .25rem .45rem;
    font-size: 0.16rem;
    color: #c5c5c6;
}

#first-deposit-modal .content {
    text-align: center;
    padding-left: 0.15rem;
    padding-right: 0.15rem;
    padding-top: 0.25rem;
    padding-bottom: 0;
}

#first-deposit-modal .content .main {
    display: flex;
    justify-content: center;
    font-family: nunito-bold;
    font-size: 0.21rem;
    margin-bottom: 0.2rem;
    color: red;
}

#first-deposit-modal .content .title {
    background: transparent;
    color: red;
    font-size: 0.18rem;
    justify-content: center;
    height: 0.4rem;
}

#first-deposit-modal .content p {
    margin-bottom: 0.2rem;
}

#first-deposit-modal .content b {
    color: var(--primary-color);
}

#first-deposit-modal .content .remark b {
    color: red;
}

.wap-page #first-deposit-modal .content .main {
    color: #ff7e7e;
}

.wap-page #first-deposit-modal .content .title {
    color: #ff7e7e;
}

.wap-page #first-deposit-modal .content .remark b {
    color: #ff7e7e;
}

.wap-page #first-deposit-modal .content b {
    color: #d6c640;
}

@media screen and (max-width: 1024px) {
    #first-deposit-modal .header-ico {
        text-align: center;
    }

    #first-deposit-modal .header-ico img {
        width: 2.2rem;
    }

    #first-deposit-modal .modal-header.title i {
        top: initial;
    }

    #first-deposit-modal .modal-body.content {
        text-align: left;
        padding: 0 .55rem .75rem;
        font-size: 0.42rem;
        color: #c5c5c6;
    }

    #first-deposit-modal .content {
        text-align: center;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 0.6rem;
    }

    #first-deposit-modal .content .main {
        display: flex;
        justify-content: center;
        font-size: 0.6rem;
        margin-bottom: 0.65rem;
    }

    #first-deposit-modal .content .title {
        background: transparent;
        font-size: 0.44rem;
        font-family: 'nunito-semibold';
        justify-content: center;
        height: auto;
        margin-bottom: .15rem;
    }

    #first-deposit-modal .content p {
        font-size: 0.42rem;
        margin-bottom: 0.65rem;
    }
}

.wap-page .coming-soon-text {
    margin: 0 0.75rem;
    font-size: 0.45rem;
    text-align: center;
    color: #707070;
}

#app .addAddress-popup {
    left: 50%;
    transform: translateX(-50%);
}

/* my-account deposit */
.copy .st1 {
    fill: #606060;
}

.copy .st2 {
    fill: none;
    stroke: #606060;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.copy .st3 {
    fill: #666666;
}

.copy .st4 {
    stroke: #606060;
    stroke-width: 5;
    stroke-miterlimit: 10;
}

.copy .st5 {
    fill: #606060;
    stroke-width: 1.5;
    stroke-miterlimit: 10;
}

.copy .st6 {
    fillRule: evenodd;
    clip-rule: evenodd;
    fill: #606060;
}

.copy .st7 {
    fillRule: evenodd;
    clip-rule: evenodd;
}

.copy .st8 {
    fill: #606060;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.copy .st9 {
    fill: none;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.copy .st10 {
    fill: none;
    stroke: #606060;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st11 {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st12 {
    stroke-width: 1.5;
    stroke-miterlimit: 10;
}

.copy .st13 {
    fill: none;
    stroke-width: 1.8478;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st14 {
    stroke-width: 1.6063;
    stroke-miterlimit: 10;
}

.copy .st15 {
    fill: none;
    stroke-width: 2.5975;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st16 {
    stroke-width: 0.8945;
    stroke-miterlimit: 10;
}

.copy .st17 {
    stroke-width: 1.5731;
    stroke-miterlimit: 10;
}

.copy .st18 {
    fill: none;
    stroke-width: 1.5731;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st19 {
    -webkit-clip-path: url(#SVGID_2_);
    clip-path: url(#SVGID_2_);
}

.copy .st20 {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st21 {
    fill: #FFFFFF;
}

.copy .st22 {
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.copy .st23 {
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.fast-deposit-icon .st0 {
    fill: #606060;
}

.fast-deposit-icon .st1 {
    fill: #606060;
}

.fast-deposit-icon .st11 {
    fill: none;
    stroke: #606060;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

.icon-hover-box.on .fast-deposit-icon .st0, .icon-hover-box:hover .fast-deposit-icon .st0 {
    fill: var(--selected-blue-color);
}

.icon-hover-box.on .fast-deposit-icon .st1, .icon-hover-box:hover .fast-deposit-icon .st1 {
    fill: var(--selected-blue-color);
}

.icon-hover-box.on .fast-deposit-icon .st11, .icon-hover-box:hover .fast-deposit-icon .st11 {
    fill: none;
    stroke: var(--selected-blue-color);
}

.mobile-select .current-select .group .icon-box i {
    background-image: url(/images/mobile/arrow.png);
    background-size: 100% 100%;
}

.remark {
    font-weight: 700;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li {
    min-height: 0.6rem;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li .icon-box {
    filter: grayscale(1);
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li.on .icon-box,
#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li:hover .icon-box {
    filter: grayscale(0);
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li.on .icon-box img,
#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li:hover .icon-box img {
    filter: grayscale(0) !important;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li.qr-box {
    margin-top: 0.15rem;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .bank-list li.qr-box .crypto_countdown {
    font-size: 0.14rem;
    margin-top: 0.15rem;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .info-qrReminder {
    color: #fb282c;
    margin-top: 0.1rem;
    font-size: 0.12rem;
    background: #ffe3e3;
    padding: 0.05rem 0.16rem;
    border-radius: 0.05rem;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .important {
    color: red;
    font-size: 0.13rem;
    background: #fcf9e5;
    padding: 0.05rem 0.2rem;
    width: 6rem;
    border-radius: 0.05rem;
}

#app .member-panel .member-com-page .member-main .member-page .deposit-page .group-item .input-box.box-guaranteed .reload-box .icon-reload {
    filter: invert(1);
}

.icon-hover-box:hover img,
.icon-hover-box:hover svg {
    filter: grayscale(0);
}

.group-box.bankgroup-box-container {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.group-box.bankgroup-box-container .bank-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.07rem;
}

.group-box.bankgroup-box-container .bank-img img {
    height: 0.4rem;
    width: auto;
}

.group-box.bankgroup-box-container .icon-bank {
    height: auto;
}

.group-box.bankgroup-box-container .icon-bank img {
    width: 90%;
}

#app .deposit-page .notice-box .display-info .note-info-detail ol li {
    list-style-type: decimal;
    margin-left: 0.14rem;
}

#app .wap-page .deposit-page .notice-box .display-info .note-info-detail ol li {
    margin-left: 0.25rem;
}

#app .deposit-page .group-item .bank-selector.crypto-qr {
    padding: 0.55rem 0.5rem 1.26rem;
}

#app .wap-page .group-box.bankgroup-box-container .bank-img img {
    height: auto;
    width: 0.8rem;
    display: block;
}

#app .wap-page .crypto_countdown {
    margin: 0.5rem 0;
    text-align: center;
}

#app .wap-page .group-item .input-box input.qr-reminder {
    background: #feedb9;
    border: 0;
    font-size: 0.33rem;
    font-weight: 700;
    color: #ff4301;
    margin-top: 0.6rem;
}

.qr-box .qr-loader {
    height: 1.3rem;
    display: flex;
    align-items: center;
}

.qr-box .qr-loader .mini-loader {
    position: inherit;
}

.qr-box .qr-loader .mini-loader .path {
    stroke: #bebebe;
}

.wap-page .qr-box .qr-loader {
    height: 6rem;
}

/* qr code */
.m-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* withdraw page */
#app .member-panel .member-com-page .member-main .member-page .withdraw-page .group-item .bank-list .app_currency .icon-box {
    filter: grayscale(1);
}

#app .member-panel .member-com-page .member-main .member-page .withdraw-page .group-item .bank-list .app_currency.on .icon-box,
#app .member-panel .member-com-page .member-main .member-page .withdraw-page .group-item .bank-list .app_currency:hover .icon-box {
    filter: grayscale(0);
}

#app .member-panel .member-com-page .member-main .member-page .withdraw-page .group-item .bank-list .app_currency .icon-box img {
    width: 0.4rem;
    height: 0.4rem;
    object-fit: cover;
}

#app .member-panel .member-com-page .member-main .member-page .withdraw-page .group-item .input-box.box-guaranteed .reload-box .icon-reload {
    filter: invert(1);
}

#app .member-panel .member-com-page .member-main .member-page .withdraw-page button.btn-submit {
    width: 1.18rem;
    /* margin-top: 0.75rem; */
    text-transform: uppercase;
}

#app .member-panel .member-com-page .member-main .member-page .withdraw-page .activation-box button.btn-submit {
    margin: 0.35rem auto 0;
}

@media (max-width: 1024px) {
    /* #app .withdraw-page .addBank-box .addBank-popup {
        width: 10rem;
        position: relative;
        text-align: center;
        border-radius: 0.15rem;
        overflow: hidden;
    }

    #app .withdraw-page .addBank-box .addBank-popup .title {
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.42rem;
        font-weight: 800;
        color: #fff;
        line-height: 0.18rem;
        position: relative;
    }

    #app .withdraw-page .addBank-box .addBank-popup .title .icon-close3 {
        width: 0.54rem;
        height: 0.54rem;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input {
        position: relative;
        width: 7.7rem;
        background: transparent;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-radius: 0.09rem;
        margin: 0.4rem auto auto;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input>input {
        min-height: 1rem;
        font-size: 0.4rem;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input>select {
        min-height: 1rem;
        font-size: 0.32rem;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input>select :optional {
        width: 0.2rem;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input ::-moz-placeholder {
        font-size: 0.4rem;
    }

    #app .withdraw-page .addBank-box .addBank-popup .content .input ::placeholder {
        font-size: 0.4rem;
    } */
}

/* #app .wap-page .withdraw-page button.btn-submit {
    margin-bottom: 0.75rem;
} */

#app .wap-page .withdraw-page .addAddress-popup button.btn-submit {
    width: 8.8rem;
}

.remark {
    font-weight: 700;
}

.turnover-show-box {
    background: #f2f1f1;
    border-radius: 0.05rem;
    padding: 0.24rem 0.2rem;
    margin-top: 0.25rem;
    margin-left: 1.6rem;
    width: 4.81rem;
}

.promotion-details .turnover-content>div .title {
    margin-bottom: .1rem;
    border-bottom: 0;
    font-size: .19rem;
    color: #000;
}

.turnover-content>div .title {
    padding: 0 0.08rem;
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    font-family: nunito-bold;
    border-bottom: 1px solid rgba(162, 170, 189, 0.5);
    height: 0.32rem;
}

.turnover-content>div .title>span {
    font-family: nunito-bold;
}

.turnover-content>div>ul {
    padding-top: 0.05rem;
}

.turnover-content>div>ul li {
    padding: 0 0.08rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.16rem;
    color: #4d4d4d;
    height: 0.3rem;
}

.turnover-content>div>ul li:first-child {
    cursor: pointer;
}

.turnover-content>div>ul li.small {
    color: grey;
    padding-left: 0.2rem;
}

.turnover-content>div>ul li .icon-arrow2 {
    margin-left: 0.05rem;
    height: 0.05rem;
    width: 0.1rem;
}

.turnover-content>div>ul li.currency .label {
    background: #fff;
    padding: 0.02rem 0.15rem;
    border-radius: 0.05rem;
    font-size: .135rem;
    color: #3e3e3e;
}

.turnover-content>div>ul li.promo_info1 {
    margin-top: 0.12rem;
}

.turnover-content>div>ul li.promo_info3 {
    margin-bottom: 0.13rem;
    border-bottom: 0.01rem solid #c4c4c4;
    height: 0.42rem;
    align-items: start;
    padding-top: .03rem;
}

/* @media (max-width: 1024px) {
    .turnover-show-box {
        width: 5.81rem;
    }

    .wap-page .promotion-details .turnover-content>div .title {
        font-size: .45rem;
        margin-bottom: .3rem;
    }

    .wap-page .turnover-show-box {
        width: 10.86rem;
        margin: auto;
        margin-bottom: .3rem;
        border-radius: .2rem;
        padding: .5rem .8rem .65rem;
    }

    .turnover-content>div .title {
        height: .5rem;
    }

    .turnover-content>div .title>span {
        font-family: nunito-bold;
        font-size: .21rem;
    }

    .wap-page .turnover-content>div .title {
        height: auto;
    }

    .wap-page .turnover-content>div .title>span {
        font-size: .4rem;
        margin-bottom: .2rem;
    }

    .turnover-content>div>ul {
        padding-top: 0.1rem;
    }

    .turnover-content>div>ul li {
        font-size: 0.18rem;
    }

    .wap-page .turnover-content>div>ul li {
        font-size: 0.4rem;
        height: 0.75rem;
    }

    .turnover-content>div>ul li.small {
        color: grey;
        padding-left: 0.4rem;
    }

    .turnover-content>div>ul li .icon-arrow2 {
        margin-left: 0.15rem;
        height: 0.16rem;
        width: 0.3rem;
    }

    .wap-page .turnover-content>div>ul li.promo_info1 {
        margin-top: .23rem;
    }

    .wap-page .turnover-content>div>ul li.promo_info3 {
        height: 1.2rem;
        padding-top: 0.1rem;
        margin-bottom: .45rem;
    }

    .wap-page .turnover-content>div>ul li.currency .label {
        font-size: .35rem;
        padding: 0.1rem 0.4rem 0.03rem;
        border-radius: 0.13rem;
    }
} */

/* history page */
.history-page {
    margin-left: auto;
    margin-right: auto;
}

.history-page .history-tools .group li>a {
    color: #929292;
}

.history-page .history-tools .item-list-box a {
    color: #2f2f2f;
    width: 100%;
}

.history-page .history-tools .history-list .table-header ul li>span {
    align-items: center;
    display: flex;
}

.history-page .history-tools .history-list .table-header ul li>span i {
    margin-left: 0.05rem;
    cursor: pointer;
}

.history-page .history-tools .history-list .table-list>span {
    font-size: 0.25rem;
    color: #424448;
    line-height: 0.3rem;
    text-align: center;
    display: block;
    margin: 0.34rem 0;
}

#app .wap-page .history-page .history-tools .date-select .input-box input {
    height: 1.25rem;
    padding: 0 0.26rem 0 0.5rem;
    align-items: center;
    display: flex;
    line-height: 0.55rem;
}

#app .wap-page .history-page .history-tools .date-select .input-box:first-child .dp__menu {
    left: 0 !important;
    transform: translateX(0) !important;
    background: #3f3f3f;
    border-color: #3f3f3f;
}

#app .wap-page .history-page .history-tools .date-select .input-box .dp__menu {
    background: #3f3f3f;
    border-color: #3f3f3f;
}

#app .wap-page .dp__menu, #app .mobile-register .dp__menu {
    background: #3f3f3f;
    border-color: #3f3f3f;
}

#app .wap-page .dp__arrow_top, #app .mobile-register .dp__arrow_top {
    background-color: #3f3f3f;
    border-left: 1px solid #3f3f3f;
    border-top: 1px solid #3f3f3f;
}

#app .wap-page .dp__arrow_bottom, #app .mobile-register .dp__arrow_bottom {
    border-color: #3f3f3f;
    background-color: #3f3f3f;
}

#app .wap-page .dp__month_year_select, #app .mobile-register .dp__month_year_select {
    color: #f5f5f5;
}

#app .wap-page .dp__calendar_header, #app .mobile-register .dp__calendar_header {
    color: #f5f5f5;
}

#app .wap-page .dp__calendar_header_separator {
    background: #565656;
}

#app .wap-page .dp__cell_inner, #app .mobile-register .dp__cell_inner {
    color: #f5f5f5;
}

#app .mobile-register .dp__inner_nav_disabled:hover, #app .mobile-register .dp__inner_nav_disabled {
    background: #3f3f3f;
    color: #726f6f;
}

#app .wap-page .dp__cell_offset {
    color: #8c8c8d;
}

#app .mobile-register .dp__inner_nav:hover {
    background: #3f3f3f;
}

#app .wap-page .history-page .history-tools .date-select .input-box:last-child .dp__menu {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

#app .wap-page .history-page .icon-sort {
    width: 0.5rem;
    height: 0.5rem;
    margin-left: .25rem;
}

/* voucher claim modal */
.voucher-page .custom-modal .btn-submit {
    margin-top: 0;
}

.voucher-page .custom-modal-body {
    font-size: 0.15rem;
}

.voucher-page .custom-modal-body>div {
    display: flex;
    margin-top: 0.15rem;
}

#app .voucher-page .custom-modal-body>div button:first-child {
    margin-right: 0.05rem;
}

#app .voucher-page .custom-modal-body>div button:last-child {
    margin-left: 0.05rem;
    background: #b4b4b4;
}

#app .wap-page .voucher-page .custom-modal-body>div {
    gap: .25rem;
    margin-top: .75rem
}

#app .wap-page .voucher-page .custom-modal-body>div button {
    width: 4.2rem;
    font-size: .42rem;
    height: 1.2rem;
}

#app .wap-page .voucher-page .custom-modal-body>div button:last-child {
    background: #5b5b5b;
    color: #d0d0d0;
}

@media (max-width: 1024px) {
    .voucher-page .custom-modal-body {
        font-size: .4rem;
        line-height: .6rem;
    }

    .voucher-page .custom-modal-body>div {
        margin-top: 0.6rem;
    }
}

/* voucher page */
#app .voucher-page {
    padding: 0.15rem 0.45rem;
}

#app .voucher-page .group-item.voucher-option {
    display: flex;
    padding-bottom: 0.01rem;
    border-bottom: 0.01rem solid #e9e9e9;
}

#app .voucher-page .group-item.voucher-option span {
    font-family: nunito-semibold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.9rem;
    min-height: 0.27rem;
    font-size: 0.16rem;
    font-weight: 800;
    color: #fff;
    background: #cdcdcd;
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
    cursor: pointer;
    margin: 0 0.2rem 0 0;
}

#app .voucher-page .group-item.voucher-option span:not(:last-child) {
    margin-right: 0.09rem;
}

#app .voucher-page .input-box {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
}

#app .voucher-page .btn-addvouchercode {
    margin-left: 0.1rem;
    border-radius: 0.05rem;
    height: 0.3rem;
    color: #fff;
    border: none;
    font-weight: 700;
    padding: 0 0.15rem;
    cursor: pointer;
}

@media (max-width: 1024px) {
    #app .voucher-page .btn-addvouchercode {
        font-size: .18rem;
    }

    #app .wap-page .voucher-page .btn-addvouchercode {
        font-size: inherit;
    }
}

#app .voucher-page .table-header ul {
    background: #2f2f2f;
    border-radius: 0 0.05rem 0 0;
}

#app .voucher-page .table-header ul li {
    height: 0.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 0.16rem;
    font-weight: 400;
    margin: 0 0 0 0.4rem;
}

#app .voucher-page .table-body {
    background: #f3f2f2;
    border: 0.01rem solid hsla(0, 0%, 62%, 0.4196078431);
    padding: 0.25rem;
    color: #7b7b7b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 0.05rem 0.05rem;
}

#app .voucher-page .table-body span {
    font-size: 0.16rem;
}

#app .voucher-page .table-body .claim-amount {
    display: flex;
    align-items: center;
}

#app .voucher-page .table-body .claim-amount .amount {
    margin: 0 0 0 0.1rem;
    font-weight: 700;
    font-size: 0.22rem;
}

#app .voucher-page .table-body .claim-amount .text {
    font-size: 0.18rem;
}

#app .voucher-page .table-body .claim-section {
    display: grid;
    align-items: center;
}

#app .voucher-page .table-body .claim-section .claim-column {
    display: flex;
}

#app .voucher-page .table-body .claim-section .claim-date {
    display: grid;
    text-align: end;
    margin: 0 0.1rem 0 0;
}

#app .voucher-page .line {
    margin: 0.3rem 0;
    border: 0;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
}

#app .voucher-page .voucher-table .voucher-table-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 0.27rem;
    font-size: 0.12rem;
    font-weight: 800;
    color: #fff;
    background: #2f2f2f;
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
    margin: 0.2rem 0 0;
    text-transform: uppercase;
}

#app .voucher-page .voucher-table .voucher-table-list {
    font-size: 0.16rem;
}

#app .voucher-page .voucher-table .voucher-table-list ul {
    margin: 0.02rem 0 0;
    background: #f3f2f2;
    border: 0.01rem solid hsla(0, 0%, 62%, 0.4196078431);
    padding: 0.15rem 0.4rem;
    color: #7b7b7b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0.05rem 0.05rem 0.05rem;
}

#app .voucher-page .voucher-table .voucher-table-list li {
    display: grid;
    width: 100%;
}

#app .voucher-page .voucher-table .voucher-table-list li .amount {
    color: #2f2f2f;
    font-size: 0.28rem;
    font-family: nunito-bold;
}

#app .voucher-page .voucher-table .voucher-table-list li .list {
    font-weight: 700;
    color: #2f2f2f;
}

#app .voucher-page .group-item .input-box input {
    width: 4.63rem;
    height: 0.32rem;
    border-radius: 0.05rem;
    border: 1px solid rgba(25, 25, 25, 0.2);
    padding-left: 0.13rem;
    font-size: 0.16rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #2f2f2f;
    transition: border 0.3s, background 0.3s;
}

#app .voucher-page button.claim-button {
    min-width: 1.18rem;
    padding: 0 0.2rem;
    height: 0.35rem;
    border-radius: 0.05rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
}

#app .voucher-page .voucher-used button.claim-button,
#app .voucher-page .voucher-expired button.claim-button {
    background: #cdcdcd;
    cursor: default;
}

#app .wap-page .voucher-page {
    padding: 0 0 2rem;
    font-size: 0.4rem;
}

#app .wap-page .voucher-page .group-item.voucher-option span {
    font-size: 0.4rem;
    width: 5.24rem;
    height: 1.27rem;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

#app .wap-page .voucher-page .voucher-claim-box {
    width: 10.86rem;
    margin: 1rem auto;
    border: 1px dashed #f2ec76;
    border-radius: 0.25rem;
    display: grid;
    justify-content: center;
    text-align: center;
    padding: 0.5rem .55rem;
    font-size: 0.42rem;
    color: #c5c5c6;
}

#app .wap-page .voucher-page .voucher-claim-box .claim-figure {
    font-size: 0.75rem;
    font-weight: 700;
    margin: .15rem 0;
}

#app .wap-page .voucher-page .voucher-claim-box #root .rebate-page .rebate-claim-box .claim-processing {
    display: grid;
    text-align: center;
    color: red;
}

#app .wap-page .voucher-page .input-item .input-box input {
    width: 8.5rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    font-size: 0.45rem;
    padding-left: 0.5rem;
    margin-top: 0;
    color: #f5f5f5;
    border: 1px solid var(--input-field-border);
}

#app .wap-page .voucher-page .input-item .input-box input:focus {
    border-color: var(--selected-blue-color);
}

#app .wap-page .voucher-page .input-item .input-box .btn-addvouchercode {
    height: 1.25rem;
    min-width: 2rem;
    border-radius: 0.6rem;
    padding: 0.2rem 0.5rem;
    background: var(--darker-blue-gradient);
}

#app .wap-page .voucher-page .voucher-details-list {
    padding-bottom: 0.75rem;
    width: 100%;
}

#app .wap-page .voucher-page .voucher-details-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1.2rem 0.8rem;
    border-bottom: .25rem solid #292929;
    background: var(--myaccount-background);
}

#app .wap-page .voucher-page .voucher-details-list li {
    display: grid;
    flex: 0 0 48%;
    color: #afafaf;
}

#app .wap-page .voucher-page .voucher-details-list li.button {
    flex: 20%;
}

#app .wap-page .voucher-page .voucher-details-list li.full {
    flex: 100%;
}

#app .wap-page .voucher-page .voucher-details-list li.full .title {
    color: #fff;
    background-color: #6b6b6b;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: .42rem;
}

#app .wap-page .voucher-page .voucher-details-list li.full .amount {
    font-size: 0.85rem;
    font-family: nunito-black;
    margin: 0.2rem 0;
    color: #f2ec76;
}

#app .wap-page .voucher-page .voucher-details-list .data {
    padding: 0 0.55rem 0 0.5rem;
    width: 100%;
    font-weight: 400;
    color: #f5f5f5;
    height: 1.2rem;
    border: 0.01rem solid var(--input-field-border);
    border-radius: 0.25rem;
    margin: 0.15rem 0;
    background: var(--input-field-background);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#app .wap-page .voucher-page button.claim-button {
    cursor: pointer;
    height: 1.25rem;
    background: var(--yellow-gradient);
    border-radius: 0.6rem;
    border-style: none;
    font-size: 0.42rem;
    font-weight: 800;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.4rem;
}

#app .wap-page .voucher-page button.claim-all {
    margin: 0.1rem 0;
    width: 9.5rem;
}

#app .wap-page .voucher-page .voucher-used button.claim-button,
#app .wap-page .voucher-page .voucher-expired button.claim-button {
    background: #5e5a5ab5;
    color: #b2b2b2;
    cursor: default;
}

/* dob modal */
#set-dob .standard-popup-modal-container {
    overflow: visible;
}

#set-dob .standard-popup-modal-container .input {
    margin: 0.2rem 0 0.3rem;
    text-align: center;
}

#set-dob .standard-popup-modal-container .input input {
    font-size: 0.16rem;
    height: 0.38rem;
    max-width: 2.8rem;
    width: 100%;
    text-align: center;
    border-radius: 0.08rem;
    border: 1px solid #ddd;
}

#set-dob .standard-popup-modal-container .input .dp__input {
    font-size: 0.18rem;
}

#set-dob .standard-popup-modal-container .input .input-error {
    color: red;
    font-size: 0.14rem;
    margin-top: 0.05rem;
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container {
    overflow: visible;
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container .modal-body {
    font-size: 0.4rem;
    padding: 0.7rem 0.55rem;
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container .input {
    margin: 0.35rem 0 0.7rem;
    text-align: center;
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container .input input {
    font-size: 0.45rem;
    max-width: 7.5rem;
    width: 100%;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    text-align: center;
    height: 1.2rem;
    border-color: var(--input-field-border);
    background: var(--input-field-background);
    color: var(--input-text-color);
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container .input input::placeholder {
    color: var(--placeholder-color);
}

.wap-page #set-dob.m-standard-popup-overlay .standard-popup-modal-container .input .input-error {
    color: #ff7e7e;
    font-size: 0.4rem;
    margin-top: 0.1rem;
}

/* profile page */
.profile-page .center-box {
    position: relative;
}

.profile-page .center-box .copy {
    position: absolute;
    right: 0;
    margin: 0.17rem 0.5rem 0 0;
    width: 0.8rem;
    height: 1.25rem;
}

.profile-page .center-box:last-child .value {
    margin-top: 0.17rem;
}

.profile-page .info-box .info-box-container ul li .li-wrapper {
    display: flex;
    align-items: flex-start;
}

.profile-page .info-box .info-box-container ul li .li-wrapper .verify {
    margin: 0 0 0 0.1rem;
    width: 0.21rem;
    cursor: pointer;
}

.profile-page .info-box .info-box-container ul li .li-wrapper .verify-id-remark {
    position: absolute;
    z-index: 99;
    padding: 0.05rem 0.12rem;
    background-color: #ccc;
    font-size: 0.13rem;
    top: 0.2rem;
    border-radius: 0.05rem;
    width: 2.5rem;
    right: -0.6rem;
}

.profile-page .info-box .info-box-container ul li .li-wrapper .key {
    align-items: center!important;
}

.profile-page .edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    color: #fff;
    padding: 0.04rem 0.12rem;
    border-radius: 0.05rem;
    width: 1.2rem;
    margin-top: 0.03rem;
    cursor: pointer;
}

#app .wap-page .profile-page .edit-btn {
    font-size: .4rem;
    padding: .15rem .25rem;
    margin-top: .15rem;
    width: 3.6rem;
    height: .9rem;
    border-radius: .6rem;
    background: var(--darker-blue-gradient);
}

#app .wap-page .profile-page .edit-btn .edit {
    width: 0.5rem;
    margin-right: .25rem;
    margin-left: 0;
}

@media (max-width: 1024px) {
    .profile-page .edit-btn {
        padding: inherit;
    }
}

.profile-page .edit-btn .edit {
    width: 0.2rem;
    margin-right: 0.08rem;
}

.profile-page .change-btn {
    width: 0.25rem;
    height: 0.25rem;
    margin-left: 0.08rem;
    cursor: pointer;
}

.profile-page .button {
    max-width: 1.05rem;
    height: 0.3rem;
    font-size: 0.15rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.05rem;
    font-family: nunito-bold;
    transition: background-color 0.3s;
    padding: 0 0.1rem;
    white-space: nowrap;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .profile-page .button {
        padding-left: 0.5rem;
        padding-right: 0.55rem;
        max-width: 100%;
        border: none;
        font-size: 0.5rem;
        font-weight: 400;
        color: #fff;
        height: 1.25rem;
        border-radius: 0.13rem;
        margin-top: 0.17rem;
    }

    .profile-page .change-btn {
        top: 0.7rem;
        right: 0.8rem;
        left: auto;
    }
}

.wap-page .profile-page .verify {
    position: absolute;
    right: 0.3rem;
    top: 1.15rem;
    margin: 0 0 0 0.12rem;
    width: 0.7rem;
    cursor: pointer;
}

.wap-page .profile-page .center-box .key {
    display: flex;
    align-items: center;
}

.wap-page .profile-page .edit {
    width: 0.65rem;
    margin: 0 0.35rem 0.05rem;
}

/* change password */
.changepwd-page .icon-copy {
    position: relative;
    left: 8.8rem;
    bottom: 1rem;
    height: 0.5rem;
    width: 2.58rem;
}

.changepwd-page .playerId-box span {
    font-size: 0.16rem;
}

/* messaging */
.message-detail-modal {
    max-height: 90vh;
    overflow: scroll;
}

/* .message-detail-modal .custom-modal-header.message-detail-title-container {
    position: fixed;
    width: 100%;
    max-width: 7rem;
} */

.message-detail-modal .custom-modal-body>div {
    overflow-wrap: break-word;
}

.message-detail-modal .custom-modal-body>div.titleWrapper {
    margin-bottom: 0.3rem;
}

.message-detail-modal .custom-modal-body>div.titleWrapper .date {
    border-top: 1px solid #e2e2e2;
    font-weight: 400;
    margin-top: 0.1rem;
    padding-top: 0.1rem;
}

.message-detail-modal .custom-modal-body>div.content {
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.message-detail-modal .custom-modal-body>div.content img {
    max-width: 6.36rem;
}

.m-custom-modal.message-detail-modal .custom-modal-header {
    padding-top: .35rem;
}

.m-custom-modal.message-detail-modal .custom-modal-body {
    padding: 0 .55rem .75rem;
}

.m-custom-modal.message-detail-modal .custom-modal-body>div.content {
    color: #c5c5c6;
    font-size: .45rem;
    margin-bottom: .45rem;
}

.m-custom-modal.message-detail-modal .titleWrapper h3.message-detail-title {
    color: #f5f5f5 !important;
    margin-bottom: .5rem;
    font-size: .5rem;
    font-family: nunito-semibold;
}

.m-custom-modal.message-detail-modal .custom-modal-body>div.titleWrapper .date {
    border-top: 1px solid #505050;
    padding-top: .45rem;
    font-size: .4rem;
    color: #a2a2a2;
}

/* @media (max-width: 1024px) {
    .message-detail-modal {
        width: 85%;
        max-width: 85vw;
        padding: 0.2rem 0.5rem;
    }

    .message-detail-modal .custom-modal-header {
        margin: -0.21rem -0.5rem;
    }

    .message-detail-modal .custom-modal-header.message-detail-title-container {
        max-width: 85vw;
    }

    .message-detail-modal .custom-modal-header.message-detail-title-container .titleWrapper {
        width: -moz-fit-content;
        width: fit-content;
    }

    .message-detail-modal .custom-modal-body {
        padding: 0.9rem 0 0.2rem;
    }

    .message-detail-modal .custom-modal-body>div.titleWrapper {
        margin-bottom: 0.6rem;
    }

    .message-detail-modal .custom-modal-body>div.titleWrapper .date {
        margin-top: 0.2rem;
        padding-top: 0.3rem;
    }
} */

/* inbox page */
.icon-read-m .cls-1 {
    fill: none;
}

.icon-read-m .cls-1,
.icon-read-m .cls-2 {
    stroke: #bfbfbf;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}

.icon-read-m .cls-2 {
    fill: #bfbfbf;
}

.icon-star-m .cls-1 {
    fill: #bfbfbf;
}

.icon-delete-m .cls-1 {
    fill: #bfbfbf;
}

#app .inbox-page .inbox-list ul li:nth-child(2) {
    width: 80%;
    padding-left: 0.25rem;
}

#app .inbox-page .inbox-list .table-header .check-box input {
    border-width: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(151 151 151 / var(--tw-bg-opacity));
}

#app .inbox-page .inbox-list .table-list .no-data-msg {
    padding: 0.15rem;
    font-size: 0.16rem;
}

#app .inbox-page .table-header .check-box input {
    position: relative;
    margin-right: 0.08rem;
    height: 0.5rem;
    width: 0.5rem;
    cursor: pointer;
}

html body .inbox-page input {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}

/* bank-statements */
.bank-page .icon-dropdown {
    width: 0.5rem;
}

.mobile-select .current-select {
    margin-top: 0.17rem;
}

.upload-box {
    background: #f3f2f2;
    margin-top: 0.01rem;
    margin-bottom: 0.46rem;
    border: 0.01rem solid #e9e9e9;
    padding: 0.25rem;
    color: #7b7b7b;
}

.wap-page .upload-box {
    width: 10.84rem;
    margin: auto;
    margin-top: 1rem;
    padding: 0.75rem 0.55rem 0.95rem;
    background: #3f3f3f;
    color: #c5c5c6;
    border-radius: .3rem;
    border: 0;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}

.wap-page .upload-box .upload-title {
    font-size: .5rem;
    color: #f5f5f5;
}

.wap-page .upload-box p {
    font-size: 0.4rem;
    margin-bottom: 0.4rem;
    margin-top: 0.35rem;
    color: #c5c5c6;
}

.wap-page .upload-box .btn-upload {
    border-radius: 0.6rem;
    height: 1.27rem;
    margin-top: 0.65rem;
    background: var(--darker-blue-gradient);
    color: #fff;
}

@media (max-width: 1024px) {
    .upload-box {
        padding: 0.15rem 0.25rem;
    }
}

.upload-box .upload-title {
    text-transform: uppercase;
    font-size: 0.18rem;
    font-family: nunito-bold;
    color: #2f2f2f;
}

.upload-box p {
    font-size: 0.16rem;
    margin-bottom: 0.1rem;
    color: #4d4d4d;
}

.upload-box .btn-upload {
    width: 0.92rem;
    height: 0.3rem;
    border-radius: 0.05rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.16rem;
    font-weight: 900;
    cursor: pointer;
    color: #fff;
    border-style: unset;
    margin-top: 0.2rem;
    background: var(--primary-color);
}

.upload-box .btn-upload[disabled] {
    opacity: 0.5;
}

@media (max-width: 1024px) {
    .upload-box {
        color: #000;
        /* padding: 0.45rem 0.45rem 0.75rem; */
        border-radius: 0.06rem;
        margin-top: 0.55rem;
        width: auto;
    }

    .upload-box p {
        font-size: 0.16rem;
        margin-bottom: 0.04rem;
        margin-top: 0.1rem;
    }

    .upload-box .btn-upload {
        width: 100%;
        height: .47rem;
        border-radius: 0.05rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.42rem;
        font-weight: 900;
        cursor: pointer;
        color: #fff;
        border-style: unset;
        margin-top: 0.15rem;
        text-transform: uppercase;
    }

    .upload-box .btn-upload[disabled] {
        opacity: 0.5;
    }
}

/* referral */
.wap-page .myreferral-container span.nodata {
    font-size: 0.4rem;
    line-height: 1.25rem;
    margin-left: 0.45rem;
}

#app .member-panel .myaccount-referral-container span.nodata {
    margin-left: 0.25rem;
    line-height: 0.45rem;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-dropdown .referral-share-link {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .line2 {
    margin: 0.25rem 0;
    border: 0;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table {
    margin-top: 0.3rem;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.2rem;
    height: 0.27rem;
    font-size: 0.16rem;
    font-weight: 800;
    color: #fff;
    background: #2f2f2f;
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
    margin: 0.2rem 0 0;
    text-transform: uppercase;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-list {
    font-size: 0.16rem;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-list ul {
    margin: 0.02rem 0 0;
    background: #f3f2f2;
    border: 0.01rem solid hsla(0, 0%, 62%, 0.4196078431);
    padding: 0.15rem 0.4rem;
    color: #7b7b7b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0.05rem 0.05rem 0.05rem;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-list li {
    display: grid;
    width: 100%;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-list li .amount {
    color: #2f2f2f;
    font-size: 0.28rem;
    font-family: nunito-bold;
}

.member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-table .referral-table-list li .list {
    font-weight: 700;
    color: #2f2f2f;
}

/* .member-panel .member-com-page .member-main .member-page .myaccount-referral-container .referral-code-link-container {
    margin-top: 0.1rem !important;
} */

#app .m-myaccount-referral-container .line1 {
    margin: 0.8rem 0;
    border: 0;
    border-top: 0.01rem solid rgb(106 103 103);
}

#app .m-myaccount-referral-container .myBonus-container .input-box input {
    font-size: 0.45rem;
    height: 1.25rem;
    padding: 0 0.26rem 0 0.5rem;
    align-items: center;
    display: flex;
    line-height: 0.55rem;
    background: var(--input-field-background);
    color: var(--input-text-color);
    border-color: var(--input-field-border);
    border-radius: .25rem;
}

#app .m-myaccount-referral-container .myreferral-container .referral-header {
    font-family: nunito-bold;
    font-size: 0.5rem;
    background: #2f2f2f;
    color: #fff;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 0.13rem 0.13rem 0 0;
    padding: 0.15rem 0.5rem;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list {
    margin-top: 0 !important;
    padding-bottom: 0.75rem;
    font-size: 0.4rem;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list ul {
    background: #f3f2f2;
    border: 0.01rem solid hsla(0, 0%, 62%, 0.4196078431);
    padding: 0.6rem 0.6rem;
    margin: 0.05rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li>div {
    display: flex;
    align-items: center;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li>div>span {
    font-family: nunito-regular !important;
    color: #2f2f2f;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li>div>span.data {
    font-family: nunito-bold !important;
    color: #2f2f2f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.2rem;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li.full {
    flex: 100%;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li.full .title {
    color: #fff;
    background-color: #000;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.05rem 0.5rem;
    border-radius: 0.13rem;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list li.full .amount {
    font-size: 0.8rem;
    font-family: nunito-black;
    margin: 0.2rem 0;
}

#app .m-myaccount-referral-container .myreferral-container .referral-summary-list button {
    height: 1rem;
    background: #cdcdcd;
    border-radius: 0.13rem;
    border-style: none;
    font-size: 0.42rem;
    font-weight: 800;
    color: #fff;
    min-width: 3.3rem;
}

#app .m-myaccount-referral-container .details-container {
    /* border-top: 0; */
    /* margin-top: 0; */
}

.myreferral-container .referral-summary-list button,
.myreferral-container .referral-table-list button {
    min-width: 1.18rem;
    padding: 0 0.2rem;
    height: 0.35rem;
    border-radius: 0.05rem;
    font-weight: 900;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.myreferral-container .referral-summary-list button.claim-button,
.myreferral-container .referral-table-list button.claim-button {
    cursor: pointer;
}

.myreferral-container .referral-summary-list button.button-disabled,
.myreferral-container .referral-table-list button.button-disabled {
    background: #cdcdcd;
    cursor: default;
}

.myreferral-container .referral-summary-list button.button-warning,
.myreferral-container .referral-table-list button.button-warning {
    background: #e9adad;
    cursor: default;
}

.referOption-container {
    /* margin: 0.2rem 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.15rem;
    margin-bottom: 0.3rem; */
}

.referOption-container .referOption {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    background: #f3f2f2;
    border-radius: 0.08rem;
    padding: 0.15rem;
}

.referOption-container .referOption .option-remark {
    font-weight: 700;
    margin: 0 0 0.13rem;
}

.referOption-container .referOption .option-turnover,
.referOption-container .referOption .option-deposit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.05rem 0.15rem;
    background: #ffffff;
    border-radius: 0.05rem;
    color: grey;
}

.referOption-container .referOption .option-deposit {
    margin: 0.05rem 0 0;
}

@media screen and (max-width: 1024px) {

    #app .m-myaccount-referral-container .details-container .title,
    #app .m-myaccount-referral-container .choose-package {
        padding-left: 0;
        font-size: .46rem;
    }

    .referOption-container .referOption {
        padding: 0.2rem;
        border-radius: 0.2rem;
        border: 1px solid;
        background: #f3f2f2;
    }

    .referOption-container .referOption .option-remark {
        font-size: 0.21rem;
    }

    .wap-page .referOption-container .referOption .option-remark {
        font-size: 0.5rem;
    }

    .wap-page .referOption-container .referOption .option-turnover,
    .wap-page .referOption-container .referOption .option-deposit {
        font-size: 0.38rem;
    }
}

/* coin page */
.mycoin-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #030203;
    color: #fff;
    padding-right: 0.3rem;
    border-radius: 0.1rem;
    margin: 0.1rem 0 0.15rem;
    font-size: 0.16rem;
    line-height: 0.18rem;
    height: 0.55rem;
    overflow: hidden;
}

.mycoin-card>div {
    display: flex;
    height: 100%;
}

.mycoin-card>div:first-child {
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-right: 0.06rem;
    padding-left: 0.3rem;
}

.mycoin-card>div:first-child p {
    font-size: 0.18rem;
}

.mycoin-card>div:first-child img {
    width: 0.42rem;
    margin-left: 0.2rem;
    margin-right: -0.1rem;
    z-index: 2;
}

.mycoin-card>div span {
    font-family: nunito-bold;
    font-size: 0.2rem;
    background: #515151;
    padding: 0.06rem 0.2rem;
    border-top-right-radius: 0.1rem;
    border-bottom-right-radius: 0.1rem;
}

.mycoin-card>div .button {
    width: 2.2rem;
    position: relative;
    overflow: hidden;
    transform: skewX(-40deg);
    border: 2px solid #ad8e3d;
    cursor: pointer;
}

.mycoin-card>div .button .content {
    width: 100%;
    height: 100%;
    transform: skewX(40deg);
    display: flex;
    align-items: center;
}

.mycoin-card>div .button .content img {
    max-width: 2.3rem;
}

.mycoin-card.m-mycoin-card {
    width: 93% !important;
    display: block;
    font-size: 0.4rem;
    line-height: 0.43rem;
    height: auto;
    background: transparent;
    margin: 0.8rem auto 0 !important;
    padding: 0;
    border-radius: 0.2rem;
}

.mycoin-card.m-mycoin-card>div:first-child {
    height: 1.4rem;
    margin-bottom: 0.05rem;
    padding-left: 0;
    justify-content: center;
    background: #111;
}

.mycoin-card.m-mycoin-card>div:first-child p {
    font-size: 0.48rem;
}

.mycoin-card.m-mycoin-card>div:first-child img {
    width: 1.1rem;
    margin-left: 0.5rem;
    margin-right: -0.2rem;
}

.mycoin-card.m-mycoin-card>div:first-child span {
    font-size: 0.53rem;
    padding: 0.2rem 0.5rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.mycoin-card.m-mycoin-card>div:first-child::before {
    transform: none;
    background-color: #4d4d4d;
}

.mycoin-card.m-mycoin-card>div .button {
    width: 50%;
    height: 1.4rem;
    transform: none;
    border: none;
}

.mycoin-card.m-mycoin-card>div .button .content {
    transform: none;
}

.mycoin-card.m-mycoin-card>div .button .content img {
    max-width: 100%;
}

.mycoin-card.m-mycoin-card>div .button.gf {
    margin-right: 0.03rem;
}

.mycoin-card.m-mycoin-card>div .button.reward {
    margin-left: 0.03rem;
}

/* pending transaction */
#app .pending-transaction-page ul li.details-list>div .countdown-time,
#app .pending-transaction-page .transaction-amount {
    font-family: nunito-black;
}

#app .pending-transaction-page .currency,
#app .pending-transaction-page .transaction-amount,
#app .pending-transaction-page .title.type {
    color: #2f2f2f;
}

#app .pending-transaction-page .m-pending .currency,
#app .pending-transaction-page .m-pending .transaction-amount,
#app .pending-transaction-page .m-pending .title.type {
    color: #f5f5f5;
}

#app .pending-transaction-page .note.alert {
    color: red;
}

#app .pending-transaction-page .dropdown-details {
    transition: all 0.5s ease-in-out;
}

#app .pending-transaction-page .dropdown-details li.title {
    font-family: nunito-semibold;
    background-color: #4d4d4d;
    color: #fff;
}

#app .pending-transaction-page .dropdown-details li:not(:first-child) {
    background-color: #f3f2f2;
    display: flex;
}

#app .pending-transaction-page .dropdown-details li:not(:first-child) span:first-child {
    width: 40%;
}

#app .pending-transaction-page .dropdown-details li:not(:first-child) span {
    overflow-wrap: break-word;
}

#app .pending-transaction-page .m-pending {
    padding-bottom: 1.6rem;
    font-size: 0.42rem;
    color: #c5c5c6;
}

#app .pending-transaction-page .m-pending .pending-header {
    color: #fff;
    background-color: #565656;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.45rem;
    font-family: nunito-semibold;
    margin-bottom: 0.25rem;
    margin-left: 0.75rem;
}

#app .pending-transaction-page .m-pending li.details-list {
    padding: 1rem 0;
    border-bottom: 0.25rem solid #292929;
    color: #f5f5f5;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top {
    margin-bottom: 0.5rem;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div {
    display: flex;
    align-items: center;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div>span {
    width: 40%;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div .countdown-time,
#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div .transaction-amount {
    font-size: 0.7rem;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div .transaction-amount {
    margin-left: 0.25rem;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .top>div .icon-info {
    background-image: url(/images/icons/svg/info-icon.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 1rem;
    height: 1rem;
}

#app .pending-transaction-page .m-pending li.details-list>div:first-child .note {
    font-size: 0.38rem;
    line-height: 0.45rem;
    margin-bottom: 0.62rem;
}

#app .pending-transaction-page .m-pending li.details-list>div .note.alert {
    color: #ff7e7e;
    margin-bottom: 0;
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details {
    margin: 0.75rem auto 0.5rem;
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details li.title {
    font-size: 0.45rem;
    font-family: nunito-semibold;
    background-color: #565656;
    color: #fff;
    padding: 0.3rem 0.55rem;
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details li:not(:first-child) {
    padding: 0.5rem 0.55rem 0.05rem 0.55rem;
    background-color: #3d3d3d;
    display: flex;
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details li:not(:first-child) span {
    overflow-wrap: break-word;
    line-height: 0.42rem;
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details li:first-child {
    border-radius: 0.13rem 0.13rem 0 0;
}

#app .pending-transaction-page .m-pending li.details-list>div.dropdown-details li:last-child {
    border-radius: 0 0 0.13rem 0.13rem;
    padding-bottom: 0.5rem;
}

#app .pending-transaction-page .m-pending li.details-list>div {
    width: 10.86rem;
    margin: auto;
}

#app .pending-transaction-page .m-pending>ul>div>span {
    margin-left: 0.75rem;
}

#app .pending-transaction-page .pending {
    padding: 0.15rem 0.45rem;
}

#app .pending-transaction-page .pending .pending-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    height: 0.35rem;
    font-size: 0.16rem;
    font-weight: 800;
    color: #fff;
    background: #2f2f2f;
    border-top-left-radius: 0.05rem;
    border-top-right-radius: 0.05rem;
    margin: 0.05rem 0 0;
    text-transform: uppercase;
}

#app .pending-transaction-page .pending li {
    font-size: .16rem;
    margin: 0.2rem 0.05rem;
}

#app .pending-transaction-page .pending li.details-list {
    margin: 0.05rem 0;
    background: #f3f2f2;
    padding: 0.18rem 0.4rem;
    color: #7b7b7b;
    border-radius: 0 0.05rem 0.05rem 0.05rem;
    border: 0.01rem solid hsla(0, 0%, 62%, 0.4196078431);
}

#app .pending-transaction-page .pending li.details-list .overview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.16rem;
}

#app .pending-transaction-page .pending li.details-list .overview>div:nth-child(3) {
    width: 50%;
}

#app .pending-transaction-page .pending li.details-list .overview>div.line {
    width: 1px;
    height: 0.35rem;
    background: #ccc;
}

#app .pending-transaction-page .pending li.details-list .overview .countdown-time {
    font-size: 0.32rem;
    color: #2f2f2f;
}

#app .pending-transaction-page .pending li.details-list .overview .currency {
    font-size: 0.16rem;
}

#app .pending-transaction-page .pending li.details-list .overview .transaction-amount {
    font-size: 0.3rem;
    margin-left: 0.03rem;
}

#app .pending-transaction-page .pending li.details-list .overview .title {
    font-size: 0.16rem;
}

#app .pending-transaction-page .pending li.details-list .overview .note {
    line-height: 0.16rem;
    margin: 0.1rem 0;
    font-size: 0.14rem;
}

#app .pending-transaction-page .pending li.details-list .overview .note.alert {
    margin-left: 0.05rem;
}

#app .pending-transaction-page .pending li.details-list .overview .info-button {
    width: 100%;
    color: #fff;
    border: none;
    height: 0.3rem;
    border-radius: 0.05rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    width: 1.65rem;
}

#app .pending-transaction-page .pending li.details-list .dropdown-details {
    font-size: 0.16rem;
    padding: 0.1rem 0;
}

#app .pending-transaction-page .pending li.details-list .dropdown-details li {
    margin: 0;
}

#app .pending-transaction-page .pending li.details-list .dropdown-details li.title {
    font-size: 0.18rem;
    padding: 0.12rem 0.3rem;
}

#app .pending-transaction-page .pending li.details-list .dropdown-details li:not(:first-child) {
    padding: 0.12rem 0.3rem;
    border-bottom: 1px solid;
}

/* grand fortune winner modal */
.photo-lightbox {
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.photo-lightbox .lightbox-close-btn {
    position: absolute;
    top: 0.2rem;
    right: 0.35rem;
    width: 0.4rem;
    height: 0.4rem;
    cursor: pointer;
    z-index: 1099;
}

.photo-lightbox .photo-container {
    z-index: 99;
    position: absolute;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: auto;
    padding: 0;
    background-color: transparent;
    border: none;
    max-width: 8.2rem;
    max-height: 80%;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: flex;
}

.photo-lightbox .photo-container img {
    margin: auto;
    display: block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    opacity: 1;
}

.wap-page .photo-lightbox .photo-container {
    max-width: 10.8rem;
}

.wap-page .photo-lightbox .lightbox-close-btn {
    top: 20%;
    right: 0.5rem;
    width: 0.8rem;
    height: 0.8rem;
}

/* prediction - all prediction*/
.all-prediction {
    color: #fff;
    padding: 0.45rem 0;
}

.all-prediction>div {
    background: #333;
    margin: 0 auto;
    padding: 0.3rem;
    width: 90%;
    border-radius: 0.05rem;
}

.all-prediction>div .predictionSwiper .header,
.all-prediction>div .predictionSwiper .prediction-column {
    display: grid;
    grid-template-columns: 40% 20% 40%;
}

.all-prediction>div .predictionSwiper .header {
    font-size: 0.19rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.2rem;
}

.all-prediction>div .predictionSwiper .prediction-column {
    font-size: 0.18rem;
    border-radius: 0.05rem;
    min-height: 0.4rem;
    margin-bottom: 0.08rem;
    align-items: center;
    text-align: center;
    color: #fff;
    background: #292929;
}

.all-prediction>div .predictionSwiper .swiper-button-next,
.all-prediction>div .predictionSwiper .swiper-button-prev {
    height: 0.32rem;
    width: 0.32rem;
    border-radius: 50%;
}

.all-prediction>div .predictionSwiper .swiper-button-next:after,
.all-prediction>div .predictionSwiper .swiper-button-prev:after {
    font-size: 0.16rem;
    font-weight: 700;
    color: #fff;
}

.wap-page .all-prediction {
    max-width: 10.8rem;
    padding: 1rem 0;
    margin: auto;
    border-radius: 0.13rem;
}

.wap-page .all-prediction>div {
    width: 100%;
    padding: 0.5rem 0;
}

.wap-page .all-prediction .predictionSwiper .header {
    margin-bottom: 0.3rem;
    font-size: 0.45rem;
}

.wap-page .all-prediction .predictionSwiper .header p {
    font-family: nunito-bold;
}

.wap-page .all-prediction .predictionSwiper .prediction-column {
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
    min-height: 1rem;
    border-radius: 0.13rem;
}

.wap-page .all-prediction .predictionSwiper .swiper-button-next {
    right: 0;
}

.wap-page .all-prediction .predictionSwiper .swiper-button-prev {
    left: 0;
}

.wap-page .all-prediction .predictionSwiper .swiper-button-next,
.wap-page .all-prediction .predictionSwiper .swiper-button-prev {
    height: 0.8rem;
    width: 0.8rem;
}

.wap-page .all-prediction .predictionSwiper .swiper-button-next:after,
.wap-page .all-prediction .predictionSwiper .swiper-button-prev:after {
    font-size: 0.35rem;
}

/* grand fortune page */
#app .fortune-panel {
    background: url(/images/grand-fortune/gf_bg2.webp);
}

#app .fortune-panel .nav-box {
    background-color: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#app .fortune-panel .nav-box .main-title {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.04rem;
    position: relative;
    font-size: 0.27rem;
    margin: 0.6rem 0 0.4rem 0;
}

#app .fortune-panel .nav-box .main-title::before {
    content: attr(data);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(220, 193, 7) 18%, rgb(254, 242, 190) 31%, rgb(212, 157, 7) 47%, rgb(255, 255, 255) 64%, rgb(212, 157, 7) 83%);
    -webkit-text-stroke: 2px transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .fortune-panel .nav-box .main-title::after {
    content: attr(data);
    left: 0;
    top: 0;
    position: absolute;
    background-image: linear-gradient(180deg, rgb(232, 194, 104) 0%, rgb(233, 195, 105) 20%, rgb(225, 187, 97) 40%, rgb(215, 177, 87) 70%, rgb(241, 203, 113) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .fortune-panel .nav-box .fortune-nav {
    display: flex;
    justify-content: center;
    overflow-x: scroll;
}

#app .fortune-panel .nav-box .fortune-nav li {
    color: #fff;
    text-align: center;
    margin: 0 0.3rem;
    padding: 0 0.15rem 0.25rem 0.15rem;
    width: auto;
    text-transform: uppercase;
    font-family: nunito-bold;
    font-size: 0.17rem;
    transition: 0.3s all ease-in-out;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

#app .fortune-panel .nav-box .fortune-nav li.on,
#app .fortune-panel .nav-box .fortune-nav li:hover {
    border-bottom: 3px solid #f1cd53;
}

#app .fortune-panel .fortune-content .prize-pool {
    background: url(/images/grand-fortune/GFbanner_bg.webp) no-repeat;
    background-size: cover;
    background-position: bottom;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 9.2rem;
}

#app .fortune-panel .fortune-content .prize-pool.kk-character {
    background: url(/images/grand-fortune/GFbanner_bg_wkk.webp) no-repeat;
    background-size: cover;
    background-position: bottom;
}

#app .fortune-panel .fortune-content .prize-pool img {
    width: 12rem;
    margin: 0.2rem auto 0;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize {
    position: relative;
    background: url(/images/grand-fortune/lightbox.webp) no-repeat;
    background-position: center;
    background-size: contain;
    height: 1.75rem;
    margin-top: -4.1rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .currency-label {
    background: url(/images/grand-fortune/lightbox_currency.webp) no-repeat;
    background-position: center;
    background-size: contain;
    height: 0.4rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .currency-label span {
    background: linear-gradient(180deg, rgb(255, 200, 60) 0%, rgb(255, 164, 60) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: nunito-black;
    font-size: 0.25rem;
    line-height: 0.43rem;
    letter-spacing: 0.03rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .jackpot {
    font-family: arial-black;
    font-size: 0.95rem;
    line-height: 0.9rem;
    letter-spacing: 0.04rem;
    background: linear-gradient(180deg, rgb(193, 193, 193) 0%, rgb(255, 255, 255) 60%, rgb(193, 193, 193) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#app .fortune-panel .fortune-content .local-currency-label {
    font-size: 0.17rem;
    color: #939393;
    font-family: nunito-semibold;
    line-height: 1.3em;
    margin-top: .15rem;
}

#app .fortune-panel .fortune-content .local-currency-label span {
    font-size: .19rem;
    font-style: italic;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .local-currency-label {
    margin-top: .45rem;
    color: #b9b9b9;
    font-size: 0.2rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .local-currency-label span {
    font-size: .21rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .video-frame {
    margin-top: 0.3rem;
}

#app .fortune-panel .fortune-content .prize-pool .grand-prize .video-frame iframe {
    width: 5.5rem;
    height: 3rem;
}

#app .fortune-panel .fortune-content .prize-list .local-currency-label {
    margin-top: 0;
    font-size: .15rem;
}

#app .fortune-panel .fortune-content .prize-list .local-currency-label span {
    font-size: .17rem;
}

#app .fortune-panel .fortune-content .prize-pool .tnc {
    font-weight: 400;
    font-size: 0.13rem;
    color: #fff;
    padding-top: 0.15rem;
    padding-bottom: 0.4rem;
    text-transform: uppercase;
}

#app .fortune-panel .fortune-content .prizes {
    background: url(/images/grand-fortune/frame.png) no-repeat;
    background-size: 85% 98%;
    background-position: center;
    font-size: 0.2rem;
    margin-top: 0.8rem;
    position: relative;
    text-align: center;
    height: 9.1rem;
}

#app .fortune-panel .fortune-content .prizes>div {
    color: #fff;
    padding-bottom: 0.3rem;
}

#app .fortune-panel .fortune-content .prizes>div>div .mini-jackpot {
    display: inline-flex;
    align-items: baseline;
}

#app .fortune-panel .fortune-content .prizes>div>div .mini-jackpot .currency {
    font-family: nunito-bold;
    font-size: 0.58rem;
    margin-right: 0.2rem;
}

#app .fortune-panel .fortune-content .prizes>div>div .mini-jackpot .amount {
    font-size: 0.86rem;
    line-height: 1rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list {
    display: flex;
    justify-content: center;
    margin: 0.8rem auto 0.4rem;
    width: 13.6rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize {
    width: 3.45rem;
    text-align: left;
    border-width: 0;
    border-left: 0.03rem solid;
    -o-border-image: linear-gradient(180deg, rgb(226, 181, 73) 38%, rgb(246, 237, 200) 40%, rgb(231, 196, 77) 42%, rgb(246, 237, 200) 48%, rgb(231, 196, 77) 52%, rgb(246, 237, 200) 56%, rgb(222, 178, 70) 60%, rgb(246, 237, 200) 67%, rgb(232, 197, 77) 68%) 1;
    border-image: linear-gradient(180deg, rgb(226, 181, 73) 38%, rgb(246, 237, 200) 40%, rgb(231, 196, 77) 42%, rgb(246, 237, 200) 48%, rgb(231, 196, 77) 52%, rgb(246, 237, 200) 56%, rgb(222, 178, 70) 60%, rgb(246, 237, 200) 67%, rgb(232, 197, 77) 68%) 1;
    padding: 0.25rem 0.3rem 0.3rem 0.3rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .percentage {
    font-size: 0.74rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .dashed {
    background: url(/images/grand-fortune/line.png) no-repeat;
    background-size: 100% 100%;
    height: 0.6rem;
    width: 3.9rem;
    margin: -0.05rem -0.5rem 0.4rem -1.3rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .amount {
    font-family: nunito-bold;
    font-size: 0.5rem;
    margin-bottom: 0.18rem;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .amount .currency {
    font-size: 0.23rem;
    margin-right: 0.1rem;
    font-weight: 700;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .amount .total {
    font-family: arial-bold;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .prize-title {
    font-size: 0.28rem;
    line-height: 0.3rem;
    text-transform: none;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .prize-date {
    font-size: 0.23rem;
    line-height: 0.3rem;
    color: #e8c268;
    text-transform: lowercase;
    font-family: nunito-semibold;
}

#app .fortune-panel .fortune-content .prizes>div .prize-list .prize .prize-date .date {
    font-family: nunito-semibold;
}

#app .fortune-panel .fortune-content .prizes>div .actions {
    display: inline-flex;
    width: 85%;
    justify-content: center;
    margin-top: 0.4rem;
}

#app .fortune-panel .fortune-content .prizes>div .actions button {
    color: #ffffff;
    border: 0.03rem solid;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    background: transparent;
    width: 2.5rem;
    height: 0.6rem;
    text-transform: capitalize;
    margin: 0 0.2rem;
    transition: 0.4s all ease-in-out;
    font-size: 0.18rem;
    cursor: pointer;
}

#app .fortune-panel .fortune-content .game-zone {
    background: url(/images/grand-fortune/bottom_bg.webp);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0.8rem 0.3rem 0.5rem 0.3rem;
}

#app .fortune-panel .fortune-content .game-zone .title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#app .fortune-panel .fortune-content .game-zone .title-box .line {
    background: url(/images/grand-fortune/line-longer.png) no-repeat;
    background-size: 160% 100%;
    background-position: center;
    height: 0.6rem;
    width: 100%;
}

#app .fortune-panel .fortune-content .game-zone>div .countdown #timer {
    display: flex;
    justify-content: center;
    background: url(/images/grand-fortune/frame-timer.png);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0.28rem auto;
    color: #fff;
    width: 8.6rem;
}

#app .fortune-panel .fortune-content .game-zone>div .countdown #timer .time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    width: 2rem;
    margin: 0.25rem 0;
    padding: 0.05rem;
}

#app .fortune-panel .fortune-content .game-zone>div .countdown #timer .time:not(:last-child) {
    border-right: 0.03rem solid #e8c268;
}

#app .fortune-panel .fortune-content .game-zone>div .countdown #timer .time .timer_label {
    font-size: 0.23rem;
    margin-top: 0.1rem;
    text-transform: uppercase;
}

#app .fortune-panel .fortune-content .game-zone>div .coins-available {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.1rem 0 0.5rem 0;
}

#app .fortune-panel .fortune-content .game-zone>div .coins-available .coin {
    font-size: 1rem;
    margin: 0 0 0 0.3rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper {
    color: #fff;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.manual {
    text-align: right;
    padding-right: 0.7rem;
    width: 5.9rem;
    display: grid;
    justify-content: right;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.manual .manual-container {
    display: flex;
    flex-direction: column;
    height: 5rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random {
    text-align: left;
    padding-left: 0.7rem;
    width: 5.9rem;
    justify-content: left;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .btn-wrapper {
    display: flex;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .generate-button-wrapper {
    padding-top: 1rem;
    height: 5rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .generate-button-wrapper .generate-btn {
    margin-bottom: 0.3rem;
    font-size: 0.28rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 0.68rem;
    color: #fff;
    border: 0.04rem solid;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .generate-button-wrapper .generate-btn.on {
    transform: scale(1.1, 1.1);
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .random-generate-btn {
    float: left;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .generate-number-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 5rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-btn,
#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-spin-again-btn {
    background: linear-gradient(0deg, rgb(215, 166, 248) 10%, rgb(95, 42, 131) 100%);
    -o-border-image: linear-gradient(150deg, #ebebeb, #737373) 1;
    border-image: linear-gradient(150deg, #ebebeb, #737373) 1;
    color: #fff;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .manual-list .number-container,
#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .generated-number-list .number-container {
    border: 0.04rem solid;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    text-align: left;
    width: 2.5rem;
    height: 0.68rem;
    margin: 0.12rem 0;
    font-size: 0.23rem;
    font-weight: 700;
    padding: 0 0.2rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .manual-list .number-container span,
#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .generated-number-list .number-container span {
    letter-spacing: 0.03rem;
    display: inline-block;
    text-align: left;
    width: 0.4rem;
    box-sizing: border-box;
    color: #fff;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .manual-list .number-container input,
#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .generated-number-list .number-container input {
    display: inline-block;
    background: 0 0;
    width: calc(100% - 0.6rem);
    border: 0;
    padding: 0;
    outline: 0;
    text-align: center;
    color: #fff;
    font-size: 0.2rem;
    font-weight: 700;
    height: 0.61rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .submit-btn {
    background: linear-gradient(180deg, rgb(175, 137, 47) 0%, rgb(238, 200, 110) 50%, rgb(216, 178, 88) 100%);
    font-size: 0.25rem;
    font-family: nunito-black;
    text-transform: uppercase;
    float: right;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 0.1rem;
    width: 2.4rem;
    height: 0.68rem;
    border: 0.03rem solid;
    -o-border-image: linear-gradient(170deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(170deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper p {
    font-size: 0.2rem;
    text-transform: uppercase;
    padding-bottom: 0.15rem;
}

#app .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .vertical-line {
    background: url(/images/grand-fortune/line-vertical.png) no-repeat;
    background-size: 100% 250%;
    background-position: center;
    width: 0.7rem;
}

#app .fortune-panel .fortune-content .heading {
    font-family: nunito-semibold;
    font-size: 0.4rem;
    line-height: 0.6rem;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    padding: 0 0.4rem;
    white-space: nowrap;
}

#app .fortune-panel .fortune-content .gold-text {
    position: relative;
    font-family: arial-bold;
}

#app .fortune-panel .fortune-content .gold-text::before {
    content: attr(data);
    background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(220, 193, 7) 18%, rgb(254, 242, 190) 31%, rgb(212, 157, 7) 47%, rgb(255, 255, 255) 64%, rgb(212, 157, 7) 83%);
    -webkit-text-stroke: 2px transparent;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

#app .fortune-panel .fortune-content .gold-text::after {
    content: attr(data);
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    background: linear-gradient(180deg, #cdae55 15%, #e5c466 40%, #cfa237 64%, #eac66f 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

#app .fortune-panel .fortune-content .gold-text .odometer-digit .odometer-value {
    font-family: arial-bold;
}

#app .fortune-panel .fortune-content .past-result {
    width: 11.5rem;
    margin: auto;
    padding: 0.8rem 0;
}

#app .fortune-panel .fortune-content .past-result>div {
    display: flex;
    flex-wrap: wrap;
}

#app .fortune-panel .fortune-content .past-result>div .item img {
    width: 3.8333333333rem;
    padding: 0.1rem;
    cursor: pointer;
    max-height: 2rem;
    -o-object-fit: cover;
    object-fit: cover;
}

#app .fortune-panel .fortune-content .my-record {
    color: #fff;
    padding: 0.45rem 0;
}

#app .fortune-panel .fortune-content .my-record>div {
    background: #333;
    border-radius: 0.05rem;
    margin: 0 auto;
    padding: 0.3rem;
    max-width: 6.5rem;
    display: block;
}

#app .fortune-panel .fortune-content .my-record>div .header {
    margin-bottom: 0.15rem;
    font-size: 0.19rem;
    font-family: nunito-semibold;
}

#app .fortune-panel .fortune-content .my-record>div .header,
#app .fortune-panel .fortune-content .my-record>div .content .prediction-row {
    display: grid;
    grid-template-columns: 35% 65%;
    text-align: center;
    justify-content: center;
}

#app .fortune-panel .fortune-content .my-record>div .content .prediction-row {
    font-size: 0.18rem;
    margin-bottom: 0.08rem;
    background: #292929;
    border-radius: 0.05rem;
    color: #fff;
    min-height: 0.4rem;
    align-items: center;
}

#app .wap-page .fortune-panel .nav-box .main-title {
    letter-spacing: 0.1rem;
    font-size: 0.58rem;
    margin: 0.7rem 0 0.6rem 0;
}

#app .wap-page .fortune-panel .nav-box .fortune-nav li {
    margin: 0 0.26rem;
    padding: 0 0.12rem 0.3rem 0.12rem;
    font-size: 0.36rem;
}

#app .wap-page .fortune-panel .fortune-content .local-currency-label {
    font-size: .28rem;
}

#app .wap-page .fortune-panel .fortune-content .local-currency-label span {
    font-size: .32rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool {
    height: 12.6rem;
    padding-top: 0.4rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool img {
    width: 100%;
    margin: 0.4rem auto;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize {
    height: 2.3rem;
    margin-top: -6.2rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .currency-label {
    height: 0.6rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .currency-label span {
    font-size: 0.42rem;
    letter-spacing: 0.05rem;
    vertical-align: top;
    line-height: 0.68rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .jackpot {
    font-size: 1.1rem;
    line-height: 1.1rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .local-currency-label {
    font-size: .32rem;
    margin-top: .7rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .local-currency-label span {
    font-size: .36rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .video-frame {
    margin-top: .6rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .grand-prize .video-frame iframe {
    height: 4rem;
    width: 8rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-pool .tnc {
    font-size: 0.25rem;
    padding-bottom: .55rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes {
    height: 13.8rem;
    margin-top: 1.6rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div>div .mini-jackpot .currency {
    font-size: 0.8rem;
    margin-right: 0.3rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div>div .mini-jackpot .amount {
    font-size: 1.3rem;
    line-height: 1.5rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list {
    width: 9.7rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize {
    text-align: center;
    padding: 0.4rem 0.3rem 0.6rem 0.3rem;
    border-left: 0.06rem solid;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .percentage {
    font-size: 0.9rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .dashed {
    height: 1rem;
    width: 5.5rem;
    margin: -0.1rem -1.5rem 0.2rem -1.7rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .amount {
    font-size: 0.6rem;
    margin-bottom: 0.6rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .amount .currency {
    font-size: 0.35rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .prize-title {
    font-size: 0.38rem;
    line-height: 0.42rem;
    max-width: 2.5rem;
    margin: auto;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .prize-list .prize .prize-date {
    font-size: 0.32rem;
    line-height: 0.6rem;
}

#app .wap-page .fortune-panel .fortune-content .prize-list .local-currency-label {
    font-size: .21rem;
    width: 1.9rem;
    margin: auto;
}

#app .wap-page .fortune-panel .fortune-content .prize-list .local-currency-label span {
    font-size: .27rem;
}

#app .wap-page .fortune-panel .fortune-content .prizes>div .actions button {
    border: 0.06rem solid;
    font-size: 0.4rem;
    width: 50%;
    max-width: 4.6rem;
    height: 1.15rem;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
}

#app .wap-page .fortune-panel .fortune-content .game-zone {
    padding: 2rem 0.3rem 2.5rem 0.3rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone .title-box .line {
    height: 1rem;
    background-size: 200% 100%;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .countdown #timer {
    width: 90%;
    max-width: 9.7rem;
    margin: 0.7rem auto;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .countdown #timer .time {
    font-size: 1rem;
    width: 2.2rem;
    margin: 0.5rem 0;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .countdown #timer .time:not(:last-child) {
    border-right: 0.06rem solid #e8c268;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .countdown #timer .time .timer_label {
    font-size: 0.3rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .coins-available .coin {
    font-size: 1.2rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper {
    display: block;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game {
    text-align: center;
    padding: 0;
    max-width: 9.5rem;
    width: 100%;
    justify-content: center;
    margin: auto;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .number-container {
    border: 0.08rem solid;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    width: 6rem;
    height: 1.6rem;
    margin: 0.28rem 0;
    font-size: 0.6rem;
    padding: 0 0.4rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .number-container input {
    height: 1.4rem;
    font-size: 0.55rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game .submit-btn {
    font-size: 0.5rem;
    float: none;
    margin: auto;
    width: 6.8rem;
    border: 0.08rem solid;
    -o-border-image: linear-gradient(170deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(170deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    height: 1.4rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.manual .manual-list .manual-container {
    height: 12rem;
    align-items: center;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .generate-button-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 0.5rem;
    height: 3.1rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-list .generate-button-wrapper .generate-btn {
    max-width: 2.85rem;
    width: 33%;
    font-size: 0.55rem;
    height: 1.4rem;
    border: 0.08rem solid;
    -o-border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
    border-image: linear-gradient(150deg, #e2b549, #f6e395, #deb246, #f6e395, #e8c54d) 1;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .generated-number-list .generate-number-container {
    height: auto;
    flex-flow: wrap;
    justify-content: center;
    margin-bottom: 1.2rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .generated-number-list .generate-number-container .number-container {
    width: 4.5rem;
    height: 1.6rem;
    margin: 0.3rem 0.1rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .generated-number-list .btn-wrapper {
    flex-wrap: wrap;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .generated-number-list .btn-wrapper .submit-btn {
    width: 7rem;
    margin: 0.15rem auto;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-spin-again-btn,
#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .number-game.random .random-generate-btn {
    -o-border-image: linear-gradient(150deg, #ebebeb, #737373) 1;
    border-image: linear-gradient(150deg, #ebebeb, #737373) 1;
    float: none;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper p {
    font-size: 0.45rem;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .vertical-line {
    display: none;
}

#app .wap-page .fortune-panel .fortune-content .game-zone>div .number-game-wrapper .horizontal-line {
    background: url(/images/grand-fortune/line-longer.png) no-repeat center;
    width: 100%;
    height: 2rem;
    background-size: 200% 100%;
    margin: 0.8rem 0 0.5rem;
}

#app .wap-page .fortune-panel .fortune-content .heading {
    font-size: 0.6rem;
    line-height: 1rem;
}

#app .wap-page .fortune-panel .fortune-content .past-result {
    margin: auto;
}

#app .wap-page .fortune-panel .fortune-content .past-result>div {
    flex-direction: column;
}

#app .wap-page .fortune-panel .fortune-content .past-result>div .item img {
    width: 100%;
    padding: 0.2rem 0.4rem;
    max-height: 5.4rem;
}

#app .wap-page .fortune-panel .fortune-content .my-record {
    padding: 1rem 0;
}

#app .wap-page .fortune-panel .fortune-content .my-record>div {
    max-width: 10.8rem;
    padding: 0.5rem 0.3rem;
    margin: auto;
    border-radius: 0.13rem;
}

#app .wap-page .fortune-panel .fortune-content .my-record>div .header {
    margin-bottom: 0.3rem;
    font-size: 0.45rem;
}

#app .wap-page .fortune-panel .fortune-content .my-record>div .header p {
    font-family: nunito-bold;
}

#app .wap-page .fortune-panel .fortune-content .my-record>div .content .prediction-row {
    font-size: 0.4rem;
    margin-bottom: 0.2rem;
    min-height: 1rem;
    border-radius: 0.13rem;
}

input.manual-input-field {
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield;
}

input.manual-input-field::-webkit-inner-spin-button,
input.manual-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

@media screen and (max-width: 1024px) {
    .video-frame {
        margin-top: 0.8rem;
    }

    .video-frame iframe {
        height: 3.5rem;
        width: 6.5rem;
    }
}

/* coin page */
.earn-coins-page {
    color: #fff;
    background: #111111;
}

.earn-coins-page .top {
    background: url("/images/bg_texture.webp") no-repeat bottom;
    background-size: 100% 100%;
    position: relative;
}

.earn-coins-page .top .container {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 0.5rem 0 0.4rem;
}

.earn-coins-page .top .container>div>p.coin-title {
    font-family: nunito-bold;
}

.earn-coins-page .top .container>div .show-coins {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.05rem 0 0.35rem;
}

.earn-coins-page .top .container>div .show-coins img {
    width: 0.6rem;
    z-index: 1;
}

.earn-coins-page .top .container>div .show-coins span {
    font-size: 0.33rem;
    font-family: nunito-bold;
    background: #3f3f3f;
    min-width: 1.8rem;
    margin-left: -0.2rem;
    padding-left: 0.15rem;
    border-top-right-radius: 0.08rem;
    border-bottom-right-radius: 0.08rem;
}

.earn-coins-page .top .container .desc {
    text-align: left;
    width: 7.8rem;
    font-size: 0.17rem;
    line-height: 0.25rem;
    margin-left: 1.2rem;
    color: #dedede;
}

.earn-coins-page .top .container .desc p {
    margin-bottom: 0.16rem;
}

.earn-coins-page .top .container .desc .desc-title {
    font-family: nunito-bold;
    font-size: 0.18rem;
    text-decoration: underline;
    margin-bottom: 0.08rem;
    margin-top: 0.25rem;
}

.earn-coins-page .top .coin-box {
    width: 100%;
    max-width: 5.3rem;
    position: absolute;
    bottom: 0;
    right: 1rem;
}

.earn-coins-page .title {
    font-size: 0.48rem;
    font-family: nunito-bold;
    margin-bottom: 0.35rem;
    text-align: center;
}

.earn-coins-page .bottom .container {
    background: #191919;
    margin: 0.5rem auto;
    border-radius: 0.05rem;
    padding: 0.4rem 0.1rem;
}

.earn-coins-page .bottom .container .grid {
    display: flex;
    flex-wrap: wrap;
}

.earn-coins-page .bottom .container .grid>div {
    width: 47%;
    margin: 0.15rem auto;
    border-radius: 0.08rem;
    overflow: hidden;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.earn-coins-page .bottom .container .grid>div img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    cursor: pointer;
}

.earn-coins-page .bottom .container .grid>div.default-box {
    background: url(/images/earn_coins/default-box-bg.jpg), rgba(0, 24, 40, 0.8);
    background-blend-mode: multiply;
    background-size: cover;
    font-size: 0.4rem;
    font-family: nunito-bold;
}

.earn-coins-page.m-earn-coins-page .top {
    text-align: center;
}

.earn-coins-page.m-earn-coins-page .top .container {
    padding: 0.8rem 0 0.3rem;
}

.earn-coins-page.m-earn-coins-page .top .container .show-coins {
    margin: 0.1rem 0 0.8rem;
}

.earn-coins-page.m-earn-coins-page .top .container .show-coins img {
    width: 1.2rem;
}

.earn-coins-page.m-earn-coins-page .top .container .show-coins span {
    font-size: 0.65rem;
    line-height: 1rem;
    min-width: 3.5rem;
    margin-left: -0.3rem;
    padding-left: 0.2rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.earn-coins-page.m-earn-coins-page .top .container .desc {
    width: 10.23rem;
    font-size: 0.38rem;
    line-height: 0.48rem;
    margin: 0 auto;
}

.earn-coins-page.m-earn-coins-page .top .container .desc .desc-title {
    font-size: 0.42rem;
    margin-bottom: 0.25rem;
    margin-top: 0.6rem;
}

.earn-coins-page.m-earn-coins-page .top .container .desc p {
    margin-bottom: 0.45rem;
}

.earn-coins-page.m-earn-coins-page .top .coin-box {
    position: relative;
    max-width: 8.2rem;
    right: auto;
}

.earn-coins-page.m-earn-coins-page .title {
    font-size: 0.75rem;
    margin-bottom: 0.42rem;
}

.earn-coins-page.m-earn-coins-page .bottom .container .grid>div {
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
    height: 5.3rem;
}

.earn-coins-page.m-earn-coins-page .bottom .container .grid>div.default-box {
    font-size: 0.65rem;
}

/* reward order confirmation modal */
#app .confirmation-modal {
    /* background-color: #282828; */
    padding: 0.2rem 0.32rem 0.3rem;
}

#app .background-color-modal {
    background-color: #282828;
}

#app .confirmation-modal .custom-modal-header {
    display: block;
    font-size: 0.18rem;
    text-align: center;
    padding: 0.15rem 0.32rem;
}

#app .confirmation-modal .custom-modal-body {
    color: #fff;
    text-align: center;
}

#app .confirmation-modal .custom-modal-body>div {
    display: flex;
    justify-content: center;
}

#app .confirmation-modal .custom-modal-body>div .btn-submit {
    margin-top: 0.25rem;
    margin-right: 0.2rem;
    margin-left: 0;
    width: 1.1rem;
    height: 0.45rem;
    border: none;
    border-radius: 0;
}

#app .confirmation-modal .custom-modal-body>div .btn-submit:nth-child(2) {
    background-color: #5a5a5a;
}

#app .wap-page .confirmation-modal .custom-modal-header {
    padding: 0.3rem 0.5rem;
    font-size: 0.5rem;
}

#app .wap-page .confirmation-modal .custom-modal-body p {
    font-size: 0.45rem;
}

#app .wap-page .confirmation-modal .custom-modal-body>div .btn-submit {
    width: 3rem;
    height: 1rem;
    margin-top: 0.5rem;
}

#app .wap-page .confirmation-modal .custom-modal-body>div .btn-submit:first-child {
    margin-right: 0.5rem;
}

/* reward order modal */
#app .reward-popup.order-form {
    z-index: 1060;
}

#app .reward-popup.order-form .popup {
    max-width: 12rem;
}

#app .reward-popup.order-form .popup .popup-body {
    font-size: 0.16rem;
}

#app .reward-popup.order-form .popup .popup-body form {
    display: flex;
    flex-wrap: wrap;
}

#app .reward-popup.order-form .popup .popup-body form .input {
    width: 50%;
    display: flex;
    position: relative;
}

#app .reward-popup.order-form .popup .popup-body form .input label {
    display: inline-block;
    width: 1.62rem;
    font-size: 0.18rem;
    line-height: 0.18rem;
    color: #fff;
    padding-top: 0.13rem;
}

#app .reward-popup.order-form .popup .popup-body form .input label span {
    color: red;
}

#app .reward-popup.order-form .popup .popup-body form .input .address-group {
    width: 3rem;
}

#app .reward-popup.order-form .popup .popup-body form .input input,
#app .reward-popup.order-form .popup .popup-body form .input select {
    width: 3rem;
    height: 0.42rem;
    border: none;
    background: #171717;
    color: #fff;
    padding: 0.05rem 0.2rem;
    margin-bottom: 0.12rem;
    border-radius: 0.05rem;
    font-size: 0.18rem;
    line-height: 0.18rem;
}

#app .reward-popup.order-form .popup .popup-body form .input select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("/images/arrow.png");
    background-position: right 0.2rem center;
    background-repeat: no-repeat;
}

#app .reward-popup.order-form .popup .popup-body form .input select::-ms-expand {
    display: none;
}

#app .reward-popup.order-form .popup .popup-body form .input .tooltip {
    position: absolute;
    background-color: #f44336;
    color: white;
    padding: 0.05rem 0.15rem;
    border-radius: 0.05rem;
    font-size: 0.14rem;
    line-height: 0.15rem;
    top: 0.43rem;
    opacity: 0;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 8rem;
    left: 1.65rem;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2;
}

#app .reward-popup.order-form .popup .popup-body form .input .tooltip.active {
    opacity: 1;
}

#app .reward-popup.order-form .popup .popup-body form .input .tooltip::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    top: -0.04rem;
    border-bottom: 0.05rem solid #f44336;
    border-left: 0.05rem solid transparent;
    border-right: 0.05rem solid transparent;
}

#app .reward-popup.order-form .popup .popup-body form .current-select {
    height: 0.42rem;
    width: 3rem;
    background: #171717;
    color: #fff;
    border-radius: 0.05rem;
    display: inline-block;
    position: relative;
    padding: 0.11rem 0.2rem;
    cursor: pointer;
    font-size: 0.18rem;
    line-height: 0.18rem;
}

#app .reward-popup.order-form .popup .popup-body form .current-select .icon-box {
    position: absolute;
    right: 0.15rem;
}

#app .reward-popup.order-form .popup .popup-body form .current-select ul {
    position: absolute;
    background: #171717;
    width: 3rem;
    top: 0.45rem;
    max-height: 2rem;
    overflow-y: auto;
    z-index: 9999;
    left: 0;
}

#app .reward-popup.order-form .popup .popup-body form .current-select ul li {
    padding: 0.07rem 0.2rem;
}

#app .reward-popup.order-form .popup .popup-body form .current-select ul::-webkit-scrollbar {
    display: block;
}

#app .reward-popup.order-form .popup .popup-body form .input-error {
    color: #df0000;
    width: 100%;
}

#app .reward-popup.order-form .popup .popup-body form .order-summary {
    background: #171717;
    width: 100%;
    border-radius: 0.05rem;
    margin: 0.25rem 0;
    padding: 0.14rem 0.25rem;
    font-size: 0.18rem;
    line-height: 0.4rem;
    color: #fff;
}

#app .reward-popup.order-form .popup .popup-body form .order-summary>div {
    display: flex;
}

#app .reward-popup.order-form .popup .popup-body form .order-summary>div p:first-child {
    width: 3.5rem;
}

#app .reward-popup.order-form .popup .popup-body form .order-summary>div p {
    width: calc(100% - 3.5rem);
}

#app .reward-popup.order-form .popup .popup-body form .short-tnc-box {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    margin: 0.1rem 0 0.2rem;
    border: 1px solid #7c7c7c;
    border-radius: 0.05rem;
    padding: 0.15rem 0.25rem;
}

#app .reward-popup.order-form .popup .popup-body form .short-tnc-box #short_tnc {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

#app .reward-popup.order-form .popup .popup-body form .short-tnc-box #short_tnc.icon-box {
    margin-right: 0.2rem;
    width: 0.22rem;
    height: 0.28rem;
    border: none;
}

#app .reward-popup.order-form .popup .popup-body form .submit-btn {
    color: #fff;
    font-weight: 700;
    text-align: center;
    margin: 0.2rem auto 0.5rem;
    max-width: 4.5rem;
    width: 100%;
    height: 0.5rem;
    font-size: 0.22rem;
    border-radius: 0.08rem;
    border: none;
    cursor: pointer;
}

#app .reward-popup.order-form .popup .popup-body form .submit-btn[disabled] {
    opacity: 0.5;
    cursor: default;
}

#app .reward-popup.order-form .popup .tnc p {
    margin-bottom: 0.23rem;
}

#app .m-reward-popup.order-form .popup .popup-body {
    font-size: 0.35rem;
    line-height: 0.55rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .input {
    width: 100%;
    display: block;
}

#app .m-reward-popup.order-form .popup .popup-body form .input label {
    width: 100%;
    font-size: 0.45rem;
    line-height: 0.6rem;
    padding-bottom: 0.15rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .input input,
#app .m-reward-popup.order-form .popup .popup-body form .input select {
    width: 100%;
    height: 1.4rem;
    font-size: 0.45rem;
    line-height: 0.5rem;
    border-radius: 0.13rem;
    padding: 0.25rem 0.55rem;
    margin-bottom: 0.45rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .input .address-group {
    width: 100%;
}

#app .m-reward-popup.order-form .popup .popup-body form .input .address-group input {
    margin-bottom: 0.25rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .input .tooltip {
    font-size: 0.38rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.13rem;
    left: auto;
    top: -0.05rem;
    right: 0;
    bottom: auto;
    line-height: .42rem;
    max-width: 7.5rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .input .tooltip::before {
    top: auto;
    bottom: -0.2rem;
    border-bottom: none;
    border-top: 0.2rem solid #f44336;
    border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
}

#app .m-reward-popup.order-form .popup .popup-body form .current-select {
    width: 100%;
    height: 1.4rem;
    font-size: 0.45rem;
    line-height: 0.5rem;
    border-radius: 0.13rem;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.45rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .current-select ul {
    width: 100%;
    top: 1.4rem;
    max-height: 5rem;
    height: auto;
}

#app .m-reward-popup.order-form .popup .popup-body form .current-select ul li {
    padding: 0.3rem 0.55rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .current-select .icon-box {
    right: 0.55rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .current-select .icon-box .icon-arrow2 {
    height: 0.23rem;
    width: 0.4rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .order-summary {
    font-size: 0.42rem;
    line-height: 0.5rem;
    padding: 0;
    margin: 0.5rem 0 0.8rem;
    display: flex;
    border-bottom: 1px solid;
}

#app .m-reward-popup.order-form .popup .popup-body form .order-summary>div {
    display: block;
    width: 50%;
}

#app .m-reward-popup.order-form .popup .popup-body form .order-summary>div p {
    padding: 0.4rem 0.5rem;
    width: 100%;
}

#app .m-reward-popup.order-form .popup .popup-body form .order-summary>div p:first-child {
    font-family: nunito-bold;
    width: 100%;
}

#app .m-reward-popup.order-form .popup .popup-body form .short-tnc-box {
    padding: 0.3rem 0.5rem;
    margin: 0.5rem 0;
}

#app .m-reward-popup.order-form .popup .popup-body form .short-tnc-box #short_tnc.icon-box {
    margin-right: 0.4rem;
    width: 1.8rem;
    height: 0.8rem;
}

#app .m-reward-popup.order-form .popup .popup-body form .submit-btn {
    margin: 0.6rem auto 1.8rem;
    height: 1.1rem;
    font-size: 0.45rem;
    max-width: 6.5rem;
}

/* reward page */
#app .reward-page {
    /* background: #1d1d1d url(/images/bg_texture.webp) no-repeat bottom; */
    background-size: 100% 100%;
    background-color: #1d1d1d;
}

#app .reward-page .banner img {
    height: 5.56rem;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#app .reward-page .coin-available {
    /* background: #2b2b2b; */
    padding: 0.22rem 0;
}

#app .reward-page .coin-available .container {
    color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

#app .reward-page .coin-available .container>div {
    display: flex;
    align-items: center;
}

#app .reward-page .coin-available .container>div>div {
    display: flex;
    align-items: center;
    margin: 0 0.25rem;
}

#app .reward-page .coin-available .container>div>div img {
    width: 0.5rem;
    margin-right: 0.2rem;
}

#app .reward-page .coin-available .container>div>div span {
    font-size: 0.25rem;
}

#app .reward-page .coin-available .container>div:nth-child(2) {
    width: 2.5rem;
    position: absolute;
    right: 0;
    justify-content: right;
    font-size: 0.13rem;
    color: #c9c9c9;
    cursor: pointer;
}

#app .reward-page .coin-available .container svg {
    width: 0.2rem;
    margin-left: 0.16rem;
}

#app .reward-page .instructions {
    color: #fff;
    display: flex;
    margin: 0.2rem 0;
    align-items: center;
}

#app .reward-page .instructions li {
    height: 1.45rem;
    background-repeat: no-repeat;
    background-size: contain;
    padding-top: 0.4rem;
    width: 25%;
}

#app .reward-page .instructions li span {
    display: block;
    width: 2.2rem;
    float: right;
    font-size: 0.18rem;
    line-height: 0.2rem;
}

#app .reward-page .search-panel {
    display: flex;
    width: 13.68rem;
    justify-content: space-between;
}

#app .reward-page .search-panel .current-select {
    height: 0.45rem;
    width: 3.5rem;
    background: #343334;
    color: #fff;
    border-radius: 0.05rem;
    text-align: center;
    display: flex;
    position: relative;
    padding: 0.1rem .22rem .1rem .3rem;
    cursor: pointer;
    margin-right: 0.1rem;
}

@media (max-width: 1024px) {
    #app .reward-page>.container {
        width: 18rem;
    }

    #app .reward-page .search-panel {
        width: 100%;
    }

    #app .reward-page .search-panel .current-select {
        height: auto;
    }
}

#app .reward-page .search-panel .current-select ul {
    position: absolute;
    background: #343334;
    color: #b6b6b6;
    width: 3.52rem;
    top: 0.45rem;
    z-index: 2;
}

#app .reward-page .search-panel .current-select ul li {
    padding: .08rem .24rem;
    margin: .05rem .25rem;
    min-height: .4rem;
}

#app .reward-page .search-panel .current-select .icon-box {
    position: absolute;
    right: 0.2rem;
}

#app .reward-page .search-panel input {
    background: #343334;
    color: #fff;
    border: none;
    border-radius: 0.05rem;
    padding: 0 0.2rem;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0 0.1rem;
}

#app .reward-page .search-panel input::-webkit-inner-spin-button,
#app .reward-page .search-panel input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#app .reward-page .search-panel input:nth-child(4) {
    width: 2.8rem;
}

#app .reward-page .search-panel button {
    border: none;
    width: 1.8rem;
    border-radius: 0.05rem;
    text-transform: uppercase;
    color: #fff;
    font-family: nunito-bold;
    margin-left: 0.1rem;
    cursor: pointer;
}

#app .reward-page .reward-catalog {
    padding: 0.9rem 0;
}

#app .reward-page .reward-catalog ul {
    display: grid;
    grid-template-columns: 23% 23% 23% 23%;
    justify-content: space-between;
}

#app .reward-page .reward-catalog ul li.product {
    border-radius: 0.1rem;
    background: #2a2929;
    margin-bottom: 0.27rem;
    overflow: hidden;
    color: #fff;
}

#app .reward-page .reward-catalog ul li.product .img {
    width: 100%;
    height: 1.8rem;
    vertical-align: top;
}

#app .reward-page .reward-catalog ul li.product .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

#app .reward-page .reward-catalog ul li.product .bottom-box {
    position: relative;
    text-align: center;
    padding: 0.27rem;
    font-size: 0.16rem;
    line-height: 0.16rem;
}

#app .reward-page .reward-catalog ul li.product .bottom-box .title {
    font-family: nunito-bold;
    margin-bottom: 0.1rem;
    font-size: 0.19rem;
    line-height: 0.23rem;
    height: 0.48rem;
    word-break: break-word;
    overflow: hidden;
}

#app .reward-page .reward-catalog ul li.product .bottom-box .coin {
    font-size: 0.26rem;
    line-height: 0.26rem;
    height: 0.4rem;
    border-top: 0.01rem solid;
    border-bottom: 0.01rem solid;
    padding: 0.07rem 0;
    font-family: "nunito-black";
}

#app .reward-page .reward-catalog ul li.product .bottom-box .redeem {
    font-family: nunito-bold;
    margin-bottom: 0.1rem;
}

#app .reward-page .reward-catalog ul li.product .bottom-box button.redeem-btn {
    color: #fff;
    width: 2.1rem;
    padding: 0.05rem 0.1rem;
    border-radius: 0.05rem;
    margin-top: 0.15rem;
    border: none;
    cursor: pointer;
}

#app .reward-page .reward-catalog ul li.product .bottom-box button.redeem-btn[disabled] {
    background: #2d2d2d;
    color: #e20000;
    cursor: default;
}

#app .reward-page .reward-catalog ul li.product .bottom-box .line-box .line1 {
    width: 100%;
    height: 0.03rem;
    position: absolute;
    left: 0;
    top: 0;
}

#app .reward-page .reward-catalog ul li.product .bottom-box .line-box .line2 {
    width: 1.2rem;
    height: 0.04rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) perspective(0.5em) rotateX(-8deg) translateZ(-0.01rem);
    top: 0.02rem;
}

#app .reward-page .order-history-menu {
    height: 0.6rem;
    width: 0.6rem;
    position: fixed;
    right: 0;
    top: 2.8rem;
    padding: 0.1rem;
    border-radius: 0.13rem 0 0 0.13rem;
    display: flex;
    align-items: center;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}

#app .reward-page .order-history-menu svg {
    width: 0.4rem;
    height: 0.4rem;
}

#app .reward-page .order-history-menu .text {
    display: none;
    font-size: 0.17rem;
    margin-left: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    transition: all 0.3s ease;
}

#app .reward-page .order-history-menu:hover {
    width: 2.2rem;
}

#app .reward-page .order-history-menu:hover .text {
    display: block;
}

#app .reward-page .back-to-top {
    opacity: 0;
    position: fixed;
    bottom: 1.25rem;
    right: 0.28rem;
    height: 0.45rem;
    width: 0.45rem;
    background-color: rgba(153, 153, 153, 0.4901960784);
    color: #fff;
    border: none;
    border-radius: 0.05rem;
    cursor: pointer;
    z-index: 999;
}

#app .reward-page .back-to-top svg {
    width: 0.2rem;
    height: 0.2rem;
}

#app .reward-page .back-to-top.show {
    opacity: 1;
}

#app .reward-page.m-reward-page .banner {
    height: 5rem;
}

#app .reward-page.m-reward-page .banner img {
    height: 100%;
}

#app .reward-page.m-reward-page .container {
    width: 10.8rem;
}

#app .reward-page.m-reward-page .coin-available {
    padding: 0.35rem 0;
}

#app .reward-page.m-reward-page .coin-available .container {
    justify-content: space-between;
}

#app .reward-page.m-reward-page .coin-available .container>div span {
    font-size: 0.35rem;
}

#app .reward-page.m-reward-page .coin-available .container>div>div {
    margin: 0 0.3rem;
}

#app .reward-page.m-reward-page .coin-available .container>div>div img {
    width: 1rem;
    margin-right: 0.4rem;
}

#app .reward-page.m-reward-page .coin-available .container>div>div span {
    font-size: 0.53rem;
}

#app .reward-page.m-reward-page .coin-available .container>div:nth-child(2) {
    width: auto;
    position: relative;
}

#app .reward-page.m-reward-page .coin-available .container svg {
    width: 0.6rem;
    margin-left: 0.4rem;
}

#app .reward-page.m-reward-page .instructions {
    display: block;
    width: 100%;
    max-width: 10.8rem;
    margin: 0.4rem 0 0.7rem;
}

#app .reward-page.m-reward-page .instructions li {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    padding-top: 0.25rem;
}

#app .reward-page.m-reward-page .instructions li span {
    width: 100%;
    font-size: 0.42rem;
    line-height: 0.5rem;
}

#app .reward-page.m-reward-page .instructions li span:first-child {
    height: 0.9rem;
    width: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.4rem;
}

#app .reward-page.m-reward-page .search-panel {
    width: 10.8rem;
    flex-wrap: wrap;
}

#app .reward-page.m-reward-page .search-panel .current-select {
    height: 1.2rem;
    margin-bottom: 0.3rem;
    width: 100%;
    font-size: 0.45rem;
    padding: 0.3rem .55rem;
    border-radius: 0.13rem;
}

#app .reward-page.m-reward-page .search-panel .current-select ul {
    width: 100%;
    top: 1.2rem;
    font-size: 0.45rem;
    left: 0;
    height: auto;
}

#app .reward-page.m-reward-page .search-panel .current-select ul li {
    padding: 0.25rem 0.5rem;
    margin: .05rem .15rem;
}

#app .reward-page.m-reward-page .search-panel .current-select .icon-box {
    right: 0.45rem;
}

#app .reward-page.m-reward-page .search-panel .current-select .icon-box .icon-arrow2 {
    width: 0.35rem;
    height: 0.2rem;
    margin-bottom: 0.05rem;
}

#app .reward-page.m-reward-page .search-panel input {
    margin: 0 0 0.3rem 0;
    width: 48.5%;
    font-size: 0.45rem;
    padding: 0 0.4rem;
    height: 1.2rem;
    border-radius: 0.13rem;
}

#app .reward-page.m-reward-page .search-panel input:nth-child(4) {
    width: 100%;
}

#app .reward-page.m-reward-page .search-panel button {
    width: 100%;
    font-size: 0.45rem;
    height: 1.2rem;
    border-radius: 0.13rem;
    margin-left: 0;
}

#app .reward-page.m-reward-page .reward-catalog ul {
    grid-template-columns: 48% 48%;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product {
    margin-bottom: 0.68rem;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .img {
    height: 3.2rem;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box {
    font-size: 0.28rem;
    line-height: 0.28rem;
    padding: 0.45rem 0.35rem 0.6rem;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box .title {
    margin-bottom: 0.25rem;
    font-size: 0.36rem;
    line-height: 0.4rem;
    height: 0.9rem;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box .coin {
    font-size: 0.45rem;
    line-height: 0.45rem;
    height: 0.75rem;
    padding: 0.15rem 0;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box button.redeem-btn {
    width: 3.2rem;
    font-size: 0.38rem;
    padding: 0.1rem 0.1rem;
    margin-top: 0.4rem;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box .line-box .line1 {
    height: 0.06rem;
    bottom: 0;
    top: auto;
    width: 100%;
}

#app .reward-page.m-reward-page .reward-catalog ul li.product .bottom-box .line-box .line2 {
    width: 2.2rem;
    top: auto;
    height: 0.08rem;
    bottom: 0.04rem;
    transform: translateX(-50%) perspective(0.5em) rotateX(8deg);
}

#app .reward-page.m-reward-page .order-history-menu {
    width: 1.8rem;
    height: 1.1rem;
    padding: 0.16rem;
    display: block;
    top: 1.8rem;
}

#app .reward-page.m-reward-page .order-history-menu svg {
    width: 1.1rem;
    height: 1.1rem;
    position: absolute;
    left: -0.5rem;
    border-radius: 50%;
    padding: 0.15rem;
    top: 0;
}

#app .reward-page.m-reward-page .order-history-menu .text {
    display: block;
    text-align: left;
    font-size: 0.28rem;
    line-height: 0.32rem;
    margin-left: 0.38rem;
    white-space: normal;
    margin-top: 0.08rem;
    width: 1.2rem;
    z-index: 1;
    position: absolute;
}

#app .reward-page.m-reward-page .back-to-top {
    bottom: 3rem;
    right: 0.7rem;
    height: 1rem;
    width: 1rem;
    border-radius: 0.08rem;
}

#app .reward-page.m-reward-page .back-to-top svg {
    width: 0.45rem;
    height: 0.45rem;
}

#app .reward-popup .popup {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-width: 10rem;
    border-radius: 0.15rem;
    overflow: hidden;
    z-index: 99;
    position: absolute;
    cursor: default;
}

#app .reward-popup .popup .popup-header {
    padding: 0.13rem 0.15rem;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

#app .reward-popup .popup .popup-header .popup-header-left {
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
}

#app .reward-popup .popup .popup-header .popup-header-left .popup-title {
    white-space: nowrap;
    font-size: 0.2rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
}

#app .reward-popup .popup .popup-header .popup-header-right {
    display: flex;
    justify-content: flex-end;
    color: #fff;
    position: absolute;
    top: 0.13rem;
    right: 0.15rem;
}

#app .reward-popup .popup .popup-header .popup-header-right svg {
    width: 0.3rem;
    height: 0.3rem;
    background: #fff;
    border-radius: 50%;
    padding: 0.03rem;
    cursor: pointer;
}

#app .reward-popup .popup .popup-body {
    padding: 0.4rem 0.7rem;
    overflow-y: scroll;
    min-height: 0.75rem;
    background-color: #282828;
    width: 100%;
    font-size: 0.13rem;
    line-height: 0.22rem;
    color: #bdbdbd;
}

#app .reward-popup .popup .popup-body .box {
    display: flex;
    align-items: center;
}

#app .reward-popup .popup .popup-body .box .productImg {
    width: 3.6rem;
    height: 2.2rem;
    margin-right: 0.4rem;
}

#app .reward-popup .popup .popup-body .box .box-content {
    width: 100%;
}

#app .reward-popup .popup .popup-body .box .box-content .product-title {
    margin-bottom: 0.13rem;
    font-size: 0.22rem;
    font-weight: 700;
    line-height: 0.22rem;
    color: #fff;
}

#app .reward-popup .popup .popup-body .box .box-content .redeem-code {
    font-weight: 700;
    color: #fff;
    margin-left: 0.06rem;
    font-size: 0.14rem;
}

#app .reward-popup .popup .popup-body .box .box-content .item-left {
    line-height: 0.16rem;
    font-size: 0.16rem;
    margin-top: 0.2rem;
}

#app .reward-popup .popup .popup-body .box .box-content .coins {
    border-top: 0.01rem solid #404040;
    border-bottom: 0.01rem solid #404040;
    padding: 0.08rem 0;
    margin: 0.15rem 0;
}

#app .reward-popup .popup .popup-body .box .box-content .coins span:first-child {
    font-size: 0.4rem;
    line-height: 0.5rem;
    font-family: nunito-bold;
    color: #fff;
}

#app .reward-popup .popup .popup-body .box .box-content .coins span:nth-child(2) {
    font-size: 0.16rem;
    margin-left: 0.1rem;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity {
    display: flex;
    align-items: center;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector {
    display: flex;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button {
    width: 0.35rem;
    height: 0.35rem;
    border: none;
    color: #fff;
    cursor: pointer;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button[disabled] {
    opacity: 0.5;
    cursor: default;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector input {
    width: 0.6rem;
    height: 0.35rem;
    text-align: center;
    border: none;
    background: #4e4e4e;
    color: #fff;
}

#app .reward-popup .popup .popup-body .box .box-content .quantity .coin-subtotal {
    font-size: 0.15rem;
    margin-left: 0.2rem;
}

#app .reward-popup .popup .popup-body .box .box-content .btn-box {
    height: 0.35rem;
}

#app .reward-popup .popup .popup-body .box .box-content .btn-box button {
    height: 100%;
    font-size: 0.16rem;
    width: 2rem;
    color: #fff;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 0.4rem;
    border-radius: 0.05rem;
    border: none;
    cursor: pointer;
}

#app .reward-popup .popup .popup-body .box .box-content .btn-box button.ofs {
    background: #404040;
    cursor: default;
}

#app .reward-popup .dismissPopup {
    cursor: pointer;
}

@media (max-width: 1024px) {
    #app .reward-popup .popup {
        max-width: 15rem;
    }

    #app .reward-popup .popup .popup-header {
        padding: 0.16rem 0.2rem;
    }

    #app .reward-popup .popup .popup-header .popup-header-left .popup-title {
        font-size: 0.3rem;
    }

    #app .reward-popup .popup .popup-header .popup-header-right {
        top: 0.16rem;
        right: 0.2rem;
    }

    #app .reward-popup .popup .popup-header .popup-header-right svg {
        width: 0.45rem;
        height: 0.45rem;
    }

    #app .reward-popup .popup .popup-body {
        font-size: 0.22rem;
        line-height: 0.4rem;
    }

    #app .reward-popup .popup .popup-body .box {
        display: flex;
        align-items: center;
    }

    #app .reward-popup .popup .popup-body .box .productImg {
        width: 6.81rem;
        height: 3.09rem;
        margin-right: 0.43rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content {
        width: 100%;
    }

    #app .reward-popup .popup .popup-body .box .box-content .product-title {
        margin-bottom: 0.13rem;
        font-size: 0.32rem;
        line-height: 0.32rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .redeem-code {
        margin-left: 0.12rem;
        font-size: 0.25rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .item-left {
        line-height: 0.25rem;
        font-size: 0.25rem;
        margin-top: 0.4rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .coins {
        padding: 0.18rem 0 0.11rem;
        margin: 0.3rem 0;
    }

    #app .reward-popup .popup .popup-body .box .box-content .coins span:first-child {
        font-size: 0.6rem;
        line-height: 0.6rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .coins span:nth-child(2) {
        font-size: 0.22rem;
        line-height: 0.22rem;
        margin-left: 0.15rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button {
        width: 0.5rem;
        height: 0.5rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button[disabled] {
        opacity: 0.5;
        cursor: default;
    }

    #app .reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector input {
        width: 0.8rem;
        height: 0.5rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .quantity .coin-subtotal {
        font-size: 0.25rem;
        margin-left: 0.4rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .btn-box {
        height: 0.55rem;
    }

    #app .reward-popup .popup .popup-body .box .box-content .btn-box button {
        font-size: 0.26rem !important;
        width: 2.6rem;
        margin-top: 0.55rem;
    }
}

#app .m-reward-popup .popup {
    max-width: 85%;
}

#app .m-reward-popup .popup .popup-header {
    padding: 0.3rem 0.5rem;
}

#app .m-reward-popup .popup .popup-header .popup-header-left {
    width: 85%;
}

#app .m-reward-popup .popup .popup-header .popup-header-left .popup-title {
    font-size: 0.5rem;
}

#app .m-reward-popup .popup .popup-header .popup-header-right {
    top: 0.32rem;
    right: 0.25rem;
}

#app .m-reward-popup .popup .popup-header .popup-header-right svg {
    width: 0.7rem;
    height: 0.7rem;
}

#app .m-reward-popup .popup .popup-body {
    font-size: 0.35rem;
    line-height: 0.74rem;
    padding: 0.5rem 0.7rem 0.8rem;
}

#app .m-reward-popup .popup .popup-body .box {
    display: block;
}

#app .m-reward-popup .popup .popup-body .box .productImg {
    width: 100%;
    height: 5rem;
    margin-bottom: 0.77rem;
    -o-object-fit: cover;
    object-fit: cover;
}

#app .m-reward-popup .popup .popup-body .box .box-content {
    width: 100%;
}

#app .m-reward-popup .popup .popup-body .box .box-content .product-title {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 0.55rem;
    margin-bottom: 0.14rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .redeem-code {
    margin-left: 0.2rem;
    font-size: 0.4rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .item-left {
    line-height: 0.42rem;
    font-size: 0.42rem;
    margin-top: 0.4rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .coins {
    padding: 0.3rem 0 0.15rem;
    margin: 0.5rem 0;
}

#app .m-reward-popup .popup .popup-body .box .box-content .coins span:first-child {
    font-size: 0.75rem;
    line-height: 0.75rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .coins span:nth-child(2) {
    font-size: 0.35rem;
    margin-left: 0.2rem;
    line-height: 0.35rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity {
    display: flex;
    align-items: center;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector {
    display: flex;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button {
    width: 0.8rem;
    height: 0.8rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector button[disabled] {
    opacity: 0.5;
    cursor: default;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity .quantity-selector input {
    width: 1.3rem;
    height: 0.8rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .quantity .coin-subtotal {
    font-size: 0.4rem;
    line-height: 0.4rem;
    margin-left: 0.5rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .btn-box {
    height: 0.85rem;
}

#app .m-reward-popup .popup .popup-body .box .box-content .btn-box button {
    font-size: 0.4rem !important;
    width: 4.6rem;
    border-radius: 0.13rem;
    margin-top: 1rem;
}

/* order history page */
#app .order-history-panel .order-history-list {
    max-width: 13.73rem;
    margin: 0.5rem auto;
    font-size: 0.16rem;
}

#app .order-history-panel .order-history-list .back {
    color: #979797;
    font-size: 0.16rem;
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
    cursor: pointer;
}

#app .order-history-panel .order-history-list .back svg {
    margin-right: 0.12rem;
}

#app .order-history-panel .order-history-list .page-title {
    font: 700 0.26rem Nunito-Regular;
    color: rgb(255, 255, 255);
    margin-bottom: 0.1rem;
}

#app .order-history-panel .order-history-list .filter .group-item {
    display: flex;
}

#app .order-history-panel .order-history-list .filter .group-item .group {
    display: flex;
    align-items: center;
}

#app .order-history-panel .order-history-list .filter .group-item .group .input-box {
    width: 2rem;
    border-radius: 0.05rem;
    position: relative;
    display: flex;
    align-items: center;
}

#app .order-history-panel .order-history-list .filter .group-item .group .input-box input {
    width: 100%;
    height: 0.45rem;
    border-radius: 0.05rem;
    padding-left: 0.13rem;
    font-weight: 600;
    font-size: 0.21rem;
    color: #8697a2;
    background: transparent;
    border: 0.01rem solid #383838;
}

#app .order-history-panel .order-history-list .filter .group-item .group .input-box .icon-date {
    position: absolute;
    right: 0.13rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#app .order-history-panel .order-history-list .filter .group-item .btn-submit {
    width: 1.18rem;
    height: 0.45rem;
    border-radius: 0.05rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    cursor: pointer;
    margin-left: 0.22rem;
    color: #fff;
    border-style: unset;
}

#app .order-history-panel .order-history-list .filter .dash {
    color: #7c7c7c;
    width: 0.3rem;
    text-align: center;
}

#app .order-history-panel .order-history-list .table-container {
    color: #6b707d;
}

#app .order-history-panel .order-history-list .table-container .table-head {
    display: flex;
    font: 500 0.16rem nunito-regular;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col {
    margin: 0.7rem 0 0.3rem;
    display: flex;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(2) {
    width: 47%;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(3) {
    width: 8%;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col:first-child {
    width: 15%;
    padding-left: 0.5rem;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(4),
#app .order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(5) {
    width: 12%;
}

#app .order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(6) {
    width: 5%;
}

#app .order-history-panel .order-history-list .table-container .table-body {
    font: 500 0.18rem nunito-semibold;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row {
    background: #363636;
    color: #fff;
    border-radius: 0.1rem;
    display: flex;
    margin: 0 0 0.21rem;
    align-items: center;
    height: 100%;
    flex-wrap: wrap;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col {
    display: flex;
    min-height: 0.7rem;
    align-items: center;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(2) {
    width: 47%;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(3) {
    width: 8%;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:first-child {
    width: 15%;
    padding-left: 0.5rem;
    display: grid;
    min-height: auto;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:first-child span:nth-child(2) {
    font-size: 0.15rem;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(4),
#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(5) {
    width: 12%;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(6) {
    width: 5%;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col.approved {
    color: #18af41;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col.rejected {
    color: #d92a2a;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col.pending {
    color: #d1b500;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .table-col svg {
    width: 0.38rem;
    height: 0.38rem;
    cursor: pointer;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details {
    width: 95%;
    margin: 0.1rem auto;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div {
    padding: 0.12rem 0.2rem;
    color: #c9c9c9;
    display: block;
    justify-content: space-between;
    align-items: center;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div>div {
    display: flex;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div>div span:first-child {
    width: 1.6rem;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div>div p {
    max-width: 10.8rem;
}

#app .order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div.title {
    font-family: nunito-bold;
    padding: 0.07rem 0.2rem;
    background: #484848;
}

#app .order-history-panel.m-order-history-panel {
    margin: 0.3rem auto;
    width: 11.07rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .back {
    font-size: 0.4rem;
    margin-bottom: 0.8rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .page-title {
    font-size: 0.45rem;
    margin-bottom: 0.4rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .group-item {
    width: 11.07rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .group-item .group .input-box {
    width: 3.8rem;
    border-radius: 0.13rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .group-item .group .input-box .icon-date {
    width: 0.4rem;
    height: 0.4rem;
    right: 0.35rem;
    top: 0.48rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .group-item .group .input-box input {
    font-size: 0.45rem;
    height: 1rem;
    border-radius: 0.13rem;
    padding: 0 0.35rem;
    margin-top: 0;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .group-item .btn-submit {
    width: 2rem;
    height: 0.85rem;
    font-size: 0.38rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .filter .dash {
    font-size: 0.4rem;
    width: 0.8rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head {
    font-size: 0.3rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:first-child {
    width: 22%;
    padding-left: 0.3rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(2) {
    width: 35%;
    padding-right: 0.2rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(3),
#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(4),
#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(5) {
    width: 14%;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-head .table-col:nth-child(6) {
    width: 0%;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body {
    font-size: 0.3rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:first-child {
    width: 22%;
    padding-left: 0.3rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:first-child span:nth-child(2) {
    font-size: 0.26rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(2) {
    width: 35%;
    padding-right: 0.2rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(3),
#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(4),
#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(5) {
    width: 14%;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(6) {
    width: 100%;
    justify-content: center;
    padding-top: 0;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .table-col:nth-child(6) img {
    width: 0.25rem;
    height: 0.14rem;
    margin-left: 0.18rem;
    margin-bottom: 0.04rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div {
    display: block;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div>div span {
    width: 2.6rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div>div p {
    max-width: 7.2rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div:first-child {
    padding-bottom: 0.2rem;
}

#app .order-history-panel.m-order-history-panel .order-history-list .table-container .table-body .table-row .dropdown-details>div>div>div:nth-child(2) {
    font-size: 0.3rem;
    width: 100%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-top: 1px solid #4f4f4f;
}

/* country page */
html {
    scroll-behavior: smooth;
}
#app div[data-page=unknown] .bg-content-section {
    padding-top: 0!important;
}
.country-landing {
    background: #101010;
    height: 100%;
    width: 100%;
}

.country-landing .head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 9px;
    position: fixed;
    z-index: 3;
    width: 100%;
    background: #000;
}

.country-landing .head .icon-logo {
    width: 135px;
    background-position: center;
    height: 20px;
}

.country-landing .head .slogan {
    font-family: nunito-extrabold;
    font-size: 18px;
}

.country-landing .head .slogan .highlight {
    font-family: nunito-extrabold;
    color: var(--primary-color);
}

.country-landing .slogan {
    color: #fff;
    font-family: nunito-bold;
    font-size: 40px;
}

.country-landing .slogan.title {
    font-family: nunito-regular;
    font-size: 22px;
    color: #a2aabd;
    margin-bottom: 5px;
}

.country-landing .top-section {
    width: 100%;
    height: 100vh;
    position: relative;
    text-align: center;
}

.country-landing .top-section video {
    width: 100%;
    height: 100%;
}

.country-landing .overlays {
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 85%);
    width: 100%;
    height: 100%;
}

.country-landing .top-section .content {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.country-landing .top-section .list-box {
    display: flex;
    justify-content: center;
    margin: 70px 0 80px;
    color: #fff;
    font-size: 20px;
    gap: .5rem;
}

.country-landing .top-section .list-box .country-choice {
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.country-landing .top-section .list-box .country-choice:hover {
    transform: translateY(-0.15rem);
}

.country-landing .top-section .list-box .country-choice img {
    max-width: 86px
}

.country-landing .top-section .scrolldown {
    -moz-animation: bounce 3s infinite;
    -webkit-animation: bounce 3s infinite;
    animation: bounce 3s infinite;
    width: 100%;
    position: absolute;
    bottom: -90px;
}

.country-landing .top-section .scrolldown img {
    max-width: 100%;
    width: 23px;
}

.country-landing .section-two {
    padding: 100px 30px;
    background: url('/images/FIFO88/landing/country-landing-bg.jpg') no-repeat center;
    color: #6E7484;
    width: 100%;
}

.country-landing .section-two .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.country-landing .section-two .col {
    width: 50%;
    text-align: left;
}

.country-landing .section-two .col:last-child {
    padding: 0 0 0 1.2rem;
}

.country-landing .video {
    width: 100%;
    height: 3.85rem;
    border-radius: 15px;
    overflow: hidden;
}

.country-landing .partner-mv-head {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.country-landing .partner-mv-head img {
    width: 160px;
    height: 28px;
    object-fit: contain;
    object-position: left;
}

.country-landing .partner-mv-head>div {
    border-left: 2px solid var(--primary-color);
    padding-left: 20px;
}

.country-landing .partner-mv-head p {
    color: #fff;
    text-align: left;
    font-family: nunitosans-regular;
    font-size: 13px;
}

.country-landing .partner-mv-head p.name {
    color: var(--primary-color);
    font-family: nunito-extrabold;
    text-transform: uppercase;
    font-size: 18px;
}

.country-landing .section-two ul  {
    padding: 35px 0 35px 22px;
}

.country-landing .section-two ul li:before {
    content: "\2022";
    color: var(--primary-color);
    font-weight: bold;
    display: inline-block;
    width: 22px;
    margin-left: -22px;
}

.country-landing .section-two .desc {
    font-size: 16px;
    line-height: 1.35em;
}

.country-landing .section-two .desc p {
    margin-bottom: 20px;
}

.country-landing .section-two .partnerVideoSwiper {
    overflow: visible;
    margin-bottom: 20px;
}

.country-landing a.button {
    padding: 7px 35px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 6px;
    display: block;
    text-align: center;
    margin-top: 35px;
    width: 100%;
    max-width: 170px;
}

.country-landing .partner {
    position: relative;
    padding-top: 80px;
}

.country-landing .partner img {
    width: 100%;
}

.country-landing .partner .button {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
}

.country-landing .desktop {
    display: block;
}

.country-landing .partner-mv-head.desktop {
    display: flex;
}

.country-landing .mobile, .country-landing .partner-mv-head.mobile {
    display: none;
}

.country-landing .license-wrapper .license {
    color: #6E7484;
    text-align: left;
    font-size: 14px;
    line-height: 1.4em;
    padding-top: 60px;
    padding-left: 30px;
    padding-right: 30px;
}

.country-landing .license-wrapper .license>div>div {
    background: url('/images/FIFO88/landing/country-landing-box-bg.png');
    display: flex;
    padding: .3rem .55rem 0;
    justify-content: space-between;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    align-items: center;
}

.country-landing .license-wrapper .license p {
    margin-bottom: 18px;
}

.country-landing .license-wrapper .license .left {
    width: 35%;
}

.country-landing .license-wrapper .license .right {
    width: 60%;
    display: flex;
    align-self: flex-end;
}

.country-landing .license-wrapper .license .left img {
    width: 2.1rem;
    margin: 0 0 28px;
}

.country-landing .license-wrapper .license .right img {
    width: 100%;
}

.country-landing .swiper-button-next:after, .country-landing .swiper-button-prev:after {
    font-size: 22px;
}

.country-landing .swiper-button-next, .country-landing .swiper-rtl .swiper-button-prev {
    right: -40px;
}

.country-landing .swiper-button-prev, .country-landing .swiper-rtl .swiper-button-next {
    left: -40px;
}

.country-landing .swiper-horizontal>.swiper-pagination-bullets, .country-landing .swiper-pagination-bullets.swiper-pagination-horizontal, .country-landing .swiper-pagination-custom, .country-landing .swiper-pagination-fraction {
    bottom: -50px;
}

@media (max-width: 1024px) {
    .country-landing .section-two {
        padding: 0 0 20px 0;
    }

    .country-landing .section-two .col {
        width: 100%;
    }

    .country-landing .section-two .col:last-child {
        padding: 0 1.2rem;
    }

    .country-landing .video {
        height: 6.8rem;
        border-radius: 0;
    }

    .country-landing .section-two .partnerVideoSwiper {
        margin-bottom: 80px;
    }

    .country-landing .swiper-horizontal>.swiper-pagination-bullets, .country-landing .swiper-pagination-bullets.swiper-pagination-horizontal, .country-landing .swiper-pagination-custom, .country-landing .swiper-pagination-fraction {
        bottom: -35px;
    }

    .country-landing .partner-mv-head.desktop {
        display: none;
    }

    .country-landing .partner-mv-head.mobile {
        display: flex;
        width: 85%;
        margin: 0 auto 20px
    }

    .country-landing .partner-mv-head img {
        width: 200px;
        height: 35px;
    }

    .country-landing .partner-mv-head>div {
        padding-left: 30px;
    }

    .country-landing .swiper-button-next, .country-landing .swiper-rtl .swiper-button-prev {
        right: 20px;
        bottom: auto;
        top: -40px;
    }

    .country-landing .swiper-button-prev, .country-landing .swiper-rtl .swiper-button-next {
        left: 20px;
        bottom: auto;
        top: -40px;
    }

    .country-landing .license-wrapper .license .left {
        width: 50%;
    }
}
@media (max-width: 575px) {
    .country-landing .head {
        padding: 12px 8px;
    }
    .country-landing .head .icon-logo {
        width: 100px;
        height: 16px;
    }
    .country-landing .head .slogan {
        font-size: 13px;
    }
    .country-landing .slogan {
        font-size: 23px;
    }
    .country-landing .slogan.title {
        font-size: 16px;
    }
    .country-landing .top-section {
        height: 50vh;
        padding-top: 42px;
    }
    .country-landing .top-section .list-box {
        margin: 30px 0 40px;
    }
    .country-landing .top-section .list-box .country-choice img {
        max-width: 53px;
        width: 53px;
    }
    .country-landing .top-section .list-box .country-choice p {
        font-size: 11px;
    }
    .country-landing .top-section .scrolldown img {
        width: 21px;
    }
    .country-landing .section-two {
        padding: 40px 0;
    }
    .country-landing .section-two .col {
        width: 100%;
    }
    .country-landing .section-two .desc {
        font-size: 13px;
    }
    .country-landing .section-two ul {
        padding: 25px 0 30px 22px;
    }
    .country-landing .section-two .partnerVideoSwiper {
        margin-bottom: 55px;
    }
    .country-landing .partner-mv-head.mobile {
        width: 9.5rem;
    }
    .country-landing .partner-mv-head img {
        width: 2.8rem;
        height: .8rem;
        margin-right: 15px;
    }
    .country-landing .partner-mv-head p {
        font-size: .32rem;
        line-height: 1.3em;
        margin-bottom: 3px;
    }
    .country-landing .partner-mv-head p.name {
        font-size: .48rem;
    }
    .country-landing .partner-mv-head>div {
        padding-left: 15px;
    }
    .country-landing .desktop {
        display: none;
    }
    .country-landing .mobile {
        display: block;
    }
    .country-landing .swiper-horizontal>.swiper-pagination-bullets, .country-landing .swiper-pagination-bullets.swiper-pagination-horizontal, .country-landing .swiper-pagination-custom, .country-landing .swiper-pagination-fraction {
        bottom: -30px;
    }
    .country-landing .swiper-button-next:after, .country-landing .swiper-button-prev:after {
        font-size: 16px;
    }
    .country-landing .partner {
        padding-top: 50px;
        padding-bottom: 30px;
    }
    .country-landing .partner .button {
        width: 10.1rem;
    }
    .country-landing a.button {
        border-radius: 9px;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .country-landing .license-wrapper .license {
        padding-top: 120px;
        padding-left: 0;
        padding-right: 0;
    }
    .country-landing .license-wrapper .license>div>div {
        display: block;
        padding: 1.8rem .8rem 0 .8rem;
        border-radius: 0;
    }
    .country-landing .license-wrapper .license .left {
        width: 100%;
    }
    .country-landing .license-wrapper .license .right {
        width: 90%;
        margin: auto;
    }
    .country-landing .license-wrapper .license .left img {
        margin: 0 0 .5rem;
        width: 4.6rem;
    }
    .country-landing .license-wrapper .license p {
        font-size: 13px;
    }
    .country-landing .partner .button {
        bottom: 0;
    }
}


#app .activation-box .standard-popup-modal-container {
    width: 6.38rem;
    position: absolute;
    left: 50%;
    z-index: 99;
    transform: translateX(-50%);
}
#app .activation-box span {
    font-family: nunito-regular;
}

#app .activation-box .standard-popup-modal-container .modal-header .standard-modal-title {
    text-align: center;
    font-size: .18rem;
}

#app .activation-box .standard-popup-modal-container .modal-body {
    text-align: center;
}

#app .activation-box .standard-popup-modal-container button.btn-submit {
    cursor: pointer;
}

#app .member-panel .member-com-page .member-main .member-wallet .activation-box .standard-popup-modal-container .modal-header {
    color: #fff;
    padding: 0.1rem 0.18rem;
}

#app .activation-box .standard-popup-modal-container .modal-body {
    padding: 0.35rem;
}

#app .activation-box .standard-popup-modal-container button.btn-submit {
    height: 0.4rem;
    display: block;
    width: 2.5rem;
    border-radius: 0.05rem;
    margin: 0.25rem auto 0.05rem;
    position: relative;
    border: none;
    font-family: nunito-bold;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container {
    width: 10.8rem;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container .modal-header {
    padding: 0.55rem .35rem .1rem;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container .modal-header .standard-modal-title {
    font-size: .5rem;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container .modal-body {
    padding:  0.5rem 0.55rem .6rem;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container button.btn-submit {
    height: 1.2rem;
    width: 5.5rem;
    margin: 0.65rem auto 0.2rem;
    font-size: 0.4rem;
    border-radius: .6rem;
    background: var(--yellow-gradient);
    color: #000;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container .timer {
    margin-top: .35rem;
    font-size: .42rem;
    color: #d0d5d5;
}

#app .activation-box.m-standard-popup-overlay .standard-popup-modal-container .modal-body a {
    color: #f9f61e;
}


.alt-server-section {
    margin-top: 60px;
}

.alt-server-section .title {
    color: #e0e0e0;
    text-align: center;
    margin-bottom: 30px;
    font-size: 16px;
}

.alt-server-section .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.alt-server-section .container .list {
    display: block;
    width: 25%;
    padding: 0 14px;
}

.alt-server-section .container .list li {
    background: #282828;
    color: #e0e0e0;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.alt-server-section .container .list li:hover {
    background: var(--primary-color);
}

.alt-server-section .container .list li img {
    width: 24px;
    margin-right: 18px;
}

@media (max-width: 1024px) {
    .alt-server-section {
        margin-bottom: 80px;
    }

    .alt-server-section .container .list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .alt-server-section .container .list li {
        width: 48%;
    }
}

@media (max-width: 767px) {
    .alt-server-section {
        margin-bottom: 10px;
    }
}

#app .form-divider {
    display: none !important;
    line-height: .9px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #e2e4e5;
    margin: 13px 0;
}

#app .form-divider span {
    background-color: #fff;
    color: #969fa7;
    font-size: 16px;
    letter-spacing: .57px;
    padding: 0 15px;
}

.button-scroll-container {
    display: none !important;
    /* display: flex; */
    overflow-x: auto;
    white-space: nowrap;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    scrollbar-width: thin;
    padding-left: 1.86rem;
    padding-right: 1.86rem;
    justify-content: center;
}

.button-scroll-container button {
    flex: 0 0 auto;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#app .gg-button {
    background-color: #f2f2f2;
}

#app .ws-button {
    background: #16BE45;
}

#app .tl-button {
    background: #54a9eb;
}

#app .tl-button .gsi-material-button-contents, .ws-button .gsi-material-button-contents {
    color: #fff;
}

#app .gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-image: none;
    border: none;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
}

#app .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

#app .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

#app .gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

#app .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

#app .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
}

#app .gsi-material-button:disabled .gsi-material-button-state {
    background-color: #1f1f1f1f;
}

#app .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

#app .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

#app .gsi-material-button:not(:disabled):active .gsi-material-button-state,
#app .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #001d35;
    opacity: 12%;
}

#app .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

#app .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #001d35;
    opacity: 8%;
}

#app .otp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#app .otp-container .otp-inputs {
    display: flex;
    gap: 10px;
}

#app .otp-container .otp-inputs .otp-input {
    width: 30px;
    height: 40px;
    text-align: center;
    font-size: 18px;
}

.mobile-login .form-divider {
    border-bottom: 1px solid #000 !important;
}

.mobile-login .form-divider span {
    color: #000 !important;
    position: relative;
}

html body .mobile-register .register-panel .content .step-content>div form .input-item.number-input > div {
    display: flex;
}

html body .mobile-register .register-panel .content .step-content>div form .input-item.number-input > div > button {
    display: flex;
    align-items: center;
    width: 3.16rem;
    height: 100%;
    min-height: 1.45rem;
    border: .01rem solid rgba(25, 25, 25, .2);
    border-radius: .29rem;
    font-size: .45rem;
    padding: 0 .49rem;
    background: #ffffff;
    color: #a2aabd;
    justify-content: space-between;
    cursor: pointer;
    margin: 0 .68rem 0 0;
}

html body .mobile-register .register-panel .content .step-content>div form .input-item.number-input > div > button > i{
    margin-left: 5px;
}

.myreferral-container .referral-statement-container .referral-statement-title .referral-detail a {
    color: #000;
}

.m-myaccount-referral-container .myreferral-container .referral-statement-container .referral-statement-title .referral-detail a {
    color: #F4D77F;
}

.btn.btn-sign-up, .btn-sign-up {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    /* animation: 1.5s ease 0s infinite normal none move1; */
}

@keyframes move1 {
    0% {
        opacity: .9;
    }

    10% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    70% {
        transform: scale(1);
        box-shadow: rgb(0 173 255 / 46%) 0 0 0 .15rem;
    }

    80% {
        transform: translate3d(-0.01rem, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: transparent 0 0 0 .22rem;
        opacity: 1;
    }
}

.promo-remark {
    color: #64c2ff;
}