@charset "UTF-8";
.pwa-download {
    --pwa-download-bg: linear-gradient(90deg, #af9963 0%, #192243 100%);
    --pwa-icon-frame: rgba(255, 255, 255, .5);
    --pwa-close-icon-bg: #ffffff;
    --pwa-name-text: #ffffff;
    --pwa-download-btn-text: #ffffff
}

.ios-pwa-pop {
    --ios-pop-header-bg: linear-gradient(0deg, #192243 0%, #af9963 100%);
    --ios-title-text-color: #ffffff;
    --ios-line-color: rgba(255, 255, 255, .2);
    --ios-icon-bg: #ffffff
}

.deposit-success-pop,
.withdrawal-processing-pop {
    --transaction-pop-info-list-title-bg: #222222;
    --transaction-pop-info-list-txt-bg: #2e2f31;
    --transaction-pop-info-list-txt: #fd1111
}

.header-desktop {
    --header-background: #222222;
    --header-btn-bg: linear-gradient(0deg, #700402 0%, #e31210 100%);
    --header-btn-bg-secondary: linear-gradient(180deg, #444 0%, #222 100%);
    --icon-color: #ffffff
}

.header-desktop-user-dropdown {
    --header-desktop-user-dropdown-bg: #222222;
    --header-desktop-user-dropdown-border: #7e7e7e;
    --header-desktop-user-dropdown-inbox-bg: #f51111;
    --header-desktop-user-dropdown-exclamation-bg: #f51111
}

.value-display {
    --header-desktop-user-dropdown-value-display-highlight: #fd1111
}

.left-menu {
    --leftmenu-head-arrow-bg: #7e7e7e;
    --leftmenu-head-bg: #000000;
    --leftmenu-category-bg: #222222;
    --leftmenu-category-border: #222222;
    --leftmenu-category-sec-bg: #000000;
    --leftmenu-category-sec-border: #7e7e7e;
    --leftmenu-head-btn-bg: linear-gradient(0deg, #700402 0%, #e31210 100%)
}

.deposit-label {
    --deposit-label-bg: #fd1111
}

.main-wallet-label {
    --main-wallet-label-bg: #2e2f31
}

.layout-desktop__content {
    --layout-desktop-search-bg: #222222;
    --layout-desktop-search-btn-bg: linear-gradient( 0deg, #700402 0%, #e31210 100%)
}

.referral-partner {
    --referral-partner-code-box-share-btn: linear-gradient( 0deg, #700402 0%, #e31210 100%);
    --referral-partner-code-copy-btn-bg: linear-gradient( 0deg, #700402 0%, #e31210 100%);
    --referral-partner-invite-box-title-txt: #fd1111;
    --referral-partner-invite-box-item-txt: #fff;
    --referral-partner-receive-box-txt-strong: #fd1111;
    --referral-partner-receive-btn-disabled: linear-gradient( 180deg, #444 0%, #222 100%);
    --referral-partner-commission-bets-sub-title: #fd1111;
    --referral-partner-achievement-txt-strong: #fdfd12;
    --referral-partner-achievement-list-bg: linear-gradient( to left, #700402 0, #e31210);
    --referral-partner-achievement-list-border: #7e7e7e;
    --referral-partner-achievement-list-shadow-inset: #fd1111;
    --referral-partner-mask-bg-lock: rgba(0, 0, 0, .8);
    --referral-partner-title-group-border: #7e7e7e;
    --referral-partner-bonus-goals-sub-title-border: #7e7e7e;
    --referral-partner-mask-bg-complete: rgba(0, 0, 0, .5);
    --referral-partner-mask-shadow-inset-complete: #4eb170;
    --referral-partner-mask-border-complete: #4eb170;
    --referral-partner-achievement-tab-btn-bg: #2e2f31;
    --referral-partner-achievement-tab-btn-bg-active: linear-gradient( 0deg, #700402, #e31210)
}

mcd-referral-bonus-goals-detail {
    --referral-partner-bonus-goals-detail-bg: #000000;
    --referral-partner-reward-pop-list-bg: linear-gradient( to bottom, #700402 0%, #e31210 100%);
    --referral-partner-reward-pop-list-txt: #fff;
    --referral-partner-bonus-goals-detail-sub-title-border: #7e7e7e
}

.float-widget {
    --widget-btn-bg: #e31210
}

.player-vip-box {
    --vip-card-history-btn-bg: linear-gradient(0deg, #700402 0%, #e31210 100%);
    --vip-total-record-btn-bg: linear-gradient(0deg, #700402 0%, #e31210 100%)
}

.tab-btn-page.tab-nav-icon {
    --tab-icon-section-btn-border-active: transparent
}

:root {
    --black-0: rgba(0, 0, 0, 0);
    --black-5: rgba(0, 0, 0, .05);
    --black-10: rgba(0, 0, 0, .1);
    --black-20: rgba(0, 0, 0, .2);
    --black-30: rgba(0, 0, 0, .3);
    --black-40: rgba(0, 0, 0, .4);
    --black-50: rgba(0, 0, 0, .5);
    --black-60: rgba(0, 0, 0, .6);
    --black-70: rgba(0, 0, 0, .7);
    --black-80: rgba(0, 0, 0, .8);
    --black-90: rgba(0, 0, 0, .9);
    --black-100: #1a1a1a;
    --white-0: rgba(255, 255, 255, 0);
    --white-5: rgba(255, 255, 255, .05);
    --white-10: rgba(255, 255, 255, .1);
    --white-20: rgba(255, 255, 255, .2);
    --white-30: rgba(255, 255, 255, .3);
    --white-40: rgba(255, 255, 255, .4);
    --white-50: rgba(255, 255, 255, .5);
    --white-60: rgba(255, 255, 255, .6);
    --white-70: rgba(255, 255, 255, .7);
    --white-80: rgba(255, 255, 255, .8);
    --white-90: rgba(255, 255, 255, .9);
    --white-100: #ffffff;
    --background-0: #ffffff;
    --background-100: #ffffff;
    --background-200: #ffffff;
    --background-300: #454546;
    --background-400: #424242;
    --background-500: #383839;
    --background-600: #222222;
    --background-900: #000000;
    --primary-50: #ffe7e7;
    --primary-100: #feb5b5;
    --primary-200: #fe9292;
    --primary-300: #fe6060;
    --primary-400: #fd4141;
    --primary-500: #fd1111;
    --primary-600: #e60f0f;
    --primary-700: #b40c0c;
    --primary-800: #b40c0c;
    --primary-900: #6a0707;
    --secondary-50: #e6e6e6;
    --secondary-100: #b0b0b0;
    --secondary-200: #8a8a8a;
    --secondary-300: #545454;
    --secondary-400: #333333;
    --secondary-500: #000000;
    --secondary-600: #ffffff;
    --secondary-700: #ffffff;
    --secondary-800: #ffffff;
    --secondary-900: #ffffff;
    --primary-alpha-0: rgba(253, 17, 17, 0);
    --primary-alpha-10: rgba(253, 17, 17, .1);
    --primary-alpha-20: rgba(253, 17, 17, .2);
    --primary-alpha-30: rgba(253, 17, 17, .3);
    --primary-alpha-40: rgba(253, 17, 17, .4);
    --primary-alpha-50: rgba(253, 17, 17, .5);
    --primary-alpha-60: rgba(253, 17, 17, .6);
    --primary-alpha-70: rgba(253, 17, 17, .7);
    --primary-alpha-80: rgba(253, 17, 17, .8);
    --primary-alpha-90: rgba(253, 17, 17, .9);
    --primary: #fd1111;
    --secondary: $secondary;
    --color-success: #28b849;
    --color-warning: #f0b800;
    --on-surface-primary: rgba(255, 255, 255, .9);
    --on-surface-secondary: rgba(255, 255, 255, .7);
    --on-surface-tertiary: rgba(255, 255, 255, .5);
    --on-surface-disabled: rgba(255, 255, 255, .3);
    --on-primary: #ffffff;
    --surface-default: #000000;
    --surface-container: #222222;
    --surface-container-transparent: rgba(34, 34, 34, 0);
    --surface-disabled: rgba(255, 255, 255, .2);
    --table-body-odd-bg: #383839;
    --table-body-even-bg: #424242
}

:root mcd-tab-btn {
    --tab-btn-bg: #383839
}

:root mcd-free-spin {
    --free-spin-ticket-info-bg: rgba(255, 255, 255, .07);
    --free-spin-use-now-btn-bg: linear-gradient( 180deg, #e31210 0%, #700402 100%);
    --free-spin-select-game-btn-bg: linear-gradient(180deg, #555 0%, #333 100%);
    --free-spin-use-now-btn-txt: #ffffff;
    --free-spin-select-game-btn-txt: #ffffff
}

:root mcd-top-banner {
    --winner-board-top-banner-date-range-bg: rgba(56, 56, 56, .7);
    --winner-board-top-banner-date-range-border: #454546
}

:root mcd-countdown-timer {
    --winner-board-countdown-timer-icon-bg: #454546
}

:root mcd-leader-board-list {
    --winner-board-rk-item-bg: #383838;
    --winner-board-rk-info-bg: #454546;
    --winner-board-rk-user-amount: #ffe552;
    --winner-board-usr-bg: #d20e0e;
    --winner-board-usr-border: #ff4b4b;
    --winner-board-usr-rank-number-border: #ff4b4b;
    --winner-board-usr-reward-border: #ff4b4b
}

:root mcd-leader-board-history {
    --leader-board-history-content-header-bg: #454546
}

:root mcd-first-to-reach-history {
    --first-to-reach-history-content-header-bg: #454546
}

:root mcd-coming-soon {
    --coming-soon-text-block-item-bg: rgba(0, 0, 0, .3)
}

:root mcd-first-to-reach-list {
    --first-to-reach-list-status-bg: #454546;
    --first-to-reach-list-item-body-bg: #383839
}

.pwa-download {
    --pwa-download-bg: linear-gradient(90deg, #fd1111 0%, #000000 100%);
    --pwa-icon-frame: rgba(255, 255, 255, .5);
    --pwa-close-icon-bg: #ffffff;
    --pwa-name-text: #ffffff;
    --pwa-download-btn-text: #ffffff;
    --pwa-download-btn-bg: linear-gradient(180deg, #e31210 0%, #700402 100%)
}

.ios-pwa-pop {
    --ios-pop-header-bg: linear-gradient(0deg, #000101 0%, #fd1111 100%);
    --ios-title-text-color: #ffffff;
    --ios-line-color: rgba(255, 255, 255, .2);
    --ios-icon-bg: #ffffff;
    --ios-inside-number-bg: #fd1111;
    --ios-outside-number-bg: #7e7e7e;
    --ios-focus-top-bg: #7e7e7e
}

.nav-item,
.left-menu-content {
    --leftmenu-category-focus-border-active: #fd1111;
    --leftmenu-category-focus-bg-active: #2e2f31
}

header {
    z-index: 6000
}

.menu {
    z-index: 9000
}

.pop-bg {
    z-index: 8000
}

.pop-wrap,
.member-menu,
.searchpage {
    z-index: 9000
}

.menu-mask,
.modal {
    z-index: 8000
}

.modal-backdrop {
    z-index: 7000
}

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

.tips-display {
    z-index: 8501
}

.loading-mask {
    z-index: 9003
}

.loader-box {
    z-index: 9004 !important
}

.rotating-pop {
    z-index: 9002
}

.game-type-menu {
    z-index: 8000
}

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

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

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

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

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

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

* {
    -webkit-tap-highlight-color: transparent;
    outline: none
}

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

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

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

@font-face {
    font-family: Impacto;
    font-weight: 700;
    src: url(/fonts/slick.eot);
    src: url(/fonts/slick.eot?#iefix) format("embedded-opentype"), url(/fonts/slick.woff) format("woff"), url(/fonts/slick.ttf) format("truetype"), url(/fonts/slick.svg#slick) format("svg");
    font-display: swap
}

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

body {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100vh;
    background: #000;
    font-family: Helvetica Neue, Helvetica, Tahoma, PingFang SC, Hiragino Sans GB, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif
}

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

body.no-scroll {
    overflow: hidden
}

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

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

.fixed-tab .tab-btn-section:not(.no-fix) {
    position: fixed;
    top: 13.3333333333vw;
    box-shadow: 0 .2666666667vw .8vw var(--tab-btn-section-shadow, rgba(0, 0, 0, .3));
    z-index: 4
}

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

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

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

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

.button {
    position: relative;
    width: 100%;
    height: 8vw;
    border-radius: .8vw;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 8vw;
    text-align: center
}

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

.button.button-disable {
    background: linear-gradient(180deg, #444, #222);
    color: #999
}

.button.button-disable a {
    color: #999
}

.button.btn-primary {
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff
}

.button.btn-secondary {
    background: linear-gradient(180deg, #444, #222);
    color: #fff
}

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

.button-pop-cancel {
    border-width: .2666666667vw;
    border-style: solid;
    border-color: linear-gradient(180deg, #444 0%, #222 100%);
    background: transparent;
    color: linear-gradient(180deg, #444 0%, #222 100%)
}

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

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

.eyes {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transform: translateY(-50%);
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 60%
}

.loading .banner-v1 .item-pic:before,
.loading .banner-v2 .item-pic:before {
    background: #000;
    box-shadow: inset 0 0 1.3333333333vw #ffffff80
}

.loading .recommend-card:before,
.loading .games-box:before,
.loading .card1 li:before,
.loading .card2 li:before {
    background: #000;
    box-shadow: inset 0 0 1.3333333333vw #ffffff80
}

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

.mcd-style .btn-loading {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit
}

.mcd-style .btn-loading:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 3px solid #ffffff;
    width: 22px;
    height: 22px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    animation: loading1 1s ease infinite;
    z-index: 10
}

.mcd-style .btn-loading:before {
    z-index: 5;
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 3px dashed #ffffff;
    width: 22px;
    height: 22px;
    border-left: 3px solid transparent;
    border-bottom: 3px solid transparent;
    animation: loading1 1s linear infinite
}

@keyframes loading1 {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

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

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

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

header.member {
    height: 13.3333333333vw;
    border-bottom: .2666666667vw solid rgba(153, 153, 153, .3);
    background: linear-gradient(180deg, #444, #222)
}

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

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

header.member .back-btn {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    background: #fff;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 20%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 20%
}

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

header.player,
header.register {
    background: linear-gradient(180deg, #444, #222)
}

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

header.player .back-btn,
header.register .back-btn {
    background: #fff
}

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

header.player .service-btn .item-icon,
header.player .forum-btn .item-icon,
header.register .service-btn .item-icon,
header.register .forum-btn .item-icon {
    background: #fff
}

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

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

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

header.vip {
    background: transparent;
    font-family: Jost, Roboto, sans-serif
}

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

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

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

header.vip .header-title {
    color: #fffc;
    font-size: 5.3333333333vw;
    font-weight: 400
}

header.active {
    box-shadow: 0 .2666666667vw .8vw #0000004d
}

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

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

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

header.referral-program .back-btn {
    display: flex
}

header.new-login-tab {
    border: 0
}

header.new-login,
header.new-profile {
    background: #272f46;
    border: 0
}

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

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

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

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

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

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

.menu-btn ul li:nth-child(2) {
    width: 4.5333333333vw
}

.menu-btn ul li:nth-child(3) {
    width: 3.7333333333vw
}

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

.service-btn .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

.service-btn p {
    color: #fd1111;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    width: 100%;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

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

.forum-btn .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #a38d5b;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

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

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

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

.login-btn .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

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

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

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

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

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

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

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

.inbox-btn p,
.custom-inbox-btn p,
.app-download p,
.whatapp-btn p,
.schedule-btn p,
.live-btn p {
    color: #fd1111;
    font-size: 3.2vw;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.inbox-btn p a,
.custom-inbox-btn p a,
.app-download p a,
.whatapp-btn p a,
.schedule-btn p a,
.live-btn p a {
    color: #fd1111
}

.app-download .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

.custom-inbox-btn .item-icon {
    width: 6.4vw;
    height: 6.4vw;
    margin-bottom: .5333333333vw;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent
}

.custom-inbox-btn .notice {
    position: absolute;
    top: 1.6vw;
    left: 5.3333333333vw;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 2.6666666667vw;
    color: #fff;
    line-height: 1;
    overflow: hidden;
    background: #f51111;
    box-shadow: inset .2px .2px #f51111;
    border: .6666666667vw solid #f51111;
    border-radius: 13.3333333333vw;
    padding: .2666666667vw .9333333333vw .2666666667vw .8vw;
    transform: none
}

.custom-inbox-btn .notice:after {
    display: none
}

.inbox-btn .item-icon,
.schedule-btn .item-icon,
.live-btn .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 100% auto
}

.inbox-btn .notice,
.schedule-btn .notice,
.live-btn .notice {
    display: block;
    position: absolute;
    top: 55%;
    right: 55%;
    width: 4vw;
    height: 4vw;
    transform: translate(150%, -150%);
    border-radius: 50%;
    background: #f51111;
    color: #fd1111;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4vw;
    text-align: center
}

.inbox-btn .notice:after,
.schedule-btn .notice:after,
.live-btn .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    bottom: -.96vw;
    left: -.96vw;
    transform: rotate(45deg);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #f51111 transparent transparent
}

.whatapp-btn .item-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-bottom: .5333333333vw;
    background: #fd1111;
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto
}

.whatapp-btn .bg-icon {
    background: transparent
}

.header-right-btn-group a {
    text-decoration: none
}

.toolbar {
    position: fixed;
    z-index: 104;
    bottom: 0;
    width: 100%;
    height: 13.3333333333vw;
    border-top: .2666666667vw solid rgba(255, 255, 255, .2);
    background: #000
}

.toolbar ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%
}

.toolbar ul li {
    position: relative;
    width: 20%;
    height: auto
}

.toolbar ul li a {
    display: block;
    text-decoration: none
}

.toolbar ul li a .item-icon {
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 0 auto 1.3333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.toolbar ul li a p {
    color: #fff;
    font-size: 3.2vw;
    text-align: center
}

.toolbar ul li:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transform: translate(-50%, -50%) scale(0);
    transition: all .3s;
    border-radius: 10.6666666667vw;
    background: #222
}

.toolbar ul li.active .item-icon {
    display: none
}

.toolbar ul li.active .item-icon-active {
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 0 auto 1.3333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.toolbar ul li.active:after {
    animation: toolbar-active-animation .4s ease-in-out;
    animation-fill-mode: forwards
}

@keyframes toolbar-active-animation {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }
    85% {
        transform: translate(-50%, -50%) scale(1.2)
    }
    90% {
        transform: translate(-50%, -50%) scale(.9)
    }
    95% {
        transform: translate(-50%, -50%) scale(1.1)
    }
    to {
        transform: translate(-50%, -50%) scale(1)
    }
}

.banner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    overflow: hidden;
    background: #000
}

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

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

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

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

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

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

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

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

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

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

.member-content .banner {
    background: #000
}

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

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

.nav-category {
    display: flex;
    position: relative;
    z-index: 3;
    width: 100%;
    height: auto;
    transition: all .3s;
    background: linear-gradient(0deg, #fd1111, #0e0e0e)
}

.nav-category .btn {
    position: relative;
    width: 100%;
    max-width: 20%;
    padding: 4vw 1.0666666667vw;
    transition: all .3s
}

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

.nav-category .btn .item-icon {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto 1.8666666667vw;
    transition: all .3s;
    border-radius: 10.6666666667vw;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.nav-category .btn:after {
    content: "";
    display: none;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    border-width: 2.1333333333vw;
    border-style: solid;
    border-color: transparent transparent #000000
}

.nav-category .btn p {
    color: #fff;
    font-size: 3.4666666667vw;
    font-weight: 700;
    text-align: center;
    overflow-wrap: break-word
}

.nav-category.active {
    position: fixed;
    z-index: 2;
    top: 13.0666666667vw;
    box-shadow: 0 0 .8vw #0000004d
}

.nav-category.active .item-icon {
    height: 0;
    margin: 0 auto;
    opacity: 0
}

html.is-desktop .nav-category {
    border-radius: 1.3333333333vw
}

.loading .nav-category {
    height: 26.1333333333vw
}

.loading .nav-category.active {
    height: auto
}

.loading .content-title {
    height: 10.6666666667vw
}

.loading mcd-scroll-banner {
    display: block;
    height: 64vw;
    width: auto
}

.loading mcd-feature-games,
.loading mcd-hot-games {
    display: block;
    height: 61.3333333333vw;
    width: auto
}

.tab {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 13.3333333333vw;
    border-top: .2666666667vw solid #7e7e7e;
    border-bottom: .2666666667vw solid #7e7e7e
}

.tab.search-tab {
    background: #000;
    margin-bottom: 4.2666666667vw
}

.tab.search-tab li {
    background: #2e2f31;
    color: #fff
}

.tab.search-tab li.active {
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff
}

.tab.search-tab .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 40%
}

.tab.filter-tab {
    background: #000
}

.tab.filter-tab ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0;
    line-height: 12vw
}

.tab.filter-tab li {
    line-height: 1.5;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    font-size: 3.2vw
}

.tab.filter-tab li+li:after {
    content: "";
    display: inline;
    position: absolute;
    height: 70%;
    top: 50%;
    transform: translateY(-50%);
    left: -1.6vw;
    width: .2666666667vw;
    background: #7e7e7e
}

.tab.filter-tab .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 40%
}

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

.tab ul {
    width: 100%;
    height: 100%;
    padding: 0 0 0 2.6666666667vw;
    overflow-x: auto;
    overflow-y: hidden;
    line-height: 13.3333333333vw;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

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

.tab .btn {
    display: block;
    padding: inherit;
    width: 13.3333333333vw;
    height: 12.8vw;
    border-left: .2666666667vw solid #7e7e7e;
    background: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%
}

.tab ul {
    padding-top: 2.4vw;
    line-height: 0;
    text-align: left
}

.sort-bar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 6.4vw);
    margin: 3.2vw auto;
    z-index: 1
}

.sort-bar__title {
    color: #fff;
    font-size: 4vw;
    font-weight: 700
}

.sort-bar__title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    background: #fd1111;
    border-radius: .5333333333vw;
    vertical-align: middle
}

.sort-bar__title span {
    display: inline-block;
    vertical-align: middle
}

.sort-bar__box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 3.2vw;
    color: #fff
}

.sort-bar__box.show .sort-bar__select {
    height: -moz-fit-content;
    height: fit-content;
    max-height: 300px;
    opacity: 1
}

.sort-bar__box.show .arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.sort-bar__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    min-width: 32vw;
    padding: 2.1333333333vw 2.6666666667vw;
    border-radius: .8vw;
    background: #2e2f31;
    margin-bottom: 1.0666666667vw
}

.sort-bar__select {
    position: absolute;
    top: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    opacity: 0
}

.sort-bar__select__item {
    display: block;
    width: 100%;
    margin: 0 2.4vw;
    background: #2e2f31;
    transition: all .3s
}

.sort-bar__select__item span {
    display: block;
    padding: 2.4vw 0;
    margin: 0 2.4vw
}

.sort-bar__select__item:first-child {
    border-radius: .8vw .8vw 0 0
}

.sort-bar__select__item:last-child {
    border-radius: 0 0 .8vw .8vw
}

.sort-bar__select__item:last-child span {
    border: none
}

.sort-bar__select__item.active {
    background: linear-gradient(0deg, #700402, #e31210)
}

.sort-bar__select__item.active span {
    color: #fff
}

.sort-bar .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 3.2vw;
    height: 3.2vw;
    background: #fff;
    mask-size: 90%;
    mask-repeat: no-repeat;
    mask-position: center 65%;
    -webkit-mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center 65%;
    margin-left: 1.3333333333vw;
    transition: all .5s
}

.tab-btn-page.tab-nav-icon {
    position: relative !important;
    padding: 4vw 3.2vw;
    height: auto;
    align-items: flex-start;
    background: var(--tab-icon-section-tab-bg, #000000);
    box-shadow: inset 0 -.2666666667vw .5333333333vw var(--tab-icon-section-tab-shadow-inset, transparent)
}

.tab-btn-page.tab-nav-icon .btn {
    flex-direction: column;
    padding: 0
}

.tab-btn-page.tab-nav-icon .btn+.btn {
    margin-left: 1.3333333333vw
}

.tab-btn-page.tab-nav-icon .btn .text {
    padding-top: 2.6666666667vw;
    width: 90%;
    color: var(--tab-icon-section-btn-txt, #7e7e7e);
    font-size: 3.2vw;
    opacity: 1
}

.tab-btn-page.tab-nav-icon .btn.active .btn-icon-wrap,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .btn-icon-wrap {
    background: var(--tab-icon-section-btn-bg-active, linear-gradient(0deg, #700402 0%, #e31210 100%));
    box-shadow: inset 0 0 .8vw 0 var(--tab-icon-section-btn-shadow-inset-active, #fd1111);
    border: 1px solid var(--tab-icon-section-btn-border-active, #7e7e7e)
}

.tab-btn-page.tab-nav-icon .btn.active .tab-btn-icon,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .tab-btn-icon {
    background: var(--tab-icon-section-btn-icon-active, #fff)
}

.tab-btn-page.tab-nav-icon .btn.active .text,
.tab-btn-page.tab-nav-icon .btn[data-tab-current=current] .text {
    color: var(--tab-icon-section-btn-txt-active, #fd1111)
}

.tab-btn-page.tab-nav-icon .btn-icon-wrap {
    width: 100%;
    padding: 4vw 0;
    border-radius: 1.3333333333vw;
    border: 1px solid var(--tab-icon-section-btn-border, #7e7e7e);
    background: var(--tab-icon-section-btn-bg, #222222);
    box-shadow: inset 0 .2666666667vw .2666666667vw 0 var(--tab-icon-section-btn-shadow-inset, #2d3953)
}

.tab-btn-page.tab-nav-icon .tab-btn-icon {
    width: 8vw;
    height: 8vw;
    margin: auto;
    mask: center/100% no-repeat;
    -webkit-mask: center/100% no-repeat;
    background: var(--tab-icon-section-btn-icon-bg, #7e7e7e)
}

.content-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 94.6666666667vw;
    margin: 0 auto;
    padding: 3.2vw 0
}

.content-title.active {
    padding: 17.3333333333vw 0 2.6666666667vw
}

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

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

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

.menu-mask {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #22222280
}

.menu {
    display: flex;
    position: fixed;
    top: 0;
    left: -100%;
    height: 100%;
    transition: all .3s
}

.menu.active {
    left: 0
}

.menu-first {
    position: relative;
    z-index: 2;
    width: 50.6666666667vw;
    height: 100%;
    padding-bottom: 6.6666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    background: #222;
    box-shadow: .5333333333vw 0 .8vw #0000001a;
    -webkit-overflow-scrolling: touch
}

.menu-first ul {
    position: relative;
    width: 100%
}

.menu-first ul:after {
    content: "";
    display: block;
    width: 100%;
    height: 2.6666666667vw;
    margin-top: -.2666666667vw;
    border-top: .2666666667vw solid #7e7e7e;
    background: #000
}

.menu-first ul.background-music-block {
    margin-bottom: -2.6666666667vw
}

.menu-first ul.background-music-block:after {
    display: none
}

.menu-first ul.background-music-block li[data-category=background-music] {
    padding-right: 2.6666666667vw
}

.menu-first ul.background-music-block li[data-category=background-music] a.item-title {
    flex: 1 1 0;
    min-width: 0;
    width: auto
}

.menu-first ul.home:after {
    display: none
}

.menu-first ul li {
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    padding: 2.6666666667vw;
    transition: all .3s;
    font-size: 3.4666666667vw
}

.menu-first ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff;
    text-decoration: none;
    overflow-wrap: anywhere
}

.menu-first ul li .item-icon {
    display: block;
    width: 8vw;
    height: 8vw;
    margin-right: 2.6666666667vw;
    padding: 4vw;
    border-radius: 8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.menu-first ul li.active {
    border-left: .8vw solid #fd1111;
    background: #2e2f31
}

.menu-first ul li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .2666666667vw;
    background: #7e7e7e
}

.menu-first ul li[data-category=ipl-prediction] a:before {
    display: none
}

.menu-first .menu-banner {
    width: 100%;
    margin: 2.6666666667vw 4vw;
    padding: 0
}

.menu-first .menu-banner .banner-img {
    width: calc(100% - 32px);
    height: 100%;
    overflow: hidden;
    border-radius: .8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.menu-first .menu-banner:after {
    content: none
}

.menu-first .service {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45.3333333333vw;
    height: auto;
    margin: 2.6666666667vw auto;
    padding: 2.6666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    border: .2666666667vw solid #7e7e7e;
    border-radius: .8vw;
    background: #2e2f31;
    -webkit-overflow-scrolling: touch
}

.menu-first .service .item-icon {
    display: block;
    width: 8vw;
    height: 8vw;
    margin-right: 2.6666666667vw;
    border-radius: 8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.menu-first .service p {
    width: 75%;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 4.2666666667vw
}

.menu-first .service p span {
    display: block;
    padding-top: 1.3333333333vw;
    color: #fffc;
    font-size: 2.6666666667vw
}

.menu-first .service.service:before {
    box-shadow: 0 0 2px #0006
}

.menu-first .service.service:after {
    display: none
}

.menu-first .theme-btn {
    position: relative;
    width: 28vw;
    height: 10.6666666667vw;
    margin-left: 4vw;
    padding: 0 2.6666666667vw;
    transition: all .3s;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 10.6666666667vw;
    background: #2e2f31;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 10.6666666667vw
}

.menu-first .theme-btn:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.0666666667vw;
    right: 1.0666666667vw;
    width: 8vw;
    height: 8vw;
    transition: all .3s;
    border-radius: 9.3333333333vw;
    background: #fff
}

.menu-first .theme-btn.active {
    text-indent: 8vw
}

.menu-first .theme-btn.active:after {
    right: 18.1333333333vw
}

.menu-first .menu-item-reminder {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fd1111
}

.menu-first .menu-item-reminder__icon {
    position: absolute;
    top: -.8vw;
    left: -4.5333333333vw;
    transform: translate(-50%);
    width: 10.6666666667vw;
    height: 10.6666666667vw
}

.menu-first .menu-item-reminder__text {
    padding: 0 1.3333333333vw 0 2.6666666667vw;
    height: 4vw;
    font-size: 2.6666666667vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffea00
}

.menu-second {
    position: relative;
    height: 100%
}

.menu-second ul {
    position: absolute;
    top: 0;
    left: -29.3333333333vw;
    width: 29.3333333333vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .5s;
    background: #2e2f31;
    box-shadow: 0 0 #0000;
    -webkit-overflow-scrolling: touch
}

.menu-second ul.active {
    left: -.2666666667vw;
    box-shadow: .8vw 0 .8vw #0000004d
}

.menu-second ul li.portrait {
    width: 100%;
    padding: 0;
    border-bottom: none
}

.menu-second ul li.portrait img {
    width: 100%;
    max-height: none;
    border-radius: 1.3333333333vw
}

.menu-second ul li {
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 5.3333333333vw 0;
    border-bottom: .2666666667vw solid #7e7e7e
}

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

.menu-second ul li img,
.menu-second ul li span {
    display: block;
    width: 40%;
    height: auto;
    max-height: 16vw;
    margin: 0 auto 1.3333333333vw
}

.menu-second ul li span {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background-size: contain;
    background-position: center
}

.menu-second ul li .use-icon-path {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.menu-second ul li .use-icon-path:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--menu-custom-icon-bg)
}

.menu-second ul li .use-icon-path i {
    position: relative;
    z-index: 1;
    display: block;
    width: 6.4vw;
    height: 6.4vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: .8vw
}

.menu-second ul li .item-icon.mask-icon {
    background: var(--menu-mask-icon-bg, var(--on-surface-tertiary));
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    width: 6.4vw;
    height: 6.4vw
}

.menu-second ul li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 3.4666666667vw;
    text-align: center;
    min-height: 1.1em
}

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

.menu-second ul.exclusive {
    padding-top: 6.4vw
}

.menu-second ul.exclusive li {
    padding: 1.3333333333vw 0
}

.menu-second ul.exclusive li img {
    width: 85%;
    max-height: none;
    margin: 0 auto
}

.menu-second .icon-sport {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto;
    margin-bottom: 2.1333333333vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: 50% 20%;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 20%;
    -webkit-mask-size: cover
}

.menu-banner-area {
    width: 100%;
    padding: 0 4vw
}

.language-select-area {
    margin: 2.6666666667vw 0;
    text-align: center
}

.language-select-area .language-area {
    display: inline-block;
    width: 41%;
    padding: 1.3333333333vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    opacity: .3;
    vertical-align: middle
}

.language-select-area .language-area.active {
    border: .2666666667vw solid #fd1111;
    opacity: 1
}

.language-select-area .language-area.active p {
    color: #fd1111
}

.language-select-area img {
    width: 8vw;
    height: 8vw;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .4))
}

.language-select-area p {
    margin-top: 1.3333333333vw;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.language-container {
    padding: 0 1.3333333333vw;
    margin: 2.6666666667vw 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.language-container .language-item {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    border: 1px solid #fd1111;
    padding: 10px;
    border-radius: 5px;
    color: #fd1111
}

.language-container .flag-icon {
    width: 6.4vw;
    height: 6.4vw;
    margin: 0 2.6666666667vw
}

.language-container .language-details {
    display: flex;
    flex-direction: column;
    margin-left: 2.6666666667vw
}

.language-container .language-title {
    font-weight: 600;
    font-size: 3.7333333333vw;
    margin-bottom: 1.3333333333vw
}

.language-container .language-info {
    font-size: 3.2vw
}

.footer {
    width: 100%;
    height: auto;
    margin-bottom: 13.3333333333vw;
    padding: 0 3.2vw;
    background: #000
}

.footer-top,
.footer-middle {
    padding: 3.2vw 0;
    border-bottom: .2666666667vw solid #7e7e7e;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 3.2vw
}

.footer__title {
    margin-bottom: 2.1333333333vw;
    color: #fd1111;
    font-size: 3.4666666667vw;
    font-weight: 700
}

.footer .pay,
.footer .safe,
.footer .social-media,
.footer .sponsor,
.footer .ambassadors,
.footer .partner,
.footer .official-partner,
.footer .gaming-license,
.footer .download {
    min-width: calc(50% - 1.6vw);
    flex: 1 1 auto
}

.footer .pay__empty,
.footer .safe__empty,
.footer .social-media__empty,
.footer .sponsor__empty,
.footer .ambassadors__empty,
.footer .partner__empty,
.footer .official-partner__empty,
.footer .gaming-license__empty,
.footer .download__empty {
    display: none
}

.footer .icon-list__item {
    display: inline-block;
    margin: 0 2.1333333333vw 2.1333333333vw 0
}

.footer .icon-list__image {
    width: auto;
    height: 6.4vw;
    opacity: .7
}

.footer .pay .icon-list__image {
    height: 4.8vw
}

.footer .sponsor__items {
    display: flex;
    flex-wrap: wrap
}

.footer .sponsor__item {
    flex: 0 0 47%;
    margin: 0 2.1333333333vw 2.1333333333vw 0;
    font-size: 3.2vw
}

.footer .sponsor__image {
    width: auto;
    height: 8.5333333333vw;
    margin-bottom: 1.0666666667vw
}

.footer .sponsor__title {
    font-weight: 700;
    color: #fff
}

.footer .sponsor__sub-title,
.footer .sponsor__period {
    display: block;
    font-size: 2.9333333333vw;
    font-style: italic
}

.footer .sponsor__sub-title,
.footer .sponsor__period {
    color: #fff
}

.footer .license__item {
    display: inline-block;
    margin: 0 2.1333333333vw 2.1333333333vw 0
}

.footer .license__image {
    width: auto;
    height: 8vw
}

.footer .partner .icon-list__image {
    opacity: 1;
    height: 8vw
}

.footer .download__item {
    display: inline-block;
    margin: 0 2.1333333333vw 2.1333333333vw 0
}

.footer .download__image {
    width: auto;
    height: 8vw
}

.footer .provider .icon-list__image {
    height: 6.4vw;
    opacity: 1
}

.footer-bottom {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 6.6666666667vw 0
}

.footer-bottom .logo {
    width: 14.6666666667vw;
    height: 10.6666666667vw;
    margin-right: 5.3333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.footer-bottom .text {
    text-align: left
}

.footer-bottom .text .title {
    margin-bottom: 1.3333333333vw;
    color: #fd1111;
    font-size: 3.4666666667vw;
    font-weight: 700
}

.footer-bottom .text p {
    color: #fff;
    font-size: 3.2vw
}

.footer-description {
    color: #fff;
    margin-bottom: 2.6666666667vw
}

.footer-logo-wrap {
    padding: 3.2vw 0;
    border-bottom: .2666666667vw solid #7e7e7e
}

.footer-logo-wrap .link-wrap {
    text-align: right
}

.footer-logo-wrap .link-wrap ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start
}

.footer-logo-wrap .link-wrap li {
    width: 33%;
    margin: 1.6vw 0;
    padding: 0 2.1333333333vw;
    border-left: .5333333333vw solid #fd1111;
    text-align: left
}

.footer-logo-wrap .link-wrap a {
    transition: all .3s;
    color: #fd1111;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-decoration: none;
    vertical-align: baseline
}

.footer-logo-wrap .link-wrap a:hover {
    filter: brightness(1.1)
}

.float-banner {
    position: fixed;
    z-index: 7999;
    bottom: 54px;
    left: 10px;
    filter: drop-shadow(0 0 1.6vw rgba(0, 0, 0, .5));
    will-change: filter
}

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

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

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

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

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

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

.footer-collapse {
    position: relative;
    padding-bottom: 16vw;
    border-bottom: .2666666667vw solid #7e7e7e;
    cursor: pointer
}

.footer-collapse__title {
    color: #fd1111;
    font-size: 4.8vw;
    font-weight: 600;
    line-height: normal;
    margin: 2.6666666667vw 0
}

.footer-collapse__content {
    position: relative;
    overflow: hidden;
    max-height: 21.3333333333vw;
    transition: max-height .2s ease
}

.footer-collapse__content:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: block;
    width: 100%;
    height: 21.3333333333vw;
    background: linear-gradient(transparent, #000)
}

.footer-collapse__content--active {
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.4;
    max-height: 2133.3333333333vw
}

.footer-collapse__btn {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in;
    position: absolute;
    display: inline-flex;
    align-items: center;
    bottom: 2.6666666667vw;
    min-width: 28vw;
    height: 9.3333333333vw;
    line-height: 9.3333333333vw;
    z-index: 2;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    padding: 2.6666666667vw 4vw;
    font-size: 3.4666666667vw;
    border-radius: .8vw;
    transition: background .8s, color .8s
}

.footer-collapse__btn:hover {
    opacity: .7
}

.footer-collapse__btn-arrow {
    display: inline-block;
    width: 3.2vw;
    height: 2.1333333333vw;
    margin-left: 1.3333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff;
    transform: rotate(270deg)
}

.footer-collapse__btn-arrow--active {
    display: inline-block;
    width: 3.2vw;
    height: 2.1333333333vw;
    margin-left: 1.3333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff;
    transform: rotate(90deg)
}

.footer-collapse p {
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.4
}

.footer-collapse p+p {
    margin-top: 2.6666666667vw
}

.footer-collapse ul,
.footer-collapse ol {
    position: relative;
    left: 4vw;
    width: calc(100% - 4vw)
}

.footer-collapse ul {
    list-style-type: disc
}

.footer-collapse ol {
    list-style-type: decimal
}

.footer-collapse li {
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.4
}

.footer-collapse h5,
.footer-collapse b {
    color: #fff;
    font-weight: 700
}

.gotop {
    display: none;
    opacity: 0;
    background: #fd1111
}

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

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

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

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

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

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

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

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

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

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

.gotop {
    position: fixed;
    right: 10px;
    bottom: 60px;
    width: 58px;
    height: 58px;
    transition: all .3s ease-in;
    border-radius: 34px 8px 34px 34px;
    box-shadow: 0 5px 30px #0000001a, 0 5px 4px #0003;
    background: #fd1111;
    z-index: 8000
}

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

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

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

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

.popup-page--active .popup-page__backdrop {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

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

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

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

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

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

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

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

.popup-page-main__back {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in;
    position: absolute;
    left: 3.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #444, #222)
}

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

.popup-page-main__back .back-arrow-icon {
    position: absolute;
    left: 0;
    width: 5vw;
    height: 5vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 80%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 80%
}

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

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

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

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

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

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

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

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

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

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

.popup-page-main__container .content.fixed-tab {
    padding-top: 13.3333333333vw
}

.popup-page-main__container .content.player-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important
}

.new-login,
.new-login-tab {
    background: #550b0b;
    border: 0
}

.new-login .popup-page-main__title,
.new-login-tab .popup-page-main__title {
    color: #fff
}

.new-login .popup-page-main__close:before,
.new-login .popup-page-main__close:after,
.new-login-tab .popup-page-main__close:before,
.new-login-tab .popup-page-main__close:after {
    background: #fff
}

.referral-partner-tab .tab-btn-page {
    margin-top: -1px
}

.referral-partner {
    padding-bottom: 1.3333333333vw
}

.referral-partner .menu-box {
    color: var(--referral-partner-content-txt, #ffffff)
}

.referral-partner .menu-box img {
    width: 100%
}

.referral-partner .menu-box .title,
.referral-partner .menu-box .title-group {
    margin-bottom: 2.6666666667vw;
    border-bottom: .2666666667vw solid var(--referral-partner-title-group-border, rgba(153, 153, 153, .3))
}

.referral-partner .menu-box .title h2,
.referral-partner .menu-box .title-group h2 {
    border: none
}

.referral-partner .recommend-friends-list {
    margin: 0
}

.referral-partner .recommend-friends-list .rf-list {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr;
    justify-content: center
}

.referral-partner .recommend-friends-list .rf-list.form-title {
    border-radius: 0;
    padding: 0 2.6666666667vw;
    text-align: center
}

.referral-partner .recommend-friends-list .rf-list.form-title div {
    margin: 1.3333333333vw 0;
    padding: 1.3333333333vw
}

.referral-partner .recommend-friends-list .rf-list.form-title div+div {
    border-left: .2666666667vw dotted var(--referral-partner-form-title-border, #ffffff)
}

.referral-partner .recommend-friends-list .rf-list.form-content {
    padding: 0 2.6666666667vw
}

.referral-partner .recommend-friends-list .rf-list.form-content div+div {
    border-left: .2666666667vw dotted var(--referral-partner-form-content-border, #ffffff)
}

.referral-partner .recommend-friends-list .rf-list.form-content .status.claimed {
    color: var(--referral-partner-details-form-status-claimed, #ec6f00)
}

.referral-partner .recommend-friends-list .rf-list.form-content .status.available {
    color: var(--referral-partner-details-form-status-available, #fdcd01)
}

.referral-partner .recommend-friends-list .rf-list.form-content .status.completed {
    color: var(--referral-partner-details-form-status-completed, #42d800)
}

.referral-partner .recommend-friends-list .rf-list.form-content .status.rejected {
    color: var(--referral-partner-details-form-status-rejected, #ff0005)
}

.referral-partner .recommend-friends-list .rf-list.form-content .status.expired {
    color: var(--referral-partner-details-form-status-expired, #989897)
}

.referral-partner .recommend-friends-list .rf-list.form-content .invite-user-id {
    color: var(--referral-partner-details-form-status-user-id, rgba(255, 255, 255, .4))
}

.referral-partner .recommend-friends-list .rf-list>div {
    padding: 2.6666666667vw 1.6vw;
    text-align: center
}

.referral-partner .recommend-friends-list .rf-list .reward-amount {
    text-align: right
}

.referral-partner .cdk-overlay-pane.dialog-panel {
    position: relative !important;
    left: 50%;
    top: 50%
}

.referral-partner .mat-mdc-button {
    font-weight: 700
}

.referral-partner .challenge-bonus-info i {
    color: var(--referral-partner-challenge-bonus-txt-strong, #fd1111)
}

mcd-referral-bonus-terms-conditions,
mcd-referral-bonus-goals,
mcd-referral-bonus-period-info,
mcd-requirement,
mcd-contact-info,
mcd-bonus-received-billboard,
mcd-leaderboard,
mcd-total-issued-bonuses,
mcd-income-calculator,
mcd-commission-info,
mcd-period-revenue-goals,
mcd-can-receive-bonus,
mcd-dashboard,
mcd-received-bonus-record,
mcd-invitation-link {
    font-size: var(--referral-partner-txt-font-size, 3.7333333333vw)
}

mcd-referral-bonus-terms-conditions h2,
mcd-referral-bonus-goals h2,
mcd-referral-bonus-period-info h2,
mcd-requirement h2,
mcd-contact-info h2,
mcd-bonus-received-billboard h2,
mcd-leaderboard h2,
mcd-total-issued-bonuses h2,
mcd-income-calculator h2,
mcd-commission-info h2,
mcd-period-revenue-goals h2,
mcd-can-receive-bonus h2,
mcd-dashboard h2,
mcd-received-bonus-record h2,
mcd-invitation-link h2,
mcd-referral-bonus-terms-conditions h2 span,
mcd-referral-bonus-goals h2 span,
mcd-referral-bonus-period-info h2 span,
mcd-requirement h2 span,
mcd-contact-info h2 span,
mcd-bonus-received-billboard h2 span,
mcd-leaderboard h2 span,
mcd-total-issued-bonuses h2 span,
mcd-income-calculator h2 span,
mcd-commission-info h2 span,
mcd-period-revenue-goals h2 span,
mcd-can-receive-bonus h2 span,
mcd-dashboard h2 span,
mcd-received-bonus-record h2 span,
mcd-invitation-link h2 span {
    font-size: var(--referral-partner-h2-font-size, 3.7333333333vw);
    color: var(--referral-partner-sub-title, #ffffff)
}

mcd-referral-bonus-terms-conditions div,
mcd-referral-bonus-goals div,
mcd-referral-bonus-period-info div,
mcd-requirement div,
mcd-contact-info div,
mcd-bonus-received-billboard div,
mcd-leaderboard div,
mcd-total-issued-bonuses div,
mcd-income-calculator div,
mcd-commission-info div,
mcd-period-revenue-goals div,
mcd-can-receive-bonus div,
mcd-dashboard div,
mcd-received-bonus-record div,
mcd-invitation-link div,
mcd-referral-bonus-terms-conditions p,
mcd-referral-bonus-goals p,
mcd-referral-bonus-period-info p,
mcd-requirement p,
mcd-contact-info p,
mcd-bonus-received-billboard p,
mcd-leaderboard p,
mcd-total-issued-bonuses p,
mcd-income-calculator p,
mcd-commission-info p,
mcd-period-revenue-goals p,
mcd-can-receive-bonus p,
mcd-dashboard p,
mcd-received-bonus-record p,
mcd-invitation-link p {
    font-size: var(--referral-partner-p-font-size, 3.7333333333vw)
}

mcd-referral-bonus-terms-conditions p,
mcd-referral-bonus-goals p,
mcd-referral-bonus-period-info p,
mcd-requirement p,
mcd-contact-info p,
mcd-bonus-received-billboard p,
mcd-leaderboard p,
mcd-total-issued-bonuses p,
mcd-income-calculator p,
mcd-commission-info p,
mcd-period-revenue-goals p,
mcd-can-receive-bonus p,
mcd-dashboard p,
mcd-received-bonus-record p,
mcd-invitation-link p {
    margin: 2.1333333333vw 0
}

mcd-referral-bonus-terms-conditions span,
mcd-referral-bonus-goals span,
mcd-referral-bonus-period-info span,
mcd-requirement span,
mcd-contact-info span,
mcd-bonus-received-billboard span,
mcd-leaderboard span,
mcd-total-issued-bonuses span,
mcd-income-calculator span,
mcd-commission-info span,
mcd-period-revenue-goals span,
mcd-can-receive-bonus span,
mcd-dashboard span,
mcd-received-bonus-record span,
mcd-invitation-link span {
    color: var(--referral-partner-txt, rgba(255, 255, 255, .4))
}

mcd-referral-bonus-terms-conditions i,
mcd-referral-bonus-goals i,
mcd-referral-bonus-period-info i,
mcd-requirement i,
mcd-contact-info i,
mcd-bonus-received-billboard i,
mcd-leaderboard i,
mcd-total-issued-bonuses i,
mcd-income-calculator i,
mcd-commission-info i,
mcd-period-revenue-goals i,
mcd-can-receive-bonus i,
mcd-dashboard i,
mcd-received-bonus-record i,
mcd-invitation-link i,
mcd-referral-bonus-terms-conditions a,
mcd-referral-bonus-goals a,
mcd-referral-bonus-period-info a,
mcd-requirement a,
mcd-contact-info a,
mcd-bonus-received-billboard a,
mcd-leaderboard a,
mcd-total-issued-bonuses a,
mcd-income-calculator a,
mcd-commission-info a,
mcd-period-revenue-goals a,
mcd-can-receive-bonus a,
mcd-dashboard a,
mcd-received-bonus-record a,
mcd-invitation-link a,
mcd-referral-bonus-terms-conditions strong,
mcd-referral-bonus-goals strong,
mcd-referral-bonus-period-info strong,
mcd-requirement strong,
mcd-contact-info strong,
mcd-bonus-received-billboard strong,
mcd-leaderboard strong,
mcd-total-issued-bonuses strong,
mcd-income-calculator strong,
mcd-commission-info strong,
mcd-period-revenue-goals strong,
mcd-can-receive-bonus strong,
mcd-dashboard strong,
mcd-received-bonus-record strong,
mcd-invitation-link strong {
    color: var(--referral-partner-txt-strong, #fd1111)
}

mcd-referral-bonus-terms-conditions strong,
mcd-referral-bonus-goals strong,
mcd-referral-bonus-period-info strong,
mcd-requirement strong,
mcd-contact-info strong,
mcd-bonus-received-billboard strong,
mcd-leaderboard strong,
mcd-total-issued-bonuses strong,
mcd-income-calculator strong,
mcd-commission-info strong,
mcd-period-revenue-goals strong,
mcd-can-receive-bonus strong,
mcd-dashboard strong,
mcd-received-bonus-record strong,
mcd-invitation-link strong {
    font-weight: 700
}

mcd-referral-bonus-terms-conditions a,
mcd-referral-bonus-goals a,
mcd-referral-bonus-period-info a,
mcd-requirement a,
mcd-contact-info a,
mcd-bonus-received-billboard a,
mcd-leaderboard a,
mcd-total-issued-bonuses a,
mcd-income-calculator a,
mcd-commission-info a,
mcd-period-revenue-goals a,
mcd-can-receive-bonus a,
mcd-dashboard a,
mcd-received-bonus-record a,
mcd-invitation-link a {
    display: block;
    margin: 2.1333333333vw 0
}

mcd-total-issued-bonuses .bonuses-box,
mcd-period-revenue-goals .goals-box-tips,
mcd-invitation-link .code-box-tips {
    display: inline-flex;
    width: 100%;
    padding: 0 4vw;
    justify-content: center;
    align-items: center
}

mcd-total-issued-bonuses .bonuses-box p,
mcd-period-revenue-goals .goals-box-tips p,
mcd-invitation-link .code-box-tips p {
    width: auto
}

mcd-total-issued-bonuses .bonuses-box span,
mcd-period-revenue-goals .goals-box-tips span,
mcd-invitation-link .code-box-tips span {
    color: var(--referral-partner-tips-txt-strong, #fd1111)
}

mcd-invitation-link .code-box:after {
    display: none
}

mcd-invitation-link .code-box .btn-share {
    width: 100%;
    height: 10.6666666667vw;
    margin: auto auto 4.2666666667vw 0;
    font-weight: 700;
    font-size: 4vw;
    background: var(--referral-partner-code-box-share-btn, #fd1111)
}

mcd-invitation-link .code-box .code {
    flex: unset;
    width: 100%;
    height: 10.6666666667vw;
    border: none;
    font-size: 3.4666666667vw;
    background: var(--referral-partner-code-input, var(--surface-default))
}

mcd-invitation-link .code-box .code span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 13.3333333333vw)
}

mcd-invitation-link .code-box .code .btn {
    width: 13.3333333333vw;
    height: 100%;
    background: var(--referral-partner-code-copy-btn-bg, #fd1111)
}

mcd-invitation-link .code-box .code img {
    width: 55%
}

mcd-invitation-link .invite-banner img {
    width: 100%
}

mcd-invitation-link .invite-cont-center {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1.3333333333vw 0
}

mcd-invitation-link .invite-cont-center .code-box-tips p {
    padding: 0
}

mcd-invitation-link .invite-cont-center .btn-invite-earn {
    cursor: pointer;
    flex: unset;
    padding: 2.1333333333vw 1.3333333333vw;
    border-radius: .8vw;
    background: var(--referral-partner-invite-cont-center-btn-bg, #fd1111);
    padding: 1.6vw 8.5333333333vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4.2666666667vw;
    height: 10.6666666667vw;
    line-height: 1.1;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--referral-partner-invite-cont-center-btn-txt, #ffffff)
}

mcd-invitation-link .invite-cont-center .btn-invite-earn+.code-box-tips {
    margin-top: 2.6666666667vw
}

mcd-invitation-link .invite-cont {
    display: inline-flex;
    width: 100%;
    margin: 2.6666666667vw 0;
    color: var(--referral-partner-invite-cont-txt, #ffffff)
}

mcd-invitation-link .bonus-title {
    margin-bottom: 1.0666666667vw
}

mcd-invitation-link .left {
    width: 40%
}

mcd-invitation-link .invite-qr-code {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2.6666666667vw;
    border-radius: .8vw;
    background: var(--referral-partner-invite-qr-code-bg, #2e2f31)
}

mcd-invitation-link .qrcode {
    z-index: 0;
    position: relative;
    width: 100%;
    margin: 0;
    transform: none
}

mcd-invitation-link .right {
    width: 60%;
    margin: auto 0 auto 4.2666666667vw
}

mcd-received-bonus-record .invite-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 1.3333333333vw 0
}

mcd-received-bonus-record .invite-box .item {
    display: inline-flex;
    flex-direction: column;
    align-items: center
}

mcd-received-bonus-record .invite-box .invite-title {
    font-size: 3.2vw;
    font-weight: 700;
    color: var(--referral-partner-invite-box-title-txt, rgba(255, 255, 255, .4))
}

mcd-received-bonus-record .invite-box .text {
    margin-top: 2.1333333333vw;
    font-size: 4.8vw;
    color: var(--referral-partner-invite-box-item-txt, #fd1111)
}

mcd-received-bonus-record .invite-box .text i {
    color: var(--referral-partner-invite-box-item-txt, #fd1111)
}

mcd-dashboard .recommend-friends-box {
    margin: 0;
    padding: 0;
    box-shadow: none;
    background: none;
    border-radius: 0
}

mcd-dashboard .recommend-friends-box .status-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
    word-break: break-all
}

mcd-dashboard .recommend-friends-box .status {
    display: flex;
    justify-content: space-between;
    flex: auto;
    flex-direction: column;
    width: calc(50% - 1.0666666667vw);
    margin-bottom: 2.1333333333vw;
    align-items: center;
    text-align: center;
    background: var(--referral-partner-dashboard-item-bg, #000000);
    border-radius: 1.3333333333vw;
    padding: 4vw
}

mcd-dashboard .recommend-friends-box .status.accept:after {
    display: none
}

mcd-dashboard .recommend-friends-box .status .number {
    font-size: 8vw;
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: var(--referral-partner-dashboard-num-txt, #fd1111)
}

mcd-dashboard .recommend-friends-box .status .text {
    display: flex;
    width: 100%;
    height: 100%;
    background: none;
    font-size: 3.2vw;
    margin-bottom: 1.3333333333vw;
    color: var(--referral-partner-dashboard-txt, #999999);
    padding: 0;
    align-items: center;
    justify-content: center
}

mcd-dashboard .recommend-friends-box .status:nth-child(2n) {
    margin-left: 2.1333333333vw
}

mcd-dashboard .recommend-friends-box .status .condition:before {
    display: none
}

mcd-can-receive-bonus .receive-box .day-text {
    margin-top: 2.6666666667vw;
    color: var(--referral-partner-receive-box-txt, #ffffff);
    text-align: right
}

mcd-can-receive-bonus .receive-box .day-text.bottom-tips {
    margin: 0;
    padding: 2.6666666667vw 0;
    text-align: center;
    background-color: var(--referral-partner-receive-date-bg, rgba(0, 0, 0, .5));
    font-size: 3.2vw
}

mcd-can-receive-bonus .receive-box i {
    color: var(--referral-partner-receive-box-txt-strong, #fd1111)
}

mcd-can-receive-bonus .receive-box .receive-bonus {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 4.2666666667vw 0
}

mcd-can-receive-bonus .receive-box .text {
    font-size: 6.4vw
}

mcd-can-receive-bonus .receive-box .button {
    display: block;
    width: auto;
    padding: 0 4.8vw;
    font-weight: 700;
    font-size: 4vw
}

mcd-can-receive-bonus .receive-box .button.btn-disabled {
    background: var(--referral-partner-receive-btn-disabled, #c00202);
    color: var(--referral-partner-receive-btn-txt, #999999)
}

mcd-period-revenue-goals .goals-box {
    margin-top: 0;
    flex-direction: column
}

mcd-period-revenue-goals .goals-box .goals-item {
    display: flex;
    width: 100%
}

mcd-period-revenue-goals .goals-box .goals-item .goals-img {
    width: 18.1333333333vw;
    flex: 0 0 18.1333333333vw;
    margin-right: 3.2vw
}

mcd-period-revenue-goals .goals-box .goals-item+.goals-box-tips {
    margin-top: 4vw
}

mcd-period-revenue-goals .goals-box i {
    color: var(--referral-partner-goals-box-txt-strong, #fd1111)
}

mcd-period-revenue-goals .goals-group {
    width: 100%
}

mcd-period-revenue-goals .goals-number {
    margin-bottom: 4vw
}

mcd-period-revenue-goals .goals-number i {
    font-size: 6.4vw
}

mcd-period-revenue-goals .progress-bar .bar {
    height: 2.6666666667vw;
    background: var(--referral-partner-progress-bar-bg, #2e2f31);
    box-shadow: none
}

mcd-period-revenue-goals .progress-bar .bar .bar-inner {
    background: var(--referral-partner-progress-bar-inner-bg, linear-gradient(to right, #bba36c 0%, #e1cb9d 100%));
    box-shadow: none
}

mcd-period-revenue-goals .progress-bar .bar .bar-inner:after {
    display: none
}

mcd-period-revenue-goals .progress-bar .number {
    color: var(--referral-partner-progress-bar-txt, #ffffff)
}

mcd-commission-info .title {
    margin: 0
}

mcd-commission-info .commission-bets-box {
    display: flex;
    flex-direction: column;
    color: var(--referral-partner-commission-bets-txt, #ffffff);
    line-height: 1.1
}

mcd-commission-info .commission-bets-box .sec {
    padding: 2.1333333333vw 0
}

mcd-commission-info .commission-bets-box .sec+.sec {
    border-top: .2666666667vw solid var(--referral-partner-commission-bets-border, rgba(153, 153, 153, .3))
}

mcd-commission-info .commission-bets-box .referral-tips h2 {
    width: 100%;
    margin-bottom: 2.1333333333vw;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--referral-partner-commission-bets-sub-title, #fd1111);
    font-size: 4.8vw
}

mcd-income-calculator .income-calculator {
    display: flex
}

mcd-income-calculator .income-calculator .container {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center
}

mcd-income-calculator .income-calculator .range-slider {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

mcd-income-calculator .income-calculator h4 {
    margin: 2.1333333333vw 0;
    font-size: 4.2666666667vw
}

mcd-income-calculator .income-calculator h1 {
    font-size: 6.4vw;
    font-weight: 700
}

mcd-income-calculator .income-calculator h1 i {
    color: var(--referral-partner-income-calculator-title, #fd1111)
}

mcd-income-calculator .income-calculator span {
    color: var(--referral-partner-income-calculator-title-txt, #ffffff);
    margin-bottom: 0
}

mcd-income-calculator .income-calculator .range-slider-text-input {
    margin: 0 2.1333333333vw;
    padding: 2.1333333333vw;
    border: 0;
    border-radius: .8vw;
    background: var(--referral-partner-income-calculator-range-slider-txt-bg, #2e2f31);
    color: var(--referral-partner-income-calculator-range-slider-txt, #fd1111);
    text-align: center
}

mcd-income-calculator .income-calculator .range-slider-input {
    width: 100%;
    height: 0;
    margin: 4.2666666667vw 0 2.1333333333vw;
    border-radius: 8vw;
    padding: 1.3333333333vw 0;
    background: var(--referral-partner-income-calculator-range-slider-bg, #2e2f31)
}

mcd-income-calculator .income-calculator .range-slider-input::-webkit-slider-thumb {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background: var(--referral-partner-income-calculator-range-slider-thumb-bg, #bba36c);
    box-shadow: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none
}

mcd-income-calculator .income-calculator .range-slider-num {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 2.6666666667vw
}

mcd-total-issued-bonuses .bonuses-box {
    display: flex;
    justify-content: flex-start;
    background-color: var(--referral-partner-content-type-light-bg, #000000);
    border-radius: .8vw;
    margin-top: 2.6666666667vw;
    padding: 3.2vw
}

mcd-total-issued-bonuses .bonuses-box .bonuses-type-img {
    display: inline-flex;
    width: 18.1333333333vw;
    height: 18.1333333333vw;
    margin: 0 4.8vw 0 4vw
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    justify-content: space-around
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group div+div {
    margin-top: 1.0666666667vw
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-title,
mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-receive {
    color: var(--referral-partner-bonuses-txt, #ffffff)
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-title {
    font-weight: 700
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-number {
    font-size: 5.8666666667vw
}

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-number i {
    color: var(--referral-partner-bonuses-number-txt, #fd1111)
}

mcd-leaderboard .leaderboard-box {
    background: var(--referral-partner-leaderboard-bg, linear-gradient(180deg, #000000 0%, #192243 100%));
    border-radius: .8vw;
    padding: 5.3333333333vw 2.6666666667vw;
    margin-top: 2.6666666667vw
}

mcd-leaderboard .leaderboard-box li {
    display: flex;
    align-items: center;
    font-weight: 700
}

mcd-leaderboard .leaderboard-box li+li {
    padding-top: 5.8666666667vw
}

mcd-leaderboard .leaderboard-box li div {
    display: inline-flex;
    justify-content: center;
    flex-basis: 14.9333333333vw
}

mcd-leaderboard .leaderboard-box li:nth-child(1) .leaderboard-top-img p {
    color: var(--referral-partner-leaderboard-first-txt, #ffb400)
}

mcd-leaderboard .leaderboard-box li:nth-child(2) .leaderboard-top-img p {
    color: var(--referral-partner-leaderboard-second-txt, #c2c2c2)
}

mcd-leaderboard .leaderboard-box li:nth-child(3) .leaderboard-top-img p {
    color: var(--referral-partner-leaderboard-third-txt, #c06f2f)
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img {
    flex-direction: column;
    align-items: center
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img img {
    width: 5.3333333333vw;
    height: auto
}

mcd-leaderboard .leaderboard-box .leaderboard-top-img p {
    margin-top: .8vw
}

mcd-leaderboard .leaderboard-box .leaderboard-icon-img {
    margin: 0 5.3333333333vw
}

mcd-leaderboard .leaderboard-box .leaderboard-icon-img img {
    width: 100%;
    height: auto
}

mcd-leaderboard .leaderboard-box .user-id {
    width: 13.6vw;
    margin: 0 2.6666666667vw 0 0;
    justify-content: left
}

mcd-leaderboard .leaderboard-box .leaderboard-number {
    justify-content: left;
    flex: 1
}

mcd-leaderboard .leaderboard-box .leaderboard-number i {
    color: var(--referral-partner-bonuses-number-txt, #fd1111)
}

mcd-bonus-received-billboard .who-received-bonus-box {
    display: flex;
    flex-direction: column
}

mcd-bonus-received-billboard .who-received-bonus-box li {
    display: inline-flex;
    padding: 5.3333333333vw 3.2vw;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-weight: 700;
    text-align: center;
    background-color: var(--referral-partner-content-type-light-bg, #000000);
    border-radius: .8vw;
    margin-top: 2.6666666667vw
}

mcd-bonus-received-billboard .who-received-bonus-box li div {
    margin: 0 1.3333333333vw
}

mcd-bonus-received-billboard .who-received-bonus-box .user-id,
mcd-bonus-received-billboard .who-received-bonus-box .received-bonus-number>i {
    color: var(--referral-partner-bonuses-list-txt-strong, #fd1111)
}

mcd-bonus-received-billboard .who-received-bonus-box .text {
    color: var(--referral-partner-bonuses-list-txt, #ffffff)
}

mcd-contact-info .contact-info .contact-link img {
    width: 90%;
    margin: 1.3333333333vw 5% 4vw
}

mcd-requirement .menu-box .title {
    padding: 0;
    margin-top: 2.6666666667vw;
    font-size: 3.2vw;
    color: var(--referral-partner-condition-title-txt, #ffffff);
    border: 0 !important
}

mcd-requirement .referral-cont {
    flex-direction: column
}

mcd-requirement .code-box-tips p {
    width: 100%;
    text-align: center;
    font-size: 2.6666666667vw;
    color: var(--referral-partner-code-box-tips-txt, #ffffff);
    line-height: 3.7333333333vw
}

mcd-requirement .code-box-tips p i {
    font-size: 3.7333333333vw;
    color: var(--referral-partner-code-box-tips-txt-strong, #fd1111)
}

mcd-requirement .condition-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

mcd-requirement .condition-list .item {
    flex: auto;
    flex-direction: column;
    width: calc(50% - 1.0666666667vw);
    margin-bottom: 2.1333333333vw;
    align-items: center;
    text-align: center;
    background: var(--referral-partner-condition-item-bg, #000000);
    border-radius: 1.3333333333vw;
    padding: 4vw
}

mcd-requirement .condition-list .item .condition {
    font-size: 3.2vw;
    color: var(--referral-partner-condition-txt, #999999);
    padding: 0;
    margin-bottom: 1.3333333333vw
}

mcd-requirement .condition-list .item .text {
    display: flex;
    width: 100%;
    height: 100%;
    background: none;
    font-size: 4.8vw;
    font-weight: 700;
    color: var(--referral-partner-condition-num-txt, #fd1111);
    padding: 0;
    align-items: center;
    justify-content: center
}

mcd-requirement .condition-list .item:nth-child(2n) {
    margin-left: 2.1333333333vw
}

mcd-requirement .condition-list .item .condition:before {
    display: none
}

mcd-referral-bonus-period-info .challenge-bonus-box {
    display: flex;
    border-radius: .8vw;
    box-shadow: none;
    padding: 2.6666666667vw;
    background: var(--referral-partner-challenge-bonus-bg, #000000);
    align-items: center;
    margin: 0
}

mcd-referral-bonus-period-info .coin-banner {
    width: 40vw;
    margin: 2.6666666667vw 2.6666666667vw 0 0;
    flex: 0 0 40vw
}

mcd-referral-bonus-period-info .challenge-bonus-info {
    color: var(--referral-partner-challenge-bonus-txt, #ffffff)
}

mcd-referral-bonus-period-info .more-depositors-text {
    margin-top: 4.2666666667vw
}

mcd-referral-bonus-goals .tab-btn-block {
    width: 100%;
    overflow: auto;
    margin-bottom: 2.6666666667vw
}

mcd-referral-bonus-goals .tab-btn-page {
    padding: 0;
    height: auto;
    z-index: 1;
    justify-content: flex-start;
    width: inherit;
    max-width: -webkit-fill-available;
    max-width: -moz-available;
    max-width: stretch;
    background: transparent
}

mcd-referral-bonus-goals .tab-btn-page .btn {
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 2.6666666667vw 0;
    border-radius: .8vw;
    background: var(--referral-partner-achievement-tab-btn-bg, #262626);
    box-shadow: none
}

mcd-referral-bonus-goals .tab-btn-page .btn+.btn {
    margin-left: 1.6vw
}

mcd-referral-bonus-goals .tab-btn-page .btn .text {
    color: var(--referral-partner-achievement-tab-btn-txt, #ffffff)
}

mcd-referral-bonus-goals .tab-btn-page .btn.active {
    background: var(--referral-partner-achievement-tab-btn-bg-active, linear-gradient(135deg, #37406a 0%, #37406a 100%))
}

mcd-referral-bonus-goals .tab-btn-page .btn.active .text {
    color: var(--referral-partner-achievement-tab-btn-txt-active, #fd1111)
}

mcd-referral-bonus-goals .tab-btn-page .btn[data-tab-current=current],
mcd-referral-bonus-goals .tab-btn-page .btn.active {
    background-image: var(--referral-partner-achievement-tab-btn-bg-active, linear-gradient(135deg, #37406a 0%, #37406a 100%))
}

mcd-referral-bonus-goals .tab-btn-page .line {
    display: none
}

mcd-referral-bonus-goals .achievement-bonus-block {
    position: relative;
    top: -.8vw;
    z-index: 2
}

mcd-referral-bonus-goals .period-line {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center
}

mcd-referral-bonus-goals .period-line p {
    display: inline-flex;
    padding: 0 2.6666666667vw;
    width: auto;
    justify-content: center;
    text-align: center
}

mcd-referral-bonus-goals .period-line:before,
mcd-referral-bonus-goals .period-line:after {
    content: "";
    display: inline-flex;
    width: 100%;
    height: .2666666667vw;
    background-color: var(--referral-partner-bonus-goals-sub-title-border, rgba(153, 153, 153, .3));
    flex: 1
}

mcd-referral-bonus-goals .achievement-bonus-box li {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 1.3333333333vw;
    margin: 2.1333333333vw 0;
    padding: 2.1333333333vw;
    background: var(--referral-partner-achievement-list-bg, linear-gradient(to right, #000000 0, #262626 15%, #262626 30%, #000000 55%, #000000 100%));
    border: .2666666667vw solid var(--referral-partner-achievement-list-border, rgba(153, 153, 153, .3));
    box-shadow: none;
    overflow: hidden
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-icon {
    width: 18.6666666667vw;
    height: 18.6666666667vw;
    flex: 0 0 18.6666666667vw;
    margin-right: 2.1333333333vw
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-group {
    width: 100%;
    margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.1333333333vw
}

mcd-referral-bonus-goals .achievement-bonus-box .achievement-bonus-bar {
    margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box p {
    color: var(--referral-partner-achievement-txt, #ffffff);
    margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box i {
    color: var(--referral-partner-achievement-txt-strong, #fd1111)
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask,
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask .icon,
mcd-referral-bonus-goals .achievement-bonus-box .lock-mask .icon {
    display: block;
    width: 8vw;
    height: 8vw;
    z-index: 2
}

mcd-referral-bonus-goals .complete-mask,
mcd-referral-bonus-goals .lock-mask {
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    z-index: 1
}

mcd-referral-bonus-goals .complete-mask:before,
mcd-referral-bonus-goals .lock-mask:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: .8vw
}

mcd-referral-bonus-goals .complete-mask .icon,
mcd-referral-bonus-goals .lock-mask .icon {
    display: block;
    width: 8vw;
    height: 8vw
}

mcd-referral-bonus-goals .complete-mask:before {
    background: var(--referral-partner-mask-bg-complete, rgba(0, 48, 0, .4));
    border: 1px solid var(--referral-partner-mask-border-complete, rgba(153, 153, 153, .05));
    box-shadow: none
}

mcd-referral-bonus-goals .lock-mask:before {
    background: var(--referral-partner-mask-bg-lock, rgba(0, 0, 0, .6))
}

mcd-referral-bonus-goals .achievement-icon {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    flex: 0 0 18.6666666667vw
}

mcd-referral-bonus-goals .achievement-bonus-group {
    width: 100%
}

mcd-referral-bonus-goals .achievement-bonus-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.1333333333vw
}

mcd-referral-bonus-goals .achievement-bonus-title p+p {
    margin: 0
}

mcd-referral-bonus-goals .title-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.8666666667vw 0 1.3333333333vw
}

mcd-referral-bonus-goals .detail-btn {
    width: 6.9333333333vw;
    height: 6.9333333333vw;
    cursor: pointer
}

mcd-referral-bonus-goals .pop-bg {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background: transparent
}

mcd-referral-bonus-goals-detail {
    display: flex;
    justify-content: center;
    align-items: center
}

mcd-referral-bonus-goals-detail .referral-reward-bonus {
    border-radius: 2.6666666667vw;
    background: var(--referral-partner-bonus-goals-detail-bg, linear-gradient(180deg, #222222 0%, #192243 100%))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in;
    position: relative;
    width: 5vw;
    height: 5vw;
    position: absolute;
    z-index: 2;
    margin: 2.6666666667vw;
    background: transparent
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:hover {
    opacity: .7
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after,
mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before {
    content: "";
    display: block;
    height: 80%;
    width: .5vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background: #fff;
    transform-origin: 50% 50%
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after {
    transform: translateY(-50%) rotate(-45deg)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before {
    transform: translateY(-50%) rotate(45deg)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:before,
mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close:after {
    border-radius: 10vw
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
    height: 13.3333333333vw;
    margin: 4.2666666667vw 4.2666666667vw 0;
    background: transparent;
    color: var(--referral-partner-bonus-goals-detail-title-txt, #ffffff)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .title p {
    width: 50%;
    padding: 0 2.1333333333vw;
    font-size: 3.4666666667vw;
    text-align: center;
    background: transparent;
    pointer-events: none
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line {
    display: flex;
    flex: 1;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 3.2vw 2.1333333333vw;
    margin: 2.6666666667vw 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line p {
    display: inline-flex;
    padding: 0 2.6666666667vw;
    width: auto;
    justify-content: center;
    font-size: 3.4666666667vw;
    text-align: center;
    background-color: transparent;
    color: var(--referral-partner-bonus-goals-detail-sub-title-txt, #ffffff)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:before,
mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:after {
    content: "";
    display: inline-flex;
    width: 100%;
    height: .2666666667vw;
    background-color: var(--referral-partner-bonus-goals-detail-sub-title-border, rgba(153, 153, 153, .3));
    flex: 1
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .period-line:first-child {
    margin-top: 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list {
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0 0 4.2666666667vw;
    padding: 0 4.2666666667vw
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list ul {
    background: var(--referral-partner-reward-pop-list-bg, linear-gradient(to bottom, #453d45 0%, #30435d 50%, #958457 100%))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li {
    display: flex
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 3.2vw 2.1333333333vw;
    color: var(--referral-partner-reward-pop-list-txt, #fff);
    border: 1.0666666667vw solid var(--referral-partner-bonus-goals-detail-bg, #192243)
}

mcd-referral-success-pop .show {
    opacity: 1;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

mcd-referral-success-pop .show .register-success-wrap {
    padding: 0;
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    border-radius: 2.1333333333vw;
    background-color: var(--referral-partner-pop-bg, rgba(0, 0, 0, .9))
}

mcd-referral-success-pop .show .success-checkmark {
    width: 16.2666666667vw;
    height: 21.3333333333vw
}

mcd-referral-success-pop .show .success-checkmark .check-icon {
    width: 14.1333333333vw;
    height: 14.1333333333vw;
    border: 1.0666666667vw solid var(--referral-partner-success-check-icon-border, rgba(0, 150, 0, .5))
}

mcd-referral-success-pop .show .success-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

mcd-referral-success-pop .show .success-checkmark .check-icon:before,
mcd-referral-success-pop .show .success-checkmark .check-icon:after {
    background: transparent
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-fix {
    background-color: transparent
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line {
    height: 1.3333333333vw;
    border-radius: .5333333333vw;
    background-color: var(--referral-partner-success-check-icon-color, #009600)
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line.line-tip {
    top: 8vw;
    left: 2.1333333333vw;
    width: 4.8vw;
    transform: rotate(46deg);
    animation: invite-partner-icon-line-tip .7s
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line.line-long {
    top: 6.6666666667vw;
    right: 1.6vw;
    width: 8.5333333333vw;
    transform: rotate(-50deg);
    animation: invite-partner-icon-line-long .7s
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-circle {
    top: -.5997001499vmax;
    left: -.5997001499vmax;
    width: 14.1333333333vw;
    height: 14.1333333333vw;
    border: transparent
}

mcd-referral-success-pop .show .register-success-cont .top-inner h4 {
    margin: 0
}

mcd-referral-bonus-terms-conditions .referral-cont {
    font-size: 3.2vw;
    line-height: 1.2
}

mcd-referral-bonus-terms-conditions .referral-cont li {
    display: flex;
    color: var(--referral-partner-terms-condition-list-txt, #ffffff)
}

mcd-referral-bonus-terms-conditions .referral-cont li i {
    color: var(--referral-partner-terms-condition-list-decimal, #ffffff)
}

mcd-referral-bonus-terms-conditions .referral-cont li+li {
    margin-top: 4.8vw
}

[dir=rtl] .referral-partner .recommend-friends-list .rf-list.form-title div+div,
[dir=rtl] .referral-partner .recommend-friends-list .rf-list.form-content div+div {
    border-left: 0;
    border-right: .2666666667vw dotted var(--referral-partner-form-title-border, #ffffff)
}

.pwa-download {
    position: fixed;
    bottom: 13.3333333333vw;
    width: 100%;
    z-index: 8000
}

.pwa-download .pwa-download-bg {
    background: var(--pwa-download-bg);
    width: 100%;
    height: 18.6666666667vw;
    border-radius: 1.0666666667vw 1.0666666667vw 0 0
}

.pwa-download .pwa-download-bg .pwa-download-container {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.pwa-download .pwa-download-bg .pwa-texture {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-repeat: no-repeat;
    -webkit-background-position: center;
    -webkit-background-size: contain;
    inset: 0;
    pointer-events: none
}

.pwa-download .pwa-close-btn {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    cursor: pointer;
    width: 6.4vw;
    height: 6.4vw;
    background-color: var(--pwa-close-icon-bg);
    margin-left: 2.1333333333vw
}

.pwa-download .pwa-hot {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-repeat: no-repeat;
    -webkit-background-position: center;
    -webkit-background-size: contain;
    width: 10%;
    height: 30%;
    top: .8vw;
    left: 8.5333333333vw;
    z-index: 2
}

.pwa-download .pwa-icon {
    position: relative;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    top: .5333333333vw;
    left: .5333333333vw
}

.pwa-download .pwa-icon img {
    width: 100%
}

.pwa-download .pwa-icon-frame {
    position: relative;
    width: 12.8vw;
    height: 12.8vw
}

.pwa-download .pwa-icon-frame:before {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    background: var(--pwa-icon-frame);
    border-radius: .5333333333vw
}

.pwa-download .pwa-content {
    width: 37.8666666667vw;
    height: auto;
    font-size: 3.7333333333vw
}

.pwa-download .pwa-content .pwa-name {
    color: var(--pwa-name-text);
    margin-bottom: 1.0666666667vw;
    max-width: 40vw;
    word-wrap: break-word;
    line-height: 1.2
}

.pwa-download .pwa-content .start {
    width: 3.7333333333vw;
    height: 3.7333333333vw
}

.pwa-download .download-btn {
    width: 33.0666666667vw;
    height: 9.8666666667vw;
    margin-right: 2.1333333333vw;
    background: var(--pwa-download-btn-bg, #fd1111);
    cursor: pointer
}

.pwa-download .download-btn p {
    text-align: center;
    line-height: 9.8666666667vw;
    color: var(--pwa-download-btn-text)
}

.pwa-download .ios-pwa-pop {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 9001;
    bottom: 0;
    top: auto;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 95vh;
    overflow: hidden;
    transform: none;
    background: var(--ios-pop-bg, #000000);
    border-radius: 3.2vw 3.2vw 0 0
}

.pwa-download .ios-pwa-pop p {
    color: var(--ios-title-text-color)
}

.pwa-download .ios-pwa-pop.active {
    animation: popIn .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.pwa-download .ios-pwa-pop.closing {
    animation: popOut .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.pwa-download .ios-pwa-pop .pwa-close-btn {
    position: absolute;
    right: 2%;
    top: 2%;
    width: 9.3333333333vw;
    height: 9.3333333333vw
}

.pwa-download .ios-pwa-pop .header {
    width: 100%;
    height: 26.6666666667vw;
    background: var(--ios-pop-header-bg);
    border-radius: 3.2vw 3.2vw 0 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.pwa-download .ios-pwa-pop .title {
    margin-left: 2.1333333333vw
}

.pwa-download .ios-pwa-pop ul {
    margin: 2.4vw 7.4666666667vw 6.6666666667vw;
    height: inherit
}

.pwa-download .ios-pwa-pop .pop-content {
    flex: 1 1 auto;
    overflow-y: auto
}

.pwa-download .ios-pwa-pop li {
    position: relative;
    display: flex;
    width: 100%;
    padding: .5333333333vw;
    color: var(--ios-title-text-color);
    font-family: "Source Sans 3", sans-serif;
    font-size: 4.2666666667vw;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center
}

.pwa-download .ios-pwa-pop li+li {
    margin-top: 14.9333333333vw
}

.pwa-download .ios-pwa-pop li:after {
    content: "";
    position: absolute;
    left: 2%;
    right: 1%;
    bottom: -32%;
    height: .2666666667vw;
    background-color: var(--ios-line-color)
}

.pwa-download .ios-pwa-pop li:last-child:after {
    display: none
}

.pwa-download .ios-pwa-pop li:first-child:after {
    bottom: -65%
}

.pwa-download .ios-pwa-pop .list-info {
    position: relative;
    display: flex
}

.pwa-download .ios-pwa-pop .item-num {
    position: relative;
    display: inline-flex;
    width: 9.6vw;
    height: 9.6vw;
    border-radius: 50%;
    background: var(--ios-inside-number-bg, #37406a);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0
}

.pwa-download .ios-pwa-pop .item-num:after {
    content: "";
    display: block;
    position: absolute;
    top: -.5333333333vw;
    left: -.5333333333vw;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: var(--ios-outside-number-bg, #fd1111);
    z-index: -1;
    border-radius: 50%
}

.pwa-download .ios-pwa-pop .item-num i {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 2.9333333333vw;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase
}

.pwa-download .ios-pwa-pop .item-num span {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 5.3333333333vw;
    font-weight: 600;
    color: var(--ios-num-text-color, --ios-title-text-color)
}

.pwa-download .ios-pwa-pop .item-txt {
    position: relative;
    display: inline-flex;
    margin-left: 4.2666666667vw;
    flex-grow: 1;
    font-size: 4vw;
    align-items: center;
    justify-content: flex-start
}

.pwa-download .ios-pwa-pop .item-txt p {
    display: block;
    width: 100%;
    align-items: center;
    line-height: 1.5
}

.pwa-download .ios-pwa-pop .item-txt strong {
    display: inline-block;
    padding: 2.1333333333vw 2.6666666667vw;
    background: var(--ios-strong-text-bg, #fd1111);
    box-shadow: 0 0 .5333333333vw #ffffffb3 inset;
    border-radius: 1.3333333333vw;
    margin: 0 1.3333333333vw;
    line-height: 1;
    color: var(--ios-strong-text-color, --ios-title-text-color)
}

.pwa-download .ios-pwa-pop .item-txt strong:before,
.pwa-download .ios-pwa-pop .item-txt strong:after {
    position: relative;
    display: block
}

.pwa-download .ios-pwa-pop .item-txt strong:before {
    content: "\201c";
    float: left;
    margin-right: .5333333333vw
}

.pwa-download .ios-pwa-pop .item-txt strong:after {
    content: "\201d";
    float: right;
    margin-left: .5333333333vw
}

.pwa-download .ios-pwa-pop .item-img {
    margin-top: 2.6666666667vw;
    position: relative
}

.pwa-download .ios-pwa-pop .item-img .focus {
    position: absolute;
    display: flex;
    top: 2.4vw;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    justify-content: center;
    align-items: center
}

.pwa-download .ios-pwa-pop .item-img .focus:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ios-focus-top-bg, #37406a);
    z-index: 2
}

.pwa-download .ios-pwa-pop .item-img .focus:after {
    position: absolute;
    content: "";
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: pulsate 1.5s ease-out;
    animation-iteration-count: infinite;
    background: var(--ios-focus-top-bg, #37406a);
    z-index: 1
}

@keyframes pulsate {
    0% {
        transform: scale(.4);
        opacity: 0
    }
    50% {
        opacity: 1;
        filter: none
    }
    to {
        transform: scale(1.5);
        opacity: 0
    }
}

.pwa-download .ios-pwa-pop .step-img {
    width: 84.8vw;
    height: 12.8vw
}

.pwa-download .ios-pwa-pop .share-icon,
.pwa-download .ios-pwa-pop .add-home-screen-icon,
.pwa-download .ios-pwa-pop .add {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    width: 8vw;
    height: 8vw;
    background-color: var(--ios-icon-bg);
    position: relative;
    z-index: 3;
    flex-shrink: 0
}

.pwa-download .ios-pwa-pop .step-share .item-img .focus {
    left: 42%
}

.pwa-download .ios-pwa-pop .step-home-screen .item-img .focus,
.pwa-download .ios-pwa-pop .press-add-button .item-img .focus {
    left: 84%
}

.pwa-download .pop-bg.active {
    display: block
}

.pwa-download .pop-bg.closing {
    display: none
}

.is-desktop .pwa-download {
    width: 100vw;
    right: 1%;
    bottom: 30px
}

.is-desktop .pwa-download-bg {
    border-radius: 1.0666666667vw
}

.is-desktop .ios-pwa-pop {
    max-width: 104vw;
    max-height: 90vh;
    height: -moz-fit-content;
    height: fit-content;
    transform: translate(-50%, -50%) translateY(100%);
    top: 50%;
    left: 50%;
    border-radius: 3.2vw;
    will-change: transform, opacity
}

.is-desktop .ios-pwa-pop .header {
    border-radius: 3.2vw
}

.is-desktop .ios-pwa-pop.active {
    animation: desktopPopIn .3s cubic-bezier(.4, 0, .2, 1) forwards
}

.is-desktop .ios-pwa-pop.closing {
    animation: desktopPopOut .3s cubic-bezier(.4, 0, .2, 1) forwards
}

@keyframes desktopPopIn {
    0% {
        transform: translate(-50%, -50%) translateY(100%);
        opacity: 0
    }
    to {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 1
    }
}

@keyframes desktopPopOut {
    0% {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 1
    }
    to {
        transform: translate(-50%, -50%) translateY(100%);
        opacity: 0
    }
}

@keyframes popIn {
    0% {
        transform: translateY(100%);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes popOut {
    0% {
        transform: translateY(0);
        opacity: 1
    }
    to {
        transform: translateY(100%);
        opacity: 0
    }
}

.progress-bar .bar {
    position: relative;
    width: 100%;
    height: 2.1333333333vw;
    margin-bottom: 1.3333333333vw;
    border-radius: 1.3333333333vw;
    background: #0000004d;
    box-shadow: inset 0 0 .2666666667vw #999
}

.progress-bar .bar .bar-inner {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 1.3333333333vw;
    background: linear-gradient(to right, #e9d29c, #f0cc7a);
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #f0cc7a66, 0 0 .8vw #f0cc7a66
}

.progress-bar .bar .bar-inner:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -2.1333333333vw;
    transform: translate(-50%, -50%);
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 .5333333333vw .2666666667vw #f0cc7a
}

.progress-bar .number {
    display: flex;
    justify-content: space-between;
    align-content: center;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner,
.ticket-wrap .progress-bar .bar .bar-inner {
    background: var(--turnover-progress-bar-bg-active, linear-gradient(0deg, #700402 0%, #e31210 100%));
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #4446, 0 0 .8vw #4446
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner:after,
.ticket-wrap .progress-bar .bar .bar-inner:after {
    box-shadow: 0 0 .5333333333vw .2666666667vw #444
}

.beforelogin {
    display: flex;
    position: fixed;
    z-index: 104;
    inset-block-end: 0;
    width: 100%;
    height: 13.3333333333vw;
    box-shadow: 0 0 1.3333333333vw #00000080
}

.beforelogin a {
    display: block;
    text-decoration: none
}

.beforelogin .login-button {
    width: 50%;
    height: 100%;
    background: linear-gradient(0deg, #700402, #e31210);
    font-size: 4vw;
    font-weight: 700;
    line-height: 13.3333333333vw;
    text-align: center
}

.beforelogin .login-button a {
    color: #fff
}

.beforelogin .register-button {
    width: 50%;
    height: 100%;
    background: linear-gradient(180deg, #535353, #000);
    font-size: 4vw;
    font-weight: 700;
    line-height: 13.3333333333vw;
    text-align: center
}

.beforelogin .register-button a {
    color: #fff
}

.beforelogin.havelanguage .language-select {
    display: flex;
    flex: 2;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 1.3333333333vw;
    background: linear-gradient(180deg, #7f7f7f, #3b3b3b);
    text-align: center
}

.beforelogin.havelanguage .language-select p {
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 1.2;
    text-align: left
}

.beforelogin.havelanguage .language-select img {
    width: 6.6666666667vw;
    height: auto;
    margin-right: 1.3333333333vw;
    border-radius: 100%;
    aspect-ratio: 1/1
}

.beforelogin.havelanguage .register-button,
.beforelogin.havelanguage .login-button {
    flex: 3
}

.third-party-login.forgot-password {
    min-height: 100%
}

.third-party-login.forgot-password .logo-box {
    margin: 7.4666666667vw auto
}

.third-party-login.forgot-password .member-error-wrap {
    display: grid;
    line-height: 20px
}

.third-party-login.forgot-password .input-group label {
    padding: 0
}

.third-party-login.forgot-password .button {
    margin: 6.4vw auto 4.2666666667vw;
    width: 100%;
    height: 12vw;
    font-size: 4vw;
    line-height: 12vw;
    background: var(--forgot-password-layout-btn-bg, linear-gradient(0deg, #700402 0%, #e31210 100%));
    color: var(--forgot-password-layout-btn-txt, #ffffff)
}

.third-party-login.forgot-password .button.btn-secondary {
    background: var(--forgot-password-layout-btn-secondary-bg, linear-gradient(180deg, #444 0%, #222 100%))
}

.third-party-login.forgot-password .contact-wrap {
    padding: 2.6666666667vw 4vw
}

.third-party-login.forgot-password .contact-wrap .cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6.4vw
}

.third-party-login.forgot-password .contact-wrap .icon {
    margin-top: 3.2vw;
    width: 32vw;
    height: auto
}

.third-party-login.forgot-password .contact-wrap .icon img {
    width: 100%
}

.third-party-login.forgot-password .contact-wrap .icon+.info {
    margin-top: 2.1333333333vw
}

.third-party-login.forgot-password .contact-wrap .info {
    color: var(--forgot-password-contact-txt-color, #ffffff);
    font-size: 4.2666666667vw;
    line-height: 1.4
}

.third-party-login.forgot-password .reset-wrap .member-error+.member-error {
    margin-top: 3.2vw
}

.third-party-login.forgot-password .reset-wrap .tips-info {
    margin: 6.4vw 0;
    border: .2666666667vw solid var(--forgot-password-reset-tips-border, #7e7e7e);
    background: var(--forgot-password-reset-tips-bg, #222222)
}

.third-party-login.forgot-password .reset-wrap .tips-info h5:before {
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4.2666666667vw
}

.third-party-login.forgot-password .reset-wrap .error-message:before {
    flex: 0 0 4.2666666667vw
}

.no-result {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 80vw
}

.no-result img {
    display: block;
    width: 30%;
    height: auto;
    margin: auto;
    opacity: 1
}

.no-result .text {
    margin-top: 2.6666666667vw;
    color: #7e7e7e;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center
}

mcd-daily-streak-challenge .no-result {
    height: 100%
}

.pop-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: height .5s;
    background: #22222280;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

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

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

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

.pop-wrap {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-height: 85vh;
    transform: translate(-50%, -37%);
    transition: all .3s;
    animation: hide 0s 1s 1 forwards;
    opacity: 0;
    background: #000;
    color: #fff
}

.pop-wrap.show {
    display: flex
}

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

.pop-wrap.promotion-pop {
    position: fixed;
    height: auto;
    background: #000;
    color: #fff;
    max-width: 160vw
}

.pop-wrap.promotion-pop .pop-title {
    padding: 0 4vw
}

.pop-wrap.promotion-pop.show {
    display: flex
}

.pop-wrap.pop-language .btn-close,
.pop-wrap.promotion-pop .btn-close {
    width: 13.3333333333vw;
    height: 13.3333333333vw
}

.pop-wrap.pop-language .btn-close:before,
.pop-wrap.promotion-pop .btn-close:before {
    width: 100% !important;
    height: 100% !important
}

.pop-wrap.pop-language .btn-close {
    width: 16vw;
    height: 16vw
}

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

.pop-wrap .detail-banner {
    line-height: 0
}

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

.pop-wrap .btn-close {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 16vw;
    height: 16vw;
    transition: .5s;
    background: transparent
}

.pop-wrap .btn-close .item-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: .3s;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%
}

.pop-wrap .pop-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 16vw;
    padding: 4vw 16vw 4vw 4vw;
    background: linear-gradient(180deg, #444, #222)
}

.pop-wrap .pop-title h3 {
    display: inline-block;
    width: 100%;
    height: auto;
    overflow: hidden;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 1.2
}

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

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

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

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

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

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

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

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

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

.notshow-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 9.3333333333vw;
    padding: 0 5.3333333333vw;
    background: #0003
}

.notshow-checkbox .check-input {
    display: none
}

.notshow-checkbox .check-label:hover {
    cursor: pointer
}

.notshow-checkbox .check-cube {
    display: inline-block;
    position: relative;
    width: 4vw;
    height: 4vw;
    margin-right: 5px;
    border: 1px solid #fff;
    background: #000000b3;
    border-radius: 2px;
    vertical-align: middle;
    overflow: hidden
}

.notshow-checkbox .check-cube__icon {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform .3s ease-out .1s, opacity .3s ease-out;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%
}

.notshow-checkbox .check-input:checked+.check-label .check-cube__icon {
    transform: translate(0)
}

.notshow-checkbox .text {
    display: inline-block;
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 9.3333333333vw
}

.notshow-checkbox.no-bg {
    background: transparent
}

.promotion-pop {
    background: #000
}

.promotion-pop.scroll-enabled {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

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

.promotion-pop .pop-inner {
    flex: 1 1 60%;
    max-height: auto
}

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

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

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

.pop-check .pop-title {
    padding: 0 4vw
}

.pop-check .pop-inner {
    background: #000;
    text-align: left
}

.pop-language .pop-inner {
    padding: 3.2vw;
    background: #000;
    text-align: left
}

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

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

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

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

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

.language-list .left-language-area p {
    display: inline-block;
    width: 60%;
    color: #fff9;
    font-size: 3.2vw;
    line-height: 1.5;
    vertical-align: middle
}

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

.language-list .right-language-area {
    display: inline-flex;
    flex-flow: row wrap;
    width: 64%;
    gap: 1.0666666667vw
}

.language-list li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 1.3333333333vw;
    padding: 1.3333333333vw 0;
    border-bottom: .2666666667vw solid #7e7e7e
}

.language-list li:last-child {
    border: 0
}

.radio-box {
    display: inline-block;
    flex: 1 1 48%;
    font-size: 3.7333333333vw;
    vertical-align: top
}

.radio-box [type=radio] {
    display: none
}

.radio-box [type=radio]+label {
    display: block;
    padding: 0 1.3333333333vw;
    transition: .3s;
    border: .2666666667vw solid #7e7e7e;
    color: #fff;
    line-height: 2.5;
    text-align: center
}

.radio-box [type=radio]:checked+label {
    border: .2666666667vw solid #fd1111;
    color: #fd1111
}

.pop-setwallet {
    padding: 4vw;
    border-radius: 1.3333333333vw;
    background: #550b0b;
    color: #fffc;
    line-height: 1.5
}

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

.pop-setwallet .title {
    padding: 0 8vw 2.6666666667vw 0;
    border-bottom: .2666666667vw solid #7e7e7e;
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.pop-setwallet .inner-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 4vw 0 0;
    padding: 5.3333333333vw 4vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    font-size: 3.2vw
}

.pop-setwallet .prompt {
    margin: 0 0 2.6666666667vw;
    padding: 1.3333333333vw;
    color: #7e7e7e
}

.pop-setwallet .btn-box {
    margin-bottom: 0
}

.pop-setwallet .wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2.1333333333vw 4vw;
    border: .5333333333vw solid #7e7e7e;
    border-radius: 13.3333333333vw;
    color: #fd1111;
    font-size: 4vw
}

.pop-setwallet .box {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.pop-setwallet .box .text {
    padding: 1.8666666667vw 2.6666666667vw
}

.pop-setwallet .box .money {
    padding: 1.8666666667vw 2.6666666667vw;
    background: transparent;
    font-size: 4.5333333333vw;
    text-align: right
}

.pop-setwallet .box.bonus {
    color: #fd1111
}

.pop-setwallet .deposit {
    margin: 1.8666666667vw 0 3.2vw
}

.pop-setwallet .deposit .text {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 2.6666666667vw;
    padding: .5333333333vw 1.3333333333vw;
    transform: translateY(-50%);
    background: #550b0b
}

.pop-setwallet .deposit .money {
    z-index: 2;
    width: 100%;
    padding: 0
}

.pop-setwallet .deposit .money input {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
    padding: 3.2vw 2.6666666667vw;
    border: .5333333333vw solid rgba(255, 255, 255, .8);
    border-radius: 1.3333333333vw;
    outline: none;
    background: #550b0b;
    color: #fff;
    font-size: 4.5333333333vw;
    text-align: right
}

.pop-setwallet .deposit .money input::placeholder {
    color: #7e7e7e
}

.pop-setwallet .deposit .money.error input {
    border: .5333333333vw solid #f51111
}

.pop-setwallet .deposit .money.error-ani {
    animation-name: error-ani;
    animation-duration: 1s
}

.pop-setwallet .member-error {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 5%;
    max-width: 90%;
    padding: .8vw 1.8666666667vw;
    transform: translateY(50%);
    border-radius: 5.3333333333vw;
    background: #f51111;
    color: #fff
}

.pop-setwallet .member-error:before {
    flex: 0 0 4.2666666667vw;
    background: #fff;
    color: #f51111
}

.pop-setwallet .member-error span {
    width: 100%;
    vertical-align: text-top
}

.pop-setwallet .other-choice {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0 1.3333333333vw 4vw
}

.pop-setwallet .other-choice .tips {
    position: relative;
    width: 100%;
    padding: 4vw 0;
    font-size: 3.2vw;
    text-align: center
}

.pop-setwallet .other-choice .tips span {
    display: inline;
    padding: 0 1.3333333333vw;
    background: #550b0b;
    color: #999
}

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

.pop-setwallet .other-choice .btn-link {
    color: #fd1111;
    line-height: 1.1
}

.pop-setwallet .other-choice .btn-link:after {
    content: "";
    display: block;
    width: 100%;
    border: .2666666667vw solid #fd1111
}

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

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

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

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

.pop-wrap.pop-editor ul.editor-menu {
    display: none;
    background: #222;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    overflow: hidden
}

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

.pop-wrap.pop-editor ul.editor-menu li {
    background: #222;
    color: #fff
}

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

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

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

.pop-wrap.form-verification {
    border-radius: 1.3333333333vw;
    padding: 10.6666666667vw 5.3333333333vw;
    background: var(--pop-form-verification-bg, #000000)
}

.pop-wrap.form-verification .cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6.4vw;
    text-align: center
}

.pop-wrap.form-verification .icon {
    width: 24vw;
    height: 24vw
}

.pop-wrap.form-verification .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.pop-wrap.form-verification .icon+.info {
    margin-top: 3.2vw
}

.pop-wrap.form-verification .info p {
    line-height: 1.2
}

.pop-wrap.form-verification .info p+p {
    display: block;
    margin-top: 3.2vw
}

.pop-wrap.form-verification .info-title {
    font-size: 4.2666666667vw
}

.pop-wrap.form-verification .info-subtitle {
    color: var(--pop-verification-subtitle-color, #fff);
    font-size: 3.2vw
}

.pop-wrap.form-verification.failed .item-icon {
    background-color: var(--pop-form-verification-failed-icon-bg, #f51111)
}

.pop-wrap.form-verification.failed .info-title {
    color: var(--pop-verification-failed-title-color, #f51111)
}

.pop-wrap.form-verification.expired .item-icon {
    background-color: var(--pop-form-verification-expired-icon-bg, #f51111)
}

.pop-wrap.form-verification.expired .info-title {
    color: var(--pop-verification-expired-title-color, #f51111)
}

.pop-wrap.form-verification.success .item-icon {
    background-color: var(--pop-form-verification-success-icon-bg, #009600)
}

.pop-wrap.form-verification.success .info-title {
    color: var(--pop-verification-success-title-color, #009600)
}

.pop-wrap.form-verification .button {
    margin: 0;
    width: 100%;
    height: 10.6666666667vw;
    font-size: 4vw;
    line-height: 10.6666666667vw;
    background: var(--pop-form-verification-btn-bg, linear-gradient(0deg, #700402 0%, #e31210 100%))
}

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

.disable-btn {
    background: linear-gradient(180deg, #444, #222)
}

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

.pop-go-to-biometrics .btn-close {
    background: transparent
}

.pop-go-to-biometrics .btn-close .item-icon {
    background: none;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%;
    filter: none
}

.pop-go-to-biometrics .box-loading {
    position: relative;
    width: 48vw;
    height: 48vw;
    margin: 0 auto 10.6666666667vw
}

.pop-go-to-biometrics .box-loading .face-id {
    position: absolute;
    z-index: 10;
    width: 48vw;
    height: 48vw;
    background: linear-gradient(to bottom right, #fd1111, #fe5d5d);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.pop-go-to-biometrics .box-loading:before {
    content: "";
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40%;
    text-align: center
}

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

.pop-go-to-biometrics .box-loading .circle-wave:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.3333333333vw;
    right: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover
}

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

.pop-go-to-biometrics .box-loading .circle-wave-1:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.3333333333vw;
    left: 2.6666666667vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover
}

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

.pop-go-to-biometrics .box-loading .circle-wave-2:after {
    content: "";
    display: block;
    position: absolute;
    right: 2.6666666667vw;
    bottom: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover
}

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

.pop-go-to-biometrics .box-loading .circle-wave-3:after {
    content: "";
    display: block;
    position: absolute;
    top: 2.6666666667vw;
    left: 1.3333333333vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover
}

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

.pop-go-to-biometrics .box-loading .circle-wave-4:after {
    content: "";
    display: block;
    position: absolute;
    right: 1.3333333333vw;
    bottom: 2.6666666667vw;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: #000;
    background-repeat: no-repeat;
    background-size: cover
}

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

.pop-go-to-biometrics .sub-title {
    margin-bottom: 10.6666666667vw;
    color: #7e7e7e;
    font-size: 3.7333333333vw;
    line-height: 1.2;
    text-align: center
}

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

.pop-go-to-biometrics .show-group {
    display: flex;
    position: relative;
    justify-content: center;
    margin-top: 2.6666666667vw
}

.pop-go-to-biometrics .show-group.style-checked input {
    margin: 0;
    border: 0
}

.pop-go-to-biometrics .show-group.style-checked input[type=checkbox]+label {
    transition: all .3s;
    background: none;
    color: #7e7e7e;
    display: flex;
    align-items: center
}

.pop-go-to-biometrics .show-group.style-checked .item-icon {
    display: inline-block;
    width: 4vw;
    height: 4vw;
    margin-right: 5px;
    border: 1px solid #fff;
    background: #000000b3;
    border-radius: 2px;
    vertical-align: middle;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100% 100%;
    transition: background .3s
}

.pop-go-to-biometrics .show-group.style-checked input[type=checkbox]:checked+label {
    color: #009600
}

.pop-go-to-biometrics .show-group.style-checked input[type=checkbox]:checked+label .item-icon {
    background: #009600
}

.pop-go-to-biometrics .show-group.style-checked input[type=checkbox]:not(:checked)+label .item-icon {
    mask-image: none;
    -webkit-mask-image: none
}

.pop-go-to-biometrics .show-group.style-checked input[type=checkbox]+label span {
    line-height: 4.2666666667vw;
    text-align: left;
    pointer-events: none
}

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

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

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

.pop-otp-verification .menu-box {
    padding: 2.6666666667vw;
    background: #000
}

.pop-otp-verification .input-group {
    background: #000
}

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

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

.pop-transaction-records-details .bank-name {
    position: absolute;
    z-index: 10000;
    top: -12vw;
    left: 50%;
    max-width: 100%;
    padding: 2.1333333333vw 2.6666666667vw;
    transform: translate(-50%);
    border-radius: 2.9333333333vw;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    white-space: nowrap
}

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

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

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

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

.pop-transaction-records-details .pop-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: inherit;
    overflow: hidden;
    background: #000
}

.pop-transaction-records-details .pop-content .tab-btn-wrap {
    background: #000
}

.pop-transaction-records-details .pop-content .tab-btn-wrap:before {
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #000
}

.pop-transaction-records-details .pop-content .tab-btn-wrap .tab-btn-bar:before {
    background: #2e2f31
}

.pop-transaction-records-details .pop-content .tab-btn-wrap .tab-btn-bar .line {
    background: linear-gradient(0deg, #700402, #e31210)
}

.pop-transaction-records-details .pop-content .tab-btn-section {
    flex: none
}

.pop-transaction-records-details .pop-content .tab-content {
    flex: 1;
    height: 100%
}

.pop-transaction-records-details .pop-content .inner-wrap {
    height: inherit
}

.pop-transaction-records-details .member-content {
    background: #000;
    text-align: center
}

.pop-transaction-records-details .member-content .tips {
    display: none;
    margin: 4vw 0;
    color: #fff
}

.pop-transaction-records-details .member-content .button {
    margin: 2.6666666667vw;
    overflow: hidden
}

.pop-transaction-records-details .member-content .button .countdown {
    display: none;
    position: absolute;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 12vw;
    border-radius: .8vw;
    background: linear-gradient(180deg, #444, #222);
    color: #999;
    font-size: 4vw;
    line-height: 8vw;
    text-align: center;
    z-index: 1
}

.pop-transaction-records-details .member-content .button .countdown.fade-in {
    animation: button-push .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fade-in .item-icon {
    display: block;
    position: absolute;
    top: -5.3333333333vw;
    width: 100%;
    height: 5.3333333333vw;
    background: linear-gradient(180deg, #444, #222);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.pop-transaction-records-details .member-content .button .countdown.fade-out {
    animation: button-pull .5s ease
}

.pop-transaction-records-details .member-content .button .countdown.fade-out .item-icon {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5.3333333333vw;
    transform: rotate(180deg);
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.pop-transaction-records-details .member-content .button .countdown .timer {
    position: relative;
    top: 0;
    left: -2.6666666667vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 .4vw #999
}

.pop-transaction-records-details .member-content .button .countdown .timer:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36.5%;
    height: .4vw;
    transform-origin: 0 50%;
    animation: spinClockwise 2s linear infinite;
    border-radius: 1.3333333333vw;
    background: #999
}

.pop-transaction-records-details .member-content .button .countdown .timer:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: .4vw;
    transform-origin: 0 50%;
    animation: spinClockwise 12s linear infinite;
    border-radius: 1.3333333333vw;
    background: #999
}

.transaction-details-wrap {
    margin: 0;
    height: 100%;
    padding: 4.2666666667vw;
    overflow-x: hidden;
    overflow-y: auto
}

.transaction-details-wrap .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.6666666667vw 0
}

.transaction-details-wrap .title h3 {
    width: 70%;
    color: #fff;
    font-size: 4.5333333333vw
}

.transaction-details-wrap .title .tags {
    min-width: 16vw;
    padding: 1.0666666667vw 1.3333333333vw;
    overflow: hidden;
    transform: scale(.9);
    border-radius: .8vw;
    color: #fff;
    font-size: 3.2vw;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap
}

.transaction-details-wrap .timeline-box {
    position: relative;
    margin-top: 2.6666666667vw;
    padding-bottom: 2.6666666667vw
}

.transaction-details-wrap .timeline-box .timeline-block .content {
    padding: 4.2666666667vw
}

.transaction-details-wrap .timeline-box .date {
    margin-bottom: 2.6666666667vw;
    margin-left: 8vw;
    color: #7e7e7e;
    font-size: 2.9333333333vw
}

.timeline-block {
    position: relative;
    margin-bottom: 2.6666666667vw
}

.timeline-block:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 4.8vw;
    width: 1.0666666667vw;
    height: calc(100% + 9.3333333333vw);
    border-radius: 2.6666666667vw
}

.timeline-block:last-child:before {
    top: -9.3333333333vw;
    height: 14.6666666667vw
}

.timeline-block .point {
    position: absolute;
    top: 4vw;
    left: 3.9333333333vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%;
    background: #fff;
    box-shadow: .2666666667vw .2666666667vw .2666666667vw #0000001a
}

.timeline-block .bounce {
    animation: bounce-point .5s .8s
}

.timeline-block .content {
    display: inline-flex;
    width: calc(100% - 12.8vw);
    min-height: 14.6666666667vw;
    margin-left: 12.8vw;
    padding: 4.2666666667vw;
    border-radius: .8vw;
    background: #2e2f31;
    box-shadow: .5333333333vw .5333333333vw #0000001a;
    color: #7e7e7e
}

.timeline-block .content .text {
    width: 76%;
    font-size: 3.7333333333vw;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-line
}

.timeline-block .content .text+.time {
    margin-top: 2.1333333333vw
}

.timeline-block .content .time {
    width: 24%;
    font-size: 2.9333333333vw;
    text-align: right
}

.timeline-block.current:before {
    height: 50%
}

.timeline-block.current .point {
    display: flex;
    z-index: 1;
    top: 2vw;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    border: .8vw solid #ffffff;
    box-shadow: .2666666667vw .2666666667vw #0000001a, inset .2666666667vw .2666666667vw #0000001a
}

.timeline-block.current .point .item-icon {
    content: "";
    display: block;
    position: relative;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background: #fff
}

.timeline-block.current .content {
    color: #fff
}

.details-box {
    margin: 2.6666666667vw 0
}

.details-box .info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 3.2vw 4vw;
    background: #222;
    color: #fff
}

.details-box .info:nth-child(2n) {
    background: #2e2f31
}

.details-box .info .name {
    font-size: 3.4666666667vw;
    font-weight: 500
}

.details-box .info .value {
    font-size: 3.4666666667vw;
    text-align: right;
    word-break: break-word
}

.pop-content.processing .transaction-details-wrap .tags {
    background: #fc6212e6
}

.pop-content.processing .transaction-details-wrap .timeline-block:before {
    background: #fc6212e6
}

.pop-content.processing .transaction-details-wrap .timeline-block.current .point {
    background: #fc6212e6 !important
}

.pop-content.processing .transaction-details-wrap .timeline-block.current .point .item-icon {
    top: 5%;
    animation: wiggle 2s .5s infinite;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.pop-content.success .tags {
    background: #009600e6
}

.pop-content.success .timeline-block:before {
    background: #009600e6
}

.pop-content.success .timeline-block.current .point {
    background: #009600e6 !important
}

.pop-content.success .timeline-block.current .point .item-icon {
    top: 3%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.pop-content.fail .transaction-details-wrap {
    padding-bottom: 18.6666666667vw
}

.pop-content.fail .transaction-details-wrap .tags {
    background: #f51111e6
}

.pop-content.fail .transaction-details-wrap .timeline-block:before {
    background: #f51111e6
}

.pop-content.fail .transaction-details-wrap .timeline-block.current .point {
    background: #f51111e6 !important
}

.pop-content.fail .transaction-details-wrap .timeline-block.current .point .item-icon {
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.pop-content.reverted .tags {
    background: #6b392de6
}

.pop-content.reverted .timeline-block:before {
    background: #6b392de6
}

.pop-content.reverted .timeline-block.current .point {
    background: #6b392de6 !important
}

.pop-content.reverted .timeline-block.current .point .item-icon {
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

@keyframes table-arrow {
    0% {
        transform: translate(-50%, -50%) rotate(180deg)
    }
    to {
        transform: translateY(-50%) rotate(180deg)
    }
}

@keyframes circle-spin {
    0% {
        transform: rotate(360deg)
    }
}

@keyframes error-ani {
    0%,
    to {
        transform: translateZ(0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-3px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        transform: translate3d(3px, 0, 0)
    }
}

@keyframes bounce-point {
    0% {
        transform: scale(.6)
    }
    60% {
        transform: scale(1.2)
    }
    to {
        transform: scale(1)
    }
}

@keyframes wiggle {
    0%,
    7% {
        transform: rotate(0)
    }
    15% {
        transform: rotate(-15deg)
    }
    20% {
        transform: rotate(10deg)
    }
    25% {
        transform: rotate(-10deg)
    }
    30% {
        transform: rotate(6deg)
    }
    35% {
        transform: rotate(-4deg)
    }
    40%,
    to {
        transform: rotate(0)
    }
}

@keyframes slide {
    0% {
        visibility: hidden;
        transform: translate(100px)
    }
    60% {
        transform: translate(-5px)
    }
    to {
        visibility: visible;
        transform: translate(0)
    }
}

@keyframes spinClockwise {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes button-push {
    0% {
        bottom: -12vw
    }
    to {
        bottom: 0
    }
}

@keyframes button-pull {
    0% {
        bottom: 0
    }
    to {
        bottom: -12vw
    }
}

.pop-login-fail {
    position: fixed;
    top: -50px;
    width: 95%;
    height: auto;
    padding: 2.6666666667vw;
    transition: top .3s;
    animation: errorTipsShow .5s alternate linear forwards;
    border-radius: 2.1333333333vw;
    border: .2666666667vw solid #e38385;
    background: #f5111180
}

.pop-login-fail .login-fail-tip {
    display: flex;
    align-items: center;
    justify-content: center
}

.pop-login-fail .login-fail-tip .login-fail-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 2.6666666667vw;
    background: #e38385;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%
}

.pop-login-fail .login-fail-tip span {
    width: 90%;
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: .2666666667vw;
    line-height: 4vw;
    color: #e38385
}

.pop-login-fail.active {
    display: inline;
    opacity: 1
}

.pop-login-fail.hide {
    animation: errorTipsHIde .5s alternate linear forwards
}

.pop-fail-tip {
    border: 1px solid #e38385;
    background: #f5111180
}

.pop-fail-tip .fail-icon,
.pop-fail-tip .login-fail-icon {
    background: #f51111
}

.pop-fail-tip span {
    color: #f51111
}

@keyframes errorTipsShow {
    0% {
        top: -50px
    }
    to {
        top: 35px
    }
}

@keyframes errorTipsHIde {
    0% {
        top: 35px
    }
    to {
        top: -50px
    }
}

.pop-reset-password,
.pop-account-lock {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 90vh;
    transform: translate(0);
    transition: bottom .5s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #0d0d0d;
    box-shadow: 0 -2px 15px #0003
}

.pop-reset-password .lock-box,
.pop-account-lock .lock-box {
    position: relative;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.pop-reset-password .lock-box img,
.pop-account-lock .lock-box img {
    display: block;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    margin: 0 auto;
    opacity: 0
}

.pop-reset-password .title,
.pop-account-lock .title {
    transform: translateY(-120%);
    color: #f51111;
    font-weight: 600;
    letter-spacing: .2666666667vw;
    text-align: center
}

.pop-reset-password p,
.pop-account-lock p {
    margin-bottom: 8vw;
    color: #7e7e7e;
    font-size: 3.4666666667vw;
    letter-spacing: .2666666667vw;
    line-height: 5.3333333333vw;
    text-align: center
}

.pop-reset-password .pop-btn-box,
.pop-account-lock .pop-btn-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between
}

.pop-reset-password .pop-btn-box .button,
.pop-account-lock .pop-btn-box .button {
    width: 100%;
    height: 12vw;
    margin: 0 auto 2.6666666667vw;
    font-size: 4vw;
    line-height: 12vw
}

.pop-reset-password .pop-btn-box .btn-forget-password,
.pop-account-lock .pop-btn-box .btn-forget-password {
    margin-right: 2.6666666667vw;
    margin-left: 2.6666666667vw;
    background: #fd1111
}

.pop-reset-password .pop-btn-box .btn-closed,
.pop-account-lock .pop-btn-box .btn-closed {
    margin-right: 2.6666666667vw;
    background: #2e2f31
}

.pop-reset-password.active,
.pop-account-lock.active {
    bottom: 0
}

.pop-reset-password.active img,
.pop-account-lock.active img {
    animation: fallin .6s .2s forwards
}

.success-pop,
.fail-pop {
    overflow: visible;
    border-radius: 2.6666666667vw
}

.success-pop .pop-title,
.fail-pop .pop-title {
    height: auto;
    min-height: auto;
    padding: 0;
    background: transparent
}

.success-pop .pop-title h3,
.fail-pop .pop-title h3 {
    margin-bottom: 2.6666666667vw;
    padding: 0;
    font-size: 5.3333333333vw;
    font-weight: 700;
    line-height: 5.8666666667vw;
    text-align: center
}

.success-pop .pop-inner,
.fail-pop .pop-inner {
    text-align: center
}

.success-pop p,
.fail-pop p {
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.success-pop .member-content .button,
.fail-pop .member-content .button {
    width: 100%;
    margin-top: 5.3333333333vw;
    border: 0
}

.success-pop .state,
.fail-pop .state {
    position: relative;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    margin: -10.6666666667vw auto 15px;
    animation: fallin .7s forwards .2s;
    border-radius: 50%;
    opacity: 0
}

.success-pop .pop-title h3,
.success-pop span {
    color: #4e916d
}

.success-pop .state {
    background: linear-gradient(135deg, #57a279, #4e916d)
}

.success-pop .state .item-icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.success-pop .btn-default {
    display: none
}

.fail-pop .pop-title h3,
.fail-pop span {
    color: #e93d3d
}

.fail-pop .state {
    background: linear-gradient(135deg, #ec5454, #e93d3d)
}

.fail-pop .btn-default {
    background: linear-gradient(135deg, #ec5454, #e93d3d);
    text-shadow: 0 1px 3px #ac1414;
    cursor: pointer
}

.pop-notification .content-style {
    max-height: 70vh
}

.pop-notification .content-style .table {
    margin-bottom: 17.3333333333vw
}

.pop-notification .content-style p {
    margin: 2.6666666667vw 0
}

.pop-notification .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
    background: #000
}

.pop-notification .btn-box .button {
    color: #fff
}

.pop-notification .btn-box .btn-primary {
    background: linear-gradient(to bottom, #eed29f, #cca967)
}

.pop-notification .btn-box .btn-cancel {
    background: linear-gradient(to bottom, #d15454, #cb4141)
}

.layout-brand {
    display: block;
    padding: 0 3.2vw 3.2vw
}

.layout-brand.active {
    display: none
}

.layout-brand.fish .card1 li img {
    width: 75%;
    margin: 0 auto 1.6vw
}

.layout-list {
    display: none
}

.layout-list.active {
    display: block
}

.card2 a {
    display: block;
    text-decoration: none
}

.card2 p {
    margin-bottom: 2.6666666667vw;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw
}

.card2 .brand {
    width: 13.3333333333vw;
    height: 13.3333333333vw
}

.card1 {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1.0666666667vw
}

.card1 ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 2.1333333333vw;
    width: 100%;
    height: auto
}

.card1 li {
    position: relative;
    width: 100%;
    background: #550b0b
}

.card1 li a {
    display: block;
    padding: 2.6666666667vw 0;
    text-decoration: none
}

.card1 li img {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto
}

.card1 li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 3.4666666667vw;
    margin: 1.0666666667vw 1.3333333333vw 0;
    text-align: center
}

.card1.exclusive {
    width: 100%
}

.card1.exclusive ul {
    grid-template-columns: none
}

.card1.exclusive ul li {
    overflow: hidden;
    border-radius: 1.3333333333vw;
    margin-bottom: 3.2vw
}

.card1.exclusive ul li a {
    padding: 0
}

.card1.exclusive ul li a img {
    height: 100%;
    width: 100%
}

.card1.portrait,
.card2.portrait {
    width: 100%;
    height: auto;
    border-radius: 1.0666666667vw
}

.card1.portrait ul,
.card2.portrait ul {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    height: auto
}

.card1.portrait ul li a,
.card2.portrait ul li a {
    padding: 0
}

.card1.portrait ul img,
.card2.portrait ul img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
    border-radius: .8vw
}

.card2 {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1.0666666667vw
}

.card2 .button {
    width: 24vw
}

.card2 .brand {
    position: absolute;
    top: 0;
    right: 2.6666666667vw
}

.card1.col-3 ul {
    display: flex;
    justify-content: center
}

.card1.col-3 ul li {
    width: 33.3333333333%
}

.card1.col-3 ul li .icon-sport {
    margin-bottom: 1.3333333333vw;
    mask-size: 36%;
    -webkit-mask-size: 36%
}

.card1 ul li .icon-sport {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: #fd1111;
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    margin: 0 auto
}

.open-game-icon {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.announcement-row {
    display: flex;
    position: relative;
    width: 100%;
    height: 8vw;
    border-bottom: .2666666667vw solid black;
    background: #1f1f1f;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 8vw
}

.announcement-row .item-icon {
    display: block;
    width: 8vw;
    height: 8vw;
    margin-left: 2.6666666667vw;
    background: #fff;
    background-repeat: no-repeat;
    background-position: center;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: 80% auto;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: 80% auto
}

.announcement-row .marquee {
    width: 100%;
    margin: 0 2.6666666667vw;
    overflow: hidden
}

.announcement-row .marquee ul {
    display: flex;
    flex-direction: row;
    width: -moz-fit-content;
    width: fit-content
}

.announcement-row .marquee li {
    display: inline-block;
    margin-right: 25px
}

.announcement-row .marquee li p {
    white-space: nowrap
}

.announcement-row .marquee li a {
    text-decoration: none;
    color: #fff
}

html.is-desktop .announcement-row .item-icon {
    margin: 0
}

.member-menu {
    position: fixed;
    bottom: -120%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .4s;
    background: #000;
    -webkit-overflow-scrolling: touch
}

.member-menu.active {
    bottom: 0
}

.member-menu .close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    border-radius: 0 0 0 100%;
    background: #000
}

.member-menu .close:before,
.member-menu .close:after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 60%;
    width: 5.3333333333vw;
    height: .5333333333vw;
    margin: -.2666666667vw 0 0 -2.6666666667vw;
    border-radius: .5333333333vw;
    background: var(--member-menu-close-bg, #ffffff)
}

.member-menu .close:before {
    transform: rotate(45deg)
}

.member-menu .close:after {
    transform: rotate(-45deg)
}

.member-header {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 4vw 2.6666666667vw
}

.member-header-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%
}

.member-header-content .user-info,
.member-header-content .user-date {
    display: flex;
    width: 100%
}

.member-header-content .pic {
    display: inline-flex;
    width: 17.3333333333vw;
    height: 17.3333333333vw;
    margin-right: 2.6666666667vw;
    background-color: var(--member-menu-pic, transform);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.member-header-content .infor {
    display: inline-flex;
    margin: 1.3333333333vw 0;
    flex-direction: column;
    overflow: hidden
}

.member-header-content .infor div+div {
    margin-top: .5333333333vw
}

.member-header-content .account {
    color: var(--member-menu-account-txt, #ffffff);
    font-size: 4.8vw
}

.member-header-content .account span {
    display: block;
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    font-size: 4.8vw;
    white-space: nowrap;
    text-overflow: ellipsis
}

.member-header-content .my-id {
    display: inline-flex;
    position: relative;
    align-items: center;
    color: var(--member-menu-my-id-title-txt, #ffffff);
    font-size: 3.2vw;
    line-height: 1.5
}

.member-header-content .my-id span {
    display: inline-block;
    max-width: max-content;
    margin: 0 0 0 2.6666666667vw;
    overflow: hidden;
    transition: all .3s;
    color: var(--member-menu-my-id-txt, #fd1111);
    white-space: nowrap;
    text-overflow: ellipsis
}

.member-header-content .vip-points {
    display: flex;
    position: relative;
    align-items: center;
    max-width: 100%;
    color: var(--member-menu-vip-points-title-txt, #ffffff);
    font-size: 3.2vw
}

.member-header-content .vip-points p {
    display: inline-flex;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 1;
    overflow: hidden
}

.member-header-content .vip-points span {
    display: inline-flex;
    margin: 0 0 0 2.1333333333vw;
    color: var(--member-menu-vip-points-txt, #fd1111);
    flex-shrink: 0
}

.member-header-content .my-vip-btn {
    margin: -1.3333333333vw 0 0 2.6666666667vw;
    padding: 1.6vw 3.2vw;
    font-size: 2.6666666667vw;
    font-weight: 700;
    color: var(--member-menu-my-vip-btn-txt, #ffffff);
    background: var(--member-menu-my-vip-btn-bg, linear-gradient(0deg, #700402 0%, #e31210 100%));
    box-shadow: inset 0 0 .8vw var(--member-menu-my-vip-btn-shadow-inset, transparent);
    border-radius: 1.3333333333vw;
    text-decoration: none;
    max-width: 18.1333333333vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0
}

.member-header-content .user-info+.user-date {
    margin-top: 2.6666666667vw
}

.member-header-content .user-date {
    position: relative;
    display: block;
    opacity: 1;
    transition: opacity .5s;
    z-index: 2;
    width: 100%;
    height: auto;
    padding: 0;
    border-radius: .8vw;
    animation: slide-in-bottom .5s both
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-20px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.member-header-content .user-date .date-wrap {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 100%
}

.member-header-content .user-date .date-wrap .registration,
.member-header-content .user-date .date-wrap .lastlogin {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--member-menu-user-date-bg, #222222);
    border-radius: 1.3333333333vw;
    padding: 1.3333333333vw;
    position: relative;
    width: 50%;
    font-size: 2.9333333333vw
}

.member-header-content .user-date .date-wrap .registration .text,
.member-header-content .user-date .date-wrap .lastlogin .text {
    margin-bottom: 1.3333333333vw;
    color: var(--member-menu-date-infoblock-txt, #ffffff)
}

.member-header-content .user-date .date-wrap .registration p,
.member-header-content .user-date .date-wrap .lastlogin p {
    color: var(--member-menu-user-date-txt, #fd1111)
}

.member-header-content .user-date .date-wrap .lastlogin {
    padding-left: 2.6666666667vw;
    margin-left: 2.6666666667vw
}

@keyframes slide-in-bottom {
    0% {
        transform: translateY(20px);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.member-menu-content {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0 2.6666666667vw
}

.member-menu-content.one-column {
    margin: -13.3333333333vw 0 0
}

.member-menu-content.one-column .member-menu-box .balance {
    height: 13.3333333333vw !important;
    flex-direction: row;
    padding: 4vw 2.6666666667vw
}

.member-menu-content.one-column .member-menu-box .balance .text {
    justify-content: flex-start;
    width: 50%
}

.member-menu-content.one-column .member-menu-box .balance .amount {
    justify-content: flex-end;
    margin-top: 0 !important;
    width: 50%
}

.member-menu-box {
    width: 100%;
    height: auto;
    margin: 0 0 2.6666666667vw;
    border-radius: .8vw;
    background: #222
}

.member-menu-box.balance-box {
    display: flex;
    position: relative;
    flex-direction: row
}

.member-menu-box.balance-box .balance {
    display: inline-flex;
    position: relative;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    height: 18.4vw;
    padding: 2.6666666667vw;
    font-size: 3.2vw
}

.member-menu-box.balance-box .balance.balance-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.member-menu-box.balance-box .balance .text {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fd1111;
    line-height: 4.8vw;
    white-space: nowrap
}

.member-menu-box.balance-box .balance .amount {
    display: inline-flex;
    margin-top: 1.3333333333vw;
    position: relative;
    max-height: 5.8666666667vw;
    overflow: hidden;
    transition: all .3s;
    color: #fff;
    font-size: 4.2666666667vw;
    line-height: 5.8666666667vw;
    white-space: nowrap
}

.member-menu-box.balance-box .balance .amount:before {
    content: attr(data-currency)
}

.member-menu-box.balance-box .balance .amount i {
    display: inline-block;
    position: relative;
    transition: all .1s ease-in;
    color: #fff
}

.member-menu-box.balance-box .balance .amount i:after {
    content: " \274b\274b\274b\274b";
    display: block;
    width: auto;
    font-size: 3.2vw
}

.member-menu-box.balance-box .balance .icon {
    display: inline-block;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    margin-left: .5333333333vw;
    transition: all .3s;
    transform: unset
}

.member-menu-box.balance-box .balance .icon.bonuswallet {
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 85%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 85%
}

.member-menu-box.balance-box .balance .icon.refresh {
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 65%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 65%
}

.member-menu-box.balance-box .balance .icon.refresh.active {
    animation: refresh 1s linear
}

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

.member-menu-box.balance-box .balance .icon.eyes {
    position: relative !important;
    top: 0 !important;
    transform: rotate(0);
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 85%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 85%
}

.member-menu-box.balance-box .balance .icon.eyes.active {
    transform: rotate(180deg) !important;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 85%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 85%
}

.member-menu-box.balance-box .dialog {
    display: flex;
    position: absolute;
    right: -10.4vw;
    bottom: 8vw;
    align-items: center;
    justify-content: center;
    height: 6.9333333333vw;
    padding: 3.2vw 0 3.2vw 2.6666666667vw;
    border-radius: 1.3333333333vw;
    box-shadow: inset -1.6vw -.2666666667vw 2.6666666667vw -2.6666666667vw #fea9a9, inset 0 -.2666666667vw 2.6666666667vw -.5333333333vw #fea9a9, inset 0 -.5333333333vw 2.6666666667vw #fea9a9, 0 .8vw .8vw #0000004d;
    color: #fff;
    background: #fd4444;
    font-size: 3.4666666667vw
}

.member-menu-box.balance-box .dialog .arrow {
    position: relative;
    top: 4.2666666667vw;
    right: 12vw;
    width: 0;
    height: 0;
    border-top: 1.8666666667vw solid #fea9a9;
    border-right: 1.3333333333vw solid transparent;
    border-left: 1.3333333333vw solid transparent
}

.member-menu-box.balance-box .dialog:before {
    content: attr(data-currency);
    margin-right: .8vw;
    font-size: 2.9333333333vw
}

.member-menu-box.balance-box .button.receive-btn {
    width: auto;
    height: auto;
    margin-left: 2.6666666667vw;
    padding: .5333333333vw 2.6666666667vw;
    font-size: 3.2vw;
    line-height: initial
}

.member-menu-box.balance-box .button.receive-btn a {
    padding: .2666666667vw 0 0;
    line-height: initial
}

.member-menu-box.balance-box.active .balance .amount i {
    transform: translateY(-100%)
}

.member-menu-box .title {
    width: 100%;
    padding: 0 2.6666666667vw;
    border-bottom: .2666666667vw solid #7e7e7e;
    line-height: 9.3333333333vw
}

.member-menu-box .title h2 {
    color: #fff;
    font-size: 4vw
}

.member-menu-box .title h2 span {
    display: inline-block;
    vertical-align: middle
}

.member-menu-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    background: #fd1111;
    border-radius: .5333333333vw;
    vertical-align: middle
}

.member-menu-box ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 1.3333333333vw 0
}

.member-menu-box ul.align-center li {
    flex: auto;
    width: 33.3333333333%
}

.member-menu-box ul li {
    position: relative;
    width: 25%;
    padding: 1.8666666667vw 0
}

.member-menu-box ul li a {
    display: block;
    text-decoration: none
}

.member-menu-box ul li a p {
    color: #fff;
    font-size: 3.4666666667vw;
    text-align: center
}

.member-menu-box ul li a span {
    display: block;
    color: #fffc;
    font-size: 2.6666666667vw;
    line-height: 3.7333333333vw;
    text-align: center
}

.member-menu-box ul li a .item-icon {
    display: block;
    width: 9.3333333333vw;
    height: 9.3333333333vw;
    margin: 0 auto 1.3333333333vw;
    border-radius: 9.3333333333vw;
    background: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.member-menu-box ul li a .use-icon-path {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 9.3333333333vw;
    height: 9.3333333333vw
}

.member-menu-box ul li a .use-icon-path:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--member-menu-custom-icon-bg)
}

.member-menu-box ul li a .use-icon-path i {
    position: relative;
    z-index: 1;
    display: block;
    width: 5.6vw;
    height: 5.6vw;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: .8vw;
    background-size: contain
}

.member-menu-box ul li .notice {
    display: block;
    position: absolute;
    top: 45%;
    right: 50%;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: translate(150%, -150%);
    border-radius: 5.3333333333vw;
    background: #f51111;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 5.3333333333vw;
    text-align: center
}

.member-menu-box ul li .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    bottom: -.8vw;
    left: -.8vw;
    transform: rotate(45deg);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #f51111 transparent transparent
}

.member-menu-box ul li .notice-exclamation {
    position: absolute;
    top: 45%;
    right: 50%;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: translate(150%, -150%);
    border-radius: 50%;
    background: #f51111
}

.member-menu-box ul li .icon-exclamation {
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background: #fff
}

.member-menu-service {
    width: 46vw;
    height: auto;
    margin-bottom: 2.6666666667vw;
    padding: 4vw 2.6666666667vw;
    border-radius: .8vw;
    background: #222
}

.member-menu-service a {
    display: block;
    text-decoration: none
}

.member-menu-service a .text {
    display: inline-block;
    width: 26.6666666667vw;
    padding: .5333333333vw 0 0;
    vertical-align: top
}

.member-menu-service a p {
    margin-bottom: .8vw;
    color: #fff;
    font-size: 3.4666666667vw
}

.member-menu-service a span {
    color: #fffc;
    font-size: 3.2vw;
    line-height: 4.8vw
}

.member-menu-point {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto 2.6666666667vw;
    padding: 2.6666666667vw 4.2666666667vw;
    text-align: center
}

.member-menu-point i {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    margin-right: 2.1333333333vw
}

.member-menu-point i .item-icon {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 60%;
    background-size: 100%;
    z-index: 2
}

.member-menu-point p {
    display: block;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: start
}

.member-menu-point p span {
    color: #fd1111
}

.member-menu-logout {
    width: 100%;
    height: auto;
    margin: 0 0 2.6666666667vw;
    border-radius: .8vw;
    background: #222
}

.member-menu-logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.6666666667vw;
    text-decoration: none
}

.member-menu-logout a .item-icon {
    display: inline-block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 0 1.3333333333vw 0 0;
    background-color: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

.member-menu-logout a p {
    display: inline-block;
    color: #fff;
    font-size: 3.4666666667vw;
    text-align: center
}

.amount:before {
    content: attr(data-currency);
    margin-right: .8vw
}

.member-content {
    display: block;
    position: relative;
    width: 100%;
    height: auto
}

.member-content .phone p {
    padding: 0
}

.member-content .button {
    margin: 2.6666666667vw auto
}

.login-info-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 0 2.6666666667vw
}

.login-info-box .member-error-box {
    flex: 1 0 60%;
    padding: 1.3333333333vw 2.6666666667vw 0 0
}

.member-error-box .member-error {
    display: flex;
    flex-flow: row nowrap;
    align-content: flex-start;
    justify-content: space-between;
    margin-bottom: 1.3333333333vw;
    padding: 0
}

.member-error-box .member-error:last-child {
    margin-bottom: 0
}

.member-error-box .member-error span {
    flex: 1 0 60%;
    padding-top: .5333333333vw
}

.member-content p,
.login-biometric-content p {
    padding: 1.3333333333vw 2.6666666667vw 4vw;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2;
    text-align: center
}

.member-content p a,
.login-biometric-content p a {
    color: #fd1111
}

.member-content .signup,
.login-biometric-content .signup {
    font-size: 3.4666666667vw
}

.member-content .signup a,
.login-biometric-content .signup a {
    color: #fd1111
}

.member-content .button,
.login-biometric-content .button {
    width: 94.6666666667vw;
    height: 12vw;
    font-size: 4vw;
    line-height: 12vw
}

.selectbox {
    position: relative;
    width: 100%;
    height: auto
}

.selectbox:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
    border-width: 1.3333333333vw;
    border-style: solid;
    border-color: #fff transparent transparent
}

.selectbox:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 94.6666666667vw;
    height: .2666666667vw;
    background: #7e7e7e
}

.selectbox label {
    position: absolute;
    top: 50%;
    left: 5.3333333333vw;
    transform: translateY(-50%);
    color: #fff;
    font-size: 3.4666666667vw
}

.selectbox select {
    width: 100%;
    height: 13.3333333333vw;
    border: 0;
    outline: none;
    background: #2e2f31;
    color: #fd1111;
    font-size: 3.4666666667vw;
    text-indent: 28.8vw;
    appearance: none
}

.member-error {
    padding: 0 2.6666666667vw;
    color: #f51111;
    font-size: 3.2vw;
    text-align: left
}

.member-error:before {
    content: "!";
    display: inline-block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: 5.3333333333vw;
    background: #f51111;
    color: #000;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4.2666666667vw;
    text-align: center;
    vertical-align: text-top
}

.member-error span {
    display: inline-block;
    width: calc(100% - 40px);
    line-height: 1.2;
    vertical-align: middle
}

.radius {
    margin: 2.6666666667vw
}

.radius div:first-of-type input.input,
.radius div:first-of-type select {
    border-top-left-radius: .8vw;
    border-top-right-radius: .8vw
}

.radius div:last-of-type input.input,
.radius div:last-of-type select {
    border-bottom-left-radius: .8vw;
    border-bottom-right-radius: .8vw
}

.radius div:last-of-type:after {
    display: none
}

.radius>.inputbox-wrapper:not(:first-child):not(:last-child)>div input.input,
.radius>.inputbox-wrapper:not(:first-child):not(:last-child)>div select {
    border-radius: 0vw
}

.radius>.inputbox-wrapper:first-child,
.radius>.inputbox-wrapper:first-child>*,
.radius>.inputbox-wrapper:first-child .selectbox select {
    border-radius: .8vw .8vw 0vw 0vw
}

.radius>.inputbox-wrapper:last-child,
.radius>.inputbox-wrapper:last-child>*,
.radius>.inputbox-wrapper:last-child .selectbox select {
    border-radius: 0vw 0vw .8vw .8vw
}

.radius .inputbox-wrapper {
    background: #242424
}

.radius .inputbox-wrapper .inputbox:after {
    display: none
}

.radius .inputbox-wrapper .member-error {
    padding: 5px
}

.radius .inputbox-wrapper+.inputbox-wrapper {
    position: relative
}

.radius .inputbox-wrapper+.inputbox-wrapper:before {
    content: "";
    position: absolute;
    display: block;
    width: 98%;
    left: 50%;
    transform: translate(-50%);
    top: 0;
    height: 1px;
    background: #7e7e7e;
    z-index: 2
}

.login-biometric-content {
    text-align: center
}

.login-biometric-content .member-error {
    text-align: left
}

.login-biometric-content .button {
    margin: 2.6666666667vw auto
}

.biometric-group {
    display: inline-block;
    margin-top: 8vw;
    text-decoration: none
}

.biometric-group .btn-biometric {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    animation: pop 2.5s linear infinite;
    border-radius: 50%;
    background: #fd1111;
    margin: 0 auto 2.6666666667vw
}

.biometric-group .btn-biometric .item-icon {
    display: block;
    width: 55%;
    height: 55%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.biometric-group .btn-biometric .ripple {
    position: absolute;
    z-index: -1;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    animation: shrink 2.5s linear infinite;
    border-radius: 50%;
    background: #fd1111
}

.biometric-group span {
    display: block;
    color: #fff;
    font-size: 4vw;
    text-align: center
}

.biometric-group.identify {
    position: relative;
    padding: 10px
}

.biometric-group.identify:before,
.biometric-group.identify:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%);
    width: 32vw;
    height: 32vw;
    border: 10px solid transparent;
    border-radius: 100%
}

.biometric-group.identify:before {
    z-index: 100;
    animation: identify 1s linear infinite;
    border-top-color: #fd1111
}

.biometric-group.identify:after {
    border: 10px solid rgba(253, 17, 17, .2)
}

.biometric-group.identify .ripple {
    display: none
}

.biometric-group.identify .btn-biometric {
    margin-bottom: 9.3333333333vw
}

@keyframes pop {
    0% {
        transform: scale(1)
    }
    80% {
        transform: scale(1)
    }
    90% {
        transform: scale(1.05)
    }
    to {
        transform: scale(1)
    }
}

@keyframes shrink {
    0% {
        width: 0;
        height: 0;
        opacity: 0
    }
    80% {
        opacity: .3
    }
    to {
        width: 37.3333333333vw;
        height: 37.3333333333vw;
        opacity: 0
    }
}

@keyframes identify {
    0% {
        transform: rotate(0) translate(-50%);
        transform-origin: 0
    }
    to {
        transform: rotate(360deg) translate(-50%);
        transform-origin: 0
    }
}

.mcd-style .normal-register .banner:before,
.mcd-style.normal-register .banner:before {
    background: transparent
}

.mcd-style .normal-register .banner .banner-v1,
.mcd-style.normal-register .banner .banner-v1 {
    height: auto
}

.mcd-style .normal-register .banner .carousel-wrap .item-drag,
.mcd-style.normal-register .banner .carousel-wrap .item-drag {
    padding-top: 33%
}

.searchpage {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    padding-bottom: 10.6666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    background: #000;
    -webkit-overflow-scrolling: touch;
    transition: right .3s, opacity 0s .3s
}

.searchpage.active {
    right: 0;
    opacity: 1;
    transition: right .3s, opacity 0s 0s
}

.searchpage .button {
    height: 13.3333333333vw;
    border: 0;
    outline: none;
    font-size: 4.2666666667vw;
    line-height: 13.3333333333vw
}

.search-top-info .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    border-right: .2666666667vw solid #7e7e7e;
    text-indent: -2666.4vw;
    z-index: 1
}

.search-top-info .back .item-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: .2666666667vw solid #7e7e7e;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 20%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 20%;
    z-index: 2
}

.search-top-info .icon-search {
    position: absolute;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: auto 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: auto 40%;
    background: #fff
}

.search-top-info input {
    width: 100%;
    height: 13.3333333333vw;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 3.4666666667vw;
    text-indent: 18.6666666667vw;
    border-bottom: .2666666667vw solid #7e7e7e;
    outline: none;
    background: transparent
}

.search-top-info input::placeholder {
    color: #7e7e7e
}

.searchpage-main {
    position: relative;
    padding: 2.6666666667vw
}

.searchpage-main .clear-result {
    position: absolute;
    top: 2.6666666667vw;
    right: 2.6666666667vw;
    color: #fffc;
    font-size: 3.2vw;
    text-decoration: underline
}

.searchpage-main h2 {
    margin-bottom: 2.6666666667vw;
    color: #fffc;
    font-size: 3.2vw
}

.searchpage-main ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 5.3333333333vw;
    overflow: hidden
}

.searchpage-main ul li {
    display: inline-flex;
    width: 32%;
    margin-bottom: 2.1333333333vw;
    margin-right: 2%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.searchpage-main ul li:nth-child(3n) {
    margin-right: 0
}

.searchpage-main input[type=checkbox],
.searchpage-main input[type=radio] {
    display: none
}

.searchpage-main input[type=checkbox]+label,
.searchpage-main input[type=radio]+label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    min-width: 100%;
    height: 9.3333333333vw;
    padding: 0 2.6666666667vw;
    border-radius: .8vw;
    background: #2e2f31;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 9.3333333333vw;
    text-align: center
}

.searchpage-main input[type=checkbox]:checked+label,
.searchpage-main input[type=radio]:checked+label {
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff
}

.searchpage-bar {
    position: fixed;
    z-index: 10;
    right: -50%;
    bottom: 0;
    width: 100%;
    padding: 2.6666666667vw;
    transform: translate(50%);
    transition: right .3s;
    background: #000
}

.searchpage-bar.active {
    right: 50%
}

.date-input input {
    border: 0;
    border-radius: .8vw;
    color: #fff;
    text-align: left;
    outline: none;
    padding: 0 4vw 0 12vw;
    box-sizing: border-box
}

.date-input input::placeholder {
    color: #fff
}

.date-input input::-webkit-calendar-picker-indicator {
    display: none
}

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

.games {
    width: 100%;
    height: auto
}

.games .jackpot {
    position: relative;
    width: 94.6666666667vw;
    height: 24vw;
    margin: 2.6666666667vw auto;
    background-position: center;
    background-size: cover
}

.games .jackpot .text {
    position: absolute;
    top: 50%;
    left: 8vw;
    transform: translateY(-50%);
    text-align: center
}

.games .jackpot h2 {
    margin-bottom: 1.3333333333vw;
    color: #fff;
    font-size: 4vw;
    text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, .5)
}

.games .jackpot span {
    display: block;
    color: #ffef3c;
    font-size: 7.4666666667vw;
    font-weight: 700;
    text-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, .5)
}

.games .games-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2.1333333333vw;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%
}

.games .games-main:has(.portrait) {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    grid-gap: 2.1333333333vw;
    padding: 0 3.2vw
}

.games .games-box {
    position: relative;
    width: 46vw;
    height: auto;
    margin: 0 1.3333333333vw 2.6666666667vw;
    overflow: hidden;
    border-radius: .8vw
}

.games .games-box:has(.portrait) {
    width: 100%;
    margin: 0
}

.games .games-box:has(.portrait) img {
    width: 100%;
    height: 100%;
    border-radius: 1.0666666667vw;
    aspect-ratio: 25/33
}

.games .games-box:has(.portrait) .like {
    top: 3.7333333333vw;
    left: 1.6vw
}

.games .games-box .text {
    display: inline-flex;
    position: relative;
    width: 100%;
    height: auto;
    padding: 2.1333333333vw;
    background: #550b0b;
    line-height: 1.3
}

.games .games-box .text h3 {
    width: 83%;
    overflow: hidden;
    color: #fff;
    font-size: 4vw;
    text-overflow: ellipsis;
    white-space: nowrap
}

.games .games-box .like {
    position: absolute;
    top: 50%;
    right: 2.6666666667vw;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto
}

.games .games-box.new:before {
    content: "NEW";
    display: block;
    position: absolute;
    z-index: 1;
    top: 2.6666666667vw;
    left: 2.6666666667vw;
    padding: 0 1.3333333333vw;
    border-right: .8vw;
    background: #fd1111;
    color: #fff;
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
    text-align: center
}

.games .games-box.portrait {
    width: 29.3333333333vw
}

.games .games-box.portrait .pic img {
    height: 100%;
    object-fit: contain
}

.games .pic {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0
}

.games .pic img {
    width: 100%;
    height: 32vw
}

.games .jackpot-banner-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2.6666666667vw 2.1333333333vw
}

.games .jackpot-banner-wrapper .jackpot-banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1.0666666667vw
}

.games .game-jackpot-number-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: Helvetica Neue
}

.games .game-jackpot-number-group p {
    position: absolute;
    margin: 0;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    transform: translate(-50%, -50%)
}

.games .game-jackpot-number-group p.center-peak-grand {
    top: 70%;
    left: 50%;
    color: #ffe77d;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.center-peak-major {
    top: 76%;
    left: 80%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.center-peak-mini {
    top: 76%;
    left: 20%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.twin-base-grand {
    top: 45%;
    left: 37%;
    color: #ffe77d;
    font-size: 5.8666666667vw
}

.games .game-jackpot-number-group p.twin-base-major {
    top: 77%;
    left: 51%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.twin-base-mini {
    top: 77%;
    left: 22%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.wide-to-narrow-grand {
    top: 27%;
    left: 34%;
    color: #ffe77d;
    font-size: 3.7333333333vw
}

.games .game-jackpot-number-group p.wide-to-narrow-major {
    top: 53%;
    left: 34%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.wide-to-narrow-mini {
    top: 78%;
    left: 34%;
    font-size: 3.2vw
}

.games .game-jackpot-number-group p.left-aligned-grand {
    top: 58%;
    left: 34%;
    font-size: 5.3333333333vw
}

.games .game-jackpot-number-group p.center-aligned-grand {
    top: 65%;
    left: 50%;
    font-size: 6.9333333333vw
}

.games .game-jackpot-number-group p.right-aligned-grand {
    top: 55%;
    left: 66%;
    font-size: 5.3333333333vw
}

.games .prompt {
    margin-bottom: 8vw
}

.header-inner-promotion {
    background: linear-gradient(180deg, #444, #222)
}

.header-inner-promotion .page-main-close {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in;
    position: relative;
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2.6666666667vw;
    z-index: 2
}

.header-inner-promotion .page-main-close:hover {
    opacity: .7
}

.header-inner-promotion .page-main-close:after,
.header-inner-promotion .page-main-close:before {
    content: "";
    display: block;
    height: 80%;
    width: .5vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background: #fff;
    transform-origin: 50% 50%
}

.header-inner-promotion .page-main-close:after {
    transform: translateY(-50%) rotate(-45deg)
}

.header-inner-promotion .page-main-close:before {
    transform: translateY(-50%) rotate(45deg)
}

.header-inner-promotion .page-main-close:before,
.header-inner-promotion .page-main-close:after {
    border-radius: 10vw;
    background: #fff
}

.promotion {
    width: 100%;
    height: auto
}

.promotion .promotion-main {
    padding: 0 2.6666666667vw
}

.promotion .prompt {
    padding: 4vw 0 5.3333333333vw;
    color: #7e7e7e;
    font-size: 3.4666666667vw;
    text-align: center;
    margin-bottom: 8vw
}

.content-style h1 {
    font-size: 8.5333333333vw;
    font-weight: 700
}

.content-style h2 {
    font-size: 6.4vw;
    font-weight: 700
}

.content-style h3 {
    margin-bottom: 1.3333333333vw;
    overflow: hidden;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-style h4 {
    margin-bottom: 2.1333333333vw;
    font-size: 3.7333333333vw;
    font-weight: 700
}

.content-style p {
    min-height: 6.6666666667vw;
    margin: 1.0666666667vw 0;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    word-wrap: break-word
}

.content-style strong {
    font-size: 3.4666666667vw;
    line-height: 1.5;
    word-wrap: break-word;
    font-weight: 700
}

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

.content-style a:not(.button):not(.button a) {
    display: inline-block;
    height: 100%;
    color: #fd1111;
    text-decoration: none;
    padding: 0 1.0666666667vw
}

.content-style ol,
.content-style ul {
    margin: 2.6666666667vw 0
}

.content-style ol li,
.content-style ul li {
    margin: 0 0 1.3333333333vw;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw
}

.content-style ol li {
    margin: 0 0 1.3333333333vw 4vw;
    list-style-type: decimal;
    text-indent: 0
}

.content-style .table {
    width: 100%;
    margin-bottom: 4vw;
    padding: .5333333333vw;
    overflow-x: scroll;
    overflow-y: hidden;
    border: .2666666667vw solid #7e7e7e;
    text-align: left;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.content-style table {
    display: inline-block
}

.content-style table th,
.content-style table td {
    width: 20%;
    padding: 2.1333333333vw;
    border: .2666666667vw solid #7e7e7e;
    font-size: 3.4666666667vw;
    line-height: 4.2666666667vw;
    text-align: center
}

.content-style table th {
    background: #fd1111;
    color: #fff;
    font-weight: 700
}

.content-style .times {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 3.4666666667vw;
    margin-bottom: 3.2vw;
    color: #ffffff80
}

.content-style .times .item-icon {
    display: inline-block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.3333333333vw;
    background: #ffffff80;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 80%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 80%;
    vertical-align: middle;
    flex: 0 0 5.3333333333vw
}

.content-style .game-platform ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 2.6666666667vw
}

.content-style .game-platform li {
    flex: 0 0 23%;
    margin-right: 2%;
    font-weight: 500
}

.content-style .game-platform img {
    width: 100%;
    height: auto
}

.content-style .button {
    width: 100%
}

.content-style .button .toggle {
    display: inline-block;
    position: relative;
    width: 4vw;
    height: 4vw;
    margin-right: .8vw;
    transition: all .3s;
    border-radius: 4vw;
    background: #fff;
    vertical-align: middle
}

.content-style .button .toggle:before,
.content-style .button .toggle:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.1333333333vw;
    height: .4vw;
    transform: translate(-50%, -50%);
    border-radius: .5333333333vw;
    background: #fd1111
}

.content-style .button .toggle:after {
    width: .4vw;
    height: 2.1333333333vw
}

.content-style .button-box {
    display: flex
}

.content-style .button-box .button {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    overflow: hidden
}

.content-style .button-box .button:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    background: transparent;
    width: 100%;
    height: 100%
}

.content-style .button-box .button+.button {
    margin-left: 2.6666666667vw
}

.content-style .button-box .button__apply {
    color: #fff;
    background: linear-gradient(180deg, #444, #222)
}

.content-style .button-box .button__attend {
    color: #fff;
    background: #009600
}

.content-style .button-box .button__request,
.content-style .button-box .button__joined {
    color: #fff;
    background: #666
}

.content-style .tips-block {
    display: block;
    margin: 1.3333333333vw 0
}

.promotion-box {
    position: relative;
    width: 94.6666666667vw;
    height: 68vw;
    margin-bottom: 2.6666666667vw;
    overflow: hidden;
    border-radius: .8vw;
    background: #000;
    color: #7e7e7e
}

.promotion-box.promotion-toggle.active .text-main {
    max-height: 800vw
}

.promotion-box.promotion-toggle.active .text-main h3,
.promotion-box.promotion-toggle.active .text-main p {
    overflow: auto;
    text-overflow: inherit;
    white-space: normal
}

.promotion-box.promotion-toggle.active .button .toggle {
    transform: rotate(225deg)
}

.promotion-box.new:before {
    content: "NEW";
    display: block;
    position: absolute;
    z-index: 2;
    top: 2.6666666667vw;
    left: 2.6666666667vw;
    padding: 0 1.3333333333vw;
    border-right: .8vw;
    background: #fd1111;
    color: #fff;
    font-size: 2.6666666667vw;
    line-height: 4.8vw;
    text-align: center
}

.promotion-box .pic {
    position: relative;
    width: 100%;
    height: 31.4666666667vw
}

.promotion-box .pic img {
    display: block;
    width: 100%;
    height: 100%
}

.promotion-box .pic .item-bg {
    content: "";
    display: block;
    position: absolute;
    bottom: -1.3333333333vw;
    left: 0;
    width: 100%;
    height: 2.6666666667vw;
    background: #000;
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: 100%
}

.promotion-box .cutoff {
    position: absolute;
    right: 2.6666666667vw;
    bottom: 4vw;
    width: auto;
    height: 6.6666666667vw;
    padding: 0 2.6666666667vw;
    border-right: .8vw;
    background: #ffae12;
    color: #fff;
    font-size: 3.2vw;
    line-height: 6.6666666667vw;
    text-align: center
}

.promotion-box .promotion-box-inner {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 2.6666666667vw;
    padding: 3.2vw
}

.promotion-box .promotion-box-inner .text-main {
    display: block;
    width: 100%;
    max-height: 12.8vw;
    overflow: hidden;
    transition: all .6s
}

.promotion-box .promotion-box-inner .text-main span,
.promotion-box .promotion-box-inner .text-main p {
    color: #fffc
}

.button-box {
    display: block;
    overflow: hidden
}

.promo-code-form {
    display: flex;
    gap: 2.1333333333vw;
    margin-bottom: 4.2666666667vw
}

.promo-code-form .input-group {
    height: 8vw;
    width: 100%;
    padding-bottom: 0;
    border-radius: 1.3333333333vw
}

.promo-code-form .input-group .promo-code-add-btn {
    position: absolute;
    text-align: center;
    line-height: 8vw;
    border-radius: 0 3px 3px 0;
    opacity: 1;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    inset: 0 0 0 auto;
    min-width: 12vw;
    height: 8vw;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 1.6vw
}

.promo-code-form .input-group input {
    height: 8vw;
    background: #2e2f31;
    color: #fd1111
}

.promo-code-form .input-group input::placeholder {
    color: #7e7e7e
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.custom-promo-code-form {
    margin-bottom: 3.7333333333vw
}

.custom-promo-code-form .promo-code-title {
    cursor: pointer;
    opacity: 1;
    display: block;
    color: #fff;
    margin-bottom: 2.6666666667vw;
    font-size: 3.7333333333vw;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-title .icon-arrow {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    padding-top: .5333333333vw;
    margin-left: 2.6666666667vw;
    transition: transform .3s;
    background: #fff
}

.custom-promo-code-form .promo-code-title.fold .icon-arrow {
    transform: rotateX(180deg)
}

.custom-promo-code-form .promo-code-title:hover {
    opacity: .7
}

.custom-promo-code-form .input-group {
    height: 13.3333333333vw;
    padding-bottom: 0;
    border-radius: 1.3333333333vw;
    font-size: 3.7333333333vw;
    margin-bottom: 2.6666666667vw;
    transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn {
    cursor: pointer;
    position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 0 3px 3px 0;
    padding: 0 1.3333333333vw;
    opacity: 1;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    inset: 0 0 0 auto;
    min-width: 18.6666666667vw;
    max-width: 37.3333333333vw;
    height: 13.3333333333vw;
    transition: height .3s
}

.custom-promo-code-form .input-group .promo-code-add-btn span {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.custom-promo-code-form .input-group .promo-code-add-btn:hover {
    opacity: .7
}

.custom-promo-code-form .input-group .icon-loader {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    background: #fff;
    animation: spin 2s linear infinite
}

.custom-promo-code-form .input-group input {
    height: 13.3333333333vw;
    padding: 0 3.2vw;
    transition: height .3s;
    font-size: 3.7333333333vw;
    background: #2e2f31;
    color: #fd1111
}

.custom-promo-code-form .input-group input:focus {
    padding: 0 2.9333333333vw;
    border: .2666666667vw solid linear-gradient(0deg, #700402 0%, #e31210 100%)
}

.custom-promo-code-form .input-group input::placeholder {
    font-size: 3.7333333333vw
}

.custom-promo-code-form .input-group.fold,
.custom-promo-code-form .input-group.fold input,
.custom-promo-code-form .input-group.fold .promo-code-add-btn {
    height: 0vw
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn span {
    display: none
}

.custom-promo-code-form .promo-code-msg {
    font-size: 3.7333333333vw;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-msg .icon {
    flex-shrink: 0;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.6vw;
    padding: .5333333333vw;
    display: none
}

.custom-promo-code-form .promo-code-msg.error {
    color: #f51111
}

.custom-promo-code-form .promo-code-msg.error .icon-error {
    display: block;
    background: #f51111
}

.custom-promo-code-form .promo-code-msg.success {
    color: #009600
}

.custom-promo-code-form .promo-code-msg.success .icon-success {
    display: block;
    background: #009600
}

.custom-promo-code-form .icon {
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 90%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 90%
}

.recommend {
    position: relative;
    width: 100%;
    height: auto;
    padding: 3.2vw 0 3.2vw 3.2vw;
    background: #222
}

.recommend .recommend-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 3.2vw 0
}

.recommend .recommend-title h2 {
    display: flex;
    color: #fff;
    font-size: 4vw;
    font-weight: 700
}

.recommend .recommend-title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    background: #fd1111;
    border-radius: .5333333333vw;
    vertical-align: middle
}

.recommend .recommend-bg {
    width: 100%;
    height: auto
}

.recommend .recommend-bg .recommend-main {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.recommend-card {
    display: inline-block;
    position: relative;
    width: 72vw;
    height: 41.3333333333vw;
    margin-right: 3.2vw;
    box-shadow: 0 0 .8vw #000c;
    vertical-align: top;
    overflow: hidden;
    border-radius: 1.3333333333vw;
    background: none;
    line-height: 0
}

.recommend-card:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.recommend-card a {
    display: block;
    text-decoration: none
}

.recommend-card>a {
    height: 100%
}

.recommend-card>a>img {
    width: 100%;
    height: 100%
}

.games .recommend-main {
    display: block
}

.games .recommend-main .games-box {
    display: inline-block;
    margin: 0 3.2vw 0 0;
    line-height: 0;
    vertical-align: top
}

.games .recommend-main .games-box .text {
    line-height: 1.3
}

.games .recommend-main.portrait {
    padding: 0;
    justify-content: normal
}

.games .recommend-main.portrait .games-box {
    margin: 0 8px 0 0
}

.content .aboutus-wrap {
    min-height: 100vh
}

.aboutus-body {
    flex: 1
}

.article-content {
    width: 100%;
    padding: 0 4vw
}

.article-content-title {
    margin: 5.3333333333vw 0 2.6666666667vw;
    color: #fd1111;
    font-size: 4.2666666667vw;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5
}

.article-content i {
    font-weight: 700
}

.article-detail {
    margin-bottom: 5.3333333333vw;
    line-height: 1.5
}

.article-detail-tile {
    color: #fffc;
    font-weight: 700;
    margin-bottom: 1.3333333333vw
}

.article-detail-sub-tile {
    color: #fffc;
    font-size: 3.4666666667vw;
    font-style: italic;
    font-weight: 700
}

.article-detail-content .text {
    width: inherit;
    margin-bottom: 5.3333333333vw;
    color: #fffc;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.article-detail-content .list-number,
.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha,
.article-detail-content .list-dot,
.article-detail-content .list-circle,
.article-detail-content .list-square {
    width: inherit;
    margin-bottom: 5.3333333333vw;
    margin-left: 5.3333333333vw;
    color: #fffc;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.article-detail-content .list-number>li,
.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li,
.article-detail-content .list-dot>li,
.article-detail-content .list-circle>li,
.article-detail-content .list-square>li {
    display: list-item;
    padding-bottom: 1.3333333333vw;
    counter-increment: li
}

.article-detail-content .list-number li {
    list-style: decimal
}

.article-detail-content .list-dot li {
    list-style: disc
}

.article-detail-content .list-circle li {
    list-style: circle
}

.article-detail-content .list-square li {
    list-style: square
}

.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha {
    position: relative;
    counter-reset: count
}

.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    counter-increment: count
}

.article-detail-content .list-number-suffix-parentheses>li>span,
.article-detail-content .list-lower-alpha>li>span {
    flex: 1
}

.article-detail-content .list-number-suffix-parentheses>li:before,
.article-detail-content .list-lower-alpha>li:before {
    display: inline-block;
    margin-right: 1.3333333333vw
}

.article-detail-content .list-number-suffix-parentheses>li:before {
    content: counter(count) ") "
}

.article-detail-content .list-lower-alpha>li:before {
    content: counter(count, lower-alpha) "."
}

.article-detail-content li .list-number,
.article-detail-content li .list-number-suffix-parentheses,
.article-detail-content li .list-lower-alpha,
.article-detail-content li .list-dot,
.article-detail-content li .list-circle {
    margin-bottom: 0
}

.article-detail-content .point {
    display: block;
    margin-left: 4vw
}

.article-detail-content .point:before {
    display: block;
    content: "\25b8";
    margin-right: 2.1333333333vw;
    margin-left: -4vw;
    color: #fd1111
}

.article-detail-content .point-list>li {
    display: block;
    width: 100%
}

.article-detail-content .link {
    display: block;
    color: #fd1111
}

.table {
    margin-bottom: 5.3333333333vw;
    border: #999999;
    border-style: solid;
    border-width: .2666666667vw;
    background: transparent;
    line-height: 1.4;
    font-size: 3.2vw
}

.table-title {
    padding: 0 2.6666666667vw;
    border-bottom: 0;
    color: #fd1111;
    background: #fd1111;
    border: #999999;
    text-align: center;
    vertical-align: middle
}

.table td {
    padding: 1.3333333333vw;
    border: #999999;
    color: #fffc
}

.table tr {
    border-bottom: .2666666667vw solid #999999
}

.txt-center {
    text-align: center
}

.games-empty-container {
    display: inline-block;
    width: 90%;
    height: auto;
    margin-bottom: 5.3333333333vw;
    padding-top: 30px;
    background: #222c;
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;
    word-break: break-all;
    border-radius: .8vw;
    box-shadow: 0 2px 2px 1px #0000001a, 0 4px 4px 1px #0000001a, 0 8px 8px 1px #0000001a, 0 16px 16px 1px #0000001a, 0 32px 32px 1px #0000001a
}

.games-empty-container .bottom-inner {
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.games-empty-container .top-inner {
    width: 100%;
    text-align: center
}

.games-empty-container .top-inner h3,
.games-empty-container .top-inner h4 {
    color: #fff
}

.games-empty-container .top-inner h3 {
    display: inline-block;
    font-size: 18.1333333333vw;
    font-family: Impact, Helvetica, Tahoma, sans-serif;
    vertical-align: middle;
    line-height: normal
}

.games-empty-container .top-inner h4 {
    margin-bottom: 8vw;
    font-size: 4.8vw;
    opacity: .8;
    line-height: 1.8
}

.games-empty-container .top-inner .button {
    display: inline-block;
    width: auto;
    min-width: 50%;
    height: 45px;
    padding: 0 10px;
    line-height: 45px;
    text-decoration: none
}

.content-full-height {
    text-align: center
}

.success-checkmark {
    width: 24vw;
    height: 25.3333333333vw;
    margin: 0 auto;
    overflow: hidden
}

.success-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid #009600;
    border-radius: 50%
}

.success-checkmark .check-icon:before {
    top: .8vw;
    left: -.5333333333vw;
    width: 8vw;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667vw 0 0 26.6666666667vw
}

.success-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

.success-checkmark .check-icon:before,
.success-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667vw;
    transform: rotate(-45deg);
    background: #000
}

.success-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    height: 1.3333333333vw;
    border-radius: .5333333333vw;
    background: #009600
}

.success-checkmark .check-icon .icon-line.line-tip {
    top: 12.2666666667vw;
    left: 3.7333333333vw;
    width: 6.6666666667vw;
    transform: rotate(45deg);
    animation: icon-line-tip .7s
}

.success-checkmark .check-icon .icon-line.line-long {
    top: 10.1333333333vw;
    right: 2.1333333333vw;
    width: 12.5333333333vw;
    transform: rotate(-45deg);
    animation: icon-line-long .7s
}

.success-checkmark .check-icon .icon-circle {
    position: absolute;
    z-index: 10;
    top: -1.0666666667vw;
    left: -1.0666666667vw;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid rgba(0, 150, 0, .5);
    border-radius: 50%
}

.success-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333vw;
    left: 6.9333333333vw;
    width: 1.3333333333vw;
    height: 22.6666666667vw;
    transform: rotate(-45deg);
    background: #000
}

.fail-checkmark {
    width: 24vw;
    height: 25.3333333333vw;
    margin: 0 auto;
    overflow: hidden
}

.fail-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid #f51111;
    border-radius: 50%
}

.fail-checkmark .check-icon:before {
    top: .8vw;
    left: -.5333333333vw;
    width: 8vw;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667vw 0 0 26.6666666667vw
}

.fail-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

.fail-checkmark .check-icon:before,
.fail-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667vw;
    transform: rotate(-45deg);
    background: #000
}

.fail-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 0;
    height: 1.3333333333vw;
    transform-origin: left;
    border-radius: .5333333333vw;
    background: #f51111
}

.fail-checkmark .check-icon .icon-line.line-tip {
    transform: rotate(45deg) translate(-50%);
    animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-line.line-long {
    transform: rotate(-45deg) translate(-50%);
    animation: icon-line .4s .5s forwards
}

.fail-checkmark .check-icon .icon-circle {
    position: absolute;
    z-index: 10;
    top: -1.0666666667vw;
    left: -1.0666666667vw;
    box-sizing: content-box;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 1.0666666667vw solid rgba(245, 17, 17, .5);
    border-radius: 50%
}

.fail-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333vw;
    left: 6.9333333333vw;
    width: 1.3333333333vw;
    height: 22.6666666667vw;
    transform: rotate(-45deg);
    background: #000
}

@keyframes icon-line {
    0% {
        width: 0
    }
    to {
        width: 13.3333333333vw
    }
}

@keyframes icon-line-tip {
    0% {
        top: 5.0666666667vw;
        left: .2666666667vw;
        width: 0
    }
    54% {
        top: 5.0666666667vw;
        left: .2666666667vw;
        width: 0
    }
    70% {
        top: 9.8666666667vw;
        left: -2.1333333333vw;
        width: 13.3333333333vw
    }
    84% {
        top: 12.8vw;
        left: 5.6vw;
        width: 4.5333333333vw
    }
    to {
        top: 12vw;
        left: 3.7333333333vw;
        width: 6.6666666667vw
    }
}

@keyframes icon-line-long {
    0% {
        top: 14.4vw;
        right: 12.2666666667vw;
        width: 0
    }
    65% {
        top: 14.4vw;
        right: 12.2666666667vw;
        width: 0
    }
    84% {
        top: 9.3333333333vw;
        right: 0;
        width: 14.6666666667vw
    }
    to {
        top: 10.1333333333vw;
        right: 2.1333333333vw;
        width: 12.5333333333vw
    }
}

.register-success-wrap,
.register-fail-wrap,
.pop-biometric-success {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 13.3333333333vw 5.3333333333vw;
    transform: translate(-50%, -50%);
    border-radius: 2.6666666667vw;
    background: #000;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 .5333333333vw .5333333333vw .2666666667vw #0000001a, 0 1.0666666667vw 1.0666666667vw .2666666667vw #0000001a, 0 2.1333333333vw 2.1333333333vw .2666666667vw #0000001a, 0 4.2666666667vw 4.2666666667vw .2666666667vw #0000001a, 0 8.5333333333vw 8.5333333333vw .2666666667vw #0000001a;
    font-size: 0;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.register-success-wrap:before,
.register-fail-wrap:before,
.pop-biometric-success:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.register-success-cont,
.register-fail-cont,
.biometric-success-cont {
    display: inline-block;
    width: 98%;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle
}

.register-success-cont .top-inner h3,
.register-fail-cont .top-inner h3,
.biometric-success-cont .top-inner h3 {
    color: #009600;
    font-family: Impact, Helvetica, Tahoma, sans-serif;
    font-size: 13.3333333333vw
}

.register-success-cont .top-inner h4,
.register-fail-cont .top-inner h4,
.biometric-success-cont .top-inner h4 {
    margin-bottom: 2.6666666667vw;
    color: #009600;
    font-size: 4.8vw;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all
}

.register-success-cont .top-inner p,
.register-fail-cont .top-inner p,
.biometric-success-cont .top-inner p {
    max-height: 42.6666666667vw;
    margin-bottom: 3.7333333333vw;
    padding: 1.3333333333vw 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.5;
    word-break: break-word
}

.register-success-cont .top-inner .link,
.register-fail-cont .top-inner .link,
.biometric-success-cont .top-inner .link {
    display: block;
    color: #fd1111;
    text-decoration: underline;
    white-space: nowrap
}

.register-success-cont .btn-default,
.register-success-cont .btn-cancel,
.register-fail-cont .btn-default,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-default,
.biometric-success-cont .btn-cancel {
    display: inline-block;
    width: auto;
    min-width: 40%;
    height: 12vw;
    padding: 0 2.6666666667vw;
    line-height: 12vw;
    text-decoration: none
}

.register-success-cont .btn-secondary,
.register-fail-cont .btn-secondary,
.biometric-success-cont .btn-secondary {
    margin-right: 2.6666666667vw;
    background: linear-gradient(180deg, #444, #222)
}

.register-success-cont .btn-cancel,
.register-fail-cont .btn-cancel,
.biometric-success-cont .btn-cancel {
    background: linear-gradient(180deg, #444, #222)
}

.register-fail-cont .top-inner h3 {
    color: #f51111;
    font-size: 12vw
}

.register-fail-cont .top-inner h4 {
    color: #f51111
}

.register-fail-cont .top-inner>p {
    padding: 0
}

.comfirm-info {
    text-align: left
}

.btn-edit-group,
.register-success-btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%
}

.btn-edit-group .button,
.register-success-btn .button {
    flex: 1 1 auto;
    margin: 0 5px 10px;
    border: 0
}

.launch-game-content {
    position: fixed;
    inset: 0;
    pointer-events: none
}

.launch-game-loading {
    display: none;
    position: fixed;
    z-index: 4;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 53.3333333333vw;
    pointer-events: none
}

.launch-game-loading.select-logo .center-logo-bg {
    background: #fff;
    background: linear-gradient(180deg, #0d2172 0, #0b0c14)
}

.launch-game-loading.select-logo .center-logo-bg .sport-icon-svg {
    background: #fd1111;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat
}

.launch-game-loading.select-slot .center-logo-bg,
.launch-game-loading.select-bn .center-logo-bg {
    background: #fff;
    background: linear-gradient(180deg, #0d2172 0, #0b0c14)
}

.launch-game-loading.select-bn .center-logo-bg .center-logo {
    object-position: 0%
}

.launch-game-loading.select-bn2 .center-logo-bg {
    background: #fff;
    background: linear-gradient(180deg, #0d2172 0, #0b0c14)
}

.launch-game-loading.select-bn2 .center-logo-bg .center-logo {
    object-position: 0%
}

.launch-game-loading.select-mini-game-logo .center-logo-bg {
    background-color: #fff;
    background-image: linear-gradient(180deg, #0d2172 0, #0b0c14)
}

.launch-game-loading.select-mini-game-logo .center-logo-bg .center-logo {
    transform: scale(1.5)
}

.launch-game-loading .center-logo-bg {
    width: 55px;
    height: 55px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px;
    border-radius: 100%;
    background: linear-gradient(180deg, #0d2172 0, #0b0c14);
    overflow: hidden;
    box-shadow: 2px 8px 14px #0003, 0 2px 4px #000, 0 1px 30px #7f7f7f, inset 0 2px 4px #ffffffb3
}

.launch-game-loading .center-logo-bg .center-logo,
.launch-game-loading .center-logo-bg .brand-logo {
    width: 100%;
    height: 100%
}

.launch-game-loading .center-logo-bg .center-logo {
    border-radius: 100%;
    object-fit: cover
}

.launch-game-loading .center-logo-bg .brand-logo {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.launch-game-loading .loader-round {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0
}

.launch-game-loading .loading-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #0000, #000);
    transform: translateY(100%)
}

.launch-game-loading svg {
    max-width: 100%;
    max-height: 100%;
    transform: rotate(-90deg)
}

.launch-game-loading .circle {
    stroke-dasharray: 1680, 1650;
    stroke-dashoffset: 2000;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
    animation-name: circle-loader;
    animation-duration: 1.5s;
    animation-delay: 0s
}

.launch-game-loading #dark {
    animation-name: circle-loader-dark;
    stroke: #ffffff40
}

.launch-game-loading #white {
    animation-name: circle-loader-white;
    animation-delay: .3s;
    stroke: url(#loading-bar-color)
}

.launch-game-loading #loading-bar-color .loading-stop-color {
    stop-color: #bda46a
}

.launch-game-loading #loading-bar-color .loading-end-color {
    stop-color: #977e43
}

@keyframes circle-loader-dark {
    0% {
        stroke-dasharray: 1685, 1574;
        stroke-dashoffset: 2000
    }
    35% {
        stroke-dashoffset: 3310
    }
    35.1% {
        stroke-dashoffset: 3600
    }
    70% {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
    to {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
}

@keyframes circle-loader-white {
    0% {
        stroke-dasharray: 1685, 1660;
        stroke-dashoffset: 2000
    }
    50% {
        stroke-dashoffset: 3310
    }
    50.1% {
        stroke-dashoffset: 3600
    }
    to {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
}

.site-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    z-index: 3;
    pointer-events: all
}

.site-top .menu-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #444, #222);
    opacity: 0;
    z-index: -1
}

.site-top .menu-bg .highlight {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -2px 2.5px #7e7e7e, inset 0 1px 3px #ffffff80
}

.site-top .site-menu {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    z-index: 2
}

.site-top .site-menu .f-logo-bg {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 10px;
    border-radius: 50px;
    background: linear-gradient(180deg, #515151, #000);
    background-size: 100%;
    opacity: 0
}

.site-top .site-menu .f-logo-bg .f-logo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%
}

.site-top .site-menu .f-logo-bg .logo-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%
}

.site-top .site-menu .f-logo-bg .light-ring {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 31px;
    height: 31px;
    opacity: .6;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    mix-blend-mode: overlay
}

.site-top .site-menu .info-wrap {
    position: relative;
    opacity: 0;
    width: 69.3333333333vw;
    height: 100%;
    padding-left: 4.8vw;
    transform: skew(-10deg);
    border-left: .5333333333vw solid rgba(255, 255, 255, .1);
    letter-spacing: normal
}

.site-top .site-menu .info-wrap .info-block {
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    top: 50%;
    height: 100%;
    line-height: 14px;
    transform: skew(10deg) translateY(-35%)
}

.site-top .site-menu .info-wrap .info-block .info-title {
    font-weight: 700;
    color: #fff;
    font-size: 12px
}

.site-top .site-menu .info-wrap .info-block .info-value {
    color: #fff;
    font-size: 12px
}

.site-top .site-menu .info-wrap .info-block .info-value-sub {
    color: #fff;
    padding-left: .8vw;
    opacity: 25%
}

.site-top .site-menu .btn {
    position: relative;
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #0000004d, #0006);
    opacity: 0
}

.site-top .site-menu .btn .btn-home {
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.site-top .site-menu .btn .btn-cross {
    position: relative;
    width: 100%;
    height: 100%
}

.site-top .site-menu .btn .btn-cross:after,
.site-top .site-menu .btn .btn-cross:before {
    content: "";
    display: block;
    height: 40%;
    width: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background: #fff;
    transform-origin: 50% 50%
}

.site-top .site-menu .btn .btn-cross:after {
    transform: translateY(-50%) rotate(-45deg)
}

.site-top .site-menu .btn .btn-cross:before {
    transform: translateY(-50%) rotate(45deg)
}

.site-top .site-menu .btn .btn-deposit {
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 60%
}

.site-top .site-menu .btn .light-ring {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 20px;
    height: 20px;
    opacity: .6;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    mix-blend-mode: overlay
}

.site-top .site-menu.no-deposit {
    flex-flow: row-reverse nowrap
}

.site-top .site-menu.no-deposit .f-logo-bg {
    position: relative;
    width: 21.3333333333vw;
    height: 6.6666666667vw;
    margin: 0 10px;
    border-radius: 0;
    background: linear-gradient(180deg, #474e7800, #474e7800);
    background-size: 100%;
    padding: 1px 0;
    opacity: 0
}

.site-top .site-menu.no-deposit .f-logo-bg .logo-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5))
}

.site-top .site-menu.no-deposit .f-logo-bg .light-ring {
    display: none
}

.site-top .site-menu.no-deposit .btn:nth-child(4) {
    display: none
}

.site-top .top-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    z-index: 1
}

.site-top .top-bg.gradient {
    background: linear-gradient(0deg, #0d217280 2%, #0d2172cc)
}

.launch-game-page {
    display: none;
    pointer-events: auto
}

.launch-game-wrap {
    position: absolute;
    top: 44px;
    left: 0;
    width: 100%;
    height: calc(100% - 44px);
    background: #000;
    transform: translateY(6%);
    opacity: 0;
    z-index: 3
}

.launch-game-wrap.show {
    transform: translate(0);
    opacity: 1
}

.launch-game-wrap .launch-game-iframe {
    position: relative;
    border: none;
    width: 100%;
    height: 100%
}

.site-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform: translateY(100%);
    background: linear-gradient(0deg, #0d217280 2%, #0d2172cc);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.site-bg .effect {
    mix-blend-mode: overlay
}

.site-bg #Gradient .start-color {
    stop-color: #ffffff4d
}

.site-bg #Gradient .end-color {
    stop-color: #fff0
}

.reset-password header {
    border-bottom: .2666666667vw solid #7e7e7e;
    background: #550b0b
}

.reset-password header .logo {
    display: block;
    margin: 0 auto
}

.reset-password .content {
    background-repeat: no-repeat;
    background-position: bottom 0 right 60%
}

.reset-password .content .lock {
    width: 32vw;
    height: auto;
    margin: 5.3333333333vw auto 0
}

.reset-password .content .reset-password-txt {
    width: 94.6666666667vw;
    margin: 2.6666666667vw auto;
    padding: 2.6666666667vw 0
}

.reset-password .content .reset-password-txt p {
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 1.6
}

.reset-password .content .member-error {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 2.6666666667vw;
    color: #fff;
    font-size: 3.2vw
}

.reset-password .content .member-error .icon {
    display: inline-block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: 50%;
    background: #f51111;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 4.5333333333vw;
    text-align: center
}

.reset-password .content .member-error .text {
    width: calc(100% - 21px);
    line-height: 1.3;
    text-align: left
}

.reset-password .content .member-error .text strong {
    display: block;
    color: #ed1f23;
    font-size: 2.9333333333vw;
    font-weight: 700
}

.reset-password .content .member-error .text span {
    display: block
}

.reset-password .content .button {
    position: relative;
    width: 94.6666666667vw;
    height: 12vw;
    margin: 5.3333333333vw auto;
    border: 0;
    border-radius: .8vw;
    background: #fd1111;
    color: #fff;
    font-size: 4vw;
    line-height: 12vw;
    text-align: center
}

.reset-password .tips-info {
    position: relative;
    flex: 1;
    margin: 4vw 0;
    padding: 2.6666666667vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #222;
    text-align: left;
    white-space: normal
}

.reset-password .tips-info .title-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.6666666667vw
}

.reset-password .tips-info h5 {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 92%;
    color: #fff
}

.reset-password .tips-info h5:before {
    content: "!";
    display: inline-block;
    width: 4vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    border-radius: 50%;
    background: #fff;
    color: #222;
    text-align: center
}

.reset-password .tips-info h5 span {
    display: inline-block;
    flex: 1;
    width: calc(100% - 13.3333333333vw);
    vertical-align: text-top
}

.reset-password .tips-info a {
    text-decoration: none
}

.reset-password .tips-info p,
.reset-password .tips-info b {
    display: block;
    padding-bottom: 5px;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2;
    text-align: left
}

.reset-password .tips-info i {
    padding: 0 .8vw;
    color: #fff;
    font-weight: 700
}

.reset-password .tips-info ol,
.reset-password .tips-info ol li {
    list-style: decimal outside
}

.reset-password .tips-info ul,
.reset-password .tips-info ul li {
    list-style: disc outside
}

.reset-password .tips-info ul,
.reset-password .tips-info ol {
    display: block;
    width: 100%;
    padding-left: 4vw;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: left
}

.reset-password .tips-info li {
    display: list-item
}

.iplimit-card-wrap {
    display: inline-block;
    width: 870px;
    height: 500px;
    margin: 70px 0;
    padding: 16px;
    border-radius: 15px;
    background: #222;
    font-size: 0;
    word-wrap: break-word;
    word-break: break-all;
    box-shadow: 0 2px 2px 1px #0000001a, 0 4px 4px 1px #0000001a, 0 8px 8px 1px #0000001a, 0 16px 16px 1px #0000001a, 0 32px 32px 1px #0000001a
}

.iplimit-card-wrap .left-inner,
.iplimit-card-wrap .right-inner {
    width: 50%;
    vertical-align: middle;
    font-size: 3.2vw;
    line-height: 5.3333333333vw
}

.iplimit-card-wrap .left-inner {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.iplimit-card-wrap .right-inner {
    display: inline-block;
    max-width: 100%
}

.iplimit-card-wrap .right-inner h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: #fd1111;
    font-size: 180px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 16px
}

.iplimit-card-wrap .right-inner h4 {
    margin-bottom: 16px;
    color: #fff;
    font-size: 18px;
    word-break: normal;
    line-height: normal
}

.iplimit-card-wrap .right-inner p {
    margin-bottom: 16px;
    color: #7e7e7e;
    font-size: 14px;
    line-height: normal
}

.iplimit-card-wrap .right-inner p span {
    color: #7e7e7e
}

.iplimit-card-wrap .right-inner .btn-box {
    flex-wrap: wrap;
    justify-content: center
}

.iplimit-card-wrap .right-inner .button {
    flex: 1;
    max-width: 100%;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    margin: 8px;
    padding: 0 8px;
    border-radius: 3px
}

.iplimit-card-wrap .right-inner .button a {
    padding: 0
}

.iplimit-card-wrap .server-img.img-1 {
    width: 100%;
    height: 418px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.iplimit-card-wrap .server-img.img-2 {
    width: 100%;
    height: 291px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%
}

.iplimit-card-wrap .server-img.img-3 {
    width: 100%;
    height: 442px;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 80%
}

.iplimit-card-wrap .server-img.img-4 {
    width: 100%;
    height: 442px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.iplimit-card-wrap.sorry .left-inner {
    width: 450px
}

.iplimit-card-wrap.sorry .right-inner {
    width: 360px
}

.iplimit-card-wrap.sorry .right-inner h3 {
    font-size: 80px
}

.iplimit-card-wrap.service .right-inner h3,
.iplimit-card-wrap.system .right-inner h3 {
    font-size: 56px
}

.iplimit-card-wrap.system {
    margin: 0
}

.iplimit-card-wrap.system .left-inner {
    position: relative
}

.iplimit-card-wrap.system .left-inner .logo {
    position: absolute;
    top: -72px;
    left: 0;
    width: 140px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain
}

.iplimit-card-wrap.vn {
    font-family: Helvetica, Tahoma, sans-serif
}

.iplimit-card-wrap.vn .right-inner h3 {
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 40px;
    font-weight: bolder
}

.mobile .iplimit-card-wrap {
    margin: 0
}

.system-maintain-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh
}

.system-maintain-wrap .content.nomainnav {
    padding: 0;
    z-index: 2
}

.system-maintain-wrap .content.nomainnav .container-1200 {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.system-maintain-wrap .iplimit-sys-bg canvas {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

.content.mobile {
    height: 100vh;
    padding-top: 0;
    text-align: center
}

.content.mobile .container-1200 {
    width: 100%;
    height: 100%
}

.content.mobile .container-1200:before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

@media screen and (orientation: portrait) {
    .content.mobile .iplimit-card-wrap {
        width: 90vw;
        height: auto;
        vertical-align: middle
    }
    .content.mobile .iplimit-card-wrap .left-inner {
        width: 100%
    }
    .content.mobile .iplimit-card-wrap .server-img {
        width: 100%;
        height: 0;
        padding-bottom: 62.5%;
        background-size: contain
    }
    .content.mobile .iplimit-card-wrap .server-img.img-2 {
        background-size: 90%
    }
    .content.mobile .iplimit-card-wrap .server-img.img-3 {
        background-position-x: 80%
    }
    .content.mobile .iplimit-card-wrap .right-inner {
        width: auto
    }
    .content.mobile .iplimit-card-wrap .right-inner h3 {
        font-size: 26.6666666667vw
    }
    .content.mobile .iplimit-card-wrap .right-inner h4 {
        margin-bottom: 5%;
        font-size: 4.8vw
    }
    .content.mobile .iplimit-card-wrap .right-inner p {
        margin-bottom: 5%
    }
    .content.mobile .iplimit-card-wrap .right-inner .button {
        min-width: 32vw;
        max-width: 100%;
        height: 11.7333333333vw;
        font-size: 4.2666666667vw;
        line-height: 11.7333333333vw
    }
    .content.mobile .iplimit-card-wrap.service .right-inner h3 {
        font-size: 13.3333333333vw
    }
    .content.mobile .iplimit-card-wrap.sorry .right-inner h3 {
        font-size: 17.3333333333vw
    }
    .content.mobile .iplimit-card-wrap.system .right-inner h3 {
        font-size: 10.6666666667vw
    }
    .content.mobile .iplimit-card-wrap.system .left-inner .logo {
        top: -17.0666666667vw;
        width: 32vw;
        height: 10.6666666667vw
    }
    .content.mobile .iplimit-card-wrap.system .right-inner {
        max-height: 80vw;
        overflow-y: scroll
    }
    .content.mobile .iplimit-card-wrap.vn .right-inner h3 {
        font-size: 10.6666666667vw
    }
}

.player-vip-lv1 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 5.3333333333vw 5.3333333333vw 0
}

.player-vip-lv1 .player-info {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 32vw;
    border-radius: 2.6666666667vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.player-vip-lv1 .player-info .member-pic {
    position: absolute;
    display: block;
    border-radius: 100%;
    top: 16vw;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    background: linear-gradient(180deg, #fff, #dfdfdf);
    box-shadow: 2px 4px 7px #0000003d, 0 1px 2px silver;
    z-index: 1
}

.player-vip-lv1 .player-info .member-pic .item-icon {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: contain
}

.player-vip-lv1 .player-info-vip {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 32vw;
    border-radius: 2.6666666667vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.player-vip-lv1 .player-info-vip .member-pic {
    position: absolute;
    display: block;
    border-radius: 100%;
    top: 16vw;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    background: linear-gradient(180deg, #fff, #dfdfdf);
    box-shadow: 2px 4px 7px #0000003d, 0 1px 2px silver;
    z-index: 1
}

.player-vip-lv1 .player-info-vip .member-pic .item-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-size: contain
}

.player-vip-lv1 .membername-wrap {
    display: block;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 9.3333333333vw 0 5.3333333333vw;
    width: 100%;
    padding: 9.3333333333vw 2.6666666667vw 5.3333333333vw;
    background: #222;
    border-radius: 0 0 1.3333333333vw 1.3333333333vw;
    text-align: center
}

.player-vip-lv1 .membername-wrap .membername-block {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 8vw 0 0
}

.player-vip-lv1 .membername-wrap .membername {
    display: inline-block;
    width: auto;
    font-size: 4.2666666667vw;
    color: #fff;
    margin: 0 1.3333333333vw 2.6666666667vw 0;
    word-break: break-all
}

.player-vip-lv1 .membername-wrap .register-date {
    display: inline-block;
    font-size: 3.2vw;
    color: #7e7e7e;
    margin-top: 2.1333333333vw
}

.player-vip-lv1 .membername-wrap .level {
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 3.2vw;
    padding: 1.3333333333vw;
    margin-left: 1.3333333333vw;
    background: linear-gradient(105deg, #c8c3b2 2%, #80795a);
    border-radius: 4px;
    color: #fff
}

.player-vip-lv1 .tips {
    display: inline-block;
    width: 100%;
    color: #7e7e7e;
    font-size: 3.2vw;
    line-height: 1;
    padding: 2.1333333333vw 0 0
}

.player-vip-lv1.player-vip-lv2 .player-info-vip {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.player-vip-lv1.player-vip-lv2 .player-info-vip .member-pic .item-icon {
    background-repeat: no-repeat
}

.player-vip-lv1.player-vip-lv2 .membername-wrap .level {
    background: linear-gradient(105deg, #c9c9c9 2%, #6f6f6f)
}

.player-vip-lv1.player-vip-lv3 .player-info-vip {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.player-vip-lv1.player-vip-lv3 .player-info-vip .member-pic .item-icon {
    background-repeat: no-repeat
}

.player-vip-lv1.player-vip-lv3 .membername-wrap .level {
    background: linear-gradient(105deg, #f1d266 3%, #c1912b)
}

.player-vip-lv1.player-vip-lv4 .player-info-vip {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.player-vip-lv1.player-vip-lv4 .player-info-vip .member-pic .item-icon {
    background-repeat: no-repeat
}

.player-vip-lv1.player-vip-lv4 .membername-wrap .level {
    background: linear-gradient(105deg, #ced1d6 2%, #a0a9b6)
}

.player-vip-lv1.player-vip-lv5 .player-info-vip {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.player-vip-lv1.player-vip-lv5 .player-info-vip .member-pic .item-icon {
    background-repeat: no-repeat
}

.player-vip-lv1.player-vip-lv5 .membername-wrap .level {
    background: linear-gradient(105deg, #698af2 2%, #3356cd)
}

.player-top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: #222
}

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

.player-top .player-card,
.player-top .credit-card {
    margin: 1.3333333333vw 2.6666666667vw 6.6666666667vw
}

.player-top .item-bg {
    position: absolute;
    z-index: -1;
    inset: 0 0 -1px
}

.player-top.player-deposit {
    position: relative;
    flex-direction: column;
    height: auto;
    background: linear-gradient(180deg, #444, #222)
}

.player-top.player-deposit:before {
    display: none
}

.player-top.player-deposit .item-bg {
    background: #222;
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    -webkit-mask-size: 100%
}

.player-top.player-deposit+.content {
    padding: 0
}

.player-top.player-nav-page {
    background: linear-gradient(180deg, #444, #222);
    flex-wrap: wrap
}

.player-top.player-withdraw {
    position: static;
    position: relative;
    flex-direction: column;
    height: auto;
    background: #222;
    color: #fff
}

.player-top.player-withdraw .item-bg {
    content: "";
    position: absolute;
    inset: 0 0 -1px;
    background: #222;
    mask-repeat: no-repeat;
    mask-position: bottom;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    -webkit-mask-size: 100%
}

.credit-card {
    position: relative;
    box-sizing: border-box;
    width: 92vw;
    min-height: 51.2vw;
    margin: 0 auto 6.6666666667vw;
    padding: 5.3333333333vw 4vw;
    border-radius: 4vw;
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 .5333333333vw .8vw #0000004d;
    font-size: 3.2vw;
    z-index: 0
}

.credit-card .credit-card-bg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: -1;
    border-radius: 4vw
}

.credit-card .credit-card-inner {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 90%;
    height: auto;
    color: #fff;
    padding-bottom: 6.6666666667vw
}

.credit-card .unit-icon {
    position: absolute;
    top: 8vw;
    left: 4.5333333333vw;
    width: 6.6666666667vw;
    margin-right: 1.3333333333vw
}

.credit-card .unit-icon img {
    width: 100%;
    height: auto
}

.credit-card .bank-name {
    margin-left: 8vw;
    padding: 1.0666666667vw 2.6666666667vw
}

.credit-card .bank-name p {
    font-size: 4vw;
    margin-bottom: .8vw;
    line-height: 1.1
}

.credit-card .bank-branch {
    margin-left: 8vw;
    padding: 1.0666666667vw 2.6666666667vw;
    margin-top: .8vw
}

.credit-card .bank-branch p {
    font-size: 2.9333333333vw;
    line-height: 1.1
}

.credit-card .card-number {
    margin-top: 2.1333333333vw;
    font-size: 6.1333333333vw;
    line-height: 1.2;
    padding: 1.0666666667vw 4vw;
    word-break: break-all
}

.credit-card .user-name {
    margin-top: .8vw;
    font-size: 3.2vw;
    line-height: 1.5;
    padding: 1.0666666667vw 4vw
}

.credit-card .bank-info-copy {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: inherit;
    border-radius: 1.0666666667vw;
    transition: all .3s
}

.credit-card .bank-info-copy p {
    word-break: break-all
}

.credit-card .bank-info-copy .item-icon {
    content: "";
    display: inline-block;
    margin-left: 2.1333333333vw;
    width: 15px;
    height: 15px;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    flex: 0 0 15px
}

.credit-card .bank-info-copy.active {
    background: #0003
}

.credit-card .bank-info-copy.active .tips-txt {
    display: block;
    animation: tips-txt-show .3s linear forwards
}

.credit-card .bank-info-copy.hide {
    background: #0003
}

.credit-card .bank-info-copy.hide .tips-txt {
    display: block;
    animation: tips-txt-hide .2s linear forwards
}

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

.credit-card .tips-txt:before {
    content: "";
    position: absolute;
    right: 2.6666666667vw;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: #222222 transparent transparent
}

.credit-card .tips-txt:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(240deg, #3356cd, #86bff4)
}

@keyframes tips-txt-show {
    0% {
        top: -13.3333333333vw;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes tips-txt-hide {
    0% {
        top: 0;
        opacity: 1
    }
    to {
        top: -13.3333333333vw;
        opacity: 0
    }
}

.credit-card .deposit-amount {
    position: absolute;
    bottom: 5.3333333333vw
}

.credit-card .deposit-amount label,
.credit-card .deposit-amount p {
    display: inline-block
}

.credit-card .deposit-amount label {
    margin-right: 2.6666666667vw;
    line-height: 1.8;
    text-align: left
}

.credit-card .deposit-amount p {
    color: #fff;
    font-size: 4.2666666667vw
}

.credit-card .deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    margin: 2.6666666667vw
}

.credit-card .deco img {
    display: block;
    width: 100%
}

.player-deposit-wrap {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.player-deposit-wrap .player-deposit-step1 {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    background: #000
}

.player-deposit-wrap .player-deposit-step1.active {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.player-deposit-wrap .player-deposit-step2 {
    display: block;
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 100%;
    opacity: 0;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: #000;
    transition: top 3s
}

.player-deposit-wrap.active .player-deposit-step1.active {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.player-deposit-wrap.active .player-deposit-step2 {
    position: absolute;
    top: 0;
    height: auto;
    opacity: 1
}

.player-deposit-wrap.active .player-deposit-step2.active {
    position: relative
}

.player-top .tips-info h5 {
    width: 100%;
    margin-bottom: 0;
    align-items: flex-start
}

.player-top .tips-info span {
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2;
    white-space: pre-wrap
}

.player-top .tips-info span i {
    color: #fff;
    font-weight: 400
}

.player-deposit-wrap .tips-info.note,
.withdraw-wallet .tips-info.note {
    margin: 0
}

.player-deposit-wrap .tips-info.note h5:before,
.withdraw-wallet .tips-info.note h5:before {
    display: none
}

.player-deposit-wrap .tips-info.note h5,
.withdraw-wallet .tips-info.note h5 {
    width: 100%;
    margin-bottom: 0;
    align-items: flex-start
}

.player-deposit-wrap .tips-info.note .tips-icon,
.withdraw-wallet .tips-info.note .tips-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background: #fff;
    margin: 0 2.1333333333vw 0 0
}

.player-deposit-wrap .tips-info.note span,
.withdraw-wallet .tips-info.note span {
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2;
    white-space: pre-wrap
}

.player-deposit-wrap .tips-info.note span i,
.withdraw-wallet .tips-info.note span i {
    color: #fff;
    font-weight: 400
}

.menu-box.slideshow {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0
}

.menu-box.slideshow .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4vw;
    margin-bottom: 1.0666666667vw
}

.menu-box.slideshow .title h2 {
    border: 0
}

.menu-box.slideshow .promotion-pick {
    margin: 2.6666666667vw 4vw 0;
    text-align: center
}

.menu-box.slideshow .promotion-pick .item-icon {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.3333333333vw
}

.menu-box.slideshow .promotion-pick p,
.menu-box.slideshow .promotion-pick span {
    display: inline;
    width: 100%;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.2vw
}

.menu-box.slideshow .promotion-pick p+span {
    margin-top: .5333333333vw
}

.menu-box.slideshow .promotion-pick p {
    color: #fffc
}

.menu-box.slideshow .promotion-pick span {
    font-size: 3.2vw;
    color: #fff;
    font-weight: 700
}

.slideshow-btn {
    float: right;
    display: flex;
    width: 32vw;
    height: 6.6666666667vw
}

.slideshow-btn .left-btn,
.slideshow-btn .right-btn {
    display: flex;
    position: relative;
    width: 50%;
    height: 6.6666666667vw;
    justify-content: center;
    align-items: center;
    background: #927f4c;
    box-shadow: inset 0 0 2.6666666667vw #948663
}

.slideshow-btn .left-btn span,
.slideshow-btn .right-btn span {
    display: block;
    position: relative;
    width: 4.2666666667vw;
    height: 2.9333333333vw;
    background: #ffffff4d;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center
}

.slideshow-btn .left-btn.active,
.slideshow-btn .right-btn.active {
    background: #bba36c;
    box-shadow: inset 0 0 1.0666666667vw #d4bd8d
}

.slideshow-btn .left-btn.active span,
.slideshow-btn .right-btn.active span {
    background: #fff
}

.slideshow-btn .left-btn {
    border-radius: 1.3333333333vw 0 0 1.3333333333vw
}

.slideshow-btn .right-btn {
    border-radius: 0 1.3333333333vw 1.3333333333vw 0
}

.slideshow-btn .right-btn span {
    transform: rotate(180deg)
}

.slideshow-cont {
    margin-top: 1.0666666667vw;
    width: calc(70% + 2.6666666667vw);
    margin: auto
}

.slideshow-cont .slideshow-block {
    display: flex;
    justify-content: center
}

.slideshow-cont .slideshow-item {
    position: relative;
    display: flex;
    width: calc(100% - 1.3333333333vw);
    height: 31.2vw;
    border-radius: 1.3333333333vw;
    align-content: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 .2666666667vw 1.0666666667vw #0006
}

.slideshow-cont .slideshow-item:nth-child(2n) {
    margin-left: 1.3333333333vw
}

.slideshow-cont .slideshow-item img {
    height: 100%
}

.slideshow-cont .slideshow-item.active {
    transition: all .3s;
    border: .5333333333vw solid #ffffff;
    background: #222;
    color: #fff
}

.slideshow-cont .slideshow-item.active .item-icon {
    display: block
}

.slideshow-cont .slideshow-item.active .info-cont {
    background: #182647
}

.slideshow-cont .info-cont {
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
    padding: 1.0666666667vw 1.6vw;
    color: #fff;
    background: #182647bf
}

.slideshow-cont .info-cont div+div {
    margin-top: .5333333333vw
}

.slideshow-cont .info-cont .type {
    display: flex;
    width: 100%;
    flex-direction: row;
    font-size: 2.6666666667vw;
    line-height: 1.5;
    justify-content: space-between
}

.slideshow-cont .info-cont .date {
    font-style: italic
}

.slideshow-cont .info-cont .date span+span:before {
    content: "-";
    padding: 0 .8vw
}

.slideshow-cont .info-cont .date i+i:before {
    content: "/"
}

.slideshow-cont .info-cont .title {
    display: block;
    width: 100%;
    font-size: 3.2vw;
    font-weight: 600;
    line-height: 1;
    padding-left: 0;
    padding-right: 0
}

.slideshow-cont .carousel-frame-alpha__pagination {
    margin-top: 1.3333333333vw !important
}

.slideshow-cont .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-top: 1.3333333333vw
}

.slideshow-cont .pagination__bullet {
    display: block;
    background: #ffffff80 !important;
    border-radius: 1.3333333333vw !important;
    overflow: hidden;
    transition: .3s;
    cursor: pointer
}

.slideshow-cont .pagination__bullet--active {
    background: #fff !important
}

.pull-down-wrap {
    display: block
}

.pull-down-wrap .promotion-pick {
    padding: 0 4vw;
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    text-align: center;
    background: #bba36c;
    box-shadow: inset 0 0 1.0666666667vw #d4bd8d;
    align-items: center
}

.pull-down-wrap .promotion-pick .item-icon {
    position: relative;
    top: .8vw;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4.8vw;
    height: 4.8vw;
    margin-right: 1.3333333333vw
}

.pull-down-wrap .promotion-pick p,
.pull-down-wrap .promotion-pick span {
    display: inline-block;
    text-align: left;
    font-size: 4.2666666667vw;
    font-weight: 700;
    color: #fff;
    line-height: 12.8vw
}

.pull-down-wrap .promotion-pick p+span {
    margin-top: .5333333333vw;
    max-width: 50%
}

.pull-down-wrap .promotion-pick p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pull-down-wrap .promotion-pick span {
    font-size: 3.7333333333vw;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pull-down-wrap .pull-down-block {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: hidden
}

.pull-down-wrap .pull-down-item {
    position: relative;
    display: flex;
    width: 100%;
    height: 11.2vw;
    margin: .6666666667vw 0;
    border-radius: 1.3333333333vw;
    align-content: center;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 .2666666667vw 1.0666666667vw #0006;
    transform: translateY(53.3333333333vw);
    animation: effect .65s ease forwards
}

.pull-down-wrap .pull-down-item:nth-child(4n+1) {
    animation-delay: 0s
}

.pull-down-wrap .pull-down-item:nth-child(4n+2) {
    animation-delay: .2s
}

.pull-down-wrap .pull-down-item:nth-child(4n+3) {
    animation-delay: .4s
}

.pull-down-wrap .pull-down-item:nth-child(4n+4) {
    animation-delay: .6s
}

.pull-down-wrap .pull-down-item .item-icon {
    display: none;
    position: absolute;
    z-index: 2;
    right: -.5333333333vw;
    bottom: -.2666666667vw;
    width: 6.4vw;
    height: 5.3333333333vw;
    transition: all .3s;
    opacity: 1;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%
}

.pull-down-wrap .pull-down-item .item-image-wrap {
    display: flex;
    justify-content: center;
    width: 34.9333333333vw;
    min-width: 34.9333333333vw;
    height: 100%
}

.pull-down-wrap .pull-down-item .item-image-wrap img {
    width: auto;
    height: 100%
}

.pull-down-wrap .pull-down-item.active {
    border: .4vw solid #ffffff;
    box-shadow: inset 0 1px 2px #0006;
    background: #222;
    color: #fff
}

.pull-down-wrap .pull-down-item.active .item-icon {
    display: block
}

.pull-down-wrap .pull-down-item.active .info-cont {
    font-size: 3.2vw;
    background: #182647
}

.pull-down-wrap .pull-down-item.active .item-image-wrap img {
    height: calc(100% + .5333333333vw);
    margin-top: calc(0px - .2666666667vw);
    margin-left: calc(0px - .2666666667vw)
}

.pull-down-wrap .pull-down-item.mask:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 99
}

.pull-down-wrap .info-cont {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1.0666666667vw 2.1333333333vw;
    color: #fff;
    background: #182647bf;
    align-items: center;
    justify-content: center
}

.pull-down-wrap .info-cont div+div {
    margin-top: .5333333333vw
}

.pull-down-wrap .info-cont .title {
    display: -webkit-box;
    width: 100%;
    font-size: 2.6666666667vw;
    font-weight: 400;
    line-height: 1;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    text-overflow: clip;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.pull-down-btn {
    display: flex;
    width: 100%;
    height: 8vw;
    margin-top: 1.3333333333vw
}

.pull-down-btn .bottom-btn {
    display: flex;
    position: relative;
    width: 100%;
    height: 6.6666666667vw;
    justify-content: center;
    align-items: center;
    background: #927f4c;
    box-shadow: inset 0 0 1.0666666667vw #948663;
    border-radius: 1.3333333333vw
}

.pull-down-btn .bottom-btn span {
    position: relative;
    display: block;
    color: #fff;
    font-size: 3.2vw
}

@keyframes effect {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

.kyc-verify-mask {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 4;
    background: #2f2f2f66;
    border-radius: .8vw;
    overflow: hidden
}

.kyc-verify-mask .kyc-verify-mask-icon {
    display: block;
    width: 6.4vw;
    height: 6.4vw;
    margin: 0 auto
}

.kyc-verify-mask .kyc-verify-mask-icon:before {
    content: "!";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.4vw;
    height: 6.4vw;
    border-radius: 50%;
    background: #fff;
    color: #2f2f2f66;
    font-size: 6.4vw;
    font-weight: 700;
    line-height: 4.2666666667vw;
    text-align: center
}

.kyc-verify-mask .kyc-verify-mask-message {
    display: block;
    color: #fff;
    text-shadow: 0 0 .5333333333vw rgba(0, 0, 0, .6);
    text-align: center;
    margin-top: 2.1333333333vw
}

.kyc-verify-mask .kyc-verify-mask-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: -1
}

.tab-btn-section,
.tab-btn-wrap {
    width: 100%
}

.tab-btn-page {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 13.3333333333vw;
    transition: all .3s;
    background: #000;
    z-index: 3
}

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

.tab-btn-page .line {
    display: block;
    position: absolute;
    width: 33.3333333333%;
    height: .8vw;
    left: 0;
    bottom: 0;
    background: #fd1111;
    border-radius: .8vw;
    transition: all .3s
}

.tab-btn-page .btn {
    position: relative;
    width: inherit !important;
    padding: 4vw 0;
    text-align: center;
    transition: all .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto
}

.tab-btn-page .btn .text {
    display: inline-block;
    position: relative;
    margin: 0 4vw;
    font-size: 3.7333333333vw;
    font-weight: 700;
    color: #fff;
    text-align: center
}

.tab-btn-page .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2.6666666667vw;
    padding: .2666666667vw 1.3333333333vw;
    transform: translate(90%, -100%);
    color: #e41a43;
    background: #f51111;
    border-radius: 2.6666666667vw
}

.tab-btn-page .btn.active .text,
.tab-btn-page .btn[data-tab-current=current] .text {
    color: #fd1111
}

.tab-btn-page .btn[data-tab-current=current]:after {
    display: block
}

.tab-btn-page:first-child:before {
    opacity: 0
}

.player-nav-page .tab-btn-page {
    background: transparent
}

.tab-btn-wrap {
    position: relative;
    padding: 2.1333333333vw 4vw 3.2vw;
    background: #000
}

.tab-btn-wrap:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 13.3333333333vw;
    transform: translateY(-100%);
    z-index: 0;
    background: #000;
    pointer-events: none
}

.tab-btn-bar {
    display: flex;
    position: relative;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8vw;
    transition: all .3s;
    color: #fff
}

.tab-btn-bar:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 80%;
    transform: translateY(-50%);
    border-radius: .8vw;
    background: #2e2f31
}

.tab-btn-bar .line {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transition: all .3s;
    border-radius: .8vw;
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 0 .5333333333vw .2666666667vw #15151780
}

.tab-btn-bar .btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 1.3333333333vw;
    transition: all .3s;
    text-align: center
}

.tab-btn-bar .btn .icon+.text {
    margin-left: 1.3333333333vw
}

.tab-btn-bar .btn .text {
    display: inline-block;
    position: relative;
    padding: 1.6vw 0;
    font-size: 3.4666666667vw;
    font-weight: 700;
    text-align: center
}

.tab-btn-bar .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.3333333333vw;
    transform: translate(90%, -100%);
    color: #e41a43;
    background: #f51111;
    border-radius: 2.6666666667vw;
    font-size: 2.6666666667vw
}

.tab-btn-bar .btn[data-tab-current=current]:after {
    display: block
}

.tab-content-page {
    display: block;
    width: 100%;
    overflow: hidden
}

.tab-content-page.disable .deposit-wallet .button {
    background: linear-gradient(180deg, #444, #222)
}

.tab-content-page.disable .deposit-wallet .button a {
    color: #999
}

.tab-content-page.disable .deposit-wallet .button a:before {
    display: inline-block
}

.tab-content-page.disable .withdraw-wallet .button {
    background: linear-gradient(180deg, #444, #222);
    pointer-events: none
}

.tab-content-page.disable .withdraw-wallet .button a {
    color: #999
}

.tab-content-page.disable .withdraw-wallet .verify-tips {
    display: block
}

.tab-content-page.disable .withdraw-wallet .accordion-wrap.error {
    width: 95%;
    margin: 1.3333333333vw auto
}

.tab-content-page.disable .withdraw-wallet .button a:before {
    display: inline-block
}

.deposit-wallet .button {
    position: relative
}

.deposit-wallet .button a:before {
    content: "!";
    display: none;
    position: absolute;
    top: -1.3333333333vw;
    right: -.5333333333vw;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    border: .2666666667vw solid #ffffff;
    border-radius: 5.8666666667vw;
    background: #f51111;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700;
    line-height: 5.8666666667vw;
    text-align: text-bottom
}

.withdraw-wallet .verify-tips,
.withdraw-wallet .close-tips {
    display: none
}

.withdraw-wallet .button {
    position: relative
}

.withdraw-wallet .button a:before {
    content: "!";
    display: none;
    position: absolute;
    top: -1.3333333333vw;
    right: -.5333333333vw;
    width: 5.8666666667vw;
    height: 5.8666666667vw;
    border: .2666666667vw solid #ffffff;
    border-radius: 5.8666666667vw;
    background: #f51111;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700;
    line-height: 5.8666666667vw;
    text-align: text-bottom
}

.tips-info {
    position: relative;
    flex: 1;
    margin: 4vw;
    padding: 2.6666666667vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #222;
    text-align: left;
    white-space: normal
}

.tips-info .title-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 2.1333333333vw;
    padding-bottom: 2.6666666667vw
}

.tips-info .title-box span {
    color: #fff
}

.tips-info h5 {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2.1333333333vw
}

.tips-info h5 .tips-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff
}

.tips-info h5 span {
    display: inline-block;
    flex: 1;
    width: calc(100% - 50px);
    vertical-align: text-top;
    color: #fff
}

.tips-info a {
    text-decoration: none
}

.tips-info p,
.tips-info b {
    display: block;
    padding-bottom: 5px;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2;
    text-align: left
}

.tips-info i {
    padding: 0 .8vw;
    color: #fff;
    font-weight: 700
}

.tips-info ol,
.tips-info ol li {
    list-style: decimal outside
}

.tips-info ul,
.tips-info ul li {
    list-style: disc outside
}

.tips-info ul,
.tips-info ol {
    display: block;
    width: 100%;
    padding-left: 4vw;
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: left
}

.tips-info li {
    display: list-item
}

.tips-info .toggle-btn {
    width: 3.2vw;
    height: 3.2vw;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background: #fff;
    transition: .3s;
    transform: rotate(90deg);
    margin-left: 2.1333333333vw;
    cursor: pointer
}

.tips-info .toggle-btn.active {
    transform: rotate(270deg)
}

.tips-info .tips-info-block {
    display: none;
    transition: .5s
}

.tips-info .tips-info-block.active {
    display: block;
    transition: .5s
}

.close-tips {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.verify-tips ul,
.verify-tips ol {
    padding-left: 0;
    list-style: none
}

.verify-tips ul>li,
.verify-tips ol>li {
    list-style: none
}

.verify-tips ol>li:last-child {
    margin-bottom: 0
}

.verify-tips ol {
    padding-top: 2.6666666667vw;
    border-top: .2666666667vw dotted #7e7e7e
}

.verify-tips a {
    display: block;
    width: 100%
}

.verify-tips label {
    display: block;
    margin-bottom: .8vw;
    font-size: 3.4666666667vw;
    font-weight: 700
}

.verify-tips label:before {
    content: "";
    display: inline-block;
    width: .8vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: .8vw;
    background: #fff;
    vertical-align: sub
}

.verify-tips p {
    display: block
}

.verify-tips h5 {
    margin-bottom: 0
}

.personal-info,
.contact-info,
.document-info,
.info-supporting {
    position: relative;
    padding: 1.3333333333vw
}

.personal-info.active:before,
.contact-info.active:before,
.document-info.active:before,
.info-supporting.active:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: Flashing .1s linear forwards;
    border-radius: 1.3333333333vw;
    background: #fff3
}

.personal-info.hide:before,
.contact-info.hide:before,
.document-info.hide:before,
.info-supporting.hide:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.3333333333vw;
    background: #fff3
}

.personal-info ul,
.contact-info ul,
.document-info ul,
.info-supporting ul {
    padding-left: 2.1333333333vw
}

.personal-info li,
.contact-info li,
.document-info li,
.info-supporting li {
    display: inline-block;
    margin: 0 1.3333333333vw 1.3333333333vw 0;
    padding: 1.0666666667vw 2.6666666667vw;
    border-radius: 5.3333333333vw;
    color: #000;
    vertical-align: middle
}

.personal-info label {
    color: #70b267
}

.personal-info label:before {
    background: #70b267
}

.personal-info li {
    background: #70b26726;
    color: #70b267
}

.contact-info label {
    color: #409fff
}

.contact-info label:before {
    background: #409fff
}

.contact-info li {
    background: #409fff26;
    color: #409fff
}

.document-info label {
    color: #ff777c
}

.document-info label:before {
    background: #ff777c
}

.document-info li {
    background: #ff777c26;
    color: #ff777c
}

.info-choose-one label {
    color: #ef67ab
}

.info-choose-one label:before {
    background: #ef67ab
}

.info-choose-one li {
    background: transparent;
    border: .2666666667vw solid #ef67ab;
    color: #ef67ab
}

.info-supporting label {
    color: #d8a845
}

.info-supporting label:before {
    background: #d8a845
}

.info-supporting li {
    background: transparent;
    border: .2666666667vw solid #d8a845;
    color: #d8a845
}

.tab-content .inner-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: all .3s
}

.tab-content .inner-wrap .inner-box {
    display: block;
    position: relative;
    width: 100%;
    flex-shrink: 0
}

.tab-content-wrap .tab-btn-page {
    padding: 0 1.3333333333vw;
    background: transparent
}

.tab-content-wrap .line {
    display: none
}

.tab-content-wrap .btn .text {
    border-radius: 1.3333333333vw;
    padding: 2.1333333333vw 1.3333333333vw;
    background: #222;
    width: 100%;
    margin: 1.3333333333vw
}

.tab-content-wrap .btn[data-tab-current=current] .text {
    color: #fff;
    background: #fd1111
}

.list-loading {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    height: 80vw;
    margin: auto;
    z-index: 1;
    transition: height .3s ease
}

.list-loading:before,
.list-loading:after {
    content: "";
    display: block;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    mix-blend-mode: difference
}

.list-loading:before {
    background: #fd4444;
    animation: slide-right-left 1s linear infinite
}

.list-loading:after {
    background: #fd1111;
    animation: slide-left-right 1s linear infinite
}

@keyframes slide-right-left {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translate(50%) scale(1.3)
    }
    40%,
    50% {
        transform: translate(100%)
    }
    60% {
        transform: translate(50%) scale(.75)
    }
    90%,
    to {
        transform: translate(0)
    }
}

@keyframes slide-left-right {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translate(-50%) scale(.75)
    }
    40%,
    50% {
        transform: translate(-100%)
    }
    60% {
        transform: translate(-50%) scale(1.3)
    }
    90%,
    to {
        transform: translate(0)
    }
}

.accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2.6666666667vw 0;
    overflow: hidden;
    border: .2666666667vw solid #fd1111;
    border-radius: 1.0666666667vw;
    background: #222
}

.accordion-wrap.show .a-content {
    height: -moz-fit-content;
    height: fit-content;
    max-height: 300px;
    opacity: 1
}

.accordion-wrap.show .a-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-wrap .a-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .8vw 2.6666666667vw;
    background: #fd1111;
    color: #fff;
    font-size: 2.9333333333vw;
    text-align: left
}

.accordion-wrap .a-title .a-text {
    flex-grow: 1
}

.accordion-wrap .a-title .a-icon {
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%
}

.accordion-wrap .a-title .a-arrow {
    display: none;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: all .3s
}

.accordion-wrap .a-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    color: #fff;
    opacity: 0
}

.accordion-wrap .a-content ol.a-list {
    padding: 1.3333333333vw 2.6666666667vw 1.3333333333vw 6.6666666667vw
}

.accordion-wrap .a-content .a-list {
    padding: 1.3333333333vw 2.6666666667vw;
    list-style: auto
}

.accordion-wrap .a-content .a-item {
    padding: .5333333333vw 0;
    font-size: 2.6666666667vw;
    line-height: 1.3;
    word-break: break-all
}

.accordion-wrap.error {
    margin: 1.3333333333vw 0;
    border: .2666666667vw solid #f51111;
    background: #222
}

.accordion-wrap.error .a-title {
    background: #f51111;
    color: #222
}

.accordion-wrap.error .a-title .a-icon,
.accordion-wrap.error .a-title .a-arrow {
    background: #222
}

.accordion-wrap.error .a-content {
    color: #f51111
}

.accordion-wrap .toggle-btn .a-arrow {
    display: block
}

.upload-wrap .upload-area {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vw;
    border: .2666666667vw dashed #7e7e7e;
    border-radius: 1.0666666667vw;
    background: #222
}

.upload-wrap .upload-area.active .delete-btn {
    display: block
}

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

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

.upload-wrap .area-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1.0666666667vw;
    background: #00000080
}

.upload-wrap .area-mask .m-icon {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    margin: 2.6666666667vw;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100%
}

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

.upload-wrap .area-mask .m-btn {
    margin-top: 1.8666666667vw;
    padding: 1.3333333333vw 4.5333333333vw;
    border-radius: 1.0666666667vw;
    background: #fd1111;
    color: #fff;
    font-size: 3.2vw
}

.upload-wrap .delete-btn {
    display: none;
    z-index: 4;
    transition: all .3s
}

.upload-wrap+.upload-wrap {
    padding-top: 2.6666666667vw
}

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

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

.area-inner .u-icon {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    pointer-events: none;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.area-inner .u-text {
    color: #fd1111;
    font-size: 3.7333333333vw
}

.area-inner .upload-img {
    height: 100%
}

.upload-wrap .upload-area.loading .m-icon {
    animation: loading 2s linear infinite;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

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

.upload-wrap .upload-area.pending .m-text {
    color: #fff
}

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

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

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

.upload-wrap .upload-area.success .m-text {
    color: #fff
}

.content.player-content {
    padding-bottom: 13.3333333333vw;
    margin-bottom: 13.3333333333vw
}

.content.player-content:has(mcd-vip-detail-iframe) {
    padding-bottom: 0;
    margin-bottom: 0
}

.content.player-full-content {
    padding-top: 0;
    padding-bottom: 13.3333333333vw;
    margin-bottom: 13.3333333333vw
}

.ticket-wrap {
    display: block;
    padding: 2.6666666667vw;
    width: inherit
}

.ticket {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    padding: 1.3333333333vw;
    color: #fff;
    background: #7c99e4
}

.ticket+.ticket {
    margin-top: 2.6666666667vw
}

.ticket.completed {
    background: #2e2f31
}

.ticket.completed .ticket-deco .line {
    background: radial-gradient(circle, #2e2f31 48%, #fff0 0%);
    background-position: -5px;
    background-size: 5.0666666667vw 5.0666666667vw;
    background-repeat: repeat-y
}

.ticket.completed .ticket-deco:before,
.ticket.completed .ticket-deco:after {
    background: #2e2f31
}

.ticket.completed .ticket-inner {
    background: #222
}

.ticket.completed .ticket-inner:before,
.ticket.completed .ticket-inner:after {
    background: #2e2f31
}

.ticket.completed .ticket-inner-left {
    border-color: #2e2f31
}

.ticket.completed .ticket-inner-left>div+div {
    margin-top: 1.3333333333vw
}

.ticket.completed .ticket-inner-right:after {
    background: linear-gradient(to bottom, #2e2f31 60%, #fff0 0%);
    background-position: left;
    background-size: .2666666667vw 2.6666666667vw;
    background-repeat: repeat-y
}

.ticket.completed .ticket-inner-right .text {
    color: #009600;
    line-height: 2
}

.ticket.completed .ticket-inner-right .text .item-icon {
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.ticket .ticket-deco {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden
}

.ticket .ticket-deco .line {
    position: absolute;
    left: 0;
    width: 5.0666666667vw;
    height: 100%;
    background: radial-gradient(circle, #7c99e4 48%, #fff0 0%);
    background-position: -1.3333333333vw;
    background-size: 5.0666666667vw 5.0666666667vw;
    background-repeat: repeat-y
}

.ticket .ticket-deco .line+.line {
    position: absolute;
    left: auto;
    right: 0;
    background-position: 1.3333333333vw
}

.ticket .ticket-deco:before,
.ticket .ticket-deco:after {
    content: "";
    position: absolute;
    left: 75%;
    transform: translate(-63%);
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    border-radius: 50%;
    background: #7c99e4
}

.ticket .ticket-deco:before {
    top: -.5333333333vw
}

.ticket .ticket-deco:after {
    bottom: -.5333333333vw
}

.ticket .ticket-inner {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: row;
    width: 100%;
    background: #262626;
    border-radius: 1.0666666667vw
}

.ticket .ticket-inner-left {
    position: relative;
    width: 75%;
    padding: 2.6666666667vw 2.6666666667vw 2.6666666667vw 4vw;
    border-right-width: .2666666667vw
}

.ticket .ticket-inner-left>div+div {
    margin-top: 1.3333333333vw
}

.ticket .ticket-inner-right {
    width: 25%;
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative
}

.ticket .ticket-inner-right:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background: linear-gradient(to bottom, #7c99e4 60%, #fff0 0%);
    background-position: left;
    background-size: .2666666667vw 2.6666666667vw;
    background-repeat: repeat-y
}

.ticket .ticket-inner-right .text {
    font-size: 3.4666666667vw;
    line-height: 1.5;
    margin: auto 1.0666666667vw;
    text-align: center;
    color: #7c99e4;
    z-index: 2;
    width: 100%;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word
}

.ticket .title {
    position: relative;
    font-size: 3.7333333333vw;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ticket .title:before {
    content: "";
    display: inline-block;
    margin-right: 1.0666666667vw;
    width: 1.0666666667vw;
    height: 4.8vw;
    border-radius: 1.0666666667vw;
    background: #fd1111;
    vertical-align: sub
}

.ticket .detail {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row
}

.ticket .detail .date {
    font-size: 2.6666666667vw;
    color: #7e7e7e;
    margin: auto 0
}

.ticket .detail .detail-btn {
    display: flex;
    padding: .5333333333vw 1.0666666667vw;
    border: .2666666667vw solid #fd1111;
    border-radius: .8vw;
    margin: auto 1.3333333333vw
}

.ticket .detail .detail-btn a {
    text-decoration: none;
    font-size: 2.6666666667vw;
    color: #fd1111
}

.ticket .discount {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    color: #fd1111
}

.ticket .discount .currency {
    margin: auto 0;
    font-size: 3.7333333333vw
}

.ticket .discount .amount {
    font-size: 5.8666666667vw;
    font-weight: 700
}

.content-style .form-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    margin: 0 0 2.6666666667vw;
    overflow-x: scroll;
    border: .2666666667vw solid #7e7e7e;
    background: #222;
    -webkit-overflow-scrolling: touch
}

.content-style .form-wrap .arrow {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-radius: 50%;
    background: #fd1111;
    opacity: .8;
    animation: table-arrow .5s infinite alternate
}

.content-style .form-wrap .arrow .item-icon {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.content-style .form-wrap .form-wrap-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start
}

.content-style .form-wrap .form-wrap-col div {
    display: flex;
    padding: 2.6666666667vw 2.1333333333vw;
    border: .2666666667vw solid #7e7e7e;
    color: #fff;
    font-size: 3.2vw;
    white-space: nowrap
}

.playerform-content .button {
    width: 94.6666666667vw;
    height: 12vw;
    margin: 4vw auto 5.3333333333vw;
    font-size: 4vw;
    line-height: 12vw
}

.playerform-content .verify-tips {
    margin-bottom: 4vw
}

.playerform-content .verify-tips.tips-info-toggle ul,
.playerform-content .verify-tips.tips-info-toggle ol {
    padding-left: 0;
    list-style: none
}

.playerform-content .verify-tips.tips-info-toggle ul>li,
.playerform-content .verify-tips.tips-info-toggle ol>li {
    list-style: none;
    font-size: 3.2vw;
    padding: 1.0666666667vw 2.6666666667vw
}

.playerform-content .verify-tips.tips-info-toggle ol>li:last-child {
    margin-bottom: 0
}

.playerform-content .verify-tips.tips-info-toggle ol {
    padding-top: 10px;
    border-top: .2666666667vw dotted #7e7e7e
}

.playerform-content .verify-tips.tips-info-toggle a {
    display: block;
    width: 100%
}

.playerform-content .verify-tips.tips-info-toggle p {
    display: block
}

.playerform-content .verify-tips.tips-info-toggle h5 {
    margin-bottom: 0;
    align-items: flex-start
}

.playerform-content .verify-tips.tips-info-toggle h5:before {
    display: none
}

.playerform-content .verify-tips.tips-info-toggle h5 .tips-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background: #fff;
    margin: .8vw 2.1333333333vw 0 0
}

.playerform-content .verify-tips.tips-info-toggle h5 span i {
    color: #ffd268;
    font-weight: 400
}

.playerform-content .verify-tips.tips-info-toggle .tips-info-block {
    display: none;
    transition: .5s
}

.playerform-content .verify-tips.tips-info-toggle .tips-info-block.active {
    display: block;
    transition: .5s
}

.playerform-content .verify-tips.tips-info-toggle .title-box {
    padding: 1.0666666667vw 2.1333333333vw 3.2vw
}

.playerform-content .verify-tips.tips-info-toggle .toggle-btn {
    width: 3.2vw;
    height: 3.2vw;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background: #fff;
    transition: .3s;
    transform: rotate(90deg);
    margin-left: 2.1333333333vw
}

.playerform-content .verify-tips.tips-info-toggle .toggle-btn.active {
    transform: rotate(270deg)
}

.playerform-content .option-group.error label,
.playerform-content .input-group.error label {
    color: #f51111
}

.playerform-content .option-group.error label:before,
.playerform-content .input-group.error label:before {
    content: "";
    display: inline-block;
    width: 1.3333333333vw;
    height: 1.3333333333vw;
    margin-right: .8vw;
    border-radius: 50%;
    background: #f51111;
    vertical-align: super
}

.playerform-content .option-group.error select,
.playerform-content .option-group.error input,
.playerform-content .option-group.error textarea,
.playerform-content .input-group.error select,
.playerform-content .input-group.error input,
.playerform-content .input-group.error textarea {
    border: 1px solid #f51111;
    background: #f511111a
}

.deposit-bank-wrap {
    font-size: 3.2vw
}

.menu-box {
    position: relative;
    width: calc(100% - 5.3333333333vw);
    height: auto;
    margin: 2.6666666667vw;
    padding: 2.6666666667vw;
    background: #222;
    border-radius: .8vw
}

.menu-box+.menu-box {
    margin-top: 0
}

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

.menu-box .title h2 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding-left: 2.6666666667vw;
    border-bottom: .2666666667vw solid #7e7e7e;
    color: #fff;
    font-size: 4vw
}

.menu-box .title h2 span {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    line-height: normal;
    margin: 2.1333333333vw 0;
    word-wrap: break-word;
    word-break: keep-all;
    white-space: normal
}

.menu-box .title h2 .amount-range {
    display: flex;
    color: #7e7e7e;
    font-size: 2.6666666667vw;
    white-space: nowrap
}

.menu-box .title h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: .5333333333vw;
    background: #fd1111;
    vertical-align: middle
}

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

.menu-box label {
    color: #fff
}

.withdraw-menu-phone ul {
    margin-bottom: 2.6666666667vw
}

.withdraw-menu-phone p {
    font-size: 5.3333333333vw
}

.withdraw-menu-phone .select-card .select-card-inner .card-number {
    font-size: 5.3333333333vw;
    line-height: 1.5
}

.withdraw-menu-mail ul {
    margin-bottom: 2.6666666667vw
}

.withdraw-menu-mail p {
    font-size: 4.2666666667vw
}

.withdraw-menu-mail .select-card .select-card-inner .card-number {
    font-size: 4.2666666667vw;
    line-height: 2
}

.box-row {
    display: flex;
    flex-direction: row
}

.box-row>div {
    width: 50%
}

.box-row>div+div {
    margin-left: 2.6666666667vw
}

.option-group {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 2.6666666667vw
}

.option-group .option-wrap {
    position: relative;
    width: 100%;
    border-radius: .8vw
}

.option-group .option-wrap:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 2.6666666667vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #fff transparent transparent
}

.option-group label {
    position: relative;
    color: #fff;
    font-size: 3.2vw;
    line-height: 2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.option-group select {
    box-sizing: border-box;
    width: 100%;
    height: var(--input-height, 10.6666666667vw);
    padding: 0 8vw 0 2.6666666667vw;
    border: 0;
    border-radius: .8vw;
    outline: none;
    background: #2e2f31;
    color: #fd1111;
    font-size: 3.2vw;
    font-weight: 300;
    appearance: none
}

.option-group select option {
    color: #fff;
    font-size: 3.2vw
}

.option-group select:disabled {
    border-bottom: .2666666667vw solid #7e7e7e;
    border-radius: 0;
    background: none
}

.option-group .member-error {
    width: 100%;
    margin: .8vw 0 0;
    padding: 1.3333333333vw 0
}

.option-group .member-error span {
    color: #f51111
}

.select-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0 2.6666666667vw;
    background: #fd1111;
    color: #fff
}

.select-bar .option-wrap {
    width: 70%;
    background: transparent
}

.select-bar label {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 40%;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.select-bar .item-icon {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 4.8vw;
    height: 4.8vw;
    margin-right: 1.3333333333vw
}

.select-bar select {
    display: block;
    width: 100%;
    overflow: hidden;
    background: transparent;
    text-align-last: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.2vw;
    color: #fff
}

.select-bar select option {
    background: #2e2f31;
    color: #fd1111
}

.select-group {
    position: relative;
    padding: 2.6666666667vw 0;
    background: #222
}

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

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

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

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

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

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

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

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

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

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

.select-group .bank {
    margin-bottom: 1.3333333333vw
}

.select-group .bank img {
    display: block;
    width: auto;
    height: 6.6666666667vw
}

.select-group.checkbox-style [type=checkbox]+label,
.select-group.checkbox-style [type=radio]+label {
    padding: 1.3333333333vw 2.6666666667vw
}

.select-group.checkbox-style [type=checkbox]+label span,
.select-group.checkbox-style [type=radio]+label span {
    line-height: 1.5
}

.select-group.checkbox-style [type=checkbox]:checked+label,
.select-group.checkbox-style [type=radio]:checked+label {
    transition: all .3s;
    border: .2666666667vw solid #fd1111;
    background: #222;
    color: #fd1111
}

.select-group.checkbox-style [type=checkbox]:checked+label .line-super,
.select-group.checkbox-style [type=checkbox]:checked+label .line-express,
.select-group.checkbox-style [type=radio]:checked+label .line-super,
.select-group.checkbox-style [type=radio]:checked+label .line-express {
    visibility: hidden
}

.select-group.checkbox-style [type=checkbox]:checked+label .item-icon,
.select-group.checkbox-style [type=radio]:checked+label .item-icon {
    display: block;
    position: absolute;
    z-index: 2;
    right: -.2666666667vw;
    bottom: -.2666666667vw;
    width: 5.3333333333vw;
    height: 4.2666666667vw;
    opacity: 1;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%
}

.select-group.checkbox-style.checkbox-height-set [type=checkbox]+label,
.select-group.checkbox-style.checkbox-height-set [type=radio]+label {
    position: relative;
    padding: 0 2.6666666667vw
}

.select-group.checkbox-style.checkbox-height-set [type=checkbox]+label span,
.select-group.checkbox-style.checkbox-height-set [type=radio]+label span {
    line-height: 9.3333333333vw
}

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

.select-group.checkbox-style.type li label span {
    width: 90%;
    font-style: italic;
    line-height: 1 !important
}

.select-group.checkbox-style.type li label p {
    width: 90%;
    margin-top: .5333333333vw;
    overflow: hidden;
    color: #7e7e7e;
    font-size: 2.6666666667vw;
    font-style: italic;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

.select-group.checkbox-style.type li label img.instant {
    animation: fly 1.8s linear infinite
}

.select-group.checkbox-style.type li label img.super-fast {
    animation: fly .8s linear infinite
}

.select-group.checkbox-style.type li label img.express {
    animation: fly .15s linear infinite
}

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

.select-group.checkbox-style.type li label .overflow {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.select-group.checkbox-style.type li label .overflow .line-super {
    position: absolute;
    border-radius: 4px;
    background: #ffe500;
    box-shadow: 0 0 #ffe500, 0 0 40px #ffe500, 0 0 80px #ffe500, 0 0 16px #ffe500
}

.select-group.checkbox-style.type li label .overflow .line-express {
    position: absolute;
    border-radius: 4px;
    background: #f51111;
    box-shadow: 0 0 #f51111, 0 0 40px #f51111, 0 0 80px #f51111, 0 0 16px #f51111
}

.select-group.checkbox-style.type li label .overflow .left {
    width: 1px;
    animation: left 1.5s linear infinite
}

@keyframes left {
    0% {
        top: 100%;
        left: 0;
        height: 0
    }
    20% {
        top: 0;
        left: 0;
        height: 100%
    }
    40% {
        top: 0;
        left: 0;
        height: 0
    }
}

.select-group.checkbox-style.type li label .overflow .top {
    height: 1px;
    animation: top 1.5s linear infinite
}

@keyframes top {
    0% {
        top: 0;
        left: 0;
        width: 0
    }
    20% {
        top: 0;
        left: 0;
        width: 0
    }
    40% {
        top: 0;
        left: 0;
        width: 100%
    }
    60% {
        top: 0;
        left: 100%;
        width: 0
    }
}

.select-group.checkbox-style.type li label .overflow .right {
    width: 1px;
    animation: right 1.5s linear infinite
}

@keyframes right {
    0% {
        top: 0;
        left: 99.5%;
        height: 0
    }
    40% {
        top: 0;
        left: 99.5%;
        height: 0
    }
    60% {
        top: 0;
        left: 99.5%;
        height: 100%
    }
    80% {
        top: 100%;
        left: 99.5%;
        height: 0
    }
}

.select-group.checkbox-style.type li label .overflow .bottom {
    height: 1px;
    animation: bottom 1.5s linear infinite
}

@keyframes bottom {
    0% {
        top: 97%;
        left: 100%;
        width: 0
    }
    60% {
        top: 97%;
        left: 100%;
        width: 0
    }
    80% {
        top: 97%;
        left: 0;
        width: 100%
    }
    to {
        top: 97%;
        left: 0;
        width: 0
    }
}

.select-group.checkbox-style.type li label .overflow .slow {
    position: absolute;
    top: 20%;
    left: 100%;
    width: 3.2vw;
    height: .5333333333vw;
    animation: shoot-slow 1.5s infinite linear;
    opacity: .3;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .slow:before {
    content: "";
    position: absolute;
    top: 2.6666666667vw;
    right: -2.6666666667vw;
    width: 2.6666666667vw;
    height: .5333333333vw;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .slow:after {
    content: "";
    position: absolute;
    top: 3.2vw;
    right: 16vw;
    width: 2.6666666667vw;
    height: .5333333333vw;
    background: #fd1111
}

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

.select-group.checkbox-style.type li label .overflow .medium {
    position: absolute;
    top: 80%;
    left: 100%;
    width: 4vw;
    height: .5333333333vw;
    animation: shoot-medium 1s linear infinite;
    opacity: .3;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .medium:before {
    content: "";
    position: absolute;
    top: -2.6666666667vw;
    right: 10.6666666667vw;
    width: 4vw;
    height: .5333333333vw;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .medium:after {
    content: "";
    position: absolute;
    top: 0;
    right: 16vw;
    width: 4vw;
    height: .5333333333vw;
    background: #fd1111
}

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

.select-group.checkbox-style.type li label .overflow .fast {
    position: absolute;
    top: 20%;
    left: 100%;
    width: 4.8vw;
    height: .5333333333vw;
    animation: shoot-fast .8s linear infinite;
    opacity: .3;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .fast:before {
    content: "";
    position: absolute;
    top: 2.6666666667vw;
    right: -2.6666666667vw;
    width: 4.8vw;
    height: .5333333333vw;
    background: #fd1111
}

.select-group.checkbox-style.type li label .overflow .fast:after {
    content: "";
    position: absolute;
    top: 3.2vw;
    right: 16vw;
    width: 4.8vw;
    height: .5333333333vw;
    background: #fd1111
}

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

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

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

.select-group.checkbox-icon-style .icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 5.6vw;
    height: 100%;
    margin-right: 1.3333333333vw
}

.select-group.checkbox-icon-style .icon img {
    width: 100%;
    margin: auto
}

.select-group.style-add-amount input[type=checkbox]+label,
.select-group.style-add-amount input[type=radio]+label {
    overflow: visible;
    transition: all .3s;
    font-weight: 500
}

.select-group.style-add-amount input[type=checkbox]:checked+label,
.select-group.style-add-amount input[type=radio]:checked+label {
    overflow: visible;
    border: .2666666667vw solid #fd1111;
    background: #fd1111;
    color: #fff
}

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

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

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

@keyframes moneyBtn-Animation {
    0% {
        filter: drop-shadow(0 0 0 #fd1111)
    }
    to {
        filter: drop-shadow(0 -20px 0 rgba(253, 17, 17, 0))
    }
}

.select-group.style-add-amount li {
    overflow: visible
}

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

.select-group.style-bank li {
    overflow: hidden;
    border-radius: 2.1333333333vw
}

.select-group.style-bank li input[type=checkbox]+label,
.select-group.style-bank li input[type=radio]+label {
    padding: 0;
    transition: all .3s;
    border-style: none
}

.select-group.style-bank li input[type=checkbox].active+label,
.select-group.style-bank li input[type=radio].active+label {
    background: linear-gradient(0deg, #700402, #e31210)
}

.select-group.style-bank li input[type=checkbox]+label,
.select-group.style-bank li input[type=radio]+label {
    background: linear-gradient(180deg, #444, #222)
}

.select-group.style-bank li input[type=checkbox]+label .item-bg,
.select-group.style-bank li input[type=radio]+label .item-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.select-group.style-bank li input[type=checkbox]+label .item-icon,
.select-group.style-bank li input[type=radio]+label .item-icon {
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 3.2vw;
    width: 6.4vw;
    height: 6.4vw;
    transform: translateY(-50%);
    border-radius: 50%;
    opacity: 1;
    background-repeat: no-repeat;
    background-size: contain
}

.select-group.style-bank li input[type=checkbox].active+label .item-icon,
.select-group.style-bank li input[type=radio].active+label .item-icon {
    background-repeat: no-repeat;
    background-size: contain
}

.select-group.style-bank li:last-child {
    margin: 0 0 -2.6666666667vw
}

.select-group.style-checked input[type=checkbox]+label,
.select-group.style-checked input[type=radio]+label {
    transition: all .3s;
    border: 0;
    background: none;
    color: #7e7e7e
}

.select-group.style-checked input[type=checkbox]+label span,
.select-group.style-checked input[type=radio]+label span {
    padding: 0 2.6666666667vw 0 4vw;
    line-height: 4.2666666667vw;
    text-align: left;
    pointer-events: none
}

.select-group.style-checked input[type=checkbox]+label .item-icon,
.select-group.style-checked input[type=radio]+label .item-icon,
.select-group.style-checked input[type=checkbox]+label:before,
.select-group.style-checked input[type=radio]+label:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 4vw;
    height: 4vw;
    transform: translateY(-50%);
    transition: all .3s;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    border-radius: .8vw;
    padding: 0
}

.select-group.style-checked input[type=checkbox]:checked+label,
.select-group.style-checked input[type=radio]:checked+label {
    color: #009600
}

.select-group.style-checked input[type=checkbox]:checked+label:before,
.select-group.style-checked input[type=radio]:checked+label:before {
    background: none
}

.select-group.style-checked input[type=checkbox]:checked+label .item-icon,
.select-group.style-checked input[type=radio]:checked+label .item-icon {
    background: #009600
}

.select-group+.select-group {
    border-top: .2666666667vw dashed #7e7e7e
}

.vip-area-group {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 14.4vw;
    padding: 0 4.2666666667vw;
    background: #222;
    border-radius: 1.3333333333vw;
    margin: 0
}

.vip-area-group .left-box {
    display: inline-flex;
    position: relative;
    width: 60%;
    height: auto
}

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

.vip-area-group .item h3 {
    font-size: 4.2666666667vw;
    color: #fff;
    max-width: 36.5333333333vw
}

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

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

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

.vip-area-group .right-box .goto-myvip {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin: 0
}

.vip-area-group .right-box .goto-myvip .myvip-text {
    font-size: 3.7333333333vw;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff
}

.vip-area-group .right-box .goto-myvip .myvip-text .item-icon {
    content: "";
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    margin: 0 0 0 1.3333333333vw;
    background: #fff;
    vertical-align: middle;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

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

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

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

.area-group .item .tip {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

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

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

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

.input-group label {
    position: relative;
    padding-left: .5333333333vw;
    overflow: hidden;
    color: #fff;
    line-height: 2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.input-group input,
.input-group textarea {
    box-sizing: border-box;
    width: 100%;
    height: var(--input-height, 10.6666666667vw);
    padding: 0 3.2vw;
    transition: background .3s;
    border: 0;
    border-radius: .8vw;
    background: #2e2f31;
    color: #fd1111;
    font-weight: 300
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: #7e7e7e
}

.input-group input:disabled,
.input-group textarea:disabled {
    border-bottom: .2666666667vw solid #7e7e7e;
    border-radius: 0;
    background: none
}

.input-group input:disabled.profile.email,
.input-group textarea:disabled.profile.email {
    padding-right: 32vw;
    text-overflow: ellipsis
}

.input-group input:focus,
.input-group textarea:focus {
    outline: none
}

.input-group .input-wrap {
    position: relative
}

.input-group .input-wrap .status {
    position: absolute;
    top: 3.2vw;
    right: 2.6666666667vw;
    color: #009600;
    font-size: 3.2vw;
    max-width: 50%;
    text-align: right;
    line-height: 1.2
}

.input-group .input-wrap .status .item-icon {
    position: absolute;
    left: -4.8vw;
    top: 0;
    display: inline-block;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background: #009600;
    vertical-align: middle;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

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

.input-group .input-wrap .status.get-vcode-btn.active {
    display: flex;
    background: transparent;
    color: linear-gradient(180deg, #444 0%, #222 100%);
    pointer-events: none
}

.input-group .input-wrap.textarea-wrap textarea {
    padding: 2.6666666667vw 8vw 2.6666666667vw 2.6666666667vw
}

.input-group .input-wrap .verify-code-prefix__text {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 10.6666666667vw;
    padding: 0 2.6666666667vw;
    color: #fd1111
}

.input-group .input-wrap .verify-code-prefix__input,
.input-group .input-wrap .verify-code-prefix__input:focus {
    padding: 0 0 0 14.6666666667vw
}

.input-group .input-wrap .otp-resend-btn {
    display: none;
    position: absolute;
    top: 3.7333333333vw;
    right: 2.6666666667vw;
    color: #fd777a;
    font-size: 3.2vw;
    max-width: 50%;
    text-align: right;
    line-height: 1.2;
    text-decoration: underline
}

.input-group .input-wrap .otp-resend-btn.active {
    display: block
}

.input-group .input-wrap .clear {
    position: absolute;
    top: 0;
    right: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: #fd1111;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center
}

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

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

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

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

.input-group.money {
    padding: 0 0 2.6666666667vw
}

.input-group.money label {
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    left: 3.2vw;
    transform: translateY(-50%);
    color: #fd1111
}

.input-group.money .input-wrap {
    z-index: 1
}

.input-group.money .input-wrap input,
.input-group.money .input-wrap textarea {
    color: #fd1111;
    text-align: right
}

.input-group.money .input-wrap input:focus,
.input-group.money .input-wrap textarea:focus {
    padding: 0 10.6666666667vw 0 6.6666666667vw
}

.input-group.money .input-wrap input::placeholder,
.input-group.money .input-wrap textarea::placeholder {
    color: #7e7e7e
}

.input-group.money .input-wrap input.active+.delete-btn,
.input-group.money .input-wrap textarea.active+.delete-btn {
    background-image: url(/assets/images/icon-set/icon-cross-type08.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%
}

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

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

.input-group.upload-file .input-wrap .file-box .file-name {
    flex: 8;
    padding: 0 2.6666666667vw;
    pointer-events: inherit
}

.input-group.upload-file .input-wrap .file-box .file-name.tip {
    color: #7e7e7e;
    font-size: 3.2vw;
    font-weight: 300
}

.input-group.upload-file .input-wrap .file-box .upload-btn {
    display: flex;
    flex: 1;
    flex-basis: 8vw;
    flex-grow: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #fd1111;
    pointer-events: none
}

.input-group.upload-file .input-wrap .file-box .upload-btn img {
    display: block;
    height: 35%
}

.input-group.upload-file .input-wrap .file-box input::placeholder {
    color: red
}

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

.input-group .member-error {
    margin: 1.3333333333vw 0 0;
    padding: 0
}

.input-group .member-error span {
    color: #f51111
}

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

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

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

.content:has(.change-password-page) {
    background-color: #000
}

.change-password-page .menu-box,
.change-password-page .input-group {
    background: transparent;
    box-shadow: none
}

.change-password-page .menu-box input,
.change-password-page .input-group input {
    border: .2666666667vw solid;
    border-color: #2d3953
}

.change-password-page .menu-box input:focus,
.change-password-page .input-group input:focus {
    border-color: #fd1111
}

.change-password-page .eyes {
    top: 11.7333333333vw;
    background-color: var(--change-password-eyes-bg, #7e7e7e)
}

.change-password-page .clear {
    position: absolute;
    top: 11.7333333333vw;
    right: 11.7333333333vw;
    height: 4vw;
    width: 4vw;
    padding: 0;
    transform: translateY(-50%);
    transition: all .3s;
    border: 0;
    border-radius: 5.3333333333vw;
    outline: none;
    opacity: 0;
    background: #fd1111;
    background-repeat: no-repeat;
    background-position: center
}

.change-password-page .clear.active {
    opacity: 1
}

.deposit-acc-info-box {
    margin: 4vw 0 0;
    padding: 4vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #2e2f31;
    font-size: 3.2vw
}

.deposit-acc-info-box p {
    flex: 1;
    margin-right: 2.6666666667vw;
    word-break: break-word;
    opacity: .7;
    text-align: right;
    color: #fffc
}

.acc-info li {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 2.6666666667vw;
    padding-bottom: 1.3333333333vw;
    border-bottom: .2666666667vw solid rgba(0, 0, 0, .4);
    line-height: 1.5
}

.acc-info li .acc-copy {
    position: relative;
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

.acc-info li .acc-copy .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background: #fd1111;
    cursor: pointer;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover
}

.acc-info li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

.acc-info label {
    flex: 0 0 45%;
    padding-right: 1.3333333333vw
}

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

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

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

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

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

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

.player-deposit-next {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    top: 100%;
    opacity: 0;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: #000
}

.player-deposit-next.active {
    top: 100vh;
    height: auto;
    opacity: 1;
    animation: depositCustomShow .2s ease-out forwards
}

@keyframes depositCustomShow {
    0% {
        top: 100vh
    }
    to {
        top: 0
    }
}

.player-deposit-next .a-content {
    padding: 2.6666666667vw;
    font-size: 3.2vw;
    line-height: 1.2
}

.player-deposit-next .deposit-acc-info-box {
    margin: 0 0 2.6666666667vw
}

.player-deposit-next .deposit-acc-info-box p {
    text-align: left;
    line-height: 1.2
}

.deposit-info-img {
    margin-bottom: 2.6666666667vw;
    padding: 2.6666666667vw;
    border: 1px solid rgba(126, 126, 126, .1);
    border-radius: 2.6666666667vw;
    background: #222;
    overflow: hidden
}

.deposit-info-img img {
    width: 100%
}

.input-group.success .input-wrap .item-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 10.6666666667vw;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%;
    background: #009600
}

.input-group.success input,
.input-group.success textarea {
    border: .2666666667vw solid #009600;
    color: #009600
}

.input-group.fail input,
.input-group.fail textarea {
    border: .2666666667vw solid #f51111;
    color: #f51111
}

.input-group.fail .member-error {
    display: block !important
}

.description-text {
    font-size: 3.2vw;
    color: #8c7f63
}

.input-description {
    position: relative;
    margin-top: 1.3333333333vw;
    padding-left: 5.3333333333vw;
    color: #fc6212;
    line-height: 1.2
}

.input-description:before {
    content: "i";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    padding-top: .2666666667vw;
    border-radius: 50%;
    background: #fc6212;
    box-sizing: border-box;
    color: #222;
    text-align: center;
    font-weight: 700
}

.drop-down-menu {
    position: relative;
    margin-bottom: 2.6666666667vw;
    border: .2666666667vw solid #fd1111;
    border-radius: .8vw
}

.drop-down-menu.under-review {
    border: .2666666667vw solid #006bff
}

.drop-down-menu.under-review .drop-down-menu-btn.add-bank-card {
    background: #006bff
}

.drop-down-menu.success {
    border: .2666666667vw solid #009600
}

.drop-down-menu.success .drop-down-menu-btn.add-bank-card {
    background: #009600
}

.drop-down-menu.failed {
    border: .2666666667vw solid #f51111
}

.drop-down-menu.failed .drop-down-menu-btn.add-bank-card {
    background: #f51111
}

.drop-down-menu .drop-down-menu-btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    height: 11.7333333333vw;
    padding: 0 8vw 0 2.6666666667vw;
    background: #fd1111;
    color: #fff
}

.drop-down-menu .drop-down-menu-btn:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4vw;
    transform: translateY(-25%);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #fff transparent transparent
}

.drop-down-menu .drop-down-menu-btn.drop-downn-menu-btn-verify {
    justify-content: center
}

.drop-down-menu .drop-down-menu-btn.drop-downn-menu-btn-verify:after {
    display: none
}

.drop-down-menu .drop-down-menu-btn .icon {
    display: flex;
    flex: none;
    margin: 0 1.3333333333vw
}

.drop-down-menu .drop-down-menu-btn .icon img {
    display: block;
    width: 100%;
    margin: auto
}

.drop-down-menu .drop-down-menu-btn .text {
    overflow: hidden;
    font-size: 3.7333333333vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 11.7333333333vw
}

.drop-down-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease-in-out
}

.drop-down-menu-content.show {
    height: auto;
    max-height: 2000px
}

.drop-down-menu .phone-area-code {
    flex: 0 0 22%
}

.drop-down-menu .phone-code-list {
    top: 35.2vw;
    left: 4vw;
    width: 18.1333333333vw;
    max-height: 24vw
}

.crypto-group-2 {
    position: relative
}

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

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

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

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

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

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

.crypto-group-2 .crypto-input input,
.crypto-group-2 .crypto-input textarea {
    box-sizing: border-box;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 2.6666666667vw 0 11.7333333333vw;
    transition: border .3s;
    border: .2666666667vw solid #2e2f31;
    border-radius: .8vw;
    background: #2e2f31;
    color: #fd1111;
    font-size: 3.7333333333vw;
    font-weight: 300;
    text-align: right;
    appearance: none
}

.crypto-group-2 .crypto-input input::placeholder,
.crypto-group-2 .crypto-input textarea::placeholder {
    color: #7e7e7e
}

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

.crypto-group-2 .crypto-input .delete-btn {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8vw;
    height: 10.6666666667vw;
    transform: translateY(-50%);
    transition: all .3s;
    opacity: 0;
    mask-repeat: no-repeat;
    mask-position: 40% center;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 40% center;
    -webkit-mask-size: 40%
}

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

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

.crypto-group-2 .input-text i {
    color: #fff
}

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

.qrcode img {
    width: 100%
}

.bank-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center
}

.bank-qrcode .deposit-qrcode {
    width: 80%;
    margin-bottom: 4.2666666667vw;
    border-radius: .8vw
}

.bank-qrcode.attachment-image .deposit-qrcode {
    margin: 4.2666666667vw 0 2.1333333333vw;
    width: 50%
}

.bank-qrcode .download {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: .8vw;
    text-decoration: none;
    width: 80%;
    padding: 4.2666666667vw
}

.bank-qrcode .download .item-icon {
    display: block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

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

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

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

.select-card .select-card-inner .user-name {
    padding: 1.3333333333vw 0;
    overflow: hidden;
    opacity: .7;
    font-size: 3.2vw;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

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

.select-card .select-card-inner .card-number {
    font-size: 4.5333333333vw;
    line-height: 1.2;
    text-align: left
}

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

.select-group.checkbox-style [type=radio]:checked+label .tag-recommond,
.tag-recommond {
    position: absolute;
    top: 1.3333333333vw;
    left: -1.0666666667vw;
    width: 5.3333333333vw;
    height: 4vw;
    border-top-left-radius: .5333333333vw;
    border-top-right-radius: .8vw;
    border-bottom-right-radius: .8vw;
    background: #76bd6a
}

.select-group.checkbox-style [type=radio]:checked+label .tag-recommond:before,
.tag-recommond:before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 4px 4px 0;
    border-style: solid;
    border-color: transparent #34622c transparent transparent
}

.select-group.checkbox-style [type=radio]:checked+label .tag-recommond .item-icon,
.tag-recommond .item-icon {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 55%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 55%
}

.pop-confirm-password {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #000
}

.pop-confirm-password.active {
    bottom: 0
}

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

.pop-confirm-password .menu-box {
    padding: 2.6666666667vw;
    background: transparent;
    box-shadow: none
}

.pop-confirm-password .input-group {
    padding-bottom: 0;
    background: #000
}

.pop-confirm-password .phone-area-code {
    flex: 0 0 20%
}

.pop-confirm-password .phone-area-code .btn-select span {
    margin: 0
}

.pop-confirm-password .phone-area-code .phone-code-list {
    max-height: 24vw
}

.pop-confirm-password .member-content .button {
    width: calc(100% - 10.6666666667vw);
    margin: 2.6666666667vw 5.3333333333vw
}

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

.upload-box.active {
    height: 40vw;
    border: .2666666667vw dashed #7e7e7e
}

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

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

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

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

.form-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4vw
}

.form-list.col-2 li {
    width: calc(50% - 5px)
}

.form-list.col-2 li:nth-child(2n) {
    margin-left: 2.1333333333vw
}

.form-list li {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 8vw;
    margin: 0 0 1.3333333333vw;
    padding: 0 0 0 2.6666666667vw;
    overflow: hidden;
    border-radius: .8vw;
    background: #2e2f31;
    color: #fff;
    line-height: 0
}

.form-list li.first a {
    pointer-events: none
}

.form-list li.hide {
    animation: tagHide .3s ease-in-out forwards 1
}

.form-list i {
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    margin-right: 1.3333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle
}

.form-list a {
    width: 8vw;
    height: 8vw;
    transition: .3s;
    background: #5553
}

.form-list a:active {
    opacity: .7
}

.form-list span {
    display: inline-block;
    width: 70%;
    margin-right: 2.6666666667vw;
    overflow: hidden;
    font-size: 3.4666666667vw;
    line-height: 30px;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap
}

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

.delete-btn {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transition: all .3s;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%;
    opacity: 0
}

.delete-btn.red {
    background: #f51111;
    opacity: 1
}

.delete-btn:active {
    opacity: .7
}

.maintain-mask {
    display: none
}

.under-maintain {
    pointer-events: none
}

.under-maintain .maintain-mask {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    border: .2666666667vw dashed rgba(255, 255, 255, .4);
    border-radius: .8vw;
    background: #000000e6
}

.under-maintain .maintain-mask .maintain-tag {
    padding: .8vw 1.3333333333vw;
    border-radius: .5333333333vw;
    line-height: 1
}

.under-maintain .maintain-mask .maintain-tag img {
    display: inline-block;
    margin-right: .8vw
}

.under-maintain .maintain-mask .maintain-tag .text {
    display: inline-block;
    color: #fff9;
    font-size: 2.6666666667vw;
    line-height: 1.2
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 5.3333333333vw 2.6666666667vw 6.6666666667vw;
    font-size: 2.6666666667vw;
    padding: 0 4.2666666667vw 4.2666666667vw;
    color: var(--login-txt);
    font-size: hp-font-size(13px);
    line-height: 1.2;
    text-align: center
}

.text-box .text {
    display: inline-block;
    margin-right: 1.3333333333vw;
    color: #fff
}

.text-box .btn {
    display: inline-block;
    color: var(--login-link);
    margin-left: 2.1333333333vw;
    text-decoration: underline;
    transition: all .3
}

.text-box .btn:active {
    opacity: .8
}

.level-wrap {
    padding: 4vw 0
}

.level-wrap .level-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 4vw
}

.level-wrap .level-title .tip {
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.list {
    width: 100%
}

.list.list-message.editor-active .chose-btn {
    display: block
}

.date-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.8666666667vw 2.6666666667vw;
    color: #7e7e7e
}

.date-title .date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 3.2vw
}

.date-title .date .item-icon {
    display: inline-block;
    width: 4.2666666667vw;
    height: 4vw;
    margin-right: 1.3333333333vw;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 100%
}

.date-title .time-zone {
    margin: 0 1.3333333333vw;
    padding: .5333333333vw .8vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: .8vw;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.message-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 2.6666666667vw;
    overflow: hidden;
    background: #222
}

.message-item:nth-child(2n) {
    background: #2e2f31
}

.message-item .chose-btn {
    display: none;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: 100%
}

.message-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background: linear-gradient(0deg, #700402, #e31210)
}

.message-item .icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 5%;
    right: 5%;
    width: 1.3333333333vw;
    height: 1.3333333333vw;
    border-radius: 50%;
    background: #f51111
}

.message-item .icon img {
    display: block;
    width: 50%;
    margin: auto
}

.message-item .content-wrap {
    width: 85%;
    padding: 1.8666666667vw 0;
    font-size: 3.2vw;
    line-height: 1.5
}

.message-item .content-wrap .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.message-item .content-wrap .title span {
    overflow: hidden;
    color: #fff;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.message-item .content-wrap .title .msg-time {
    color: #7e7e7e;
    font-size: 2.6666666667vw;
    font-weight: 400
}

.message-item .content-wrap .text {
    width: 100%;
    height: 5.0666666667vw;
    overflow: hidden;
    color: #7e7e7e;
    text-overflow: ellipsis;
    white-space: nowrap
}

.message-item .content-wrap .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.message-item .content-wrap .text a {
    pointer-events: none;
    color: #7e7e7e;
    text-decoration: none
}

.message-item.read .content-wrap {
    opacity: .6
}

.message-item.read .icon:before {
    display: none
}

.message-item.chosed .chose-btn {
    background: #009600
}

.inbox-list__editor {
    display: flex;
    justify-content: flex-end
}

.inbox-list__editor .editor__btn {
    position: relative;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%
}

@keyframes choseBtn-ani {
    0% {
        transform: translate(0);
        transform-origin: 50px 50px
    }
    to {
        transform: translate(100%);
        transform-origin: 50px 50px
    }
}

.list .list-content {
    margin-bottom: 1.3333333333vw
}

.list-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center
}

.list-bar .tip-area {
    display: inline-flex;
    position: relative;
    justify-content: flex-end;
    z-index: 1
}

.list-bar .tip-area .tip-icon {
    display: block;
    width: 8vw;
    height: 8vw;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 55%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: 55%
}

.list-bar .tip-area .tip-box {
    display: flex;
    position: absolute;
    top: 100%;
    right: 1.3333333333vw;
    max-height: 0px;
    min-height: 0px;
    padding: 0 .8vw;
    flex-direction: column;
    transition: all ease-in-out .3s;
    border-radius: .8vw;
    background: #222;
    color: #fff;
    font-size: 2.6666666667vw;
    overflow: hidden
}

.list-bar .tip-area .tip-box.active {
    max-height: 53.3333333333vw;
    min-height: 5.3333333333vw;
    padding: .8vw;
    border: .2666666667vw solid #7e7e7e
}

.list-bar .tip-area .tip-box span {
    display: flex;
    padding: 1.3333333333vw 2.1333333333vw
}

.list-bar .tip-area .tip-box span:before {
    content: "";
    display: block;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.3333333333vw 0 0;
    border-radius: 50%
}

.list-bar .tip-area .tip-box span:nth-child(1):before {
    background: #bdbdbd
}

.list-bar .tip-area .tip-box span:nth-child(2):before {
    background: #ffc60b
}

.list-bar .tip-area .tip-box span:nth-child(3):before {
    background: #d15454
}

.list-bar .date-title {
    display: flex;
    align-items: flex-start
}

.record-item {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 2fr 1.5fr 1.5fr;
    align-items: center;
    width: 100%;
    padding: 0 6.6666666667vw 0 2.6666666667vw;
    overflow: hidden;
    outline: none;
    background: #222;
    text-decoration: none
}

.record-item:nth-child(2n) {
    background: #2e2f31
}

.record-item .list-arrow {
    position: absolute;
    right: 2.6666666667vw;
    width: 3.7333333333vw;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: 55%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 55%;
    transform: rotate(180deg)
}

.record-item .item {
    padding: 2.6666666667vw 1.6vw;
    overflow: hidden;
    color: #fff;
    font-size: 3.2vw;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.record-item .item.time {
    font-size: 2.6666666667vw;
    letter-spacing: -1px;
    text-align: center
}

.record-item .item.amount {
    text-align: right
}

.record-item .item.status .tags {
    padding: .8vw 1.3333333333vw;
    overflow: hidden;
    transform: scale(.9);
    border-radius: .8vw;
    color: #fff;
    font-size: 3.2vw;
    text-overflow: ellipsis;
    white-space: nowrap
}

.record-item .item.status.pending .tags {
    background: #fc6212e6
}

.record-item .item.status.revert .tags {
    background: #6b392de6
}

.record-item .item.status.positive .tags {
    background: #009600e6
}

.record-item .item.status.negative .tags {
    background: #f51111e6
}

.record-item .item.bet,
.record-item .item.profit {
    text-align: right
}

.record-item .item.profit.positive {
    color: #009600
}

.record-item .item+.item {
    border-left: .2666666667vw dotted #7e7e7e
}

.record-item.betting-record-list {
    position: relative;
    grid-template-columns: 1fr 2fr 1.5fr 1.5fr;
    padding: 0 1.3333333333vw
}

.record-item.betting-record-list.settled .item-status {
    display: none
}

.record-item.betting-record-list.revocation .item-status {
    background: #bdbdbd66
}

.record-item.betting-record-list.revocation .item-status .tags {
    background: #bdbdbd99
}

.record-item.betting-record-list.void .item-status {
    background: #ffc60b66
}

.record-item.betting-record-list.void .item-status .tags {
    background: #ffc60b99
}

.record-item.betting-record-list.refund .item-status {
    background: #d1545466
}

.record-item.betting-record-list.refund .item-status .tags {
    background: #d1545499
}

.record-item.betting-record-list.revocation .item,
.record-item.betting-record-list.void .item,
.record-item.betting-record-list.refund .item {
    opacity: .3
}

.record-item.betting-record-list .item-status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 8px);
    height: calc(100% - 4px);
    border-radius: .8vw
}

.record-item.betting-record-list .item-status .tags {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    border-radius: .8vw;
    padding: .8vw 1.3333333333vw;
    font-size: 2.6666666667vw;
    color: #fff
}

.record-item.betting-record-list .item {
    padding: 2.6666666667vw 1.3333333333vw
}

.record-item.transaction-record-list {
    grid-template-columns: 1.5fr 1.5fr 1.2fr 1fr;
    padding: 0 2.6666666667vw
}

.record-item.transaction-record-list .item {
    padding: 2.6666666667vw
}

.record-item.transaction-record-list .status {
    padding: 2.6666666667vw 1.3333333333vw
}

.record-item.item-title {
    text-transform: capitalize;
    background: #550b0b
}

.record-item.item-title .item {
    color: #fff;
    margin: 1.3333333333vw 0;
    padding: 1.3333333333vw
}

.record-item.item-title .item.time {
    letter-spacing: 0px
}

.record-item.item-title .item.amount,
.record-item.item-title .item.bet {
    text-align: center
}

.record-item.item-title.betting-record-list .item {
    padding: 1.3333333333vw 2.6666666667vw
}

.record-item.item-title .item+.item {
    border-left: .2666666667vw dotted #ffffff
}

.record-item.no-detail-info .list-arrow {
    display: none
}

a.record-item:active {
    filter: brightness(.95)
}

.betting-record-sum {
    display: flex;
    justify-content: center;
    align-items: self-start;
    background: #2e2f31;
    padding: 2.6666666667vw 0
}

.betting-record-sum .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex: 1;
    font-size: 3.2vw;
    line-height: 1.5
}

.betting-record-sum .item+.item {
    border-left: .2666666667vw solid #555555
}

.betting-record-sum .item .title {
    color: #fff
}

.betting-record-sum .item .text {
    color: #fd1111;
    text-align: center
}

.betting-record-sum .item.positive .text {
    color: #009600
}

.accordion-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2.6666666667vw;
    min-height: 33px;
    opacity: 1;
    transition: all .4s ease-in-out
}

.accordion-card-wrap.remove {
    transform: translateY(-10%);
    height: 0;
    min-height: 0;
    margin: 0 2.6666666667vw;
    opacity: 0
}

.accordion-card-wrap.remove .ac-notice {
    opacity: 0
}

.accordion-card-wrap.show .ac-content {
    height: auto;
    max-height: 10000px;
    opacity: 1
}

.accordion-card-wrap.show .ac-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-card-wrap .ac-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 2.6666666667vw;
    border-radius: 1.0666666667vw;
    background: #fc6212;
    color: #fff;
    font-size: 3.2vw;
    text-align: left
}

.accordion-card-wrap .ac-title .ac-text {
    flex-grow: 1
}

.accordion-card-wrap .ac-title .ac-icon {
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 90%
}

.accordion-card-wrap .ac-title .ac-arrow {
    display: none;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: all .3s
}

.accordion-card-wrap .ac-title .ac-notice {
    position: absolute;
    top: 0;
    right: 0;
    width: 4.5333333333vw;
    height: 4.5333333333vw;
    transform: translate(15%, -35%);
    background: #f51111;
    color: #fff;
    border-radius: 50%;
    line-height: 4.5333333333vw;
    text-align: center;
    box-shadow: 0 0 3px #00000080;
    transition: all .3s ease-in-out;
    opacity: 1
}

.accordion-card-wrap .ac-title .ac-notice.ani {
    animation: notice-jump .3s ease-in-out 1
}

@keyframes notice-jump {
    0% {
        transform: translate(15%, -35%)
    }
    20% {
        transform: translate(15%, -55%) scale(1.3)
    }
    35% {
        transform: translate(15%, -55%) scale(1.3)
    }
    to {
        transform: translate(15%, -35%)
    }
}

.accordion-card-wrap .ac-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    color: #fff;
    opacity: 0
}

.ac-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    margin: 1.8666666667vw 1.3333333333vw;
    padding: 1.8666666667vw 4vw;
    transition: all .4s ease-in-out;
    border-radius: 2.1333333333vw;
    opacity: 1;
    background: #550b0b
}

.ac-list>div {
    opacity: 1;
    transition: all .2s ease-in-out
}

.ac-list.removed {
    transform: translate(-100%);
    height: 0;
    min-height: 0;
    margin: 0 1.3333333333vw;
    padding: 0 4vw
}

.ac-list.removed>div {
    opacity: 0
}

.ac-list .ac-item {
    line-height: 1.8;
    overflow: hidden
}

.ac-list .ac-item .number {
    font-size: 3.4666666667vw;
    font-weight: 500;
    text-decoration: underline
}

.ac-list .ac-item .date {
    color: #7e7e7e;
    font-size: 2.9333333333vw
}

.ac-list .ac-item .amount {
    color: #fc6212;
    font-size: 4vw
}

.ac-list .btn-revert {
    padding: 2.4vw 4.5333333333vw;
    border-radius: .5333333333vw;
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff;
    font-size: 3.2vw
}

.accordion-card-wrap .toggle-btn .ac-arrow {
    display: block
}

.deposit-success-pop .btn-close,
.withdrawal-processing-pop .btn-close {
    position: relative;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 4.8vw;
    right: 4vw;
    z-index: 20;
    width: 5.3333333333vw;
    height: 5.3333333333vw
}

.deposit-success-pop .btn-close:after,
.deposit-success-pop .btn-close:before,
.withdrawal-processing-pop .btn-close:after,
.withdrawal-processing-pop .btn-close:before {
    content: "";
    display: block;
    height: 80%;
    width: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background: green;
    transform-origin: 50% 50%
}

.deposit-success-pop .btn-close:after,
.withdrawal-processing-pop .btn-close:after {
    transform: translateY(-50%) rotate(-45deg)
}

.deposit-success-pop .btn-close:before,
.withdrawal-processing-pop .btn-close:before {
    transform: translateY(-50%) rotate(45deg)
}

.deposit-success-pop .btn-close:before,
.deposit-success-pop .btn-close:after,
.withdrawal-processing-pop .btn-close:before,
.withdrawal-processing-pop .btn-close:after {
    border-radius: 10vw;
    width: .5333333333vw;
    height: 100%;
    background: var(--transaction-pop-close-btn-icon, #ffffff)
}

.deposit-success-pop .pop-inner,
.withdrawal-processing-pop .pop-inner {
    padding: 6.4vw;
    text-align: center
}

.deposit-success-pop .info-cont,
.withdrawal-processing-pop .info-cont {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6.4vw
}

.deposit-success-pop .processing-cont,
.withdrawal-processing-pop .processing-cont {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0 4.2666666667vw 4.2666666667vw;
    margin-bottom: 4.2666666667vw;
    border-bottom: .2666666667vw solid var(--transaction-pop-processing-cont-border-color, #7e7e7e)
}

.deposit-success-pop .state,
.withdrawal-processing-pop .state {
    position: relative;
    width: 14.4vw;
    height: 14.4vw;
    margin: 0 auto;
    animation: fallin .7s forwards .2s;
    border-radius: 100%;
    opacity: 0;
    background: var(--transaction-pop-state-bg, #fc6212)
}

.deposit-success-pop .state .item-icon,
.withdrawal-processing-pop .state .item-icon {
    position: absolute;
    right: -.4vw;
    background-color: var(--transaction-pop-state-icon-bg, #ffffff);
    display: inline-block;
    height: 100%;
    width: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.deposit-success-pop .processing,
.withdrawal-processing-pop .processing {
    text-align: center
}

.deposit-success-pop .processing h3,
.withdrawal-processing-pop .processing h3 {
    color: var(--transaction-pop-processing-title, #fc6212);
    font-size: 5.3333333333vw;
    margin: 2.6666666667vw 0 1.3333333333vw;
    font-weight: 700
}

.deposit-success-pop .processing span,
.withdrawal-processing-pop .processing span {
    color: var(--transaction-pop-processing-txt, #7e7e7e);
    font-size: 3.2vw;
    line-height: 1
}

.deposit-success-pop .amount-cont,
.withdrawal-processing-pop .amount-cont {
    font-weight: 700
}

.deposit-success-pop .amount-cont h4,
.withdrawal-processing-pop .amount-cont h4 {
    font-weight: 400;
    font-size: 4.8vw;
    color: var(--transaction-pop-amount-cont-txt, #7e7e7e);
    margin-bottom: 2.6666666667vw;
    line-height: 1
}

.deposit-success-pop .amount-cont .amount,
.withdrawal-processing-pop .amount-cont .amount {
    font-size: 6.9333333333vw;
    color: var(--transaction-pop-amount-cont-txt-strong, #fc6212)
}

.deposit-success-pop .info-list,
.withdrawal-processing-pop .info-list {
    margin: 6.4vw 0 0;
    overflow: auto;
    font-size: 3.2vw;
    text-align: left
}

.deposit-success-pop .info-list li,
.withdrawal-processing-pop .info-list li {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0
}

.deposit-success-pop .info-list li label,
.deposit-success-pop .info-list li span,
.withdrawal-processing-pop .info-list li label,
.withdrawal-processing-pop .info-list li span {
    display: inline-block;
    word-break: break-all;
    padding: 2.6666666667vw;
    line-height: 1.3
}

.deposit-success-pop .info-list li label,
.withdrawal-processing-pop .info-list li label {
    color: var(--transaction-pop-info-list-title, #fff);
    background: var(--transaction-pop-info-list-title-bg, #151515)
}

.deposit-success-pop .info-list li span,
.withdrawal-processing-pop .info-list li span {
    color: var(--transaction-pop-info-list-txt, #fd1111);
    background: var(--transaction-pop-info-list-txt-bg, #222222)
}

.deposit-success-pop .state .item-icon {
    right: 0;
    top: .2666666667vw
}

@keyframes fallin {
    0% {
        transform: scale(3);
        opacity: 0
    }
    50% {
        transform: scale(1);
        opacity: 1
    }
    60% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.main-wallet-info {
    width: 100%;
    padding: 0 4vw 8vw;
    color: #fff;
    zoom: 1
}

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

.main-wallet-info h4 {
    font-size: 12vw;
    text-align: right
}

.operating-wallet {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.operating-wallet button,
.operating-wallet .btn-renew {
    min-width: 21.3333333333vw;
    margin: 0 1.3333333333vw 0 0;
    padding: 0 4vw;
    border: 0;
    border-radius: 8vw;
    outline: none;
    box-shadow: inset 0 .2666666667vw .2666666667vw #ffffff80, 0 0 .5333333333vw .2666666667vw #0003;
    color: #fff;
    font-size: 3.2vw;
    line-height: 8vw;
    text-align: center
}

.operating-wallet button:last-child,
.operating-wallet .btn-renew:last-child {
    margin-right: 0
}

.operating-wallet .btn-take-back {
    background: #006bff
}

.operating-wallet .btn-other-account {
    background: #009600
}

.operating-wallet .btn-renew {
    background: #fc6212
}

.operating-wallet .btn-renew img {
    width: 3.2vw;
    margin-right: 1.3333333333vw
}

.operating-wallet .btn-renew span,
.operating-wallet .btn-renew img {
    vertical-align: middle
}

.operating-wallet .btn-renew.active img {
    animation: reneWallet 1s ease
}

.renew-main-wallet {
    display: inline-flex;
    align-items: center;
    line-height: 2
}

.renew-main-wallet.active .icon-refresh {
    animation: reneWallet 1s linear
}

.renew-main-wallet span {
    margin-right: 1.3333333333vw;
    font-size: 3.2vw
}

.renew-main-wallet .icon-refresh {
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.content-transfer {
    overflow: hidden
}

.content-transfer .menu-box {
    padding: 2.6666666667vw
}

.content-transfer .menu-box .select-box:last-child {
    float: right
}

.select-box {
    display: inline-block;
    position: relative;
    width: 46%
}

.select-box:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 18%;
    right: 2.6666666667vw;
    transform: translateY(-25%);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #fff transparent transparent
}

.select-box label {
    display: block;
    font-size: .9rem;
    line-height: 2
}

.select-box select {
    display: block;
    position: relative;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 2.6666666667vw;
    border: 0;
    border-radius: .8vw;
    outline: none;
    color: #fff;
    background: #222;
    appearance: none
}

.account-count {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 72vh;
    margin-top: 2.6666666667vw;
    overflow-x: hidden;
    overflow-y: auto
}

.secondary-money-info {
    min-width: 60%;
    margin-top: 1.3333333333vw;
    padding: 0 4vw;
    float: right;
    border: .2666666667vw solid #ffffff;
    border-radius: 8vw;
    background: #fffc;
    box-shadow: 0 0 .5333333333vw #fffc, 0 .2666666667vw 1.3333333333vw #fff9;
    color: #934141;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 0
}

.secondary-money-info p,
.secondary-money-info span {
    max-width: 48%;
    overflow: hidden;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap
}

.secondary-money-info p {
    display: inline-block;
    margin-right: 2%
}

.secondary-money-info span {
    float: right
}

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

.recommend-friends-box {
    width: auto;
    height: auto;
    margin: 2.6666666667vw;
    padding: 2.6666666667vw;
    border-radius: 2.6666666667vw;
    background: #222;
    box-shadow: 0 0 1.6vw #0000004d
}

.recommend-friends-box.deco {
    margin-top: 10.6666666667vw
}

.recommend-friends-box .deco-box {
    position: relative;
    height: 9.3333333333vw
}

.recommend-friends-box .deco-box .deco-img {
    display: block;
    position: relative;
    width: 16vw;
    height: 16vw;
    margin: auto;
    overflow: hidden;
    transform: translateY(-50%);
    background: linear-gradient(270deg, #6481cd, #a1b6ee 80%);
    border-radius: 50%
}

.recommend-friends-box .deco-box .deco-img img {
    display: block;
    position: absolute;
    top: 60%;
    left: 50%;
    width: 120%;
    height: 120%;
    margin: auto;
    transform: translate(-50%, -45%) rotate(0)
}

.recommend-friends-box .title {
    width: 100%;
    line-height: 9.3333333333vw
}

.recommend-friends-box .title h2 {
    color: #fff;
    font-size: 4vw
}

.recommend-friends-box .title h2 span {
    display: inline-block;
    vertical-align: middle
}

.recommend-friends-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: 2.1333333333vw;
    background: linear-gradient(180deg, #7783fd, #5664fa);
    vertical-align: middle
}

.recommend-friends-box .complete-desc {
    margin: 5.3333333333vw 0;
    font-size: 3.2vw;
    font-style: italic;
    color: #fff;
    font-weight: 600
}

@keyframes rotateGift1 {
    0% {
        transform: translate(-50%, -30%) rotate(0)
    }
    5% {
        transform: translate(-50%, -45%) rotate(0)
    }
    10% {
        transform: translate(-50%, -45%) rotate(0)
    }
    15% {
        transform: translate(-50%, -45%) rotate(-20deg)
    }
    20% {
        transform: translate(-50%, -45%) rotate(20deg)
    }
    25% {
        transform: translate(-50%, -45%) rotate(0)
    }
    30%,
    to {
        transform: translate(-50%, -45%) rotate(0)
    }
}

@keyframes rotateGift2 {
    0% {
        transform: translate(-50%, -45%) rotate(0)
    }
    5% {
        transform: translate(-50%, -45%) rotate(0)
    }
    10% {
        transform: translate(-50%, -45%) rotate(0)
    }
    15% {
        transform: translate(-50%, -45%) rotate(-20deg)
    }
    20% {
        transform: translate(-50%, -45%) rotate(20deg)
    }
    25% {
        transform: translate(-50%, -45%) rotate(0)
    }
    30%,
    to {
        transform: translate(-50%, -45%) rotate(0)
    }
}

.code-box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between
}

.code-box:after {
    content: "";
    display: block;
    margin: 2.1333333333vw 0 0;
    right: 0;
    width: 100%;
    height: .2666666667vw;
    background: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .4) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw 2.6666666667vw
}

.code-box p {
    width: 100%;
    padding-bottom: 2.6666666667vw;
    line-height: 1.3;
    font-size: 3.2vw;
    color: #fffc
}

.code-box .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex: 2;
    border: .2666666667vw solid #6e8ad2;
    background: #0000;
    border-radius: 1.0666666667vw;
    overflow: hidden
}

.code-box .code span {
    display: block;
    color: #fff;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 1.3333333333vw 2.6666666667vw
}

.code-box .code .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8vw;
    padding: 1.3333333333vw 2.6666666667vw;
    transition: all .3s;
    background: #fd1111
}

.code-box .code .btn:active {
    opacity: .7
}

.code-box .btn-share {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background: #fd1111;
    border-radius: 1.0666666667vw;
    font-size: 3.7333333333vw;
    color: #fff;
    margin-left: 2.6666666667vw
}

.condition-box .title {
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.5em;
    padding: 4vw 0
}

.condition-box .item {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin: 0 0 1.3333333333vw;
    font-size: 3.2vw
}

.condition-box .item .condition {
    padding: 1.6vw 0;
    color: #fffc
}

.condition-box .item .condition:before {
    content: "";
    display: inline-block;
    width: 1.6vw;
    height: 1.6vw;
    margin: 0 1.6vw 0 0;
    border-radius: 50%;
    background: #6e7cff
}

.condition-box .item .text {
    width: 65%;
    height: auto;
    color: #fffc;
    border-radius: 1.0666666667vw;
    background: #2e2f31;
    padding: 1.8666666667vw 2.6666666667vw
}

.status-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.status-box .status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    padding: 1.3333333333vw
}

.status-box .status.accept {
    position: relative
}

.status-box .status.accept:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .2666666667vw;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .4) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667vw 2.6666666667vw
}

.status-box .status.accept .number {
    color: #ffb016
}

.status-box .status .number {
    font-size: 8vw;
    margin-bottom: 1.8666666667vw;
    color: #cecece
}

.status-box .status .text {
    color: #fffc;
    font-size: 3.2vw
}

.terms {
    display: flex;
    margin-bottom: 5.3333333333vw;
    justify-content: center;
    align-items: center
}

.terms-link {
    display: inline-block;
    margin: auto;
    padding: 1.3333333333vw 3.2vw;
    color: #6481cd;
    font-size: 2.9333333333vw;
    font-weight: 500;
    transition: all .3s
}

.date-bar {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2.6666666667vw
}

.date-bar .text {
    display: block;
    font-size: 3.2vw;
    padding: 0 .8vw;
    color: #cecece
}

.date-bar .date-input {
    position: relative;
    width: 100%;
    margin-right: 0;
    width: 34%;
    border-radius: .8vw
}

.date-bar .date-input:before {
    left: auto;
    right: 0;
    width: 9.3333333333vw;
    margin: 0;
    height: 8vw
}

.date-bar .date-input input {
    width: 100%;
    height: 8vw;
    padding: 0
}

.btn-submit {
    position: relative;
    border-radius: .8vw;
    padding: 0 2.6666666667vw;
    margin-left: 1.3333333333vw;
    height: 8vw;
    line-height: 8vw;
    color: #fff;
    background: linear-gradient(0deg, #700402, #e31210);
    padding: 0 6.6666666667vw 0 1.8666666667vw;
    font-size: 3.2vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.btn-submit .item-icon {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 1.3333333333vw;
    transform: translateY(-50%);
    width: 3.4666666667vw;
    height: 3.7333333333vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.list-status {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 2.6666666667vw
}

.list-status .title {
    color: #fffc;
    font-size: 3.2vw
}

.list-status img {
    width: 4.2666666667vw;
    margin: 0 1.3333333333vw
}

.list-status .text {
    font-size: 2.9333333333vw
}

.list-status div {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.list-status .pending .text {
    color: #fc6212
}

.list-status .expired .text {
    color: #f51111
}

.recommend-friends-list {
    width: auto;
    height: auto;
    margin: 2.6666666667vw
}

.recommend-friends-list .list-content {
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    overflow: hidden
}

.recommend-friends-list .rf-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    line-height: 1.3;
    align-items: center
}

.recommend-friends-list .rf-list.form-title {
    padding: 2.1333333333vw 2.6666666667vw;
    background: #550b0b;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0
}

.recommend-friends-list .rf-list.form-content {
    padding: 1.3333333333vw 2.6666666667vw;
    background: #222;
    color: #fff;
    font-size: 2.9333333333vw
}

.recommend-friends-list .rf-list.form-content:nth-child(2n) {
    background: #2e2f31
}

.recommend-friends-list .rf-list>div,
.recommend-friends-list .rf-list>span,
.recommend-friends-list .rf-list li {
    flex: 1
}

.recommend-friends-list .rf-list>div.complete-time,
.recommend-friends-list .rf-list>span.complete-time,
.recommend-friends-list .rf-list li.complete-time {
    color: #009600
}

.recommend-friends-list .rf-list>div.complete-time.pending,
.recommend-friends-list .rf-list>div.complete-time.expired,
.recommend-friends-list .rf-list>span.complete-time.pending,
.recommend-friends-list .rf-list>span.complete-time.expired,
.recommend-friends-list .rf-list li.complete-time.pending,
.recommend-friends-list .rf-list li.complete-time.expired {
    display: flex;
    align-items: center;
    justify-content: center
}

.recommend-friends-list .rf-list>div.complete-time.pending img,
.recommend-friends-list .rf-list>div.complete-time.expired img,
.recommend-friends-list .rf-list>span.complete-time.pending img,
.recommend-friends-list .rf-list>span.complete-time.expired img,
.recommend-friends-list .rf-list li.complete-time.pending img,
.recommend-friends-list .rf-list li.complete-time.expired img {
    width: 4.8vw
}

.spread {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.spread .bubble,
.spread .circle {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    border-radius: 50%;
    color: #e2264d;
    filter: none
}

.spread .bubble {
    box-sizing: border-box;
    width: 8rem;
    height: 8rem;
    transform: translate(-50%, -50%) scale(0);
    border: solid 4rem #ffe75a
}

.spread .circle {
    width: .375rem;
    height: .375rem;
    margin: -.1875rem;
    box-shadow: .3247595264rem -5.1875rem 0 -.1875rem #ff8080, -.3247595264rem -4.8125rem 0 -.1875rem #ffed80, 4.2582350681rem -2.9804461252rem 0 -.1875rem #ffed80, 3.5600797569rem -3.2544518934rem 0 -.1875rem #a4ff80, 4.9851727513rem 1.470944472rem 0 -.1875rem #a4ff80, 4.7641064198rem .7542648771rem 0 -.1875rem #80ffc8, 1.9581736738rem 4.8146838799rem 0 -.1875rem #80ffc8, 2.3806665681rem 4.19500546rem 0 -.1875rem #80c8ff, -2.5433701195rem 4.5328681246rem 0 -.1875rem #80c8ff, -1.7953803367rem 4.4768441467rem 0 -.1875rem #a480ff, -5.1297043328rem .8377102187rem 0 -.1875rem #a480ff, -4.6179132702rem 1.3880160217rem 0 -.1875rem #ff80ed, -3.8532661237rem -3.4882604773rem 0 -.1875rem #ff80ed, -3.9428102567rem -2.7388317892rem 0 -.1875rem #ff8080
}

@keyframes bubble {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }
    10% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 4rem
    }
    20%,
    90%,
    to {
        border-width: 0;
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes sparkles {
    0%,
    35% {
        opacity: 0
    }
    40% {
        opacity: 1;
        box-shadow: .3247595264rem -4.1875rem #ff8080, -.3247595264rem -3.8125rem #ffed80, 3.4764035856rem -2.3569563233rem #ffed80, 2.7782482745rem -2.6309620915rem #a4ff80, 4.0102448391rem 1.248423538rem #a4ff80, 3.7891785076rem .5317439431rem #80ffc8, 1.5242899347rem 3.913715012rem #80ffc8, 1.946782829rem 3.2940365921rem #80c8ff, -2.1094863804rem 3.6318992567rem #80c8ff, -1.3614965975rem 3.5758752788rem #a480ff, -4.1547764206rem .6151892847rem #a480ff, -3.642985358rem 1.1654950878rem #ff80ed, -3.0714346466rem -2.8647706763rem #ff80ed, -3.1609787796rem -2.1153419882rem #ff8080
    }
}

.bonus-wallet-wrap {
    display: block;
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: linear-gradient(to top, #575757, #3f3f3f);
    overflow: hidden
}

.bonus-wallet-wrap.ongoing {
    display: none;
    z-index: 5
}

.bonus-wallet-wrap.ongoing.show {
    display: block;
    margin-top: 0
}

.bonus-wallet-wrap.hide {
    transform: scaleY(0);
    transition: all .3s ease-in
}

.bonus-wallet {
    display: block;
    position: relative;
    padding: 2.6666666667vw;
    box-shadow: 0 -.5333333333vw 1.0666666667vw #0000061a, inset .2666666667vw .2666666667vw .5333333333vw #ffffff1a
}

.bonus-wallet .title {
    position: relative;
    overflow: hidden;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-wallet .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.8vw;
    margin-right: 1.0666666667vw;
    border-radius: 1.0666666667vw;
    background: #69aaff;
    vertical-align: sub
}

.bonus-wallet .wallet-label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 13.3333333333vw;
    height: 6.9333333333vw;
    padding: 0 1.3333333333vw;
    border-radius: 8vw 0 0 8vw;
    background: #009600;
    color: #fff;
    font-size: 2.9333333333vw
}

.bonus-wallet .wallet-label .item-icon {
    content: "";
    display: inline-block;
    width: 6.9333333333vw;
    height: 6.9333333333vw;
    background-position: 10% center;
    background-repeat: no-repeat;
    background-size: 70%
}

.bonus-wallet .wallet-label--running {
    background: #fd1111
}

.bonus-wallet .wallet-label--disabled {
    background: linear-gradient(180deg, #444, #222)
}

.bonus-wallet .wallet-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 2.6666666667vw;
    border-radius: 1.0666666667vw
}

.bonus-wallet .wallet-inner-left {
    width: 21.8666666667vw;
    height: 21.8666666667vw;
    margin-right: 4vw;
    overflow: hidden;
    border-radius: 1.0666666667vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.bonus-wallet .wallet-inner-right {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    width: 70%
}

.bonus-wallet .wallet-inner-right .text {
    margin: auto;
    padding: 2.6666666667vw;
    color: #ffb016;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.bonus-wallet .card-detail {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 2.6666666667vw
}

.bonus-wallet .card-detail .card-date {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    margin: 0 1.3333333333vw 0 0;
    color: #fff;
    font-size: 2.6666666667vw;
    line-height: 1.5
}

.bonus-wallet .card-detail .time-zone {
    display: block;
    align-self: flex-start;
    margin: .8vw 1.3333333333vw .8vw 0;
    padding: .5333333333vw 1.0666666667vw;
    border: 1px solid #7e7e7e;
    border-radius: .8vw;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.bonus-wallet .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8vw 0;
    padding: .5333333333vw 1.0666666667vw;
    border: .2666666667vw solid #fd1111;
    border-radius: .8vw
}

.bonus-wallet .card-detail .detail-btn a {
    color: #fd1111;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.bonus-wallet .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: #ffb016
}

.bonus-wallet .discount.complete {
    color: #ffb016
}

.bonus-wallet .discount.disable {
    color: #888
}

.bonus-wallet .discount .currency {
    margin: auto 0;
    font-size: 3.7333333333vw
}

.bonus-wallet .discount .amount {
    padding-bottom: 2.6666666667vw;
    font-size: 5.8666666667vw;
    font-weight: 700
}

.bonus-wallet .discount .turn-hide {
    display: none
}

.bonus-wallet .discount02 {
    display: none;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 2.6666666667vw;
    color: #fd1111;
    font-size: 3.2vw
}

.bonus-wallet .discount02 .deposit {
    padding-right: 5.3333333333vw
}

.dec-line-wrap {
    position: relative;
    height: 5.3333333333vw
}

.dec-line-wrap:before,
.dec-line-wrap:after {
    content: "";
    position: absolute;
    top: 0;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 100%;
    background: #000
}

.dec-line-wrap:before {
    right: -1.6vw
}

.dec-line-wrap:after {
    left: -1.6vw
}

.dec-line {
    position: absolute;
    top: 1.8666666667vw;
    left: 3%;
    width: 94%;
    border-top: .5333333333vw dotted rgba(255, 255, 255, .2)
}

.bonus-card-down {
    display: block;
    position: relative;
    padding: 1.3333333333vw 2.6666666667vw 4vw;
    border-radius: 0 0 1.3333333333vw 1.3333333333vw;
    box-shadow: 0 2px 4px #0000061a
}

.bonus-card-down .card-down-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border-radius: 1.0666666667vw
}

.bonus-card-down .card-down-inner .turn-hide {
    display: none
}

.bonus-card-down .card-down-inner-right {
    position: relative;
    margin-left: 2.6666666667vw;
    min-width: 32vw
}

.bonus-card-down .card-down-inner-right .btn {
    min-width: 32vw;
    min-height: 7.4666666667vw;
    margin: auto;
    border-radius: 5px;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center;
    box-shadow: 0 2px 4px #00000040
}

.bonus-card-down .card-down-inner-right .btn--start {
    background: linear-gradient(to bottom, #eed29f, #cca967)
}

.bonus-card-down .card-down-inner-right .btn--cancel {
    background: linear-gradient(to bottom, #d15454, #cb4141)
}

.bonus-card-down .card-down-inner-right .btn--receive {
    background: linear-gradient(to bottom, #9fd562, #7cb43e)
}

.bonus-card-down .card-down-inner-right .btn--disabled {
    color: #9b9b9b;
    background: linear-gradient(to bottom, #575757, #3e3e3e);
    border: .2666666667vw dotted #9b9b9b;
    box-shadow: 0 0 #00000040
}

.bonus-card-down .card-down-inner-right .btn--working {
    color: #7c99e4;
    background: linear-gradient(to bottom, #575757, #3e3e3e);
    border: .2666666667vw dotted #7c99e4
}

.bonus-card-down .card-down-inner-right .turn-open {
    display: block
}

.bonus-card-down .card-down-inner-right .withdraw-ani {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img {
    position: relative;
    z-index: 2;
    width: 15.7333333333vw;
    height: 11.4666666667vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img img {
    display: block;
    position: absolute;
    width: 100%;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .back {
    z-index: 3;
    filter: drop-shadow(2px 2px 2px rgba(45, 45, 45, .1)) drop-shadow(4px 4px 4px rgba(49, 49, 49, .1)) drop-shadow(8px 8px 8px rgba(42, 42, 42, .1)) drop-shadow(16px 16px 16px rgba(32, 32, 32, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .front {
    z-index: 5;
    filter: drop-shadow(4px 4px 4px rgba(45, 45, 45, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet {
    display: block;
    position: absolute;
    z-index: 4
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li {
    display: block;
    position: absolute;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background-repeat: no-repeat;
    background-size: contain
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-1 {
    top: -4vw;
    left: 8.8vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-2 {
    top: -5.3333333333vw;
    left: 5.3333333333vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-3 {
    top: -4vw;
    left: 1.0666666667vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-4 {
    top: -3.2vw;
    left: 4.8vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img {
    position: relative;
    z-index: 2;
    top: 0;
    left: 50%
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li {
    position: absolute;
    width: 8vw;
    height: 8vw;
    overflow: hidden
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li span {
    display: block;
    z-index: 2;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 800% 100%
}

.bonus-card-down .card-down-inner-right.withdraw-active .btn-receive {
    transform: translateY(-50%);
    transition: all .5s ease-in-out;
    opacity: 0
}

.bonus-card-down .card-down-inner-right.withdraw-active .withdraw-ani {
    display: block;
    position: absolute
}

@keyframes walletCoin {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

.bonus-card-down .card-down-inner .bonus-left {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    color: #ffb016
}

.bonus-card-down .card-down-inner .bonus-left .bonus-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 3.2vw;
    padding: 1.3333333333vw 0
}

.bonus-card-down .card-down-inner .bonus-left .currency {
    padding: 0 .8vw 0 1.8666666667vw;
    font-size: 3.7333333333vw
}

.bonus-card-down .card-down-inner .bonus-left .bonus-number {
    font-size: 4.8vw;
    font-weight: 700
}

.bonus-card-down .card-down-inner .bonus-left .bonus-tips {
    transform: scale(.9);
    transform-origin: left;
    color: #fd1111;
    font-size: 3.2vw;
    padding: .8vw 0
}

.turn-gray {
    filter: grayscale(100%) brightness(180%)
}

.turn-gray2 {
    filter: grayscale(100%) brightness(120%)
}

.turn-hide {
    display: none !important
}

.turn-show {
    display: flex !important
}

.bgcolor-gray {
    background: linear-gradient(0deg, #3a3a3a, #1f1e1e)
}

@keyframes fadeOutUp {
    0% {
        transform: translate3d(0, -10%, 0);
        opacity: .5
    }
    30% {
        transform: translate3d(0, -30%, 0);
        opacity: 1
    }
    to {
        transform: translate3d(0, -10%, 0);
        opacity: .5
    }
}

.pop-bonuswallet {
    display: none;
    position: fixed;
    z-index: 8001;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none
}

.pop-bonuswallet .pop-wrap3 {
    pointer-events: auto
}

.pop-wrap3 {
    position: fixed;
    z-index: 2;
    bottom: -100%;
    width: 100%;
    transform: translate(0);
    transition: bottom .3s;
    background: #000;
    color: #fff
}

.pop-wrap3.active {
    bottom: 0;
    transition: bottom .3s
}

.pop-wrap3 {
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    color: #fff;
    line-height: 1.5
}

.pop-wrap3 .btn-closed {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 27%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 27%
}

.pop-wrap3 .title-wrap {
    position: relative;
    display: flex
}

.pop-wrap3 .title-wrap .btn-back {
    position: relative;
    -webkit-text-decoration: block;
    text-decoration: block;
    padding: 0 1.3333333333vw 2.6666666667vw 10.6666666667vw;
    display: none
}

.pop-wrap3 .title-wrap .btn-back.btn-back-show {
    display: block;
    animation: slide-top .5s both
}

.pop-wrap3 .title-wrap .btn-back div {
    top: 2.1333333333vw;
    left: 0;
    content: "";
    width: 9.3333333333vw;
    height: 9.3333333333vw;
    display: block;
    z-index: 3;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
    transform: scale(1);
    transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1.6)
}

.pop-wrap3 .title-wrap .btn-back div .item-icon {
    top: -.5333333333vw;
    left: 0;
    content: "";
    width: 18.6666666667vw;
    height: 9.3333333333vw;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1)
}

.pop-wrap3 .title-wrap .title {
    margin: 1.3333333333vw 0 0;
    color: #fff;
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.pop-wrap3 .title-wrap .title .tips {
    color: #7e7e7e;
    font-size: 3.2vw
}

.pop-wrap3 .inner-wrap {
    display: flex;
    flex-direction: row;
    width: auto;
    max-height: 90vh;
    transition: all .3s;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.pop-wrap3 .inner-wrap .inner-inner {
    display: flex;
    transition: all .2s
}

.pop-wrap3 .inner-wrap .inner-right {
    transform: translate(-50%)
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
    height: auto;
    padding: 2.6666666667vw
}

.pop-wrap3 .inner-wrap .inner-left {
    transform: translate(0)
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    height: auto;
    padding: 2.6666666667vw
}

.pop-wrap3 .inner-wrap .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    height: 0;
    padding: 0;
    overflow: hidden
}

.pop-wrap3 .inner-wrap .inner-box>div {
    margin-bottom: 2.6666666667vw
}

.pop-wrap3 .bottom-wrap .tips2 {
    padding-bottom: 1.3333333333vw;
    color: #7e7e7e;
    font-size: 3.2vw;
    text-align: center
}

.reel-box {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.lvup-select-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.lvup-select-wrap .event {
    display: block;
    position: relative;
    width: 48%;
    height: 12vw;
    border-radius: .8vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.lvup-select-wrap>div {
    margin-bottom: 2.6666666667vw
}

@keyframes scale-in-ver-top {
    0% {
        transform: scaleY(0);
        transform-origin: 100% 0%;
        opacity: 0
    }
    to {
        transform: scaleY(1);
        transform-origin: 100% 0%;
        opacity: 1
    }
}

.bonus-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 29.3333333333vw;
    margin-bottom: 2.6666666667vw;
    padding: 2.6666666667vw 4.8vw;
    border-radius: 1.3333333333vw;
    background: linear-gradient(180deg, #505d75, #3f4858);
    box-shadow: 0 1px 5px #0000001f
}

.bonus-event-left {
    width: 70%
}

.bonus-event-left .title {
    position: relative;
    margin-top: 2.6666666667vw;
    overflow: hidden;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-event-left .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.8vw;
    margin-right: 1.0666666667vw;
    border-radius: 1.0666666667vw;
    background: #7c99e4;
    vertical-align: sub
}

.bonus-event-left .card-detail {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    flex-wrap: wrap
}

.bonus-event-left .card-detail .card-date {
    margin: auto 0;
    color: #fff;
    font-size: 2.6666666667vw;
    padding: .8vw 0
}

.bonus-event-left .card-detail .detail-btn {
    display: flex;
    margin: auto 1.3333333333vw;
    padding: .5333333333vw 1.0666666667vw;
    border: .2666666667vw solid #ffb016;
    border-radius: .8vw
}

.bonus-event-left .card-detail .detail-btn a {
    color: #ffb016;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.bonus-event-left .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: #ffb016
}

.bonus-event-left .discount .currency {
    margin: auto 0;
    font-size: 3.7333333333vw
}

.bonus-event-left .discount .amount {
    padding-bottom: 2.6666666667vw;
    font-size: 5.8666666667vw;
    font-weight: 700
}

.bonus-event-right {
    width: 30%
}

.bonus-event-right .btn {
    min-width: 18.6666666667vw;
    min-height: 7.4666666667vw;
    margin: auto;
    border-radius: 5px;
    background: linear-gradient(to bottom, #eed29f, #cca967);
    box-shadow: 0 2px 4px #00000040;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center
}

.bonus-event .notch-l {
    position: absolute;
    left: 0;
    width: 2.1333333333vw;
    height: 4vw;
    border-radius: 0 100px 100px 0;
    background: #000
}

.bonus-event .notch-r {
    position: absolute;
    right: 0;
    width: 2.1333333333vw;
    height: 4vw;
    border-radius: 100px 0 0 100px;
    background: #000
}

.player-vip-box,
.player-vip-ticket-box {
    width: auto;
    height: auto;
    margin: 2.6666666667vw;
    padding: 2.6666666667vw;
    border-radius: 2.6666666667vw;
    background: #222;
    box-shadow: 0 0 6px #0000004d
}

.player-vip-box.deco,
.player-vip-ticket-box.deco {
    margin-top: 5.3333333333vw
}

.player-vip-box .title,
.player-vip-ticket-box .title {
    width: 100%;
    margin-bottom: 2.6666666667vw
}

.player-vip-box .title h2,
.player-vip-ticket-box .title h2 {
    color: #fff;
    font-size: 4vw
}

.player-vip-box .title h2 span,
.player-vip-ticket-box .title h2 span {
    display: inline-block;
    vertical-align: middle
}

.player-vip-box .title h2:before,
.player-vip-ticket-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: 2.1333333333vw;
    background: #ffd269;
    vertical-align: middle
}

.player-vip-box.vip-card-lv1,
.player-vip-ticket-box.vip-card-lv1 {
    padding: 0
}

.player-vip-box.vip-card-lv1 .card-top,
.player-vip-ticket-box.vip-card-lv1 .card-top {
    background: linear-gradient(90deg, #928f82, #817b5c 50%);
    width: auto;
    height: 36.2666666667vw;
    padding: 4vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 {
    display: flex;
    position: relative;
    align-items: center;
    flex-flow: row nowrap
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-totem,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-totem {
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    border-radius: 100%;
    background: linear-gradient(180deg, #fff, #dfdfdf);
    box-shadow: 2px 4px 7px #0000003d, 0 1px 2px silver
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-totem .item-icon,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-totem .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 35% 50%;
    background-size: 60%
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text {
    padding-left: 4vw
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text .text,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text .text {
    color: #fffc;
    font-size: 3.2vw;
    transform: scale(.9)
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text h2,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area1 .lv-text h2 {
    color: #fff;
    font-size: 21px
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 {
    display: flex;
    position: relative;
    align-items: center;
    flex-flow: row nowrap;
    margin-top: 2.6666666667vw
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar {
    flex: 1;
    margin-right: 2.6666666667vw
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333vw;
    margin-bottom: 1.3333333333vw;
    border-radius: 1.3333333333vw;
    background: #0000004d;
    box-shadow: inset 0 0 .2666666667vw #999
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar .bar-inner,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar .bar-inner {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 1.3333333333vw;
    background: linear-gradient(to right, #e9d29c, #f0cc7a);
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #f0cc7a66, 0 0 .8vw #f0cc7a66
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar .bar-inner:after,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .bar .bar-inner:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    width: .8vw;
    height: .8vw;
    border-radius: .8vw;
    background: #fff;
    box-shadow: 0 0 .5333333333vw .2666666667vw #f0cc7a
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .number,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .progress-bar .number {
    display: flex;
    justify-content: space-between;
    align-content: center;
    color: #7e7e7e;
    font-size: 2.6666666667vw
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 .next-lv-totem,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 .next-lv-totem {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-box.vip-card-lv1 .card-top .vip-lv-area2 span,
.player-vip-ticket-box.vip-card-lv1 .card-top .vip-lv-area2 span,
.player-vip-box.vip-card-lv1 .card-top p,
.player-vip-ticket-box.vip-card-lv1 .card-top p {
    color: #fffc;
    font-size: 3.2vw;
    transform: scale(.9);
    transform-origin: left
}

.player-vip-box.vip-card-lv1 .card-bottom,
.player-vip-ticket-box.vip-card-lv1 .card-bottom {
    display: flex;
    flex-flow: row-reverse nowrap;
    align-items: center;
    background: #807c70;
    height: 8.5333333333vw;
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    padding: 0 4vw
}

.player-vip-box.vip-card-lv1 .card-bottom a,
.player-vip-ticket-box.vip-card-lv1 .card-bottom a {
    color: #dadada;
    font-size: 3.4666666667vw;
    text-decoration: none
}

.player-vip-box.vip-card-lv1 .card-bottom a .item-icon,
.player-vip-ticket-box.vip-card-lv1 .card-bottom a .item-icon {
    display: inline-block;
    width: 3.2vw;
    height: 2.6666666667vw;
    margin-left: 2.6666666667vw;
    background: #dadada;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: cover;
    vertical-align: middle
}

.player-vip-box.vip-card-lv1.vip-card-lv2 .card-top,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv2 .card-top {
    background: linear-gradient(90deg, #908a8a, #747474 50%)
}

.player-vip-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area1 .lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area1 .lv-totem {
    background: linear-gradient(180deg, #fff, #dfdfdf)
}

.player-vip-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area1 .item-icon,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area1 .item-icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 60%
}

.player-vip-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area2 .next-lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv2 .card-top .vip-lv-area2 .next-lv-totem {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-box.vip-card-lv1.vip-card-lv2 .card-bottom,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv2 .card-bottom {
    background: #222
}

.player-vip-box.vip-card-lv1.vip-card-lv3 .card-top,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv3 .card-top {
    background: linear-gradient(90deg, #7d7757, #ab8c45 50%)
}

.player-vip-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area1 .lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area1 .lv-totem {
    background: linear-gradient(180deg, #fff, #dfdfdf)
}

.player-vip-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area1 .item-icon,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area1 .item-icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 60%
}

.player-vip-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area2 .next-lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv3 .card-top .vip-lv-area2 .next-lv-totem {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-box.vip-card-lv1.vip-card-lv3 .card-bottom,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv3 .card-bottom {
    background: #8a7c3b
}

.player-vip-box.vip-card-lv1.vip-card-lv4 .card-top,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv4 .card-top {
    background: linear-gradient(90deg, #5f6e84, #304994 50%)
}

.player-vip-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area1 .lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area1 .lv-totem {
    background: linear-gradient(180deg, #fff, #dfdfdf)
}

.player-vip-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area1 .item-icon,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area1 .item-icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 60%
}

.player-vip-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area2 .next-lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv4 .card-top .vip-lv-area2 .next-lv-totem {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-box.vip-card-lv1.vip-card-lv4 .card-bottom,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv4 .card-bottom {
    background: #94979d
}

.player-vip-box.vip-card-lv1.vip-card-lv5 .card-top,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv5 .card-top {
    background: linear-gradient(90deg, #6c8abe, #304994 50%)
}

.player-vip-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area1 .lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area1 .lv-totem {
    background: linear-gradient(180deg, #fff, #dfdfdf)
}

.player-vip-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area1 .item-icon,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area1 .item-icon {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 60%
}

.player-vip-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area2 .next-lv-totem,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv5 .card-top .vip-lv-area2 .next-lv-totem {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-box.vip-card-lv1.vip-card-lv5 .card-bottom,
.player-vip-ticket-box.vip-card-lv1.vip-card-lv5 .card-bottom {
    background: #5f7ba5
}

.player-vip-box .status-box,
.player-vip-ticket-box .status-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.player-vip-box .status-box .status,
.player-vip-ticket-box .status-box .status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    padding: 1.3333333333vw
}

.player-vip-box .status-box .status.accept,
.player-vip-ticket-box .status-box .status.accept {
    position: relative
}

.player-vip-box .status-box .status.accept:after,
.player-vip-ticket-box .status-box .status.accept:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .2666666667vw;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .4) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667vw 2.6666666667vw
}

.player-vip-box .status-box .status.accept .number,
.player-vip-ticket-box .status-box .status.accept .number {
    color: #fd1111
}

.player-vip-box .status-box .status .number,
.player-vip-ticket-box .status-box .status .number {
    font-size: 8vw;
    margin-bottom: 1.8666666667vw
}

.player-vip-box .status-box .status .vip-cleader,
.player-vip-ticket-box .status-box .status .vip-cleader {
    width: 6.1333333333vw;
    height: 6.1333333333vw;
    background: #ffd269;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: cover;
    vertical-align: middle;
    margin-bottom: 1.8666666667vw
}

.player-vip-box .status-box .status .text,
.player-vip-ticket-box .status-box .status .text {
    color: #fffc;
    font-size: 3.2vw
}

.player-vip-ticket-box {
    margin: auto;
    padding: 1.3333333333vw 2.6666666667vw;
    background: initial;
    box-shadow: none
}

.player-vip-ticket-box:first-child {
    padding: 2.6666666667vw 2.6666666667vw 1.3333333333vw
}

.player-vip-ticket-box:last-child {
    padding: 1.3333333333vw 2.6666666667vw 2.6666666667vw
}

.player-vip-ticket-box .ticket-top {
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #222
}

.player-vip-ticket-box .ticket-dec-line-wrap {
    background: #222
}

.player-vip-ticket-box .ticket-bottom {
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    background: #222
}

.title2 {
    padding: 1.3333333333vw 4vw;
    color: #ffd269;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.player-vip-ticket-box .ticket-top {
    display: flex;
    position: relative;
    height: 26.6666666667vw;
    padding: 2.6666666667vw
}

.player-vip-ticket-box .ticket-top .ticket-top-left {
    width: 21.8666666667vw;
    height: 21.8666666667vw;
    border-radius: 1.3333333333vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.player-vip-ticket-box .ticket-top .ticket-top-right {
    padding-left: 2.6666666667vw;
    height: 21.8666666667vw
}

.player-vip-ticket-box .ticket-top .ticket-top-right .date {
    color: #fffc;
    font-size: 3.2vw
}

.player-vip-ticket-box .ticket-top .detail-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 13.3333333333vw;
    border: .2666666667vw solid #fd1111;
    border-radius: .8vw;
    padding: .8vw;
    margin-top: 2.1333333333vw
}

.player-vip-ticket-box .ticket-top .detail-btn a {
    color: #fd1111;
    font-size: 3.2vw;
    text-decoration: none
}

.player-vip-ticket-box .ticket-dec-line-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center
}

.player-vip-ticket-box .ticket-dec-line-wrap .left-dot {
    width: 2.1333333333vw;
    height: 4.2666666667vw;
    border-radius: 0 4.2666666667vw 4.2666666667vw 0;
    background: #fff6
}

.player-vip-ticket-box .ticket-dec-line-wrap .center-dot-line {
    flex: 1;
    bottom: 0;
    width: 100%;
    height: .2666666667vw;
    background: linear-gradient(to left, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, .4) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw 2.6666666667vw
}

.player-vip-ticket-box .ticket-dec-line-wrap .right-dot {
    width: 2.1333333333vw;
    height: 4.2666666667vw;
    border-radius: 4.2666666667vw 0 0 4.2666666667vw;
    background: #fff6
}

.player-vip-ticket-box .ticket-bottom {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    height: 12vw;
    padding: 1.3333333333vw 2.6666666667vw 2.6666666667vw
}

.player-vip-ticket-box .ticket-bottom .need-point {
    width: auto;
    height: 7.4666666667vw;
    border-radius: 28px;
    background: #0000004d;
    line-height: 7.4666666667vw;
    padding: 0 4vw
}

.player-vip-ticket-box .ticket-bottom .need-point .point-number {
    color: #fd1111;
    font-size: 3.2vw
}

.player-vip-ticket-box .ticket-bottom .need-point .point-number .item-icon {
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 2.6666666667vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: cover;
    vertical-align: text-top
}

.player-vip-ticket-box .ticket-bottom .btn-receive {
    min-width: 32vw;
    height: 7.4666666667vw;
    border-radius: 1.3333333333vw;
    box-shadow: 0 2px 4px #00000040;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center;
    background: linear-gradient(230deg, #fe5d5d, #fd1111)
}

.player-vip-detailed-menu {
    padding: 4.2666666667vw 4.2666666667vw 0
}

.player-vip-detailed-menu .btn {
    display: flex;
    position: relative;
    flex-flow: column-reverse nowrap;
    align-items: center;
    width: 30%;
    height: 32vw;
    margin: 2.6666666667vw 2.6666666667vw 0 0;
    transition: .3s;
    border-radius: 2.6666666667vw 50% 2.6666666667vw 2.6666666667vw;
    background: linear-gradient(180deg, #aaa591, #000);
    background-position: left bottom;
    background-size: 100%;
    box-shadow: 0 .8vw 1.3333333333vw #0003
}

.player-vip-detailed-menu .btn.active {
    transform: translateY(-5px) scale(1);
    box-shadow: 0 .8vw 1.3333333333vw #0003
}

.player-vip-detailed-menu .btn .item-icon {
    position: absolute;
    width: 100%;
    height: 32vw;
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu .vip-lv2 {
    background: linear-gradient(180deg, #cecece, #000)
}

.player-vip-detailed-menu .vip-lv2 .item-icon {
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu .vip-lv3 {
    background: linear-gradient(180deg, #cec182, #000)
}

.player-vip-detailed-menu .vip-lv3 .item-icon {
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu .vip-lv4 {
    background: linear-gradient(180deg, #c9ced8, #000)
}

.player-vip-detailed-menu .vip-lv4 .item-icon {
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu .vip-lv5 {
    background: linear-gradient(180deg, #b7cae6, #000)
}

.player-vip-detailed-menu .vip-lv5 .item-icon {
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu .vip-lv6 {
    background: linear-gradient(180deg, #b7cae6, #000)
}

.player-vip-detailed-menu .vip-lv6 .item-icon {
    background-position: left bottom;
    background-size: 100%
}

.player-vip-detailed-menu p {
    position: relative;
    color: #dadada;
    font-size: 3.4666666667vw;
    line-height: 1.2
}

.player-vip-detailed-menu .vip-level-icon {
    top: 0;
    right: -2.6666666667vw;
    width: 11.2vw;
    height: 11.2vw;
    transition: .3s
}

.player-vip-detailed-menu .slick-dots {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 2.6666666667vw
}

.player-vip-detailed-menu .slick-dots li {
    display: inline-block;
    position: relative;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin: 0 2.1333333333vw;
    overflow: hidden;
    text-indent: -2666.4vw
}

.player-vip-detailed-menu .slick-dots li button {
    display: block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    padding: 1.0666666667vw;
    border: 0;
    background: transparent;
    color: transparent
}

.player-vip-detailed-menu .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%;
    background: #ffffffb3
}

.player-vip-detailed-menu .slick-dots li.slick-active button:before {
    background: #fd1111
}

.player-vip-detailed-box {
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s
}

.player-vip-detailed-box .inner-wrap {
    display: flex;
    transition: all .2s
}

.player-vip-detailed-box .inner-wrap .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 90%;
    height: auto;
    margin: 3.2vw 5%;
    overflow: hidden;
    border-radius: 2.6666666667vw;
    background: #222;
    box-shadow: 0 0 1.6vw #0000004d
}

.player-vip-detailed-box .title {
    margin: 4.2666666667vw 4.2666666667vw 0
}

.player-vip-detailed-box .title h2 {
    color: #fff;
    font-size: 4vw;
    font-weight: 600
}

.player-vip-detailed-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    border-radius: 2.1333333333vw;
    background: #ffd269;
    vertical-align: middle
}

.player-vip-detailed-box .title span {
    display: inline-block;
    vertical-align: middle
}

.head-lv-name {
    height: 8.5333333333vw;
    padding-left: 4.2666666667vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: linear-gradient(90deg, #bcb8a8, #80795a);
    color: #fff;
    line-height: 8.5333333333vw
}

.vip-lv1 .head-lv-name {
    background: linear-gradient(90deg, #928f82, #817b5c 50%)
}

.vip-lv2 .head-lv-name {
    background: linear-gradient(90deg, #908a8a, #747474 50%)
}

.vip-lv3 .head-lv-name {
    background: linear-gradient(90deg, #7d7757, #ab8c45 50%)
}

.vip-lv4 .head-lv-name {
    background: linear-gradient(90deg, #5f6e84, #304994 50%)
}

.vip-lv5 .head-lv-name,
.vip-lv6 .head-lv-name {
    background: linear-gradient(90deg, #6c8abe, #304994 50%)
}

.lv-info-wrap {
    padding: 4.2666666667vw;
    border-bottom: .2666666667vw solid #000000
}

.lv-info-wrap .status-box.status-box2 {
    flex-wrap: wrap
}

.lv-info-wrap .status-box .text {
    color: #dadada;
    font-size: 3.2vw
}

.lv-info-wrap .status-box .status {
    width: 33%
}

.lv-info-wrap .status-box .status .number {
    margin-bottom: 1.8666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 700
}

.lv-info-wrap .status-box .status .number.number2 {
    color: #fd1111;
    font-size: 4.2666666667vw
}

.lv-info-wrap .status-box .status.accept2 {
    position: relative;
    width: 48%;
    height: 17.3333333333vw;
    margin: 0 2.6666666667vw 2.6666666667vw 0;
    padding: 2.6666666667vw;
    border-radius: 2.6666666667vw;
    background: #0000004d;
    box-shadow: 0 .8vw 1.3333333333vw #0003, inset .2666666667vw .2666666667vw #fff3
}

.lv-info-wrap .status-box .status.accept2:nth-child(2n) {
    margin: 0 0 2.6666666667vw
}

.lv-info-wrap .status-box .status.accept2 .text {
    color: #fffc
}

.terms .terms-link {
    margin-bottom: 2.6666666667vw;
    color: #fd1111
}

.terms p {
    color: #fd1111;
    font-size: 3.2vw;
    line-height: 5.3333333333vw
}

.vip-list {
    width: auto;
    height: auto;
    margin: 2.6666666667vw;
    overflow: hidden;
    border-radius: 2.6666666667vw
}

.vip-list .rf-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    line-height: 1.3;
    align-items: center
}

.vip-list .rf-list.form-title {
    padding: 2.1333333333vw 2.6666666667vw;
    background: #550b0b;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500
}

.vip-list .rf-list.form-content {
    padding: 1.3333333333vw 2.6666666667vw;
    background: #2e2f31;
    color: #fff;
    font-size: 2.9333333333vw
}

.vip-list .rf-list.form-content:nth-child(2n) {
    background: #222
}

.vip-list .list-title .list-field {
    line-height: 1.5
}

.vip-list .list-content .list-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.vip-list .vip-source,
.vip-list .vip-use {
    flex: 0 0 30%
}

.vip-list .vip-time {
    flex: 0 0 30%;
    text-align: center
}

.vip-list .vip-no {
    flex: 1 0 10%
}

.vip-list .vip-point {
    flex: 0 0 30%
}

.tag-free {
    position: absolute;
    z-index: 1;
    top: 1.3333333333vw;
    left: -1.0666666667vw;
    width: 4.8vw;
    height: 4vw;
    background: #ffef66
}

.tag-free:before,
.tag-free:after {
    content: ""
}

.tag-free .tag-free-icon {
    position: absolute;
    z-index: 2;
    top: 0;
    left: .4vw;
    width: 100%;
    height: 100%;
    background: #111;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 80%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 80%
}

.tag-free:after {
    position: absolute;
    top: 0;
    left: 4.8vw;
    border-top: 2vw solid transparent;
    border-bottom: 2vw solid transparent;
    border-left: 1.3333333333vw solid #ffef66;
    background: #222
}

.biometric-info {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 0 4vw;
    text-align: center
}

.biometric-info .biometric-animation {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 58.6666666667vw;
    height: 58.6666666667vw;
    margin: 21.3333333333vw auto
}

.biometric-info .biometric-animation object,
.biometric-info .biometric-animation .object {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    border-radius: 50%
}

.biometric-info .biometric-animation object svg,
.biometric-info .biometric-animation .object svg {
    width: 26.6666666667vw;
    height: 26.6666666667vw
}

.biometric-info .biometric-animation object #icon-face,
.biometric-info .biometric-animation .object #icon-face {
    fill: #fd1111
}

.biometric-info .biometric-animation object #eyes,
.biometric-info .biometric-animation .object #eyes {
    transform-origin: center;
    animation: eyes-blink 3s 1.5s infinite
}

.biometric-info .biometric-animation .graduations .graduation {
    top: 2.4074074074vw;
    transform-origin: 0 26.962962963vw;
    display: block;
    position: absolute;
    left: 50%;
    width: .8vw;
    height: 2.6666666667vw;
    transform: rotate(0) trargb(7, 8, 7) -50%;
    border-radius: 2.6666666667vw;
    background: #fd1111
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(1) {
    transform: rotate(1deg) translate(-50%);
    animation: line-wave 6s .1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(2) {
    transform: rotate(7deg) translate(-50%);
    animation: line-wave 6s .2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(3) {
    transform: rotate(13deg) translate(-50%);
    animation: line-wave 6s .3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(4) {
    transform: rotate(19deg) translate(-50%);
    animation: line-wave 6s .4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(5) {
    transform: rotate(25deg) translate(-50%);
    animation: line-wave 6s .5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(6) {
    transform: rotate(31deg) translate(-50%);
    animation: line-wave 6s .6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(7) {
    transform: rotate(37deg) translate(-50%);
    animation: line-wave 6s .7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(8) {
    transform: rotate(43deg) translate(-50%);
    animation: line-wave 6s .8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(9) {
    transform: rotate(49deg) translate(-50%);
    animation: line-wave 6s .9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(10) {
    transform: rotate(55deg) translate(-50%);
    animation: line-wave 6s 1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(11) {
    transform: rotate(61deg) translate(-50%);
    animation: line-wave 6s 1.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(12) {
    transform: rotate(67deg) translate(-50%);
    animation: line-wave 6s 1.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(13) {
    transform: rotate(73deg) translate(-50%);
    animation: line-wave 6s 1.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(14) {
    transform: rotate(79deg) translate(-50%);
    animation: line-wave 6s 1.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(15) {
    transform: rotate(85deg) translate(-50%);
    animation: line-wave 6s 1.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(16) {
    transform: rotate(91deg) translate(-50%);
    animation: line-wave 6s 1.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(17) {
    transform: rotate(97deg) translate(-50%);
    animation: line-wave 6s 1.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(18) {
    transform: rotate(103deg) translate(-50%);
    animation: line-wave 6s 1.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(19) {
    transform: rotate(109deg) translate(-50%);
    animation: line-wave 6s 1.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(20) {
    transform: rotate(115deg) translate(-50%);
    animation: line-wave 6s 2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(21) {
    transform: rotate(121deg) translate(-50%);
    animation: line-wave 6s 2.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(22) {
    transform: rotate(127deg) translate(-50%);
    animation: line-wave 6s 2.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(23) {
    transform: rotate(133deg) translate(-50%);
    animation: line-wave 6s 2.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(24) {
    transform: rotate(139deg) translate(-50%);
    animation: line-wave 6s 2.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(25) {
    transform: rotate(145deg) translate(-50%);
    animation: line-wave 6s 2.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(26) {
    transform: rotate(151deg) translate(-50%);
    animation: line-wave 6s 2.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(27) {
    transform: rotate(157deg) translate(-50%);
    animation: line-wave 6s 2.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(28) {
    transform: rotate(163deg) translate(-50%);
    animation: line-wave 6s 2.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(29) {
    transform: rotate(169deg) translate(-50%);
    animation: line-wave 6s 2.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(30) {
    transform: rotate(175deg) translate(-50%);
    animation: line-wave 6s 3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(31) {
    transform: rotate(181deg) translate(-50%);
    animation: line-wave 6s 3.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(32) {
    transform: rotate(187deg) translate(-50%);
    animation: line-wave 6s 3.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(33) {
    transform: rotate(193deg) translate(-50%);
    animation: line-wave 6s 3.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(34) {
    transform: rotate(199deg) translate(-50%);
    animation: line-wave 6s 3.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(35) {
    transform: rotate(205deg) translate(-50%);
    animation: line-wave 6s 3.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(36) {
    transform: rotate(211deg) translate(-50%);
    animation: line-wave 6s 3.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(37) {
    transform: rotate(217deg) translate(-50%);
    animation: line-wave 6s 3.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(38) {
    transform: rotate(223deg) translate(-50%);
    animation: line-wave 6s 3.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(39) {
    transform: rotate(229deg) translate(-50%);
    animation: line-wave 6s 3.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(40) {
    transform: rotate(235deg) translate(-50%);
    animation: line-wave 6s 4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(41) {
    transform: rotate(241deg) translate(-50%);
    animation: line-wave 6s 4.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(42) {
    transform: rotate(247deg) translate(-50%);
    animation: line-wave 6s 4.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(43) {
    transform: rotate(253deg) translate(-50%);
    animation: line-wave 6s 4.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(44) {
    transform: rotate(259deg) translate(-50%);
    animation: line-wave 6s 4.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(45) {
    transform: rotate(265deg) translate(-50%);
    animation: line-wave 6s 4.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(46) {
    transform: rotate(271deg) translate(-50%);
    animation: line-wave 6s 4.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(47) {
    transform: rotate(277deg) translate(-50%);
    animation: line-wave 6s 4.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(48) {
    transform: rotate(283deg) translate(-50%);
    animation: line-wave 6s 4.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(49) {
    transform: rotate(289deg) translate(-50%);
    animation: line-wave 6s 4.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(50) {
    transform: rotate(295deg) translate(-50%);
    animation: line-wave 6s 5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(51) {
    transform: rotate(301deg) translate(-50%);
    animation: line-wave 6s 5.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(52) {
    transform: rotate(307deg) translate(-50%);
    animation: line-wave 6s 5.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(53) {
    transform: rotate(313deg) translate(-50%);
    animation: line-wave 6s 5.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(54) {
    transform: rotate(319deg) translate(-50%);
    animation: line-wave 6s 5.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(55) {
    transform: rotate(325deg) translate(-50%);
    animation: line-wave 6s 5.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(56) {
    transform: rotate(331deg) translate(-50%);
    animation: line-wave 6s 5.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(57) {
    transform: rotate(337deg) translate(-50%);
    animation: line-wave 6s 5.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(58) {
    transform: rotate(343deg) translate(-50%);
    animation: line-wave 6s 5.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(59) {
    transform: rotate(349deg) translate(-50%);
    animation: line-wave 6s 5.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(60) {
    transform: rotate(355deg) translate(-50%);
    animation: line-wave 6s 6s infinite ease-in-out
}

.biometric-info h3 {
    margin-bottom: 1.3333333333vw;
    color: #fff;
    font-size: 4vw;
    font-weight: 700
}

.biometric-info p {
    width: inherit;
    margin-bottom: 5.3333333333vw;
    color: #7e7e7e;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.biometric-info .biometric-switch {
    position: relative;
    width: 18.9333333333vw;
    height: 10.6666666667vw;
    margin: 0 auto;
    padding: 0 2.6666666667vw;
    transition: all .3s;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 10.6666666667vw;
    background: #7e7e7e;
    font-size: 3.4666666667vw;
    line-height: 10.6666666667vw
}

.biometric-info .biometric-switch .item-icon {
    content: "";
    display: block;
    position: absolute;
    top: 1.0666666667vw;
    left: 1.0666666667vw;
    width: 8vw;
    height: 8vw;
    transition: all .3s;
    border-radius: 50%;
    background-repeat: no-repeat
}

.biometric-info .biometric-switch.active {
    background: #009600;
    text-indent: 8vw
}

.biometric-info .biometric-switch.active .item-icon {
    left: 8.8vw
}

.biometric-info .member-error {
    margin: 1.3333333333vw 0 0;
    padding: 0
}

.biometric-info .member-error:before {
    display: none
}

.biometric-info .member-error span {
    color: #f51111
}

.pop-biometric-success {
    display: none
}

.pop-biometric-success .biometric-success-cont h3 {
    color: #009600
}

.face-id-wrapper {
    position: relative;
    width: 24vw;
    height: 24vw;
    margin: 0 auto 2.6666666667vw
}

.face-id-wrapper.active .path-face {
    transform: scale(1.2);
    transition: opacity 1.5s, transform 1s;
    stroke: #009600;
    opacity: 0;
    fill: #009600
}

.face-id-wrapper.active .circle.line1 {
    animation: rotateX 2s
}

.face-id-wrapper.active .circle.line2 {
    animation: rotateY 2.1s
}

.face-id-wrapper.active .circle.line3 {
    animation: rotateXY 2.2s
}

.face-id-wrapper.active .path-check {
    animation: check 2.2s;
    opacity: 1
}

.face-id-wrapper .path-face {
    position: relative;
    top: 1.3333333333vw;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    margin: 0 auto;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background: #009600
}

.face-id-wrapper .circle {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    width: 24vw;
    height: 24vw;
    border-radius: 50%;
    background: transparent
}

.face-id-wrapper .circle.line1 {
    border: 1.0666666667vw solid #009600
}

.face-id-wrapper .circle.line2 {
    border: 1.0666666667vw solid #006bff
}

.face-id-wrapper .circle.line3 {
    border: 1.0666666667vw solid #fc6212
}

.face-id-wrapper .path-check {
    position: absolute;
    top: 0;
    width: 24vw;
    height: 24vw;
    opacity: 0
}

@keyframes eyes-blink {
    5% {
        transform: scaleY(.05)
    }
    6.5% {
        transform: scaleY(1)
    }
}

@keyframes line-wave {
    0% {
        box-shadow: 0 -.2666666667vw #fd1111
    }
    1% {
        box-shadow: 0 -.5333333333vw #fd1111
    }
    2% {
        box-shadow: 0 -.8vw #fd1111
    }
    3% {
        box-shadow: 0 -1.0666666667vw #fd1111
    }
    4% {
        box-shadow: 0 -1.3333333333vw #fd1111
    }
    5% {
        box-shadow: 0 -1.6vw #fd1111
    }
    6% {
        box-shadow: 0 -1.8666666667vw #fd1111
    }
    7% {
        box-shadow: 0 -2.1333333333vw #fd1111
    }
    24% {
        box-shadow: 0 0 #fd1111
    }
    25% {
        background: #700402;
        box-shadow: 0 0 #000
    }
    to {
        background: #fd1111;
        box-shadow: 0 0 #000
    }
}

@keyframes rotateX {
    0% {
        opacity: 0
    }
    40% {
        opacity: .9
    }
    to {
        transform: rotateX(360deg);
        opacity: 0
    }
}

@keyframes rotateY {
    0% {
        opacity: 0
    }
    40% {
        opacity: .9
    }
    to {
        transform: rotateY(360deg);
        opacity: 0
    }
}

@keyframes rotateXY {
    0% {
        opacity: 0
    }
    40% {
        opacity: .9
    }
    to {
        transform: rotateY(360deg) rotateX(360deg);
        opacity: 0
    }
}

@keyframes check {
    0% {
        opacity: 0
    }
    60% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

header.scroll-detecting {
    transition: background .5s
}

header.scroll-detecting.scroll,
header.scroll-detecting.dialog-opened {
    background: #fd1111;
    position: fixed;
    transform: translateY(-100%);
    animation: slideDown .5s forwards
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    to {
        transform: translateY(0)
    }
}

#holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .2
}

html.is-desktop .vip-content,
html.is-mobile .vip-content {
    height: auto
}

.vip-content {
    background: linear-gradient(180deg, #444, #222) !important;
    font-family: Helvetica Neue, sans-serif;
    min-height: 100% !important;
    height: calc(100vh - 13.3333333333vw);
    overflow-y: auto;
    padding-top: 13.3333333333vw
}

.vip-content .card-top {
    padding: 6.4vw 4.2666666667vw
}

.vip-content .card-top .lv-totem {
    width: 12vw;
    height: 12vw;
    margin-right: 4vw;
    border-radius: 50%
}

.vip-content .card-top .lv-totem .item-icon {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%
}

.vip-content .card-top .next-lv-totem {
    width: 8vw;
    height: 8vw;
    margin-left: 4vw;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover
}

.vip-content .card-top .vip-lv-area {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 4.2666666667vw
}

.vip-content .card-top .vip-lv-area:nth-child(2) {
    margin-bottom: 0
}

.vip-content .card-top .vip-lv-area .lv-text {
    color: #fff
}

.vip-content .card-top .vip-lv-area .lv-text .text {
    margin-bottom: 1.3333333333vw;
    font-size: 3.2vw;
    font-weight: 700
}

.vip-content .card-top .vip-lv-area .lv-text .text:lang(bn) {
    letter-spacing: 0
}

html.is-desktop .vip-content .card-top .vip-lv-area .lv-text .text {
    max-width: none
}

.vip-content .card-top .vip-lv-area .lv-text h2 {
    font-size: 4.8vw;
    font-weight: 700;
    text-transform: uppercase
}

.vip-content .card-top .vip-lv-area .lv-history {
    position: absolute;
    right: 0;
    display: flex;
    width: auto;
    height: auto;
    border-radius: 5.3333333333vw;
    padding: 1.6vw 2.6666666667vw;
    background: var(--vip-card-history-btn-bg, linear-gradient(to bottom, #e1cb9d 0%, #bba36c 100%));
    border-radius: 2.6666666667vw;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-transform: capitalize
}

.vip-content .card-top .vip-lv-area .lv-history .item-icon {
    display: inline-flex;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #fff;
    margin-left: .5333333333vw;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.vip-content .card-top .vip-lv-area .lv-history p {
    display: inline-flex;
    margin-left: 1.3333333333vw 1.3333333333vw 0;
    font-size: 3.2vw;
    color: var(--vip-card-history-btn-txt, #ffffff);
    margin: 0 0 0 1.3333333333vw;
    line-height: 5.3333333333vw
}

.vip-content .card-top .vip-lv-area .progress-bar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1
}

.vip-content .card-top .vip-lv-area .progress-bar .txt {
    display: flex;
    justify-content: flex-end
}

.vip-content .card-top .vip-lv-area .progress-bar .txt p {
    margin: 0;
    width: -moz-fit-content;
    width: fit-content;
    transform-origin: right
}

.vip-content .card-top .vip-lv-area .progress-bar .txt span {
    color: var(--vip-points-progress-bar-txt, #fd1111);
    font-weight: 500
}

.vip-content .card-top .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333vw;
    margin-bottom: 0;
    border-radius: 1.3333333333vw;
    background: #fff3;
    box-shadow: inset 0 0 .2666666667vw #fff
}

.vip-content .card-top .bar .bar-inner {
    animation: progress-animation 5s linear infinite;
    background: linear-gradient(0deg, #700402, #e31210);
    background-size: 300% 100%;
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #fd111166, 0 0 .8vw #fd111166
}

.vip-content .card-top .bar .bar-inner:after {
    right: -2.4vw;
    width: 1.6vw;
    height: 1.6vw;
    box-shadow: 0 0 10px 1px #fff
}

.vip-content .card-top p {
    margin: 3.2vw 0 0;
    transform-origin: left;
    color: #ffffffb3;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw;
    text-decoration: none
}

.vip-content .card-top p i {
    font-weight: 500;
    color: var(--vip-points-card-top-info-txt-strong, #fd1111)
}

.vip-content .card-bottom {
    display: flex;
    flex-flow: row-reverse nowrap;
    align-items: center;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 4vw;
    border-radius: 0 0 5.3333333333vw 5.3333333333vw;
    background: #ffffff1a;
    z-index: 1
}

.vip-content .card-bottom a {
    color: #ffffffb3;
    font-size: 3.4666666667vw;
    text-decoration: none
}

.vip-content .card-bottom a .item-icon {
    display: inline-block;
    width: 3.2vw;
    height: 2.6666666667vw;
    margin-left: 2.6666666667vw;
    background: #ffffffb3;
    vertical-align: middle;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: 90%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: 90%
}

.vip-content .player-vip-box {
    position: relative;
    margin: 1.3333333333vw 4vw 2.1333333333vw;
    border-radius: 5.3333333333vw;
    background: transparent;
    box-shadow: none;
    padding: 0
}

.vip-content .player-vip-box.lv1 .card-top .lv-totem {
    background: linear-gradient(to bottom, #b5b1a0, #898366)
}

.vip-content .player-vip-box.lv1 .card-top .lv-totem .item-icon {
    background-position: 35% center
}

.vip-content .player-vip-box.lv2 .card-top .lv-totem {
    background: linear-gradient(to bottom, #cfcfcf, #6d6d6d)
}

.vip-content .player-vip-box.lv3 .card-top .lv-totem {
    background: linear-gradient(to bottom, #c5b569, #a88741)
}

.vip-content .player-vip-box.lv4 .card-top .lv-totem {
    background: linear-gradient(to bottom, #e2e5e9, #a0a9b6)
}

.vip-content .player-vip-box.lv5 .card-top .lv-totem {
    background: linear-gradient(to bottom, #afc3e7, #37529a)
}

.vip-content .player-vip-box .title {
    position: relative;
    color: #ffffff80;
    font-size: 3.4666666667vw
}

.vip-content .player-vip-box .title h2 {
    color: #fffc;
    font-size: 3.7333333333vw
}

.vip-content .player-vip-box .title h2:before {
    background: #fd1111
}

.vip-content .player-vip-box.total {
    padding: 2.6666666667vw
}

.vip-content .player-vip-box .refresh {
    display: inline-flex;
    position: absolute;
    right: 0;
    bottom: .2666666667vw
}

.vip-content .player-vip-box .refresh .refresh-icon {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-left: 1.6vw;
    background: #fd1111;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: cover
}

.vip-content .player-vip-box .status-box {
    display: inline-block;
    width: 100%
}

.vip-content .player-vip-box .status-box .status {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 86%;
    padding: 0;
    background: transparent
}

.vip-content .player-vip-box .status-box .status .number {
    margin-right: 2.6666666667vw;
    margin-bottom: 0;
    color: #fff;
    font-size: 9.3333333333vw
}

.vip-content .player-vip-box .status-box .status:after {
    content: none
}

.vip-content .player-vip-box .status-box .status .text {
    width: auto;
    height: 5.3333333333vw;
    margin-top: 3.2vw;
    padding: 0 2.6666666667vw;
    border-radius: 13.3333333333vw;
    background: #0003;
    color: #ffffff80;
    font-size: 3.4666666667vw;
    line-height: 5.3333333333vw
}

.vip-content .player-vip-box .status-box .cleader {
    position: absolute;
    right: 4.2666666667vw;
    bottom: 2.6666666667vw;
    display: flex;
    width: auto;
    height: auto;
    padding: 1.6vw 2.6666666667vw;
    background: var(--vip-total-record-btn-bg, linear-gradient(to bottom, #e1cb9d 0%, #bba36c 100%));
    border-radius: 2.6666666667vw;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-transform: capitalize
}

.vip-content .player-vip-box .status-box .cleader .item-icon {
    display: inline-flex;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #fff;
    margin-left: .5333333333vw;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.vip-content .player-vip-box .status-box .cleader p {
    display: inline-flex;
    margin-left: 1.3333333333vw;
    font-size: 3.2vw;
    color: var(--vip-total-record-btn-txt, #ffffff);
    margin: 0 0 0 1.3333333333vw;
    line-height: 5.3333333333vw
}

.vip-content .player-vip-box .status-box .cleader a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16vw;
    height: 10.6666666667vw
}

.vip-content .vip-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 45.8666666667vw;
    border-radius: 5.3333333333vw;
    background: var(--vip-card-bg, #2e2f31);
    box-shadow: inset 0 0 1.3333333333vw -.8vw var(--vip-card-shadow, #ffffff);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 0
}

.vip-content .cash-card {
    padding: 0
}

.vip-content .cash-card .title {
    margin: 0 0 4vw;
    padding-left: 2.6666666667vw
}

.vip-content .cash-card .cash-points {
    display: inline-flex;
    width: 100%;
    padding: 2.6666666667vw;
    border-radius: 5.3333333333vw;
    background: #2e2f31;
    box-shadow: inset 0 0 5px -3px #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.vip-content .cash-card .cash-points .coin {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position: relative;
    width: 25%;
    height: auto
}

.vip-content .cash-card .cash-points .movie-box {
    width: 100%;
    height: auto;
    padding: 0
}

.vip-content .cash-detail {
    width: 75%;
    padding: 1.3333333333vw 2.6666666667vw
}

.vip-content .cash-detail .detail-title {
    position: relative;
    margin: 2.6666666667vw 0;
    color: #ffffffb3;
    font-size: 3.4666666667vw
}

.vip-content .cash-detail .detail-title .text {
    float: right
}

.vip-content .cash-detail .detail-title .text span {
    margin-left: 1.3333333333vw
}

.vip-content .cash-detail .cash-input input[type=number] {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    padding: 2.6666666667vw;
    border: 0;
    border-radius: 1.3333333333vw;
    outline: none;
    background: #0003;
    color: #fd1111;
    font-size: 5.3333333333vw;
    text-align: left;
    box-shadow: 0 0 .8vw #0003 inset
}

.vip-content .cash-detail .cash-input input[type=number]::placeholder {
    color: #ffffff4d
}

.vip-content .cash-detail .cash-input.error input[type=number] {
    animation: shake-horizontal .5s cubic-bezier(.455, .3, .515, .955) both;
    color: #f51111;
    border: .2666666667vw solid #f51111
}

.vip-content .cash-detail .conversion {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-height: 8.5333333333vw;
    margin: 2.6666666667vw 0;
    color: #ffffffb3;
    font-size: 3.2vw
}

.vip-content .cash-detail .conversion .ratio {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start
}

.vip-content .cash-detail .conversion .ratio .text {
    margin-left: 2.6666666667vw;
    color: #fd1111
}

.vip-content .cash-detail .conversion .ratio.hide {
    display: none
}

.vip-content .cash-detail .conversion .error-tip {
    display: -webkit-inline-box;
    flex-flow: row nowrap;
    align-content: flex-start;
    justify-content: space-between;
    height: 100%
}

.vip-content .cash-detail .conversion .error-tip:before {
    content: "!";
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    border-radius: 5.3333333333vw;
    background: #f51111;
    color: #fff;
    line-height: 3.7333333333vw;
    text-align: center
}

.vip-content .cash-detail .conversion .error-tip .text {
    margin-left: 2.1333333333vw;
    color: #f51111
}

.vip-content .cash-detail .conversion .error-tip.hide {
    display: none
}

.vip-content .convert-icon {
    display: flex;
    position: absolute;
    top: 25.3333333333vw;
    justify-content: center;
    width: 100%
}

.vip-content .convert-icon .chevron {
    position: absolute;
    width: 5.3333333333vw;
    height: .8vw;
    transform: scale(.3);
    opacity: 0
}

.vip-content .convert-icon .chevron:first-child {
    animation: move-chevron 2.8s ease-out infinite
}

.vip-content .convert-icon .chevron:first-child:before,
.vip-content .convert-icon .chevron:first-child:after {
    background: #d0a11b
}

.vip-content .convert-icon .chevron:nth-child(2) {
    animation: move-chevron 2.8s ease-out 1s infinite
}

.vip-content .convert-icon .chevron:nth-child(2):before,
.vip-content .convert-icon .chevron:nth-child(2):after {
    background: #9c9c9c
}

.vip-content .convert-icon .chevron:before,
.vip-content .convert-icon .chevron:after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%
}

.vip-content .convert-icon .chevron:before {
    left: 0;
    transform: skewY(30deg)
}

.vip-content .convert-icon .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg)
}

.vip-content .button {
    width: auto;
    height: 14.9333333333vw;
    margin: 4vw;
    border-radius: 5.3333333333vw;
    font-size: 4.2666666667vw;
    line-height: 14.9333333333vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

.vip-content .button.allow {
    overflow: hidden;
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 0 2.6666666667vw .5333333333vw #fd111180, inset 0 0 1.3333333333vw -.8vw #fff;
    text-shadow: 0 2px 1.0666666667vw #fd1111
}

.vip-content .button.allow:after {
    content: "";
    position: absolute;
    top: 0;
    width: 30%;
    height: 14.9333333333vw;
    transform: skew(-40deg);
    animation: shiny 3s ease 2s infinite;
    background: linear-gradient(to right, #fff0 0, #ffffff4d, #fff0)
}

.vip-content .button.default {
    background: linear-gradient(180deg, #444, #222);
    box-shadow: inset 0 0 1.3333333333vw -.8vw #fff;
    text-shadow: 0 .5333333333vw 1.0666666667vw #686868
}

.vip-content .button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.vip-content .convert-content {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    z-index: -1
}

.vip-content .convert-content.convert-content-index {
    z-index: 1
}

.vip-content .convert-content .convert-ani {
    position: relative;
    justify-content: center;
    align-items: center
}

.vip-content .convert-content .convert-ani .coin-block {
    width: 90%;
    height: 0%;
    margin: auto;
    border-radius: 5.3333333333vw;
    background: #2e2f31;
    box-shadow: inset 0 0 5px -3px #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.vip-content .convert-content .convert-ani .text {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 400
}

.vip-content .convert-content .convert-success {
    text-align: center
}

.vip-content .player-vip-box.vip-box-color-version .card-top p i {
    color: var(--vip-points-color-version-card-span, #ffcb50)
}

.vip-content .player-vip-box.vip-box-color-version .card-bottom a {
    color: var(--vip-points-color-version-card-link-txt, rgba(255, 255, 255, .7))
}

.vip-content .player-vip-box.vip-box-color-version .card-bottom span {
    background: var(--vip-points-color-version-card-icon-bg, #ffffff)
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv1 {
    background: var(--vip-points-color-version-card-bg-v1, linear-gradient(135deg, #66614c 0%, #9f9983 50%, #7a755b 100%)) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv2 {
    background: var(--vip-points-color-version-card-bg-v2, linear-gradient(135deg, #4e4e4e 0%, #b6b6b6 50%, #606060 100%)) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv3 {
    background: var(--vip-points-color-version-card-bg-v3, linear-gradient(135deg, #7c6430 0%, #b5a246 50%, #96783a 100%)) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv4 {
    background: var(--vip-points-color-version-card-bg-v4, linear-gradient(135deg, #7d8a9b 0%, #c5cbd3 50%, #929cab 100%)) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv5 {
    background: var(--vip-points-color-version-card-bg-v5, linear-gradient(135deg, #273a6d 0%, #88a6db 50%, #304887 100%)) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv6 {
    background: var(--vip-points-color-version-card-bg-v6, transparent) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv7 {
    background: var(--vip-points-color-version-card-bg-v7, #2e2f31) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv8 {
    background: var(--vip-points-color-version-card-bg-v8, #2e2f31) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv9 {
    background: var(--vip-points-color-version-card-bg-v9, #2e2f31) !important
}

.vip-content .player-vip-box.vip-box-color-version.vip-card.lv10 {
    background: var(--vip-points-color-version-card-bg-v10, #2e2f31) !important
}

.vip-content .player-vip-box.vip-box-color-version .level-highest {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: 48%;
    background-position: right 4vw top 10px;
    opacity: .5
}

@keyframes progress-animation {
    0% {
        background-position: 100%
    }
    50% {
        background-position: 0
    }
    to {
        background-position: 100%
    }
}

@keyframes shake-horizontal {
    0%,
    to {
        transform: translate(0)
    }
    10%,
    30%,
    50%,
    70% {
        transform: translate(-2px)
    }
    20%,
    40%,
    60% {
        transform: translate(2px)
    }
    80% {
        transform: translate(1px)
    }
    90% {
        transform: translate(-1px)
    }
}

@keyframes shiny {
    0% {
        left: -100%
    }
    to {
        left: 150%
    }
}

@keyframes move-chevron {
    25% {
        opacity: 1
    }
    33.3% {
        transform: translateY(1.6vw);
        opacity: 1
    }
    66.6% {
        transform: translateY(3.2vw);
        opacity: 1
    }
    to {
        transform: translateY(4.8vw) scale(.5);
        opacity: 0
    }
}

.acquired-content {
    padding: 0 4vw
}

.acquired-content .vip-year {
    margin: 2.6666666667vw 0;
    color: #fff;
    font-size: 4.8vw;
    font-weight: 500
}

.acquired-content .form-vip-history {
    position: relative;
    margin: 0 0 5.3333333333vw 16vw;
    padding: 5.3333333333vw;
    border-radius: 5.3333333333vw;
    background: #2e2f31;
    box-shadow: inset 0 0 5px -3px #fff;
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.acquired-content .form-vip-history:before {
    content: "";
    display: block;
    position: absolute;
    top: 10.1333333333vw;
    left: -4.2666666667vw;
    width: .5333333333vw;
    height: 29.3333333333vw;
    background: #fd1111
}

.acquired-content .form-vip-history:after {
    content: "";
    display: block;
    position: absolute;
    top: 5.8666666667vw;
    left: -5.0666666667vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-radius: 50%;
    border: 2px solid #fd1111
}

.acquired-content .form-vip-history:last-child:before {
    height: 21.3333333333vw
}

.acquired-content .form-vip-history:lang(vn):after,
.acquired-content .form-vip-history:lang(bn):after,
.acquired-content .form-vip-history:lang(tl):after {
    display: none
}

.acquired-content .form-vip-history:lang(vn):before,
.acquired-content .form-vip-history:lang(bn):before,
.acquired-content .form-vip-history:lang(tl):before {
    top: 11.2vw;
    height: 26.6666666667vw
}

.acquired-content .form-vip-history .vip-month {
    position: absolute;
    top: 4.2666666667vw;
    left: -16vw;
    color: #fffc
}

.acquired-content .form-vip-history .vip-month:lang(tl) {
    width: 16vw;
    text-align: right;
    font-size: 3.2vw;
    left: 0;
    top: 5.3333333333vw;
    transform: translate(-110%)
}

.acquired-content .form-vip-history .vip-level {
    margin-bottom: 2.6666666667vw;
    font-weight: 700
}

.acquired-content .form-vip-history .vip-level .text {
    margin-bottom: .5333333333vw;
    font-size: 2.6666666667vw
}

.acquired-content .form-vip-history .vip-level .level {
    font-size: 4.8vw;
    line-height: 5.3333333333vw;
    text-transform: uppercase
}

.acquired-content .form-vip-history .vip-level:after {
    content: "";
    display: block;
    position: absolute;
    top: 5.3333333333vw;
    right: 5.3333333333vw;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    z-index: 1
}

.acquired-content .form-vip-history .vip-level .item-icon {
    display: block;
    position: absolute;
    top: 5.3333333333vw;
    right: 5.3333333333vw;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    z-index: 2
}

.acquired-content .form-vip-history .vip-acquired .text {
    margin-bottom: 1.3333333333vw;
    font-size: 3.4666666667vw
}

.acquired-content .form-vip-history .vip-acquired .acquired {
    color: #fd1111;
    font-size: 3.7333333333vw
}

.acquired-content .form-vip-history .lv1 .item-icon {
    background-repeat: no-repeat;
    background-position: 35% center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv1:after {
    background: linear-gradient(to bottom, #b5b1a0, #898366)
}

.acquired-content .form-vip-history .lv2 .item-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv2:after {
    background: linear-gradient(to bottom, #cfcfcf, #6d6d6d)
}

.acquired-content .form-vip-history .lv3 .item-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv3:after {
    background: linear-gradient(to bottom, #c5b569, #a88741)
}

.acquired-content .form-vip-history .lv4 .item-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv4:after {
    background: linear-gradient(to bottom, #e2e5e9, #a0a9b6)
}

.acquired-content .form-vip-history .lv5 .item-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv5:after {
    background: linear-gradient(to bottom, #afc3e7, #37529a)
}

.acquired-content .form-vip-history .lv6 .item-icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

.acquired-content .form-vip-history .lv6:after {
    background: none
}

.vip-level-icon {
    position: absolute;
    z-index: 1;
    top: 5.3333333333vw;
    right: 5.3333333333vw;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.verification-wrap .verification-txt {
    margin-bottom: 2.6666666667vw;
    color: #fff;
    font-weight: 700;
    text-align: center
}

.verification-wrap .verification-txt span {
    display: block;
    color: #fd1111;
    line-height: 1.5
}

.verification-wrap .button .icon-mail {
    display: inline-flex;
    width: 5.3333333333vw;
    height: 4vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff
}

.verification-wrap .button.button-disable .icon-mail {
    background: #999
}

.verification-wrap .verification-content .button {
    width: auto
}

.verification-wrap .verification-content .button a {
    display: inline-flex
}

.real-time-bonus-wrap {
    -webkit-overflow-scrolling: touch
}

.real-time-bonus-wrap .tab-btn-block {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden
}

.tab-real-time-bonus {
    justify-content: flex-start;
    height: 8.5333333333vw;
    background: transparent !important
}

.tab-real-time-bonus .btn {
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 2.6666666667vw 0;
    border-radius: .8vw;
    color: #fff;
    background: #2e2f31
}

.tab-real-time-bonus .btn.active {
    background: linear-gradient(0deg, #700402, #e31210)
}

.tab-real-time-bonus .btn.active .text {
    color: #fff
}

.tab-real-time-bonus .btn+.btn {
    margin-left: 1.3333333333vw
}

.tab-real-time-bonus .btn .text {
    margin: 0 2.6666666667vw;
    font-size: 3.2vw;
    font-weight: 400;
    color: #fff
}

.tab-real-time-bonus .line {
    display: none
}

.available-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(to bottom, #000, #222)
}

.available-amount__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.available-amount__title {
    display: flex;
    align-items: center;
    margin: 4vw auto
}

.available-amount__icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 1.3333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: #fff
}

.available-amount__text {
    color: #fff;
    font-size: 3.7333333333vw
}

.available-amount__text--secondary {
    opacity: .7;
    margin-bottom: 4.2666666667vw
}

.available-amount__decor {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    margin: 4vw auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.available-amount__value {
    margin: 2.6666666667vw auto;
    color: #fff;
    font-weight: 700;
    font-size: 7.4666666667vw;
    text-align: center
}

.available-amount__button {
    display: flex;
    align-items: center;
    z-index: 1;
    width: -moz-fit-content;
    width: fit-content;
    height: 10.6666666667vw;
    line-height: 1.1;
    margin: 2.6666666667vw auto;
    padding: 1.6vw 8.5333333333vw;
    font-size: 4.2666666667vw;
    background: linear-gradient(0deg, #700402, #e31210)
}

.available-amount__button a {
    color: #fff
}

.available-amount__tips {
    font-size: 3.2vw;
    color: #fc6212;
    text-align: center
}

.available-amount__tips--rescue {
    margin: 4vw auto
}

.claimed-box {
    display: flex;
    justify-content: space-around;
    margin: 1.3333333333vw 0;
    text-align: center
}

.claimed-box__title {
    font-size: 3.2vw;
    font-weight: 700;
    color: #fd1111
}

.claimed-box__value {
    margin-top: 2.1333333333vw;
    font-size: 4.8vw;
    color: #fff
}

.bonus-summary__title {
    width: 100%;
    line-height: 9.3333333333vw;
    margin-bottom: 2.6666666667vw
}

.bonus-summary__title h2 {
    color: #fff;
    font-size: 4vw
}

.bonus-summary__title h2 span {
    display: inline-block;
    vertical-align: middle
}

.bonus-summary__title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    background: #fd1111;
    border-radius: .5333333333vw;
    vertical-align: middle
}

.real-time-bonuses-accordion {
    border: 0;
    background: #222
}

.real-time-bonuses-accordion .accordion-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2.6666666667vw;
    background: #2e2f31;
    cursor: pointer
}

.real-time-bonuses-accordion .accordion-header__main-info {
    display: flex;
    justify-content: space-between
}

.real-time-bonuses-accordion .accordion-header__title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    max-width: calc(100% - 5.3333333333vw);
    line-height: 1.2;
    font-size: 3.7333333333vw;
    font-weight: 700;
    color: #fff
}

.real-time-bonuses-accordion .accordion-header__arrow {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    background: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform .3s;
    transform: rotate(270deg)
}

.real-time-bonuses-accordion .accordion-header__total-amount-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "total-rebate total-rebate" "total-claimed total-expired";
    grid-gap: 1.3333333333vw;
    margin-top: 2.6666666667vw
}

.real-time-bonuses-accordion .total-rebate {
    grid-area: total-rebate;
    display: flex;
    justify-content: space-between
}

.real-time-bonuses-accordion .total-rebate__title {
    font-size: 3.2vw;
    color: #7e7e7e
}

.real-time-bonuses-accordion .total-rebate__value {
    font-size: 3.7333333333vw;
    font-weight: 700;
    color: #fd1111
}

.real-time-bonuses-accordion .total-claimed,
.real-time-bonuses-accordion .total-expired {
    padding: 2.1333333333vw;
    border-radius: .8vw;
    background: #222
}

.real-time-bonuses-accordion .total-claimed__title,
.real-time-bonuses-accordion .total-expired__title {
    display: block;
    margin-bottom: 1.3333333333vw;
    font-size: 3.2vw
}

.real-time-bonuses-accordion .total-claimed__value,
.real-time-bonuses-accordion .total-expired__value {
    display: block;
    font-size: 3.7333333333vw;
    text-align: right
}

.real-time-bonuses-accordion .total-claimed {
    grid-area: total-claimed
}

.real-time-bonuses-accordion .total-claimed__title {
    color: #7e7e7e
}

.real-time-bonuses-accordion .total-claimed__value {
    color: #fff
}

.real-time-bonuses-accordion .total-expired {
    grid-area: total-expired
}

.real-time-bonuses-accordion .total-expired__title {
    color: #7e7e7e
}

.real-time-bonuses-accordion .total-expired__value {
    color: #fff
}

.real-time-bonuses-accordion .accordion-collapse {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    opacity: 0
}

.real-time-bonuses-accordion .accordion-collapse__item {
    position: relative
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 4.2666666667vw;
    gap: 2.1333333333vw;
    padding: 2.1333333333vw 3.2vw;
    background: #1e1e1e
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header h4 {
    color: #fffc;
    font-size: 3.7333333333vw;
    line-height: normal
}

.real-time-bonuses-accordion .accordion-collapse__item .game-type-accordion-header .game-type-accordion-header__button {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    background: #fff;
    -webkit-mask-image: var(--icon-expand);
    mask-image: var(--icon-expand);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform .3s
}

.real-time-bonuses-accordion .game-type-accordion-collapse {
    display: flex;
    flex-direction: column;
    gap: 6.4vw;
    width: 100%;
    max-height: 0;
    padding: 0 3.2vw;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    opacity: 0
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.2vw
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item:first-child {
    margin-top: 3.2vw
}

.real-time-bonuses-accordion .game-type-accordion-collapse__item:last-child {
    margin-bottom: 3.2vw;
    border-bottom: none
}

.real-time-bonuses-accordion .game-type-accordion-collapse li+li:before {
    content: "";
    display: block;
    position: absolute;
    top: -3.2vw;
    width: 100%;
    height: .2666666667vw;
    background: #ffffff1a
}

.real-time-bonuses-accordion .game-type-title,
.real-time-bonuses-accordion .total-rebate-amount,
.real-time-bonuses-accordion .total-turnover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 3.2vw
}

.real-time-bonuses-accordion .game-type-title {
    font-weight: 700
}

.real-time-bonuses-accordion .vendor-name {
    color: #fffc
}

.real-time-bonuses-accordion .rebate-pct {
    display: inline
}

.real-time-bonuses-accordion .rebate-pct span {
    color: #fffc
}

.real-time-bonuses-accordion .rebate-pct span+span {
    margin-left: 1.3333333333vw
}

.real-time-bonuses-accordion .game-type-detail {
    display: flex;
    flex-direction: column;
    gap: 2.1333333333vw;
    color: #7e7e7e
}

.real-time-bonuses-accordion .total-rebate-amount {
    grid-column: 1/span 2;
    grid-row: 2/span 1
}

.real-time-bonuses-accordion .total-turnover {
    grid-column: 1/span 2;
    grid-row: 3/span 1
}

.accordion-wrap--expanded .accordion-header__arrow {
    transform: rotate(90deg)
}

.accordion-wrap--expanded .accordion-collapse {
    height: 100%;
    max-height: 266.6666666667vw;
    opacity: 1
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-header h4 {
    color: #fff
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-header__button {
    -webkit-mask-image: var(--icon-collapse);
    mask-image: var(--icon-collapse)
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-collapse {
    height: 100%;
    max-height: 266.6666666667vw;
    opacity: 1;
    background: #2e2f31
}

.real-time-bonuses-accordion .accordion-collapse__item.accordion-wrap--expanded .game-type-accordion-collapse__rescue-content {
    background: var(--realtime-bonus-game-type-accordion-header-bg)
}

.pop-real-time-bonus .pop-inner {
    text-align: center
}

.pop-real-time-bonus h5 {
    font-size: 6.4vw;
    font-weight: 700;
    color: #fd1111
}

.phone-area-code {
    flex: 0 0 28%;
    margin-right: 10px
}

.currency-area-code {
    width: 100%
}

.option-group .phone-area-code {
    flex: 0 0 100%;
    margin-right: 0
}

.lang-select {
    position: relative;
    font-size: 3.7333333333vw
}

.phone-code-list li,
.currency-code-list li,
.social-code-list li {
    margin-bottom: 0;
    padding: 2.6666666667vw 0;
    list-style: none
}

.phone-code-list img,
.currency-code-list img,
.social-code-list img {
    margin: 5px;
    border-radius: 50%;
    box-shadow: 0 0 2px #000c
}

.phone-code-list span,
.currency-code-list span,
.social-code-list span {
    color: #fd1111;
    font-size: 3.2vw
}

.open {
    display: show !important
}

.btn-select {
    position: relative;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 2.6666666667vw;
    border: 0;
    border-radius: .8vw;
    background: #2e2f31;
    color: #fd1111;
    font-size: 3.2vw;
    font-weight: 300
}

.btn-select li {
    padding-bottom: 0;
    float: left;
    list-style: none
}

.btn-select:hover li {
    margin-left: 0
}

.btn-select:focus {
    outline: none
}

.btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 2.6666666667vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #fff transparent transparent
}

.btn-select:disabled {
    border-bottom: .2666666667vw solid #7e7e7e;
    background: none;
    border-radius: 0
}

.resend-set {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 2.1333333333vw;
    color: linear-gradient(180deg, #444 0%, #222 100%);
    font-size: 3.2vw;
    line-height: 10.6666666667vw
}

.resend-set.active {
    display: inline-block
}

.logo-box {
    display: flex;
    position: relative;
    width: 53.3333333333vw;
    height: 9.3333333333vw;
    margin: 4vw auto;
    border: 0;
    background: no-repeat center center/contain;
    overflow: hidden
}

.third-party-login {
    text-align: center
}

.third-party-login.content {
    position: absolute;
    height: auto;
    background-color: #000
}

.third-party-login.content:has(.register-success-wrap) {
    height: 100%
}

.third-party-login.player-content {
    margin-bottom: 0
}

.third-party-login.member-content .button {
    width: calc(100% - 10.6666666667vw)
}

.third-party-login .quick-login-wrapper .logo-box {
    margin: 7.4666666667vw auto
}

.third-party-login .banner {
    margin: .8vw 0 0;
    background: #000
}

.third-party-login .banner .banner-v1 {
    height: 44.8vw
}

.third-party-login .banner .slider .slick-slide {
    height: 42.1333333333vw;
    margin-bottom: 0
}

.third-party-login .banner .slick-dots {
    bottom: 2.6666666667vw
}

.third-party-login .banner .slick-dots li {
    width: 1.6vw;
    height: 1.6vw;
    border-radius: 50%;
    background: #fd111180
}

.third-party-login .banner .slick-dots li:after {
    background: #fd1111
}

.third-party-login .eyes {
    top: 9.0666666667vw;
    width: 12vw;
    height: 12vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 42%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 42%
}

.third-party-login .button {
    width: calc(100% - 10.6666666667vw);
    background: linear-gradient(0deg, #700402, #e31210);
    color: #fff
}

.third-party-login .button.btn-disabled {
    background: linear-gradient(180deg, #444, #222);
    pointer-events: none
}

.third-party-login .button.btn-disabled a {
    color: #999
}

.third-party-login .button+.biometric-group {
    margin-top: 8vw
}

.third-party-login .btn-primary {
    background: linear-gradient(135deg, #f0cc7a, #bda160 50%);
    box-shadow: inset 0 0 .8vw #ffdbdb80
}

.third-party-login .btn-primary a {
    color: #fff
}

.third-party-login .btn-secondary {
    background: linear-gradient(180deg, #444, #222);
    box-shadow: inset 0 0 .8vw #7e7e7e
}

.third-party-login .btn-secondary a {
    color: #fff
}

.third-party-login .btn-fourth {
    background: linear-gradient(135deg, #d5deed 0% 50%);
    box-shadow: inset 0 0 .8vw #d5deed
}

.third-party-login .btn-fourth a {
    color: #222
}

.third-party-login .btn-google,
.third-party-login .btn-facebook,
.third-party-login .btn-whatsapp,
.third-party-login .btn-biometric.btn-fourth {
    display: flex;
    align-items: center;
    justify-content: center
}

.third-party-login .btn-google a,
.third-party-login .btn-facebook a,
.third-party-login .btn-whatsapp a,
.third-party-login .btn-biometric.btn-fourth a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 0
}

.third-party-login .btn-google .item-icon,
.third-party-login .btn-facebook .item-icon,
.third-party-login .btn-whatsapp .item-icon,
.third-party-login .btn-biometric.btn-fourth .item-icon {
    position: relative;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 0 2.1333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.third-party-login .btn-google {
    overflow: hidden
}

.third-party-login .btn-google .btn-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    box-shadow: 0 0 .5333333333vw #740101, inset 0 0 .5333333333vw #ffdbdb80
}

.third-party-login .new-profile .btn-google {
    background: linear-gradient(0deg, #700402, #e31210)
}

.third-party-login .add-phone-btn {
    display: none
}

.third-party-login .add-phone-btn.show {
    display: flex;
    align-items: center;
    text-align: center;
    text-decoration: none;
    font-size: 3.2vw;
    margin: 2.6666666667vw 0 0;
    color: #fff
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn {
    display: inline-block;
    position: relative;
    width: 12.8vw;
    height: 8.8vw;
    margin-right: 2.6666666667vw;
    text-align: center;
    border-radius: 2.1333333333vw;
    border: 1px dotted #7e7e7e
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:after,
.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:after {
    width: .5333333333vw;
    height: 3.2vw;
    left: 48%;
    transform: translateY(-50%)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
    width: 3.2vw;
    height: .5333333333vw;
    transform: translate(-50%, -50%)
}

.third-party-login .btn-whatsapp {
    background: #30a844;
    box-shadow: inset 0 0 .8vw #30a844
}

.third-party-login .button-tips,
.third-party-login .signup-tips,
.third-party-login .footer-tips {
    display: block;
    padding: 2.6666666667vw 5.3333333333vw;
    color: #7e7e7e;
    font-size: 3.7333333333vw
}

.third-party-login .button-tips a,
.third-party-login .button-tips i,
.third-party-login .signup-tips a,
.third-party-login .signup-tips i,
.third-party-login .footer-tips a,
.third-party-login .footer-tips i {
    margin-left: 1.3333333333vw;
    text-decoration: none;
    color: #fd1111
}

.third-party-login .button-tips p,
.third-party-login .signup-tips p,
.third-party-login .footer-tips p {
    padding: 0
}

.third-party-login .footer-tips {
    padding-bottom: 5.3333333333vw
}

.third-party-login .player .menu-box {
    margin-bottom: 0
}

.third-party-login .player .menu-box .input-group {
    padding-bottom: 0
}

.third-party-login .player.button-tips {
    color: #7e7e7e;
    text-align: left
}

.third-party-login .login-tips {
    color: #aeb8cc
}

.third-party-login .invitation-code {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: flex-start;
    margin-top: 4.2666666667vw;
    padding: 0 4vw
}

.third-party-login .invitation-code p,
.third-party-login .invitation-code span {
    padding: 0;
    color: #7e7e7e;
    font-size: 3.7333333333vw;
    line-height: 1.2
}

.third-party-login .invitation-code p {
    position: relative
}

.third-party-login .invitation-code .item-icon {
    display: block;
    width: 4vw;
    height: 4vw;
    margin-right: 2.4vw;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: contain
}

.third-party-login .input-status {
    position: absolute;
    z-index: 1;
    top: 9.0666666667vw;
    right: 0;
    width: 11.7333333333vw;
    height: 11.7333333333vw;
    transform: none
}

.third-party-login .input-status i {
    display: none;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.third-party-login .input-status i.icon-error {
    display: block;
    background: #f51111;
    mask-size: 26%;
    -webkit-mask-size: 26%
}

.third-party-login .input-status i.icon-check {
    display: block;
    background: #fd1111;
    mask-size: 30%;
    -webkit-mask-size: 30%
}

.third-party-login .input-group input:focus .input-status i {
    display: none
}

.third-party-login .forgetpassword-buttn {
    font-size: 3.7333333333vw
}

.third-party-login .forgetpassword-buttn a {
    display: block;
    padding: 1.3333333333vw 0;
    border: 0;
    color: #fd1111;
    text-decoration: none
}

.third-party-login .puzzle-verification-box {
    display: flex;
    margin-top: 3.7333333333vw;
    position: relative;
    flex-direction: column;
    align-items: center;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #2e2f31
}

.third-party-login .puzzle-verification-box .title {
    position: relative;
    padding: 4.5333333333vw;
    border-bottom: 1px solid #7e7e7e;
    line-height: 1
}

.third-party-login .puzzle-verification-box .title p {
    padding: 0;
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 1.5;
    text-align: left
}

.third-party-login .puzzle-verification {
    display: block;
    width: 100%;
    padding: 4.2666666667vw;
    overflow: hidden
}

.third-party-login .puzzle-verification .captcha-pic {
    position: relative;
    width: 100%;
    height: 41.0666666667vw;
    background-position: center;
    background-size: cover
}

.third-party-login .puzzle-verification .captcha-blank {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 16.5333333333vw;
    height: 16.5333333333vw;
    transform: translateY(-50%);
    stroke: #fff;
    fill: #000;
    stroke-opacity: .3;
    fill-opacity: .5
}

.third-party-login .puzzle-verification .captcha-frag-box {
    position: absolute;
    top: 0;
    left: 100px;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-position: inherit;
    background-size: inherit;
    clip-path: path("M23.4996992,0 C29.298523,0 33.9993985,4.70101013 33.9993985,10.5 C33.9993985,12.9548708 33.1569733,15.2129771 31.7454511,17.0009828 L42,17 C44.209139,17 46,18.790861 46,21 L46.0004981,31.2532274 C47.7882954,29.8421372 50.0459551,29 52.5003008,29 C58.2991245,29 63,33.7010101 63,39.5 C63,45.2989899 58.2991245,50 52.5003008,50 C50.0459551,50 47.7882954,49.1578628 46.0004981,47.7467726 L46,59 C46,61.209139 44.209139,63 42,63 L4,63 C1.790861,63 1.13686729e-13,61.209139 1.13686729e-13,59 L-0.000920548002,47.7461276 C1.78700598,49.1576062 4.04497962,50 6.49969924,50 C12.298523,50 16.9993985,45.2989899 16.9993985,39.5 C16.9993985,33.7010101 12.298523,29 6.49969924,29 C4.04497962,29 1.78700598,29.8423938 -0.000920548002,31.2538724 L1.13686729e-13,21 C1.13686729e-13,18.790861 1.790861,17 4,17 L15.2539474,17.0009828 C13.8424252,15.2129771 13,12.9548708 13,10.5 C13,4.70101013 17.7008755,0 23.4996992,0 Z")
}

.third-party-login .puzzle-verification .captcha-bar {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    height: 12.2666666667vw;
    margin-top: 4.2666666667vw;
    border: .2666666667vw solid #7e7e7e;
    background: #222
}

.third-party-login .puzzle-verification .captcha-bar-slider {
    position: absolute;
    top: 0;
    height: 12.2666666667vw
}

.third-party-login .puzzle-verification .captcha-bar-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 12.2666666667vw;
    height: 12.2666666667vw;
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 .2666666667vw .5333333333vw #06080f, inset 0 0 .8vw #fd1111;
    cursor: pointer
}

.third-party-login .puzzle-verification .captcha-bar-icon {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: left;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left
}

.third-party-login .puzzle-verification.active .captcha-bar-btn {
    left: 20%
}

.third-party-login .puzzle-verification.active .captcha-text {
    display: none
}

.third-party-login .puzzle-verification.passed .captcha-bar-slider {
    width: 70%;
    border: .2666666667vw solid #009600;
    background: #0096004d
}

.third-party-login .puzzle-verification.passed .captcha-bar-btn {
    left: 70%;
    background: #009600;
    box-shadow: 0 .2666666667vw 2.6666666667vw #06080f, inset 0 0 .8vw #ffdbdb80
}

.third-party-login .puzzle-verification.passed .captcha-bar-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background: #fff
}

.third-party-login .puzzle-verification.passed .puzzle-tips p {
    color: #009600
}

.third-party-login .puzzle-verification.passed .puzzle-tips .item-icon {
    background: #009600
}

.third-party-login .puzzle-verification.error .captcha-bar-slider {
    width: 30%;
    border: .2666666667vw solid #f51111;
    background: #f511114d
}

.third-party-login .puzzle-verification.error .captcha-bar-btn {
    left: 30%;
    background: #f51111;
    box-shadow: 0 .2666666667vw 2.6666666667vw #06080f, inset 0 0 .8vw #ffdbdb80
}

.third-party-login .puzzle-verification.error .captcha-bar-icon {
    width: 3.2vw;
    height: 3.2vw;
    background: #fff
}

.third-party-login .puzzle-verification.error .puzzle-tips p {
    color: #f51111
}

.third-party-login .puzzle-verification.error .puzzle-tips .item-icon {
    background: #f51111
}

.third-party-login .puzzle-tips {
    position: relative;
    flex: 1;
    width: 100%;
    padding-top: 3.2vw;
    text-align: left;
    white-space: normal
}

.third-party-login .puzzle-tips p {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    color: #7e7e7e
}

.third-party-login .puzzle-tips p:before {
    display: none
}

.third-party-login .puzzle-tips p .item-icon {
    display: inline-flex;
    min-width: 3.2vw;
    min-height: 3.2vw;
    margin-right: 2.6666666667vw;
    background: #7e7e7e;
    text-align: center;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

.third-party-login .menu-box {
    background: transparent;
    text-align: left;
    box-shadow: none;
    margin-bottom: 0;
    overflow: visible
}

.third-party-login .currency-wrap,
.third-party-login .phone-wrap,
.third-party-login .social-wrap {
    display: flex;
    flex-flow: row nowrap
}

.third-party-login .currency-wrap p,
.third-party-login .phone-wrap p,
.third-party-login .social-wrap p {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3.4666666667vw;
    line-height: 10.6666666667vw
}

.third-party-login .puzzle-refresh {
    display: inline-flex;
    position: absolute;
    right: 4.2666666667vw;
    bottom: calc(50% - 2.6666666667vw)
}

.third-party-login .puzzle-refresh.active {
    animation: rotate 1s forwards
}

.third-party-login .puzzle-refresh .puzzle-refresh-icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: cover
}

.third-party-login .register-success-wrap {
    position: relative;
    top: 0%;
    left: 0%;
    padding: 13.3333333333vw 0;
    transform: translate(0);
    background: transparent;
    box-shadow: none
}

.third-party-login .success-checkmark {
    width: 16.2666666667vw;
    height: 21.3333333333vw
}

.third-party-login .success-checkmark .check-icon {
    width: 14.1333333333vw;
    height: 14.1333333333vw;
    border: 1.0666666667vw solid #009600
}

.third-party-login .success-checkmark .check-icon:after {
    top: 0;
    left: 8vw;
    width: 16vw;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667vw 26.6666666667vw x 0
}

.third-party-login .success-checkmark .check-icon:before,
.third-party-login .success-checkmark .check-icon:after {
    background: transparent
}

.third-party-login .success-checkmark .check-icon .icon-fix {
    background: transparent
}

.third-party-login .success-checkmark .check-icon .icon-line {
    height: 1.3333333333vw;
    border-radius: .5333333333vw;
    background: #009600
}

.third-party-login .success-checkmark .check-icon .icon-line.line-tip {
    top: 8vw;
    left: 2.1333333333vw;
    width: 4.8vw;
    transform: rotate(46deg);
    animation: third-party-icon-line-tip .7s
}

.third-party-login .success-checkmark .check-icon .icon-line.line-long {
    top: 6.6666666667vw;
    right: 1.6vw;
    width: 8.5333333333vw;
    transform: rotate(-50deg);
    animation: third-party-icon-line-long .7s
}

.third-party-login .success-checkmark .check-icon .icon-circle {
    top: -1.0666666667vw;
    left: -1.0666666667vw;
    width: 14.1333333333vw;
    height: 14.1333333333vw;
    border: transparent
}

.third-party-login .register-success-cont .top-inner h4,
.third-party-login .register-success-cont .top-inner h3 {
    font-family: helvetica;
    line-height: 1.2;
    font-size: 4.2666666667vw;
    word-break: break-word
}

.third-party-login .register-success-cont .top-inner h3 {
    color: #009600;
    font-weight: 700
}

.third-party-login .register-success-cont .top-inner h3+h4 {
    margin: 4.2666666667vw 0 0
}

.third-party-login .register-success-cont .top-inner h4 {
    color: #009600;
    font-size: 3.7333333333vw
}

.third-party-login .register-success-cont .top-inner p {
    margin-top: 4.2666666667vw;
    color: #7e7e7e;
    font-size: 3.2vw
}

.third-party-login .register-success-btn {
    flex-wrap: nowrap
}

.third-party-login .register-success-btn .button {
    margin: 0 .5333333333vw;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-wrap: wrap;
    word-break: break-word;
    line-height: 4.8vw
}

.third-party-login .register-success-btn .button+.button {
    margin-left: 2.1333333333vw
}

.third-party-login .register-success-btn {
    margin-top: 14.6666666667vw
}

.third-party-login .user-password-info-box {
    margin: 4vw 0 0
}

.third-party-login .user-password-info-box+.register-success-btn {
    margin-top: 6.4vw
}

.third-party-login .user-password-info-box p {
    flex: 1;
    margin-right: 2.6666666667vw;
    color: #fd1111;
    word-break: break-word;
    font-size: 4.2666666667vw
}

.third-party-login .user-password-info li {
    display: inline-block;
    position: relative;
    width: 100%;
    max-height: 32vw;
    overflow: auto;
    padding: 2.1333333333vw 4vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: .8vw;
    background: #2e2f31;
    font-size: 3.7333333333vw;
    line-height: 1.5;
    text-align: left
}

.third-party-login .user-password-info li+li {
    margin-top: 4.2666666667vw
}

.third-party-login .user-password-info label {
    padding-right: 1.3333333333vw;
    font-size: 3.2vw;
    color: #fff
}

.third-party-login .user-password-info label+.info {
    margin-top: 1.3333333333vw
}

.third-party-login .user-password-info .info {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start
}

.third-party-login .user-password-info p {
    text-align: left
}

.third-party-login .user-password-info .info-copy {
    position: relative
}

.third-party-login .user-password-info .info-copy .item-icon {
    display: block;
    width: 4vw;
    height: 4vw;
    background: #fd1111;
    cursor: pointer;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover
}

.third-party-login .user-password-info .icon-copy {
    min-width: 14.4vw;
    text-align: center;
    white-space: nowrap
}

.third-party-login .verification-wrap {
    display: block;
    margin: auto 5.3333333333vw;
    text-align: left
}

.third-party-login .verification-wrap input[type=number] {
    border: .2666666667vw solid #7e7e7e;
    background: #2e2f31
}

.third-party-login .verification-wrap input[type=number]:disabled,
.third-party-login .verification-wrap input[type=number].input-disabled {
    background: #242f2f
}

.third-party-login .verification-wrap input[type=number].input-error {
    border: .2666666667vw solid #f51111
}

.third-party-login .verification-wrap input[type=number]:focus,
.third-party-login .verification-wrap input[type=number].input-focus {
    border: .2666666667vw solid #fd1111
}

.third-party-login .verification-wrap.input-disable input[type=number] {
    background: #242f2f
}

.third-party-login .verification-wrap.input-error input[type=number] {
    border: .2666666667vw solid #f51111
}

.third-party-login .verification-txt,
.third-party-login .verification-tips {
    margin: 4.2666666667vw auto
}

.third-party-login .verification-txt p,
.third-party-login .verification-tips p {
    color: #7e7e7e;
    font-size: 3.7333333333vw;
    line-height: 1.5
}

.third-party-login .verification-txt p span,
.third-party-login .verification-tips p span {
    color: #fff
}

.third-party-login .verification-txt p a,
.third-party-login .verification-tips p a {
    color: #fd1111
}

.third-party-login .verification-txt p .player,
.third-party-login .verification-tips p .player {
    display: block;
    width: 100%
}

.third-party-login .verification-txt p .time,
.third-party-login .verification-txt p .resend-btn,
.third-party-login .verification-tips p .time,
.third-party-login .verification-tips p .resend-btn {
    display: none
}

.third-party-login .verification-txt p .resend-btn,
.third-party-login .verification-tips p .resend-btn {
    transition: .5s
}

.third-party-login .verification-txt p .time.active,
.third-party-login .verification-txt p .resend-btn.active,
.third-party-login .verification-tips p .time.active,
.third-party-login .verification-tips p .resend-btn.active {
    display: inline-block;
    color: red
}

.third-party-login .verification-txt p .time.active.disabled,
.third-party-login .verification-txt p .resend-btn.active.disabled,
.third-party-login .verification-tips p .time.active.disabled,
.third-party-login .verification-tips p .resend-btn.active.disabled {
    color: #999
}

.third-party-login .verification-txt p .resend-btn.active,
.third-party-login .verification-tips p .resend-btn.active {
    transition: .5s;
    color: #fd1111
}

.third-party-login .verification-content {
    display: block
}

.third-party-login .verification-code {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto
}

.third-party-login .verification-code fieldset {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0
}

.third-party-login .verification-code .label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    white-space: nowrap;
    clip-path: inset(50%)
}

.third-party-login .verification-code img {
    height: 10.6666666667vw;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .8vw
}

.third-party-login .verification-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    overflow: hidden
}

.third-party-login .verification-input input[type=number] {
    flex: 1;
    width: 25%;
    height: 21.3333333333vw;
    border-radius: 1.3333333333vw;
    font-size: 8vw;
    font-weight: 700;
    text-align: center;
    color: #fd1111;
    -webkit-text-fill-color: #fd1111 !important
}

.third-party-login .verification-input input[type=number]::-webkit-input-placeholder {
    text-shadow: none;
    -webkit-text-fill-color: initial
}

.third-party-login .verification-input input[type=number]+input[type=number] {
    margin-left: 5.3333333333vw
}

.third-party-login .verification-input input::-webkit-outer-spin-button,
.third-party-login .verification-input input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none
}

.third-party-login .verification-input input[type=number]:nth-child(n+4) {
    order: 2
}

.third-party-login .pop-wrap.pop-success {
    animation: popOpacity .2s .2s ease forwards;
    opacity: 0;
    background: transparent
}

.third-party-login .pop-wrap.pop-success.active {
    display: block;
    opacity: 0
}

.third-party-login .pop-wrap.pop-success .success-checkmark {
    height: 20vw
}

.third-party-login .pop-wrap.pop-success .register-success-wrap {
    padding: 0;
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    border-radius: 2.1333333333vw;
    background: #000c;
    box-shadow: none
}

.third-party-login .pop-wrap.pop-success .register-success-cont .top-inner h4 {
    margin: 0
}

.third-party-login .input-group {
    padding: 0;
    background: transparent
}

.third-party-login .input-group+.input-group,
.third-party-login .input-group+.puzzle-verification-box {
    margin-top: 3.7333333333vw
}

.third-party-login .input-group+.login-info-box {
    margin-top: 1.3333333333vw
}

.third-party-login .input-group label {
    display: block;
    height: 6.4vw;
    margin-bottom: 2.6666666667vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 400;
    line-height: 6.4vw
}

.third-party-login .input-group input {
    height: 12vw;
    padding: 0 4.2666666667vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #2e2f31;
    color: #fd1111;
    font-family: helvetica;
    font-size: 3.2vw
}

.third-party-login .input-group input::placeholder {
    color: #7e7e7e
}

.third-party-login .input-group input:focus {
    padding: 0 11.7333333333vw 0 4.2666666667vw;
    border: .2666666667vw solid #fd1111
}

.third-party-login .input-group input:disabled {
    border: .2666666667vw solid #7e7e7e;
    background: #242f2f;
    color: #fff;
    opacity: 1
}

.third-party-login .input-group input.active+.delete-btn {
    border: 1px solid #2d3953;
    background: #2d3953
}

.third-party-login .input-group input.input-error {
    border: 1px solid #f51111
}

.third-party-login .input-group .btn-select {
    height: 12vw;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #2e2f31;
    box-shadow: none
}

.third-party-login .input-group .btn-select:after {
    top: 5.3333333333vw;
    border-color: #fff transparent transparent
}

.third-party-login .input-group .btn-select li {
    display: inline-flex;
    align-items: center
}

.third-party-login .input-group .clear {
    position: absolute;
    top: 9.0666666667vw;
    right: 0;
    width: 12vw;
    height: 12vw;
    margin: 0;
    padding: 0;
    opacity: 0;
    background: #fd1111;
    color: transparent;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 32%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 32%
}

.third-party-login .input-group .clear.active {
    opacity: 1
}

.third-party-login .input-group .clear:focus {
    padding: 0
}

.third-party-login .input-group .eyes {
    position: absolute;
    z-index: 1;
    right: 0;
    transform: none;
    background: #fff
}

.third-party-login .input-group .refresh {
    position: absolute;
    top: 9.0666666667vw;
    right: 0;
    width: 12vw;
    height: 12vw;
    border-radius: .8vw;
    background: #7e7e7e;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%
}

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

.third-party-login .input-group.error select,
.third-party-login .input-group.error input {
    border: 1px solid #f51111
}

.third-party-login .input-group.check .clear,
.third-party-login .input-group.password .input-status,
.third-party-login .input-group.new-password .input-status,
.third-party-login .input-group.password .clear,
.third-party-login .input-group.new-password .clear {
    right: 7.4666666667vw
}

.third-party-login .input-group.password .clear.hasbutton,
.third-party-login .input-group.new-password .clear.hasbutton {
    right: 29.3333333333vw
}

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

.third-party-login .input-group.money input {
    text-align: right
}

.third-party-login .input-group.money .clear {
    top: 0
}

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

.third-party-login .input-group.currency input {
    text-align: right
}

.third-party-login .input-group.currency .clear {
    top: 0
}

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

.third-party-login .input-group.upload-file input {
    opacity: 0
}

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

.third-party-login .input-group input:-webkit-autofill,
.third-party-login .input-group input:-webkit-autofill:hover,
.third-party-login .input-group input:-webkit-autofill:focus,
.third-party-login .input-group select:-webkit-autofill,
.third-party-login .input-group select:-webkit-autofill:hover,
.third-party-login .input-group select:-webkit-autofill:focus,
.third-party-login .input-group textarea:-webkit-autofill,
.third-party-login .input-group textarea:-webkit-autofill:hover,
.third-party-login .input-group textarea:-webkit-autofill:focus {
    background-image: none;
    box-shadow: 0 0 0 50px #2e2f31 inset;
    color: #fd1111;
    -webkit-text-fill-color: #fd1111 !important
}

.third-party-login .input-wrap .status {
    position: absolute;
    top: 50% !important;
    right: 0;
    flex-flow: row nowrap;
    padding: 0 4.2666666667vw;
    transform: translateY(-50%);
    color: #40d0cb;
    font-size: 3.2vw;
    text-decoration: none
}

.third-party-login .input-wrap .status:before {
    display: none !important
}

.third-party-login .input-wrap .status span {
    content: "";
    display: inline-block;
    position: relative;
    top: .5333333333vw;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background: #40d0cb;
    mask-repeat: no-repeat;
    mask-position: 50% 50%;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-size: contain
}

.third-party-login .input-wrap .unconfirm-btn {
    color: #ffd259;
    text-decoration: underline
}

.third-party-login .input-wrap .unconfirm-btn:before {
    display: none
}

.third-party-login .input-wrap .unconfirm-btn span {
    display: inline-block;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    margin-right: 1.3333333333vw;
    background: #ffd259;
    mask-repeat: no-repeat;
    mask-position: 100% 100%;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 100% 100%;
    -webkit-mask-size: contain
}

.third-party-login .input-wrap .get-vcode-btn span {
    padding: .5333333333vw 1.6vw;
    border-radius: 8vw;
    background: #79a5fc;
    color: #fff
}

.third-party-login .input-wrap .get-vcode-btn.active {
    background: transparent;
    color: #fff;
    pointer-events: none
}

.third-party-login .phone-wrap {
    width: 100%;
    height: 12vw;
    padding: 0;
    transition: background .3s;
    border: .2666666667vw solid #7e7e7e;
    border-radius: 1.3333333333vw;
    background: #2e2f31;
    font-family: helvetica;
    font-size: 3.2vw
}

.third-party-login .phone-wrap.btn-disabled {
    background: #242f2f;
    border: .2666666667vw solid #7e7e7e
}

.third-party-login .phone-wrap.btn-disabled .btn-select {
    color: #fff
}

.third-party-login .phone-wrap input {
    box-sizing: border-box;
    width: 100%;
    height: 11.4666666667vw;
    transition: background .3s;
    background: transparent;
    padding: 0 11.7333333333vw 0 4.2666666667vw;
    border: 0
}

.third-party-login .phone-wrap input:focus {
    padding: 0 11.7333333333vw 0 4.2666666667vw;
    border: .2666666667vw solid #fd1111
}

.third-party-login .phone-wrap input:disabled {
    border: 0
}

.third-party-login .phone-wrap .btn-select {
    padding: 0 0 0 4.2666666667vw;
    height: 11.4666666667vw;
    border: 0;
    border-radius: unset;
    background: transparent
}

.third-party-login .phone-wrap .btn-select:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .2666666667vw;
    height: 5.8666666667vw;
    background: #7e7e7e
}

.third-party-login .phone-wrap .clear {
    top: 0
}

.third-party-login .login-group {
    z-index: 3;
    display: flex;
    width: 100%;
    background: #550b0b
}

.third-party-login .login-group label {
    display: grid;
    align-items: center;
    margin: 0;
    width: 100%;
    height: 13.3333333333vw;
    color: #7e7e7e;
    text-align: center;
    font-weight: 700
}

.third-party-login .login-group label.active {
    transition: all .3s;
    color: #fd1111
}

.third-party-login .login-group label.active:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .8vw;
    border-radius: 1.3333333333vw;
    margin: 0 auto;
    animation: scale-in-center .3s ease-in-out both;
    background: #fd1111
}

.third-party-login .error-message {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin-top: 4.2666666667vw;
    color: #f51111;
    font-size: 3.2vw;
    text-align: left
}

.third-party-login .error-message:before {
    content: "!";
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    border-radius: 50%;
    background: #f51111;
    color: #272f46;
    font-size: 3.7333333333vw;
    font-weight: 700;
    line-height: 4.2666666667vw;
    text-align: center
}

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

.third-party-login .delete-btn {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    transition: all .3s;
    background: #ffd259;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%
}

.third-party-login .another-login-block {
    margin-top: 5.3333333333vw;
    padding-bottom: 9.6vw;
    font-size: 3.7333333333vw;
    text-align: center
}

.third-party-login .another-login-block .title {
    font-size: 3.7333333333vw;
    color: #7e7e7e;
    text-align: center;
    text-decoration: none
}

.third-party-login .another-login-block .another-login-icon {
    display: flex;
    justify-content: center;
    gap: 3.2vw
}

.third-party-login .another-login-block .another-login-icon a {
    display: inline-block;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #0079fb;
    border-radius: 50%
}

.third-party-login .another-login-block .another-login-icon a.btn-whatsapp {
    background-color: #fff
}

.third-party-login .another-login-block .another-login-icon .btn-google {
    overflow: hidden;
    position: relative;
    border-radius: 50%
}

.third-party-login .another-login-block .another-login-icon .btn-google a {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none
}

.third-party-login .another-login-block .another-login-icon .btn-biometric {
    border-radius: 50%;
    background: #fd1111
}

.third-party-login .another-login-block .another-login-icon .btn-biometric a {
    content: "";
    display: block;
    width: 8vw;
    height: 8vw;
    background: #272f46;
    mask-size: 65%;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: 65%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat
}

.third-party-login .another-login-block .block-border {
    position: relative;
    display: block;
    text-align: center;
    color: #7e7e7e
}

.third-party-login .another-login-block .block-border:before,
.third-party-login .another-login-block .block-border:after {
    content: "";
    position: absolute;
    top: 50%;
    display: block;
    width: 40vw;
    height: .2666666667vw;
    font-size: 6.9333333333vw;
    color: #6f7784;
    border-top: .2666666667vw solid #7e7e7e
}

.third-party-login .another-login-block .block-border:before {
    left: 0
}

.third-party-login .another-login-block .block-border:after {
    right: 0
}

.third-party-login .tips-info {
    margin: 1.3333333333vw 5.3333333333vw
}

.third-party-login .verify-tips.tips-info-toggle ul,
.third-party-login .verify-tips.tips-info-toggle ol {
    list-style: none
}

.third-party-login .verify-tips.tips-info-toggle ul>li,
.third-party-login .verify-tips.tips-info-toggle ol>li {
    list-style: none;
    font-size: 3.2vw;
    padding: 1.0666666667vw 2.6666666667vw
}

.third-party-login .verify-tips.tips-info-toggle a {
    display: block;
    width: 100%
}

.third-party-login .verify-tips.tips-info-toggle label {
    display: block;
    margin-bottom: 3.2vw;
    font-size: 3.7333333333vw;
    font-weight: 400
}

.third-party-login .verify-tips.tips-info-toggle p {
    display: block
}

.third-party-login .verify-tips.tips-info-toggle h5 .tips-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: #fff
}

.third-party-login .verify-tips.tips-info-toggle h5 span i {
    color: #ffd268;
    font-weight: 400
}

.third-party-login .player-content .menu-box .vip-area-group {
    margin: 0;
    height: auto;
    border-radius: 1.3333333333vw;
    background: #222;
    padding: 4.2666666667vw
}

.third-party-login .player-content .menu-box .vip-area-group .left-box .points-number {
    color: #bda46a;
    margin-left: 4vw
}

.third-party-login .player-content .menu-box .vip-area-group .myvip-text {
    color: #aeb8cc
}

.third-party-login .player-content .menu-box .vip-area-group .myvip-text .item-icon {
    display: none
}

.third-party-login .player-content .menu-box .vip-area-group .myvip-text span {
    display: flex;
    justify-content: center;
    align-items: center
}

.third-party-login .player-content .menu-box .vip-area-group .myvip-text span i {
    display: block;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin: 0 0 0 1.6vw;
    transform: rotateY(180deg);
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: contain;
    background: #aeb8cc
}

.third-party-login .player-content .menu-box .vip-area-group .right-box .arror-btn {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin: 0 1.6vw 0 0;
    transform: rotateY(180deg);
    mask-repeat: no-repeat;
    mask-position: top center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    -webkit-mask-size: contain
}

.third-party-login .list-group {
    display: flex;
    justify-content: space-between;
    color: #aeb8cc;
    font-size: 4.2666666667vw
}

.third-party-login .list-group+.list-group {
    margin-top: 4.2666666667vw;
    padding-top: 4.2666666667vw;
    border-top: 1px solid #7e7e7e
}

.third-party-login .list-group .icon-block {
    display: block;
    height: 100%;
    margin-top: 1.8666666667vw
}

.third-party-login .list-group .item-icon {
    display: table-cell;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin-right: 5.3333333333vw;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background: #fd1111
}

.third-party-login .list-group .item-icon.social {
    background: unset;
    background-size: contain
}

.third-party-login .list-group .item-icon+.info-block {
    margin-left: 5.3333333333vw
}

.third-party-login .list-group .list {
    display: table-cell;
    width: calc(100% - 9.6vw)
}

.third-party-login .list-group .button,
.third-party-login .list-group .status.unconfirm-btn {
    font-size: 3.7333333333vw;
    color: #fff;
    width: 25.3333333333vw;
    height: 8vw;
    border-radius: .8vw;
    border: 0;
    margin: 0;
    text-decoration: unset;
    overflow: hidden
}

.third-party-login .list-group .status.unconfirm-btn {
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 0 .5333333333vw #740101, inset 0 0 .5333333333vw #ffdbdb80
}

.third-party-login .list-group .button,
.third-party-login .list-group .btn-mask {
    background: linear-gradient(0deg, #700402, #e31210);
    box-shadow: 0 0 .5333333333vw #323232, inset 0 0 .5333333333vw #e4e4e480
}

.third-party-login .list-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.third-party-login .list-info+.list-info {
    margin-top: 2.6666666667vw;
    transition: .5s;
    animation: zoomIn .5s forwards
}

.third-party-login .list-info .left {
    max-width: 100%;
    word-break: break-all
}

.third-party-login .list-info .left .title {
    color: #fff;
    font-size: 4.2666666667vw
}

.third-party-login .list-info .left .info-block div {
    align-items: center
}

.third-party-login .list-info .left .tag {
    position: relative;
    top: -.5333333333vw;
    color: #fff;
    font-size: 2.6666666667vw;
    background: #006bff;
    padding: .8vw 1.3333333333vw;
    border-radius: .8vw;
    margin-left: 1.3333333333vw
}

.third-party-login .list-info .left .tips {
    color: #7e7e7e;
    font-size: 3.7333333333vw
}

.third-party-login .list-info .right {
    flex: 0 0 25.3333333333vw;
    margin-left: 2.6666666667vw
}

.third-party-login .list-info .right .status {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(180deg, #444, #222);
    font-size: 3.7333333333vw;
    min-width: 25.3333333333vw;
    height: 8vw;
    border-radius: .8vw;
    line-height: 1;
    margin: 0;
    padding: 0 2.1333333333vw;
    color: #999
}

.third-party-login .list-info .right .status.unconfirm-btn {
    color: #fff;
    text-decoration: unset;
    background: linear-gradient(180deg, #444, #222)
}

.third-party-login .currency-code-list {
    display: grid;
    grid-template-columns: 100%;
    justify-content: start;
    padding: 0 1.3333333333vw;
    text-align: left
}

.third-party-login .phone-code-list,
.third-party-login .currency-code-list,
.third-party-login .social-code-list,
.third-party-login .btn-select {
    background: #2e2f31
}

.third-party-login .phone-code-list img,
.third-party-login .phone-code-list span,
.third-party-login .currency-code-list img,
.third-party-login .currency-code-list span,
.third-party-login .social-code-list img,
.third-party-login .social-code-list span,
.third-party-login .btn-select img,
.third-party-login .btn-select span {
    display: inline-block;
    vertical-align: middle
}

.third-party-login .phone-code-list img,
.third-party-login .currency-code-list img,
.third-party-login .social-code-list img,
.third-party-login .btn-select img {
    width: 5.3333333333vw;
    margin-right: 2.6666666667vw;
    border-radius: 50%;
    box-shadow: 0 0 2px #000000b3
}

.third-party-login .phone-code-list span,
.third-party-login .currency-code-list span,
.third-party-login .social-code-list span,
.third-party-login .btn-select span {
    color: #fd1111
}

.third-party-login .phone-code-list-group,
.third-party-login .currency-code-list-group,
.third-party-login .social-code-list-group {
    display: none;
    position: absolute;
    z-index: 105;
    top: 12vw;
    left: 0;
    width: 100%;
    max-height: 40vw;
    overflow: auto;
    border-radius: 5px;
    background: #2e2f31;
    box-shadow: 0 6px 12px #06080f33
}

.third-party-login .member-error {
    color: #f51111
}

.third-party-login .member-error:before {
    background: #f51111
}

.third-party-login .login-info-box {
    margin: 0 .5333333333vw
}

.third-party-login .lang-select .button {
    margin: 0;
    width: 100%
}

.third-party-login .lang-select .button span {
    font-size: 3.2vw
}

.third-party-login .login-register-btn-wrap {
    display: flex;
    background-color: #000;
    padding: 4vw 3.2vw;
    justify-content: space-between;
    gap: 1.3333333333vw
}

.third-party-login .login-register-btn-wrap .login-register-btn {
    width: 100%;
    text-decoration: none
}

.third-party-login .login-register-btn-wrap .login-register-icon-wrap {
    color: #7e7e7e;
    background-color: #222;
    border: 1px solid #7e7e7e;
    padding: 4vw 0;
    width: 100%;
    border-radius: 1.3333333333vw
}

.third-party-login .login-register-btn-wrap .login-register-icon {
    width: 8vw;
    height: 8vw;
    margin: auto;
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    background-color: #7e7e7e
}

.third-party-login .login-register-btn-wrap .login-register-type-name {
    padding-top: 2.6666666667vw;
    color: #7e7e7e;
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center
}

.third-party-login .login-register-btn-wrap .active {
    pointer-events: none
}

.third-party-login .login-register-btn-wrap .active .login-register-icon-wrap {
    border-color: transparent;
    box-shadow: 0 0 .8vw #fd1111 inset;
    background: linear-gradient(0deg, #700402, #e31210)
}

.third-party-login .login-register-btn-wrap .active .login-register-icon {
    background-color: #fff
}

.third-party-login .login-register-btn-wrap .active .login-register-type-name {
    color: #fd1111
}

.third-party-login .register-entry .banner-v1 {
    height: auto
}

.third-party-login .register-entry .banner:before {
    background: transparent
}

.third-party-login .register-entry .carousel-wrap .item-drag {
    padding-top: 26%
}

.third-party-login .register-entry .invitation-code {
    margin: 2.6666666667vw 0;
    padding: 1.8666666667vw 2.9333333333vw;
    border-radius: .8vw;
    border: .2666666667vw solid #707fac;
    background-color: #586e9b
}

.third-party-login .register-entry .invitation-code p,
.third-party-login .register-entry .invitation-code span {
    color: #1d2639;
    font-size: 3.2vw;
    font-weight: 700;
    letter-spacing: 0px
}

.third-party-login #turnstile-container {
    text-align: center;
    margin-top: 3.2vw
}

.third-party-login #turnstile-container iframe {
    width: 100% !important
}

.third-party-login .number-code-captcha {
    position: absolute;
    right: 12vw;
    top: calc(12vw - 4%)
}

.third-party-login .number-code-captcha canvas {
    height: 8vw !important
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes third-party-icon-line-tip {
    0% {
        top: 4.2666666667vw;
        left: -.8vw;
        width: 0
    }
    40% {
        top: 6.6666666667vw;
        left: -1.3333333333vw;
        width: 8.8vw
    }
    70% {
        top: 8.2666666667vw;
        left: 2.4vw;
        width: 4.5333333333vw
    }
    80% {
        top: 8vw;
        left: 2.1333333333vw;
        width: 4.8vw
    }
    to {
        top: 8vw;
        left: 2.1333333333vw;
        width: 4.8vw
    }
}

@keyframes third-party-icon-line-long {
    0% {
        top: 9.6vw;
        right: 7.4666666667vw;
        width: 0
    }
    30% {
        top: 9.0666666667vw;
        right: 8vw;
        width: 0
    }
    60% {
        top: 9.0666666667vw;
        right: 8vw;
        width: 1.0666666667vw
    }
    70% {
        top: 6.1333333333vw;
        right: 1.0666666667vw;
        width: 9.3333333333vw
    }
    to {
        top: 6.6666666667vw;
        right: 1.6vw;
        width: 8.5333333333vw
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg)
    }
    5% {
        transform: rotate(-45deg)
    }
    12% {
        transform: rotate(-405deg)
    }
    to {
        transform: rotate(-405deg)
    }
}

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

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

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

.third-party-login .datepicker-wrap {
    position: relative
}

.third-party-login .datepicker-wrap .clear {
    top: 0;
    right: 9.3333333333vw
}

.mcd-style.third-party-login .banner:before {
    background: transparent
}

.mcd-style.third-party-login .banner .banner-v1 {
    height: 32vw
}

.mcd-style.third-party-login .banner .carousel-wrap .item-drag {
    padding-top: 33%
}

.password-message-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3.2vw;
    margin-top: 3.2vw
}

.password-message-block .password-message {
    display: grid;
    grid-template-columns: 4.2666666667vw 1fr;
    gap: 8px
}

.password-message-block .password-message.success {
    color: #009600
}

.password-message-block .password-message.success .icon {
    background-color: #009600
}

.password-message-block .password-message.error {
    color: #f51111
}

.password-message-block .password-message.error .icon {
    background-color: #f51111
}

.password-message-block .password-message.disabled {
    color: #878e92
}

.password-message-block .password-message.disabled .icon {
    background-color: #878e92
}

.password-message-block .password-message .icon {
    height: 4.2666666667vw;
    width: 4.2666666667vw;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    margin: 0
}

.password-message-block .password-message .message {
    font-size: 3.7333333333vw;
    font-weight: 400;
    line-height: 1.2
}

.announcement-row {
    margin: 3.2vw 0 0;
    border-bottom: .2666666667vw solid #000000;
    background: #1f1f1f;
    color: #fff
}

.announcement-row .item-icon {
    background: #fff
}

header .logo {
    width: 40vw;
    background-size: 100% auto
}

.content-title .exahange-wrap {
    color: #333;
    font-size: 3.2vw
}

.content-title .exahange-wrap p,
.content-title .exahange-wrap span {
    display: inline-block
}

.content-title .exahange-wrap p {
    margin-right: 1.3333333333vw;
    padding: .5333333333vw 2.1333333333vw .8vw;
    float: left;
    border-radius: 3.2vw;
    background: #222;
    color: #fff
}

.content-title .exahange-wrap span {
    float: right;
    font-weight: 700
}

.content-title .balance-wrap {
    margin-bottom: .8vw;
    zoom: 1
}

.content-title .balance-wrap:after {
    content: "";
    display: block;
    clear: both
}

.content-title .balance-wrap span {
    color: #439514;
    font-size: 4vw
}

.recommend-card {
    overflow: hidden;
    border-radius: 1.3333333333vw;
    background: none;
    line-height: 0
}

.nav .btn p {
    color: #fff
}

.member-menu .close {
    opacity: 1
}

.footer {
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #000
}

.footer .footer-bottom .logo {
    width: 12vw;
    margin-right: 2.6666666667vw
}

.footer-content-area {
    margin: 0 1.0666666667vw
}

.footer-content-area .slogan {
    margin-bottom: 2.1333333333vw;
    font-size: 4.8vw;
    font-weight: 700;
    color: #fd1111;
    line-height: 1.2
}

.footer-content-area .descript {
    padding-bottom: 8.5333333333vw;
    font-size: 3.2vw;
    color: #fff;
    line-height: 1.5;
    text-align: justify
}

.footer-content-area .descript p+p {
    margin-top: 2.1333333333vw
}

.footer-license {
    padding: 1.8666666667vw 0 2.6666666667vw;
    border-top: .2666666667vw solid #7e7e7e;
    border-bottom: .2666666667vw solid #7e7e7e
}

.footer-license .license-iframe {
    width: 32vw
}

.footer-license .license-iframe img {
    display: block;
    width: 100%;
    margin: 1.3333333333vw 0
}

.footer-license p {
    color: #fff;
    font-size: 3.2vw;
    line-height: 1.2
}

.footer-license span {
    font-weight: 700
}

header.member .back-btn {
    background: #fff
}

.player-vip-ticket-box .ticket-dec-line-wrap .left-dot,
.player-vip-ticket-box .ticket-dec-line-wrap .right-dot {
    background: #000
}

.ticket .title:before {
    background: #fd1111
}

.ticket .ticket-inner-right .text {
    color: #fff
}

.menu-box+.task-card-wrap {
    margin: -.5333333333vw 2.6666666667vw 1.3333333333vw;
    border-radius: .8vw
}

.option-group.select-bar {
    width: 94.6666666667vw;
    margin: 2.6666666667vw auto;
    border-radius: .8vw
}

.loading .nav-category .btn:before {
    background: #445187
}

.member-content .signup {
    font-size: 3.4666666667vw;
    letter-spacing: .5px
}

.member-content .signup a {
    color: #fd1111
}

.member-menu-logout {
    background: linear-gradient(0deg, #700402, #e31210)
}

.player-vip-ticket-box .ticket-top .ticket-top-right .detail-btn {
    border: .2666666667vw solid #abf2f1
}

.player-vip-ticket-box .ticket-top .ticket-top-right .detail-btn a {
    color: #abf2f1
}

.bonus-event-left .title:before {
    background: #e1b645
}

.pop-wrap3 .title-wrap .title .tips,
.pop-wrap3 .bottom-wrap .tips2 {
    color: #abf2f1
}

.task-card-wrap {
    background: #084444
}

.task-card {
    background: #ffb0261a
}

.pop-otp-verification .resend-set {
    color: #ffae12
}

.pop-otp-verification .btn-vcode {
    background: #ffae12
}

@font-face {
    font-family: Bebas Neue;
    src: url(/font/BebasNeue-Regular.ttf)
}

.tag-recommond {
    height: 5.3333333333vw
}

.third-party-login .logo-box {
    height: 17.3333333333vw
}

.third-party-login .login-group {
    background: #000
}

.logo-box {
    height: 17.3333333333vw
}

.header-desktop__logo {
    width: 160px !important
}

.nav-item--descend:hover,
.nav-item__link:hover,
.nav-item__head:hover {
    background: #fd1111 !important
}

.ac-list {
    background: #222
}

.new-login,
.new-login-tab {
    background: linear-gradient(180deg, #444, #222)
}

.promotion-box,
.promotion-box .pic .item-bg {
    background: #222
}

.layout-desktop__content .searchpage {
    border: 2px solid #7e7e7e !important
}

.pop-transaction-records-details .header {
    background: linear-gradient(180deg, #444, #222)
}

mcd-referral-bonus-goals .complete-mask:before {
    box-shadow: inset 0 0 5.3333333333vw #4eb170
}

mcd-referral-bonus-goals .tab-btn-page .btn.active .text {
    color: #fff
}

.content {
    background: none
}

.localBank {
    margin-bottom: 10px
}

.localBank label {
    line-height: 1.5
}

.localBank #clearUploadImages {
    line-height: 2
}

#statement1,
#statement2 {
    height: 48px
}

.content .content {
    padding: 0
}

.breadcrumb {
    padding: 0 15px;
    line-height: 37px
}

.table>tbody>tr>th {
    line-height: 1.3 !important
}

td {
    vertical-align: middle
}

.deposit-gap-wrap ul li.recommend:before {
    height: 19px !important
}

.deposit-gap-wrap ul li.recommend:after {
    top: 3px !important
}

.localBank #clearUploadImages {
    margin: 10px 0 !important
}

.amount,
.spinit {
    vertical-align: middle
}

.spinit {
    margin-top: 0 !important
}

#turnoverContainer>div {
    line-height: 0
}

#turnoverContainer>div>div:first-of-type {
    line-height: 30px
}

#turnoverContainer>div>div:last-of-type {
    margin-top: -30px !important;
    color: #005dac !important;
    line-height: 30px
}

.padded-bottom {
    padding-bottom: 0
}

#inbox .table-striped>tbody>tr {
    border: none !important;
    color: #555
}

#inbox .table-striped>tbody>tr.unread {
    color: #005dac;
    font-weight: 400
}

.modal-body {
    color: #333
}

.modal-body p {
    padding-bottom: 10px
}

.modal-body table {
    font-size: 3.7333333333vw;
    font-weight: 400
}

.modal-body table td,
.modal-body table th {
    padding: .8vw
}

.modal-body table th {
    background: #eee
}

#promotion_verification_preview table,
#promotion_verification_preview th,
#promotion_verification_preview td {
    border-color: #999
}

.selectbox select {
    border-radius: 0
}

.verification-code img {
    width: auto !important
}

.lightbox img {
    width: 100%;
    max-height: 95vh
}

.modal-open .pop-image {
    bottom: auto;
    overflow: inherit
}

#depositForm p,
#transferForm p {
    color: #999 !important;
    line-height: 1.5
}

.input-comment span {
    color: #fd4444
}

#wallet2detail {
    margin-bottom: 10px
}

#pagination-inbox a {
    background-image: none
}

.localBankInput table {
    border-radius: 5px;
    background: #fd4444
}

.localBankInput tr {
    border-bottom: 0
}

.localBankInput label {
    color: #fff
}

.vip-content .player-vip-box.lv1 .card-top .lv-totem,
.vip-content .player-vip-box.lv2 .card-top .lv-totem,
.vip-content .player-vip-box.lv3 .card-top .lv-totem,
.vip-content .player-vip-box.lv4 .card-top .lv-totem,
.vip-content .player-vip-box.lv5 .card-top .lv-totem,
.vip-content .player-vip-box.lv6 .card-top .lv-totem {
    background: none
}

.vip-content .player-vip-box.lv1 .card-top .lv-totem .item-icon,
.vip-content .player-vip-box.lv2 .card-top .lv-totem .item-icon,
.vip-content .player-vip-box.lv3 .card-top .lv-totem .item-icon,
.vip-content .player-vip-box.lv4 .card-top .lv-totem .item-icon,
.vip-content .player-vip-box.lv5 .card-top .lv-totem .item-icon,
.vip-content .player-vip-box.lv6 .card-top .lv-totem .item-icon {
    background-position: center;
    background-size: 100%;
    border-radius: 50%
}

.acquired-content .form-vip-history .lv1:after,
.acquired-content .form-vip-history .lv2:after,
.acquired-content .form-vip-history .lv3:after,
.acquired-content .form-vip-history .lv4:after,
.acquired-content .form-vip-history .lv5:after,
.acquired-content .form-vip-history .lv6:after {
    background: none
}

.acquired-content .form-vip-history .lv1 .item-icon,
.acquired-content .form-vip-history .lv2 .item-icon,
.acquired-content .form-vip-history .lv3 .item-icon,
.acquired-content .form-vip-history .lv4 .item-icon,
.acquired-content .form-vip-history .lv5 .item-icon,
.acquired-content .form-vip-history .lv6 .item-icon {
    background-position: center;
    background-size: 100%
}

.vip-content .card-top .vip-lv-area .next-lv-totem {
    border-radius: 50%
}

.vip-content .player-vip-box.lv5 .card-top .next-lv-totem {
    display: block;
    background-position: center;
    background-size: 100%
}

.recommend-friends-list {
    margin: 0
}

.recommend-friends-list .rf-list {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 1.5fr 1fr;
    justify-content: center
}

.recommend-friends-list .rf-list.form-title {
    border-radius: 0;
    padding: 0 2.6666666667vw;
    text-align: center
}

.recommend-friends-list .rf-list.form-title div {
    margin: 1.3333333333vw 0;
    padding: 1.3333333333vw
}

.recommend-friends-list .rf-list.form-title div+div {
    border-left: .2666666667vw dotted #ffffff
}

.recommend-friends-list .rf-list.form-content {
    padding: 0 2.6666666667vw
}

.recommend-friends-list .rf-list.form-content div+div {
    border-left: .2666666667vw dotted #7e7e7e
}

.recommend-friends-list .rf-list>div {
    padding: 2.6666666667vw 1.6vw;
    text-align: center
}

.recommend-friends-list .rf-list .reward-amount {
    text-align: right
}

.recommend-friends-list .list-content {
    border-radius: 0
}

.loader-box {
    display: flex;
    position: fixed;
    z-index: 100;
    top: 40%;
    left: 50%;
    align-items: center;
    justify-content: center;
    width: 34.6666666667vw;
    height: 24vw;
    margin: auto;
    padding: auto;
    transform: translate(-50%)
}

.bb-logo {
    position: absolute;
    width: 16vw;
    height: 16vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(.5333333333vw .5333333333vw .5333333333vw #062d2d)
}

.loader {
    position: absolute;
    width: 21.3333333333vw;
    height: 21.3333333333vw
}

.cssload-inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.cssload-inner.cssload-one {
    top: 0%;
    left: 0%;
    animation: cssload-rotate-one 1.15s linear infinite;
    border-bottom: 5px solid #f9ecd9;
    box-shadow: 2px 2px 2px 1px #f9ecd91a
}

.cssload-inner.cssload-two {
    top: 0%;
    right: 0%;
    animation: cssload-rotate-two 1.15s linear infinite;
    border-right: 5px solid #f1d35a;
    box-shadow: 2px 2px 2px 1px #f1d35a1a
}

.cssload-inner.cssload-three {
    right: 0%;
    bottom: 0%;
    animation: cssload-rotate-three 1.15s linear infinite;
    border-top: 5px solid #1fb4b4;
    box-shadow: 2px 2px 2px 1px #1fb4b41a
}

@keyframes cssload-rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotate(0)
    }
    to {
        transform: rotateX(35deg) rotateY(-45deg) rotate(360deg)
    }
}

@keyframes cssload-rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotate(0)
    }
    to {
        transform: rotateX(50deg) rotateY(10deg) rotate(360deg)
    }
}

@keyframes cssload-rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotate(0)
    }
    to {
        transform: rotateX(35deg) rotateY(55deg) rotate(360deg)
    }
}

.mat-ripple {
    overflow: hidden;
    position: relative
}

.mat-ripple:not(:empty) {
    transform: translateZ(0)
}

.mat-ripple.mat-ripple-unbounded {
    overflow: visible
}

.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
    transform: scale3d(0, 0, 0);
    background-color: var(--mat-ripple-color, rgba(0, 0, 0, .1))
}

.cdk-high-contrast-active .mat-ripple-element {
    display: none
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    left: 0
}

[dir=rtl] .cdk-visually-hidden {
    left: auto;
    right: 0
}

.cdk-overlay-container,
.cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%
}

.cdk-overlay-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1000;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
    opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1
}

.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: .6
}

.cdk-overlay-dark-backdrop {
    background: #00000052
}

.cdk-overlay-transparent-backdrop {
    transition: visibility 1ms linear, opacity 1ms linear;
    visibility: hidden;
    opacity: 1
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
    visibility: visible
}

.cdk-overlay-backdrop-noop-animation {
    transition: none
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px
}

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll
}

textarea.cdk-textarea-autosize {
    resize: none
}

textarea.cdk-textarea-autosize-measuring {
    padding: 2px 0 !important;
    box-sizing: content-box !important;
    height: auto !important;
    overflow: hidden !important
}

textarea.cdk-textarea-autosize-measuring-firefox {
    padding: 2px 0 !important;
    box-sizing: content-box !important;
    height: 0 !important
}

@keyframes cdk-text-field-autofill-start {}

@keyframes cdk-text-field-autofill-end {}

.cdk-text-field-autofill-monitored:-webkit-autofill {
    animation: cdk-text-field-autofill-start 0s 1ms
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    animation: cdk-text-field-autofill-end 0s 1ms
}

.mat-focus-indicator {
    position: relative
}

.mat-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-focus-indicator-display, none);
    border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
    border-radius: var(--mat-focus-indicator-border-radius, 4px)
}

.mat-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-focus-indicator-display: block
}

.mat-mdc-focus-indicator {
    position: relative
}

.mat-mdc-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-mdc-focus-indicator-display, none);
    border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
    border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
}

.mat-mdc-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-mdc-focus-indicator-display: block
}

.mat-app-background {
    background-color: var(--mat-app-background-color, transparent);
    color: var(--mat-app-text-color, inherit)
}

html {
    --mat-ripple-color: rgba(255, 255, 255, .1)
}

html {
    --mat-option-selected-state-label-text-color: #fd1111;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-accent {
    --mat-option-selected-state-label-text-color: #a38d5b;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-warn {
    --mat-option-selected-state-label-text-color: #f44336;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

html {
    --mat-optgroup-label-text-color: white
}

.mat-primary {
    --mat-full-pseudo-checkbox-selected-icon-color: #fd1111;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #fd1111;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html,
.mat-accent {
    --mat-full-pseudo-checkbox-selected-icon-color: #a38d5b;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #a38d5b;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

.mat-warn {
    --mat-full-pseudo-checkbox-selected-icon-color: #f44336;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html {
    --mat-app-background-color: #303030;
    --mat-app-text-color: white
}

.mat-elevation-z0,
.mat-mdc-elevation-specific.mat-elevation-z0 {
    box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f
}

.mat-elevation-z1,
.mat-mdc-elevation-specific.mat-elevation-z1 {
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f
}

.mat-elevation-z2,
.mat-mdc-elevation-specific.mat-elevation-z2 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

.mat-elevation-z3,
.mat-mdc-elevation-specific.mat-elevation-z3 {
    box-shadow: 0 3px 3px -2px #0003, 0 3px 4px #00000024, 0 1px 8px #0000001f
}

.mat-elevation-z4,
.mat-mdc-elevation-specific.mat-elevation-z4 {
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f
}

.mat-elevation-z5,
.mat-mdc-elevation-specific.mat-elevation-z5 {
    box-shadow: 0 3px 5px -1px #0003, 0 5px 8px #00000024, 0 1px 14px #0000001f
}

.mat-elevation-z6,
.mat-mdc-elevation-specific.mat-elevation-z6 {
    box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f
}

.mat-elevation-z7,
.mat-mdc-elevation-specific.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f
}

.mat-elevation-z8,
.mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f
}

.mat-elevation-z9,
.mat-mdc-elevation-specific.mat-elevation-z9 {
    box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f
}

.mat-elevation-z10,
.mat-mdc-elevation-specific.mat-elevation-z10 {
    box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f
}

.mat-elevation-z11,
.mat-mdc-elevation-specific.mat-elevation-z11 {
    box-shadow: 0 6px 7px -4px #0003, 0 11px 15px 1px #00000024, 0 4px 20px 3px #0000001f
}

.mat-elevation-z12,
.mat-mdc-elevation-specific.mat-elevation-z12 {
    box-shadow: 0 7px 8px -4px #0003, 0 12px 17px 2px #00000024, 0 5px 22px 4px #0000001f
}

.mat-elevation-z13,
.mat-mdc-elevation-specific.mat-elevation-z13 {
    box-shadow: 0 7px 8px -4px #0003, 0 13px 19px 2px #00000024, 0 5px 24px 4px #0000001f
}

.mat-elevation-z14,
.mat-mdc-elevation-specific.mat-elevation-z14 {
    box-shadow: 0 7px 9px -4px #0003, 0 14px 21px 2px #00000024, 0 5px 26px 4px #0000001f
}

.mat-elevation-z15,
.mat-mdc-elevation-specific.mat-elevation-z15 {
    box-shadow: 0 8px 9px -5px #0003, 0 15px 22px 2px #00000024, 0 6px 28px 5px #0000001f
}

.mat-elevation-z16,
.mat-mdc-elevation-specific.mat-elevation-z16 {
    box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f
}

.mat-elevation-z17,
.mat-mdc-elevation-specific.mat-elevation-z17 {
    box-shadow: 0 8px 11px -5px #0003, 0 17px 26px 2px #00000024, 0 6px 32px 5px #0000001f
}

.mat-elevation-z18,
.mat-mdc-elevation-specific.mat-elevation-z18 {
    box-shadow: 0 9px 11px -5px #0003, 0 18px 28px 2px #00000024, 0 7px 34px 6px #0000001f
}

.mat-elevation-z19,
.mat-mdc-elevation-specific.mat-elevation-z19 {
    box-shadow: 0 9px 12px -6px #0003, 0 19px 29px 2px #00000024, 0 7px 36px 6px #0000001f
}

.mat-elevation-z20,
.mat-mdc-elevation-specific.mat-elevation-z20 {
    box-shadow: 0 10px 13px -6px #0003, 0 20px 31px 3px #00000024, 0 8px 38px 7px #0000001f
}

.mat-elevation-z21,
.mat-mdc-elevation-specific.mat-elevation-z21 {
    box-shadow: 0 10px 13px -6px #0003, 0 21px 33px 3px #00000024, 0 8px 40px 7px #0000001f
}

.mat-elevation-z22,
.mat-mdc-elevation-specific.mat-elevation-z22 {
    box-shadow: 0 10px 14px -6px #0003, 0 22px 35px 3px #00000024, 0 8px 42px 7px #0000001f
}

.mat-elevation-z23,
.mat-mdc-elevation-specific.mat-elevation-z23 {
    box-shadow: 0 11px 14px -7px #0003, 0 23px 36px 3px #00000024, 0 9px 44px 8px #0000001f
}

.mat-elevation-z24,
.mat-mdc-elevation-specific.mat-elevation-z24 {
    box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f
}

.mat-theme-loaded-marker {
    display: none
}

html {
    --mat-datepicker-calendar-container-shape: 4px;
    --mat-datepicker-calendar-container-touch-shape: 4px;
    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)
}

html {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #fd1111;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(253, 17, 17, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(253, 17, 17, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(253, 17, 17, .3);
    --mat-datepicker-toggle-active-state-icon-color: #fd1111;
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(253, 17, 17, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
    --mat-datepicker-toggle-icon-color: white;
    --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, .7);
    --mat-datepicker-calendar-period-button-text-color: white;
    --mat-datepicker-calendar-period-button-icon-color: white;
    --mat-datepicker-calendar-navigation-button-icon-color: white;
    --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, .12);
    --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, .7);
    --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, .3);
    --mat-datepicker-calendar-date-text-color: white;
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, .24);
    --mat-datepicker-range-input-separator-color: white;
    --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, .5);
    --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-container-background-color: #424242;
    --mat-datepicker-calendar-container-text-color: white
}

.mat-datepicker-content.mat-accent {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #a38d5b;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(163, 141, 91, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(163, 141, 91, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(163, 141, 91, .3);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(163, 141, 91, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-content.mat-warn {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-toggle-active.mat-accent {
    --mat-datepicker-toggle-active-state-icon-color: #a38d5b
}

.mat-datepicker-toggle-active.mat-warn {
    --mat-datepicker-toggle-active-state-icon-color: #f44336
}

.mat-calendar-controls {
    --mat-icon-button-touch-target-display: none
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 8px
}

* {
    touch-action: pan-x pan-y
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior: none
    }
    *:not(input):not(textarea) {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none
    }
}

.loading-mask {
    position: fixed;
    display: flex;
    inset: 0;
    background: #000;
    justify-content: center;
    align-items: center;
    z-index: 9001
}

.loader-box {
    z-index: 9002;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.loader-box video {
    width: 70px
}

header {
    transition: all 0s
}

.wrap {
    display: block;
    position: inherit;
    inset: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: cubic-bezier(.075, .82, .165, 1)
}

.tab.search-tab {
    z-index: 2
}

.language-select-area .language-area {
    margin: 0 .8vw
}

.player-vip-detailed-box .section-wrap {
    display: block;
    height: 100%;
    transition: all .3s ease;
    width: 100%
}

.footer.hide {
    opacity: 0
}

.player-vip-detailed-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.player-vip-detailed-menu .btn-wrap {
    display: inline-flex
}

.player-vip-detailed-menu .btn-wrap .btn {
    min-width: 24vw
}

.pop-inner.content-style .button a {
    text-decoration: none;
    color: #fff
}

.third-party-login.member-content.new-profile,
.third-party-login.member-content.new-login,
.third-party-login.verify-code {
    min-height: 100% !important
}

.btn-select.only:hover,
.btn-select.disabled:hover {
    opacity: 1;
    cursor: default
}

.btn-select.only:after,
.btn-select.disabled:after {
    display: none
}

.popup-page-wrapper {
    display: block;
    position: relative;
    text-align: center;
    z-index: 7500
}

html.is-mobile:has(.toolbar) .popup-page {
    height: calc(100% - 13.0666666667vw)
}

html.is-mobile:has(.toolbar) .popup-page .popup-page__backdrop {
    height: calc(100% - 13.0666666667vw)
}

.carousel-wrap {
    display: block;
    position: relative;
    width: auto;
    height: inherit;
    overflow: hidden;
    max-width: 100vw;
    margin: auto
}

.carousel-wrap.style-init .item-drag .item-left {
    width: inherit;
    transform: translate(-250%, -50%)
}

.carousel-wrap.style-init .item-drag .item-wrap {
    width: inherit
}

.carousel-wrap.style-init.siblings .item-drag .item-left {
    transform: translate(-175%, -50%)
}

.carousel-wrap.style-init.siblings .item-drag .item {
    width: 70%
}

.carousel-wrap .item-drag {
    display: block;
    margin: auto;
    padding-top: 35%;
    width: 100%;
    height: 100%
}

.carousel-wrap .item-drag .item-left {
    display: block;
    width: inherit;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%
}

.carousel-wrap .item-drag .item-left .item-wrap {
    display: block;
    position: relative;
    height: 100%;
    white-space: nowrap;
    line-height: 0
}

.carousel-wrap .item {
    display: inline-block;
    position: relative;
    padding: 2.6666666667vw 2.6666666667vw 9.3333333333vw;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #221919;
    opacity: 1;
    overflow: hidden;
    border-radius: .8vw
}

.carousel-wrap .item .item-pic {
    display: block;
    position: relative;
    margin: auto;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transform-origin: center;
    transition: all .3s
}

.carousel-wrap.siblings .item {
    padding: 1.3333333333vw 1.3333333333vw 3.4666666667vw
}

.carousel-wrap.siblings .item .item-pic {
    border-radius: 1.3333333333vw
}

.carousel-wrap.siblings .item .item-pic.focus {
    box-shadow: 0 .5333333333vw 3.2vw #00000059;
    transform: translateY(-2px)
}

.carousel-wrap.siblings .dot-group {
    bottom: 0
}

.carousel-wrap.siblings.mcd.fullWidth .item-drag .item {
    padding: 0vw 2.6666666667vw 2.6666666667vw
}

mcd-carousel-banner .banner:has(.carousel-wrap.siblings.mcd),
mcd-carousel-banner .banner-v1:has(.carousel-wrap.siblings.mcd) {
    height: 40vw
}

.carousel-wrap.siblings.mcd {
    margin-top: 2.6666666667vw
}

.banner-v1 .carousel-wrap.siblings.mcd .item-left {
    transform: translate(-208%, -50%)
}

.carousel-wrap.siblings.mcd .item-drag {
    padding-top: 39%
}

.carousel-wrap.siblings.mcd .item-drag .item {
    width: 83%;
    padding: 0 1.3333333333vw 5.8666666667vw
}

.carousel-wrap.siblings.mcd .item-drag .item .item-pic {
    border-radius: 1.0666666667vw;
    background-repeat: no-repeat
}

.banner-v1 .carousel-wrap.siblings.mcd.fullWidth .item-left {
    transform: translate(-250%, -50%)
}

.carousel-wrap.siblings.mcd.fullWidth .item {
    width: 100%
}

.carousel-wrap.singlefull .item {
    padding: 0
}

.carousel-wrap.singlefull .item .item-pic {
    border-radius: 0
}

.carousel-wrap.singlefull .item .item-pic.focus {
    transform: scale(1.05)
}

.carousel-wrap.singlefull .dot-group {
    bottom: 0
}

.carousel-wrap.singlefull .dot-group.style-bar {
    padding: 1.8666666667vw 0 2.6666666667vw
}

mcd-carousel-banner .banner:has(.carousel-wrap.singlefull.mcd),
mcd-carousel-banner .banner-v1:has(.carousel-wrap.singlefull.mcd) {
    height: 48.5333333333vw
}

.carousel-wrap.singlefull.mcd .item-drag .item {
    padding: 0 0 5.8666666667vw
}

.dot-group {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .5333333333vw;
    z-index: 1
}

.dot-group.style-dot li {
    display: block;
    margin-right: 1.3333333333vw;
    margin-left: 1.3333333333vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    background: #ffffff80;
    border: .5333333333vw solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    transition: .3s;
    cursor: pointer
}

.dot-group.style-dot li:hover {
    background: #ffffff80
}

.dot-group.style-dot li.active {
    background: var(--carousel-banner-li-active, #fff)
}

.dot-group.style-bar {
    padding: 1.8666666667vw 0 .8vw
}

.dot-group.style-bar li {
    display: block;
    margin: 0 .8vw;
    width: 5.3333333333vw;
    height: .5333333333vw;
    background: #ffffff80;
    border-radius: 1.3333333333vw;
    overflow: hidden;
    position: relative
}

.dot-group.style-bar li:hover .dot-progress {
    background: transparent
}

.dot-group.style-bar li.active .dot-progress {
    position: absolute;
    width: 100%;
    height: 100%;
    animation-name: dot-ani;
    background: var(--carousel-banner-li-active, #fff)
}

.dot-group.style-bar li .dot-progress {
    display: block;
    width: 100%;
    height: 100%
}

.carousel-wrap.mcd .dot-group.style-bar {
    padding: 2.6666666667vw 0
}

.carousel-wrap.mcd .dot-group.style-bar li {
    border-radius: .8vw
}

.button-prev,
.button-next {
    padding: 15px 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .3s;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    z-index: 1
}

.button-prev {
    left: 0
}

.button-next {
    right: 0;
    transform: translateY(-50%) rotateY(180deg)
}

.button-prev:hover,
.button-next:hover {
    opacity: .7
}

.button-prev img,
.button-next img {
    display: block;
    max-width: 50px
}

@keyframes dot-ani {
    0% {
        left: -100%
    }
    to {
        left: 0
    }
}

.carousel-wrap.debug {
    border: 1px solid white;
    overflow: visible
}

.carousel-wrap.debug .item-drag {
    border: 1px solid red
}

.carousel-wrap.debug .item-drag .item-left {
    border: 1px solid yellow
}

.carousel-wrap.debug .item-drag .item-left .item-wrap {
    border: 1px solid blue
}

.carousel-wrap.debug .button-prev,
.carousel-wrap.debug .button-next {
    background: #fff3
}

.carousel-wrap.debug .item {
    border: 1px solid olive
}

.carousel-wrap.debug .item .item-pic {
    border: 1px solid purple
}

.nav-wrap {
    overflow: hidden
}

.nav-wrap .nav-content-wrap {
    display: block;
    width: 100%;
    overflow: visible
}

.nav-wrap .nav-content-wrap .nav-content-inner {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    transition: transform .3s ease-in-out
}

.nav-wrap .nav-content-wrap .content-box {
    display: block;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    max-height: 10000px;
    transition: all .5s ease-in-out
}

.nav .btn.selected {
    background: #00000080
}

.nav .btn.selected p {
    color: #fff
}

.nav .btn.selected:before {
    box-shadow: 0 .5333333333vw 1.3333333333vw #0000004d
}

.nav .btn.selected:after {
    display: block
}

.nav.nav-auto {
    display: flex;
    overflow: auto
}

.nav.nav-auto .btn {
    width: auto;
    min-width: 18.1818181818%
}

.custom-nav-category .btn .item-icon {
    background-size: 80%;
    background-color: #222;
    border-radius: 4vw;
    width: 16vw;
    height: 16vw;
    border: 2px solid transparent
}

.custom-nav-category .btn.selected {
    background: transparent
}

.custom-nav-category .btn.selected p {
    color: #fd1111
}

.custom-nav-category .btn.selected .item-icon {
    border: 2px solid #fd1111
}

.custom-nav-category .btn.active .item-icon {
    height: 0;
    margin: 0 auto;
    opacity: 0
}

.custom-nav-category {
    padding: 0 2.6666666667vw
}

.custom-nav-category .btn .item-icon {
    background-size: 80%;
    background-color: #222;
    border-radius: 4vw;
    width: 16vw;
    height: 16vw
}

.custom-nav-category.active .item-icon,
.custom-nav-category.active .btn.selected .item-icon {
    height: 0;
    margin: 0 auto;
    opacity: 0
}

.mcd-date-picker .cdk-global-overlay-wrapper {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.mcd-date-picker .mat-datepicker-content {
    border-radius: 2.6666666667vw;
    background-color: unset;
    background: linear-gradient(to bottom, #222, #000);
    box-shadow: 0 3.2vw 2.6666666667vw #06080f1a, inset 0 .2666666667vw .5333333333vw transparent;
    border: .2666666667vw solid transparent
}

.mcd-date-picker .mat-calendar-body-cell-content,
.mcd-date-picker .mat-calendar-body-label,
.mcd-date-picker .mat-mdc-button:not(:disabled),
.mcd-date-picker .mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled),
.mcd-date-picker .mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled) {
    color: #fff
}

.mcd-date-picker .mat-datepicker-content-touch .mat-datepicker-content-container {
    max-width: 375px;
    height: -moz-fit-content;
    height: fit-content
}

.mcd-date-picker .mat-calendar-body-label {
    vertical-align: middle
}

.mcd-date-picker .mat-calendar-body-selected {
    background: #fd1111;
    box-shadow: 0 .2666666667vw .5333333333vw #06080f4d, inset 0 0 .8vw transparent;
    border-width: 0;
    color: #fff
}

.mcd-date-picker .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: #fd1111
}

.mcd-date-picker .mat-calendar-table-header th {
    font-weight: 700;
    color: #fff
}

.mcd-date-picker .mat-calendar-arrow {
    fill: #fff
}

.mcd-date-picker .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mcd-date-picker .mat-mdc-icon-button:disabled {
    color: #7e7e7e
}

.cdk-overlay-container {
    z-index: 9000
}

.dialog-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .4s;
    background: #000;
    -webkit-overflow-scrolling: touch;
    z-index: 7999
}

.dialog-wrap .close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    border-radius: 0 0 0 100%
}

.dialog-wrap .close:before,
.dialog-wrap .close:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.3333333333vw;
    height: .5333333333vw;
    margin: -.2666666667vw 0 0 -2.6666666667vw;
    border-radius: .5333333333vw;
    background: #fff
}

.dialog-wrap .close:before {
    transform: rotate(45deg)
}

.dialog-wrap .close:after {
    transform: rotate(-45deg)
}

.top-bar {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333vw;
    overflow: hidden;
    transition: all .3s;
    background: linear-gradient(180deg, #444, #222);
    z-index: 2
}

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

.dialog-overlay-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    max-height: 700px;
    overflow: hidden;
    transform: translate(-50%, -50%)
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop {
        height: calc(100dvh - 16vw)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop {
        height: calc(100vh - 16vw)
    }
}

.dialog-overlay-desktop .popup {
    position: absolute;
    top: 50%;
    right: 50%;
    max-height: 100%;
    border-radius: 2.6666666667vw;
    transform: translate(50%, -50%);
    width: 100vw
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height: calc(100dvh - 16vw)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height: calc(100vh - 16vw)
    }
}

.back-bar {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333vw;
    overflow: hidden;
    transition: all .3s;
    background: #000
}

.back-bar .bar-title {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%);
    color: #fff;
    font-size: 4.2666666667vw;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.back-bar__arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    z-index: 1
}

.back-bar__arrow .item-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 20%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 20%;
    z-index: 2
}

.date-bar .date-input .mat-mdc-form-field {
    width: 100%
}

.date-bar .date-input .mat-mdc-text-field-wrapper {
    background: #2e2f31
}

.date-bar .date-input .mat-mdc-form-field-flex,
.date-bar .date-input .mat-mdc-form-field-infix {
    height: 8vw
}

.date-bar .date-input .mat-mdc-form-field-infix {
    min-height: unset
}

.date-bar .date-input .mat-mdc-form-field-infix input {
    font-size: 3.4666666667vw
}

.date-bar .date-input .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
    padding: 0;
    display: inline-flex
}

.date-bar .date-input .mdc-line-ripple,
.date-bar .date-input .mat-mdc-form-field-subscript-wrapper {
    display: none
}

.date-bar .date-input .mdc-text-field {
    border-radius: 1.3333333333vw
}

.date-bar .date-input .mdc-text-field__input {
    height: 100%
}

.date-bar .date-input .mdc-icon-button svg {
    fill: #fff
}

.date-bar .date-input .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 30px;
    --mdc-icon-button-icon-size: 20px;
    padding: 5px
}

.date-bar .date-input .mat-mdc-icon-button .mat-mdc-button-touch-target {
    padding: 1.3333333333vw;
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size)
}

.date-bar .date-input .mat-mdc-form-field-icon-suffix {
    width: 12vw
}

.date-bar .date-input .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    background: #2e2f31;
    color: #fd1111
}

.input-group .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    --mdc-icon-button-icon-size: 20px;
    padding: 10px
}

.input-group .mat-mdc-icon-button .mat-mdc-button-touch-target {
    padding: 1.3333333333vw;
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size)
}

.input-group .mdc-icon-button svg {
    fill: #fd1111
}