@charset "UTF-8";:root {
    --primary: #281a70;
    --secondary: #ffd259;
    --primary-gradient-from: #272828;
    --primary-gradient-to: #483816;
    --color-success: #40d0cb;
    --color-danger: #ff5959;
    --color-warning: #ffd259;
    --color-info: #00b5ff;
    --color-border: linear-gradient(245deg, #ff9fa2 0%, #6d25f4 100%);
    --content-bg: #281a70;
    --pop-bg: rgba(0, 0, 0, .5);
    --pop-bg-content: #281a70;
    --pop-bg-shadow: rgba(0, 0, 0, .05);
    --pop-mask-bg: rgba(0, 0, 0, .5);
    --color-title: #ffffff;
    --color-text: rgba(255, 255, 255, .4);
    --color-link: var(--primary);
    --color-muted: rgba(255, 255, 255, .3);
    --color-text-strong: #79a5fc;
    --offset-shadow: #281a70;
    --inset-shadow: #ffffff;
    --text-shadow: #834c00;
    --color-content-bg: #ebebeb;
    --custom-font: "Jost";
    --custom-serif: sans-serif;
    --header-bg: var(--primary);
    --header-bg-tab: #342e80;
    --header-bg-none: transparent;
    --header-bg-gradient: linear-gradient( to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100% );
    --header-bg-active: var(--primary);
    --header-burger-icon-color: #ffffff;
    --header-back-icon-color: #ffffff;
    --header-logout-icon-color: #ffffff;
    --header-service-icon-color: #ffffff;
    --header-filter-icon-color: #ffffff;
    --header-layout-icon-color: #ffffff;
    --header-title: var(--color-title);
    --header-vip-title: #ffffff;
    --header-vip-bg-active: var(--header-bg-active);
    --header-vip-title-active: var(--header-vip-title);
    --header-slot-bg-active: #281a70;
    --header-slot-title: #ffffff;
    --header-badge-bg: #cd1818;
    --header-badge-txt: #ffffff;
    --header-login-btn-bg: transparent;
    --header-login-btn-txt: transparent;
    --header-register-btn-bg: transparent;
    --header-register-btn-txt: transparent;
    --header-deposit-btn-bg: transparent;
    --header-deposit-btn-txt: transparent;
    --header-exp-btn-bg: #e62626;
    --header-exp-btn-txt: #ffffff;
    --header-refresh-icon-color: #ffffff;
    --header-close-icon: #ffffff;
    --btn-main-bg: var(--secondary);
    --btn-main-txt: #ffffff;
    --btn-secondary-bg: var(--secondary);
    --btn-secondary-txt: #ffffff;
    --btn-main-bg-disabled: #7e6367;
    --btn-main-txt-disabled: #b1a0a3;
    --btn-secondary-bg-disabled: #79a5fc;
    --btn-secondary-txt-disabled: #ffffff;
    --btn-loading-border: #ffffff;
    --form-box-bg: #363285;
    --form-txt: var(--color-title);
    --form-input-bg: #444796;
    --form-input-txt: var(--color-title);
    --form-input-txt-placeholder: rgba(255, 255, 255, .3);
    --form-input-border: var(--form-input-bg);
    --form-input-border-focus: #ffd259;
    --form-input-border-hover: var(--form-input-border-focus);
    --form-input-bg-disabled: var(--form-input-bg);
    --form-input-border-disabled: var(--form-input-bg-disabled);
    --form-input-txt-disabled: #ffffff;
    --form-select-item-bg: var(--primary);
    --form-clear-icon: url(icon-cross-type09.svg);
    --form-clear-icon-color: #ffd259;
    --form-eyes-close-icon: url(icon-eye-close-type03.svg);
    --form-eyes-open-icon: url(icon-eye-open-type03.svg);
    --form-eyes-icon-color: #ffffff;
    --form-select-triangle: #ffffff;
    --form-refresh-icon: url(icon-refresh-type01.svg);
    --form-refresh-icon-color: #ffffff;
    --form-upload-bg: var(--form-input-bg);
    --form-upload-border: var(--color-border);
    --form-upload-camera-icon: url(upload.svg);
    --form-upload-camera-icon-color: #a0a2ca;
    --form-upload-txt: #a0a2ca;
    --form-upload-mask-bg: rgba(0, 0, 0, .7);
    --form-upload-retry-btn-bg: var(--secondary);
    --form-upload-retry-btn-txt: #ffffff;
    --form-upload-file-bg: var(--primary);
    --form-uncheck-color: rgba(255, 255, 255, .5);
    --form-input-crypto-unit: #ffae12;
    --form-input-crypto-unit-txt: #ffffff;
    --tab-header-bg: #342e80;
    --tab-line-txt: rgba(255, 255, 255, .6);
    --tab-line-txt-active: #ffd259;
    --tab-line-underline: #ffd259;
    --tab-line-badge-bg: #ffd259;
    --tab-line-badge-txt: #281a70;
    --tab-btn-txt: #ffffff;
    --tab-btn-txt-shadow: #834c00;
    --tab-btn-bg: #342e80;
    --tab-btn-bg-active: #ffd259;
    --tab-btn-txt-active: var(--tab-btn-txt);
    --tab-btn-active-shadow: var(--primary);
    --tab-btn-bar-bg: var(--primary);
    --radio-bg: #444796;
    --radio-txt: #ffffff;
    --radio-border: var(--color-border);
    --radio-bg-hover: linear-gradient( 180deg, var(--primary-gradient-from) 0%, var(--primary-gradient-to) 100% );
    --radio-txt-hover: var(--radio-txt);
    --radio-border-hover: var(--radio-border);
    --radio-bg-checked: linear-gradient( 180deg, var(--primary-gradient-from) 0%, var(--primary-gradient-to) 100% );
    --radio-txt-checked: #ffffff;
    --radio-border-checked: linear-gradient(190deg, #ff9fa2 0%, #6d25f4 100%);
    --radio-underline-checked: var(--radio-border-checked);
    --checkbox-bg-checked: linear-gradient(180deg, #6d4985 0%, #3e1f97 100%);
    --checkbox-bg-color: #222222;
    --checkbox-bg-color-checked: #ffffff;
    --checkbox-tick: #222222;
    --checkbox-border: var(--color-border);
    --checkbox-border-checked: #ffffff;
    --switch-bg: var(--radio-bg);
    --switch-bg-checked: var(--radio-border-checked);
    --switch-target-txt: rgba(255, 255, 255, .8);
    --switch-target-btn-icon: #000000;
    --switch-target-btn-bg: #333333;
    --switch-target-knob: #ffffff;
    --switch-target-race-track-bg: #032682;
    --date-picker-calendar-bg: linear-gradient( to bottom, var(--form-box-bg) 0%, var(--content-bg) 100% );
    --date-picker-calendar-shadow: rgba(#000000, .1);
    --date-picker-calendar-shadow-inset: transparent;
    --date-picker-calendar-border: transparent;
    --date-picker-calendar-selected-bg: var(--primary);
    --date-picker-calendar-selected-txt: var(--color-text);
    --date-picker-calendar-selected-shadow: rgba(#000000, .3);
    --date-picker-calendar-selected-shadow-inset: transparent;
    --date-picker-calendar-table-title: #ffffff;
    --date-picker-calendar-table-txt: var(--color-text);
    --date-picker-calendar-today-txt-disabled: var(--color-muted);
    --date-picker-calendar-today-border: var(--primary);
    --date-picker-calendar-arrow-icon: var(--date-picker-calendar-table-txt);
    --pop-title-bg: var(--header-bg);
    --pop-title: #ffffff;
    --pop-close-icon-color: #ffffff;
    --pop-lock-close-icon-color: #ffffff;
    --pop-txt: rgba(255, 255, 255, .7);
    --pop-notshow-bg: rgba(0, 0, 0, .2);
    --pop-notshow-txt: var(--pop-title);
    --pop-notshow-check-bg: rgba(0, 0, 0, .7);
    --pop-notshow-check-border: var(--pop-title);
    --pop-refresh-amount-bg: var(--pop-bg-content);
    --pop-refresh-amount-txt: var(--pop-title);
    --popup-page-main-bg: var(--pop-bg-content);
    --popup-page-main-shadow: #000;
    --popup-page-main-container-bg: var(--content-bg);
    --popup-page-main-header-bg: var(--header-bg);
    --toolbar-bg: #000000;
    --toolbar-txt: #ffffff;
    --toolbar-item-active: rgba(255, 255, 255, .2);
    --mode-txt: #ffffff;
    --mode-tips-bg: #444796;
    --mode-tips-txt: #ffffff;
    --pagination-bullet-bg: #ffffff;
    --pagination-bullet-bg-active: var(--primary);
    --btn-voucher-txt: #ffffff;
    --btn-voucher-txt-value: #ff3a3a;
    --btn-voucher-bg: rgba(34, 34, 34, .9);
    --btn-voucher-bg-border: var(--color-border);
    --sidenav-mask: rgba(0, 0, 0, .5);
    --sidenav-close-icon-color: #ffffff;
    --sidenav-member-close-icon-color: var(--sidenav-close-icon-color);
    --sidenav-info-bg: var(--content-bg);
    --sidenav-info-bottom-bg: linear-gradient( 45deg, rgba(68, 50, 164, .7) 0%, rgba(57, 135, 215, .7) 100% );
    --sidenav-title-txt: #ffffff;
    --sidenav-profile-txt: #b9c9ff;
    --sidenav-info-title-bottom: #ffffff;
    --sidenav-info-login-icon-color: #ffffff;
    --sidenav-info-register-icon-color: #ffffff;
    --sidenav-wallet-txt: #b9c9ff;
    --sidenav-wallet-amount: #ffffff;
    --sidenav-wallet-icon-bg: rgba(255, 255, 255, .1);
    --sidenav-shortcut-txt: #b9c9ff;
    --sidenav-shortcut-icon-bg: rgba(255, 255, 255, .1);
    --sidenav-shortcut-icon-txt: #ffffff;
    --sidenav-category-bg: linear-gradient(45deg, #48509c 0%, #473f8d 100%);
    --sidenav-category-columns-bg: linear-gradient( 45deg, rgba(123, 138, 225, .9) 0%, #473f8d 100% );
    --sidenav-category-txt: #ffffff;
    --sidenav-category-shadow: #241d60;
    --sidenav-category-bg-active: rgba(161, 160, 255, .3);
    --sidenav-category-txt-active: #ffffff;
    --sidenav-info-points-bg: var(--form-box-bg);
    --sidenav-info-points-txt: #b9c9ff;
    --sidenav-info-points-number: #ffe51d;
    --sidenav-bg: var(--primary);
    --sidenav-set-shortcut-icon: url(/assets/images/menu/member-menu/icon-setting.svg) no-repeat center / 100%;
    --sidenav-set-shortcut-icon-bg: rgba(100, 125, 202, .5);
    --sidenav-set-shortcut-icon-color: #281a70;
    --sidenav-set-shortcut-edit-icon: url(/assets/images/menu/member-menu/icon-setup.svg) no-repeat center / 100%;
    --sidenav-set-shortcut-edit-icon-bg: #79a5fc;
    --sidenav-set-shortcut-edit-icon-color: #4e4eb0;
    --sidenav-set-shortcut-set-icon-color: #79a5fc;
    --sidenav-set-shortcut-add-icon-bg: #ffd259;
    --sidenav-set-shortcut-add-icon-color: #4e4eb0;
    --sidenav-category-area-bg: #363285;
    --sidenav-category-icon-bg: var(--sidenav-wallet-icon-bg);
    --sidenav-category-real-time-bonus-notice-bg: var( --sidenav-set-shortcut-add-icon-bg );
    --sidenav-category-real-time-bonus-notice-txt: var( --sidenav-set-shortcut-add-icon-color );
    --sidenav-search-btn-bg: var(--sidenav-category-bg);
    --sidenav-search-btn-txt: var(--form-input-txt-placeholder);
    --sidenav-search-btn-search-icon: var(--form-clear-icon-color);
    --pop-sidenav-search-game-bg: var(--content-bg);
    --pop-sidenav-search-game-header-bg: var(--header-bg);
    --pop-sidenav-search-game-header-search-icon: #ffffff;
    --pop-sidenav-search-game-header-input-bg: var(--form-input-bg);
    --pop-sidenav-search-game-header-input-txt: var(--form-input-txt);
    --pop-sidenav-search-game-header-input-border-hover: var( --form-input-border-focus );
    --pop-sidenav-search-game-header-input-txt-placeholder: var( --form-input-txt-placeholder );
    --pop-sidenav-search-game-header-close-icon: #ffffff;
    --sidenav-category-icon-withdrawal: url(/assets/images/menu/icon-withdrawal.svg);
    --sidenav-category-icon-bonuses: url(/assets/images/menu/icon-bonuses.svg);
    --sidenav-category-icon-inbox: url(/assets/images/menu/icon-inbox.svg);
    --sidenav-service-title: var(--color-title);
    --sidenav-service-txt: var(--color-title);
    --pop-language-header-bg: var(--pop-bg-content);
    --pop-language-title: var(--pop-title);
    --pop-language-content-bg: var(--content-bg);
    --pop-language-item-bg: var(--form-box-bg);
    --pop-currency-txt: #ffffff;
    --pop-language-btn-txt: #ffffff;
    --pop-language-btn-bg: var(--form-input-bg);
    --pop-language-btn-border: var(--color-border);
    --pop-language-btn-bg-active: linear-gradient( 180deg, #6e4a85 0%, #3d1f97 100% );
    --pop-language-btn-txt-active: var(--pop-language-btn-txt);
    --pop-language-btn-border-active: var(--pop-language-btn-border);
    --pop-language-close-icon-color: var(--pop-close-icon-color);
    --board-before-bg: linear-gradient( 120deg, color-mix(in srgb, #9bc7ff, transparent 100%) 0%, #9bc7ff 100% );
    --board-before-shadow: #19066c;
    --board-login-bg: linear-gradient(220deg, #ff9fa2 0%, #7900e2 100%);
    --board-login-btn-bg: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100% );
    --board-login-btn-txt: #ffffff;
    --board-login-btn-txt-shadow: #f364bc;
    --board-register-bg: linear-gradient(220deg, #63e9ec 0%, #7900e2 100%);
    --board-register-btn-bg: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100% );
    --board-register-btn-txt: #ffffff;
    --board-register-btn-txt-shadow: #281a70;
    --board-btn-shadow: #8800da;
    --board-after-bg: var(--board-before-bg);
    --board-deposit-btn-bg: var(--board-register-btn-bg);
    --board-deposit-btn-txt: var(--board-register-btn-txt);
    --board-deposit-btn-txt-shadow: var(--board-register-btn-txt-shadow);
    --board-wallet-txt: #a0a2ca;
    --board-wallet-amount: var(--sidenav-wallet-amount);
    --board-wallet-refresh-icon-color: #a0a2ca;
    --announvement-bg: transparent;
    --announvement-icon: url(announcement-icon.svg);
    --announvement-icon-color: #6f87d6;
    --announvement-txt: #6f87d6;
    --nav-bg: #393485;
    --nav-category-bg: linear-gradient(162deg, #948acc 0%, #353390 100%);
    --nav-category-shadow: #7878a2;
    --nav-category-inset-shadow: #222071;
    --nav-category-txt: #ffffff;
    --nav-category-bg-active: linear-gradient(to bottom, #ff9fa2 0%, #6d25f4 80%);
    --nav-category-bg-active-circle: rgba(0, 0, 0, 0);
    --nav-category-txt-active: #ffffff;
    --nav-underline: linear-gradient(to right, #7801db 0%, #63e9ec 80%);
    --nav-item-bg: #393485;
    --nav-item-bg-shadow: var(--form-box-bg);
    --sa-maintenance-bg: #ffffff;
    --sa-maintenance-icon-color: #ffb80c;
    --sa-maintenance-txt: #222222;
    --sa-maintenance-info-bg: #ffffff;
    --sa-maintenance-info-icon-color: var(--color-muted);
    --sa-maintenance-info-tooltips-bg: #222222;
    --sa-maintenance-info-tooltips-txt: #ffffff;
    --sa-back-to-cricket-bg: var(--sa-maintenance-bg);
    --sa-back-tocricket-tap-icon-color: var(--sa-maintenance-icon-color);
    --sa-loader-circle: #ffb80c;
    --icon-marquee-bg: var(--form-box-bg);
    --icon-marquee-title: var(--color-title);
    --icon-marquee-border: var(--secondary);
    --event-title: var(--color-title);
    --event-border: var(--secondary);
    --event-slick-dot: rgba(255, 255, 255, .5);
    --event-slick-dot-active: #79a5fc;
    --footer-bg: var(--content-bg);
    --footer-title: var(--primary);
    --footer-txt: #ffffff;
    --footer-border: #ffffff;
    --footer-area-bg: rgba(255, 255, 255, .08);
    --footer-link: var(--color-muted);
    --footer-link-hover: var(--color-link);
    --footer-seo-content-wrapper-bg: linear-gradient( to top, var(--footer-bg) 10%, color-mix(in srgb, var(--footer-bg), transparent 100%) 100% );
    --footer-seo-content-wrapper-title: #ffffff;
    --footer-seo-content-wrapper-txt: var(--color-muted);
    --footer-seo-content-wrapper-fold-btn: var(--btn-main-bg);
    --footer-seo-content-wrapper-fold-btn-txt: var(--btn-main-txt);
    --footer-btn-bg: var(--form-box-bg);
    --footer-btn-txt: #ffffff;
    --footer-btn-border: #454749;
    --footer-btn-arrow: var(--footer-btn-txt);
    --footer-btn-bg-hover: var(--radio-bg-hover);
    --footer-btn-txt-hover: var(--radio-txt-hover);
    --footer-btn-border-hover: var(--radio-border-hover);
    --footer-btn-arrow-hover: var(--footer-btn-txt-hover);
    --footer-gradient-mask: linear-gradient(transparent, var(--footer-bg));
    --footer-parthers-title: color-mix(in srgb, var(--color-text), transparent 20%);
    --footer-parthers-subtitle: color-mix(in srgb, var(--color-text), transparent 20%);
    --footer-copyrights-txt: var(--color-muted);
    --lobby-bg: var(--content-bg);
    --lobby-loading-bg: var(--content-bg);
    --lobby-title: var(--color-title);
    --lobby-border: var(--secondary);
    --lobby-arrow: #ffffff;
    --lobby-item-bg: #342e80;
    --lobby-item-title: #b9c9ff;
    --lobby-item-new-tag-bg: #ffd259;
    --lobby-item-new-tag-txt: #ffffff;
    --login-forgetpassword-btn-border: #79a5fc;
    --login-forgetpassword-btn-txt: var(--login-forgetpassword-btn-border);
    --login-txt: #ffffff;
    --login-link: #79a5fc;
    --alert-login-fail-tips-bg: color-mix(in srgb, var(--color-danger), transparent 80%);
    --alert-login-fail-tips-border: var(--color-danger);
    --alert-login-fail-tips-txt: var(--color-danger);
    --pop-login-fail-bg: var(--pop-bg-content);
    --pop-login-fail-title: var(--color-danger);
    --pop-login-fail-txt: #ffffff;
    --biometric-btn: #393485;
    --biometric-face: #ffffff;
    --biometric-btn-txt: #ffffff;
    --biometric-wave-line-ani: var(--primary);
    --biometric-wave-line-cirle: #79a5fc;
    --biometric-wave-line-gradient-start: #ffd259;
    --biometric-wave-line-gradient-end: #ffd259;
    --biometric-switch-bg: #79a5fc;
    --biometric-txt: #ffffff;
    --biometric-wave-color-1: #ffffff;
    --biometric-wave-color-2: #673ab7;
    --biometric-wave-color-3: #79a5fc;
    --biometric-face-bg: linear-gradient(180deg, #284296 0%, #392290 100%);
    --biometric-title: #ffffff;
    --biometric-content: rgba(255, 255, 255, .7);
    --reset-password-txt: var(--color-title);
    --register-affiliate: #ffd259;
    --register-affiliate-txt: var(--content-bg);
    --register-success-check-icon: var(--color-success);
    --register-success-check-icon-clip: transparent;
    --register-fail-check-icon: var(--color-danger);
    --register-fail-check-icon-clip: transparent;
    --register-question-tip-txt: #ffffff;
    --register-question-tip-bg: #8c8c8c;
    --pop-register-success-mask: #333333;
    --pop-register-success-bg: #393485;
    --pop-register-success-title: var(--color-success);
    --pop-register-success-subtitle: #ffffff;
    --pop-register-success-txt: rgba(255, 255, 255, .7);
    --pop-register-success-home-btn-txt: #ffffff;
    --pop-register-fail-title: var(--color-danger);
    --search-bg: var(--form-box-bg);
    --search-item-bg: var(--radio-bg);
    --search-item-txt: var(--radio-txt);
    --search-item-border: var(--radio-border);
    --search-item-bg-hover: var(--radio-bg-hover);
    --search-item-txt-hover: var(--radio-txt-hover);
    --search-item-border-hover: var(--radio-border-hover);
    --search-item-bg-active: var(--radio-bg-checked);
    --search-item-txt-active: var(--radio-txt-checked);
    --search-item-border-active: var(--radio-border-checked);
    --search-search-icon: #ffffff;
    --pop-search-header-bg: #281a70;
    --pop-search-back-icon-color: var(--search-search-icon);
    --pop-search-games-header-bg: var(--pop-search-header-bg);
    --pop-search-games-header-back-icon: var(--search-search-icon);
    --pop-search-input-bg: #281a70;
    --pop-search-input-txt: #ffffff;
    --pop-search-search-icon-color: var(--pop-search-back-icon-color);
    --pop-search-input-placeholder: var(--form-input-txt-placeholder);
    --pop-search-input-border: var(--pop-search-input-bg);
    --pop-search-input-border-hover: var(--form-input-border-hover);
    --pop-search-input-border-focus: var(--form-input-border-focus);
    --pop-search-clear-txt: var(--color-text);
    --pop-search-title: var(--color-title);
    --pop-search-inner-bg: #ffffff;
    --search-btn: var(--search-bg);
    --brand-search-bg: var(--form-box-bg);
    --brand-search-item-bg: var(--radio-bg);
    --brand-search-item-txt: var(--radio-txt);
    --brand-search-item-border: var(--radio-border);
    --brand-search-item-bg-active: var(--radio-bg-checked);
    --brand-search-item-txt-active: var(--radio-txt-checked);
    --brand-search-item-border-active: var(--radio-border-checked);
    --brand-search-btn: var(--search-btn);
    --brand-search-search-icon: var(--search-search-icon);
    --game-filter-title: var(--search-item-txt);
    --game-filter-border: var(--secondary);
    --game-filter-dropdown-menu-txt: var(--search-item-txt);
    --game-filter-dropdown-menu-bg: var(--search-bg);
    --game-filter-dropdown-item-bg: var(--search-bg);
    --game-filter-dropdown-item-bg-active: var(--game-filter-dropdown-item-bg);
    --game-filter-dropdown-item-txt: var(--game-filter-dropdown-menu-txt);
    --game-filter-dropdown-item-txt-active: var(--primary);
    --game-filter-dropdown-arrow-icon: var(--search-item-txt);
    --slot-tag-new-bg: #ffd259;
    --slot-tag-new-txt: #ffffff;
    --slot-card-bg: var(--nav-item-bg);
    --slot-card-title: var(--color-title);
    --slot-card-txt: var(--color-text);
    --slot-card-number: var(--secondary);
    --slot-jackpot-total: #ffffff;
    --slot-jackpot-amount: #ffef3c;
    --pop-transfer-bg: #281a70;
    --pop-transfer-btn-take-back: var(--gradient-blue);
    --pop-transfer-btn-other-account: var(--gradient-green);
    --pop-transfer-btn-other-renew: var(--gradient-orange);
    --pop-transfer-txt: #ffffff;
    --pop-transfer-bonus-bg: rgba(255, 255, 255, .8);
    --pop-transfer-bonus-border: #ffffff;
    --pop-transfer-bonus-txt: #281a70;
    --pop-transfer-title: var(--color-title);
    --pop-transfer-border: var(--secondary);
    --pop-transfer-tips: var(--color-title);
    --pop-transfer-amount-fade: #444796;
    --pop-transfer-wallet-refresh-icon-color: #ffffff;
    --games-empty-bg: var(--form-box-bg);
    --games-empty-title: var(--primary);
    --games-empty-txt: var(--color-title);
    --pop-bonuswallet-txt: rgba(255, 255, 255, .8);
    --pop-bonuswallet-title: #ffffff;
    --pop-bonuswallet-card-bg: linear-gradient( 180deg, rgba(54, 50, 133, .8) 0%, rgba(78, 85, 162, .8) 100% );
    --pop-bonuswallet-card-title: var(--color-title);
    --pop-bonuswallet-card-border: var(--secondary);
    --pop-bonuswallet-card-date: rgba(255, 255, 255, .6);
    --pop-bonuswallet-card-detail: #b9c9ff;
    --pop-bonuswallet-card-amount: #ffd259;
    --pop-bonuswallet-card-start-btn: linear-gradient( 230deg, #ffd259 0%, #ffd259 100% );
    --pop-bonuswallet-card-start-txt: #ffffff;
    --pop-bonuswallet-tips: var(--color-text);
    --promotion-bonuswallet-label-normal: var(--color-success);
    --promotion-bonuswallet-label-running: var(--primary);
    --promotion-bonuswallet-label-disabled: #777;
    --color-walletcard-txt: #ffffff;
    --pop-bonuswallet-lvup-back-icon-color: #ffffff;
    --pop-bonuswallet-lvup-check: #ffd259;
    --pop-bonuswallet-lvup-tips-bg: linear-gradient( 180deg, #363285 0%, #363285 100% );
    --pop-bonuswallet-lvup-tips-title: #ffffff;
    --pop-bonuswallet-lvup-tips-txt: #b9c9ff;
    --pop-bonuswallet-lvup-tips-date-icon-color: var( --pop-bonuswallet-lvup-tips-txt );
    --new-slot-search-bg: var(--content-bg);
    --new-slot-search-border: rgba(255, 255, 255, .2);
    --new-slot-search-icon-color: #ffffff;
    --new-slot-provider-bg: var(--new-slot-search-bg);
    --new-slot-provider-border: #79a5fc;
    --new-slot-provider-shadow: #79a5fc;
    --new-slot-provider-border-active: #ffd259;
    --new-slot-provider-shadow-active: #ffd259;
    --new-slot-input-bg: transparent;
    --new-slot-input-txt: #ffffff;
    --new-slot-clear-icon: url(/assets/images/icon-set/icon-cross-type09.svg);
    --new-slot-clear-icon-color: rgba(255, 255, 255, .4);
    --new-slot-cancel-txt: rgba(255, 255, 255, .8);
    --new-slot-cancel-border: rgba(51, 51, 51, .08);
    --new-slot-search-area-bg: var(--content-bg);
    --new-slot-recently-played: url(/assets/images/slotgame/recently-played.png);
    --new-slot-recently-played-bg: linear-gradient( 180deg, #98b9fb 0%, #8bb1fb 100% );
    --new-slot-my-favorites: url(/assets/images/slotgame/my-favorites.png);
    --new-slot-my-favorites-bg: linear-gradient(0deg, #c671e4 0%, #9c4fd8 100%);
    --new-slot-category-title: #ffffff;
    --new-slot-radio-bg: var(--radio-bg);
    --new-slot-radio-txt: var(--radio-txt);
    --new-slot-radio-border-checked: var(--radio-border-checked);
    --new-slot-radio-txt-checked: var(--radio-txt-checked);
    --new-slot-history-clock-icon-color: rgba(255, 255, 255, .5);
    --new-slot-history-clear-icon-color: rgba(255, 255, 255, .5);
    --new-slot-history-border: rgba(255, 255, 255, .1);
    --new-slot-search-btn-txt: var(--btn-main-txt);
    --new-slot-results-title: #ffffff;
    --new-slot-results-layout-icon-color: #ffffff;
    --new-slot-ranking-txt: rgba(121, 165, 252, .4);
    --new-slot-ranking-txt-border: #ffffff;
    --new-slot-ranking-img-border: url(/assets/images/slotgame/hexagon.svg);
    --new-slot-ranking-img-shadow: rgba(0, 0, 0, .5);
    --new-slot-ranking-mask: url(/assets/images/slotgame/hexagon-mask.svg);
    --new-slot-recommend-txt: #ffffff;
    --new-slot-game-list-title: #ffffff;
    --new-slot-game-list-subtitle: rgba(255, 255, 255, .5);
    --new-slot-game-list-star-icon: url(/assets/images/slotgame/icon-dark-star.svg);
    --new-slot-game-list-btn-bg: rgba(255, 255, 255, .1);
    --new-slot-game-list-btn-txt: #ffffff;
    --new-slot-game-list-btn-bg-active: linear-gradient( 0deg, #ff9fa2 0%, #6d25f4 100% );
    --new-slot-game-list-btn-txt-active: #ffffff;
    --new-slot-game-list-shadow: var(--content-bg);
    --new-slot-game-list-circle-star-icon: url(/assets/images/slotgame/icon-white-circle-star.svg);
    --new-slot-details-game-grid-shadow: var(--content-bg);
    --new-slot-details-date-txt: #ffffff;
    --new-slot-details-date-txt-shadow: #ffffff;
    --new-slot-details-date-border: #ffffff;
    --new-slot-details-select-date-bg: #382b7b;
    --new-slot-details-select-date-week-txt: rgba(255, 255, 255, .3);
    --new-slot-details-select-date-txt: #ffffff;
    --new-slot-details-select-date-txt-active: #ffffff;
    --new-slot-details-select-date-ball: linear-gradient( 0deg, #6d25f4 0%, #ff9fa2 100% );
    --new-slot-details-pop-bg: var(--pop-bg-content);
    --new-slot-details-pop-btn-bg: #393485;
    --new-slot-details-pop-btn-txt: #ffffff;
    --new-slot-details-pop-btn-border: #ffffff1c;
    --new-slot-details-loading-color-1: var(--primary);
    --new-slot-details-loading-color-2: var(--secondary);
    --new-slot-details-empty-txt: #ffffff;
    --promotion-bg: #393485;
    --promotion-info-bg: #8dbdff;
    --promotion-info-txt: #ffffff;
    --promotion-card-title: var(--color-title);
    --promotion-card-txt: color-mix(in srgb, var(--color-title), transparent 20%);
    --promotion-clock-icon-color: rgba(255, 255, 255, .8);
    --promotion-deposit-btn-bg: var(--color-success);
    --promotion-tag-free-bg: var(--color-danger);
    --promotion-tag-free-txt: #ffffff;
    --promotion-tag-bonus-bg: var(--color-success);
    --promotion-tag-bonus-txt: #ffffff;
    --promotion-tab-underline-active: var(--radio-underline-checked);
    --pop-promotion-close-icon-color: #ffffff;
    --pop-promotion-bg: #ffffff;
    --pop-promotion-txt: #5c567a;
    --pop-promotion-title: #ffffff;
    --pop-promotion-clock-icon-color: #5c567a;
    --pop-promotion-table-title-bg: #342e80;
    --pop-promotion-table-title-txt: #ffffff;
    --pop-promotion-table-content-bg: #efeef6;
    --pop-promotion-table-content-title-bg: var(--pop-promotion-table-title-bg);
    --pop-promotion-table-content-title-txt: var(--pop-promotion-table-title-txt);
    --pop-promotion-table-content-txt: #5c567a;
    --pop-promotion-table-content-border: rgba(255, 255, 255, .2);
    --pop-promotion-bonuswallet-title: #ffffff;
    --pop-promotion-bonuswallet-wallet-bg: rgba(255, 255, 255, .1);
    --pop-promotion-bonuswallet-wallet-txt: #a0a2ca;
    --pop-promotion-bonuswallet-wallet-number: #ffffff;
    --pop-promotion-bonuswallet-deposit-now-border: rgba(160, 162, 202, .4);
    --pop-promotion-bonuswallet-deposit-now-bg: var(--pop-bg-content);
    --pop-promotion-bonuswallet-link: #79a5fc;
    --btn-status-txt: #ffffff;
    --btn-attend-bg: var(--color-success);
    --btn-request-bg: var(--color-danger);
    --btn-joined-bg: var(--color-warning);
    --btn-apply-bg: var(--color-info);
    --btn-detail-bg: var(--btn-main-bg);
    --btn-deposit-bg: var(--btn-secondary-bg);
    --btn-request-status-txt: var(--color-muted);
    --btn-joined-status-txt: var(--color-muted);
    --btn-apply-status-txt: var(--btn-status-txt);
    --btn-detail-status-txt: var(--btn-main-txt);
    --btn-deposit-status-txt: var(--btn-secondary-txt);
    --form-inputgroup-btn-bg: var(--btn-main-bg);
    --form-inputgroup-btn-txt: var(--btn-main-txt);
    --form-inputgroup-input-bg: var(--form-box-bg);
    --form-inputgroup-input-txt: var(--form-input-txt);
    --form-inputgroup-input-border: var(--form-input-border);
    --form-inputgroup-input-border-focus: var(--form-input-border-focus);
    --form-inputgroup-input-txt-placeholder: var(--form-input-txt-placeholder);
    --form-inputgroup-input-title: var(--color-text);
    --limit-title: #ffffff;
    --limit-txt: #ffffff;
    --limit-ip-txt: #a0a2ca;
    --limit-timezone-txt: #79a5fc;
    --limit-time-txt: #b9c9ff;
    --gotop-bg: radial-gradient( circle at 1.2% 1.2%, #00ecff 0%, #6230d5 48%, #4e5cff 81%, #00bbe6 139%, #ffffff 139% );
    --chat-bg: radial-gradient( circle at 1.2% 1.2%, #ff9fa2 0%, #a372e2 48%, #6d25f4 81%, #ff9fa2 139%, #ff9fa2 139% );
    --chat-icon: #ffffff;
    --app-download-bg: var(--content-bg);
    --app-download-primary: var(--primary);
    --app-download-header-bg: var(--header-bg);
    --app-download-header-title: #ffffff;
    --app-download-header-back-icon: var(--app-download-header-title);
    --app-download-title: #ffffff;
    --app-download-subtitle: var(--app-download-title);
    --app-download-txt: var(--primary);
    --app-download-list-txt: #ffffff;
    --app-download-btn-bg: var(--btn-main-bg);
    --app-download-btn-txt: var(--btn-main-txt);
    --app-download-side-btn-bg: var(--app-download-btn-bg);
    --app-download-side-btn-txt: var(--app-download-btn-txt);
    --app-download-dot: #ffffff;
    --app-download-dot-active: var(--app-download-primary);
    --pop-app-download-side-bg: var(--content-bg);
    --pop-app-download-side-header-bg: var(--pop-bg-content);
    --pop-app-download-side-header-title: #ffffff;
    --pop-app-download-side-header-close-icon: var( --pop-app-download-side-header-title );
    --launch-bg: #ffffff;
    --launch-linear-bg: linear-gradient( 135deg, var(--launch-bg) 0%, color-mix(in srgb, var(--launch-bg), transparent 70%) 50% );
    --launch-menu-highlight-shadow-color01: #b0dbff;
    --launch-menu-highlight-shadow-color02: rgba(255, 255, 255, .5);
    --launch-btn-bg: linear-gradient(180deg, #515151 0%, #000000 100%);
    --launch-home-btn-icon: #ffffff;
    --launch-home-btn-icon-color: #ffffff;
    --launch-home-btn-bg: linear-gradient( 180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100% );
    --launch-nodeposit-btn-bg: linear-gradient( 180deg, rgba(71, 78, 120, 0) 0%, rgba(71, 78, 120, 0) );
    --lanuch-stop-color: #ffffff;
    --lanuch-end-color: #b1b1b1;
    --lanuch-site-bg: linear-gradient( 180deg, #000000 40%, color-mix(in srgb, #000000, transparent 100%) 100% );
    --launch-game-header-bg: linear-gradient( 135deg, #00ecff 0%, #6230d5 40%, #4e5cff 60%, #00bbe6 100% );
    --launch-game-btn-bg: radial-gradient( circle at 1.2% 1.2%, #4e5cff 0%, #6230d5 48%, #4e5cff 81%, #6230d5 139%, #4e5cff 139% );
    --launch-game-logo-shadow: rgba(0, 0, 0, .5);
    --launch-game-icon-color: #ffffff;
    --launch-info-border-left: rgba(255, 255, 255, .1);
    --launch-info-title: #ffffff;
    --launch-info-value: #ffffff;
    --thirdparty-bg: var(--pop-register-success-bg);
    --thirdparty-h3: var(--color-success);
    --thirdparty-highlight-span: var(--secondary);
    --thirdparty-title: var(--color-title);
    --thirdparty-txt: var(--color-text);
    --thirdparty-close-btn: var(--thirdparty-h3);
    --thirdparty-close-txt: var(--thirdparty-bg);
    --color-card-bg: lighten(var(--color-content-bg), 7%);
    --tips-content-info-tag: var(--color-info);
    --tips-document-info-tag: #ff777c;
    --tips-document-choose-one-info-tag: #ef67ab;
    --tips-info-supporting-txt-tag: #d8a845;
    --third-party-primary: var(--primary);
    --third-party-error: var(--color-danger);
    --third-party-check: var(--color-success);
    --third-party-txt-default: #222222;
    --third-party-txt-secondary: #ffffff;
    --third-party-txt-fourth: #222222;
    --third-party-txt-disabled: var(--form-input-txt-disabled);
    --third-party-icon-default: var(--color-muted);
    --third-party-icon-secondary: #090d1a;
    --third-party-shadow-default: #06080f;
    --third-party-shadow-primary: #ffb80c;
    --third-party-shadow-secondary: transparent;
    --third-party-border-default: transparent;
    --third-party-border-secondary: transparent;
    --third-party-input-default: #f2f2f2;
    --third-party-input-disabled: var(--form-input-bg-disabled);
    --third-party-bg-default: #ebebeb;
    --third-party-bg-disabled: var(--form-input-bg-disabled);
    --third-party-gradient-primary-light: #ffc331;
    --third-party-gradient-primary-dark: #ffb80c;
    --third-party-gradient-secondary-light: #333333;
    --third-party-gradient-secondary-dark: #222222;
    --third-party-gradient-tertiary-light: #f2f2f2;
    --third-party-gradient-tertiary-dark: #f2f2f2;
    --third-party-login-content-bg: var(--third-party-bg-default);
    --third-party-login-banner-dot: color-mix(in srgb, var(--third-party-primary), transparent 50%);
    --third-party-login-banner-dot-active: var(--third-party-primary);
    --third-party-login-form-txt: var(--third-party-txt-fourth);
    --third-party-login-form-txt-active: var(--third-party-txt-fourth);
    --third-party-login-form-input-bg: var(--third-party-input-default);
    --third-party-login-form-input-border: var(--third-party-border-default);
    --third-party-login-form-input-txt: var(--form-input-txt);
    --third-party-login-form-input-txt-placeholder: var( --form-input-txt-placeholder );
    --third-party-login-form-input-border-focus: var(--third-party-primary);
    --third-party-login-form-input-bg-disabled: var(--third-party-input-disabled);
    --third-party-login-form-input-border-disabled: var( --third-party-border-secondary );
    --third-party-login-form-input-txt-disabled: var(--third-party-txt-disabled);
    --third-party-login-form-eyes-icon-color: rgba(34, 34, 34, .5);
    --third-party-login-form-clear-icon-color: rgba(34, 34, 34, .5);
    --third-party-login-puzzle-box-bg: var(--third-party-input-default);
    --third-party-login-puzzle-box-border: var(--third-party-border-default);
    --third-party-login-puzzle-box-txt: var(--third-party-txt-fourth);
    --third-party-login-puzzle-box-refresh-icon-color: var( --third-party-txt-default );
    --third-party-login-puzzle-box-slider-bg: var(--third-party-bg-default);
    --third-party-login-puzzle-box-slider-border: var( --third-party-border-default );
    --third-party-login-puzzle-box-slider-btn-bg: linear-gradient( 90deg, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 50% );
    --third-party-login-puzzle-box-slider-btn-inner-shadow: var( --third-party-shadow-primary );
    --third-party-login-puzzle-box-slider-btn-arrow-icon-color: #222222;
    --third-party-login-puzzle-box-tips-txt: var(--third-party-txt-default);
    --third-party-login-puzzle-box-slider-bg-success: color-mix(in srgb, var(--third-party-check), transparent 70%);
    --third-party-login-puzzle-box-slider-border-success: var( --third-party-check );
    --third-party-login-puzzle-box-slider-btn-bg-success: var( --third-party-check );
    --third-party-login-puzzle-box-slider-btn-inner-shadow-success: var( --third-party-check );
    --third-party-login-puzzle-box-slider-btn-arrow-icon-color-success: var( --third-party-txt-secondary );
    --third-party-login-puzzle-box-tips-txt-success: var(--third-party-check);
    --third-party-login-puzzle-box-slider-bg-error: color-mix(in srgb, var(--third-party-error), transparent 70%);
    --third-party-login-puzzle-box-slider-border-error: var(--third-party-error);
    --third-party-login-puzzle-box-slider-btn-bg-error: var(--third-party-error);
    --third-party-login-puzzle-box-slider-btn-inner-shadow-error: var( --third-party-error );
    --third-party-login-puzzle-box-slider-btn-arrow-icon-color-error: var( --third-party-txt-secondary );
    --third-party-login-puzzle-box-tips-txt-error: var(--third-party-error);
    --third-party-login-btn-main-bg: linear-gradient( to right, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 50% );
    --third-party-login-btn-main-txt: var(--third-party-txt-default);
    --third-party-login-btn-main-bg-shadow: #06080f;
    --third-party-login-btn-main-bg-inner-shadow: var( --third-party-shadow-primary );
    --third-party-login-btn-main-bg-disabled: var(--btn-main-bg-disabled);
    --third-party-login-btn-main-txt-disabled: var(--btn-main-txt-disabled);
    --third-party-login-txt: var(--third-party-txt-default);
    --third-party-login-biometric-btn: var(--third-party-primary);
    --third-party-login-biometric-btn-txt: var(--third-party-bg-default);
    --third-party-login-color-danger: var(--third-party-error);
    --third-party-login-findpassword-txt: var(--third-party-primary);
    --third-party-login-tab-txt: var(--third-party-txt-default);
    --third-party-login-tab-txt-active: var(--third-party-primary);
    --third-party-login-tab-line-active: var(--third-party-primary);
    --third-party-verification-code-txt: var(--third-party-txt-default);
    --third-party-verification-tips-txt: var(--third-party-verification-code-txt);
    --third-party-verification-code-txt-highlight: var(--third-party-primary);
    --third-party-verification-code-link: var(--third-party-primary);
    --third-party-register-title: var(--third-party-primary);
    --third-party-register-btn-main-bg: linear-gradient( 180deg, --third-party-gradient-primary-light 0%, --third-party-gradient-primary-dark 100% );
    --third-party-register-btn-main-bg-inner-shadow: var( --third-party-shadow-primary );
    --third-party-register-btn-main-txt: var(--third-party-txt-default);
    --third-party-register-btn-secondary-bg: linear-gradient( 135deg, var(--third-party-gradient-secondary-light) 0%, var(--third-party-gradient-secondary-dark) 50% );
    --third-party-register-btn-secondary-bg-inner-shadow: var( --third-party-shadow-secondary );
    --third-party-register-btn-secondary-txt: var(--third-party-txt-secondary);
    --third-party-register-btn-tertiary-bg: var(--btn-main-bg);
    --third-party-register-btn-tertiary-txt: var(--btn-main-txt);
    --third-party-register-tips-txt: var(--third-party-txt-default);
    --third-party-register-link: var(--third-party-primary);
    --third-party-register-footer-tips-txt: var(--third-party-txt-default);
    --third-party-register-affiliate: var(--third-party-txt-default);
    --third-party-register-form-select-triangle: var(--third-party-txt-default);
    --third-party-register-form-select-item-bg: var( --third-party-login-form-input-bg );
    --third-party-register-form-select-item-hover: color-mix(in srgb, var(--third-party-register-form-select-item-bg), white 20%);
    --third-party-register-form-check-icon-color: var(--third-party-primary);
    --third-party-register-form-tips-txt: var(--third-party-txt-default);
    --third-party-register-form-tips-highlight: var(--third-party-primary);
    --third-party-register-succes-title: var(--primary);
    --third-party-register-success-subtitle: var(--color-title);
    --third-party-register-success-txt: var(--third-party-txt-default);
    --third-party-register-success-copy-icon-color: var(--third-party-primary);
    --third-party-register-success-input-border: var( --third-party-border-default );
    --third-party-register-success-input-copy-btn-bg: var( --third-party-border-default );
    --third-party-personal-item-title: var(--third-party-txt-fourth);
    --third-party-personal-item-icon-color: var(--third-party-primary);
    --third-party-personal-item-icon-color-border: var( --third-party-border-default );
    --third-party-personal-item-tag-txt: var(--third-party-primary);
    --third-party-personal-item-tag-bg: color-mix(in srgb, var(--third-party-primary), transparent 90%);
    --third-party-personal-item-tag-tips: var(--third-party-txt-default);
    --third-party-personal-item-status-bg: transparent;
    --third-party-personal-item-status-txt: var(--third-party-check);
    --third-party-personal-item-status-border: var( --third-party-personal-item-status-txt );
    --third-party-personal-item-status-error-bg: var(--third-party-error);
    --third-party-personal-item-status-error-border: transparent;
    --third-party-personal-item-status-error-txt: #ffffff;
    --third-party-personal-membername-wrap-bg: transparent;
    --third-party-personal-membername-wrap-txt: var(--third-party-txt-default);
    --third-party-personal-vip-membername-txt: var(--third-party-txt-default);
    --third-party-personal-membername-wrap-tips: var(--color-muted);
    --third-party-personal-myvip-txt: var(--third-party-primary);
    --third-party-personal-tips-info-border: #51699e;
    --third-party-personal-tips-info-border-top: color-mix(in srgb, var(--third-party-txt-fourth), transparent 80%);
    --third-party-personal-tips-info-icon: var(--third-party-txt-fourth);
    --third-party-personal-tips-info-txt: var(--third-party-txt-fourth);
    --third-party-personal-tips-info-txt-i: #ffd268;
    --third-party-personal-tips-info-toggle-btn: var(--third-party-txt-fourth);
    --third-party-personal-add-phone-bg: transparent;
    --third-party-personal-add-phone-txt: var(--third-party-txt-default);
    --third-party-personal-add-phone-border: var(--third-party-txt-default);
    --quick-register-entry-btn-active-shadow: var( --third-party-register-btn-main-bg-inner-shadow );
    --quick-register-entry-btn-active-bg: linear-gradient( 180deg, var(--third-party-gradient-primary-light) 0%, var(--third-party-gradient-primary-dark) 100% );
    --quick-register-entry-btn-border: var(--third-party-border-default);
    --quick-register-entry-btn-bg: var(--form-box-bg);
    --quick-register-entry-btn-name: rgba(var(--third-party-txt-fourth) .5);
    --quick-register-entry-btn-icon: rgba(var(--third-party-txt-fourth) .5);
    --quick-register-entry-invitation-code-bg: #586e9b;
    --quick-register-entry-invitation-code-border: #707fac;
    --quick-register-entry-btn-txt: var(--third-party-primary);
    --quick-register-entry-btn-txt-active: var(--third-party-primary);
    --event-slick-dot-register: #ffffff;
    --slick-slide-shadow: rgba(0, 0, 0, .3);
    --color-card-title: #333333;
    --color-card-label-text: #3f2200;
    --color-card-label-bg: #fff7dc;
    --color-card-label-border: #ffeeb0;
    --fast-register-success-bg: #ffffff;
    --fast-register-success-cont-text: #555555;
    --svg-register-success-editor: var(--primary);
    --third-party-menubox-bg: #ffffff;
    --third-party-btn-mask-bg: linear-gradient(to right, #005fbe 0%, #252b73 50%);
    --third-party-btn-mask-bg-shadow: #005fbe;
    --third-party-pop-success-bg: rgba(255, 255, 255, .8);
    --third-party-pop-success-txt: #70b267;
    --desktop-searchpage-border: var(--color-border);
    --lighten-third-party-btn-mask-bg-shadow-1: hsla( 210, 100%, 67%, 1 );
    --lighten-third-party-btn-mask-bg-shadow-2: hsla( 210, 100%, 77%, 1 );
    --tab-btn-bar-line-shadow: hsla( 20, 0%, 10%, 1 );
    --loading-animation-card-banner: hsla(250, 62%, 32%, 1) //lighten(var(--content-bg), 5%)
}

:root {
    --profile-add-btn-bg: var(--color-info);
    --profile-add-btn-txt: #ffffff;
    --profile-number-default: var(--color-success);
    --profile-number-default-txt: rgba(255, 255, 255, .8);
    --profile-vip-title: var(--color-title);
    --profile-vip-number: var(--secondary);
    --profile-vip-btn-bg: #79a5fc;
    --profile-vip-btn-txt: var(--color-title);
    --profile-vip-arrow-icon-color: #ffffff;
    --profile-id: #c9c5ff;
    --profile-txt: rgba(255, 255, 255, .3);
    --profile-name: #ffd259;
    --profile-tips-txt: var(--color-title);
    --profile-tips-link: #b9c9ff;
    --profile-member-menu-point-bg: #ffffff;
    --pop-getvcode-btn: #79a5fc;
    --pop-getvcode-btn-txt: #ffffff;
    --pop-getvcode-countdown-txt: #ffffff;
    --pop-getvcode-resend-txt: #79a5fc;
    --bonuswallet-card-bg: linear-gradient(0deg, #464998 0%, #342e81 100%);
    --bonuswallet-title: var(--color-title);
    --bonuswallet-zone: rgba(255, 255, 255, .3);
    --bonuswallet-border: var(--secondary);
    --bonuswallet-amount: #ffd259;
    --bonuswallet-amount-complete: #ffd259;
    --bonuswallet-amount-disable: rgba(255, 210, 89, .5);
    --bonuswallet-progress-bar-bg: rgba(255, 255, 255, .1);
    --bonuswallet-progress-bar-bg-shadow: #999999;
    --bonuswallet-progress-bar-bg-active: linear-gradient( 90deg, #734b07 0%, #916d21 25%, #b69942 50%, #dbc463 75%, #f8e67d 100% );
    --bonuswallet-progress-bar-bg-active-shadow: #734b07;
    --bonuswallet-progress-bar-txt: #a0a2ca;
    --bonuswallet-dot: rgba(255, 255, 255, .5);
    --bonuswallet-detail-txt: #b9c9ff;
    --bonuswallet-claim-btn-txt: var(--color-walletcard-tx);
    --bonuswallet-claim-btn-bg: linear-gradient( to bottom, #eed29f 0%, #cca967 100% );
    --bonuswallet-cancel-btn-txt: var(--color-walletcard-tx);
    --bonuswallet-cancel-btn-bg: linear-gradient( to bottom, #d15454 0%, #cb4141 100% );
    --bonuswallet-receive-btn-txt: var(--color-walletcard-tx);
    --bonuswallet-receive-btn-bg: linear-gradient( to bottom, #9fd562 0%, #7cb43e 100% );
    --bonuswallet-disabled-btn-bg: linear-gradient( to bottom, #d8d8d8 0%, #bfbfbf 100% );
    --bonuswallet-disabled-btn-txt: #444444;
    --bonuswallet-working-btn-bg: linear-gradient( to bottom, #d8d8d8 0%, #bfbfbf 100% );
    --bonuswallet-working-btn-txt: #ffffff;
    --voucher-card-bg: var(--form-box-bg);
    --voucher-title: var(--color-title);
    --voucher-border: var(--secondary);
    --voucher-dealline: var(--color-muted);
    --voucher-zone: var(--color-muted);
    --voucher-detail: var(--primary);
    --voucher-amount: var(--primary);
    --voucher-txt: var(--color-text);
    --voucher-start-btn-bg: var(--btn-main-bg);
    --voucher-start-btn-txt: var(--btn-main-txt);
    --voucher-disabled-btn-bg: var(--btn-main-bg-disabled);
    --voucher-disabled-btn-txt: var(--btn-main-txt-disabled);
    --vip-bg: linear-gradient(245deg, #281a70 0%, #281a70 25%, #281a70 100%);
    --vip-card-bg: linear-gradient( 120deg, rgba(0, 236, 255, .5) 0%, rgba(98, 48, 213, .5) 40%, rgba(78, 92, 255, .5) 80%, rgba(0, 187, 230, .5) 100% );
    --vip-card-shadow: #ffffff;
    --vip-card-title: #ffffff;
    --vip-card-history-btn-bg: #ffd259;
    --vip-card-history-icon-color: #ffffff;
    --vip-card-progress-bar-bg: rgba(255, 255, 255, .2);
    --vip-card-progress-bar-bg-active: linear-gradient( to right, #b69942 0%, #cfaa47 25%, #ffd259 50%, #ffd259 75%, #cfaa47 100% );
    --vip-card-progress-bar-bg-active-shadow: #e6c86d;
    --vip-card-bar-dot: #ffffff;
    --vip-card-tips: rgba(255, 255, 255, .8);
    --vip-card-bottom-bg: var(--form-input-bg);
    --vip-card-bottom-more-txt: #ffffff;
    --vip-points-card-top-info-txt-strong: #e6c86d;
    --vip-points-progress-bar-txt: #e6c86d;
    --vip-total-ttile: rgba(255, 255, 255, .6);
    --vip-total-num: #ffffff;
    --vip-total-txt: var(--vip-total-ttile);
    --vip-total-txt-bg: rgba(0, 0, 0, .2);
    --vip-total-record-btn-bg: var(--vip-card-history-btn-bg);
    --vip-total-record-icon: var(--vip-card-history-icon);
    --vip-convert-title: rgba(255, 255, 255, .8);
    --vip-convert-border: var(--secondary);
    --vip-refresh-txt: var(--vip-convert-title);
    --vip-refresh-icon-color: #ffd259;
    --vip-cash-point-bg: linear-gradient( 180deg, rgba(40, 137, 243, .5) 0%, rgba(98, 50, 215, .5) 100% );
    --vip-cash-point-def: #ffd259;
    --vip-cash-point-grey: #9c9c9c;
    --vip-cash-point-title: var(--vip-total-ttile);
    --vip-cash-point-requirement-txt: var(--vip-total-ttile);
    --vip-cash-point-input-placeholder: rgba(255, 255, 255, .3);
    --vip-cash-point-input-txt: #ffd259;
    --vip-cash-point-input-error: var(--color-danger);
    --vip-cash-point-input-error-icon: #ffffff;
    --vip-cash-point-input-bg: var(--form-input-bg);
    --vip-cash-point-tips: var(--vip-convert-title);
    --vip-cash-point-default-btn-bg: linear-gradient( 90deg, #2f51b1 0%, #4528a5 100% );
    --vip-cash-point-default-btn-txt: var(--btn-main-txt);
    --vip-cash-point-default-btn-txt-shadow: none;
    --vip-cash-point-allow-btn-bg: #ffd259;
    --vip-cash-point-allow-btn-bg-box-shadow: rgba(102, 97, 73, .5);
    --vip-cash-point-allow-btn-bg-txt-shadow: none;
    --vip-ani-title: #ffffff;
    --vip-history-year: rgba(255, 255, 255, .8);
    --vip-history-month: var(--vip-refresh-icon-color);
    --vip-detail-lv1-bg: #ddd8c7;
    --vip-detail-lv2-bg: #dfdfdf;
    --vip-detail-lv3-bg: #e2dab5;
    --vip-detail-lv4-bg: #dae4f2;
    --vip-detail-lv5-bg: #dae4f2;
    --vip-detail-lv-bottom-bg: #282467;
    --vip-detail-lv-txt: #ffffff;
    --vip-detail-title-bg-lv1: linear-gradient(90deg, #bcb8a8 0%, #80795a 100%);
    --vip-detail-title-bg-lv2: linear-gradient(90deg, #c4c4c4 0%, #a2a2a2 100%);
    --vip-detail-title-bg-lv3: linear-gradient(90deg, #ccbb6f 0%, #a69234 100%);
    --vip-detail-title-bg-lv4: linear-gradient(90deg, #a7bcda 0%, #7596c5 100%);
    --vip-detail-title-bg-lv5: linear-gradient(90deg, #a7bcda 0%, #7596c5 100%);
    --vip-detail-box-bg: linear-gradient(180deg, #332d80 0%, #474998 100%);
    --vip-detail-box-bg-shadow: #281a70;
    --vip-detail-highlight-txt: #ffd259;
    --vip-detail-txt: #ffffff;
    --vip-detail-border: #281a70;
    --vip-detail-card-bg: linear-gradient(45deg, #48509c 0%, #473f8d 100%);
    --vip-detail-card-bg-shadow: rgba(0, 0, 0, .2);
    --vip-detail-card-txt: #b9c9ff;
    --vip-detail-link: #a0a2ca;
    --vip-points-table-head-bg: #393485;
    --vip-points-table-head-txt: #ffffff;
    --vip-points-table-head-border: rgba(255, 255, 255, .4);
    --vip-points-table-head-zone: rgba(255, 255, 255, .3);
    --vip-points-table-body-bg: var(--form-box-bg);
    --vip-points-table-body-record-bg: var(--vip-points-table-body-bg);
    --vip-points-table-body-txt: #ffffff;
    --vip-points-table-body-border: rgba(255, 255, 255, .15);
    --vip-points-table-body-top-border: var(--vip-points-table-body-bg);
    --vip-points-table-body-arrow-icon: var(--vip-points-table-body-txt);
    --accordion-bg: #363285;
    --accordion-title-bg: #363285;
    --accordion-title: #ffffff;
    --accordion-info-icon-color: var(--accordion-title);
    --accordion-arrow-icon-color: #ffffff;
    --accordion-dot: var(--color-border);
    --accordion-txt: #a0a2ca;
    --accordion-color-bg-title: #ffffff;
    --accordion-add-bank-card-title-bg: #444796;
    --accordion-triangle: #ffffff;
    --accordion-review: var(--color-info);
    --accordion-success: var(--color-success);
    --accordion-failed: var(--color-danger);
    --pop-verification-link: var(--secondary);
    --wallet-title-border: var(--secondary);
    --wallet-recommond-tag-bg: #ffb80c;
    --wallet-recommond-tag-bg-triangle: #5f4200;
    --wallet-recommond-tag-icon: #ffffff;
    --wallet-bouns-tag-bg: var(--color-danger);
    --wallet-bouns-tag-txt: #ffffff;
    --wallet-maintain-bg: rgba(40, 26, 112, .8);
    --wallet-maintain-txt: rgba(255, 255, 255, .8);
    --wallet-account-info-bg: var(--form-input-bg);
    --wallet-account-info-txt: var(--color-title);
    --wallet-account-info-border: rgba(255, 255, 255, .2);
    --wallet-account-info-copy-icon-color: #ffffff;
    --wallet-account-info-copy-tooltips-bg: #ffffff;
    --wallet-account-info-copy-tooltips-txt: rgba(0, 0, 0, .5);
    --wallet-account-info-copy-tooltips-txt-shadow: rgba(0, 0, 0, .5);
    --wallet-bank-card-bg: linear-gradient( 135deg, #00ecff 0%, #6230d5 20%, #4e5cff 70%, #00bbe6 100% );
    --wallet-bank-card-shadow: rgba(0, 0, 0, .3);
    --wallet-bank-card-txt: #ffffff;
    --wallet-bank-card-copy-icon-color: var(--wallet-bank-card-txt);
    --wallet-bank-card-amount: #ffea00;
    --wallet-bank-card-copy-active: rgba(0, 0, 0, .2);
    --wallet-bank-card-copy-tooltips-bg: var( --wallet-account-info-copy-icon-color );
    --wallet-bank-card-copy-tooltips-txt: var( --wallet-account-info-copy-tooltips-txt );
    --wallet-crypto-switch-icon-color: #ffffff;
    --wallet-crypto-tips-txt: rgba(255, 255, 255, .3);
    --wallet-crypto-tips-highlight: #ffffff;
    --wallet-qrcode-icon: #ffffff;
    --wallet-top-bg: #281a70;
    --wallet-top-txt: #ffffff;
    --tips-info-bg: var(--accordion-bg);
    --tips-info-title: var(--accordion-title);
    --tips-info-icon-color: var(--tips-info-title);
    --tips-info-arrow-icon-color: #ffffff;
    --tips-info-border: rgba(255, 255, 255, .4);
    --tips-info-personal-txt: #70b267;
    --tips-info-personal-bg: color-mix(in srgb, var(--tips-info-personal-txt), transparent 85%);
    --tips-info-content-txt: #409fff;
    --tips-info-content-bg: color-mix(in srgb, var(--tips-info-content-txt), transparent 85%);
    --tips-info-document-txt: #ff777c;
    --tips-info-document-bg: color-mix(in srgb, var(--tips-info-document-txt), transparent 85%);
    --tips-info-document-choose-one-txt: #ef67ab;
    --tips-info-document-choose-one-bg: color-mix(in srgb, var(--tips-info-document-choose-one-txt), transparent 85%);
    --tips-info-supporting-txt: #d8a845;
    --tips-info-supporting-bg: color-mix(in srgb, var(--tips-info-supporting-txt), transparent 85%);
    --wallet-pending-transactions-bg: #342e80;
    --wallet-pending-transactions-title: #ffffff;
    --wallet-pending-transactions-arrow-icon-color: var( --wallet-pending-transactions-title );
    --wallet-pending-transactions-number: var(--tips-info-title);
    --wallet-pending-transactions-date: #a0a2ca;
    --wallet-pending-transactions-amount: var(--tips-info-title);
    --wallet-pending-transactions-btn-bg: var(--radio-bg-checked);
    --wallet-pending-transactions-btn-border: var(--radio-border-checked);
    --wallet-pending-transactions-btn-txt: var(--radio-txt-checked);
    --wallet-free-tag-bg: var(--secondary);
    --wallet-free-tag-txt: #281a70;
    --wallet-super-fast-bg: linear-gradient( 60deg, #32d5cf, #00b5ff, #a4ff80, #00b5ff );
    --wallet-express-bg: linear-gradient( 60deg, #ff61a1, #ff9fa2, #ffcc59, #ff59bd );
    --wallet-select-bank-card-txt: var(--wallet-top-txt);
    --wallet-bankcard-bg: var(--radio-bg);
    --wallet-bankcard-bg-checked-bg: var(--radio-bg-checked);
    --wallet-bankcard-bg-checked-border: #db85b7;
    --wallet-bankcard-swift-bg: rgba(0, 0, 0, .2);
    --wallet-otp-send-btn-bg: #79a5fc;
    --wallet-otp-send-btn-txt: #ffffff;
    --wallet-otp-sending-btn-bg: #928670;
    --wallet-otp-resend-txt: #ffd259;
    --wallet-amount-info-icon: #ffae12;
    --wallet-amount-info-icon-txt: var(--form-box-bg);
    --wallet-amount-info-txt: var(--wallet-amount-info-icon);
    --bank-card-frost-mask: rgba(234, 234, 234, .8);
    --bank-card-frost-txt: var(--content-bg);
    --bank-card-frost-icon: var(--content-bg);
    --bank-card-frost-btn: hsla( 250, 62%, 27%, 1 );
    --bank-card-frost-btn-txt: #ffffff;
    --wallet-kyc-verify-mask-bg: rgba(47, 47, 47, .4);
    --wallet-kyc-verify-mask-txt: #ffffff;
    --wallet-kyc-verify-mask-txt-shadow: rgba(0, 0, 0, .6);
    --transaction-pop-processing-cont-border-color: var(--form-input-border);
    --transaction-pop-state-bg: var(--color-warning);
    --transaction-pop-state-icon-bg: #ffffff;
    --transaction-pop-processing-title: var(--secondary);
    --transaction-pop-processing-txt: var(--color-text);
    --transaction-pop-amount-cont-txt-strong: var(--secondary);
    --transaction-pop-amount-cont-txt: var(--color-text);
    --transaction-pop-info-list-title: var(--color-title);
    --transaction-pop-info-list-title-bg: var(--form-input-bg-disabled);
    --transaction-pop-info-list-txt: var(--color-text-strong);
    --transaction-pop-info-list-txt-bg: var(--form-input-bg);
    --transfer-ani-txt: #ffffff;
    --transfer-ani-default-tips-bg: #889fa5;
    --transfer-ani-default-tips-border: #dadde2;
    --transfer-ani-platform-bg: #363285;
    --transfer-ani-platform-darken-color: #281a70;
    --transfer-ani-platform-lighten-color: #444796;
    --transfer-ani-platform-logo-border: #c5c5c5;
    --transfer-ani-platform-secondary-darken-color: #ffd259;
    --transfer-ani-platform-secondary-lighten-color: #ffd96f;
    --transfer-ani-account-bg: linear-gradient( 180deg, rgba(216, 216, 216, .8) 0%, rgba(255, 255, 255, .8) 100% );
    --transfer-ani-account-darken-color: #889fa5;
    --transfer-ani-account-lighten-color: #dadde2;
    --transfer-ani-account-logo-border: #dadde2;
    --transfer-ani-default-bg: #b1bdc5;
    --transfer-ani-default-light-bg: #82a0aa;
    --transfer-ani-default-circle-bg: #a3cfcd;
    --transfer-ani-default-circle-shadow: #82a0aa;
    --filter-bg: var(--form-box-bg);
    --filter-title: #ffffff;
    --filter-item-bg: var(--radio-bg);
    --filter-item-txt: var(--radio-txt);
    --filter-item-border: var(--radio-border);
    --filter-item-bg-hover: var(--radio-bg-hover);
    --filter-item-txt-hover: var(--radio-txt-hover);
    --filter-item-border-hover: var(--radio-border-hover);
    --filter-item-bg-active: var(--radio-bg-checked);
    --filter-item-txt-active: var(--radio-txt-checked);
    --filter-item-border-active: var(--radio-border-checked);
    --filter-btn: var(--search-btn);
    --transaction-record-filter-icon: var(--search-search-icon);
    --transaction-record-table-body-date-bg: var(--form-box-bg);
    --transaction-record-table-body-date: rgba(255, 255, 255, .3);
    --transaction-record-calendar-icon-color: rgba(255, 255, 255, .3);
    --transaction-record-table-body-zone: rgba(255, 255, 255, .3);
    --transaction-record-pending: var(--color-warning);
    --transaction-record-revert: var(--color-info);
    --transaction-record-negative: var(--color-danger);
    --transaction-record-positive: var(--color-success);
    --transaction-record-pending-bg: color-mix(in srgb, var(--transaction-record-pending), transparent 10%);
    --transaction-record-revert-bg: color-mix(in srgb, var(--transaction-record-revert), transparent 10%);
    --transaction-record-negative-bg: color-mix(in srgb, var(--transaction-record-negative), transparent 10%);
    --transaction-record-positive-bg: color-mix(in srgb, var(--transaction-record-positive), transparent 10%);
    --transaction-record-status-txt: #ffffff;
    --pop-transaction-details-bank-name-bg: #281a70;
    --pop-transaction-details-bank-name-txt: var(--color-title);
    --pop-transaction-details-header-bg: #281a70;
    --pop-transaction-details-header-txt: var(--color-title);
    --pop-transaction-details-close-icon-color: #ffffff;
    --pop-transaction-details-tab-bg: transparent;
    --pop-transaction-details-title: #ffffff;
    --pop-transaction-details-date: rgba(255, 255, 255, .4);
    --pop-transaction-details-message-bg: #363285;
    --pop-transaction-details-message-current-txt: #ffffff;
    --pop-transaction-details-message-txt: color-mix(in srgb, var(--pop-transaction-details-message-current-txt), transparent 40%);
    --pop-transaction-details-table-bg: #393485;
    --pop-transaction-details-table-bg-even: #444796;
    --pop-transaction-details-table-txt: #ffffff;
    --pop-transaction-details-tips-txt: #ffffff;
    --pop-transaction-details-timer: var(--btn-main-txt-disabled);
    --pop-transaction-details-btn-area-bg: #281a70;
    --transaction-record-table-body-empty-bg: var(--form-box-bg);
    --betting-record-positive-txt: var(--color-success);
    --betting-record-negative-txt: var(--color-danger);
    --betting-details-table-head-bg: #4d4891;
    --betting-details-table-head-border: #776cb1;
    --betting-record-table-head-title: #ffffff;
    --betting-record-table-head-txt: rgba(255, 255, 255, .8);
    --betting-record-table-date-area-bg: transparent;
    --betting-record-table-zone: #4d4891;
    --betting-record-tooltips-icon-color: rgba(255, 255, 255, .3);
    --betting-record-tooltips-bg: #4d4891;
    --betting-record-tooltips-border: var(--betting-record-tooltips-bg);
    --betting-record-tooltips-txt: #ffffff;
    --betting-record-tooltips-revocation: #79a5fc;
    --betting-record-tooltips-void: #ffd259;
    --betting-record-tooltips-refund: #ff5959;
    --cricket-betting-details-total-bg: #ffb80c;
    --cricket-betting-details-total-title-bg: #222222;
    --cricket-betting-details-total-title: #ffb80c;
    --cricket-betting-details-total-platform-bg: var( --cricket-betting-details-total-title-bg );
    --cricket-betting-details-total-platform: #ffffff;
    --cricket-betting-details-total-txt: #222222;
    --cricket-betting-details-title: #222222;
    --cricket-betting-details-tag-bg: #f2f2f2;
    --cricket-betting-details-tag-txt: var(--color-muted);
    --cricket-betting-details-date-txt: var(--color-muted);
    --cricket-betting-details-collapse-arrow: #222222;
    --cricket-betting-details-avg-odds-circle: #ffb80c;
    --cricket-betting-details-avg-odds-icon: #222222;
    --cricket-betting-details-turnover-circle: #222222;
    --cricket-betting-details-turnover-icon: #ffb80c;
    --cricket-betting-details-stake-circle: var( --cricket-betting-details-turnover-circle );
    --cricket-betting-details-stake-icon: var( --cricket-betting-details-turnover-icon );
    --cricket-betting-details-profit-circle: var( --cricket-betting-details-avg-odds-circle );
    --cricket-betting-details-profit-icon: var( --cricket-betting-details-avg-odds-icon );
    --cricket-betting-details-value-number: #ffffff;
    --cricket-betting-details-value-title: var(--color-muted);
    --cricket-betting-details-value: #222222;
    --cricket-betting-details-sub-item-bg: #f2f2f2;
    --cricket-betting-details-sub-item-sport-icon: #222222;
    --cricket-betting-details-sub-item-vs-txt: #222222;
    --cricket-betting-details-sub-item-title: var(--color-muted);
    --cricket-betting-details-sub-item-txt: #222222;
    --cricket-betting-details-sub-item-market-txt: #ffffff;
    --cricket-betting-details-sub-item-win-txt: #ffffff;
    --cricket-betting-details-sub-item-lose-txt: #ffffff;
    --cricket-betting-details-sub-item-cancel-txt: #222222;
    --cricket-betting-details-sub-item-voided-txt: var( --cricket-betting-details-value );
    --cricket-betting-details-sub-item-table-bg: #ffffff;
    --cricket-betting-details-sub-item-select-title: #ffffff;
    --cricket-betting-details-sub-item-value-title: var( --cricket-betting-details-value-title );
    --cricket-betting-details-sub-item-value: var( --cricket-betting-details-value );
    --cricket-betting-details-profit-amount: var(--color-danger);
    --mail-notice-icon-circle-bg: linear-gradient( 220deg, #63e9ec 0%, #7900e2 100% );
    --mail-date-bg: var(--content-bg);
    --mail-date-txt: rgba(255, 255, 255, .3);
    --mail-date-calendar-icon-color: var(--mail-date-txt);
    --mail-date-zone: rgba(255, 255, 255, .3);
    --mail-list-bg: var(--content-bg);
    --mail-list-title: var(--color-title);
    --mail-list-txt: rgba(255, 255, 255, .3);
    --mail-list-border: var(--vip-points-table-body-border);
    --mail-editor-icon-color: #ffffff;
    --mail-editor-pop-bg: var(--pop-bg-content);
    --mail-editor-pop-txt: #ffffff;
    --mail-editor-choose-icon-color: var(--color-muted);
    --mail-editor-choose-icon-active: var(--color-success);
    --mail-editor-pop-check-bg: #79a5fc;
    --mail-editor-pop-check-txt: #ffffff;
    --recommend-gift-bg: linear-gradient(270deg, #6481cd 0%, #a1b6ee 80%);
    --recommend-title: var(--color-title);
    --recommend-border: #ffd259;
    --recommend-txt: var(--vip-detail-card-txt);
    --recommend-input-border: #6e8ad2;
    --recommend-input-btn: linear-gradient(270deg, #79a5fc 0%, #79a5fc 80%);
    --recommend-share-btn: linear-gradient(60deg, #79a5fc 0%, #79a5fc 100%);
    --recommend-share-txt: #ffffff;
    --recommend-dot: var(--accordion-dot);
    --recommend-condition-title: #b9c9ff;
    --recommend-condition-dot: #ffd259;
    --recommend-condition-bg: #342e81;
    --recommend-terms-link: #6481cd;
    --recommend-input-bg: #393485;
    --recommend-complete-txt: #b9c9ff;
    --recommend-rewards-datepicker-txt: #ffffff;
    --recommend-pending-txt: var(--color-warning);
    --recommend-expired-txt: var(--color-danger);
    --referral-reward-tab-btn-bg: var(--radio-bg);
    --referral-reward-tab-btn-txt: var(--radio-txt);
    --referral-reward-tab-btn-border: var(--radio-border);
    --referral-reward-tab-btn-bg-hover: var(--radio-bg-hover);
    --referral-reward-tab-btn-txt-hover: var(--radio-txt-hover);
    --referral-reward-tab-btn-border-hover: var(--radio-border-hover);
    --referral-reward-tab-btn-bg-active: var(--radio-bg-checked);
    --referral-reward-tab-btn-txt-active: var(--radio-txt-checked);
    --referral-reward-tab-btn-border-active: var(--radio-border-checked);
    --referral-reward-tab-btn-underline-active: var(--radio-underline-checked);
    --referral-reward-lock-mask: rgba(0, 0, 0, .7);
    --referral-reward-complete-mask: rgba(64, 208, 203, .7);
    --turnover-card-bg: linear-gradient( 180deg, rgba(54, 50, 133, .8) 0%, rgba(78, 85, 162, .8) 100% );
    --turnover-card-bg-completed: var(--turnover-card-bg);
    --turnover-card-title: var(--color-title);
    --turnover-card-border: var(--primary);
    --turnover-card-date: var(--pop-bonuswallet-card-date);
    --turnover-card-detail: var(--pop-bonuswallet-card-detail);
    --pop-turnover-table-bg: rgba(255, 255, 255, .1);
    --pop-turnover-table-txt: #ffffff;
    --pop-turnover-table-border: var(--pop-bg-content);
    --pop-turnover-arrow-icon-color: var(--primary);
    --pop-turnover-check-icon: url(/assets/images/icon-set/icon-check-type01.svg);
    --verify-otp-txt: var(--color-title);
    --verify-otp-phone-txt: var(--primary);
    --verify-otp-mail-icon-color: var(--btn-main-txt);
    --verify-otp-mail-icon-disabled: var(--btn-main-txt-disabled);
    --pop-verify-add-success-close-icon: #ffffff;
    --realtime-bonus-available-bg: linear-gradient( to bottom, var(--content-bg) 0%, var(--form-box-bg) 100% );
    --realtime-bonus-available-title: #ffffff;
    --realtime-bonus-available-title-icon: var(--realtime-bonus-available-title);
    --realtime-bonus-available-amount: var(--color-title);
    --realtime-bonus-available-tips-txt: var(--color-warning);
    --realtime-bonus-available-btn-bg: var(--btn-main-bg);
    --realtime-bonus-available-btn-txt: var(--btn-main-txt);
    --realtime-bonus-claimed-title: var(--color-text);
    --realtime-bonus-claimed-value: var(--primary);
    --realtime-bonus-summary-tab-btn-bg: var(--radio-bg);
    --realtime-bonus-summary-tab-btn-txt: var(--radio-txt);
    --realtime-bonus-summary-tab-btn-border: var(--radio-border);
    --realtime-bonus-summary-tab-btn-bg-hover: var(--radio-bg-hover);
    --realtime-bonus-summary-tab-btn-txt-hover: var(--radio-txt-hover);
    --realtime-bonus-summary-tab-btn-border-hover: var(--radio-border-hover);
    --realtime-bonus-summary-tab-btn-bg-active: var(--radio-bg-checked);
    --realtime-bonus-summary-tab-btn-txt-active: var(--radio-txt-checked);
    --realtime-bonus-summary-tab-btn-border-active: var(--radio-border-checked);
    --realtime-bonus-summary-tab-btn-underline-active: var( --radio-underline-checked );
    --realtime-bonus-summary-list-header-bg: var(--form-input-bg);
    --realtime-bonus-summary-list-header-title: var(--color-title);
    --realtime-bonus-summary-list-header-arrow-icon: var( --realtime-bonus-summary-list-header-title );
    --realtime-bonus-summary-list-header-total-bg: var(--form-box-bg);
    --realtime-bonus-summary-list-header-total-rebate-title: var(--color-muted);
    --realtime-bonus-summary-list-header-total-rebate-amount: var(--primary);
    --realtime-bonus-summary-list-header-total-claimed-title: var(--color-muted);
    --realtime-bonus-summary-list-header-total-claimed-amount: var(--color-title);
    --realtime-bonus-summary-list-header-total-expired-title: var( --realtime-bonus-summary-list-header-total-claimed-title );
    --realtime-bonus-summary-list-header-total-expired-amount: var( --realtime-bonus-summary-list-header-total-claimed-amount );
    --realtime-bonus-summary-list-content-bg: var(--form-box-bg);
    --realtime-bonus-summary-list-content-border: var( --realtime-bonus-summary-list-header-bg );
    --realtime-bonus-summary-list-content-title: var(--color-title);
    --realtime-bonus-summary-list-content-txt: var(--color-text);
    --pop-realtime-bonus-number: var(--primary);
    --about-us-bg: var(--content-bg);
    --about-us-title: var(--color-title);
    --about-us-table-bg: transparent;
    --about-us-table-title: var(--color-title);
    --about-us-table-title-txt: rgba(255, 255, 255, .6);
    --about-us-table-title-bg: #79a5fc;
    --about-us-table-title-border: var(--about-us-table-title-bg);
    --about-us-mail-link: #79a5fc;
    --tips-info-txt: var(--color-title);
    --tips-info-i: var(--tips-info-txt);
    --tips-personal-info-tag: #70b267;
    --tips-content-info-tag: #409fff;
    --tips-document-info-tag: #ff777c;
    --tips-document-choose-one-info-tag: #ef67dd;
    --tips-info-supporting-txt-tag: #d8a845
}

:root {
    --primary: #c9a33d;
    --primary-gradient-from: #24262d;
    --primary-gradient-to: #4b442f;
    --secondary: #a56c0b;
    --color-success: #00b389;
    --color-danger: #ef5b5b;
    --color-warning: #fb7743;
    --color-info: #0075d1;
    --color-border: #394471;
    --content-bg: #191e32;;
    --pop-bg: rgba(25, 30, 50, .2);
    --pop-bg-content: #191e32;;
    --pop-bg-shadow: rgba(57, 68, 113, .6);
    --pop-bg-gradient: transparent;
    --color-title: #ffffff;
    --color-text: #ffffff;
    --color-muted: #747687;
    --color-text-strong: #c9a33d;
    --offset-shadow: #191e32;;
    --text-shadow: #c9a33d;
    --header-bg: #191e32;;
    --header-bg-tab: #2a2b2d;
    --header-bg-active: #2a2b2d;
    --header-burger-icon-color: #c9a33d;
    --header-title: #ffffff;
    --header-vip-title: #ffffff;
    --header-vip-bg-active: #2a2b2d;
    --header-vip-title-active: #ffffff;
    --header-slot-bg-active: #2a2b2d;
    --header-login-btn-bg: linear-gradient( to right, #061c33 0, #445187 20%, #445187 35%, #061c33 60%, #061c33 100% );
    --header-login-btn-txt: #ffffff;
    --header-register-btn-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --header-register-btn-txt: #ffffff;
    --header-refresh-icon-color: #ffffff;
    --btn-main-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --btn-main-txt: #ffffff;
    --btn-secondary-bg: linear-gradient( to right, #061c33 0, #445187 20%, #445187 35%, #061c33 60%, #061c33 100% );
    --btn-secondary-txt: #ffffff;
    --btn-main-bg-disabled: #3c3f4d;
    --btn-main-txt-disabled: #747687;
    --btn-secondary-bg-disabled: #3c3f4d;
    --btn-secondary-txt-disabled: #747687;
    --form-box-bg: #061c33;
    --form-txt: #ffffff;
    --form-input-bg: #232a46;
    --form-input-txt: #ffffff;
    --form-input-txt-placeholder: #747687;
    --form-input-border-focus: #c9a33d;
    --form-input-bg-disabled: #232a46;
    --form-input-txt-disabled: #ffffff;
    --form-select-item-bg: rgba(255, 255, 255, .1);
    --form-clear-icon-color: #747687;
    --form-eyes-icon-color: #747687;
    --form-select-triangle: #747687;
    --form-refresh-icon-color: #ffffff;
    --form-upload-bg: #232a46;
    --form-upload-camera-icon-color: #747687;
    --form-upload-txt: #747687;
    --form-upload-retry-btn-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --form-uncheck-color: #747687;
    --tab-header-bg: #c9a33d;
    --tab-line-txt: rgba(255, 255, 255, .6);
    --tab-line-txt-active: #ffffff;
    --tab-line-underline: #ffffff;
    --tab-line-badge-bg: #c9a33d;
    --tab-line-badge-txt: #191e32;;
    --tab-btn-txt: #ffffff;
    --tab-btn-txt-shadow: #ffffff;
    --tab-btn-bg: #c9a33d;
    --tab-btn-bg-active: #a56c0b;
    --tab-btn-txt-active: #ffffff;
    --tab-btn-active-shadow: #ffffff;
    --tab-btn-bar-bg: #a5852e;
    --radio-bg: #232a46;
    --radio-txt: #ffffff;
    --radio-border: #394471;
    --radio-txt-hover: #c9a33d;
    --radio-border-hover: #443d27;
    --radio-border-checked: #443d27;
    --radio-txt-checked: #c9a33d;
    --radio-underline-checked: #c9a33d;
    --checkbox-bg-checked: #191e32;;
    --switch-bg: #061c33;
    --pop-title-bg: #c9a33d;
    --pop-txt: #747687;
    --popup-page-main-header-bg: #c9a33d;
    --toolbar-bg: #000000;
    --toolbar-item-active: rgba(209, 209, 209, .2);
    --mode-tips-bg: #c9a33d;
    --pagination-bg: #061c33;
    --pagination-bullet-bg: #ffffff;
    --pagination-bullet-bg-active: #c9a33d;
    --sidenav-info-bg: #061c33;
    --sidenav-info-bottom-bg: #c9a33d;
    --sidenav-title-txt: #ffffff;
    --sidenav-profile-txt: #ffffff;
    --sidenav-info-title-bottom: #191e32;;
    --sidenav-info-login-icon-color: #191e32;;
    --sidenav-info-register-icon-color: #191e32;;
    --sidenav-wallet-txt: #191e32;;
    --sidenav-wallet-amount: #191e32;;
    --sidenav-wallet-icon-bg: rgba(25, 30, 50, .2);
    --sidenav-shortcut-txt: #ffffff;
    --sidenav-shortcut-icon-bg: #ffffff;
    --sidenav-shortcut-icon-txt: #ffffff;
    --sidenav-category-bg: linear-gradient(45deg, #191e32; 0%, #061c33 100%);
    --sidenav-category-columns-bg: linear-gradient( 45deg, #191e32; 0%, #061c33 100% );
    --sidenav-category-txt: #ffffff;
    --sidenav-category-shadow: rgba(25, 30, 50, .2);
    --sidenav-category-bg-active: rgba(255, 255, 255, .3);
    --sidenav-info-points-bg: #232a46;
    --sidenav-info-points-txt: #ffffff;
    --sidenav-info-points-number: #ffffff;
    --sidenav-bg: #191e32;;
    --sidenav-set-shortcut-icon-bg: #c9a33d;
    --sidenav-set-shortcut-icon-color: #ebebeb;
    --sidenav-set-shortcut-edit-icon-bg: #ffffff;
    --sidenav-set-shortcut-edit-icon-color: #c9a33d;
    --sidenav-set-shortcut-set-icon-color: #c9a33d;
    --sidenav-set-shortcut-add-icon-bg: #ef5b5b;
    --sidenav-set-shortcut-add-icon-color: #ffffff;
    --sidenav-category-area-bg: #061c33;
    --sidenav-category-icon-bg: #232a46;
    --sidenav-service-title: #ffffff;
    --sidenav-service-txt: #ffffff;
    --pop-language-header-bg: #2a2b2d;
    --pop-language-item-bg: #061c33;
    --pop-language-btn: #232a46;
    --pop-language-btn-txt-active: #ffffff;
    --pop-language-btn-bg-active: #c9a33d;
    --pop-language-btn-border-active: var(--pop-language-btn-bg-active);
    --board-login-btn-txt: #191e32;;
    --board-register-btn-txt: #191e32;;
    --board-register-btn-txt-shadow: #c9a33d;
    --announvement-bg: #c9a33d;
    --announvement-icon-color: #ffffff;
    --announvement-txt: #ffffff;
    --nav-bg: #061c33;
    --nav-category-txt: #c9a33d;
    --nav-category-bg-active-circle: #394471;
    --nav-category-txt-active: #ffffff;
    --nav-underline: transparent;
    --nav-item-bg: #061c33;
    --sa-maintenance-bg: #061c33;
    --sa-maintenance-icon-color: #c9a33d;
    --sa-maintenance-txt: #ffffff;
    --sa-maintenance-info-bg: #061c33;
    --sa-maintenance-info-icon-color: #ffffff;
    --sa-maintenance-info-tooltips-bg: #061c33;
    --sa-maintenance-info-tooltips-txt: #ffffff;
    --sa-loader-circle: #a5852e;
    --icon-marquee-bg: transparent;
    --icon-marquee-border: #c9a33d;
    --event-border: #c9a33d;
    --event-slick-dot: #ffffff;
    --event-slick-dot-active: #c9a33d;
    --footer-bg: #111421;
    --footer-txt: #ffffff80;
    --footer-border: #394471;
    --footer-area-bg: transparent;
    --footer-btn-bg: linear-gradient( to right, #061c33 0, #445187 20%, #445187 35%, #061c33 60%, #061c33 100% );
    --footer-btn-border: #394471;
    --login-forgetpassword-btn-border: #c9a33d;
    --login-txt: #ffffff;
    --login-link: #c9a33d;
    --pop-login-fail-txt: #ffffff;
    --biometric-btn: #c9a33d;
    --biometric-btn-txt: #ffffff;
    --biometric-wave-line-ani: #c9a33d;
    --biometric-wave-line-cirle: #c9a33d;
    --biometric-wave-line-gradient-start: #c9a33d;
    --biometric-wave-line-gradient-end: #a56c0b;
    --biometric-switch-bg: #c9a33d;
    --biometric-wave-color-1: #a56c0b;
    --biometric-wave-color-2: #c9a33d;
    --biometric-wave-color-3: #a56c0b;
    --biometric-face-bg: #191e32;;
    --biometric-title: #ffffff;
    --biometric-content: #747687;
    --register-affiliate: #c9a33d;
    --pop-register-success-bg: #191e32;;
    --pop-register-success-subtitle: #ffffff;
    --pop-register-success-txt: #ffffff;
    --pop-register-success-home-btn-txt: #ffffff;
    --search-bg: #061c33;
    --search-item-bg: #232a46;
    --search-item-txt: #ffffff;
    --search-search-icon: #ffffff;
    --pop-search-header-bg: #061c33;
    --pop-search-back-icon-color: #ffffff;
    --pop-search-games-header-bg: #191e32;;
    --pop-search-input-bg: #232a46;
    --pop-search-input-txt: #ffffff;
    --pop-search-input-placeholder: rgba(255, 255, 255, .5);
    --pop-search-clear-txt: #c9a33d;
    --pop-search-inner-bg: #061c33;
    --search-btn: #c9a33d;
    --game-filter-border: #c9a33d;
    --slot-tag-new-bg: #c9a33d;
    --slot-tag-new-txt: #191e32;;
    --slot-card-bg: #061c33;
    --pop-transfer-bg: #191e32;;
    --pop-transfer-btn-take-back: linear-gradient( 235deg, #c9a33d 0%, #a56c0b 100% );
    --pop-transfer-bonus-bg: #061c33;
    --pop-transfer-bonus-border: #c9a33d;
    --pop-transfer-bonus-txt: #c9a33d;
    --pop-transfer-border: #c9a33d;
    --pop-transfer-tips: #ffffff;
    --pop-transfer-amount-fade: #c9a33d;
    --games-empty-bg: #061c33;
    --games-empty-txt: #ffffff;
    --pop-bonuswallet-txt: #747687;
    --pop-bonuswallet-title: #ffffff;
    --pop-bonuswallet-card-bg: #061c33;
    --pop-bonuswallet-card-date: #747687;
    --pop-bonuswallet-card-detail: #c9a33d;
    --pop-bonuswallet-card-amount: #c9a33d;
    --pop-bonuswallet-card-start-btn: linear-gradient( 180deg, #5b5b5b 0, #313131 100% );
    --pop-bonuswallet-card-start-txt: #ffffff;
    --pop-bonuswallet-tips: #747687;
    --pop-bonuswallet-lvup-back-icon-color: #ffffff;
    --pop-bonuswallet-lvup-check: #c9a33d;
    --pop-bonuswallet-lvup-tips-bg: #061c33;
    --pop-bonuswallet-lvup-tips-title: #ffffff;
    --pop-bonuswallet-lvup-tips-txt: #747687;
    --pop-bonuswallet-lvup-tips-date-icon-color: #c9a33d;
    --promotion-bg: #061c33;
    --promotion-info-bg: #0054a4;
    --promotion-info-txt: #ffffff;
    --promotion-card-title: #ffffff;
    --promotion-card-txt: rgba(255, 255, 255, .8);
    --promotion-clock-icon-color: #747687;
    --pop-promotion-bg: #191e32;;
    --pop-promotion-txt: #ffffff;
    --pop-promotion-title: #ffffff;
    --pop-promotion-clock-icon-color: #ffffff;
    --pop-promotion-table-title-bg: #c9a33d;
    --pop-promotion-table-title-txt: #191e32;;
    --pop-promotion-table-content-bg: #061c33;
    --pop-promotion-table-content-title-bg: #c9a33d;
    --pop-promotion-table-content-txt: #ffffff;
    --pop-promotion-bonuswallet-title: #ffffff;
    --pop-promotion-bonuswallet-wallet-bg: #061c33;
    --pop-promotion-bonuswallet-wallet-txt: #ffffff;
    --pop-promotion-bonuswallet-wallet-number: #ffffff;
    --pop-promotion-bonuswallet-deposit-now-border: #747687;
    --pop-promotion-bonuswallet-deposit-now-bg: #191e32;;
    --pop-promotion-bonuswallet-link: #c9a33d;
    --btn-status-txt: #ffffff;
    --btn-attend-bg: #00cc66;
    --btn-request-bg: #ff3233;
    --btn-joined-bg: #ffad00;
    --btn-apply-bg: linear-gradient( to right, #061c33 0, #445187 20%, #445187 35%, #061c33 60%, #061c33 100% );
    --btn-detail-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --form-inputgroup-btn-txt: #ffffff;
    --form-inputgroup-input-border: #394471;
    --limit-title: #c9a33d;
    --limit-txt: #747687;
    --limit-ip-txt: #ffffff;
    --limit-timezone-txt: #ffffff;
    --limit-time-txt: #ffffff;
    --gotop-bg: #a56c0b;
    --chat-bg: #c9a33d;
    --launch-bg: #191e32;;
    --launch-menu-highlight-shadow-color01: rgba(201, 163, 61, .3);
    --launch-menu-highlight-shadow-color02: rgba(255, 255, 255, .5);
    --lanuch-stop-color: #fe9f00;
    --lanuch-end-color: #c9a33d;
    --launch-game-header-bg: #191e32;;
    --launch-game-btn-bg: linear-gradient(180deg, #5b5b5b 0%;
    #313131 100%);--color-card-bg: #061c33;
    --third-party-txt-default: #ffffff;
    --third-party-input-default: #232a46;
    --third-party-login-content-bg: #191e32;;
    --third-party-login-form-txt: #ffffff;
    --third-party-login-form-input-border-focus: #c9a33d;
    --third-party-login-form-eyes-icon-color: #747687;
    --third-party-login-form-clear-icon-color: #747687;
    --third-party-login-puzzle-box-border: #394471;
    --third-party-login-puzzle-box-txt: #ffffff;
    --third-party-login-puzzle-box-slider-bg: #061c33;
    --third-party-login-puzzle-box-slider-btn-bg: linear-gradient( 235deg, #c9a33d 0%, #a56c0b 100% );
    --third-party-login-puzzle-box-slider-btn-inner-shadow: transparent;
    --third-party-login-puzzle-box-slider-btn-arrow-icon-color: #ffffff;
    --third-party-login-btn-main-bg: #c9a33d;
    --third-party-login-btn-main-txt: #ffffff;
    --third-party-login-btn-main-bg-disabled: #5b5b5b;
    --third-party-login-findpassword-txt: #c9a33d;
    --third-party-login-txt: #ffffff;
    --third-party-login-tab-txt: #ffffff;
    --third-party-login-tab-txt-active: #c9a33d;
    --third-party-login-tab-line-active: #c9a33d;
    --third-party-verification-code-txt: #747687;
    --third-party-verification-tips-txt: #ffffff;
    --third-party-verification-code-txt-highlight: #ffffff;
    --third-party-verification-code-link: #c9a33d;
    --third-party-register-succes-title: #ffffff;
    --third-party-register-success-txt: #747687;
    --third-party-register-success-input-border: #c9a33d;
    --third-party-register-success-input-copy-btn-bg: #c9a33d;
    --third-party-login-form-input-bg: #232a46;
    --third-party-register-success-copy-icon-color: #ffffff;
    --third-party-register-btn-main-bg: #c9a33d;
    --third-party-register-btn-main-txt: #ffffff;
    --third-party-register-btn-secondary-bg: #a56c0b;
    --third-party-register-btn-secondary-txt: #ffffff;
    --third-party-register-btn-tertiary-bg: #a56c0b;
    --third-party-register-btn-tertiary-txt: #ffffff;
    --third-party-register-tips-txt: #ffffff;
    --third-party-register-link: #c9a33d;
    --third-party-register-form-tips-txt: #747687;
    --third-party-register-form-tips-highlight: #c9a33d;
    --quick-register-entry-btn-name: #ffffff;
    --quick-register-entry-btn-txt: #ffffff;
    --quick-register-entry-btn-bg: #061c33;
    --quick-register-entry-btn-active-bg: #c9a33d;
    --quick-register-entry-btn-icon: #c9a33d;
    --quick-register-entry-btn-icon-active: #ffffff;
    --third-party-personal-myvip-txt: #c9a33d;
    --third-party-personal-item-title: #ffffff;
    --third-party-personal-item-tag-tips: #c9a33d;
    --third-party-personal-item-tag-txt: #ffffff;
    --third-party-personal-item-tag-bg: #747687;
    --third-party-personal-membername-wrap-txt: #ffffff;
    --third-party-btn-mask-bg: #c9a33d;
    --third-party-personal-add-phone-txt: #c9a33d;
    --third-party-personal-add-phone-border: #c9a33d;
    --third-party-personal-vip-membername-txt: #ffffff;
    --third-party-menubox-bg: #061c33;
    --third-party-pop-success-bg: #ffffff;
    --profile-add-btn-bg: #c9a33d;
    --profile-add-btn-txt: #ffffff;
    --profile-vip-number: #c9a33d;
    --profile-vip-btn-bg: #c9a33d;
    --profile-vip-btn-txt: #191e32;;
    --profile-vip-arrow-icon-color: #191e32;;
    --profile-id: #ffffff;
    --profile-txt: #747687;
    --profile-name: #c9a33d;
    --profile-tips-link: #c9a33d;
    --profile-member-menu-point-bg: #061c33;
    --pop-getvcode-btn: #c9a33d;
    --pop-getvcode-countdown-txt: #c9a33d;
    --pop-getvcode-resend-txt: #c9a33d;
    --bonuswallet-card-bg: #061c33;
    --bonuswallet-card-bg-completed: #061c33;
    --bonuswallet-zone: #747687;
    --bonuswallet-amount: #c9a33d;
    --bonuswallet-amount-complete: #c9a33d;
    --bonuswallet-amount-disable: #c9a33d;
    --bonuswallet-progress-bar-bg-active: linear-gradient( to right, #c9a33d 0%, #a56c0b 100% );
    --bonuswallet-progress-bar-bg-active-shadow: #747687;
    --bonuswallet-progress-bar-txt: #747687;
    --bonuswallet-dot: #747687;
    --bonuswallet-detail-txt: #747687;
    --bonuswallet-claim-btn-bg: linear-gradient( to bottom, #c9a33d 0%, #c9a33d 100% );
    --bonuswallet-disabled-btn-bg: linear-gradient( to bottom, #0f2237 0%, #191e32; 100% );
    --bonuswallet-disabled-btn-txt: #747687;
    --bonuswallet-working-btn-bg: linear-gradient( to bottom, #0f2237 0%, #191e32; 100% );
    --bonuswallet-working-btn-txt: #c9a33d;
    --vip-bg: linear-gradient(180deg, #191e32; 0, #061c33 100%);
    --vip-card-bg: #061c33;
    --vip-card-title: #ffffff;
    --vip-card-history-btn-bg: #c9a33d;
    --vip-card-history-icon-color: #ffffff;
    --vip-total-record-icon-color: #ffffff;
    --vip-card-progress-bar-bg: rgba(25, 30, 50, .4);
    --vip-card-progress-bar-bg-active: linear-gradient( to right, #c9a33d 0, #a56c0b 100% );
    --vip-card-progress-bar-bg-active-shadow: #747687;
    --vip-card-tips: #ffffff;
    --vip-card-bottom-bg: #747687;
    --vip-card-bottom-more-txt: #ffffff;
    --vip-total-ttile: #ffffff;
    --vip-total-num: #c9a33d;
    --vip-total-txt-bg: #061c33;
    --vip-total-record-btn-bg: #c9a33d;
    --vip-total-record-icon: #ffffff;
    --vip-convert-title: #ffffff;
    --vip-convert-border: #c9a33d;
    --vip-refresh-txt: #c9a33d;
    --vip-refresh-icon-color: #c9a33d;
    --vip-cash-point-bg: #061c33;
    --vip-cash-point-def: #ffffff;
    --vip-cash-point-grey: rgba(255, 255, 255, .5);
    --vip-cash-point-title: #ffffff;
    --vip-cash-point-input-bg: #232a46;
    --vip-cash-point-requirement-txt: #ffffff;
    --vip-cash-point-input-txt: #ffffff;
    --vip-cash-point-tips: #ffffff;
    --vip-cash-point-default-btn-bg: #5b5b5b;
    --vip-cash-point-default-btn-txt: #747687;
    --vip-cash-point-allow-btn-bg: #c9a33d;
    --vip-ani-title: #ffffff;
    --vip-history-year: #ffffff;
    --vip-detail-lv-bottom-bg: #747687;
    --vip-detail-lv-txt: #191e32;;
    --vip-detail-box-bg: #061c33;
    --vip-detail-box-bg-shadow: rgba(25, 30, 50, .05);
    --vip-detail-highlight-txt: #c9a33d;
    --vip-detail-txt: #ffffff;
    --vip-detail-border: #394471;
    --vip-detail-card-bg: #232a46;
    --vip-detail-card-bg-shadow: rgba(25, 30, 50, .15);
    --vip-detail-card-txt: #ffffff;
    --vip-detail-link: #c9a33d;
    --vip-points-table-head-bg: #c9a33d;
    --vip-points-table-head-txt: #ffffff;
    --vip-points-table-head-border: #ffffff;
    --vip-points-table-head-zone: #ffffff;
    --vip-points-table-body-record-bg: #232a46;
    --vip-points-table-body-txt: #ffffff;
    --vip-points-table-body-border: #394471;
    --vip-points-table-body-top-border: #394471;
    --accordion-bg: #061c33;
    --accordion-title-bg: #061c33;
    --accordion-title: #ffffff;
    --accordion-info-icon-color: #ffffff;
    --accordion-arrow-icon-color: #ffffff;
    --accordion-txt: #ffffff;
    --accordion-color-bg-title: #ffffff;
    --accordion-add-bank-card-title-bg: #c9a33d;
    --pop-verification-link: #c9a33d;
    --wallet-title-border: #c9a33d;
    --wallet-recommond-tag-bg: #c9a33d;
    --wallet-recommond-tag-bg-triangle: #65521d;
    --wallet-recommond-tag-icon: #191e32;;
    --wallet-maintain-bg: rgba(25, 30, 50, .9);
    --wallet-account-info-bg: #191e32;;
    --wallet-account-info-txt: #ffffff;
    --wallet-account-info-border: #394471;
    --wallet-account-info-copy-icon-color: #ffffff;
    --wallet-account-info-copy-tooltips-bg: #061c33;
    --wallet-account-info-copy-tooltips-txt: #ffffff;
    --wallet-account-info-copy-tooltips-txt-shadow: transparent;
    --wallet-bank-card-bg: linear-gradient(to right, #c9a33d 0, #a56c0b 100%);
    --wallet-bank-card-txt: #191e32;;
    --wallet-bank-card-copy-icon-color: #191e32;;
    --wallet-bank-card-amount: #191e32;;
    --wallet-bank-card-copy-tooltips-bg: #061c33;
    --wallet-crypto-switch-icon-color: #747687;
    --wallet-crypto-tips-txt: #747687;
    --wallet-crypto-tips-highlight: #ffffff;
    --wallet-top-bg: #191e32;;
    --wallet-top-txt: #ffffff;
    --tips-info-bg: #061c33;
    --tips-info-title: #ffffff;
    --tips-info-icon-color: #c9a33d;
    --tips-info-arrow-icon-color: #ffffff;
    --tips-info-border: #747687;
    --wallet-pending-transactions-bg: #061c33;
    --wallet-pending-transactions-title: #ffffff;
    --wallet-pending-transactions-arrow-icon-color: #ffffff;
    --wallet-pending-transactions-number: #c9a33d;
    --wallet-pending-transactions-date: #ffffff;
    --wallet-pending-transactions-btn-bg: #c9a33d;
    --wallet-pending-transactions-btn-txt: #ffffff;
    --wallet-free-tag-bg: #c9a33d;
    --wallet-free-tag-txt: #191e32;;
    --wallet-express-bg: linear-gradient( 60deg, #a480ff, #ffa380, #c880ff, #ff85f0 );
    --wallet-select-bank-card-txt: #ffffff;
    --wallet-bankcard-bg: #232a46;
    --wallet-bankcard-bg-checked-bg: #232a46;
    --wallet-bankcard-bg-checked-border: #c9a33d;
    --wallet-otp-send-btn-bg: #c9a33d;
    --wallet-otp-resend-txt: #c9a33d;
    --bank-card-frost-txt: #191e32;;
    --bank-card-frost-icon: #191e32;;
    --bank-card-frost-btn: #191e32;;
    --transaction-pop-processing-cont-border-color: #394471;
    --transaction-pop-processing-title: var(--primary);
    --transaction-pop-amount-cont-txt-strong: var(--primary);
    --transaction-pop-info-list-title-bg: #242b47;
    --transaction-pop-info-list-txt-bg: #2e385c;
    --transfer-ani-default-tips-bg: #061c33;
    --transfer-ani-default-tips-border: #394471;
    --transfer-ani-platform-bg: #061c33;
    --transfer-ani-platform-darken-color: #191e32;;
    --transfer-ani-platform-lighten-color: #232a46;
    --transfer-ani-platform-secondary-darken-color: #fe9f00;
    --transfer-ani-platform-secondary-lighten-color: #c9a33d;
    --filter-title: #ffffff;
    --transaction-record-table-body-date: #ffffff;
    --transaction-record-calendar-icon-color: #ffffff;
    --transaction-record-table-body-zone: #ffffff;
    --transaction-record-pending: #fb7743;
    --pop-transaction-details-bank-name-bg: #191e32;;
    --pop-transaction-details-bank-name-txt: #ffffff;
    --pop-transaction-details-header-bg: #c9a33d;
    --pop-transaction-details-header-txt: #ffffff;
    --pop-transaction-details-close-icon-color: #ffffff;
    --pop-transaction-details-tab-bg: #c9a33d;
    --pop-transaction-details-title: #ffffff;
    --pop-transaction-details-date: #747687;
    --pop-transaction-details-message-bg: #061c33;
    --pop-transaction-details-message-current-txt: #ffffff;
    --pop-transaction-details-message-txt: #747687;
    --pop-transaction-details-table-bg: #242b47;
    --pop-transaction-details-table-bg-even: #2e385c;
    --pop-transaction-details-table-txt: #ffffff;
    --pop-transaction-details-tips-txt: #c9a33d;
    --pop-transaction-details-btn-area-bg: #191e32;;
    --betting-details-table-head-bg: #232a46;
    --betting-details-table-head-border: #ffffff;
    --betting-record-table-head-title: #ffffff;
    --betting-record-table-head-txt: #ffffff;
    --betting-record-table-date-area-bg: #061c33;
    --betting-record-table-zone: #ffffff;
    --betting-record-tooltips-icon-color: #ffffff;
    --betting-record-tooltips-bg: #191e32;;
    --betting-record-tooltips-txt: #ffffff;
    --mail-notice-icon-circle-bg: #c9a33d;
    --mail-date-bg: #c9a33d;
    --mail-date-txt: #ffffff;
    --mail-date-calendar-icon-color: #ffffff;
    --mail-date-zone: #ffffff;
    --mail-list-bg: #061c33;
    --mail-list-title: #ffffff;
    --mail-list-txt: #747687;
    --mail-list-border: #394471;
    --mail-editor-icon-color: #ffffff;
    --mail-editor-pop-bg: #061c33;
    --mail-editor-pop-txt: #ffffff;
    --mail-editor-choose-icon-color: #747687;
    --mail-editor-choose-icon-active: #c9a33d;
    --mail-editor-pop-check-bg: #061c33;
    --recommend-gift-bg: #c9a33d;
    --recommend-border: #c9a33d;
    --recommend-input-border: #c9a33d;
    --recommend-input-btn: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --recommend-share-btn: #c9a33d;
    --recommend-share-txt: #ffffff;
    --recommend-condition-title: #ffffff;
    --recommend-condition-dot: #c9a33d;
    --recommend-condition-bg: #191e32;;
    --recommend-input-bg: #232a46;
    --recommend-complete-txt: rgba(255, 255, 255, .7);
    --referral-partner-detail-btn-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --referral-partner-achievement-list-bg: linear-gradient( to right, #061c33 0, #445187 15% 30%, #061c33 55% 100% );
    --referral-partner-achievement-txt-strong: #c9a33d;
    --referral-partner-achievement-progress-bar-active: linear-gradient( to right, #c9a33d 0, #a56c0b 100% );
    --referral-reward-lock-mask: rgba(25, 30, 50, .8);
    --referral-reward-complete-mask: rgba(0, 179, 137, .5);
    --referral-partner-reward-pop-list-bg-first: #d0b058;
    --referral-partner-reward-pop-list-bg-second: #cca94a;
    --referral-partner-reward-pop-list-bg-third: #c9a33d;
    --referral-partner-reward-pop-list-bg-fourth: #bc9835;
    --referral-partner-reward-pop-list-bg-fifth: #ae8d31;
    --referral-partner-reward-pop-list-bg-sixth: #9f812d;
    --referral-partner-reward-pop-list-bg-seventh: #917529;
    --referral-partner-reward-pop-list-bg-eighth: #826925;
    --referral-partner-reward-pop-list-bg-ninth: #745e21;
    --referral-partner-reward-pop-list-bg-default: #65521d;
    --turnover-card-bg: #061c33;
    --turnover-card-date: #747687;
    --turnover-card-detail: #c9a33d;
    --pop-turnover-table-bg: #061c33;
    --pop-turnover-table-txt: #ffffff;
    --about-us-bg: #061c33;
    --about-us-table-title: #c9a33d;
    --about-us-table-title-txt: #747687;
    --about-us-table-title-bg: #c9a33d;
    --about-us-mail-link: #c9a33d;
    --tips-info-i: #c9a33d
}

.float-widget {
    --widget-btn-bg: transparent;
    --widget-btn-size: calc(44px * 1.3)
}

.header {
    --desktop-header-bg: #191e32;;
    --desktop-header-logo-width: 90px;
    --desktop-header-login-bg: linear-gradient( to right, #061c33 0, #445187 20%, #445187 35%, #061c33 60%, #061c33 100% );
    --desktop-header-login-txt: #ffffff;
    --desktop-header-register-bg: linear-gradient( to right, #a56c0b 0, #d4b665 20%, #d4b665 35%, #a56c0b 60%, #a56c0b 100% );
    --desktop-header-register-txt: #ffffff;
    --desktop-header-user-icon: #ffffff;
    --desktop-header-deposit-bg: #c9a33d;
    --desktop-header-deposit-txt: #ffffff;
    --desktop-header-wallet-bg: #061c33;
    --desktop-header-wallet-txt: #ffffff;
    --desktop-header-nav-bg: #061c33
}

.dropdown-menu {
    --desktop-header-dropdown-menu-bg: #061c33;
    --desktop-header-dropdown-menu-inbox-bg: #ef5b5b;
    --desktop-header-dropdown-menu-inbox-txt: #ffffff
}

.pagination {
    --carousel-pagination-bullet: #ffffff;
    --carousel-pagination-bullet-active: #c9a33d
}

.game-coming-soon {
    --desktop-feature-game-coming-soon-pic-bg: radial-gradient( 50% 50% at 50% 50%, #191e32; 0%, #232a46 100% )
}

.announcement-row {
    --announvement-icon-color: #191e32;;
    --announvement-txt: #191e32;
}

header {
    z-index: 60
}

.pop-bg {
    z-index: 120
}

.pop-wrap {
    z-index: 129
}

.menu-mask {
    z-index: 115
}

.gotop {
    z-index: 84
}

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

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

.tips-display {
    z-index: 116
}

.loader-box {
    z-index: 9002
}

.loading-mask {
    z-index: 9001
}

.rotating-pop {
    z-index: 130
}

.transparent-overlay {
    z-index: 128
}

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

:root {
    --desktop-header-logo-width: 100px;
    --desktop-header-main-height: 76px;
    --desktop-header-nav-height: 45px;
    --desktop-min-width: 1200px;
    --desktop-menu-style-change-point: 1200px;
    --desktop-layout-content-max-width: 1200px;
    --desktop-layout-content-limit-gap: 16px;
    --desktop-layout-content-limit: calc( 100% - calc((var(--desktop-layout-content-limit-gap)) * 2) );
    --desktop-layout-content-limit-when-menu-open: calc( 100% - calc((var(--desktop-layout-content-limit-gap)) * 4) );
    --desktop-header-bg: #000;
    --desktop-header-nav-bg: #000;
    --desktop-header-nav-txt: #fff;
    --desktop-header-nav-border: var(--color-border);
    --desktop-header-nav-arrow-icon: var(--desktop-header-nav-txt);
    --desktop-header-nav-bg-hover: linear-gradient( to bottom, transparent 0%, transparent 50%, var(--primary-gradient-from) 50%, var(--primary-gradient-to) 100% );
    --desktop-header-nav-txt-hover: var(--radio-txt-hover);
    --desktop-header-nav-arrow-icon-hover: var(--desktop-header-nav-txt-hover);
    --desktop-header-nav-bg-open: var(--desktop-header-nav-bg-hover);
    --desktop-header-nav-txt-open: var(--desktop-header-nav-txt-hover);
    --desktop-header-nav-arrow-icon-open: var(--desktop-header-nav-txt-open);
    --desktop-header-nav-bg-active: var(--desktop-header-nav-bg-hover);
    --desktop-header-nav-txt-active: var(--desktop-header-nav-txt-hover);
    --desktop-header-nav-arrow-icon-active: var( --desktop-header-nav-arrow-icon-hover );
    --desktop-header-nav-underline-active: var(--radio-underline-checked);
    --desktop-header-sub-nav-bg: rgba(0, 0, 0, .7);
    --desktop-header-sub-nav-txt: #fff;
    --desktop-header-sub-nav-maintain-bg: linear-gradient( 270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 35%, rgba(0, 0, 0, .7) 65%, rgba(0, 0, 0, 0) 100% );
    --desktop-header-sub-nav-maintain-txt: #cfcfcf;
    --desktop-header-user-icon: #e9e9e9;
    --desktop-header-login-bg: #2d2e30;
    --desktop-header-login-txt: #fff;
    --desktop-header-register-bg: #2d2e30;
    --desktop-header-register-txt: #fff;
    --desktop-header-deposit-bg: #3b392f;
    --desktop-header-deposit-txt: #fff;
    --desktop-header-wallet-bg: #3b392f;
    --desktop-header-wallet-txt: #fff;
    --desktop-header-dropdown-menu-bg: var(--content-bg);
    --desktop-header-dropdown-menu-txt: #fff;
    --desktop-header-dropdown-menu-txt-hover: var(--primary);
    --desktop-header-dropdown-menu-border: var(--color-border);
    --desktop-header-dropdown-menu-hightlight: var(--primary);
    --desktop-header-dropdown-menu-inbox-bg: #454545;
    --desktop-header-dropdown-menu-inbox-txt: #fff;
    --desktop-left-menu-search-btn-bg: var(--sidenav-category-bg);
    --desktop-left-menu-search-btn-txt: var(--form-input-txt-placeholder);
    --desktop-left-menu-search-btn-search-icon: var(--form-clear-icon-color);
    --desktop-left-menu-search-btn-border-hover: var(--primary);
    --desktop-left-menu-1st-bg: var(--sidenav-category-bg);
    --desktop-left-menu-2nd-bg: var(--desktop-left-menu-1st-bg);
    --desktop-left-menu-1st-item-txt: var(--radio-txt);
    --desktop-left-menu-1st-item-arrow: var(--radio-txt);
    --desktop-left-menu-1st-item-bg-hover: linear-gradient( to left, transparent 0%, transparent 50%, var(--primary-gradient-from) 50%, var(--primary-gradient-to) 100% );
    --desktop-left-menu-1st-item-txt-hover: var(--radio-txt-hover);
    --desktop-left-menu-1st-item-arrow-hover: var(--radio-txt-hover);
    --desktop-left-menu-1st-item-bg-checked: var( --desktop-left-menu-1st-item-bg-hover );
    --desktop-left-menu-1st-item-txt-checked: var(--radio-txt-checked);
    --desktop-left-menu-1st-item-arrow-checked: var(--radio-txt-checked);
    --desktop-left-menu-1st-item-underline-checked: var( --radio-underline-checked );
    --desktop-left-menu-2nd-item-txt: var(--radio-txt);
    --desktop-left-menu-2nd-item-maintain-bg: var( --desktop-header-sub-nav-maintain-bg );
    --desktop-left-menu-2nd-item-maintain-txt: var( --desktop-header-sub-nav-maintain-txt );
    --desktop-feature-game-tab-bg: var(--form-box-bg);
    --desktop-feature-game-tab-txt: var(--radio-txt);
    --desktop-feature-game-tab-border: var(--radio-border);
    --desktop-feature-game-tab-bg-hover: var(--radio-bg-hover);
    --desktop-feature-game-tab-txt-hover: var(--radio-txt-hover);
    --desktop-feature-game-tab-border-hover: var(--radio-border-hover);
    --desktop-feature-game-tab-bg-checked: var(--radio-bg-checked);
    --desktop-feature-game-tab-txt-checked: var(--radio-txt-checked);
    --desktop-feature-game-tab-border-checked: var(--radio-border-checked);
    --desktop-feature-game-tab-underline-checked: var(--radio-underline-checked);
    --desktop-feature-game-tab-active-bg: var(--radio-bg-checked);
    --desktop-feature-game-coming-soon-bg: var(--form-box-bg);
    --desktop-feature-game-coming-soon-pic-bg: var(--form-input-bg);
    --desktop-feature-game-coming-soon-pic-txt: var(--color-muted);
    --desktop-feature-game-coming-soon-pic-gradient-txt: radial-gradient( 50% 50% at 50% 30%, #818890 0%, #4b4f54 100% );
    --desktop-feature-game-coming-soon-pic-loading-bg: linear-gradient( 90deg, #717171 0%, #313131 50%, #717171 100% );
    --desktop-feature-game-coming-soon-pic-loading-txt: var(--color-muted);
    --desktop-games-tab-bg: var(--form-box-bg);
    --desktop-games-tab-txt: var(--radio-txt);
    --desktop-games-tab-border: var(--radio-border);
    --desktop-games-tab-bg-hover: var(--radio-bg-hover);
    --desktop-games-tab-txt-hover: var(--radio-txt-hover);
    --desktop-games-tab-border-hover: var(--radio-border-hover);
    --desktop-games-tab-bg-checked: var(--radio-bg-checked);
    --desktop-games-tab-txt-checked: var(--radio-txt-checked);
    --desktop-games-tab-border-checked: var(--radio-border-checked);
    --desktop-games-tab-underline-checked: var(--radio-underline-checked);
    --desktop-games-tab-active-bg: var(--radio-bg-checked)
}

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
}

a {
    text-decoration: none
}

.banner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: -.2666666667rem 0 0;
    overflow: hidden
}

.banner:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    width: 100%;
    height: 13.3333333333rem;
    transform: translateY(-100%);
    background-color: var(--header-bg-active);
    pointer-events: none
}

.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.3333333333rem;
    height: .5333333333rem;
    margin: 0 .5333333333rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background-color: color-mix(in srgb,var(--event-slick-dot),transparent 50%);
    text-indent: -2666.4rem
}

.banner .slick-dots li:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--event-slick-dot)
}

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

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

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

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

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

    to {
        width: 100%
    }
}

.member-content .banner {
    background-color: var(--content-bg)
}

.member-content .banner li {
    background-color: color-mix(in srgb,var(--event-slick-dot-register),transparent 70%)
}

.member-content .banner li:after {
    background-color: var(--event-slick-dot-register)
}

.input-group {
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    padding-bottom: 3.2rem;
    font-size: 3.4666666667rem;
    line-height: 1.5
}

.input-group .input-wrap+.input-wrap {
    margin-top: 3.2rem
}

.input-group label {
    position: relative;
    height: 6.4rem;
    overflow: hidden;
    color: var(--form-txt);
    font-weight: 500;
    line-height: 6.4rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333rem
}

.input-group input,.input-group textarea {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 10.6666666667rem 0 3.2rem;
    transition: background .3s ease-in-out,border .3s ease-in-out;
    border: .32rem solid var(--form-input-border);
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg);
    color: var(--form-input-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4.8rem
}

.input-group input::placeholder,.input-group textarea::placeholder {
    color: var(--form-input-txt-placeholder)
}

.input-group input:hover,.input-group textarea:hover {
    border: .32rem solid var(--form-input-border-hover)
}

.input-group input:focus,.input-group textarea:focus {
    padding: 0 11.7333333333rem 0 3.2rem;
    border: .32rem solid var(--form-input-border-focus)
}

.input-group input:disabled,.input-group textarea:disabled {
    border: .32rem solid var(--form-input-border-disabled);
    background: var(--form-input-bg-disabled);
    color: var(--form-input-txt-disabled)
}

.input-group input.active+.delete-btn,.input-group textarea.active+.delete-btn {
    background: var(--color-danger)
}

.input-group textarea,.input-group textarea:focus {
    padding: 2.1333333333rem 3.2rem
}

.input-group .clear {
    position: absolute;
    top: 6.4rem;
    right: 0;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    padding: 0;
    opacity: 0;
    background: var(--form-clear-icon-color);
    color: transparent;
    mask: var(--form-clear-icon) no-repeat center/30%;
    -webkit-mask: var(--form-clear-icon) no-repeat center/30%
}

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

.input-group .eyes {
    position: absolute;
    z-index: 1;
    top: 6.4rem;
    right: 0;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    transform: none;
    background: var(--form-eyes-icon-color);
    mask: var(--form-eyes-close-icon) no-repeat center/50%;
    -webkit-mask: var(--form-eyes-close-icon) no-repeat center/50%
}

.input-group .eyes.active {
    mask: var(--form-eyes-open-icon) no-repeat center/50%;
    -webkit-mask: var(--form-eyes-open-icon) no-repeat center/50%
}

.input-group .refresh {
    position: absolute;
    top: 6.4rem;
    right: 0;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    border-radius: 1.0666666667rem;
    background-color: var(--form-refresh-icon-color);
    mask: var(--form-refresh-icon) no-repeat center/40%;
    -webkit-mask: var(--form-refresh-icon) no-repeat center/40%
}

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

.input-group.error select,.input-group.error input {
    border: .32rem solid var(--color-danger)
}

.input-group .member-error {
    width: 100%;
    margin: .8rem 0 0;
    padding: 1.0666666667rem 0
}

.input-group .member-error span {
    color: var(--color-danger)
}

.input-group .member-error:before {
    content: "!";
    display: inline-block;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: var(--third-party-bg-default);
    font-size: 3.7333333333rem;
    font-weight: 700;
    line-height: 4.2666666667rem;
    text-align: center;
    vertical-align: text-top
}

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

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

.input-group.money label {
    position: absolute;
    z-index: 2;
    top: unset;
    left: 3.2rem;
    margin-top: 0
}

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

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

.input-group.upload-file .input-wrap:before {
    content: "";
    display: flex;
    position: absolute;
    z-index: 1;
    inset: 0;
    align-items: center;
    justify-content: flex-start;
    padding: 0 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg);
    pointer-events: none
}

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

.input-group.date input:focus {
    padding: 0 3.2rem
}

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

.input-group .info:before {
    content: "$";
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 1.0666666667rem;
    transform: translateY(-50%);
    border-radius: 1.0666666667rem;
    background-color: var(--wallet-amount-info-icon);
    color: var(--wallet-amount-info-icon-txt);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 4.2666666667rem;
    text-align: center;
    vertical-align: middle
}

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

.input-group .info span .highlight {
    display: inline-block;
    color: var(--wallet-amount-info-txt);
    font-weight: 700
}

.input-group input:-webkit-autofill,.input-group input:-webkit-autofill:hover,.input-group input:-webkit-autofill:focus,.input-group select:-webkit-autofill,.input-group select:-webkit-autofill:hover,.input-group select:-webkit-autofill:focus,.input-group textarea:-webkit-autofill,.input-group textarea:-webkit-autofill:hover,.input-group textarea:-webkit-autofill:focus {
    background-image: none;
    box-shadow: 0 0 0 50px var(--form-input-bg) inset!important;
    -webkit-text-fill-color: var(--form-input-txt)!important;
    text-fill-color: var(--form-input-txt)!important
}

.input-wrap {
    position: relative
}

.input-wrap .status {
    position: absolute;
    top: 50%;
    right: 0;
    flex-flow: row nowrap;
    padding: 0 3.2rem;
    transform: translateY(-50%);
    color: var(--color-success);
    font-size: 3.4666666667rem;
    text-decoration: none
}

.input-wrap .status:before {
    content: "";
    display: inline-block;
    position: relative;
    top: .5333333333rem;
    width: 3.4666666667rem;
    height: 3.4666666667rem;
    margin-right: 1.0666666667rem;
    background-color: var(--color-success);
    mask: url(/assets/images/icon-set/icon-check-type07.svg) no-repeat 50% 50%/contain;
    -webkit-mask: url(/assets/images/icon-set/icon-check-type07.svg) no-repeat 50% 50%/contain
}

.input-wrap .status.textarea-wrap textarea {
    padding: 10px 30px 10px 10px
}

.input-wrap .unconfirm-btn {
    color: var(--color-warning);
    text-decoration: underline
}

.input-wrap .unconfirm-btn:before {
    content: "";
    display: inline-block;
    width: 3.4666666667rem;
    height: 3.4666666667rem;
    margin-right: 1.0666666667rem;
    background-color: var(--color-warning);
    mask: url(/assets/images/icon-set/icon-unconfirm.svg) no-repeat 100% 100%/contain;
    -webkit-mask: url(/assets/images/icon-set/icon-unconfirm.svg) no-repeat 100% 100%/contain
}

.input-wrap .save-btn {
    color: var(--color-info);
    text-decoration: underline
}

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

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

.input-wrap .get-vcode-btn span {
    padding: .5333333333rem 1.6rem;
    border-radius: 8rem;
    background: var(--pop-getvcode-btn);
    color: var(--pop-getvcode-btn-txt)
}

.input-wrap .get-vcode-btn.active {
    display: flex;
    background: transparent;
    color: var(--pop-getvcode-countdown-txt);
    pointer-events: none
}

.input-wrap .number-default {
    position: absolute;
    top: -3.2rem;
    right: 2.6666666667rem;
    padding: .2666666667rem 2.1333333333rem;
    border-radius: 4rem;
    background: var(--profile-number-default);
    color: var(--profile-number-default-txt);
    font-size: 3.2rem;
    text-align: center
}

.input-wrap .verify-code-prefix__text {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 11.7333333333rem;
    padding: 0 2.6666666667rem;
    font-size: 4.8rem;
    line-height: normal;
    color: var(--form-input-txt)
}

.input-wrap .verify-code-prefix__input,.input-wrap .verify-code-prefix__input:focus {
    padding: 0 0 0 19.7333333333rem
}

.input-wrap .otp-resend-btn {
    display: none;
    position: absolute;
    top: 3.7333333333rem;
    right: 2.6666666667rem;
    color: var(--pop-getvcode-resend-txt);
    font-size: 3.4666666667rem;
    max-width: 50%;
    text-align: right;
    line-height: 1.2;
    text-decoration: underline
}

.input-wrap .otp-resend-btn.active {
    display: block
}

.error-message {
    display: flex;
    flex-grow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 2.1333333333rem 0;
    color: var(--color-danger);
    font-size: 3.4666666667rem;
    text-align: left
}

.error-message:before {
    content: "!";
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    min-width: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: var(--form-box-bg);
    font-size: 3.4666666667rem;
    font-weight: 700;
    line-height: 4.2666666667rem;
    text-align: center
}

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

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

.delete-btn {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    transition: all .3s;
    background: var(--form-clear-icon-color);
    mask: var(--form-clear-icon) no-repeat center/40%;
    -webkit-mask: var(--form-clear-icon) no-repeat center/40%
}

.verification input {
    padding-right: 34.1333333333rem
}

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

.verification-code img {
    height: 100%
}

.checkbox-agree label,.pop-checkbox-agree label {
    display: flex;
    position: relative;
    padding: 0 2.1333333333rem;
    transition: .3s;
    color: var(--form-uncheck-color);
    font-size: 3.7333333333rem;
    font-weight: 500;
    line-height: 1.5
}

.checkbox-agree label:before,.pop-checkbox-agree label:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0;
    width: 4rem;
    height: 4rem;
    transform: translateY(-50%);
    transition: .3s;
    border-radius: 1.0666666667rem;
    background: var(--form-uncheck-color)
}

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

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

.checkbox-agree input:checked+label,.pop-checkbox-agree input:checked+label {
    color: var(--color-success)
}

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

.checkbox-agree input:checked+i,.pop-checkbox-agree input:checked+i {
    background: var(--color-success)
}

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

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

.check-group label {
    color: var(--form-txt);
    font-weight: 500;
    line-height: 6.4rem
}

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

.check-group ul.col2 {
    grid-template-columns: repeat(auto-fill,calc((100% - 1.0666666667rem) / 2))
}

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

.check-group ul.col4 {
    grid-template-columns: repeat(auto-fill,calc((100% - 3.2rem)/4))
}

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

.check-group [type=checkbox]+label,.check-group [type=radio]+label {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.1333333333rem;
    transition: .3s;
    border: .32rem solid var(--radio-border);
    border-radius: 1.0666666667rem;
    line-height: 9.3333333333rem;
    background: var(--radio-bg);
    color: var(--radio-txt);
    font-size: 3.4666666667rem;
    text-align: center;
    transition: background .8s,border .8s,color .8s
}

.check-group [type=checkbox]+label:hover,.check-group [type=radio]+label:hover {
    background: var(--radio-bg-hover);
    border: .32rem solid var(--radio-border-hover);
    color: var(--radio-txt-hover);
    cursor: pointer
}

.check-group [type=checkbox]+label img,.check-group [type=radio]+label img {
    position: relative;
    display: block;
    z-index: 2;
    width: auto;
    height: 6.4rem;
    margin-top: 2.1333333333rem
}

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

.check-group [type=checkbox]:checked+label,.check-group [type=radio]:checked+label {
    background: var(--radio-bg-checked);
    border: .32rem solid var(--radio-border-checked);
    color: var(--radio-txt-checked)
}

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

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

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

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

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

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

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

@keyframes moneyBtn-Animation {
    0% {
        filter: drop-shadow(0 0 0 color-mix(in srgb,var(--pop-transfer-amount-fade),transparent 0%))
    }

    to {
        filter: drop-shadow(0 -20px 0 color-mix(in srgb,var(--pop-transfer-amount-fade),transparent 100%))
    }
}

.check-group+.check-group {
    padding-top: 5.3333333333rem
}

.check-group+.check-group:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .32rem;
    background: var(--color-border)
}

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

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

.check-group.type li label p {
    z-index: 3;
    width: 90%;
    margin-top: .5333333333rem;
    overflow: hidden;
    color: var(--color-text);
    font-size: 3.2rem;
    font-style: italic;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

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

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

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

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

    50% {
        transform: translate(-50%,-50%) translate(-3px,3px)
    }

    to {
        transform: translate(-50%,-50%) translate(0)
    }
}

.check-group-hint {
    font-size: 3.2rem;
    color: #ffffff80
}

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

.overflow:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667rem;
    left: .2666666667rem;
    width: calc(100% - .5333333333rem);
    height: calc(100% - .5333333333rem);
    border-radius: 1.0666666667rem;
    background: var(--radio-bg)
}

.overflow .slow {
    position: absolute;
    z-index: 3;
    top: 20%;
    left: 100%;
    width: 3.2rem;
    height: .5333333333rem;
    animation: shoot-slow 1.5s infinite linear;
    opacity: .3;
    background: var(--primary)
}

.overflow .slow:before {
    content: "";
    position: absolute;
    top: 2.6666666667rem;
    right: -2.6666666667rem;
    width: 2.6666666667rem;
    height: .5333333333rem;
    background: var(--primary)
}

.overflow .slow:after {
    content: "";
    position: absolute;
    top: 3.2rem;
    right: 16rem;
    width: 2.6666666667rem;
    height: .5333333333rem;
    background: var(--primary)
}

.overflow .medium {
    position: absolute;
    top: 80%;
    left: 100%;
    width: 4rem;
    height: .5333333333rem;
    animation: shoot-medium 1s linear infinite;
    opacity: .3;
    background: var(--primary)
}

.overflow .medium:before {
    content: "";
    position: absolute;
    top: -2.6666666667rem;
    right: 10.6666666667rem;
    width: 4rem;
    height: .5333333333rem;
    background: var(--primary)
}

.overflow .medium:after {
    content: "";
    position: absolute;
    top: 0;
    right: 16rem;
    width: 4rem;
    height: .5333333333rem;
    background: var(--primary)
}

.overflow .fast {
    position: absolute;
    top: 20%;
    left: 100%;
    width: 4.8rem;
    height: .5333333333rem;
    animation: shoot-fast .8s linear infinite;
    opacity: .3;
    background: var(--primary)
}

.overflow .fast:before {
    content: "";
    position: absolute;
    top: 2.6666666667rem;
    right: -2.6666666667rem;
    width: 4.8rem;
    height: .5333333333rem;
    background: var(--primary)
}

.overflow .fast:after {
    content: "";
    position: absolute;
    top: 3.2rem;
    right: 16rem;
    width: 4.8rem;
    height: .5333333333rem;
    background: var(--primary)
}

.super-fast .overflow {
    background: var(--wallet-super-fast-bg);
    background-size: 300% 300%
}

.express .overflow {
    background: var(--wallet-express-bg);
    background-size: 300% 300%
}

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

    50% {
        background-position: 100% 50%
    }

    to {
        background-position: 0% 50%
    }
}

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

    to {
        margin-left: -120%
    }
}

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

    to {
        margin-left: -120%
    }
}

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

    to {
        margin-left: -120%
    }
}

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

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

.select-group label {
    display: block;
    position: relative;
    height: 6.4rem;
    overflow: hidden;
    color: var(--form-txt);
    font-weight: 500;
    line-height: 6.4rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333rem
}

.select-group select {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 11.7333333333rem 0 3.2rem;
    transition: background .3s;
    border: 0;
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg);
    color: var(--form-input-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4.8rem
}

.select-group:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 11.7333333333rem;
    right: 3.2rem;
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

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

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

.select-group ul.col2 {
    grid-template-columns: repeat(auto-fill,calc((100% - 1.0666666667rem) / 2))
}

.select-group ul.col3 {
    grid-template-columns: repeat(auto-fill,calc((100% - 2.1333333333rem) / 3))
}

.select-group ul.col4 {
    grid-template-columns: repeat(auto-fill,calc((100% - 3.2rem)/4))
}

.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.6666666667rem;
    border-radius: 1.0666666667rem;
    background-color: var(--form-box-bg);
    color: var(--form-txt);
    font-size: 3.2rem;
    line-height: 9.3333333333rem;
    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: .32rem solid var(--radio-border-checked);
    background: var(--radio-bg-checked);
    color: var(--radio-txt)
}

.style-bank {
    padding: 3.2rem 0 0
}

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

.style-bank li {
    overflow: hidden
}

.style-bank li input[type=checkbox]+label,.style-bank li input[type=radio]+label {
    height: auto;
    padding: 0;
    transition: all .3s;
    border: .32rem solid transparent;
    border-radius: 1.0666666667rem;
    background: var(--wallet-bankcard-bg)
}

.style-bank li input[type=checkbox].active+label,.style-bank li input[type=radio].active+label {
    border: .32rem solid var(--wallet-bankcard-bg-checked-border);
    background: var(--wallet-bankcard-bg-checked-bg)
}

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

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

.frost-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: .32rem solid color-mix(in srgb,var(--content-bg),transparent 80%);
    border-radius: 1.0666666667rem;
    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: 1.0666666667rem;
    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: var(--bank-card-frost-mask);
    font-weight: 600;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

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

.frost-card .frost-mask .frost-tag .text {
    display: -webkit-box;
    overflow: hidden;
    color: var(--bank-card-frost-txt);
    font-size: 3.2rem;
    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.1333333333rem 0 0
}

.frost-card .frost-mask .frost-tag .lock {
    position: relative;
    width: 3.7333333333rem;
    height: 2.6666666667rem;
    margin-top: 1.6rem;
    border-radius: 1.0666666667rem;
    background-color: var(--bank-card-frost-icon)
}

.frost-card .frost-mask .frost-tag .lock:before {
    content: "";
    position: absolute;
    top: -1.6rem;
    left: .5333333333rem;
    width: 1.6rem;
    height: 1.6rem;
    border-top: .5333333333rem solid var(--bank-card-frost-icon);
    border-right: .5333333333rem solid var(--bank-card-frost-icon);
    border-left: .5333333333rem solid var(--bank-card-frost-icon);
    border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

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

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

.frost-card .frost-mask .frost-btn .btn.add-card {
    box-sizing: border-box;
    border: .32rem solid var(--bank-card-frost-btn);
    color: var(--bank-card-frost-btn)
}

.frost-card .frost-mask .frost-btn .btn.contact-cs {
    background: var(--bank-card-frost-btn);
    color: var(--bank-card-frost-btn-txt)
}

@keyframes frost {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.select-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 3.2rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    font-size: 3.2rem
}

.select-card .select-card-inner {
    color: var(--wallet-select-bank-card-txt);
    text-align: left
}

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

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

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

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

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

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

.file-box {
    display: flex;
    position: absolute;
    z-index: 2;
    inset: 0;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    color: var(--color-title);
    pointer-events: none
}

.file-name {
    flex: 3;
    padding: 0 3.2rem;
    pointer-events: inherit
}

.file-name.tip {
    color: var(--form-input-txt-placeholder);
    font-size: 4.8rem;
    font-weight: 400
}

.upload-btn {
    display: flex;
    flex: 1;
    flex-basis: 3.2rem;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--form-upload-file-bg);
    pointer-events: none
}

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

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

.upload-group.active {
    height: 40rem;
    border: .32rem solid var(--form-upload-border)
}

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

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

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

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

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

.area-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 1.0666666667rem;
    background: var(--form-upload-mask-bg)
}

.area-mask .m-icon {
    width: 7.4666666667rem;
    height: 7.4666666667rem;
    margin: 2.6666666667rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100%
}

.area-mask .m-text {
    font-size: 3.7333333333rem
}

.area-mask .m-btn {
    margin-top: 2.1333333333rem;
    padding: 2.1333333333rem 6.4rem;
    border-radius: 1.0666666667rem;
    background: var(--form-upload-retry-btn-bg);
    color: var(--form-upload-retry-btn-txt);
    font-size: 3.4666666667rem
}

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

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

.u-icon {
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    background: var(--form-upload-camera-icon-color);
    mask: var(--form-upload-camera-icon) no-repeat center/100%;
    -webkit-mask: var(--form-upload-camera-icon) no-repeat center/100%
}

.u-text {
    color: var(--form-upload-txt);
    font-size: 3.7333333333rem
}

.upload-wrap .upload-group {
    flex-direction: column;
    height: 35.2rem;
    border: .32rem solid var(--form-upload-border);
    border-radius: 1.0666666667rem;
    background: var(--form-upload-bg)
}

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

.upload-wrap .pending .m-icon {
    background-color: var(--color-info)
}

.upload-wrap .pending .m-text {
    color: var(--color-info)
}

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

.upload-wrap .failed .m-icon {
    background-color: var(--color-danger)
}

.upload-wrap .failed .m-text {
    color: var(--color-danger)
}

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

.upload-wrap .success .m-icon {
    background-color: var(--color-success)
}

.upload-wrap .success .m-text {
    color: var(--color-success)
}

.area-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    margin-bottom: 3.2rem;
    background-color: var(--form-box-bg);
    font-size: 3.4666666667rem;
    line-height: 2
}

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

.area-group h3 {
    flex: 1;
    overflow: hidden;
    color: var(--form-txt);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.area-group .tip {
    display: flex;
    justify-content: flex-end;
    color: var(--profile-txt);
    font-size: 3.2rem
}

.area-group .text {
    font-size: 3.7333333333rem;
    color: var(--profile-name);
    word-break: break-all
}

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

.qrcode img {
    width: 100%
}

.tag-recommond {
    position: absolute;
    z-index: 1;
    top: 1.0666666667rem;
    left: -1.0666666667rem;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    border-top-left-radius: 1.0666666667rem;
    border-top-right-radius: 1.0666666667rem;
    border-bottom-right-radius: 1.0666666667rem;
    background: var(--wallet-recommond-tag-bg)
}

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

.tag-recommond:before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 0 4px 4px 0;
    border-style: solid;
    border-color: transparent var(--wallet-recommond-tag-bg-triangle) transparent transparent
}

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

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

.pop-get-vcode .btn-closed,.pop-confirm-password .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background: var(--pop-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%
}

.pop-get-vcode .menu-box,.pop-confirm-password .menu-box {
    background: var(--form-box-bg)
}

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

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

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

.acc-copy {
    background: var(--wallet-account-info-copy-icon-color);
    cursor: pointer;
    height: 5.3333333333rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 80%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 80%;
    position: relative;
    width: 5.3333333333rem
}

.icon-copy {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    padding: 1.0666666667rem 2.6666666667rem;
    transform: translateY(-100%);
    border-radius: 1.0666666667rem;
    opacity: 0;
    background: var(--wallet-account-info-copy-tooltips-bg);
    box-shadow: 0 0 .5333333333rem var(--wallet-account-info-copy-tooltips-txt-shadow);
    color: var(--wallet-account-info-copy-tooltips-txt);
    font-size: 3.4666666667rem;
    line-height: 1.5
}

.icon-copy:before {
    content: "";
    position: absolute;
    right: 5px;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: var(--wallet-account-info-copy-tooltips-bg) transparent transparent
}

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

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

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

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

.resend-btn span {
    padding: 2.1333333333rem;
    color: var(--pop-getvcode-resend-txt);
    font-size: 3.2rem;
    text-decoration: underline
}

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

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

@keyframes icon-copy-show {
    0% {
        top: -8rem;
        opacity: 0
    }

    to {
        top: -1.3333333333rem;
        opacity: 1
    }
}

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

    to {
        top: -8rem;
        opacity: 0
    }
}

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

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

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

.vip-area-group .item h3 {
    color: var(--profile-vip-title)
}

.vip-area-group .item .points-number {
    flex: 1;
    color: var(--profile-vip-number);
    font-size: 5.6rem;
    text-align: center
}

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

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

.vip-area-group .right-box .goto-myvip {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 40rem;
    height: 11.7333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--profile-vip-btn-bg)
}

.vip-area-group .right-box .goto-myvip .myvip-text {
    color: var(--profile-vip-btn-txt);
    font-size: 3.7333333333rem
}

.vip-area-group .right-box .goto-myvip .myvip-text span {
    display: inline-block;
    width: 4.2666666667rem;
    height: 3.7333333333rem;
    margin-left: 2.1333333333rem;
    background: var(--profile-vip-arrow-icon-color);
    vertical-align: middle;
    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
}

.crypto-group-2 {
    position: relative
}

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

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

.crypto-group-2 .crypto-input .currency {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    height: 11.7333333333rem;
    padding: 0 3.2rem;
    color: var(--form-input-txt)
}

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

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

.crypto-group-2 .crypto-input .currency .unit {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: var(--form-input-crypto-unit);
    color: var(--form-input-crypto-unit-txt);
    font-size: 4.2666666667rem;
    line-height: 6.4rem;
    text-align: center
}

.crypto-group-2 .crypto-input input,.crypto-group-2 .crypto-input textarea {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 2.6666666667rem 0 11.7333333333rem;
    transition: border .3s;
    border: .32rem solid var(--form-input-bg);
    border-radius: 1.0666666667rem;
    background-color: var(--form-input-bg);
    color: var(--form-input-txt);
    font-size: 3.7333333333rem;
    font-weight: 400;
    text-align: right;
    appearance: none
}

.crypto-group-2 .crypto-input input::placeholder,.crypto-group-2 .crypto-input textarea::placeholder {
    color: var(--form-input-txt-placeholder)
}

.crypto-group-2 .crypto-input input:focus,.crypto-group-2 .crypto-input textarea:focus {
    padding-right: 8.5333333333rem;
    border: .32rem solid var(--form-input-border-focus);
    outline: none
}

.crypto-group-2 .crypto-input .delete-btn {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    transform: translateY(-50%);
    transition: all .3s;
    opacity: 0;
    mask: var(--form-clear-icon) no-repeat 40% center/40%;
    -webkit-mask: var(--form-clear-icon) no-repeat 40% center/40%
}

.crypto-group-2 .switch-btn {
    display: inline-block;
    position: relative;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 2.1333333333rem;
    background: var(--wallet-crypto-switch-icon-color);
    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: var(--wallet-crypto-tips-txt);
    font-size: 3.4666666667rem
}

.crypto-group-2 .input-text i {
    margin: 0 2.1333333333rem;
    color: var(--wallet-crypto-tips-highlight);
    font-weight: 500
}

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

.upload-box.active {
    height: 40rem;
    border: .32rem solid var(--form-upload-border)
}

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

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

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

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

.personal-phone-group .add-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 1.0666666667rem;
    padding: 0 .5333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--profile-add-btn-bg);
    color: var(--profile-add-btn-txt);
    font-size: 3.2rem;
    line-height: 1.2;
    vertical-align: sub
}

.personal-phone-group .add-btn span {
    padding-right: 1.0666666667rem
}

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

.personal-phone-group .add-btn-icon:before,.personal-phone-group .add-btn-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .8rem;
    height: 2.6666666667rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    background: var(--profile-add-btn-txt)
}

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

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

.toggle-box__title {
    color: var(--switch-target-txt)
}

.toggle-box__inner {
    width: 12rem;
    height: 6.6666666667rem;
    margin-left: 1.0666666667rem
}

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

.toggle-box__switch {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 12rem;
    height: 6.6666666667rem;
    padding: .8rem;
    background: var(--switch-target-race-track-bg);
    border-radius: 1.0666666667rem;
    cursor: pointer
}

.toggle-box__disc {
    width: 4.8rem;
    height: 4.8rem;
    padding: 1.0666666667rem;
    background-color: var(--switch-target-knob);
    border-radius: 50%;
    box-shadow: 0 1px 1px #0003;
    transition: left .5s,transform .5s
}

.toggle-box__toggle-img {
    width: 100%;
    height: 100%;
    background: var(--switch-target-btn-icon);
    -webkit-mask-size: contain
}

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

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

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

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

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

.toggle-box__input:checked~.toggle-box__switch {
    background: var(--switch-target-btn-bg)
}

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

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

.member-content .password-condition p {
    margin-top: 1.0666666667rem;
    padding: 0;
    text-align: left;
    color: var(--login-txt);
    font-size: 3.4666666667rem
}

.gotop {
    display: none;
    opacity: 0;
    background: var(--gotop-bg)
}

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

@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: 1.0666666667rem;
    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 {
    right: 0;
    bottom: 0;
    transform: scale(.7)
}

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

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

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

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

.gotop {
    position: fixed;
    right: 3.2rem;
    bottom: 6.4rem;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    transition: all .3s ease-in;
    border-radius: 50%;
    background: var(--gotop-bg);
    box-shadow: 0 3.2rem 2.6666666667rem #281a7021,inset 0 .2666666667rem .8rem #ffffff80;
    color: #fff
}

.icon-marquee {
    margin: 3.2rem 3.2rem 6.4rem
}

.icon-marquee__title {
    display: flex;
    align-items: center;
    margin-bottom: 3.2rem;
    color: var(--icon-marquee-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.icon-marquee__title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--icon-marquee-border);
    vertical-align: middle
}

.icon-marquee__content {
    position: relative;
    width: 100%;
    overflow: hidden
}

.icon-marquee__content:before,.icon-marquee__content:after {
    content: "";
    position: absolute;
    top: 0;
    width: 21.3333333333rem;
    height: 100%;
    z-index: 1
}

.icon-marquee__content:before {
    background: linear-gradient(to right,var(--content-bg),transparent);
    left: 0
}

.icon-marquee__content:after {
    background: linear-gradient(to left,var(--content-bg),transparent);
    right: 0
}

.icon-marquee__content ul {
    display: inline-flex;
    grid-gap: 3.2rem;
    animation: marquee 80s linear infinite forwards
}

.icon-marquee__content ul:hover {
    animation-play-state: paused
}

.icon-marquee__content li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24rem;
    height: 16rem;
    border-radius: 1.0666666667rem;
    background: var(--icon-marquee-bg)
}

.icon-marquee__content li img {
    height: 10.6666666667rem;
    width: 10.6666666667rem
}

@keyframes marquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-66.6%)
    }
}

.menu-mask {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: var(--sidenav-mask);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.menu {
    display: flex;
    position: fixed;
    z-index: 116;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s;
    -webkit-overflow-scrolling: touch
}

.menu.active {
    left: 0;
    transition-delay: .3s
}

.menu.active .btn-close {
    position: absolute;
    z-index: 117;
    top: 0;
    right: 0;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    animation: closeshow .6s .6s cubic-bezier(.25,.46,.45,.94) both;
    background: var(--sidenav-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 45%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 45%
}

.menu.active .btn-close.is-open-member-menu {
    background: var(--sidenav-member-close-icon-color)
}

@keyframes closeshow {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.menu-first {
    position: relative;
    top: 10.6666666667rem;
    left: 3.2rem;
    z-index: 116;
    height: -moz-fit-content;
    height: fit-content
}

.menu-first .beforelogin,.menu-first .afterlogin {
    width: 100%;
    height: 16rem;
    margin: 0;
    border-radius: 0 0 1.0666666667rem 1.0666666667rem;
    background: var(--sidenav-info-bottom-bg);
    box-shadow: none
}

.menu-first .beforelogin a {
    padding: 0;
    background: transparent;
    box-shadow: none;
    color: var(--sidenav-info-title-bottom);
    text-shadow: 0 0 1.0666666667rem var(--board-register-btn-txt-shadow)
}

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

.menu-first .beforelogin .login-button span {
    flex: 0 0 4rem;
    background: var(--sidenav-info-login-icon-color);
    height: 16rem;
    margin: 0 3.2rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    width: 4rem
}

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

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

.menu-first .beforelogin .register-button span {
    flex: 0 0 4rem;
    background: var(--sidenav-info-register-icon-color);
    height: 16rem;
    margin: 0 3.2rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    width: 4rem
}

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

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

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

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

.menu-first .afterlogin .main-wallet .wallet,.menu-first .afterlogin .main-wallet .text,.menu-first .afterlogin .balance .wallet,.menu-first .afterlogin .balance .text {
    color: var(--sidenav-wallet-txt)
}

.menu-first .afterlogin .main-wallet .bonus,.menu-first .afterlogin .main-wallet .amount,.menu-first .afterlogin .balance .bonus,.menu-first .afterlogin .balance .amount {
    color: var(--sidenav-wallet-amount);
    overflow: hidden;
    text-overflow: ellipsis
}

.menu-first .afterlogin .main-wallet .icon-refresh,.menu-first .afterlogin .balance .icon-refresh {
    background: var(--sidenav-wallet-txt)
}

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

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

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

.menu-first .afterlogin .btn-wallet .icon-wallet-bg {
    display: block;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--sidenav-wallet-icon-bg)
}

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

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

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

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

.menu-first .menu-item .item-box,.menu-first .menu-item .contact-box,.menu-first .menu-item .home-box {
    margin-bottom: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--sidenav-category-columns-bg);
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

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

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

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

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

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

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

.menu-first .menu-item li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 19.2rem;
    height: 19.2rem;
    margin: 0 2.1333333333rem 2.1333333333rem 0;
    padding: 1.0666666667rem;
    transition: all .3s;
    border-radius: 1.0666666667rem;
    background: var(--sidenav-category-bg);
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%);
    font-size: 3.2rem;
    text-align: center;
    overflow: hidden
}

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

.menu-first .menu-item li a {
    color: var(--sidenav-category-txt);
    text-decoration: none
}

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

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

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

.menu-first .menu-item li.active {
    background: var(--sidenav-category-bg-active)
}

.menu-first .menu-item li.active p {
    color: var(--sidenav-category-txt-active)
}

.menu-first .menu-item .shortcut-box li[data-category=bonuses] a:before {
    background-image: var(--sidenav-category-icon-bonuses)
}

.menu-first .menu-item .shortcut-box li[data-category=withdrawal] a:before {
    background-image: var(--sidenav-category-icon-withdrawal)
}

.menu-first .menu-item .shortcut-box li[data-category=inbox] a:before {
    background-image: var(--sidenav-category-icon-inbox)
}

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

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

.menu-first .menu-item-reminder {
    position: absolute;
    top: 0;
    right: 0
}

.menu-first .menu-item-reminder__icon {
    width: 30px
}

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

.menu-first .menu-component-slot {
    background: var(--sidenav-category-bg);
    border-radius: 1.0666666667rem;
    margin-top: 2.1333333333rem
}

.menu-first .menu-component-slot .sponsor-representation__descrp {
    color: var(--sidenav-category-txt)
}

.menu-first .bottom-menu-component {
    background: var(--sidenav-category-bg);
    border-radius: 1.0666666667rem;
    margin-top: 2.1333333333rem
}

.menu-first .bottom-menu-component .sponsor-representation__former {
    display: block;
    position: relative;
    padding: 3.2rem 4rem
}

.menu-first .bottom-menu-component .sponsor-representation__descrp {
    position: absolute;
    bottom: 4rem;
    left: 16.5333333333rem;
    font-size: 3.2rem;
    color: var(--sidenav-category-txt)
}

html:lang(ma) .menu-first .bottom-menu-component .sponsor-representation__descrp {
    font-size: 2.9333333333rem
}

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

.menu-banner {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    box-shadow: 0 .2666666667rem .8rem color-mix(in srgb,var(--offset-shadow),transparent 50%);
    background: var(--sidenav-bg)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn-voucher .voucher-content {
    display: flex;
    padding: 0 2.6666666667rem 0 8rem;
    line-height: 5.3333333333rem;
    max-width: 61.3333333333rem;
    background: var(--btn-voucher-bg);
    border-radius: 13.3333333333rem;
    border: .32rem solid var(--btn-voucher-bg-border)
}

.btn-voucher .voucher-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 3.2rem;
    color: var(--btn-voucher-txt)
}

.btn-voucher .voucher-value {
    margin-left: 1.0666666667rem;
    font-size: 3.7333333333rem;
    font-weight: 600;
    color: var(--btn-voucher-txt-value)
}

.menu-header {
    display: flex;
    position: relative;
    width: 100%;
    height: 16rem;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--sidenav-info-bg);
    box-shadow: inset 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

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

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

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

.menu-header .member-name .account,.menu-header .member-name span {
    color: var(--sidenav-title-txt)
}

.menu-header .member-name p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    width: 26.6666666667rem;
    color: var(--sidenav-profile-txt);
    font-weight: 400
}

.menu-header .icon-arrow {
    position: absolute;
    right: 3.2rem;
    bottom: 2.1333333333rem;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    transform: rotate(180deg);
    background-color: var(--sidenav-profile-txt);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 60%
}

.menu-header .vip-points {
    display: none;
    width: -moz-fit-content;
    width: fit-content;
    padding: 1.0666666667rem 3.2rem;
    border-radius: 6.4rem;
    background: var(--sidenav-info-points-bg);
    color: var(--sidenav-info-points-txt);
    font-size: 3.4666666667rem;
    font-weight: 400
}

.menu-header .vip-points span {
    display: inline-block;
    margin-left: 2.6666666667rem;
    color: var(--sidenav-info-points-number);
    font-weight: 500
}

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

.menu-second ul {
    position: absolute;
    top: 0;
    left: -29.3333333333rem;
    width: 29.3333333333rem;
    height: auto;
    max-height: 170.6666666667rem;
    overflow-y: scroll;
    transition: all .5s;
    opacity: 0;
    box-shadow: inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.menu-second ul.active {
    left: 2.6666666667rem;
    border-radius: 1.0666666667rem;
    opacity: 1;
    background: var(--sidenav-category-bg-active)
}

.menu-second ul li {
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 3.2rem 0
}

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

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

.menu-second ul li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    color: var(--sidenav-category-txt-active);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center
}

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

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

.menu.player .title {
    color: var(--sidenav-shortcut-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    line-height: 5.3333333333rem
}

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

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

.menu.player .shortcut-box li a {
    color: var(--sidenav-shortcut-icon-txt)
}

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

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

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

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

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

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

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

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

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

    to {
        background-position: 0 50%
    }
}

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

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

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

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

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

.popup-page--active .popup-page__backdrop {
    background: var(--pop-mask-bg);
    opacity: 1;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.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 .2666666667rem 1.6rem color-mix(in srgb,var(--popup-page-main-shadow),transparent 95%),inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--popup-page-main-shadow),transparent 95%);
    background-color: var(--popup-page-main-bg);
    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.3333333333rem;
    padding-bottom: 0;
    background: var(--popup-page-main-header-bg)
}

.popup-page-main__back {
    cursor: pointer;
    opacity: 1;
    position: absolute;
    left: 2.6666666667rem;
    width: 5rem;
    height: 5rem;
    background: var(--header-title);
    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__back:hover {
    opacity: .7
}

.popup-page-main__title {
    color: var(--header-title);
    font-size: 4.8rem;
    text-align: center
}

.popup-page-main__close {
    cursor: pointer;
    opacity: 1;
    position: relative;
    width: 5rem;
    height: 5rem;
    position: absolute;
    right: 2.6666666667rem;
    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: .5rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background-color: var(--header-close-icon);
    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: 10rem
}

.popup-page-main__container {
    flex: 1;
    position: absolute;
    top: 13.3333333333rem;
    width: 100%;
    height: calc(100% - 13.3333333333rem);
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--popup-page-main-container-bg)
}

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

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

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

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

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

.tab ul li {
    display: inline-block;
    position: relative;
    margin-right: 1.0666666667rem;
    padding: 0 3.2rem;
    border-radius: 1.0666666667rem;
    font-size: 3.4666666667rem;
    font-weight: 500;
    line-height: 8rem;
    vertical-align: middle;
    text-align: center;
    cursor: pointer
}

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

.tab.search-tab {
    background: var(--search-bg)
}

.tab.search-tab ul li {
    border: .32rem solid var(--search-item-border);
    background: var(--search-item-bg);
    color: var(--search-item-txt)
}

.tab.search-tab ul li.active {
    z-index: 0;
    border: .32rem solid var(--search-item-border-active);
    background: var(--search-item-bg-active);
    color: var(--search-item-txt-active)
}

.tab.search-tab ul li:hover {
    background: var(--search-item-bg-hover);
    border: .32rem solid var(--search-item-border-hover);
    color: var(--search-item-txt-hover);
    cursor: pointer
}

.tab.search-tab ul li label,.tab.search-tab ul li p {
    display: block;
    width: 100%;
    cursor: pointer
}

.tab.search-tab .btn {
    background: var(--search-btn)
}

.tab.search-tab .btn span {
    background: var(--search-search-icon)
}

.tab.filter-tab {
    background: var(--filter-bg)
}

.tab.filter-tab ul {
    border-radius: 1.0666666667rem 0 0 1.0666666667rem
}

.tab.filter-tab ul li {
    border: .32rem solid var(--filter-item-border);
    background: var(--filter-item-bg);
    color: var(--filter-item-txt)
}

.tab.filter-tab ul li.active {
    border: .32rem solid var(--filter-item-border-active);
    background: var(--filter-item-bg-active);
    color: var(--filter-item-txt-active)
}

.tab.filter-tab ul li:hover {
    background: var(--filter-item-bg-hover);
    border: .32rem solid var(--filter-item-border-hover);
    color: var(--filter-item-txt-hover);
    cursor: pointer
}

.tab.filter-tab .btn {
    background: var(--filter-btn)
}

.tab.filter-tab .btn span {
    background: var(--transaction-record-filter-icon)
}

.tab.brand-tab {
    overflow: hidden;
    background: var(--brand-search-bg)
}

.tab.brand-tab ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 16rem;
    height: 9.6rem;
    border: .32rem solid var(--brand-search-item-border);
    background: var(--brand-search-item-bg);
    color: var(--brand-search-item-txt)
}

.tab.brand-tab ul li.active {
    border: .32rem solid var(--brand-search-item-border-active);
    background: var(--brand-search-item-bg-active);
    color: var(--brand-search-item-txt-active)
}

.tab.brand-tab ul li p {
    display: none
}

.tab.brand-tab .btn {
    background: var(--brand-search-btn)
}

.tab.brand-tab .btn span {
    background: var(--brand-search-search-icon)
}

.tab.brand-tab .condition-groups__inner {
    display: flex;
    justify-content: center;
    align-items: center
}

.tab.brand-tab .icon-all,.tab.brand-tab img {
    width: 8rem;
    height: 8rem
}

.tab.search-tab,.tab.filter-tab {
    width: auto;
    margin: 3.2rem
}

.tab.search-tab .search-btn,.tab.search-tab .filter-btn,.tab.filter-tab .search-btn,.tab.filter-tab .filter-btn {
    border-radius: 0 1.0666666667rem 1.0666666667rem 0
}

.tab.search-tab ul li,.tab.filter-tab ul li {
    transition: background .8s,border .8s,color .8s
}

.tab.search-tab ul li.active,.tab.filter-tab ul li.active {
    z-index: 0
}

.tab.search-tab ul li.active:after,.tab.filter-tab ul li.active:after {
    border-radius: 1.0666666667rem
}

.tab.search-tab .btn span,.tab.filter-tab .btn span {
    display: block;
    width: 100%;
    height: 100%;
    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.3333333333rem
}

.sort-bar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 9.6rem;
    margin: 3.2rem 3.2rem 0;
    z-index: 2
}

.sort-bar__title {
    display: flex;
    align-items: center;
    color: var(--game-filter-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.sort-bar__title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--game-filter-border);
    vertical-align: middle
}

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

.sort-bar__box.show .sort-bar__select {
    height: -moz-fit-content;
    height: fit-content;
    max-height: 80rem;
    padding-top: 1.0666666667rem;
    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: 32rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--game-filter-dropdown-menu-bg);
    color: var(--game-filter-dropdown-menu-txt)
}

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

.sort-bar__select__item {
    display: block;
    width: 100%;
    font-weight: 500;
    background: var(--game-filter-dropdown-item-bg);
    color: var(--game-filter-dropdown-item-txt);
    transition: all .3s;
    padding: 3.2rem
}

.sort-bar__select__item span {
    display: block
}

.sort-bar__select__item:first-child {
    border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.sort-bar__select__item:last-child {
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

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

.sort-bar__select__item.active {
    background: var(--game-filter-dropdown-item-bg-active);
    color: var(--game-filter-dropdown-item-txt-active)
}

.sort-bar .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 3.2rem;
    height: 3.2rem;
    background-color: var(--game-filter-dropdown-arrow-icon);
    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.3333333333rem;
    transition: all .5s
}

.forgot-password .tab-nav-icon {
    gap: 1.0666666667rem;
    height: auto;
    padding: 3.2rem;
    background: transparent
}

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

.forgot-password .tab-nav-icon .btn.active .btn-icon-wrap,.forgot-password .tab-nav-icon .btn[data-tab-current=current] .btn-icon-wrap {
    border-color: transparent;
    background: var(--tab-icon-section-btn-bg-active, var(--quick-register-entry-btn-active-bg))
}

.forgot-password .tab-nav-icon .btn.active .tab-btn-icon,.forgot-password .tab-nav-icon .btn[data-tab-current=current] .tab-btn-icon {
    background: var(--tab-icon-section-btn-icon-active, var(--quick-register-entry-btn-icon-active))
}

.forgot-password .tab-nav-icon .btn-icon-wrap {
    width: 100%;
    padding: 3.2rem 0;
    border: .32rem solid var(--quick-register-entry-btn-border);
    border-radius: 1.0666666667rem;
    background: var(--tab-icon-section-btn-bg, var(--quick-register-entry-btn-bg))
}

.forgot-password .tab-nav-icon .btn-icon-wrap .active {
    border-color: transparent;
    background: var(--tab-icon-section-btn-bg-active, var(--quick-register-entry-btn-active-bg))
}

.forgot-password .tab-nav-icon .btn-icon-wrap .tab-btn-icon {
    width: 8rem;
    height: 8rem;
    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: var(--tab-icon-section-btn-icon-bg, var(--quick-register-entry-btn-icon))
}

.forgot-password .tab-nav-icon .text {
    padding-top: 2.1333333333rem;
    color: var(--tab-icon-section-btn-txt, var(--quick-register-entry-btn-txt))!important;
    font-size: 3.2rem!important;
    font-weight: 700;
    letter-spacing: 0
}

.content-title {
    padding-top: 3.2rem
}

.content-title h2 {
    color: var(--color-title);
    font-size: 4rem;
    font-weight: 700
}

.content-title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4rem;
    margin-right: 1.0666666667rem;
    background-color: var(--primary);
    vertical-align: middle
}

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

.content-title .layout-btn {
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    border-radius: 1.0666666667rem;
    background-color: var(--primary);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%
}

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

.announcement-row {
    display: flex;
    position: relative;
    width: 100%;
    height: 8rem;
    margin: 1.0666666667rem 0;
    color: var(--announvement-txt);
    font-size: 3.4666666667rem;
    line-height: 8rem
}

.announcement-row:before {
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    background: var(--announvement-icon-color);
    mask: var(--announvement-icon) no-repeat center center/50%;
    -webkit-mask: var(--announvement-icon) no-repeat center center/50%
}

.announcement-row .marquee {
    width: 100%;
    margin: 0 2.6666666667rem;
    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 {
    color: var(--announvement-txt);
    text-decoration: none
}

.layout-brand {
    display: block;
    margin: 0 3.2rem
}

.layout-brand.active {
    display: none
}

.layout-brand.fish .card1 li img {
    width: 75%;
    margin: 0 auto 1.6rem
}

.layout-list {
    display: none
}

.layout-list.active {
    display: block
}

.card1 {
    width: 100%;
    height: auto;
    border-radius: 1.0666666667rem
}

.card1 ul {
    display: grid;
    grid-gap: 1.0666666667rem;
    grid-template-columns: repeat(4,1fr);
    width: 100%;
    height: auto
}

.card1 li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-radius: 1.0666666667rem;
    background: var(--nav-item-bg);
    box-shadow: 0 1.0666666667rem 1.0666666667rem color-mix(in srgb,var(--nav-item-bg-shadow),transparent 90%),inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 90%)
}

.card1 li span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 5.3333333333rem;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 70%
}

.card1 li span.icon-new {
    width: 7.2rem;
    height: 7.2rem;
    left: 0;
    background-position: top left;
    background-size: 100%
}

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

.card1 li img {
    display: block;
    width: 50%;
    margin: 1.0666666667rem auto;
    height: auto;
    aspect-ratio: 1/1 auto
}

.card1 li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .5333333333rem 1.0666666667rem 2.6666666667rem;
    color: var(--color-title);
    font-size: 3.4666666667rem;
    text-align: center
}

.icon-sport {
    display: block;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 1.0666666667rem auto
}

.footer-wrap {
    background: var(--footer-bg)
}

.footer {
    margin: 0 auto;
    padding: 4.2666666667rem 3.2rem;
    transition: .3s all
}

.footer__partners,.footer__ambassadors {
    margin: 4.2666666667rem 0
}

.footer__partners ul,.footer__ambassadors ul {
    display: grid;
    grid-gap: 4.2666666667rem 2.1333333333rem;
    grid-template-columns: repeat(2,1fr)
}

.footer__partners li,.footer__ambassadors li {
    display: grid;
    grid-column-gap: 2.1333333333rem;
    grid-template-columns: 8rem auto;
    margin: 0
}

.footer__partners strong,.footer__ambassadors strong {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--footer-parthers-title);
    grid-column: 2/span 1;
    margin-bottom: 1.0666666667rem
}

.footer__partners p,.footer__ambassadors p {
    font-size: 3.2rem;
    color: var(--footer-parthers-subtitle);
    grid-row: 2/span 1;
    grid-column: 2/span 1
}

.footer__partners img,.footer__ambassadors img {
    grid-row: 1/span 2;
    justify-self: center;
    align-self: flex-start;
    max-height: 8rem;
    max-width: 8rem;
    width: auto;
    height: auto;
    aspect-ratio: 1/1 auto
}

.footer__download {
    margin: 4.2666666667rem 0
}

.footer__download img {
    width: auto;
    height: 8rem
}

.footer__copyrights {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4.2666666667rem 0;
    color: var(--footer-copyrights-txt);
    font-size: 3.7333333333rem;
    line-height: normal;
    border-top: .32rem solid var(--footer-border)
}

.footer__copyrights__info {
    display: flex;
    align-items: center
}

.footer__copyrights span {
    display: inline-flex;
    margin-right: 2.1333333333rem
}

.footer h2 {
    color: var(--footer-title);
    font-size: 3.7333333333rem;
    font-weight: 600;
    margin-bottom: 3.2rem
}

.footer .footer-collapse {
    position: relative;
    padding-bottom: 18.1333333333rem;
    border-bottom: .32rem solid var(--footer-border);
    cursor: pointer
}

.footer .footer-collapse__logo {
    width: auto;
    height: 8rem;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain
}

.footer .footer-collapse__title {
    color: var(--footer-title);
    font-size: 4.8rem;
    font-weight: 600;
    line-height: normal;
    margin: 2.1333333333rem 0
}

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

.footer .footer-collapse__content:after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    display: block;
    width: 100%;
    height: 21.3333333333rem;
    background: var(--footer-gradient-mask)
}

.footer .footer-collapse__content p {
    color: var(--footer-txt);
    font-size: 3.7333333333rem;
    line-height: normal
}

.footer .footer-collapse__content p+p {
    margin-top: 2.1333333333rem
}

.footer .footer-collapse__content--active {
    color: var(--footer-txt);
    font-size: 3.7333333333rem;
    line-height: normal;
    max-height: 400rem
}

.footer .footer-collapse__btn {
    position: absolute;
    bottom: 4.2666666667rem;
    z-index: 2;
    background: var(--footer-btn-bg);
    color: var(--footer-btn-txt);
    border: .32rem solid var(--footer-btn-border);
    padding: 3.2rem 8.5333333333rem;
    font-size: 3.7333333333rem;
    border-radius: 1.0666666667rem;
    transition: background .8s,border .8s,color .8s
}

.footer .footer-collapse__btn-arrow {
    display: inline-block;
    width: 4.2666666667rem;
    height: 2.1333333333rem;
    margin-left: 1.0666666667rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--footer-btn-arrow)
}

.footer .footer-collapse__btn-arrow--active {
    display: inline-block;
    width: 4.2666666667rem;
    height: 2.1333333333rem;
    margin-left: 1.0666666667rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--footer-btn-arrow);
    transform: rotate(180deg)
}

.footer .license,.footer .partner {
    margin: 4.2666666667rem 0
}

.footer .license ul,.footer .partner ul {
    display: grid;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(2,1fr)
}

.footer .license img,.footer .partner img {
    height: 8rem;
    width: auto;
    aspect-ratio: 1/1 auto
}

.footer .footer-social {
    margin: 4.2666666667rem 0
}

.footer .footer-social ul {
    display: grid;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(8,1fr);
    text-align: center
}

.footer .footer-social img {
    height: 8rem;
    width: auto;
    aspect-ratio: 1/1 auto
}

.footer .pay {
    margin: 4.2666666667rem 0
}

.footer .pay ul {
    display: flex;
    flex-wrap: wrap;
    grid-gap: 2.1333333333rem
}

.footer .pay img {
    width: auto;
    max-height: 5.3333333333rem;
    aspect-ratio: 1/1 auto
}

.footer .safe h2 {
    display: none
}

.footer .safe ul {
    display: flex;
    justify-content: center;
    grid-gap: 3.2rem;
    height: 8rem
}

.footer .safe img {
    width: 8rem;
    height: 8rem
}

.footer .row+.row {
    border-top: .32rem solid var(--footer-border)
}

.float-banner {
    position: fixed;
    bottom: 2.6666666667rem;
    left: 2.6666666667rem;
    filter: drop-shadow(0 0 1.6rem var(--offset-shadow))
}

.float-banner .close {
    position: absolute;
    z-index: 2;
    top: -4rem;
    right: -4rem;
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    border-radius: 100%;
    opacity: 1;
    background-color: var(--content-bg)
}

.float-banner .close:before,.float-banner .close:after {
    content: "";
    display: block;
    position: absolute;
    top: 2.9333333333rem;
    left: 1.0666666667rem;
    width: 4rem;
    height: .5333333333rem;
    background-color: var(--color-title)
}

.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.3333333333rem;
    min-height: 13.3333333333rem;
    max-width: 32rem;
    max-height: 32rem
}

.about-us {
    margin: 4.2666666667rem 0
}

.about-us h2 {
    display: none
}

.about-us ul {
    display: grid;
    grid-gap: 3.2rem;
    grid-template-columns: repeat(3,1fr);
    align-items: center
}

.about-us li {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    text-align: center
}

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

.about-us li:after {
    background: var(--footer-border);
    content: "";
    display: block;
    height: 100%;
    left: calc(100% + 1.6rem);
    margin: 0 auto;
    position: absolute;
    top: 0;
    width: .32rem
}

.about-us li:last-child:after {
    display: none
}

.about-us a {
    color: var(--footer-link);
    font-size: 3.7333333333rem;
    line-height: 1.2;
    text-decoration: underline;
    transition: color .3s ease
}

.forgot-password .cont {
    display: flex;
    flex-direction: column;
    align-items: center
}

.forgot-password .icon {
    width: 32rem;
    height: 32rem;
    margin: 3.2rem 0
}

.forgot-password .icon video,.forgot-password .icon img {
    width: 100%
}

.forgot-password .info {
    line-height: 1.6;
    color: var(--forgot-password-contact-txt-color, var(--color-title));
    font-size: 4.2666666667rem;
    font-weight: 700;
    text-align: center;
    word-break: keep-all
}

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

header.normal {
    background: var(--header-bg)
}

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

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

header.member {
    height: 13.3333333333rem;
    background: var(--header-bg)
}

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

header.member .header-title {
    color: var(--header-title);
    font-size: 4.8rem;
    text-align: center
}

header.member .back-btn {
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    background: var(--header-back-icon-color)
}

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

header.player {
    background: var(--header-bg)
}

header.player .header-title {
    color: var(--header-title)
}

header.player .back-btn {
    background: var(--header-back-icon-color)
}

header.register {
    background: var(--header-bg-tab)
}

header.register .header-title {
    color: var(--header-title)
}

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

header.register.active {
    background: var(--header-bg-tab)
}

header.editor {
    background: var(--header-bg-tab)
}

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

header.editor .header-title {
    color: var(--header-title)
}

header.editor .back-btn {
    background: var(--header-back-icon-color)
}

header.editor.active {
    background: var(--header-bg-tab)
}

header.vip {
    background: var(--header-bg-none);
    font-family: var(--custom-font),var(--custom-serif)
}

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

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

header.vip .back-btn {
    background: var(--header-vip-title)
}

header.vip .header-title {
    color: var(--header-vip-title);
    font-size: 5.3333333333rem
}

header.vip.active {
    background: var(--header-vip-bg-active)
}

header.vip.active .header-title {
    color: var(--header-vip-title-active)
}

header.slot {
    border-bottom: 0;
    background: var(--header-bg-gradient)
}

header.slot .back-btn {
    background-color: var(--header-slot-title)
}

header.slot .header-title {
    color: var(--header-slot-title);
    font-size: 4.2666666667rem;
    font-weight: 500
}

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

header.slot .header-right-btn-group .layout-icon g {
    stroke: var(--header-slot-title)
}

header.slot .header-right-btn-group .filter span {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    background-color: var(--header-slot-title);
    margin-bottom: .5333333333rem;
    mask-position: center;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat
}

header.slot .header-right-btn-group .badge {
    display: flex;
    position: absolute;
    top: 1.0666666667rem;
    right: 0;
    align-items: center;
    justify-content: center;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    border-radius: 50%;
    background: var(--header-badge-bg);
    color: var(--header-badge-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

header.slot.active {
    transition: all 1s ease;
    background: var(--header-slot-bg-active)
}

header.slot.active .back-btn {
    background-color: var(--header-slot-title)!important
}

header.slot.active .header-title {
    color: var(--header-slot-title)
}

header.slot.active .header-right-btn-group .layout-icon g {
    stroke: var(--header-slot-title)
}

header.slot.active .header-right-btn-group .filter:before {
    background-color: var(--header-slot-title)
}

header.cricket,header.normal-logo-left {
    margin-top: 0;
    background: var(--header-bg)
}

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

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

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

header.cricket .login,header.normal-logo-left .login {
    background: var(--header-login-btn-bg);
    color: var(--header-login-btn-txt)
}

header.cricket .register,header.normal-logo-left .register {
    background: var(--header-register-btn-bg);
    color: var(--header-register-btn-txt)
}

header.cricket .deposit,header.normal-logo-left .deposit {
    background: var(--header-deposit-btn-bg);
    color: var(--header-deposit-btn-txt)
}

header.cricket a,header.normal-logo-left a {
    border-radius: 1.0666666667rem
}

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

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

header.cricket .cricket-money,header.normal-logo-left .cricket-money {
    max-width: 32rem;
    background: var(--header-login-btn-bg);
    border-radius: 1.0666666667rem 0 0 1.0666666667rem;
    color: var(--header-login-btn-txt)
}

header.cricket .exp,header.normal-logo-left .exp {
    max-width: 26.6666666667rem;
    background: var(--header-exp-btn-bg);
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    color: var(--header-exp-btn-txt)
}

header.cricket .exp .negative,header.normal-logo-left .exp .negative {
    color: var(--color-danger)
}

header.cricket .icon-refresh {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--header-refresh-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin-right: 1.0666666667rem
}

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

header.active {
    transition: all .3s ease;
    background: var(--header-bg-active)
}

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

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

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

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

header.player .service-btn:before,header.register .service-btn:before {
    background-color: var(--header-service-icon-color)
}

header.player .service-btn p,header.register .service-btn p {
    color: var(--header-service-icon-color)
}

header.player .forum-btn:before,header.register .forum-btn:before {
    background-color: var(--header-service-icon-color)
}

header.player .forum-btn p,header.register .forum-btn p {
    color: var(--header-service-icon-color)
}

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
}

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

header .header-right-btn-group .language-select img {
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 100%;
    box-shadow: 0 0 .32rem #0006
}

header .header-right-btn-group .main-wallet {
    display: inline-flex;
    align-items: center;
    color: var(--header-title)
}

header .header-right-btn-group .main-wallet .icon-refresh {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    margin-left: 2.1333333333rem;
    background: var(--header-title);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

header .header-right-btn-group .main-wallet .icon-refresh.active {
    animation: rotate .5s forwards
}

header .header-right-btn-group .main-wallet .item-icon {
    position: relative;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--primary);
    margin-left: 2.1333333333rem
}

header .header-right-btn-group .main-wallet .item-icon:after {
    content: "+";
    position: absolute;
    left: 18%;
    line-height: 4.2666666667rem;
    color: var(--header-bg);
    font-size: 5.8666666667rem
}

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

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

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

.menu-btn ul li {
    width: 5.3333333333rem;
    height: .5333333333rem;
    margin: 1.0666666667rem 0;
    border-radius: 1.0666666667rem;
    background-color: var(--header-burger-icon-color)
}

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

.service-btn p {
    color: var(--header-service-icon-color);
    font-size: 3.4666666667rem;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.service-btn p a {
    color: var(--header-service-icon-color)
}

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

.forum-btn p {
    color: var(--header-service-icon-color);
    font-size: 3.4666666667rem;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.forum-btn p a {
    color: var(--header-service-icon-color)
}

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

.login-btn p {
    color: var(--header-service-icon-color);
    font-size: 3.4666666667rem;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.login-btn p a {
    color: var(--header-service-icon-color)
}

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

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

.back-btn {
    background: var(--header-back-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%
}

.editor-btn {
    background: var(--mail-editor-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%
}

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

.app-download p {
    color: var(--header-service-icon-color);
    font-size: 3.4666666667rem;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.app-download p a {
    color: var(--header-service-icon-color)
}

.loading .nav-category .btn:before {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg,transparent 0%,transparent 25%,color-mix(in srgb,var(--content-bg),white 10%) 50%,transparent 75%,transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%;
    background-color: var(--content-bg);
    box-shadow: inset 0 0 1.3333333333rem #7e7878
}

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

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

.loading mcd-marquee {
    display: block;
    height: 8.8rem
}

.loading mcd-scroll-banner {
    display: block;
    height: 56rem
}

.loading mcd-feature-games {
    display: block;
    height: 54.6666666667rem
}

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

.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 var(--btn-loading-border);
    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 var(--btn-loading-border);
    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)
    }
}

.beforelogin,.afterlogin {
    display: flex;
    position: relative;
    z-index: 1;
    bottom: 0;
    width: calc(100% - 8.5333333333rem);
    height: 16rem;
    margin: 3.2rem;
    box-shadow: 0 2.1333333333rem 2.1333333333rem var(--board-before-shadow)
}

.beforelogin a,.afterlogin a {
    text-align: left;
    padding: 1.0666666667rem 3.2rem;
    border-radius: 1.0666666667rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem var(--board-btn-shadow),inset -.5333333333rem .2666666667rem .8rem color-mix(in srgb,var(--inset-shadow),transparent 50%);
    font-size: 3.4666666667rem;
    line-height: 1.2;
    text-decoration: none
}

.beforelogin .main-wallet,.afterlogin .main-wallet {
    width: 33%;
    border-radius: 1.0666666667rem 0 0 1.0666666667rem;
    box-shadow: inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.beforelogin .main-wallet video,.afterlogin .main-wallet video {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 31.4666666667rem;
    height: 20.8rem
}

.beforelogin .login-button,.afterlogin .login-button {
    width: 34%;
    height: 100%;
    background: var(--board-login-bg);
    box-shadow: inset 0 .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 50%);
    font-weight: 600;
    text-align: center
}

.beforelogin .login-button a,.afterlogin .login-button a {
    margin-left: 2.1333333333rem;
    background: var(--board-login-btn-bg);
    color: var(--board-login-btn-txt);
    text-shadow: 0 0 1.0666666667rem var(--board-login-btn-txt-shadow)
}

.beforelogin .register-button a,.afterlogin .register-button a {
    background: var(--board-register-btn-bg);
    color: var(--board-register-btn-txt);
    text-shadow: 0 0 1.0666666667rem var(--board-register-btn-txt-shadow)
}

.beforelogin .deposit-button a,.afterlogin .deposit-button a {
    background: var(--board-deposit-btn-bg);
    color: var(--board-deposit-btn-txt);
    text-shadow: 0 0 1.0666666667rem var(--board-deposit-btn-txt-shadow)
}

.beforelogin .register-button,.beforelogin .deposit-button,.afterlogin .register-button,.afterlogin .deposit-button {
    width: 33%;
    height: 100%;
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    background: var(--board-register-bg);
    box-shadow: inset 0 .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 50%);
    font-weight: 700;
    text-align: center
}

.beforelogin .main-wallet {
    background: var(--board-before-bg)
}

.afterlogin .main-wallet {
    background: var(--board-after-bg)
}

.afterlogin .main-wallet,.afterlogin .balance {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 65%;
    height: 100%;
    padding: 2.6666666667rem 4.8rem
}

.afterlogin .main-wallet video,.afterlogin .balance video {
    left: 42.5%
}

.afterlogin .main-wallet .wallet,.afterlogin .main-wallet .text,.afterlogin .balance .wallet,.afterlogin .balance .text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--board-wallet-txt);
    font-size: 3.4666666667rem;
    line-height: 4.8rem
}

.afterlogin .main-wallet .amount,.afterlogin .main-wallet .bonus,.afterlogin .balance .amount,.afterlogin .balance .bonus {
    color: var(--board-wallet-amount);
    font-size: 4.2666666667rem;
    font-weight: 500;
    line-height: 6.9333333333rem
}

.afterlogin .main-wallet .icon,.afterlogin .balance .icon {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem
}

.afterlogin .icon-refresh {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    margin-left: 2.1333333333rem;
    background: var(--board-wallet-refresh-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

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

.afterlogin .deposit-button {
    width: 37%
}

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

body {
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--content-bg);
    font-family: var(--custom-font),var(--custom-serif);
    font-weight: 400
}

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

body.no-scroll {
    overflow: hidden
}

.content {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: auto;
    padding-top: 13.3333333333rem;
    background-color: var(--content-bg)
}

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

.menu-box {
    position: relative;
    height: auto;
    margin: 3.2rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--form-box-bg)
}

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

.menu-box .title h2 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding-left: 3.2rem;
    color: var(--pop-transfer-title);
    font-size: 4rem;
    font-weight: 500
}

.menu-box .title h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 1.0666666667rem;
    border-radius: .5333333333rem;
    background: var(--pop-transfer-border);
    vertical-align: middle
}

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

.menu-box .title i {
    display: flex;
    color: var(--pop-transfer-tips);
    font-size: 3.4666666667rem;
    font-weight: 500;
    white-space: nowrap
}

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

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

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

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

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

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

.fixed-tab .promotion .promotion-main {
    padding: 0 3.2rem
}

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

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

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

.button {
    position: relative;
    width: auto;
    height: 12.8rem;
    border-radius: 1.0666666667rem;
    color: var(--btn-main-txt);
    font-size: 5.3333333333rem;
    font-weight: 500;
    line-height: 12.8rem;
    text-align: center;
    text-shadow: none
}

.button a {
    display: block;
    padding: 0 3.2rem;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit
}

.button.gray {
    background: var(--btn-main-bg-disabled)
}

.button.gray-ol {
    border: var(--btn-main-bg-disabled);
    border-width: .2666666667rem;
    border-style: solid;
    background-color: transparent
}

.button.btn-primary {
    background: var(--btn-main-bg)
}

.button.btn-primary a {
    color: var(--btn-main-txt)
}

.button.btn-primary.btn-disabled {
    background: var(--btn-main-bg-disabled);
    pointer-events: none;
    color: var(--btn-main-txt-disabled)
}

.button.btn-primary.btn-disabled a {
    color: var(--btn-main-txt-disabled)
}

.button.btn-secondary {
    background: var(--btn-secondary-bg)
}

.button.btn-secondary a {
    color: var(--btn-secondary-txt)
}

.button.btn-secondary.btn-disabled {
    background: var(--btn-secondary-bg-disabled);
    pointer-events: none
}

.button.btn-secondary.btn-disabled a {
    color: var(--btn-secondary-txt-disabled)
}

.pointer-none {
    border-radius: 1.0666666667rem
}

.prompt {
    display: block;
    width: 100%;
    color: var(--form-input-txt-placeholder);
    font-size: 3.4666666667rem;
    text-align: center;
    margin: 3.2rem 0
}

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

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

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

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

.member-content {
    display: block;
    position: relative;
    width: 100%;
    height: auto
}

.member-content .phone p {
    padding: 0
}

.member-content .button {
    margin: 3.2rem
}

.login-info-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 1.0666666667rem 3.2rem 0
}

.forgetpassword-buttn {
    font-size: 3.4666666667rem
}

.forgetpassword-buttn a {
    display: block;
    padding: 1.0666666667rem;
    border: .32rem solid var(--login-forgetpassword-btn-border);
    border-radius: .5333333333rem;
    color: var(--login-forgetpassword-btn-txt);
    text-decoration: none
}

.member-content p,.login-biometric-content p {
    padding: 0 3.2rem;
    color: var(--login-txt);
    font-size: 3.4666666667rem;
    line-height: 1.2;
    text-align: center
}

.member-content p a,.login-biometric-content p a {
    color: var(--login-link);
    margin-left: 2.1333333333rem
}

.member-content .signup a,.login-biometric-content .signup a {
    margin-left: 2.1333333333rem;
    text-decoration: underline
}

.member-box {
    position: relative;
    margin: 3.2rem 3.2rem 0
}

.member-box:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .2666666667rem;
    background-color: var(--pop-promotion-table-content-border)
}

.radius .inputbox:after {
    left: 1%;
    width: 98%
}

.radius .inputbox:last-child:after {
    height: 0
}

.radius.member-box:after {
    height: 0
}

.login-biometric-content {
    text-align: center
}

.login-biometric-content .member-box {
    text-align: left
}

.login-biometric-content .button {
    margin: 3.2rem
}

.biometric-group {
    display: inline-block;
    margin-top: 8.5333333333rem;
    text-decoration: none
}

.biometric-group .btn-biometric {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 26.6666666667rem;
    height: 26.6666666667rem;
    margin: 0 auto 2.1333333333rem;
    animation: pop 2.5s linear infinite;
    border-radius: 50%;
    background: var(--biometric-btn)
}

.biometric-group .btn-biometric .item-icon {
    display: block;
    width: 55%;
    height: 55%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    background: var(--biometric-face)
}

.biometric-group .btn-biometric video,.biometric-group .btn-biometric img {
    position: relative;
    width: 21.3333333333rem;
    height: 21.3333333333rem
}

.biometric-group .btn-biometric .ripple {
    position: absolute;
    z-index: -1;
    width: 26.6666666667rem;
    height: 26.6666666667rem;
    animation: shrink 2.5s linear infinite;
    border-radius: 50%;
    background: var(--biometric-btn)
}

.biometric-group span {
    display: block;
    color: var(--biometric-btn-txt);
    font-size: 4rem;
    text-align: center
}

.biometric-group.identify {
    position: relative;
    padding: 2.6666666667rem
}

.biometric-group.identify:before,.biometric-group.identify:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 32rem;
    height: 32rem;
    transform: translate(-50%);
    border: 2.1333333333rem solid transparent;
    border-radius: 100%
}

.biometric-group.identify:before {
    z-index: 130;
    animation: identify 1s linear infinite;
    border-top-color: var(--biometric-btn)
}

.biometric-group.identify:after {
    border: 2.1333333333rem solid color-mix(in srgb,var(--biometric-btn),transparent 80%)
}

.biometric-group.identify .ripple {
    display: none
}

.biometric-group.identify .btn-biometric {
    margin-bottom: 8.5333333333rem
}

@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.3333333333rem;
        height: 37.3333333333rem;
        opacity: 0
    }
}

@keyframes identify {
    0% {
        transform: rotate(0) translate(-50%);
        transform-origin: 0
    }

    to {
        transform: rotate(360deg) translate(-50%);
        transform-origin: 0
    }
}

.member-menu {
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0
}

.member-menu.active {
    display: block
}

.member-head {
    position: relative;
    width: 100%;
    height: 45.3333333333rem
}

.member-menu-content {
    padding: 3.2rem;
    background: var(--sidenav-bg)
}

.member-menu-box {
    width: 100%;
    height: auto;
    margin: 0 0 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--sidenav-category-area-bg);
    font-size: 3.4666666667rem
}

.member-menu-box .title {
    width: 100%;
    padding: 0 3.2rem
}

.member-menu-box .title h2 {
    color: var(--sidenav-shortcut-txt);
    line-height: 8rem
}

.member-menu-box ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0 2.1333333333rem
}

.member-menu-box ul :nth-child(2n).active {
    animation: shake-r 1s linear infinite both
}

.member-menu-box ul li {
    position: relative;
    width: 25%;
    padding: 2.1333333333rem;
    background: none;
    box-shadow: none
}

.member-menu-box ul li.active {
    animation: shake-lr 1s linear infinite both
}

.member-menu-box ul li.scalein {
    animation: scale-in-center .2s cubic-bezier(.25,.46,.45,.94) both
}

@keyframes shake-lr {
    0%,to {
        transform: rotate(0);
        transform-origin: 50% 50%
    }

    10% {
        transform: rotate(1deg)
    }

    20%,40%,60% {
        transform: rotate(-2deg)
    }

    30%,50%,70% {
        transform: rotate(2deg)
    }

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

    90% {
        transform: rotate(1deg)
    }
}

@keyframes shake-r {
    0%,to {
        transform: rotate(0);
        transform-origin: 50% 50%
    }

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

    20%,40%,60% {
        transform: rotate(2deg)
    }

    30%,50%,70% {
        transform: rotate(-2deg)
    }

    80% {
        transform: rotate(1deg)
    }

    90% {
        transform: rotate(-1deg)
    }
}

@keyframes scale-in-center {
    0% {
        transform: scale(0);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.member-menu-box ul li a {
    display: block;
    text-decoration: none
}

.member-menu-box ul li a p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    color: var(--sidenav-shortcut-icon-txt);
    line-height: 3.7333333333rem;
    text-align: center
}

.member-menu-box ul li a h6 {
    display: block;
    color: var(--color-text);
    font-size: 3.2rem;
    line-height: 3.7333333333rem
}

.member-menu-box ul li a span {
    display: block;
    position: relative;
    left: 50%;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 75%;
    border-radius: 50%;
    background-color: var(--sidenav-category-icon-bg);
    transform: translate(-50%);
    margin-bottom: 2.1333333333rem
}

.member-menu-box ul li .notice {
    display: none;
    position: absolute;
    top: 30%;
    right: 45%;
    width: 4rem;
    height: 4rem;
    transform: translate(150%,-150%);
    border-radius: 50%;
    background: var(--sidenav-set-shortcut-add-icon-bg)
}

.member-menu-box ul li .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 2.6666666667rem;
    height: .5333333333rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    background: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: .5333333333rem;
    height: 2.6666666667rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    background: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice.inbox {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 4rem;
    text-align: center;
    color: var(--sidenav-set-shortcut-add-icon-color)
}

.member-menu-box ul li .notice.inbox:after,.member-menu-box ul li .notice.inbox:before {
    content: none
}

.member-menu-box ul li .notice-exclamation {
    position: absolute;
    top: 30%;
    right: 45%;
    width: 4rem;
    height: 4rem;
    transform: translate(150%,-150%);
    border-radius: 50%;
    background: var(--sidenav-category-real-time-bonus-notice-bg)
}

.member-menu-box ul li .icon-exclamation {
    display: block;
    width: 4rem;
    height: 4rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background: var(--sidenav-category-real-time-bonus-notice-txt)
}

.member-menu-box .member-menu-shortcut li .notice {
    background: var(--sidenav-set-shortcut-edit-icon-bg);
    color: var(--sidenav-set-shortcut-edit-icon-color);
    font-size: 3.7333333333rem;
    font-weight: 700;
    line-height: 3.7333333333rem;
    text-align: center
}

.member-menu-box .member-menu-shortcut li .notice:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 2.6666666667rem;
    height: .5333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--sidenav-set-shortcut-edit-icon-color)
}

.member-menu-box .member-menu-shortcut li .notice:before {
    display: none
}

.member-menu-box .button-set,.member-menu-box .button-setup {
    position: relative;
    width: 25%;
    padding: 2.1333333333rem
}

.member-menu-box .button-set .icon-set,.member-menu-box .button-setup .icon-set {
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    margin: 0 auto 2.6666666667rem;
    border-radius: 50%;
    background: var(--sidenav-set-shortcut-icon-bg)
}

.member-menu-box .button-set .icon-set:before,.member-menu-box .button-setup .icon-set:before {
    content: "";
    display: block;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background: var(--sidenav-set-shortcut-icon-color);
    mask: var(--sidenav-set-shortcut-icon);
    -webkit-mask: var(--sidenav-set-shortcut-icon)
}

.member-menu-box .button-set p,.member-menu-box .button-setup p {
    color: var(--sidenav-shortcut-icon-txt);
    line-height: 3.7333333333rem;
    text-align: center
}

.member-menu-box .button-setup {
    display: none;
    animation: button-center .1s cubic-bezier(.25,.46,.45,.94) both
}

.member-menu-box .button-setup .icon-set {
    background: var(--sidenav-set-shortcut-set-icon-color)
}

.member-menu-box .button-setup .icon-set:before {
    mask: var(--sidenav-set-shortcut-edit-icon);
    -webkit-mask: var(--sidenav-set-shortcut-edit-icon)
}

@keyframes button-center {
    0% {
        transform: scale(.6);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.member-menu-box .member-menu-service {
    padding: 2.1333333333rem 5.3333333333rem
}

.member-menu-box .member-menu-service li {
    width: 50%
}

.member-menu-box .member-menu-service li a:before {
    display: none
}

.member-menu-box .member-menu-service li.active {
    animation: none
}

.member-menu-box .member-menu-service a {
    display: block;
    font-size: 3.4666666667rem;
    text-decoration: none
}

.member-menu-box .member-menu-service a p {
    margin-bottom: 1.0666666667rem;
    color: var(--sidenav-service-title);
    font-weight: 600;
    text-align: left
}

.member-menu-box .member-menu-service a span {
    color: var(--sidenav-service-txt);
    text-align: left
}

.member-menu-point {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0 2.1333333333rem 2.1333333333rem;
    text-align: center
}

.member-menu-point i {
    position: relative;
    display: flex;
    flex-shrink: 0;
    width: 8.5333333333rem;
    height: 8.5333333333rem;
    margin-right: 2.1333333333rem
}

.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: 75%;
    z-index: 2
}

.member-menu-point i:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    background-color: var(--profile-member-menu-point-bg)
}

.member-menu-point p {
    display: block;
    color: var(--profile-tips-txt);
    font-size: 3.4666666667rem;
    line-height: 1.5;
    text-align: start
}

.member-menu-point p span {
    color: var(--profile-tips-link)
}

.member-menu-logout {
    width: 100%;
    height: auto;
    margin: 3.2rem 0;
    border-radius: 1.0666666667rem;
    background: var(--secondary);
    box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 90%);
    font-weight: 500
}

.member-menu-logout a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3.2rem;
    text-decoration: none
}

.member-menu-logout a p {
    display: inline-block;
    color: var(--color-title);
    font-size: 5.3333333333rem;
    line-height: 4.2666666667rem;
    text-align: center;
    text-shadow: 0 .2666666667rem 1.0666666667rem color-mix(in srgb,var(--text-shadow),transparent 50%)
}

@keyframes scale-out-center {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes setbubble {
    0% {
        transform: translate(-50%,-50%) scale(0)
    }

    10% {
        transform: translate(-50%,-50%) scale(1);
        border-width: 40px
    }

    20%,90%,to {
        transform: translate(-50%,-50%) scale(1);
        border-width: 0
    }
}

@keyframes seticon {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(180deg)
    }
}

.nav-category {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    background: var(--nav-bg);
    padding: 0 2.1333333333rem 1.0666666667rem
}

.nav-category .btn {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1.0666666667rem;
    padding: 2.1333333333rem 0;
    transition: background .05s ease-out
}

.nav-category .btn.slick-current {
    border-radius: 1.3333333333rem;
    background: var(--nav-category-bg-active-circle)
}

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

.nav-category .btn .icon-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    margin: 0 auto 3.7333333333rem;
    padding-top: .5333333333rem;
    border-radius: 100%;
    background: var(--nav-category-bg);
    box-shadow: .2666666667rem .2666666667rem .2666666667rem 0 var(--nav-category-shadow),inset 0 1.0666666667rem 1.0666666667rem 0 var(--nav-category-inset-shadow)
}

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

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

.nav-category .btn p {
    color: var(--nav-category-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center
}

.nav-category .btn span {
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto 2.1333333333rem;
    transition: all .3s;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

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

.nav-category.active .btn span {
    display: none;
    height: 0
}

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

    to {
        height: 64px;
        opacity: 1
    }
}

.nav-category.nav-auto .slick-list .btn {
    min-width: 21.3333333333rem
}

.nav-category .slick-current .icon-list {
    z-index: 2;
    padding-top: 0;
    transform: translateY(-2px) scale(1.25);
    transition: transform .5s ease;
    background: var(--nav-category-bg-active);
    box-shadow: inset -.2666666667rem -.2666666667rem .5333333333rem #ffffff40,inset .2666666667rem .5333333333rem .5333333333rem #ffffff40
}

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

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

.nav-category .slick-current p {
    color: var(--nav-category-txt-active)
}

.nav-category .slick-current:before {
    background-color: var(--nav-category-bg-active-circle);
    box-shadow: 0 .5333333333rem 1.0666666667rem #0000004d
}

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

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

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

.nextevent {
    position: relative;
    margin: 3.2rem 3.2rem 6.4rem;
    height: auto;
    overflow: hidden
}

.nextevent .title {
    display: flex;
    align-items: center;
    margin-bottom: 3.2rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.nextevent .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--event-border);
    vertical-align: middle
}

.nextevent .banner:before {
    display: none
}

.nextevent .carousel-wrap {
    height: auto
}

.nextevent .carousel-wrap .item-drag {
    height: 54.1333333333rem;
    padding-top: 0%
}

.nextevent .carousel-wrap .item {
    height: auto;
    padding: 0
}

.nextevent .carousel-wrap .item .item-pic {
    height: 54.1333333333rem!important;
    border-radius: 1.0666666667rem;
    background-size: cover
}

.nextevent .event-card {
    display: flex;
    width: 100%
}

.nextevent .case {
    position: relative;
    width: 45%;
    margin: 4rem 0 4rem 5.3333333333rem
}

.nextevent .case .team-img {
    display: flex
}

.nextevent .case .team-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 16rem;
    margin-right: 5.3333333333rem
}

.nextevent .case .team-flag img {
    display: block;
    z-index: 1;
    width: auto;
    height: 55%;
    filter: drop-shadow(0 .5333333333rem 1.0666666667rem #281a70)
}

.nextevent .event-img {
    position: relative;
    width: 50%;
    height: 41.3333333333rem;
    margin-right: 4rem
}

.nextevent .event-img img {
    display: block;
    position: absolute;
    right: 0;
    bottom: 5%;
    width: 100%;
    height: auto
}

.nextevent .slider {
    width: 100%;
    margin: 0 auto;
    transition: all ease-in-out .3s;
    opacity: 1
}

.nextevent .slider .slick-track {
    position: relative;
    padding: 2.1333333333rem 0 0
}

.nextevent .slider .slick-slide {
    position: relative;
    height: 46.6666666667rem;
    margin: 0 3.2rem;
    border-radius: 1.0666666667rem
}

.nextevent .slider .slick-slide a {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%)
}

.nextevent .slick-dots {
    position: absolute;
    z-index: 2;
    bottom: -7.4666666667rem;
    left: 50%;
    transform: translate(-50%)
}

.nextevent .slick-dots li {
    display: inline-block;
    position: relative;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    margin: 0 2.1333333333rem;
    overflow: hidden;
    text-indent: -2666.4rem;
    cursor: pointer
}

.nextevent .slick-dots li button {
    display: block;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    padding: 1.0666666667rem;
    border: 0;
    background: transparent;
    color: transparent;
    cursor: pointer
}

.nextevent .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    border-radius: 50%;
    background: var(--event-slick-dot)
}

.nextevent .slick-dots .slick-active button:before {
    background-color: var(--event-slick-dot-active)
}

.no-result {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    height: 80rem;
    margin: 3.2rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--form-box-bg)
}

.no-result .pic {
    display: flex
}

.no-result img {
    display: block;
    width: 30%;
    height: auto;
    margin: auto;
    opacity: .3;
    filter: brightness(2)
}

.no-result video {
    position: relative;
    left: 50%;
    width: 42.6666666667rem;
    height: 42.6666666667rem;
    transform: translate(-50%);
    opacity: .7
}

.no-result .img-no-data {
    position: relative;
    left: 50%;
    width: 42.6666666667rem;
    height: 42.6666666667rem;
    transform: translate(-50%);
    opacity: .7;
    filter: brightness(1);
    margin: 0
}

.no-result .text {
    margin-top: 2.6666666667rem;
    color: var(--form-input-txt-placeholder);
    font-size: 3.4666666667rem;
    line-height: 1.5;
    text-align: center
}

.third-party-login .verify-tips.tips-info-toggle h5 span {
    color: var(--third-party-personal-tips-info-txt);
    font-size: 4rem;
    line-height: 1.2
}

.third-party-login .personal-info label {
    color: var(--tips-personal-info-tag)
}

.third-party-login .personal-info label:before {
    display: none
}

.third-party-login .personal-info li {
    color: var(--tips-personal-info-tag);
    background: color-mix(in srgb,var(--tips-personal-info-tag),transparent 85%)
}

.third-party-login .tips-info .title-box {
    padding: 3.2rem
}

.third-party-login .contact-info label {
    color: var(--tips-content-info-tag)
}

.third-party-login .contact-info label:before {
    display: none
}

.third-party-login .contact-info li {
    color: var(--tips-content-info-tag);
    background: color-mix(in srgb,var(--tips-content-info-tag),transparent 85%)
}

.third-party-login .document-info label {
    color: var(--tips-document-info-tag)
}

.third-party-login .document-info label:before {
    display: none
}

.third-party-login .document-info li {
    color: var(--tips-document-info-tag);
    background: color-mix(in srgb,var(--tips-document-info-tag),transparent 85%)
}

.third-party-login .info-choose-one label {
    color: var(--tips-document-choose-one-info-tag)
}

.third-party-login .info-choose-one label:before {
    display: none
}

.third-party-login .info-choose-one li {
    border: 0;
    color: var(--tips-document-choose-one-info-tag);
    background: color-mix(in srgb,var(--tips-document-choose-one-info-tag),transparent 85%)
}

.third-party-login .info-supporting label {
    color: var(--tips-info-supporting-txt-tag)
}

.third-party-login .info-supporting li {
    border: 0;
    color: var(--tips-info-supporting-txt-tag);
    background: color-mix(in srgb,var(--tips-info-supporting-txt-tag),transparent 85%)
}

.third-party-login .membername-wrap {
    flex-direction: column
}

.third-party-login .membername-wrap .membername {
    color: var(--third-party-personal-membername-wrap-txt);
    font-size: 4.2666666667rem;
    width: auto
}

.third-party-login .membername-wrap .register-date {
    font-size: 3.2rem;
    color: var(--third-party-personal-membername-wrap-tips);
    margin-top: 2.1333333333rem
}

.third-party-login .vip-area-group .item h3 {
    color: var(--third-party-personal-vip-membername-txt)
}

.third-party-login .vip-area-group .goto-myvip {
    margin-right: 0;
    width: -moz-fit-content;
    width: fit-content;
    background: 0
}

.third-party-login .vip-area-group .goto-myvip:before {
    display: none
}

.third-party-login .vip-area-group .goto-myvip .myvip-text {
    display: inline-flex;
    align-items: center;
    color: var(--third-party-personal-myvip-txt)
}

.third-party-login .vip-area-group .goto-myvip .myvip-text:after {
    display: none
}

.third-party-login .vip-area-group .goto-myvip .myvip-text span {
    width: auto;
    margin-left: 0
}

.third-party-login .vip-area-group .goto-myvip .myvip-text .item-icon {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 0 0 1.0666666667rem;
    background: var(--third-party-personal-myvip-txt);
    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 .vip-area-group .right-box {
    width: 40%
}

.third-party-login .vip-area-group .left-box {
    border: 0;
    width: 60%
}

.third-party-login .list-group {
    display: flex;
    justify-content: space-between;
    font-size: 4.2666666667rem
}

.third-party-login .list-group+.list-group {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: 1px solid var(--third-party-personal-item-icon-color-border)
}

.third-party-login .list-group .item-icon {
    display: table-cell;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 5.3333333333rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: var(--third-party-personal-item-icon-color)
}

.third-party-login .list-group .button {
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 3.7333333333rem;
    color: var(--third-party-login-btn-main-txt);
    width: 25.3333333333rem;
    height: 8rem;
    line-height: 1;
    border-radius: 1.0666666667rem;
    background: var(--third-party-login-btn-main-bg);
    border: 0;
    margin: 0;
    text-decoration: unset
}

.third-party-login .list-group .btn-google {
    overflow: hidden;
    line-height: 8rem
}

.third-party-login .list-group .btn-google .btn-mask {
    background: var(--third-party-btn-mask-bg);
    box-shadow: 0 0 2px var(--lighten-third-party-btn-mask-bg-shadow-1),inset 0 0 .2666666667rem var(--lighten-third-party-btn-mask-bg-shadow-2)
}

.third-party-login .list-group.prompt-verify-tips .btn-mask {
    background: var(--third-party-login-btn-main-bg);
    box-shadow: 0 .2666666667rem 2px color-mix(in srgb,var(--third-party-login-btn-main-bg-shadow),transparent 70%),inset 0 0 .8rem var(--third-party-login-btn-main-bg-inner-shadow)
}

.third-party-login .list-info .left {
    max-width: 100%;
    word-wrap: break-word;
    text-align: left
}

.third-party-login .list-info .left .tag {
    display: unset;
    position: unset;
    letter-spacing: 0;
    color: var(--third-party-personal-item-tag-txt);
    font-size: 2.6666666667rem;
    background-color: var(--third-party-personal-item-tag-bg);
    padding: .8rem 1.0666666667rem;
    border-radius: 1.0666666667rem;
    margin-left: 1.0666666667rem
}

.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.2rem;
    margin: 2.6666666667rem 0 0;
    padding-left: 8rem;
    color: var(--third-party-personal-add-phone-txt);
    border-radius: 1.0666666667rem;
    border: .32rem solid var(--third-party-personal-add-phone-border);
    background: var(--third-party-personal-add-phone-bg)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn {
    display: inline-block;
    position: relative;
    width: 12.8rem;
    height: 8.8rem;
    margin-right: 2.6666666667rem;
    text-align: center
}

.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;
    top: 50%;
    background-color: var(--third-party-personal-add-phone-txt)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:after {
    width: .5333333333rem;
    height: 3.2rem;
    left: 48%;
    transform: translateY(-50%)
}

.third-party-login .add-phone-btn.show .icon-add-phone-btn:before {
    width: 3.2rem;
    height: .5333333333rem;
    transform: translate(-50%,-50%)
}

.third-party-login .currency-code-list {
    justify-content: start;
    padding: 0 1.0666666667rem;
    text-align: left
}

.third-party-login .currency-code-list,.third-party-login .phone-code-list,.third-party-login .social-code-list,.third-party-login .btn-select {
    background: var(--third-party-register-form-select-item-bg)
}

.third-party-login .currency-code-list img,.third-party-login .phone-code-list img,.third-party-login .social-code-list img,.third-party-login .btn-select img {
    width: 5.3333333333rem
}

.third-party-login .btn-select:after {
    border-color: var(--third-party-register-form-select-triangle) transparent transparent
}

.third-party-login .phone-code-list-group,.third-party-login .currency-code-list-group,.third-party-login .social-code-list-group {
    display: none;
    width: 100%;
    border-radius: 1.0666666667rem;
    box-shadow: 0 6px 12px color-mix(in srgb,var(--third-party-shadow-default),transparent 80%)
}

.third-party-login .member-error {
    color: var(--third-party-login-color-danger)
}

.third-party-login .member-error:before {
    background-color: var(--third-party-login-color-danger)
}

.third-party-login .login-info-box {
    margin: 0 .5333333333rem
}

.third-party-login .lang-select .button {
    margin: 0;
    width: 100%
}

.third-party-login .lang-select .button span {
    font-size: 4.8rem
}

.third-party-login .member-menu-point {
    padding: 2.6666666667rem 3.2rem
}

@keyframes zoomIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

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

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

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

.pop-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-height: 95vh;
    transform: translate(-50%,-55%);
    transition: transform .3s;
    animation: hide 0s 1s 1 forwards;
    border-radius: 1.0666666667rem;
    opacity: 0;
    background: var(--pop-bg-content);
    box-shadow: 0 .5333333333rem 1.6rem 0 var(--pop-bg-shadow),inset 0 .5333333333rem .5333333333rem var(--pop-bg-shadow);
    color: var(--pop-txt)
}

.pop-wrap.show {
    display: block
}

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

.pop-wrap.promotion-pop {
    position: fixed;
    height: auto;
    background: var(--pop-promotion-bg);
    color: var(--pop-promotion-txt);
    overflow: hidden
}

.pop-wrap.promotion-pop .pop-title {
    padding: 2.1333333333rem;
    border-radius: 0
}

.pop-wrap.promotion-pop .content-style .times {
    color: var(--pop-promotion-txt)
}

.pop-wrap.promotion-pop .content-style .times:before {
    background-color: var(--pop-promotion-clock-icon-color)
}

.pop-wrap.pop-success .btn-closed,.pop-wrap.pop-fail .btn-closed {
    position: absolute;
    top: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    background: var(--pop-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%
}

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

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

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

.pop-wrap.pop-prompt .item-icon {
    display: block;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin: 0 1.0666666667rem 0 0;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 65%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 65%;
    background-color: var(--pop-refresh-amount-txt)
}

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

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

.pop-wrap .btn-close {
    position: absolute;
    display: inline-block;
    z-index: 1;
    top: 0;
    right: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    transition: .5s;
    background: var(--pop-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%
}

.pop-wrap .pop-title {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 13.3333333333rem;
    padding: 2.1333333333rem;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    text-align: center;
    background: var(--pop-title-bg)
}

.pop-wrap .pop-title h3 {
    display: inline-block;
    width: 82%;
    height: auto;
    overflow: hidden;
    color: var(--pop-title);
    font-size: 4.2666666667rem;
    font-weight: 500;
    line-height: 1.2
}

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

.pop-wrap.form-verification {
    padding: 3.2rem
}

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

.pop-wrap.form-verification .icon {
    width: 32rem;
    height: 32rem;
    margin: 3.2rem 0
}

.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 .info p {
    line-height: 1.2
}

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

.pop-wrap.form-verification .info-title {
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 6.4rem;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word
}

.pop-wrap.form-verification .info-subtitle {
    margin-bottom: 2.1333333333rem;
    color: var(--pop-verification-subtitle-color, var(--pop-promotion-txt));
    font-size: 4.2666666667rem;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all
}

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

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

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

.pop-wrap.form-verification .button {
    background: var(--pop-form-verification-btn-bg, var(--btn-main-bg))
}

.pop-wrap.form-verification .button a {
    color: var(--pop-form-verification-btn-txt, var(--btn-main-txt))
}

.pop-language {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: var(--pop-language-header-bg);
    opacity: 0
}

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

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

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

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

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

.pop-language .pop-title h3 {
    color: var(--pop-language-title)
}

.pop-language .btn-close {
    background: var(--pop-language-close-icon-color)
}

.pop-language .pop-inner {
    height: calc(100% - 13.3333333333rem);
    max-height: calc(100vh - 13.3333333333rem);
    overflow-x: auto;
    overflow-y: auto;
    background: var(--pop-language-content-bg)
}

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

.pop-language .pop-inner .language-list li {
    display: block;
    position: relative;
    flex-flow: nowrap;
    width: 100%;
    border: 0;
    border-radius: 1.0666666667rem;
    background: var(--pop-language-item-bg)
}

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

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

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

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

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

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

.pop-language .pop-inner .language-list .right-language-area .radio-box li {
    z-index: 0;
    flex: auto;
    width: calc(50% - 1.0666666667rem);
    height: 9.0666666667rem;
    margin-bottom: 2.1333333333rem;
    padding: 0 2.1333333333rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background: var(--pop-language-btn-bg);
    border: .32rem solid var(--pop-language-btn-border);
    color: var(--pop-language-btn-txt);
    font-size: 3.2rem;
    line-height: 9.0666666667rem;
    text-align: center;
    word-break: break-all;
    font-family: var(--custom-font),var(--custom-serif)
}

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

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active {
    border-color: var(--pop-language-btn-border-active);
    background: var(--pop-language-btn-bg-active);
    color: var(--pop-language-btn-txt-active)
}

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

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

.btn-box .button+.button {
    margin-left: 3.2rem
}

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

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

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

.pop-inner .times {
    font-size: 3.7333333333rem;
    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: 10.1333333333rem;
    padding: 0 5.3333333333rem;
    background: var(--pop-notshow-bg)
}

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

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

.notshow-checkbox .check-cube {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 4rem;
    margin-right: 5px;
    border: .32rem solid var(--pop-notshow-check-border);
    background: var(--pop-notshow-check-bg);
    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: var(--pop-notshow-txt);
    font-size: 3.7333333333rem;
    line-height: 9.3333333333rem
}

.promotion-pop {
    height: auto;
    background-color: var(--pop-promotion-bg)
}

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

.promotion-pop .btn-close:before {
    background: var(--pop-promotion-close-icon-color)
}

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

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

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

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

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

.language-list .left-language-area p {
    display: inline-block;
    width: 53%;
    color: var(--pop-currency-txt);
    font-size: 3.4666666667rem;
    line-height: 3;
    vertical-align: middle
}

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

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

.pop-setwallet {
    padding: 3.2rem 2.1333333333rem
}

.pop-setwallet .btn-closed {
    position: absolute;
    top: 0;
    right: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%;
    background: var(--pop-close-icon-color)
}

.pop-setwallet .title {
    padding: 0 8.5333333333rem 2.1333333333rem 0;
    color: var(--pop-promotion-bonuswallet-title);
    font-size: 4.2666666667rem
}

.pop-setwallet .wallet {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3.2rem 0;
    padding: 6.4rem 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--pop-promotion-bonuswallet-wallet-bg);
    color: var(--pop-promotion-bonuswallet-wallet-txt);
    font-size: 3.4666666667rem
}

.pop-setwallet label {
    position: relative;
    height: 6.4rem;
    overflow: hidden;
    color: var(--form-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    line-height: 6.4rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pop-setwallet .number {
    margin: 2.1333333333rem 0;
    color: var(--pop-promotion-bonuswallet-wallet-number);
    font-size: 6.4rem
}

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

.pop-setwallet .prompt {
    margin-bottom: 0;
    color: var(--pop-promotion-bonuswallet-wallet-txt)
}

.pop-setwallet .bonus {
    display: flex;
    justify-content: space-between;
    color: var(--pop-promotion-bonuswallet-wallet-txt);
    font-size: 3.4666666667rem
}

.pop-setwallet .btn-box {
    margin-top: 3.2rem
}

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

.pop-setwallet .deposit-now {
    margin-top: 3.2rem;
    text-align: center
}

.pop-setwallet .deposit-now a {
    color: var(--pop-promotion-bonuswallet-link);
    text-decoration: underline
}

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

.pop-setwallet .tips:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    width: 100%;
    border: .32rem solid var(--pop-promotion-bonuswallet-deposit-now-border)
}

.pop-setwallet .tips span {
    display: inline;
    padding: 0 2.1333333333rem;
    background: var(--pop-promotion-bonuswallet-deposit-now-bg)
}

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

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

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

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

.pop-wrap.pop-editor ul.editor-menu {
    display: none;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--mail-editor-pop-bg)
}

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

.pop-wrap.pop-editor ul.editor-menu li {
    color: var(--mail-editor-pop-txt)
}

.pop-wrap.pop-editor ul.editor-check {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--mail-editor-pop-check-bg)
}

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

.pop-wrap.pop-editor ul.editor-check li {
    width: auto;
    color: var(--mail-editor-pop-check-txt)
}

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

.pop-go-to-biometrics {
    width: 90%;
    height: auto;
    padding: 10.6666666667rem 5.3333333333rem 5.3333333333rem;
    border-radius: 5.3333333333rem;
    background: var(--pop-bg-content)
}

.pop-go-to-biometrics .btn-close {
    background: var(--pop-close-icon-color)
}

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

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

.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.0666666667rem;
    right: 1.0666666667rem;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--biometric-face-bg);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-1 {
    z-index: 5;
    width: 49.0666666667rem;
    animation: circle-spin 4s infinite linear;
    opacity: .6;
    background-image: linear-gradient(to bottom right,var(--biometric-wave-color-1),var(--biometric-wave-color-2))
}

.pop-go-to-biometrics .box-loading .circle-wave-1:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.0666666667rem;
    left: 2.6666666667rem;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--biometric-face-bg);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-2 {
    z-index: 4;
    width: 50.6666666667rem;
    animation: circle-spin 8s infinite linear;
    opacity: .7;
    background-image: linear-gradient(to bottom right,var(--biometric-wave-color-2),var(--biometric-wave-color-3))
}

.pop-go-to-biometrics .box-loading .circle-wave-2:after {
    content: "";
    display: block;
    position: absolute;
    right: 2.6666666667rem;
    bottom: 1.0666666667rem;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--biometric-face-bg);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-3 {
    z-index: 3;
    width: 52rem;
    animation: circle-spin 12s infinite linear;
    opacity: .4;
    background-image: linear-gradient(to bottom right,var(--biometric-wave-color-1),var(--biometric-wave-color-2))
}

.pop-go-to-biometrics .box-loading .circle-wave-3:after {
    content: "";
    display: block;
    position: absolute;
    top: 2.6666666667rem;
    left: 1.0666666667rem;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--biometric-face-bg);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .box-loading .circle-wave-4 {
    z-index: 2;
    width: 53.3333333333rem;
    animation: circle-spin 18s infinite linear;
    opacity: .6;
    background-image: linear-gradient(to bottom right,var(--biometric-wave-color-2),var(--biometric-wave-color-3))
}

.pop-go-to-biometrics .box-loading .circle-wave-4:after {
    content: "";
    display: block;
    position: absolute;
    right: 1.0666666667rem;
    bottom: 2.6666666667rem;
    width: 95%;
    height: 95%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--biometric-face-bg);
    background-repeat: no-repeat;
    background-size: cover
}

.pop-go-to-biometrics .title {
    margin-bottom: 2.6666666667rem;
    color: var(--biometric-title);
    font-size: 7.4666666667rem;
    font-weight: 600;
    text-align: center
}

.pop-go-to-biometrics .sub-title {
    margin-bottom: 10.6666666667rem;
    color: var(--biometric-content);
    font-size: 4.2666666667rem;
    line-height: 1.4;
    text-align: center
}

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

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

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

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

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

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

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

.pop-otp-verification .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%;
    background: var(--pop-close-icon-color)
}

.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: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--pop-bg-content)
}

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

.pop-transaction-records-details .bank-name {
    position: absolute;
    z-index: 10000;
    top: -14.9333333333rem;
    left: 50%;
    max-width: 100%;
    padding: 3.2rem;
    transform: translate(-50%);
    border-radius: 1.0666666667rem;
    background: var(--pop-transaction-details-bank-name-bg);
    color: var(--pop-transaction-details-bank-name-txt);
    font-weight: 500;
    white-space: nowrap
}

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

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

.pop-transaction-records-details .btn-closed {
    position: absolute;
    z-index: 101;
    top: 0;
    right: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    background: var(--pop-transaction-details-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%
}

.pop-transaction-records-details .header {
    flex: none;
    position: relative;
    z-index: 60;
    width: 100%;
    height: 13.3333333333rem;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--pop-transaction-details-header-bg);
    color: var(--pop-transaction-details-header-txt);
    font-size: 4.2666666667rem;
    font-weight: 500;
    line-height: 13.3333333333rem;
    text-align: center
}

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

.pop-transaction-records-details .pop-content .tab-btn-page {
    background: var(--pop-transaction-details-tab-bg)
}

.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: var(--pop-transaction-details-btn-area-bg);
    text-align: center
}

.pop-transaction-records-details .member-content .tips {
    display: none;
    margin: 4rem 0;
    color: var(--pop-transaction-details-tips-txt)
}

.pop-transaction-records-details .member-content .button {
    margin: 3.2rem;
    overflow: hidden
}

.pop-transaction-records-details .member-content .button .countdown {
    display: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 12rem;
    border-radius: 1.0666666667rem;
    background-color: var(--btn-main-bg-disabled);
    color: var(--btn-main-txt-disabled);
    font-size: 4rem;
    line-height: 8rem;
    text-align: center
}

.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:before {
    content: "";
    display: block;
    position: absolute;
    top: -5.3333333333rem;
    width: 100%;
    height: 5.3333333333rem;
    background: var(--btn-main-bg-disabled);
    mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%;
    -webkit-mask: url(/assets/images/player/bg-wave.svg) no-repeat center/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:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 5.3333333333rem;
    transform: rotate(180deg);
    background: var(--primary);
    mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%;
    -webkit-mask: url(/assets/images/player/bg-wave.svg) no-repeat center/100%
}

.pop-transaction-records-details .member-content .button .countdown .timer {
    position: relative;
    top: 0;
    left: -2.6666666667rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    box-shadow: 0 0 0 .32rem var(--pop-transaction-details-timer)
}

.pop-transaction-records-details .member-content .button .countdown .timer:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36.5%;
    height: .32rem;
    transform-origin: 0 50%;
    animation: spinClockwise 2s linear infinite;
    border-radius: 1.0666666667rem;
    background-color: var(--pop-transaction-details-timer)
}

.pop-transaction-records-details .member-content .button .countdown .timer:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: .32rem;
    transform-origin: 0 50%;
    animation: spinClockwise 12s linear infinite;
    border-radius: 1.0666666667rem;
    background-color: var(--pop-transaction-details-timer)
}

.transaction-details-wrap {
    height: 100%;
    margin: 0;
    padding: 3.2rem;
    overflow-x: hidden;
    overflow-y: auto
}

.transaction-details-wrap .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.2rem 0
}

.transaction-details-wrap .title h3 {
    width: 70%;
    color: var(--pop-transaction-details-title);
    font-size: 4.5333333333rem;
    font-weight: 500
}

.transaction-details-wrap .title .tags {
    min-width: 21.8666666667rem;
    padding: 1.0666666667rem;
    overflow: hidden;
    transform: scale(.9);
    border-radius: .5333333333rem;
    color: var(--transaction-record-status-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap
}

.timeline-box {
    position: relative;
    margin-top: 2.6666666667rem;
    padding-bottom: 2.6666666667rem
}

.timeline-box .date {
    margin-bottom: 2.6666666667rem;
    margin-left: 13.3333333333rem;
    color: var(--pop-transaction-details-date);
    font-size: 3.4666666667rem
}

.timeline-block {
    position: relative;
    margin-bottom: 2.9333333333rem
}

.timeline-block:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 4.5333333333rem;
    width: .5333333333rem;
    height: calc(100% + 9.3333333333rem);
    border-radius: 1.0666666667rem
}

.timeline-block:last-child:before {
    top: -9.3333333333rem;
    height: 14.6666666667rem
}

.timeline-block .point {
    position: absolute;
    top: -5.3333333333rem;
    left: 3.4666666667rem;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    border-radius: 50%;
    outline: 1.0666666667rem solid var(--content-bg);
    box-shadow: .2666666667rem .2666666667rem #0000001a
}

.timeline-block .bounce {
    animation: bounce-point .5s .8s
}

.timeline-block .content {
    display: inline-flex;
    width: calc(100% - 12.8rem);
    min-height: 14.6666666667rem;
    margin-left: 12.8rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--pop-transaction-details-message-bg)
}

.timeline-block .content .text {
    width: 76%;
    color: var(--pop-transaction-details-message-txt);
    font-size: 3.7333333333rem;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-line
}

.timeline-block .content .text+.time {
    margin-top: 1.0666666667rem
}

.timeline-block .content .time {
    width: 24%;
    color: var(--pop-transaction-details-message-txt);
    font-size: 3.2rem;
    text-align: right
}

.timeline-block.current:before {
    height: 110%
}

.timeline-block.current .point {
    display: flex;
    z-index: 1;
    top: -6.4rem;
    left: 2.1333333333rem;
    align-items: center;
    justify-content: center;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    border: .8rem solid var(--content-bg);
    box-shadow: .2666666667rem .2666666667rem #0000001a,inset .2666666667rem .2666666667rem #0000001a
}

.timeline-block.current .point span {
    position: relative;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    background: var(--content-bg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.timeline-block.current .text {
    color: var(--pop-transaction-details-message-current-txt);
    font-weight: 500
}

.details-box {
    padding: 2.6666666667rem 0;
    overflow: hidden;
    border-radius: 1.0666666667rem
}

.details-box .info {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    padding: 3.2rem;
    background: var(--pop-transaction-details-table-bg);
    color: var(--pop-transaction-details-table-txt)
}

.details-box .info:nth-child(2n) {
    background: var(--pop-transaction-details-table-bg-even)
}

.details-box .info:first-child {
    border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.details-box .info:last-child {
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

.details-box .info .name {
    font-size: 3.7333333333rem;
    font-weight: 500
}

.details-box .info .value {
    font-size: 3.7333333333rem;
    text-align: right;
    word-break: break-word
}

.pop-content.success .transaction-details-wrap .tags,.pop-content.success .transaction-details-wrap .timeline-block .point {
    background: var(--transaction-record-positive)
}

.pop-content.success .transaction-details-wrap .timeline-block:before {
    background: var(--transaction-record-positive)
}

.pop-content.success .transaction-details-wrap .current .point {
    outline: .5333333333rem solid var(--transaction-record-positive);
    background: var(--transaction-record-positive)!important
}

.pop-content.success .transaction-details-wrap .current .point span {
    top: 3%
}

.pop-content.processing .transaction-details-wrap .tags,.pop-content.processing .transaction-details-wrap .timeline-block .point {
    background: var(--transaction-record-pending)
}

.pop-content.processing .transaction-details-wrap .timeline-block:before {
    background: var(--transaction-record-pending)
}

.pop-content.processing .transaction-details-wrap .current .point {
    outline: .5333333333rem solid var(--transaction-record-pending);
    background: var(--transaction-record-pending)!important
}

.pop-content.processing .transaction-details-wrap .current .point span {
    top: 5%;
    animation: wiggle 2s .5s infinite
}

.pop-content.fail .transaction-details-wrap .tags,.pop-content.fail .transaction-details-wrap .timeline-block .point {
    background: var(--transaction-record-negative)
}

.pop-content.fail .transaction-details-wrap .timeline-block:before {
    background: var(--transaction-record-negative)
}

.pop-content.fail .transaction-details-wrap .current .point {
    outline: .5333333333rem solid var(--transaction-record-negative);
    background: var(--transaction-record-negative)!important
}

.pop-content.reverted .tags,.pop-content.reverted .timeline-block .point {
    background: var(--transaction-record-revert)
}

.pop-content.reverted .timeline-block:before {
    background: var(--transaction-record-revert)
}

.pop-content.reverted .current .point {
    outline: .5333333333rem solid var(--transaction-record-revert);
    background: var(--transaction-record-revert)!important
}

@keyframes table-arrow {
    0% {
        transform: translate(-50%,-50%) rotate(180deg)
    }

    to {
        transform: translateY(-50%) rotate(180deg)
    }
}

@keyframes circle-spin {
    0% {
        transform: rotate(360deg)
    }
}

@keyframes error-ani {
    0%,to {
        transform: translateZ(0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-3px,0,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(3px,0,0)
    }
}

@keyframes bounce-point {
    0% {
        transform: scale(.6)
    }

    60% {
        transform: scale(1.2)
    }

    to {
        transform: scale(1)
    }
}

@keyframes wiggle {
    0%,7% {
        transform: rotate(0)
    }

    15% {
        transform: rotate(-15deg)
    }

    20% {
        transform: rotate(10deg)
    }

    25% {
        transform: rotate(-10deg)
    }

    30% {
        transform: rotate(6deg)
    }

    35% {
        transform: rotate(-4deg)
    }

    40%,to {
        transform: rotate(0)
    }
}

@keyframes slide {
    0% {
        visibility: hidden;
        transform: translate(100px)
    }

    60% {
        transform: translate(-5px)
    }

    to {
        visibility: visible;
        transform: translate(0)
    }
}

@keyframes spinClockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes button-push {
    0% {
        bottom: -12rem
    }

    to {
        bottom: 0
    }
}

@keyframes button-pull {
    0% {
        bottom: 0
    }

    to {
        bottom: -12rem
    }
}

.pop-login-fail {
    position: absolute;
    width: calc(100% - 8.5333333333rem);
    height: auto;
    padding: 2.1333333333rem 3.2rem;
    transition: top .3s;
    animation: errorTipsShow .5s alternate linear forwards;
    border: .32rem solid var(--alert-login-fail-tips-border);
    border-radius: 1.0666666667rem;
    background: var(--alert-login-fail-tips-bg)
}

.pop-login-fail .login-fail-tip {
    display: flex;
    align-items: center;
    justify-content: center
}

.pop-login-fail .login-fail-tip .login-fail-icon {
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    margin-right: 2.1333333333rem
}

.pop-login-fail .login-fail-tip .login-fail-icon video {
    width: 100%
}

.pop-login-fail .login-fail-tip span {
    width: 90%;
    color: var(--alert-login-fail-tips-txt);
    font-size: 3.4666666667rem;
    font-weight: 700;
    letter-spacing: .2666666667rem;
    line-height: 4rem
}

.pop-login-fail.active {
    display: inline;
    opacity: 1
}

.pop-login-fail.hide {
    animation: errorTipsHIde .5s alternate linear forwards
}

@keyframes errorTipsShow {
    0% {
        top: -13.8666666667rem
    }

    to {
        top: 13.8666666667rem
    }
}

@keyframes errorTipsHIde {
    0% {
        top: 13.8666666667rem
    }

    to {
        top: -13.8666666667rem
    }
}

.pop-reset-password,.pop-account-lock {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 90vh;
    padding: 3.2rem;
    transform: translate(0);
    transition: bottom .5s;
    border-radius: 5.3333333333rem 5.3333333333rem 0 0;
    background: var(--pop-login-fail-bg);
    box-shadow: 0 -.5333333333rem 4rem #0003
}

.pop-reset-password .title,.pop-account-lock .title {
    margin-bottom: 8.5333333333rem;
    color: var(--pop-login-fail-title);
    font-weight: 600;
    letter-spacing: .2666666667rem;
    text-align: center;
    line-height: 6.4rem
}

.pop-reset-password p,.pop-account-lock p {
    margin-bottom: 8rem;
    color: var(--pop-login-fail-txt);
    font-size: 3.4666666667rem;
    letter-spacing: .2666666667rem;
    line-height: 5.3333333333rem;
    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: 12rem;
    margin: 0 auto 2.6666666667rem;
    font-size: 4rem;
    line-height: 12rem
}

.pop-reset-password .pop-btn-box .button+.button,.pop-account-lock .pop-btn-box .button+.button {
    margin-left: 3.2rem
}

.pop-reset-password.active,.pop-account-lock.active {
    bottom: 0
}

.pop-reset-password.active img,.pop-account-lock.active img {
    animation: fallin .6s .2s forwards
}

.icon-check,.icon-close,.icon-lock {
    position: relative;
    z-index: 10;
    left: 50%;
    width: 32rem;
    height: 32rem;
    margin: 3.2rem 0;
    transform: translate(-50%)
}

.icon-check video,.icon-close video,.icon-lock video {
    width: 100%
}

.pop-notification .content-style .table {
    margin-bottom: 17.3333333333rem
}

.pop-notification .content-style p {
    margin: 2.6666666667rem 0
}

.pop-notification .btn-box {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2.1333333333rem 3.2rem 3.2rem;
    background: var(--pop-bg-content)
}

.pop-notification .btn-box .button {
    color: var(--color-walletcard-txt)
}

.pop-notification .btn-box .btn-primary {
    background-image: var(--pop-bonuswallet-card-start-btn)
}

.pop-notification .btn-box .btn-cancel {
    background-image: var(--bonuswallet-cancel-btn-bg)
}

.progress-bar .bar {
    position: relative;
    width: 100%;
    height: 2.1333333333rem;
    margin-bottom: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--bonuswallet-progress-bar-bg)
}

.progress-bar .bar-inner {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 1.0666666667rem;
    background: var(--bonuswallet-progress-bar-bg-active)
}

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

.progress-bar .number {
    display: flex;
    align-content: center;
    justify-content: space-between;
    color: var(--bonuswallet-progress-bar-txt);
    font-size: 3.2rem
}

.games .recommend-main {
    display: block
}

.games .recommend-main .games-box {
    display: inline-block;
    width: 48rem;
    margin: 0 2.1333333333rem 0 0;
    line-height: 0;
    vertical-align: top
}

.games .recommend-main .games-box:last-child {
    margin-right: 8.5333333333rem
}

.games .recommend-main .games-box .text {
    line-height: 1.3
}

.recommend {
    position: relative;
    width: 100%;
    height: auto;
    margin: 3.2rem 0 6.4rem 3.2rem
}

.recommend .recommend-title {
    display: flex;
    align-items: center;
    margin-bottom: 3.2rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.recommend .recommend-title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--event-border);
    vertical-align: middle
}

.recommend .recommend-bg {
    width: 100%;
    height: auto
}

.recommend .recommend-bg .recommend-main {
    display: block;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin-right: 3.2rem;
    padding: 0
}

.recommend-card {
    display: inline-block;
    position: relative;
    width: 72rem;
    height: 41.3333333333rem;
    margin: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%);
    vertical-align: top;
    overflow: hidden
}

.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%
}

.recommend-card+.recommend-card {
    margin-left: 0
}

.rotating-pop {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: opacity .5s .1s;
    opacity: 0;
    background: #000000e6;
    pointer-events: none;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

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

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

.rotating-pop.show {
    opacity: 1;
    pointer-events: auto
}

.rotating-phone-wrap {
    position: relative;
    bottom: 10%;
    width: 26.6666666667rem;
    height: 26.6666666667rem
}

.phone-rotating-tips {
    position: relative;
    bottom: 10%;
    width: 90%;
    color: #fff;
    font-size: 2.4rem;
    text-align: center
}

.phone-rotating-tips span {
    display: inline-block;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    margin-right: 1.0666666667rem;
    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;
    background: #fff
}

.searchpage {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 17.0666666667rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--content-bg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    right: -100%;
    opacity: 0;
    transition: right .3s,opacity 0s .3s
}

.searchpage .search-top-info {
    opacity: 0
}

.searchpage.active {
    right: 0;
    opacity: 1;
    transition: right .3s,opacity 0s 0s
}

.searchpage.active .search-top-info {
    opacity: 1
}

.searchpage.game-page-filter {
    transition: right 0s .3s,opacity .3s
}

.searchpage.active-fide-in {
    right: 0;
    opacity: 1;
    transition: opacity .3s .3s
}

.searchpage.active-fide-in .search-top-info {
    opacity: 1
}

.searchpage .button {
    border: 0;
    outline: none;
    font-size: 5.3333333333rem;
    line-height: 13.3333333333rem
}

@keyframes accordion-move-up {
    0% {
        top: 0
    }

    75% {
        top: 13.3333333333rem
    }

    to {
        top: 0
    }
}

.search-top-block {
    z-index: 0;
    display: block;
    position: relative;
    top: 0;
    opacity: 1;
    transition: top .1s,z-index 0s .1s
}

.search-top-block:after {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 13.3333333333rem;
    background: var(--pop-search-games-header-bg)
}

.search-top-block.active-move-up {
    pointer-events: none;
    z-index: 99999;
    top: -13.3333333333rem;
    opacity: 0;
    transition: top .3s,opacity .3s .5s
}

.search-top-block.active-move-up:after {
    animation: accordion-move-up .4s
}

.search-top-block.active-move-up .search-top-info {
    padding-left: 16rem
}

.search-top-block .search-top-info {
    background: var(--pop-search-games-header-bg)
}

.search-top-block .search-top-info .back {
    background: var(--pop-search-games-header-back-icon)
}

.search-top-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 13.3333333333rem;
    padding: 0 2.6666666667rem;
    background: var(--pop-search-header-bg);
    transition: padding-left .3s
}

.search-top-info .back {
    display: block;
    flex: 0 0 13.3333333333rem;
    width: 13.3333333333rem;
    height: 100%;
    text-indent: -2666.4rem;
    background: var(--pop-search-back-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%;
    cursor: pointer
}

.search-top-info input {
    position: relative;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0;
    border: .32rem solid var(--pop-search-input-border);
    border-radius: 1.0666666667rem;
    outline: none;
    background: var(--pop-search-input-bg);
    color: var(--pop-search-input-txt);
    font-size: 3.7333333333rem;
    text-indent: 5.3333333333rem;
    transition: background .3s ease-in-out,border .3s ease-in-out
}

.search-top-info input::placeholder {
    color: var(--pop-search-input-placeholder)
}

.search-top-info input:hover {
    border: .32rem solid var(--pop-search-input-border-hover)
}

.search-top-info input:focus {
    border: .32rem solid var(--pop-search-input-border-focus)
}

.search-top-info input:has(+div.icon-search) {
    width: calc(100% - 26.6666666667rem)
}

.search-top-info .icon-search {
    display: block;
    width: 13.3333333333rem;
    height: 100%;
    background: var(--pop-search-search-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%
}

.search-top-info h6 {
    overflow: hidden;
    color: var(--filter-title);
    font-weight: 500;
    line-height: 13.3333333333rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 4.8rem
}

.search-top-info h6~.back {
    position: absolute;
    left: 0
}

.searchpage-main {
    position: relative;
    margin: 3.2rem;
    border-radius: 1.0666666667rem
}

.searchpage-main .clear-result {
    position: absolute;
    top: 3.2rem;
    right: 2.1333333333rem;
    color: var(--pop-search-clear-txt);
    font-size: 3.4666666667rem;
    text-decoration: underline
}

.searchpage-main h2 {
    margin-bottom: 1.0666666667rem;
    color: var(--pop-search-title);
    font-size: 4.2666666667rem;
    font-weight: 500
}

.searchpage-main .check-group {
    padding: 3.2rem;
    background: var(--pop-search-inner-bg)
}

.searchpage-main .check-group:first-child {
    border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.searchpage-main .check-group:last-child {
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

.searchpage-main .check-group+.check-group:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3.2rem;
    width: calc(100% - 6.4rem);
    height: .32rem;
    background: var(--color-border)
}

.searchpage-main:has(.check-group:only-child) .check-group {
    border-radius: 1.0666666667rem
}

.searchpage-main ul {
    margin-bottom: 0
}

.search-checkbox-group ul {
    display: grid;
    grid-gap: 1.0666666667rem;
    grid-template-columns: repeat(3,1fr);
    justify-content: flex-start;
    overflow: hidden
}

.search-checkbox-group li {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-checkbox-group li:nth-child(3n) {
    margin-right: 0
}

.searchpage-bar {
    position: fixed;
    z-index: 10;
    right: -50%;
    bottom: 0;
    width: 100%;
    padding: 3.2rem;
    transform: translate(50%);
    transition: all .3s;
    background-color: var(--content-bg)
}

.searchpage-bar.active {
    right: 50%
}

.date-input {
    position: relative;
    width: 100%;
    margin-right: 0
}

.date-input input {
    box-sizing: border-box;
    border: 0;
    border-radius: 1.0666666667rem;
    outline: none;
    color: var(--search-item-txt);
    text-align: left
}

.date-input input::placeholder {
    color: var(--search-item-txt)
}

.date-input input::-webkit-calendar-picker-indicator {
    display: none
}

.search-tab-desktop-popup .searchpage,.search-tab-desktop-popup .searchpage-bar {
    position: absolute
}

html:lang(vn) .referral-partner .search-checkbox-group ul {
    grid-template-columns: repeat(2,1fr)
}

.search-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    height: 11.7333333333rem;
    margin: 0 2.1333333333rem 2.1333333333rem 0;
    padding: 3.2rem 4.2666666667rem;
    transition: all .3s;
    border-radius: 1.0666666667rem;
    background: var(--sidenav-search-btn-bg);
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%);
    font-size: 3.7333333333rem;
    text-align: center;
    overflow: hidden
}

.search-box span {
    color: var(--sidenav-search-btn-txt)
}

.search-box .icon-search {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--sidenav-search-btn-search-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 80%;
    mask-position: 80%
}

.search-container {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    transition: transform .3s;
    opacity: 0;
    background: var(--pop-sidenav-search-game-bg);
    z-index: 129
}

.search-container.active {
    transform: translateY(0);
    opacity: 1
}

.search-container .search__header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 13.3333333333rem;
    padding-left: 3.2rem;
    background: var(--pop-sidenav-search-game-header-bg)
}

.search-container .search__header .input-group {
    padding-bottom: 0
}

.search-container .search__header form {
    width: 100%
}

.search-container .search__header input {
    height: 10.6666666667rem;
    padding: 0 3.2rem 0 10.6666666667rem;
    font-size: 3.7333333333rem;
    background: var(--pop-sidenav-search-game-header-input-bg);
    color: var(--pop-sidenav-search-game-header-input-txt);
    transition: border .3s
}

.search-container .search__header input::placeholder {
    color: var(--pop-sidenav-search-game-header-input-txt-placeholder)
}

.search-container .search__icon-search {
    position: absolute;
    display: block;
    flex: 0 0 10.6666666667rem;
    width: 10.6666666667rem;
    height: 100%;
    background: var(--pop-sidenav-search-game-header-search-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 40%;
    cursor: pointer
}

.search-container .search__close {
    display: block;
    flex: 0 0 13.3333333333rem;
    width: 13.3333333333rem;
    height: 100%;
    background: var(--pop-sidenav-search-game-header-close-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%;
    cursor: pointer
}

.search-container .search .input-group {
    padding-bottom: 0
}

.search-container .search__results {
    overflow-y: scroll;
    height: calc(100% - 13.3333333333rem);
    margin-top: 3.2rem
}

.search-container .search__results .no-result {
    background: transparent
}

.search-container .search__results .list-loading {
    height: unset
}

.search__wrap-inner {
    height: 100%
}

.third-party-login.content {
    height: 100vh;
    background: var(--third-party-login-content-bg)
}

html.is-desktop .third-party-login.content {
    height: auto
}

.third-party-login.player-content {
    margin-bottom: 0
}

.third-party-login {
    text-align: center
}

.third-party-login .banner {
    margin: .8rem 0 0;
    background: var(--third-party-login-content-bg)
}

.third-party-login .banner .banner-v1 {
    height: 44.8rem
}

.third-party-login .banner .slider .slick-slide {
    height: 42.1333333333rem;
    margin-bottom: 0
}

.third-party-login .banner .slick-dots {
    bottom: 2.6666666667rem
}

.third-party-login .banner .slick-dots li {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background-color: var(--third-party-login-banner-dot)
}

.third-party-login .banner .slick-dots li:after {
    background-color: var(--third-party-login-banner-dot-active)
}

.third-party-login .button {
    margin: 3.2rem;
    background: var(--btn-main-bg);
    color: var(--btn-main-txt)
}

.third-party-login .button.btn-disabled {
    background: var(--btn-main-bg-disabled);
    pointer-events: none
}

.third-party-login .button.btn-disabled a {
    color: var(--btn-main-txt-disabled)
}

.third-party-login .button+.biometric-group {
    margin-top: 8rem
}

.third-party-login .btn-primary {
    background: var(--btn-main-bg);
    color: var(--btn-main-txt)
}

.third-party-login .btn-primary a {
    color: var(--btn-main-txt)
}

.third-party-login .btn-secondary {
    background: var(--btn-secondary-bg);
    box-shadow: inset 0 0 .8rem var(--third-party-register-btn-secondary-bg-inner-shadow);
    color: var(--btn-secondary-txt)
}

.third-party-login .btn-secondary a {
    color: var(--btn-secondary-txt)
}

.third-party-login .btn-fourth {
    background: var(--third-party-register-btn-tertiary-bg)
}

.third-party-login .btn-fourth a {
    color: var(--third-party-register-btn-tertiary-txt)
}

.third-party-login .btn-google,.third-party-login .btn-facebook,.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-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-biometric.btn-fourth .item-icon {
    position: relative;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 2.1333333333rem;
    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
}

.third-party-login .signup-tips {
    display: block;
    padding: 2.6666666667rem 4rem;
    color: var(--third-party-register-tips-txt);
    font-size: 3.7333333333rem
}

.third-party-login .signup-tips a,.third-party-login .signup-tips i {
    margin-left: 1.0666666667rem;
    text-decoration: underline;
    color: var(--third-party-register-link)
}

.third-party-login .signup-tips p {
    padding: 0
}

.third-party-login .footer-tips {
    padding-bottom: 13.8666666667rem
}

.third-party-login .player .menu-box .input-group {
    padding-bottom: 0
}

.third-party-login .player.button-tips {
    color: var(--profile-tips-txt);
    text-align: left
}

.third-party-login .login-tips {
    color: var(--third-party-txt-fourth)
}

.third-party-login .invitation-code {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: flex-start;
    margin-top: 3.2rem;
    padding: 0 4rem
}

.third-party-login .invitation-code p,.third-party-login .invitation-code span {
    padding: 0;
    color: var(--third-party-register-affiliate);
    font-size: 3.7333333333rem;
    line-height: 1.2
}

.third-party-login .invitation-code p {
    position: relative
}

.third-party-login .invitation-code .item-icon {
    display: block;
    width: 4rem;
    height: 4rem;
    margin-right: 2.4rem;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: contain
}

.third-party-login .number-code-captcha {
    position: absolute;
    right: 12rem;
    top: calc(12rem - 4%)
}

.third-party-login .input-status {
    position: absolute;
    z-index: 1;
    top: 9.0666666667rem;
    right: 0;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    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: var(--color-danger);
    mask-size: 26%;
    -webkit-mask-size: 26%
}

.third-party-login .input-status i.icon-check {
    display: block;
    background: var(--third-party-register-form-check-icon-color);
    mask-size: 30%;
    -webkit-mask-size: 30%
}

.third-party-login .input-group input:focus .input-status i {
    display: none
}

.third-party-login .puzzle-verification-box {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    border: .32rem solid var(--form-input-border);
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg)
}

.third-party-login .puzzle-verification-box .title {
    position: relative;
    padding: 3.2rem;
    border-bottom: .2666666667rem solid var(--form-box-bg);
    line-height: 1
}

.third-party-login .puzzle-verification-box .title p {
    padding: 0;
    color: var(--third-party-login-puzzle-box-txt);
    font-size: 3.7333333333rem;
    line-height: 1.5;
    text-align: left
}

.third-party-login .puzzle-verification {
    display: block;
    width: 100%;
    padding: 3.2rem;
    overflow: hidden
}

.third-party-login .puzzle-verification .captcha-pic {
    position: relative;
    width: 100%;
    height: 41.0666666667rem;
    background-position: center;
    background-size: cover
}

.third-party-login .puzzle-verification .captcha-blank {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 16.5333333333rem;
    height: 16.5333333333rem;
    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.2666666667rem;
    margin-top: 3.2rem;
    border: .32rem solid var(--third-party-login-puzzle-box-slider-border);
    background: var(--third-party-login-puzzle-box-slider-bg)
}

.third-party-login .puzzle-verification .captcha-bar-slider {
    position: absolute;
    top: 0;
    height: 12.2666666667rem
}

.third-party-login .puzzle-verification .captcha-bar-btn {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 12.2666666667rem;
    height: 12.2666666667rem;
    background: var(--third-party-login-puzzle-box-slider-btn-bg);
    box-shadow: 0 .2666666667rem .5333333333rem 0 var(--third-party-shadow-default),inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow);
    cursor: pointer
}

.third-party-login .puzzle-verification .captcha-bar-icon {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color);
    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: .32rem solid var(--third-party-login-puzzle-box-slider-border-success);
    background: var(--third-party-login-puzzle-box-slider-bg-success)
}

.third-party-login .puzzle-verification.passed .captcha-bar-btn {
    left: 70%;
    background: var(--third-party-login-puzzle-box-slider-btn-bg-success);
    box-shadow: 0 .2666666667rem 2.6666666667rem 0 var(--third-party-shadow-default),inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow-success)
}

.third-party-login .puzzle-verification.passed .captcha-bar-icon {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color-success)
}

.third-party-login .puzzle-verification.passed .puzzle-tips p {
    color: var(--color-success)
}

.third-party-login .puzzle-verification.passed .puzzle-tips .item-icon {
    background: var(--color-success)
}

.third-party-login .puzzle-verification.error .captcha-bar-slider {
    width: 30%;
    border: .32rem solid var(--third-party-login-puzzle-box-slider-border-error);
    background: var(--third-party-login-puzzle-box-slider-bg-error)
}

.third-party-login .puzzle-verification.error .captcha-bar-btn {
    left: 30%;
    background: var(--third-party-login-puzzle-box-slider-btn-bg-error);
    box-shadow: 0 .2666666667rem 2.6666666667rem 0 var(--third-party-shadow-default),inset 0 0 .8rem 0 var(--third-party-login-puzzle-box-slider-btn-inner-shadow-error)
}

.third-party-login .puzzle-verification.error .captcha-bar-icon {
    width: 3.2rem;
    height: 3.2rem;
    background: var(--third-party-login-puzzle-box-slider-btn-arrow-icon-color-error)
}

.third-party-login .puzzle-verification.error .puzzle-tips p {
    color: var(--third-party-login-puzzle-box-tips-txt-error)
}

.third-party-login .puzzle-verification.error .puzzle-tips .item-icon {
    background: var(--third-party-login-puzzle-box-tips-txt-error)
}

.third-party-login .puzzle-tips {
    position: relative;
    flex: 1;
    width: 100%;
    padding-top: 3.2rem;
    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: var(--third-party-login-puzzle-box-tips-txt)
}

.third-party-login .puzzle-tips p:before {
    display: none
}

.third-party-login .puzzle-tips p .item-icon {
    display: inline-flex;
    min-width: 3.2rem;
    min-height: 3.2rem;
    margin-right: 2.6666666667rem;
    background: var(--third-party-login-puzzle-box-tips-txt);
    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 .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.4666666667rem;
    line-height: 10.6666666667rem
}

.third-party-login .currency-wrap .currency-area-code {
    width: 100%
}

.third-party-login .puzzle-refresh {
    display: inline-flex;
    position: absolute;
    right: 3.2rem;
    bottom: calc(50% - 2.6666666667rem)
}

.third-party-login .puzzle-refresh.active {
    animation: rotate 1s forwards
}

.third-party-login .puzzle-refresh .puzzle-refresh-icon {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    background: var(--third-party-login-puzzle-box-refresh-icon-color);
    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.new-register-success-page {
    padding-top: 0
}

.third-party-login .register-success-wrap {
    position: relative;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
    transform: unset;
    width: auto;
    box-shadow: none;
    margin: 3.2rem
}

.third-party-login .register-success-cont .top-inner h3+h4 {
    margin: 2.1333333333rem 0 0
}

.third-party-login .register-success-cont .top-inner p {
    margin-top: 3.2rem
}

.third-party-login .register-success-btn {
    flex-wrap: nowrap
}

.third-party-login .register-success-btn .button {
    margin: 0 .5333333333rem;
    font-size: 4.8rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-wrap: wrap;
    word-break: break-word;
    line-height: 4.8rem
}

.third-party-login .register-success-btn .button+.button {
    margin-left: 2.1333333333rem
}

.third-party-login .register-success-btn {
    margin-top: 8.5333333333rem
}

.third-party-login .user-password-info-box {
    margin: 4rem 0 0
}

.third-party-login .user-password-info-box+.register-success-btn {
    margin-top: 6.4rem
}

.third-party-login .user-password-info-box p {
    flex: 1;
    margin-right: 2.6666666667rem;
    color: var(--third-party-login-form-input-txt);
    word-break: break-word;
    font-size: 4.2666666667rem
}

.third-party-login .back-home {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8rem
}

.third-party-login .back-home a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    background: var(--third-party-login-form-input-bg);
    border-radius: 1.0666666667rem
}

.third-party-login .back-home span {
    display: inline-flex;
    width: 8rem;
    height: 8rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0 auto
}

.third-party-login .user-password-info li {
    display: inline-block;
    width: 100%;
    max-height: 32rem;
    overflow: auto;
    font-size: 3.7333333333rem;
    line-height: 1.5;
    text-align: left
}

.third-party-login .user-password-info li+li {
    margin-top: 3.2rem
}

.third-party-login .user-password-info label {
    padding-right: 1.0666666667rem;
    font-size: 3.7333333333rem;
    color: var(--third-party-login-form-txt)
}

.third-party-login .user-password-info label+.info {
    margin-top: 2.6666666667rem
}

.third-party-login .user-password-info .info {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    height: 11.7333333333rem;
    padding: 0 0 0 3.2rem;
    border-radius: 1.0666666667rem;
    border: .32rem solid var(--third-party-register-success-input-border);
    background: var(--third-party-login-form-input-bg)
}

.third-party-login .user-password-info p {
    text-align: left
}

.third-party-login .user-password-info .info-copy {
    display: flex;
    height: 100%;
    width: 11.2rem;
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    text-align: center;
    white-space: nowrap;
    background: var(--third-party-register-success-input-copy-btn-bg);
    align-items: center;
    justify-content: center
}

.third-party-login .user-password-info .info-copy .item-icon {
    display: block;
    width: 4rem;
    height: 4rem;
    background-color: var(--third-party-register-success-copy-icon-color);
    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 .verification-wrap {
    display: block;
    margin: 3.2rem;
    text-align: left
}

.third-party-login .verification-wrap input[type=number] {
    border: .32rem solid var(--form-input-border);
    background: var(--form-input-bg)
}

.third-party-login .verification-wrap input[type=number]:disabled,.third-party-login .verification-wrap input[type=number].input-disabled {
    background: var(--form-input-bg-disabled)
}

.third-party-login .verification-wrap input[type=number].input-error {
    border: .32rem solid var(--color-danger)
}

.third-party-login .verification-wrap input[type=number]:focus,.third-party-login .verification-wrap input[type=number].input-focus {
    border: .32rem solid var(--form-input-border-focus)
}

.third-party-login .verification-wrap.input-disable input[type=number] {
    background: var(--form-input-bg-disabled)
}

.third-party-login .verification-wrap.input-error input[type=number] {
    border: .32rem solid var(--color-danger)
}

.third-party-login .verification-txt,.third-party-login .verification-tips {
    margin: 2.1333333333rem auto
}

.third-party-login .verification-txt p,.third-party-login .verification-tips p {
    color: var(--third-party-verification-code-txt);
    font-size: 3.7333333333rem;
    line-height: 1.5
}

.third-party-login .verification-txt p span,.third-party-login .verification-tips p span {
    color: var(--third-party-verification-code-txt-highlight)
}

.third-party-login .verification-txt p a,.third-party-login .verification-tips p a {
    color: var(--third-party-verification-code-link)
}

.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: var(--third-party-verification-code-link)
}

.third-party-login .verification-txt p .resend-btn.active,.third-party-login .verification-tips p .resend-btn.active {
    transition: .5s
}

.third-party-login .verification-tips p {
    color: var(--third-party-verification-tips-txt)
}

.third-party-login .verification-tips p {
    text-align: center
}

.third-party-login .verification-content {
    display: block
}

.third-party-login .verification-code {
    display: block;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    height: auto;
    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-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.3333333333rem;
    border-radius: 1.0666666667rem;
    font-size: 8rem;
    font-weight: 700;
    text-align: center;
    color: var(--form-input-txt);
    -webkit-text-fill-color: var(--form-input-txt)
}

.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: 2.1333333333rem
}

.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,.third-party-login .user-password-info .icon-copy {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 3.2rem;
    transform: translate(-50%);
    border-radius: 1.0666666667rem;
    background: var(--mode-tips-bg);
    color: var(--mode-tips-txt);
    font-weight: 500;
    right: auto;
    box-shadow: 0 0 1.0666666667rem var(--pop-bg-shadow)
}

.third-party-login .pop-wrap.pop-success:before,.third-party-login .user-password-info .icon-copy:before {
    display: none
}

.third-party-login .pop-wrap.pop-success.show,.third-party-login .pop-wrap.pop-success.active,.third-party-login .user-password-info .icon-copy.show,.third-party-login .user-password-info .icon-copy.active {
    display: block;
    animation: tips-show .3s linear forwards
}

.third-party-login .pop-wrap.pop-success.hide,.third-party-login .user-password-info .icon-copy.hide {
    display: block;
    animation: tips-hide .2s linear forwards
}

.third-party-login .pop-wrap.pop-success {
    height: auto;
    width: auto
}

.third-party-login .register-success-wrap:before {
    display: none
}

@keyframes tips-show {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes tips-hide {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.third-party-login .input-group+.puzzle-verification-box {
    margin-top: 3.7333333333rem
}

.third-party-login .input-group input.active+.delete-btn {
    border: .32rem solid #2d3953;
    background: #2d3953
}

.third-party-login .input-group.login-tab {
    padding-bottom: 0
}

.third-party-login .input-group.error select {
    border: .32rem solid var(--color-danger)
}

.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.4666666667rem
}

.third-party-login .input-group.password .clear.hasbutton,.third-party-login .input-group.new-password .clear.hasbutton {
    right: 29.3333333333rem
}

.third-party-login .input-group.money label {
    position: absolute;
    z-index: 2;
    top: 6.4rem;
    left: 3.2rem;
    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.4rem;
    left: 3.2rem;
    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.6666666667rem;
    border-radius: 1.0666666667rem;
    background-color: #555;
    pointer-events: none
}

.third-party-login .input-group.upload-file input {
    opacity: 0
}

.third-party-login .input-group.date input:focus {
    padding: 0 3.2rem
}

.third-party-login .input-group .clear,.third-party-login .input-group .eyes {
    cursor: pointer;
    opacity: 1;
    transition: opacity .3s ease-in
}

.third-party-login .input-group .clear:hover,.third-party-login .input-group .eyes:hover {
    opacity: .7
}

.third-party-login .input-group .clear.active,.third-party-login .input-group .eyes.active {
    opacity: 1
}

.third-party-login .input-group .clear:focus,.third-party-login .input-group .eyes:focus {
    padding: 0
}

.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 var(--third-party-login-form-input-bg) inset;
    color: var(--third-party-login-form-input-txt);
    -webkit-text-fill-color: var(--third-party-login-form-input-txt)
}

.third-party-login .input-wrap {
    position: relative
}

.third-party-login .input-wrap .status {
    position: absolute;
    top: 50%!important;
    right: 0;
    flex-flow: row nowrap;
    padding: 0 3.2rem;
    transform: translateY(-50%);
    color: #40d0cb;
    font-size: 3.2rem;
    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: .5333333333rem;
    width: 3.4666666667rem;
    height: 3.4666666667rem;
    margin-right: 1.0666666667rem;
    background-color: #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.4666666667rem;
    height: 3.4666666667rem;
    margin-right: 1.0666666667rem;
    background-color: #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 .save-btn {
    color: #00b5ff;
    text-decoration: underline
}

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

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

.third-party-login .input-wrap .get-vcode-btn span {
    padding: .5333333333rem 1.6rem;
    border-radius: 1.0666666667rem;
    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: 12rem;
    padding: 0;
    transition: background .3s;
    border: .32rem solid var(--third-party-login-form-input-border);
    border-radius: 1.0666666667rem;
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 3.2rem
}

.third-party-login .phone-wrap.btn-disabled .btn-select {
    background: var(--form-input-bg-disabled);
    border: 0
}

.third-party-login .phone-wrap.btn-disabled .btn-select span {
    color: var(--form-input-txt-disabled)
}

.third-party-login .phone-wrap .clear {
    top: 0
}

.third-party-login .login-group {
    z-index: 3;
    display: flex;
    width: 100%;
    background: transparent
}

.third-party-login .login-group label {
    display: grid;
    align-items: center;
    margin: 0;
    width: 100%;
    height: 13.3333333333rem;
    color: var(--third-party-login-tab-txt);
    text-align: center
}

.third-party-login .login-group label:hover {
    opacity: 1
}

.third-party-login .login-group label.active {
    transition: all .3s;
    color: var(--tab-line-txt-active)
}

.third-party-login .login-group label.active:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 4.2666666667rem;
    height: .5333333333rem;
    border-radius: 1.0666666667rem;
    margin: 0 auto;
    animation: scale-in-center .3s ease-in-out both;
    background: var(--tab-line-underline)
}

.third-party-login .password-condition p {
    padding: 2.6666666667rem 1.0666666667rem 0;
    color: var(--third-party-register-form-tips-txt);
    text-align: left;
    letter-spacing: .1333333333rem
}

.third-party-login .password-condition p span {
    color: var(--third-party-register-form-tips-txt);
    line-height: 1.2
}

.third-party-login .password-condition p span.active {
    color: var(--third-party-register-form-tips-highlight)
}

.third-party-login .delete-btn {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    transition: all .3s;
    background: #ffd259;
    mask-image: url(/assets/images/icon-set/icon-cross-type10.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 30%;
    -webkit-mask-image: url(/assets/images/icon-set/icon-cross-type10.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%
}

.third-party-login .another-login-block {
    margin: 6.4rem 0;
    font-size: 3.7333333333rem;
    text-align: center
}

.third-party-login .another-login-block .title {
    font-size: 3.7333333333rem;
    color: var(--third-party-login-txt);
    text-align: center;
    text-decoration: none;
    padding: 1.0666666667rem 3.2rem 2.1333333333rem
}

.third-party-login .another-login-block .another-login-icon {
    display: block;
    text-align: center
}

.third-party-login .another-login-block .another-login-icon a {
    display: inline-block;
    width: 8rem;
    height: 8rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.third-party-login .another-login-block .another-login-icon a+a {
    margin-left: 6.4rem
}

.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: #fff;
    background-size: 70%;
    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: var(--third-party-login-biometric-btn)
}

.third-party-login .another-login-block .another-login-icon .btn-biometric a {
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    background: var(--third-party-login-biometric-btn-txt);
    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: var(--third-party-login-txt)
}

.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: 40rem;
    height: .2666666667rem;
    font-size: 6.9333333333rem;
    color: #6f7784;
    border-top: .2666666667rem solid var(--third-party-login-txt)
}

.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 .another-login-block.verification {
    position: absolute;
    width: calc(100% - 3.2rem);
    padding: 0 3.2rem;
    bottom: 0;
    left: 0
}

.third-party-login .another-login-block.verification a {
    display: block;
    color: var(--third-party-verification-code-link);
    margin-top: 3.2rem;
    text-decoration: none
}

.third-party-login .verify-tips.tips-info-toggle ul,.third-party-login .verify-tips.tips-info-toggle ol {
    padding-left: 0;
    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.2rem;
    padding: 1.0666666667rem 2.6666666667rem
}

.third-party-login .verify-tips.tips-info-toggle ol>li:last-child {
    margin-bottom: 0
}

.third-party-login .verify-tips.tips-info-toggle ol {
    padding-top: 10px;
    border-top: .2666666667rem solid var(--third-party-personal-tips-info-border-top)
}

.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.2rem;
    font-size: 3.7333333333rem;
    font-weight: 400
}

.third-party-login .verify-tips.tips-info-toggle label:before {
    display: none
}

.third-party-login .verify-tips.tips-info-toggle p {
    display: block
}

.third-party-login .verify-tips.tips-info-toggle h5 {
    margin-bottom: 0;
    align-items: flex-start
}

.third-party-login .verify-tips.tips-info-toggle h5:before {
    display: none
}

.third-party-login .verify-tips.tips-info-toggle h5 .tips-icon {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background-color: var(--third-party-personal-tips-info-icon);
    margin: .8rem 2.1333333333rem 0 0
}

.third-party-login .verify-tips.tips-info-toggle h5 span {
    color: var(--third-party-personal-tips-info-txt);
    font-size: 3.7333333333rem;
    line-height: 1.2
}

.third-party-login .verify-tips.tips-info-toggle h5 span i {
    color: var(--third-party-personal-tips-info-txt-i);
    font-weight: 400
}

.third-party-login .verify-tips.tips-info-toggle .tips-info-block {
    display: none;
    transition: .5s
}

.third-party-login .verify-tips.tips-info-toggle .tips-info-block.active {
    display: block;
    transition: .5s
}

.third-party-login .verify-tips.tips-info-toggle .title-box {
    padding: 1.0666666667rem 2.1333333333rem 3.2rem
}

.third-party-login .verify-tips.tips-info-toggle .toggle-btn {
    width: 3.2rem;
    height: 3.2rem;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    background-color: var(--third-party-personal-tips-info-toggle-btn);
    transition: .3s;
    transform: rotate(90deg);
    margin-left: 2.1333333333rem
}

.third-party-login .verify-tips.tips-info-toggle .toggle-btn.active {
    transform: rotate(270deg)
}

.third-party-login .info-supporting label {
    color: #d8a845
}

.third-party-login .info-supporting label:before {
    display: none
}

.third-party-login .info-supporting li {
    border: 0;
    color: #d8a845;
    background: #d8a84526
}

.third-party-login .list-group {
    display: flex;
    justify-content: space-between;
    color: #aeb8cc;
    font-size: 4.2666666667rem
}

.third-party-login .list-group+.list-group {
    margin-top: 3.2rem;
    padding-top: 3.2rem;
    border-top: .2666666667rem solid var(--third-party-personal-item-icon-color-border)
}

.third-party-login .list-group .icon-block {
    display: block;
    height: 100%;
    margin-top: 2.1333333333rem
}

.third-party-login .list-group .item-icon {
    display: table-cell;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    margin-right: 5.3333333333rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: var(--third-party-personal-item-icon-color)
}

.third-party-login .list-group .item-icon.social {
    background-color: unset
}

.third-party-login .list-group .item-icon+.info-block {
    margin-left: 5.3333333333rem
}

.third-party-login .list-group .list {
    display: table-cell;
    width: calc(100% - 9.6rem)
}

.third-party-login .list-group .button {
    font-size: 3.7333333333rem;
    color: var(--third-party-login-btn-main-txt);
    width: 26.6666666667rem;
    height: 8rem;
    border-radius: 1.0666666667rem;
    background: var(--third-party-login-btn-main-bg);
    border: 0;
    margin: 0
}

.third-party-login .list-info {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.third-party-login .list-info+.list-info {
    margin-top: 2.6666666667rem;
    transition: .5s;
    animation: zoomIn .5s forwards
}

.third-party-login .list-info .left .title {
    color: var(--third-party-personal-item-title);
    font-size: 4.2666666667rem
}

.third-party-login .list-info .left .info-block div {
    align-items: center
}

.third-party-login .list-info .left .tag {
    position: relative;
    top: -.5333333333rem;
    color: var(--third-party-personal-item-tag-txt);
    font-size: 3.2rem;
    background-color: var(--third-party-personal-item-tag-bg);
    padding: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    margin-left: 1.0666666667rem
}

.third-party-login .list-info .left .tips {
    color: var(--third-party-personal-item-tag-tips);
    font-size: 3.7333333333rem
}

.third-party-login .list-info .right .status {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: var(--third-party-personal-item-status-bg);
    border: .32rem solid var(--third-party-personal-item-status-border);
    font-size: 3.7333333333rem;
    width: 21.3333333333rem;
    height: 8rem;
    border-radius: 1.0666666667rem;
    line-height: 1;
    margin: 0;
    color: var(--third-party-personal-item-status-txt)
}

.third-party-login .list-info .right .status.unconfirm-btn {
    color: var(--third-party-personal-item-status-error-txt);
    text-decoration: unset;
    border: .32rem solid var(--third-party-personal-item-status-error-border);
    background-color: var(--color-danger)
}

.third-party-login .currency-code-list {
    display: grid;
    grid-template-columns: 100%;
    justify-content: start;
    padding: 0 1.0666666667rem;
    text-align: left
}

.third-party-login .currency-code-list li {
    display: flex;
    align-items: center
}

.third-party-login .currency-code-list,.third-party-login .social-code-list,.third-party-login .btn-select {
    background: var(--third-party-register-form-select-item-bg)
}

.third-party-login .currency-code-list span,.third-party-login .social-code-list span,.third-party-login .btn-select span {
    color: var(--third-party-login-form-input-txt)
}

.third-party-login .btn-select:after {
    border-color: var(--third-party-register-form-select-triangle) transparent transparent;
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 2.6666666667rem;
    border-width: 1.0666666667rem;
    border-style: solid
}

.third-party-login .member-error {
    color: var(--color-danger)
}

.third-party-login .member-error:before {
    content: "!";
    display: inline-block;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: var(--third-party-bg-default);
    font-size: 3.7333333333rem;
    font-weight: 700;
    line-height: 4.2666666667rem;
    text-align: center;
    vertical-align: text-top
}

.third-party-login .login-register-btn-wrap {
    padding: 3.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1.0666666667rem
}

.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 {
    background: var(--quick-register-entry-btn-bg);
    color: var(--quick-register-entry-btn-name);
    border: .32rem solid var(--quick-register-entry-btn-border);
    padding: 3.2rem 0;
    width: 100%;
    border-radius: 1.0666666667rem
}

.third-party-login .login-register-btn-wrap .login-register-icon {
    width: 8rem;
    height: 8rem;
    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: var(--quick-register-entry-btn-icon)
}

.third-party-login .login-register-btn-wrap .login-register-type-name {
    padding-top: 2.1333333333rem;
    color: var(--quick-register-entry-btn-name);
    font-size: 3.2rem;
    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;
    background: var(--quick-register-entry-btn-active-bg)
}

.third-party-login .login-register-btn-wrap .active .login-register-icon {
    background-color: var(--quick-register-entry-btn-icon-active)
}

.third-party-login .login-register-btn-wrap .active .login-register-type-name {
    color: var(--quick-register-entry-btn-txt-active)
}

.third-party-login .register-entry .banner-v1 {
    height: auto
}

.third-party-login .register-entry .banner:before {
    background: transparent
}

.third-party-login .register-entry .invitation-code {
    margin: 2.6666666667rem 0;
    padding: 2.1333333333rem 2.9333333333rem;
    border-radius: 1.0666666667rem;
    border: .32rem solid var(--quick-register-entry-invitation-code-border);
    background-color: var(--quick-register-entry-invitation-code-bg)
}

.third-party-login .register-entry .invitation-code p,.third-party-login .register-entry .invitation-code span {
    color: var(--third-party-input-default);
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0px
}

.third-party-login #turnstile-container {
    text-align: center;
    margin: 3.2rem 0
}

.third-party-login #turnstile-container iframe {
    width: 100%!important
}

.third-party-login .number-code-captcha {
    display: flex;
    position: absolute;
    top: 8.8rem;
    right: 12rem;
    justify-content: flex-end;
    height: 6.6666666667rem
}

.third-party-login .number-code-captcha canvas {
    height: 8rem!important
}

@keyframes scale-in-center {
    0% {
        transform: scale(0) translate(-50%);
        opacity: 1
    }

    to {
        transform: scale(1) translate(-50%);
        opacity: 1
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1.5turn)
    }
}

@keyframes popOpacity {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.mcd-style.new-register-success-page .banner .banner-v1,.mcd-style .register-entry .banner .banner-v1,.mcd-style .new-register-success-page .banner .banner-v1 {
    height: auto!important
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap .item .item-pic,.mcd-style .register-entry .banner .banner-v1 .carousel-wrap .item .item-pic,.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 100%;
    background-size: cover
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap .item-drag,.mcd-style .register-entry .banner .banner-v1 .carousel-wrap .item-drag,.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap .item-drag {
    height: auto;
    padding-top: 33%
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner,.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.single-banner,.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner {
    height: 45.0666666667rem
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner .item-drag,.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.single-banner .item-drag,.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.single-banner .item-drag {
    padding-top: 46%
}

.mcd-style.new-register-success-page .banner .banner-v1 .carousel-wrap.siblings .item,.mcd-style .register-entry .banner .banner-v1 .carousel-wrap.siblings .item,.mcd-style .new-register-success-page .banner .banner-v1 .carousel-wrap.siblings .item {
    height: 100%
}

.mcd-style.new-register-success-page .dot-group,.mcd-style .register-entry .dot-group,.mcd-style .new-register-success-page .dot-group,.top-banner-wrapper {
    position: relative
}

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

.top-banner-wrapper .carousel-wrap .dot-group {
    bottom: -5.3333333333rem
}

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

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

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

.top-banner-wrapper .carousel-wrap .pagination__bullet {
    background: var(--pagination-bullet-bg)
}

.top-banner-wrapper .carousel-wrap .pagination__bullet--active {
    background-color: var(--pagination-bullet-bg-active)
}

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

.banner .carousel-wrap .item .item-pic {
    height: 42.6666666667rem
}

.verified-success-wrap {
    text-align: center;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    padding: 3.2rem;
    margin: 3.2rem;
    background: var(--pop-register-success-bg);
    border-radius: 1.0666666667rem;
    z-index: 129
}

.verified-success-close {
    position: absolute;
    right: 2.6666666667rem;
    top: 2.6666666667rem;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    cursor: pointer
}

.verified-success-close:before,.verified-success-close:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: .5333333333rem;
    background-color: var(--pop-verify-add-success-close-icon);
    border-radius: 10rem
}

.verified-success-close:before {
    transform: translate(-50%,-50%) rotate(45deg)
}

.verified-success-close:after {
    transform: translate(-50%,-50%) rotate(-45deg)
}

.verified-success-cont .top-inner h4,.verified-success-cont .top-inner h3 {
    font-family: var(--custom-font),var(--custom-serif);
    line-height: 1.2;
    font-size: 4.2666666667rem
}

.verified-success-cont .top-inner h3 {
    color: var(--third-party-register-success-subtitle);
    font-weight: 700
}

.verified-success-cont .top-inner h3+h4 {
    margin: 4.2666666667rem 0 0
}

.verified-success-cont .top-inner h4 {
    color: var(--third-party-register-success-subtitle);
    font-size: 3.7333333333rem
}

.verified-success-cont .top-inner p {
    margin-top: 4.2666666667rem;
    color: var(--third-party-register-success-txt);
    font-size: 3.2rem
}

.third-party-login .verified-success-wrap .button {
    width: 100%
}

.content .aboutus-wrap {
    min-height: 100vh
}

.aboutus-body {
    position: relative;
    flex: 1;
    margin: 2.1333333333rem 2.1333333333rem 13.8666666667rem
}

.article-content {
    width: auto;
    padding: 2.1333333333rem;
    background: var(--about-us-bg)
}

.article-content-title {
    margin-bottom: 3.2rem;
    color: var(--about-us-table-title);
    font-size: 4.2666666667rem;
    font-weight: 700;
    letter-spacing: .2666666667rem;
    line-height: normal
}

.article-detail {
    line-height: normal
}

.article-detail-tile {
    color: var(--about-us-title);
    font-weight: 700
}

.article-detail-tile .link {
    color: var(--about-us-mail-link)
}

.article-detail-sub-tile {
    color: var(--about-us-table-title-txt);
    font-size: 3.4666666667rem;
    font-style: italic;
    font-weight: 700
}

.article-detail-content .text {
    width: inherit;
    margin-bottom: 3.2rem;
    color: var(--about-us-table-title-txt);
    font-size: 3.4666666667rem;
    line-height: normal
}

.article-detail-content .list-number,.article-detail-content .list-number-suffix-parentheses,.article-detail-content .list-lower-alpha,.article-detail-content .list-dot {
    width: inherit;
    margin-bottom: 3.2rem;
    margin-left: 4.2666666667rem;
    color: var(--about-us-table-title-txt);
    font-size: 3.4666666667rem;
    line-height: normal
}

.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 {
    display: list-item;
    padding-bottom: 1.0666666667rem;
    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-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.0666666667rem
}

.article-detail-content .list-nowrap>li {
    flex-wrap: nowrap
}

.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 .point {
    display: block;
    margin-left: 3.2rem
}

.article-detail-content .point:before {
    content: "\25b8";
    display: block;
    margin-right: 2.1333333333rem;
    margin-left: -3.2rem;
    color: var(--primary)
}

.article-detail-content .point-list>li {
    display: block;
    width: 100%
}

.article-detail-content .link {
    display: block;
    color: var(--about-us-mail-link)
}

.article-detail .table {
    margin-bottom: 6.4rem;
    border-collapse: separate;
    border: .32rem solid var(--about-us-table-title-border);
    border-radius: 1.0666666667rem;
    background-color: var(--about-us-table-bg);
    font-size: 3.4666666667rem;
    line-height: 1.4
}

.article-detail .table-title {
    padding: 0 3.2rem;
    border-bottom: 0;
    background-color: var(--about-us-table-title-bg);
    color: var(--about-us-table-title);
    text-align: center;
    vertical-align: middle
}

.article-detail .table-title:first-child {
    border-radius: 1.0666666667rem 0 0
}

.article-detail .table-title:last-child {
    border-radius: 0 1.0666666667rem 0 0
}

.article-detail .table td {
    padding: 2.1333333333rem;
    border-top: .32rem solid var(--about-us-table-title-border);
    color: var(--color-text)
}

.article-detail .txt-center {
    text-align: center
}

.iplimit-card-wrap {
    display: block;
    height: auto;
    border-radius: 1.0666666667rem;
    box-shadow: 0 .8rem 1.0666666667rem color-mix(in srgb,var(--offset-shadow),transparent 90%);
    font-size: 0;
    word-wrap: break-word;
    word-break: break-all
}

.iplimit-card-wrap .top-inner,.iplimit-card-wrap .bottom-inner {
    font-size: 4.2666666667rem;
    line-height: 1.5
}

.iplimit-card-wrap .top-inner h3 {
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 12.8rem;
    font-weight: 700;
    line-height: normal
}

.iplimit-card-wrap .top-inner h4 {
    margin-bottom: 8rem;
    font-size: 4.8rem
}

.games-empty-container {
    display: inline-block;
    position: relative;
    width: calc(100% - 6.4rem);
    margin: 0 3.2rem 6.4rem;
    padding: 3.2rem;
    background: var(--games-empty-bg);
    text-align: center;
    vertical-align: middle
}

.games-empty-container .bottom-inner {
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.games-empty-container .top-inner {
    width: 100%;
    margin: auto;
    text-align: center
}

.games-empty-container .top-inner h3 {
    display: inline-block;
    color: var(--games-empty-title);
    font-size: 18.1333333333rem;
    vertical-align: middle
}

.games-empty-container .top-inner h4 {
    color: var(--games-empty-txt);
    line-height: 1.8;
    margin-bottom: 6.4rem
}

.content-full-height {
    text-align: center
}

.games {
    position: relative;
    width: 100%;
    height: auto
}

.games .jackpot {
    position: relative;
    height: 24rem;
    margin: 2.1333333333rem auto;
    background-position: center;
    background-size: cover;
    width: calc(100% - 3.2rem);
    border-radius: 1.0666666667rem
}

.games .jackpot .text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: center
}

.games .jackpot h2 {
    margin-bottom: 1.0666666667rem;
    color: var(--slot-jackpot-total);
    font-size: 4rem;
    text-shadow: 0 0 2.1333333333rem rgba(0,0,0,.5)
}

.games .jackpot span {
    display: block;
    color: var(--slot-jackpot-amount);
    font-size: 7.4666666667rem;
    font-weight: 700;
    text-shadow: 0 0 2.1333333333rem rgba(0,0,0,.5)
}

.games .row-reverse {
    display: flex;
    flex-direction: column-reverse
}

.games .games-main {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2.1333333333rem;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 3.2rem
}

.games .games-box {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1.0666666667rem
}

.games .games-box .text {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2.1333333333rem;
    background-color: var(--slot-card-bg)
}

.games .games-box .text h3 {
    width: 83%;
    overflow: hidden;
    color: var(--slot-card-title);
    font-size: 4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3
}

.games .games-box .text p {
    width: 83%;
    color: var(--slot-card-txt);
    font-size: 3.4666666667rem
}

.games .games-box .text span {
    display: inline-block;
    color: var(--slot-card-number);
    font-weight: 700;
    vertical-align: middle
}

.games .games-box .like {
    position: absolute;
    top: 50%;
    right: 2.6666666667rem;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    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.6666666667rem;
    left: 2.6666666667rem;
    padding: 0 1.0666666667rem;
    border-radius: 1.0666666667rem;
    background-color: var(--slot-tag-new-bg);
    color: var(--slot-tag-new-txt);
    font-size: 3.2rem;
    line-height: 4.8rem;
    text-align: center;
    text-shadow: 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--text-shadow),transparent 80%)
}

.games .pic {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0
}

.games .pic img {
    width: 100%;
    height: 32rem
}

.games .prompt {
    width: 100%;
    padding: 3.2rem 0;
    font-size: 3.4666666667rem;
    text-align: center
}

.games .jackpot-banner-wrapper {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    transform: translateY(56px);
    padding: 2.6666666667rem
}

.games .jackpot-banner-wrapper .jackpot-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1.0666666667rem
}

.games.jackpot .search-top-block:not(.active-move-up) {
    padding-bottom: 176px;
    pointer-events: none
}

.games.jackpot .search-top-block:not(.active-move-up) .search-top-info {
    pointer-events: auto
}

.games.loading mcd-waterfall-scroll {
    display: block;
    min-height: 100vh
}

.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: 71%;
    left: 50%;
    color: #ffe77d;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.center-peak-major {
    top: 76%;
    left: 80%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.center-peak-mini {
    top: 76%;
    left: 20%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.twin-base-grand {
    top: 45%;
    left: 37%;
    color: #ffe77d;
    font-size: 5.8666666667rem
}

.games .game-jackpot-number-group p.twin-base-major {
    top: 77%;
    left: 51%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.twin-base-mini {
    top: 77%;
    left: 22%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.wide-to-narrow-grand {
    top: 27%;
    left: 34%;
    color: #ffe77d;
    font-size: 3.7333333333rem
}

.games .game-jackpot-number-group p.wide-to-narrow-major {
    top: 53%;
    left: 34%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.wide-to-narrow-mini {
    top: 78%;
    left: 34%;
    font-size: 3.2rem
}

.games .game-jackpot-number-group p.left-aligned-grand {
    top: 57%;
    left: 34%;
    font-size: 5.3333333333rem
}

.games .game-jackpot-number-group p.center-aligned-grand {
    top: 65%;
    left: 50%;
    font-size: 6.9333333333rem
}

.games .game-jackpot-number-group p.right-aligned-grand {
    top: 55%;
    left: 66%;
    font-size: 5.3333333333rem
}

.games-main.main-vertical {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(29.3333333333rem,1fr));
    grid-gap: 1.0666666667rem;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 2.4rem
}

.games-main.main-vertical .games-box {
    position: relative;
    margin: 0 auto;
    overflow: visible!important;
    cursor: pointer
}

.games-main.main-vertical .games-box .text {
    display: none
}

.games-main.main-vertical .games-box .pic a {
    display: block;
    position: relative;
    border-radius: 1.0666666667rem;
    overflow: hidden
}

.games-main.main-vertical .games-box .pic a:before {
    content: "";
    display: block;
    padding-bottom: 132.8%
}

.games-main.main-vertical .games-box .pic a:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}

.games-main.main-vertical .games-box .pic a .image-label {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2
}

.games-main.main-vertical .games-box .pic a .image-label__img {
    position: absolute;
    right: 0;
    left: auto;
    width: 13.3333333333rem;
    height: 13.3333333333rem
}

.games-main.main-vertical .games-box .pic a img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: fill
}

.games-main.main-vertical .games-box .pic a .default-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.games-main.main-vertical .games-box .like {
    position: absolute;
    top: 0;
    right: auto;
    width: 8rem;
    height: 8rem;
    transform: translateY(0) rotate(0);
    transition: all .3s ease-in;
    z-index: 3
}

.games-main.main-vertical .games-box .like img {
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 3;
    width: 5.3333333333rem;
    opacity: 0;
    animation: fadeIn .5s forwards
}

.games-main.main-vertical .default-image,.games-main.main-vertical .image {
    font-family: "aBigDeal",var(--custom-font);
    color: #fff
}

.games-main.main-vertical .default-image__title,.games-main.main-vertical .image__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9.6rem;
    margin: 0 auto;
    text-align: center;
    padding: 0 2.6666666667rem;
    font-size: 3.4666666667rem;
    z-index: 2;
    line-height: 3.7333333333rem;
    letter-spacing: .2666666667rem;
    overflow: hidden;
    text-overflow: ellipsis
}

.games-main.main-vertical .default-image .game-group,.games-main.main-vertical .image .game-group {
    position: absolute;
    bottom: 3.2rem;
    left: 50%;
    transform: translate(-50%);
    font-size: 2.1333333333rem;
    line-height: 2.1333333333rem;
    letter-spacing: .8rem;
    z-index: 2
}

.games-main.main-vertical .default-image img.games-main.main-vertical .default-image,.games-main.main-vertical .default-image .games-main.main-vertical .image__img,.games-main.main-vertical .image img.games-main.main-vertical .default-image,.games-main.main-vertical .image .games-main.main-vertical .image__img {
    width: 100%;
    height: 100%
}

.launch-game-content {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: transparent;
    transition: background .3s
}

.launch-game-content.active {
    background: #000
}

.launch-game-loading {
    display: none;
    position: fixed;
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 53.3333333333rem;
    pointer-events: none
}

.launch-game-loading.select-logo .center-logo-bg,.launch-game-loading.select-slot .center-logo-bg,.launch-game-loading.select-bn2 .center-logo-bg {
    background-color: var(--launch-bg);
    background-image: var(--launch-linear-bg)
}

.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: var(--launch-bg);
    background-image: var(--launch-linear-bg)
}

.launch-game-loading.select-mini-game-logo .center-logo-bg .center-logo {
    object-position: 0%
}

.launch-game-loading .center-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14.6666666667rem;
    height: 14.6666666667rem;
    padding: 1.0666666667rem;
    overflow: hidden;
    transform: translate(-50%,-50%);
    border-radius: 100%;
    background-image: var(--launch-linear-bg);
    box-shadow: .5333333333rem 2.1333333333rem 3.7333333333rem #0003,0 .5333333333rem 1.0666666667rem #000,0 .2666666667rem 8rem #7f7f7f,inset 0 .5333333333rem 1.0666666667rem #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 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    transform: translate(-50%,-50%);
    opacity: 0
}

.launch-game-loading .loading-bg {
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-image: linear-gradient(180deg,transparent 0%,#000000 100%)
}

.launch-game-loading svg {
    max-width: 100%;
    max-height: 100%;
    transform: rotate(-90deg)
}

.launch-game-loading .circle {
    animation-name: circle-loader;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    stroke-dashoffset: 2000;
    stroke-dasharray: 1680,1650;
    animation-fill-mode: backwards
}

.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: var(--lanuch-stop-color)
}

.launch-game-loading #loading-bar-color .loading-end-color {
    stop-color: var(--lanuch-end-color)
}

@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;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    pointer-events: all
}

.site-top .menu-bg {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%,-50%);
    opacity: 0;
    background: var(--launch-game-header-bg)
}

.site-top .menu-bg .highlight {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -2px 2.5px 0 var(--launch-menu-highlight-shadow-color01),inset 0 1px 3px 0 var(--launch-menu-highlight-shadow-color02)
}

.site-top .site-menu {
    display: flex;
    position: relative;
    z-index: 2;
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%);
    transform-origin: center
}

.site-top .site-menu .f-logo-bg {
    position: relative;
    width: 5.3333333333rem;
    height: 100%;
    margin: 0 3.2rem;
    border-radius: 50%;
    opacity: 0;
    background-image: var(--launch-btn-bg);
    background-size: 100%
}

.site-top .site-menu .f-logo-bg .f-logo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 80%
}

.site-top .site-menu .f-logo-bg .light-ring {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 8.2666666667rem;
    height: 8.2666666667rem;
    opacity: .6;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    pointer-events: none;
    mix-blend-mode: overlay
}

.site-top .site-menu .info-wrap {
    position: relative;
    opacity: 0;
    width: 69.3333333333rem;
    height: 100%;
    padding-left: 4.8rem;
    transform: skew(-10deg);
    border-left: .5333333333rem solid var(--launch-info-border-left);
    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: var(--launch-info-title);
    font-size: 10px
}

.site-top .site-menu .info-wrap .info-block .info-value {
    color: var(--launch-info-value);
    font-size: 12px
}

.site-top .site-menu .info-wrap .info-block .info-value-sub {
    color: var(--launch-info-value);
    padding-left: .8rem;
    opacity: 25%
}

.site-top .site-menu .btn {
    position: relative;
    width: 50px;
    height: 50px;
    opacity: 0;
    background: var(--launch-home-btn-bg)
}

.site-top .site-menu .btn .btn-home {
    width: 100%;
    height: 100%;
    background: var(--launch-home-btn-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 70%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70%
}

.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-color: var(--launch-home-btn-icon-color);
    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: var(--launch-game-icon-color);
    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: 5.3333333333rem;
    height: 5.3333333333rem;
    opacity: .6;
    background-repeat: no-repeat;
    background-position: top center;
    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: 26.6666666667rem;
    height: 100%;
    margin: 0 3.2rem;
    border-radius: 0;
    opacity: 0;
    background-image: var(--launch-nodeposit-btn-bg);
    background-size: 100%;
    padding: 1px 0
}

.site-top .site-menu.no-deposit .f-logo-bg .light-ring {
    display: none
}

.site-top .site-menu.no-deposit .f-logo-bg .logo-image {
    filter: drop-shadow(0 .5333333333rem 1.0666666667rem var(--launch-game-logo-shadow))
}

.site-top .site-menu.no-deposit .btn:nth-child(4) {
    display: none
}

.site-top .top-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%)
}

.site-top .top-bg.gradient {
    background-image: var(--lanuch-site-bg)
}

.launch-game-page {
    display: none;
    pointer-events: auto
}

.launch-game-wrap {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100% - 50px);
    transform: translateY(6%);
    opacity: 0;
    background-color: #000
}

.launch-game-wrap.show {
    transform: translate(0);
    opacity: 1
}

.launch-game-wrap .launch-game-iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0
}

.site-bg {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-image: linear-gradient(180deg,#333 10%,#ff840380);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.site-bg .effect {
    mix-blend-mode: overlay
}

.site-bg #Gradient .start-color {
    stop-color: #ffffff4d
}

.site-bg #Gradient .end-color {
    stop-color: #fff0
}

@media screen and (min-aspect-ratio: 16/9) {
    .site-top .site-menu.no-deposit .f-logo-bg {
        height:3.748125937vmax;
        width: 14.9925037481vmax
    }
}

.promotion {
    width: 100%;
    height: auto
}

.promotion .promotion-main {
    padding: 0 3.2rem
}

.promotion .prompt {
    margin: 3.2rem 0;
    font-size: 3.4666666667rem;
    text-align: center
}

.promotion .search-tab ul li.active:after {
    content: "";
    position: absolute;
    left: -.32rem;
    bottom: 0;
    width: calc(100% + .64rem);
    height: .5333333333rem;
    border-radius: .5333333333rem;
    z-index: 1;
    background: var(--promotion-tab-underline-active)
}

.content-style h1 {
    font-size: 8.5333333333rem;
    font-weight: 700
}

.content-style h2 {
    font-size: 6.4rem;
    font-weight: 700
}

.content-style h3 {
    margin-bottom: 1.0666666667rem;
    overflow: hidden;
    color: var(--promotion-card-title);
    font-size: 4.2666666667rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-style h4 {
    margin-bottom: 2.1333333333rem;
    font-size: 3.7333333333rem;
    font-weight: 700
}

.content-style p {
    min-height: 6.6666666667rem;
    margin: 1.0666666667rem 0;
    font-size: 3.7333333333rem;
    line-height: 1.5;
    word-wrap: break-word
}

.content-style strong {
    font-weight: 700
}

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

.content-style ol,.content-style ul {
    margin: 2.6666666667rem 0
}

.content-style ol li,.content-style ul li {
    margin: 0 0 1.0666666667rem;
    font-size: 3.4666666667rem;
    line-height: 5.3333333333rem
}

.content-style ol a,.content-style ul a {
    color: var(--footer-link)
}

.content-style ol li {
    margin: 0 0 1.0666666667rem 4rem;
    list-style-type: decimal;
    text-indent: 0
}

.content-style .table {
    width: 100%;
    margin-bottom: 4rem;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 1.0666666667rem;
    text-align: left;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.content-style table tbody {
    border-radius: 1.0666666667rem
}

.content-style table th,.content-style table td {
    width: 20%;
    padding: 2.1333333333rem 3.2rem;
    border: .32rem solid var(--pop-promotion-table-content-border);
    font-size: 3.4666666667rem;
    line-height: 4.2666666667rem;
    text-align: left
}

.content-style table td {
    background: var(--pop-promotion-table-content-bg);
    color: var(--pop-promotion-table-content-txt)
}

.content-style table th {
    background: var(--pop-promotion-table-content-title-bg);
    color: var(--pop-promotion-table-content-title-txt)
}

.content-style .times {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--pop-bonuswallet-txt);
    font-size: 3.4666666667rem
}

.content-style .times i {
    display: inline-block;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 1.0666666667rem;
    background-color: var(--promotion-clock-icon-color);
    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%
}

.content-style .times span {
    text-align: center
}

.content-style .form-wrap {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin: 0 0 2.6666666667rem;
    overflow-x: scroll;
    border-radius: 1.0666666667rem;
    background: var(--pop-turnover-table-bg);
    -webkit-overflow-scrolling: touch
}

.content-style .form-wrap .arrow {
    position: absolute;
    top: 50%;
    right: .5333333333rem;
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    animation: table-arrow .5s infinite alternate;
    background: var(--pop-turnover-arrow-icon-color);
    mask-repeat: no-repeat;
    mask-position: 50%;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 50%;
    -webkit-mask-size: 50%
}

.content-style .form-wrap .form-wrap-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border-right: .32rem solid var(--pop-turnover-table-border)
}

.content-style .form-wrap .form-wrap-col div {
    display: flex;
    width: -webkit-fill-available;
    padding: 2.6666666667rem 2.1333333333rem;
    color: var(--pop-turnover-table-txt);
    font-size: 3.4666666667rem;
    white-space: nowrap;
    border-top: .32rem solid var(--pop-turnover-table-border)
}

.content-style .game-platform ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 2.6666666667rem
}

.content-style .game-platform li {
    flex: 0 0 23%;
    margin-right: 2%;
    font-weight: 500
}

.content-style .game-platform img {
    width: 100%;
    height: auto
}

.content-style .button {
    width: 100%;
    height: 9.6rem;
    margin-top: 3.2rem;
    font-size: 3.7333333333rem;
    line-height: 9.6rem
}

.content-style .button .toggle {
    display: inline-block;
    position: relative;
    width: 4rem;
    height: 4rem;
    margin-right: .8rem;
    transition: all .3s;
    border-radius: 4rem;
    background-color: #fff;
    vertical-align: middle
}

.content-style .button .toggle:before,.content-style .button .toggle:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.1333333333rem;
    height: .32rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    background-color: var(--primary)
}

.content-style .button .toggle:after {
    width: .32rem;
    height: 2.1333333333rem
}

.content-style .button-box .button {
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    color: var(--btn-status-txt);
    overflow: hidden
}

.content-style .button-box .button+.button {
    margin-left: 2.6666666667rem
}

.content-style .button-box .button__attend {
    background: var(--btn-attend-bg)
}

.content-style .button-box .button__request {
    background: var(--btn-request-bg);
    color: var(--btn-request-status-txt)
}

.content-style .button-box .button__joined {
    background: var(--btn-joined-bg);
    color: var(--btn-joined-status-txt)
}

.content-style .button-box .button__apply {
    background: var(--btn-apply-bg);
    color: var(--btn-apply-status-txt)
}

.content-style .button-box .button__detail {
    background: var(--btn-detail-bg);
    color: var(--btn-detail-status-txt)
}

.content-style .button-box .button__deposit {
    background: var(--btn-deposit-bg);
    color: var(--btn-deposit-status-txt)
}

.promotion-toggle {
    height: auto
}

.promotion-toggle.active .text-main {
    max-height: 800rem
}

.promotion-toggle.active .text-main h3,.promotion-toggle.active .text-main p {
    overflow: auto;
    text-overflow: inherit;
    white-space: normal
}

.promotion-toggle.active .button .toggle {
    transform: rotate(225deg)
}

.promotion-box {
    position: relative;
    width: 100%;
    margin-bottom: 2.1333333333rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background: var(--promotion-bg);
    color: var(--promotion-card-txt);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.promotion-box__tag {
    display: block;
    position: absolute;
    z-index: 2;
    top: 2.6666666667rem;
    left: 0;
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    padding: 0 2.1333333333rem;
    font-size: 3.2rem;
    line-height: 4.8rem;
    text-align: center;
    text-shadow: 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--text-shadow),transparent 80%)
}

.promotion-box__tag:before,.promotion-box__tag:after {
    content: "";
    position: absolute;
    left: 0;
    width: 1.0666666667rem;
    height: 1.0666666667rem
}

.promotion-box__tag:before {
    top: -1.0666666667rem
}

.promotion-box__tag:after {
    display: none
}

html.is-mobile .promotion-box__tag:after {
    display: block;
    bottom: -1.0666666667rem;
    transform: rotateX(180deg)
}

.promotion-box .tag--free {
    background-color: var(--promotion-tag-free-bg);
    color: var(--promotion-tag-free-txt)
}

.promotion-box .tag--free:before,.promotion-box .tag--free:after {
    background: radial-gradient(circle at right top,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 71%,var(--promotion-tag-free-bg) 0%)
}

.promotion-box .tag--bonus {
    background-color: var(--promotion-tag-bonus-bg);
    color: var(--promotion-tag-bonus-txt)
}

.promotion-box .tag--bonus:before,.promotion-box .tag--bonus:after {
    background: radial-gradient(circle at right top,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 71%,var(--promotion-tag-bonus-bg) 0%)
}

.promotion-box .pic {
    position: relative;
    width: 100%;
    height: 31.4666666667rem;
    background-color: #ddd;
    animation: fadeIn .5s
}

.promotion-box .pic img {
    display: block;
    width: 100%;
    height: 100%
}

.promotion-box .cutoff {
    position: absolute;
    right: 2.1333333333rem;
    bottom: 2.1333333333rem;
    width: auto;
    height: 6.6666666667rem;
    padding: 0 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--promotion-info-bg);
    color: var(--promotion-info-txt);
    font-size: 3.4666666667rem;
    line-height: 6.6666666667rem;
    text-align: center
}

.promotion-box .promotion-box-inner {
    display: block;
    width: 100%;
    height: auto;
    padding: 3.2rem
}

.promotion-box .promotion-box-inner .text-main {
    display: block;
    width: 100%;
    max-height: 12.8rem;
    overflow: hidden;
    transition: all .6s
}

.button-box {
    display: flex;
    overflow: hidden
}

.promo-code-form {
    margin-bottom: 3.2rem
}

.promo-code-form .input-group {
    height: 11.7333333333rem;
    padding-bottom: 0;
    border-radius: 1.0666666667rem
}

.promo-code-form .input-group .promo-code-add-btn {
    position: absolute;
    text-align: center;
    line-height: 11.7333333333rem;
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    opacity: 1;
    background: var(--form-inputgroup-btn-bg);
    color: var(--form-inputgroup-btn-txt);
    inset: 0 0 0 auto;
    width: 19.2rem;
    height: 11.7333333333rem;
    font-weight: 500;
    cursor: pointer
}

.promo-code-form .input-group input {
    width: calc(100% - 19.2rem);
    height: 11.7333333333rem;
    padding-right: 3.2rem;
    background: var(--form-inputgroup-input-bg);
    color: var(--form-inputgroup-input-txt);
    border-radius: 1.0666666667rem 0 0 1.0666666667rem;
    border-color: var(--form-inputgroup-input-border)
}

.promo-code-form .input-group input::placeholder {
    color: var(--form-inputgroup-input-txt-placeholder)
}

.promo-code-form .input-group input:focus {
    border-color: var(--form-inputgroup-input-border-focus)
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.custom-promo-code-form {
    margin-bottom: 3.7333333333rem
}

.custom-promo-code-form .promo-code-title {
    cursor: pointer;
    opacity: 1;
    display: block;
    color: var(--form-inputgroup-input-title);
    margin-bottom: 2.6666666667rem;
    font-size: 3.7333333333rem;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-title .icon-arrow {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    padding-top: .5333333333rem;
    margin-left: 2.6666666667rem;
    transition: transform .3s;
    background: var(--form-inputgroup-input-title)
}

.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.3333333333rem;
    padding-bottom: 0;
    border-radius: 1.0666666667rem;
    font-size: 3.7333333333rem;
    margin-bottom: 2.6666666667rem;
    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: 0px 1.0666666667rem 1.0666666667rem 0px;
    padding: 0 1.0666666667rem;
    opacity: 1;
    background-color: var(--form-inputgroup-btn-bg);
    color: var(--form-inputgroup-btn-txt);
    inset: 0 0 0 auto;
    min-width: 18.6666666667rem;
    max-width: 37.3333333333rem;
    height: 13.3333333333rem;
    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.4666666667rem;
    height: 7.4666666667rem;
    background: var(--form-inputgroup-btn-txt);
    animation: spin 2s linear infinite
}

.custom-promo-code-form .input-group input {
    height: 13.3333333333rem;
    padding: 0 3.2rem;
    transition: height .3s;
    font-size: 3.7333333333rem;
    background-color: var(--form-inputgroup-input-bg);
    color: var(--form-inputgroup-input-txt)
}

.custom-promo-code-form .input-group input:focus {
    padding: 0 2.9333333333rem;
    border: .32rem solid var(--form-inputgroup-btn-bg)
}

.custom-promo-code-form .input-group input::placeholder {
    font-size: 3.7333333333rem
}

.custom-promo-code-form .input-group.fold {
    height: 0rem
}

.custom-promo-code-form .input-group.fold input {
    height: 0rem;
    border: 0
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn {
    height: 0rem
}

.custom-promo-code-form .input-group.fold .promo-code-add-btn span,.custom-promo-code-form .input-group.fold .promo-code-msg {
    display: none
}

.custom-promo-code-form .promo-code-msg {
    font-size: 3.7333333333rem;
    display: flex;
    align-items: center
}

.custom-promo-code-form .promo-code-msg .icon {
    flex-shrink: 0;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 1.6rem;
    padding: .5333333333rem;
    display: none
}

.custom-promo-code-form .promo-code-msg.error {
    color: var(--color-danger)
}

.custom-promo-code-form .promo-code-msg.error .icon-error {
    display: block;
    background: var(--color-danger)
}

.custom-promo-code-form .promo-code-msg.success {
    color: var(--color-success)
}

.custom-promo-code-form .promo-code-msg.success .icon-success {
    display: block;
    background: var(--color-success)
}

.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%
}

.reguster-success-body {
    background: var(--pop-register-success-mask)
}

.register-success-cont .btn-secondary {
    color: var(--pop-register-success-home-btn-txt)
}

.reguster-success-fast-body {
    display: flex;
    flex-direction: inherit;
    align-items: center;
    justify-content: center;
    background: var(--fast-register-success-bg);
    text-align: center
}

.reguster-success-fast-body .register-success-cont {
    width: 90%
}

.reguster-success-fast-body .register-success-cont .top-inner h3,.reguster-success-fast-body .register-success-cont .top-inner h4 {
    color: var(--color-success)
}

.reguster-success-fast-body .register-success-cont .top-inner>p {
    color: var(--fast-register-success-cont-text)
}

.reguster-success-fast-body .register-success-btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%
}

.reguster-success-fast-body .register-success-btn>.btn-default {
    width: 100%;
    margin: 0
}

.reguster-success-fast-body .register-success-btn .button {
    flex: 1 1 auto;
    margin: 0 1.0666666667rem 2.6666666667rem;
    border: 0
}

.register-success-wrap,.register-fail-wrap,.pop-biometric-success {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 3.2rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    background: var(--pop-register-success-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 .5333333333rem 1.6rem 0 var(--pop-bg-shadow),inset 0 .5333333333rem .5333333333rem var(--pop-bg-shadow);
    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,.verified-success-cont {
    display: inline-block;
    width: 100%;
    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,.verified-success-cont .top-inner h3 {
    color: var(--pop-register-success-title);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 6.4rem;
    font-weight: 700;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word
}

.register-success-cont .top-inner h4,.register-fail-cont .top-inner h4,.biometric-success-cont .top-inner h4,.verified-success-cont .top-inner h4 {
    margin-bottom: 2.1333333333rem;
    color: var(--pop-register-success-subtitle);
    font-size: 4.2666666667rem;
    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,.verified-success-cont .top-inner p {
    max-height: 42.6666666667rem;
    margin-bottom: 3.2rem;
    padding: 1.0666666667rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--pop-register-success-txt);
    font-size: 3.7333333333rem;
    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,.verified-success-cont .top-inner .link {
    display: block;
    color: var(--pop-verification-link);
    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,.verified-success-cont .btn-default,.verified-success-cont .btn-cancel {
    display: inline-block;
    width: auto;
    min-width: 40%;
    height: 12rem;
    padding: 0 2.6666666667rem;
    line-height: 12rem;
    text-decoration: none
}

.register-success-cont .btn-secondary,.register-fail-cont .btn-secondary,.biometric-success-cont .btn-secondary,.verified-success-cont .btn-secondary {
    margin-right: 2.6666666667rem
}

.register-success-cont .btn-cancel,.register-fail-cont .btn-cancel,.biometric-success-cont .btn-cancel,.verified-success-cont .btn-cancel {
    background: #555
}

.register-fail-cont .top-inner h3 {
    color: var(--pop-register-fail-title)
}

.register-fail-cont .top-inner>p {
    padding: 0
}

.comfirm-info {
    text-align: left
}

.btn-edit-group,.register-success-btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100%
}

.btn-edit-group .button,.register-success-btn .button {
    flex: 1 1 auto;
    margin: 0 1.0666666667rem 2.1333333333rem;
    border: 0
}

.success-checkmark {
    width: 24rem;
    height: 25.3333333333rem;
    margin: 3.2rem auto;
    overflow: hidden
}

.success-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    border: 1.0666666667rem solid var(--register-success-check-icon);
    border-radius: 50%
}

.success-checkmark .check-icon:before {
    top: .8rem;
    left: -.5333333333rem;
    width: 8rem;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667rem 0 0 26.6666666667rem
}

.success-checkmark .check-icon:after {
    top: 0;
    left: 8rem;
    width: 16rem;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667rem 26.6666666667rem x 0
}

.success-checkmark .check-icon:before,.success-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667rem;
    transform: rotate(-45deg);
    background: var(--register-success-check-icon-clip)
}

.success-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    height: 1.0666666667rem;
    border-radius: .5333333333rem;
    background-color: var(--register-success-check-icon)
}

.success-checkmark .check-icon .icon-line.line-tip {
    top: 12.2666666667rem;
    left: 3.7333333333rem;
    width: 6.6666666667rem;
    transform: rotate(45deg);
    animation: icon-line-tip .7s
}

.success-checkmark .check-icon .icon-line.line-long {
    top: 10.1333333333rem;
    right: 2.1333333333rem;
    width: 12.5333333333rem;
    transform: rotate(-45deg);
    animation: icon-line-long .7s
}

.success-checkmark .check-icon .icon-circle {
    position: absolute;
    z-index: 10;
    top: -1.0666666667rem;
    left: -1.0666666667rem;
    box-sizing: content-box;
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    border: 1.0666666667rem solid color-mix(in srgb,var(--register-success-check-icon),transparent 50%);
    border-radius: 50%
}

.success-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333rem;
    left: 6.9333333333rem;
    width: 1.0666666667rem;
    height: 22.6666666667rem;
    transform: rotate(-45deg);
    background-color: var(--register-success-check-icon-clip)
}

.fail-checkmark {
    width: 24rem;
    height: 25.3333333333rem;
    margin: 3.2rem auto;
    overflow: hidden
}

.fail-checkmark .check-icon {
    position: relative;
    box-sizing: content-box;
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    border: 1.0666666667rem solid var(--register-fail-check-icon);
    border-radius: 50%
}

.fail-checkmark .check-icon:before {
    top: .8rem;
    left: -.5333333333rem;
    width: 8rem;
    transform-origin: 100% 50%;
    border-radius: 26.6666666667rem 0 0 26.6666666667rem
}

.fail-checkmark .check-icon:after {
    top: 0;
    left: 8rem;
    width: 16rem;
    transform-origin: 0 50%;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667rem 26.6666666667rem x 0
}

.fail-checkmark .check-icon:before,.fail-checkmark .check-icon:after {
    content: "";
    position: absolute;
    height: 26.6666666667rem;
    transform: rotate(-45deg);
    background: var(--register-fail-check-icon-clip)
}

.fail-checkmark .check-icon .icon-line {
    display: block;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 0;
    height: 1.0666666667rem;
    transform-origin: left;
    border-radius: .5333333333rem;
    background-color: var(--register-fail-check-icon)
}

.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.0666666667rem;
    left: -1.0666666667rem;
    box-sizing: content-box;
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    border: 1.0666666667rem solid color-mix(in srgb,var(--register-fail-check-icon),transparent 50%);
    border-radius: 50%
}

.fail-checkmark .check-icon .icon-fix {
    position: absolute;
    z-index: 1;
    top: 2.1333333333rem;
    left: 6.9333333333rem;
    width: 1.0666666667rem;
    height: 22.6666666667rem;
    transform: rotate(-45deg);
    background-color: var(--register-fail-check-icon-clip)
}

@keyframes icon-line {
    0% {
        width: 0
    }

    to {
        width: 13.3333333333rem
    }
}

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg)
    }

    5% {
        transform: rotate(-45deg)
    }

    12% {
        transform: rotate(-405deg)
    }

    to {
        transform: rotate(-405deg)
    }
}

@keyframes icon-line-tip {
    0% {
        top: 5.0666666667rem;
        left: .2666666667rem;
        width: 0
    }

    54% {
        top: 5.0666666667rem;
        left: .2666666667rem;
        width: 0
    }

    70% {
        top: 9.8666666667rem;
        left: -2.1333333333rem;
        width: 13.3333333333rem
    }

    84% {
        top: 12.8rem;
        left: 5.6rem;
        width: 4.5333333333rem
    }

    to {
        top: 12rem;
        left: 3.7333333333rem;
        width: 6.6666666667rem
    }
}

@keyframes icon-line-long {
    0% {
        top: 14.4rem;
        right: 12.2666666667rem;
        width: 0
    }

    65% {
        top: 14.4rem;
        right: 12.2666666667rem;
        width: 0
    }

    84% {
        top: 9.3333333333rem;
        right: 0;
        width: 14.6666666667rem
    }

    to {
        top: 10.1333333333rem;
        right: 2.1333333333rem;
        width: 12.5333333333rem
    }
}

.logo-box {
    display: flex;
    position: relative;
    width: 53.3333333333rem;
    height: 12rem;
    margin: 8.5333333333rem auto;
    overflow: hidden;
    border: 0;
    background: no-repeat center center/contain
}

.register-content {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 2.6666666667rem
}

.register-content p {
    color: var(--color-title);
    font-size: 4.8rem;
    text-align: center
}

.register-content .button {
    width: auto;
    font-size: 5.3333333333rem
}

.register-content .button:not(.btn-vcode) {
    height: 12.8rem;
    margin: 3.2rem;
    line-height: 12.8rem
}

.register-content .verification-wrap input {
    flex: 1;
    margin-right: 2.6666666667rem
}

.register-content .tab-btn-page {
    position: fixed;
    top: 13.3333333333rem
}

.register-content .tab-content-page {
    min-height: 90vh;
    padding-top: 13.3333333333rem
}

.phone-area-code {
    flex: 0 0 35%;
    margin-right: 3.2rem
}

.phone-area-code .btn-select span {
    max-width: 19.2rem;
    overflow: hidden;
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4.8rem
}

.phone-area-code .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 2.1333333333rem;
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

.social-area-code {
    flex: 0 0 48%;
    margin-right: 2.1333333333rem
}

.social-area-code .btn-select span {
    max-width: 19.2rem;
    overflow: hidden
}

.social-area-code .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 2.1333333333rem;
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

.phone-info {
    display: flex;
    flex-flow: row nowrap;
    width: 100%
}

.vodiapicker {
    display: none
}

.lang-select {
    position: relative;
    font-size: 3.7333333333rem
}

.phone-code-list,.currency-code-list,.social-code-list {
    position: absolute;
    z-index: 135;
    top: 12rem;
    left: 0;
    width: 100%;
    max-height: 58.6666666667rem;
    padding: 0 1.0666666667rem;
    overflow: scroll;
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg);
    box-shadow: 0 .5333333333rem 1.0666666667rem #345ece26
}

.phone-code-list li,.currency-code-list li,.social-code-list li {
    display: flex;
    margin-bottom: 0;
    padding: 2.1333333333rem 0;
    list-style: none
}

.phone-code-list img,.currency-code-list img,.social-code-list img {
    margin: 1.0666666667rem;
    border-radius: 50%
}

.phone-code-list span,.currency-code-list span,.social-code-list span {
    color: var(--form-input-txt);
    font-size: 4.2666666667rem
}

.phone-code-list img,.social-code-list img,.btn-select img {
    width: 8rem;
    border-radius: 50%;
    background: var(--form-select-item-bg)
}

.phone-code-list span,.social-code-list span,.btn-select span {
    font-family: var(--custom-font),var(--custom-serif);
    margin-left: 1.0666666667rem
}

.phone-code-list img,.phone-code-list span,.social-code-list img,.social-code-list span,.btn-select img,.btn-select span {
    display: inline-block;
    vertical-align: middle
}

.phone-code-list-group,.currency-code-list-group,.social-code-list-group {
    display: none;
    width: 100%;
    border-radius: 1.0666666667rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #345ece26
}

.open {
    display: show!important
}

.btn-select {
    position: relative;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 0 0 2.1333333333rem;
    border: 0;
    border-radius: 1.0666666667rem;
    background: var(--form-input-bg);
    color: var(--form-input-txt);
    font-size: 3.4666666667rem
}

.btn-select li {
    padding-bottom: 0;
    float: left;
    list-style: none
}

.btn-select:hover li {
    margin-left: 0
}

.btn-select:focus {
    outline: none
}

.btn-select:disabled {
    border-bottom: .2666666667rem solid var(--form-input-border-disabled);
    border-radius: 0;
    background: none
}

.vcode-group .btn-vcode {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%
}

.resend-set {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 3.2rem;
    color: var(--wallet-otp-resend-txt);
    font-size: 3.4666666667rem;
    line-height: 11.7333333333rem
}

.resend-set.active {
    display: inline-block
}

.btn-vcode {
    height: 11.7333333333rem;
    padding: 0 2.6666666667rem;
    transition: .3s;
    background: var(--wallet-otp-send-btn-bg);
    font-size: 3.4666666667rem;
    line-height: 11.7333333333rem;
    text-shadow: none
}

.btn-vcode>i,.btn-vcode p {
    display: inline-block;
    text-align: center;
    vertical-align: middle
}

.btn-vcode p {
    padding: 0;
    color: var(--wallet-otp-send-btn-txt);
    font-size: 4.2666666667rem;
    line-height: 10.6666666667rem
}

.btn-vcode p span {
    display: none;
    width: .8rem;
    height: .8rem;
    margin-left: .8rem;
    border-radius: 50%;
    background-color: #fff
}

.btn-vcode.active {
    padding: 0;
    animation: btnmove .4s forwards ease-in
}

.btn-vcode.active .line {
    animation: none;
    opacity: 0
}

.btn-vcode.active.sending {
    opacity: 0
}

@keyframes btnmove {
    0% {
        right: 0%
    }

    99% {
        right: -100%
    }

    to {
        width: 0
    }
}

.btn-vcode.resend {
    padding: 0 2.6666666667rem;
    animation: resend .3s forwards ease-in
}

.btn-vcode.resend .svg-mail {
    transform-origin: left;
    animation: mail .6s ease-in-out alternate-reverse infinite
}

@keyframes mail {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.1)
    }
}

@keyframes resend {
    0% {
        right: -100%
    }

    to {
        right: 0%
    }
}

.btn-vcode.sending {
    background-color: var(--wallet-otp-sending-btn-bg);
    pointer-events: none
}

.btn-vcode.sending .svg-phone {
    left: 0;
    opacity: 1
}

.btn-vcode.sending .svg-mail {
    width: 8rem;
    mask: url(/assets/images/icon-set/icon-mail-type01.svg) no-repeat center/30%;
    -webkit-mask: url(/assets/images/icon-set/icon-mail-type01.svg) no-repeat center/30%
}

.btn-vcode.sending .line {
    animation: none;
    opacity: 0
}

.btn-vcode.sending p span {
    display: inline-block
}

.btn-vcode.mail-rotate .svg-mail {
    transform-origin: center;
    animation: mailani .3s ease-out alternate-reverse infinite
}

@keyframes mailani {
    0% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(5deg)
    }
}

.sms-svg-group {
    display: inline-block;
    position: relative;
    left: 0;
    width: auto;
    height: 10.6666666667rem;
    vertical-align: middle
}

.sms-svg-group .svg-sms {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(1)
}

.sms-svg-group .path-sms {
    fill: transparent
}

.svg-phone {
    display: block;
    position: absolute;
    bottom: 1.0666666667rem;
    left: -2.6666666667rem;
    width: 8rem;
    height: 8rem;
    transition: .3s;
    opacity: 0;
    background: var(--wallet-otp-send-btn-txt);
    mask: url(/images/v2/h5/img-template/icon-set/icon-phone-type01.svg) no-repeat center/contain;
    -webkit-mask: url(/images/v2/h5/img-template/icon-set/icon-phone-type01.svg) no-repeat center/contain
}

.svg-mail-group {
    width: 8rem;
    height: 100%
}

.svg-mail-group .line {
    position: absolute;
    top: 50%;
    left: -3.4666666667rem;
    width: 3.2rem;
    transform: translateY(-49%)
}

.svg-mail-group .line li {
    width: 100%;
    height: .5333333333rem;
    margin: .2666666667rem 0;
    float: right;
    border-radius: 1.0666666667rem;
    background: var(--wallet-otp-send-btn-txt)
}

.svg-mail-group .line li:first-child {
    width: 70%
}

.svg-mail-group .line li:last-child {
    width: 50%
}

.svg-mail-outer,.svg-mail {
    height: 100%;
    transition: .3s
}

.svg-mail {
    height: 100%;
    background: var(--wallet-otp-send-btn-txt);
    mask: url(/images/v2/h5/img-template/icon-set/icon-mail-type01.svg) no-repeat center/50%;
    -webkit-mask: url(/images/v2/h5/img-template/icon-set/icon-mail-type01.svg) no-repeat center/50%
}

.register-tip {
    display: inline-block;
    position: relative;
    left: 50%;
    margin-top: 3.2rem;
    transform: translate(-50%,-50%);
    border: .32rem solid var(--register-affiliate);
    color: var(--register-affiliate);
    border-radius: 1.0666666667rem;
    line-height: 0
}

.register-tip label,.register-tip span {
    display: inline-block;
    padding: 0 1.0666666667rem;
    line-height: 1.2;
    vertical-align: middle
}

.register-tip label {
    background: var(--register-affiliate);
    color: var(--register-affiliate-txt)
}

.input-group label:has(.inputbox-tip) {
    display: flex;
    overflow: visible
}

.inputbox-tip {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.inputbox-tip__icon {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--form-txt);
    margin-left: 2.6666666667rem;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    cursor: pointer
}

.inputbox-tip__icon:hover+.inputbox-tip-content {
    opacity: 1
}

.inputbox-tip__content {
    position: absolute;
    opacity: 0;
    width: 74.6666666667rem;
    top: 8rem;
    left: 12rem;
    border-radius: 1.0666666667rem;
    background: var(--register-question-tip-bg);
    text-wrap: wrap;
    transition: opacity .3s ease-in-out;
    pointer-events: none;
    cursor: auto
}

.inputbox-tip__content p {
    padding: 10px;
    text-align: left;
    color: var(--register-question-tip-txt);
    white-space: normal
}

.inputbox-tip__content:before {
    content: "";
    position: absolute;
    display: block;
    left: 8rem;
    top: -4.2666666667rem;
    border: 2.6666666667rem solid;
    border-color: transparent transparent var(--register-question-tip-bg) transparent
}

.inputbox-tip-content--show {
    opacity: 1;
    pointer-events: initial;
    cursor: pointer
}

.forgetpassword .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 3.2rem;
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

.phone-wrap,.social-wrap {
    display: flex;
    flex-flow: row nowrap;
    border-radius: 1.0666666667rem
}

.phone-wrap .clear,.social-wrap .clear {
    top: 0
}

.phone-wrap input:-webkit-autofill,.phone-wrap input:-webkit-autofill:hover,.phone-wrap input:-webkit-autofill:focus,.social-wrap input:-webkit-autofill,.social-wrap input:-webkit-autofill:hover,.social-wrap input:-webkit-autofill:focus {
    box-shadow: 0 0 0 50px var(--form-input-bg) inset!important
}

.text-box {
    padding: 0 3.2rem 3.2rem;
    color: var(--login-txt);
    font-size: 3.4666666667rem;
    line-height: 1.2;
    text-align: center
}

.text-box .text {
    display: inline-block
}

.text-box .btn {
    display: inline-block;
    color: var(--login-link);
    margin-left: 2.1333333333rem;
    text-decoration: underline
}

.text-box .btn:active {
    opacity: .8
}

.reset-password-page header {
    display: flex;
    position: fixed;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333rem;
    overflow: hidden;
    pointer-events: none
}

.reset-password-page header .logo {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    width: 26.6666666667rem;
    height: 100%;
    margin: 0 auto;
    transform: translate(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    text-indent: -2666.4rem
}

.reset-password-page .content {
    background-repeat: no-repeat;
    background-position: top 0 right 60%
}

.reset-password-page .lock {
    position: relative;
    left: 50%;
    width: 40%;
    height: auto;
    margin: 10.6666666667rem auto 0;
    transform: translate(-50%)
}

:root {
    --date-ball-translateX: 600%
}

.content-main:has(.search-top-block):has(mcd-top-banner mcd-carousel-frame-alpha) .search-top-block {
    padding-bottom: 45.0666666667rem
}

.content-main:has(.search-top-block):has(mcd-game-jackpot) .search-top-block {
    padding-bottom: 28.2666666667rem
}

.content-main:has(.search-top-block) mcd-top-banner,.content-main:has(.search-top-block) mcd-game-jackpot {
    position: absolute;
    width: 100%;
    top: 13.3333333333rem
}

.slot-game,.casino-game {
    position: relative;
    top: 24rem;
    width: 100%;
    height: auto;
    padding-bottom: 22.6666666667rem
}

.slot-game .banner,.casino-game .banner {
    background-color: transparent
}

.slot-game .banner .slider .slick-slide,.casino-game .banner .slider .slick-slide {
    height: 56rem
}

.slot-game .banner .slider .slick-slide .banner-image,.casino-game .banner .slider .slick-slide .banner-image {
    border-radius: 1.0666666667rem;
    background-position: bottom
}

.slot-game .banner .slider .slick-slide .banner-image:after,.casino-game .banner .slider .slick-slide .banner-image:after {
    content: "";
    display: block;
    height: 100%;
    border-radius: 1.0666666667rem;
    background: linear-gradient(0deg,#000,#00000080,#0000 40%);
    box-shadow: .5333333333rem .5333333333rem 2.1333333333rem #0000004d
}

.slot-game .ranking,.casino-game .ranking {
    display: flex;
    position: relative;
    z-index: 2;
    top: -8rem;
    margin: 0;
    padding: 3.2rem 3.2rem 0;
    overflow-x: scroll;
    overflow-y: hidden;
    list-style: none
}

.slot-game .ranking li,.casino-game .ranking li {
    position: relative;
    margin: 0 .8rem
}

.slot-game .ranking li:first-child,.casino-game .ranking li:first-child {
    margin-left: 0
}

.slot-game .ranking li:last-child,.casino-game .ranking li:last-child {
    margin-right: 0
}

.slot-game .ranking li span,.casino-game .ranking li span {
    position: absolute;
    z-index: -1;
    top: -5.3333333333rem;
    left: 0;
    color: transparent;
    font-size: 14.6666666667rem;
    font-weight: 700;
    text-shadow: 0 0 1.0666666667rem var(--new-slot-ranking-txt),0 .2666666667rem 1.0666666667rem var(--new-slot-ranking-txt);
    -webkit-text-stroke: .2666666667rem var(--new-slot-ranking-txt-border)
}

.slot-game .ranking li a,.casino-game .ranking li a {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 25.6rem;
    height: 29.3333333333rem;
    filter: drop-shadow(0 0 1.0666666667rem var(--new-slot-ranking-img-shadow))
}

.slot-game .ranking li .outline-border,.casino-game .ranking li .outline-border {
    width: 100%;
    height: 100%;
    background: var(--new-slot-ranking-img-border) no-repeat center
}

.slot-game .ranking li img,.casino-game .ranking li img {
    position: absolute;
    z-index: -1;
    width: 90%;
    height: 90%;
    mask: var(--new-slot-ranking-mask) no-repeat center;
    -webkit-mask: var(--new-slot-ranking-mask) no-repeat center
}

.slot-game .recommend-wrap,.casino-game .recommend-wrap {
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 4rem;
    padding: 1.6rem 3.2rem 2.6666666667rem;
    overflow-x: auto;
    overflow-y: hidden
}

.slot-game .recommend-wrap .recommend-scroll,.casino-game .recommend-wrap .recommend-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    list-style: none
}

.slot-game .recommend-wrap .recommend-scroll li,.casino-game .recommend-wrap .recommend-scroll li {
    display: flex;
    position: relative;
    width: 42.6666666667rem;
    height: 53.3333333333rem;
    overflow: visible;
    transform: rotateY(0)
}

.slot-game .recommend-wrap .recommend-scroll li a,.casino-game .recommend-wrap .recommend-scroll li a {
    display: block;
    position: relative;
    width: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    perspective: 213.3333333333rem
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-rotate,.casino-game .recommend-wrap .recommend-scroll li .recommend-rotate {
    display: block;
    width: 100%
}

.slot-game .recommend-wrap .recommend-scroll li img,.casino-game .recommend-wrap .recommend-scroll li img {
    position: absolute;
    bottom: -.8rem;
    left: -.5333333333rem;
    width: 43.7333333333rem;
    border-radius: 0 0 3.2rem 3.2rem
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-bg,.casino-game .recommend-wrap .recommend-scroll li .recommend-bg {
    transform: translateZ(-20px);
    transform-origin: center;
    mask: url(/assets/images/slotgame/trapezoid-mask.svg) no-repeat center;
    -webkit-mask: url(/assets/images/slotgame/trapezoid-mask.svg) no-repeat center
}

.slot-game .recommend-wrap .recommend-scroll li .recommend-char,.casino-game .recommend-wrap .recommend-scroll li .recommend-char {
    transform: translateZ(15px);
    transition: all .5s
}

.slot-game .recommend-wrap .recommend-scroll li .info-block,.casino-game .recommend-wrap .recommend-scroll li .info-block {
    position: absolute;
    bottom: 1.0666666667rem;
    left: 3%;
    width: 94%;
    height: 14.4rem;
    padding-top: 2.1333333333rem;
    transform: translateZ(20px);
    border-radius: 1.0666666667rem;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.slot-game .recommend-wrap .recommend-scroll li h4,.casino-game .recommend-wrap .recommend-scroll li h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.0666666667rem 3.2rem;
    color: var(--new-slot-recommend-txt);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.slot-game .recommend-wrap .recommend-scroll li h5,.casino-game .recommend-wrap .recommend-scroll li h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.0666666667rem 3.2rem;
    opacity: .7;
    color: var(--new-slot-recommend-txt);
    font-size: 3.4666666667rem
}

.slot-game .games-wrap,.casino-game .games-wrap {
    margin: 3.2rem
}

.slot-game .games-wrap .grid,.casino-game .games-wrap .grid {
    margin: 0;
    padding: 0;
    list-style: none
}

.slot-game .games-wrap .grid li,.casino-game .games-wrap .grid li {
    display: flex;
    justify-content: center;
    width: 33%;
    margin-bottom: 1.0666666667rem;
    padding: 1.0666666667rem 1.0666666667rem 2.1333333333rem;
    float: left;
    border-radius: 1.0666666667rem;
    opacity: 0
}

.slot-game .games-wrap .grid li:before,.casino-game .games-wrap .grid li:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2.1333333333rem;
    width: calc(100% - 2.1333333333rem);
    height: 8rem;
    background: linear-gradient(180deg,color-mix(in srgb,var(--new-slot-game-list-shadow),transparent 100%) 0%,var(--new-slot-game-list-shadow) 100%)
}

.slot-game .games-wrap .grid li:after,.casino-game .games-wrap .grid li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2.6666666667rem;
    left: 50%;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    transform: translate(-50%);
    background: var(--new-slot-game-list-circle-star-icon) no-repeat center
}

.slot-game .games-wrap .grid li img,.casino-game .games-wrap .grid li img {
    max-width: 100%;
    border-radius: 1.0666666667rem
}

.slot-game .games-wrap .grid li.shown,.casino-game .games-wrap .grid li.shown {
    opacity: 1
}

.slot-game .games-wrap .grid li.animate,.casino-game .games-wrap .grid li.animate {
    transform: translateY(53.3333333333rem);
    animation: effect-2 .65s ease forwards
}

.slot-game .games-wrap .grid li .favorite,.casino-game .games-wrap .grid li .favorite {
    position: absolute;
    z-index: 1;
    bottom: 1.2rem;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    padding: 2.1333333333rem;
    transform: translateZ(0);
    transform-style: preserve-3d
}

.slot-game .games-wrap .grid li .favorite.active video,.casino-game .games-wrap .grid li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -10.6666666667rem;
    left: 50%;
    width: 8.5333333333rem;
    height: auto;
    transform: translate(-50%)
}

.slot-game .games-wrap .grid.effect-2,.casino-game .games-wrap .grid.effect-2 {
    transform: translateY(53.3333333333rem);
    animation: effect-2 .65s ease forwards
}

.slot-game .title,.casino-game .title {
    display: flex;
    align-items: center;
    height: 4.2666666667rem;
    margin: 0 3.2rem 0 8.5333333333rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.slot-game .title:before,.casino-game .title:before {
    content: "";
    position: absolute;
    left: 3.2rem;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--event-border)
}

.provider-wrap {
    display: flex;
    position: fixed;
    z-index: 110;
    top: 13.0666666667rem;
    width: 100%;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--new-slot-search-bg)
}

.provider-wrap .provider-scroll {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding: 3.2rem 2.1333333333rem
}

.provider-wrap .provider-scroll .search-block {
    position: relative;
    text-align: center
}

.search-block .magnifier {
    display: flex;
    position: absolute;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 14.4rem;
    height: 14.4rem;
    margin: 0 2.1333333333rem
}

.search-block .magnifier svg {
    z-index: 999;
    margin: 0 auto
}

.search-block .magnifier svg g {
    stroke: var(--new-slot-search-icon-color)
}

.search-block .magnifier circle {
    stroke-dasharray: 45.55 45.55;
    stroke-dashoffset: 91.1
}

.search-block .magnifier path {
    stroke-dasharray: 27.91 27.91;
    stroke-dashoffset: -23
}

.search-block .input-box {
    display: flex;
    position: relative;
    align-items: center;
    width: 14.4rem;
    height: 14.4rem;
    margin: 0 2.1333333333rem;
    border: .32rem solid var(--new-slot-search-border);
    border-radius: 50%;
    background: var(--new-slot-input-bg)
}

.search-block .input-box .search {
    display: block;
    width: 100%;
    min-width: 9.0666666667rem;
    height: 100%;
    padding: 0 3.2rem;
    border: 0;
    border-radius: 1.0666666667rem;
    outline: none;
    background: transparent;
    color: var(--new-slot-input-txt);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.search-block .input-box .clear {
    display: none;
    position: relative;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 3.2rem;
    padding: 2.1333333333rem;
    border: 0;
    border-radius: 50%;
    background: var(--new-slot-clear-icon-color);
    font-size: 3.4666666667rem;
    font-weight: 500;
    mask: var(--new-slot-clear-icon) no-repeat center/100%;
    -webkit-mask: var(--new-slot-clear-icon) no-repeat center/100%
}

.search-block .input-box .cancel {
    display: none;
    position: relative;
    padding: 1.0666666667rem 3.2rem;
    border-left: .32rem solid var(--new-slot-cancel-border);
    color: var(--new-slot-cancel-txt);
    font-size: 3.4666666667rem
}

.provider-scroll ul {
    display: flex;
    margin: 0;
    padding-left: 0;
    list-style: none
}

.provider-scroll ul li {
    display: grid;
    position: relative;
    grid-template-columns: 14.4rem;
    grid-template-rows: 14.4rem auto;
    margin: 1.0666666667rem 2.1333333333rem 0;
    text-align: center;
    background: var(--new-slot-provider-bg);
    border-radius: 50%
}

.provider-scroll ul li .provider {
    position: absolute;
    left: 50%;
    width: 8rem;
    height: 8rem;
    margin-top: 3.2rem;
    transform: translate(-50%)
}

.provider-scroll ul li:before {
    content: "";
    display: block;
    border: .32rem solid var(--new-slot-provider-border);
    border-radius: 50%;
    box-shadow: 0 0 0 1.0666666667rem color-mix(in srgb,var(--new-slot-provider-shadow),transparent 70%)
}

.provider-scroll ul li.active:before {
    border: .32rem solid var(--new-slot-provider-border-active);
    box-shadow: 0 0 1.0666666667rem 1.0666666667rem color-mix(in srgb,var(--new-slot-provider-shadow-active),transparent 70%)
}

.search-wrap,.results-wrap {
    display: none;
    position: fixed;
    z-index: 114;
    top: 34.6666666667rem;
    left: 0;
    width: 100%;
    height: calc(100% - 34.6666666667rem);
    overflow-x: hidden;
    overflow-y: auto
}

.results-box {
    display: none;
    position: relative;
    z-index: 9000;
    top: 0;
    width: 100%;
    height: auto;
    padding: 0 3.2rem 3.2rem;
    overflow-y: auto;
    border-radius: 0 0 4rem 4rem;
    background: var(--new-slot-search-area-bg)
}

.results-box .results-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.1333333333rem
}

.results-box .results-info span {
    align-self: center;
    color: var(--new-slot-results-title);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.results-box .results-info .layout-icon {
    width: 4rem;
    height: 8.2666666667rem
}

.results-box .results-info .layout-icon g {
    stroke: var(--new-slot-results-layout-icon-color)
}

.game-list {
    display: none;
    padding: 0
}

.game-list li {
    display: grid;
    position: relative;
    grid-template-columns: 17.0666666667rem auto 6.4rem 21.3333333333rem;
    align-items: center;
    column-gap: 3.2rem;
    row-gap: 1.0666666667rem
}

.game-list li+li {
    margin-top: 3.2rem
}

.game-list li img {
    grid-row: 1/span 2;
    max-width: 100%;
    border-radius: 1.0666666667rem
}

.game-list li h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    grid-column-start: 2;
    grid-row-start: 1;
    align-self: flex-end;
    margin: 0;
    color: var(--new-slot-game-list-title);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.game-list li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column-start: 2;
    grid-row-start: 2;
    align-self: flex-start;
    margin: 0;
    color: var(--new-slot-game-list-subtitle);
    font-size: 3.4666666667rem
}

.game-list li .favorite {
    position: relative;
    grid-row: 1/span 2;
    width: 6.4rem;
    height: 6.4rem;
    padding: 2.6666666667rem;
    background: var(--new-slot-game-list-star-icon) no-repeat center;
    justify-self: center
}

.game-list li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -12.5333333333rem;
    left: 50%;
    width: 9.6rem;
    height: auto;
    transform: translate(-50%)
}

.game-list li button {
    grid-row: 1/span 2;
    height: 10.6666666667rem;
    border: transparent;
    border-radius: 1.0666666667rem;
    background: var(--new-slot-game-list-btn-bg);
    color: var(--new-slot-game-list-btn-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.game-list li button.active {
    background: var(--new-slot-game-list-btn-bg-active);
    color: var(--new-slot-game-list-btn-txt-active)
}

.game-list.active {
    display: block
}

.game-grid {
    display: none;
    grid-gap: 2.1333333333rem;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0
}

.game-grid li {
    display: flex;
    position: relative;
    justify-content: center;
    padding-bottom: 2.1333333333rem;
    float: left;
    border-radius: 1.0666666667rem
}

.game-grid li:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2.1333333333rem;
    width: 100%;
    height: 8rem;
    background: linear-gradient(180deg,color-mix(in srgb,var(--new-slot-search-area-bg),transparent 100%) 0%,var(--new-slot-search-area-bg) 100%)
}

.game-grid li:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -2.6666666667rem;
    left: 50%;
    width: 11.7333333333rem;
    height: 11.7333333333rem;
    transform: translate(-50%);
    background: var(--new-slot-game-list-circle-star-icon) no-repeat center
}

.game-grid li img {
    max-width: 100%;
    border-radius: 1.0666666667rem
}

.game-grid li .favorite {
    position: absolute;
    z-index: 1;
    bottom: 1.2rem;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    padding: 2.1333333333rem;
    transform: translateZ(0);
    transform-style: preserve-3d
}

.game-grid li .favorite.active video {
    position: absolute;
    z-index: 1;
    top: -10.6666666667rem;
    left: 50%;
    width: 8.5333333333rem;
    height: auto;
    transform: translate(-50%)
}

.game-grid.active {
    display: grid
}

.category {
    padding-bottom: 3.2rem
}

.category h4 {
    display: inline-block;
    align-items: center;
    height: 4.2666666667rem;
    opacity: 0;
    color: var(--new-slot-category-title);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4.2666666667rem;
    font-weight: 500
}

.category span {
    margin-left: 3.2rem;
    opacity: 0;
    color: color-mix(in srgb,var(--new-slot-category-title),transparent 50%);
    font-size: 3.4666666667rem
}

.category ul {
    display: grid;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(4,1fr);
    margin: 3.2rem 0;
    padding: 0;
    list-style: none
}

.category ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 10.6666666667rem;
    border-radius: 1.0666666667rem;
    opacity: 0;
    background: var(--new-slot-radio-bg);
    color: var(--new-slot-radio-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    line-height: 10.6666666667rem;
    text-align: center;
    padding: 0 1.0666666667rem
}

.category ul li.active {
    background: var(--new-slot-radio-border-checked);
    color: var(--new-slot-radio-txt-checked)
}

.category ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667rem;
    left: .2666666667rem;
    width: calc(100% - .5333333333rem);
    height: calc(100% - .5333333333rem);
    border-radius: 2.5333333333rem;
    background: var(--checkbox-bg-checked)
}

.category.history span {
    float: right
}

.category.history ul {
    grid-gap: .2666666667rem;
    grid-template-columns: 1fr
}

.category.history ul li {
    display: flex;
    position: relative;
    align-items: center;
    padding: 3.2rem 6.4rem 3.2rem 8rem;
    border-radius: 0;
    background: transparent;
    text-align: left
}

.category.history ul li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 32%;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    background: var(--new-slot-history-clock-icon-color);
    mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/100%;
    -webkit-mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/100%
}

.category.history ul li+li {
    border-top: .2666666667rem solid var(--new-slot-history-border)
}

.category.history ul li .clear {
    display: block;
    position: absolute;
    right: 0;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    background: var(--new-slot-history-clear-icon-color);
    mask: url(/assets/images/icon-set/icon-delete.svg) no-repeat center/100%;
    -webkit-mask: url(/assets/images/icon-set/icon-delete.svg) no-repeat center/100%
}

.category.history ul li.active {
    background: transparent
}

.category.history ul li.active:before {
    border-bottom-right-radius: 0
}

.category.history ul li.active:after {
    display: none
}

.prize-pool-wrap {
    position: relative;
    margin: 0 3.2rem
}

.prize-pool-wrap .jackpot {
    width: 100%
}

.prize-pool-wrap .marquee-block {
    position: absolute;
    top: 17.6rem;
    left: 50%;
    width: 100%;
    height: 4.5333333333rem;
    overflow: hidden;
    transform: translate(-50%)
}

.prize-pool-wrap .marquee {
    position: relative;
    color: #ffef27;
    font-size: 4rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 .5333333333rem 1.0666666667rem rgba(0,0,0,.5)
}

.prize-pool-wrap .marquee .player-id,.prize-pool-wrap .marquee .money {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block
}

.prize-pool-wrap .marquee span {
    position: relative;
    top: -.5333333333rem;
    margin: 0 1.0666666667rem;
    color: #fff
}

.prize-pool-wrap .marquee .player-id {
    max-width: 26.6666666667rem
}

.prize-pool-wrap .marquee .money {
    max-width: 40rem
}

.prize-pool-wrap .prize-pool-money {
    position: absolute;
    right: 5.3333333333rem;
    bottom: 11.4666666667rem;
    color: #fff;
    font-family: Inconsolata,monospace;
    font-size: 7.4666666667rem;
    font-weight: 700;
    letter-spacing: 1.0666666667rem
}

.prize-pool-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.recently-played-wrap,.my-favorites-wrap {
    position: relative;
    height: 100%
}

.recently-played-wrap .banner-wrap,.my-favorites-wrap .banner-wrap {
    position: relative
}

.recently-played-wrap .banner-wrap img,.my-favorites-wrap .banner-wrap img {
    width: 100%;
    height: auto;
    -webkit-mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
    mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
    mask-size: 100% auto;
    -webkit-mask: url(/assets/images/slotgame/irregular-mask.svg) no-repeat center;
    -webkit-mask-size: 100% auto
}

.recently-played-wrap .game-box,.my-favorites-wrap .game-box {
    position: relative;
    top: -21.3333333333rem;
    width: 100%;
    height: auto;
    padding: 3.2rem;
    overflow-y: auto
}

.recently-played-wrap .game-box .date-info,.my-favorites-wrap .game-box .date-info {
    position: relative;
    top: 0;
    margin-bottom: 3.2rem;
    color: var(--new-slot-details-date-txt);
    font-size: 4.2666666667rem;
    font-weight: 500;
    letter-spacing: .5333333333rem;
    text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb,var(--new-slot-details-date-txt-shadow),transparent 20%)
}

.recently-played-wrap .game-box .date-info:after,.my-favorites-wrap .game-box .date-info:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 80%;
    height: .2666666667rem;
    transform: translateY(-50%);
    opacity: .08;
    background: var(--new-slot-details-date-border)
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info,.my-favorites-wrap .game-box:nth-of-type(2) .date-info {
    color: #fff;
    text-shadow: 0 .5333333333rem 1.0666666667rem rgba(0,0,0,.8)
}

.recently-played-wrap .game-box:nth-of-type(2) .date-info:after,.my-favorites-wrap .game-box:nth-of-type(2) .date-info:after {
    background: transparent
}

.recently-played-wrap .list-loading,.my-favorites-wrap .list-loading {
    top: -23.4666666667rem
}

.recently-played-wrap .select-date,.my-favorites-wrap .select-date {
    display: grid;
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    grid-template-columns: repeat(7,1fr);
    align-items: center;
    width: 100%;
    height: 21.3333333333rem;
    border-top-left-radius: 1.0666666667rem;
    border-top-right-radius: 1.0666666667rem;
    background: var(--new-slot-details-select-date-bg);
    box-shadow: 0 0 2.1333333333rem #0003;
    text-align: center
}

.recently-played-wrap .select-date .day,.my-favorites-wrap .select-date .day {
    display: flex;
    z-index: 5000;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.recently-played-wrap .select-date .day.active .date,.my-favorites-wrap .select-date .day.active .date {
    transition: color .5s ease-in-out;
    color: var(--new-slot-details-select-date-txt-active)
}

.recently-played-wrap .select-date span,.my-favorites-wrap .select-date span {
    color: var(--new-slot-details-select-date-week-txt);
    font-size: 3.7333333333rem
}

.recently-played-wrap .select-date .date,.my-favorites-wrap .select-date .date {
    width: 7.4666666667rem;
    height: 7.4666666667rem;
    margin-top: 2.1333333333rem;
    transform: translate(50%);
    color: var(--new-slot-details-select-date-txt);
    font-size: 3.7333333333rem;
    line-height: 7.2rem
}

.recently-played-wrap .select-date svg,.my-favorites-wrap .select-date svg {
    position: absolute
}

.recently-played-wrap .target-wrap,.my-favorites-wrap .target-wrap {
    position: absolute;
    z-index: 4000;
    bottom: 0;
    left: .2666666667rem;
    width: 100%;
    height: 16rem;
    filter: url(#goo)
}

.recently-played-wrap .target-wrap .ball-box,.my-favorites-wrap .target-wrap .ball-box {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 14.2857142857%;
    height: 100%
}

.recently-played-wrap .target-wrap .ball-box .ball,.my-favorites-wrap .target-wrap .ball-box .ball {
    position: absolute;
    width: 9.6rem;
    height: 9.6rem;
    border-radius: 50%;
    background: var(--new-slot-details-select-date-ball)
}

.recently-played-wrap .target-wrap .ball-box:first-child,.my-favorites-wrap .target-wrap .ball-box:first-child {
    transform: translate(600%)
}

.recently-played-wrap .target-wrap .ball-box.big,.my-favorites-wrap .target-wrap .ball-box.big {
    transform: translate(var(--date-ball-translateX));
    transition: transform .5s ease-in-out .35s;
    pointer-events: none
}

.recently-played-wrap .game-grid li:before,.my-favorites-wrap .game-grid li:before {
    background: linear-gradient(180deg,color-mix(in srgb,var(--new-slot-details-game-grid-shadow),transparent 100%) 0%,var(--new-slot-details-game-grid-shadow) 100%)
}

.my-favorites-wrap .game-box {
    position: absolute;
    top: 53.3333333333rem
}

.animate-jello {
    animation: jello-horizontal .9s both
}

.pop-slot-details-filter,.pop-casino-details-filter {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 80vh;
    padding: 3.2rem 3.2rem 14.9333333333rem;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--new-slot-details-pop-bg)
}

.pop-slot-details-filter.active,.pop-casino-details-filter.active {
    bottom: 0
}

.pop-slot-details-filter .category h4,.pop-slot-details-filter .category span,.pop-slot-details-filter .category li,.pop-casino-details-filter .category h4,.pop-casino-details-filter .category span,.pop-casino-details-filter .category li {
    opacity: 1
}

.pop-slot-details-filter .category li.active,.pop-casino-details-filter .category li.active {
    position: relative;
    z-index: 0
}

.pop-slot-details-filter .pop-btn-group,.pop-casino-details-filter .pop-btn-group {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 0 2.1333333333rem #0003
}

.pop-slot-details-filter .pop-btn-group .btn-left,.pop-slot-details-filter .pop-btn-group .btn-right,.pop-casino-details-filter .pop-btn-group .btn-left,.pop-casino-details-filter .pop-btn-group .btn-right {
    position: relative;
    width: 50%;
    height: 14.9333333333rem;
    background: var(--new-slot-details-pop-btn-bg);
    color: var(--new-slot-details-pop-btn-txt);
    font-weight: 500;
    line-height: 14.9333333333rem;
    text-align: center
}

.pop-slot-details-filter .pop-btn-group .btn-left,.pop-casino-details-filter .pop-btn-group .btn-left {
    border-top-left-radius: 1.0666666667rem;
    color: color-mix(in srgb,var(--new-slot-details-pop-btn-txt),transparent 50%)
}

.pop-slot-details-filter .pop-btn-group .btn-left:after,.pop-casino-details-filter .pop-btn-group .btn-left:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: .2666666667rem;
    height: calc(100% - 6.4rem);
    transform: translateY(-50%);
    background: var(--new-slot-details-pop-btn-border)
}

.pop-slot-details-filter .pop-btn-group .btn-right,.pop-casino-details-filter .pop-btn-group .btn-right {
    border-top-right-radius: 1.0666666667rem
}

header.empty .header-right-btn-group {
    display: none
}

.game-empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    text-align: center
}

.game-empty-box video {
    width: 26.6666666667rem;
    height: 26.6666666667rem;
    margin-bottom: 3.2rem;
    opacity: .7
}

.game-empty-box h5 {
    margin-bottom: 2.1333333333rem;
    color: var(--new-slot-details-empty-txt);
    font-size: 4.2666666667rem;
    font-weight: 500
}

.game-empty-box h6 {
    margin-bottom: 6.4rem;
    opacity: .5;
    color: var(--new-slot-details-empty-txt);
    font-size: 3.4666666667rem
}

.game-empty-box .button {
    height: 9.6rem;
    line-height: 9.6rem;
    font-size: 3.4666666667rem
}

.my-favorites-wrap .game-empty-box {
    margin-top: 10.6666666667rem
}

.my-favorites-wrap .game-empty-box .icon-no-data {
    width: 21.3333333333rem;
    height: 21.3333333333rem
}

.recommend-box {
    padding: 3.2rem
}

.recommend-box .title {
    display: flex;
    align-items: center;
    height: 4.2666666667rem;
    margin: 3.2rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.recommend-box .title:before {
    content: "";
    position: absolute;
    left: 3.2rem;
    width: 1.0666666667rem;
    height: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--event-border)
}

.recommend-box .title:after {
    content: "";
    position: absolute;
    right: 3.2rem;
    width: 50%;
    height: .2666666667rem;
    opacity: .08;
    background: var(--new-slot-details-date-border)
}

@keyframes effect-2 {
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes scale-up-center {
    0% {
        transform: rotate(0) scale(.6);
        opacity: 0
    }

    to {
        transform: rotate(360deg) scale(1);
        opacity: 1
    }
}

@keyframes jello-horizontal {
    0% {
        transform: scaleZ(1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }

    to {
        transform: scaleZ(1)
    }
}

@keyframes data-loading {
    0%,50%,to {
        transform: scale(1)
    }

    25% {
        transform: scale(.6)
    }

    75% {
        transform: scale(1.4)
    }
}

.casino-game {
    top: 3.2rem;
    margin-bottom: 0;
    padding-bottom: 0
}

.casino-game .banner {
    margin-bottom: 6.6666666667rem
}

.casino-game .game-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.casino-game .game-title .filter {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 13.3333333333rem;
    height: 13.3333333333rem
}

.casino-game .game-title .filter:before {
    content: "";
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-bottom: .5333333333rem;
    background-color: var(--event-title);
    -webkit-mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
    mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
    mask-size: 100% auto;
    -webkit-mask: url(/assets/images/slotgame/icon-filter.svg) no-repeat 50% 50%;
    -webkit-mask-size: 100% auto
}

.casino-game .game-title .filter .badge {
    display: flex;
    position: absolute;
    top: 1.0666666667rem;
    right: .5333333333rem;
    align-items: center;
    justify-content: center;
    width: 5.8666666667rem;
    height: 5.8666666667rem;
    border-radius: 50%;
    background: #cd1818;
    color: #fff;
    font-size: 3.4666666667rem;
    font-weight: 500
}

.pop-casino-details-filter {
    padding: 8rem 3.2rem 14.9333333333rem
}

.pop-casino-details-filter .recently-played,.pop-casino-details-filter .my-favorites {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 48%;
    height: 15.4666666667rem;
    margin-bottom: 6.4rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    color: #fff;
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-decoration: none
}

.pop-casino-details-filter .recently-played:before,.pop-casino-details-filter .my-favorites:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    height: 15.4666666667rem;
    mix-blend-mode: overlay
}

.pop-casino-details-filter .recently-played {
    background: var(--new-slot-recently-played-bg)
}

.pop-casino-details-filter .recently-played:before {
    background: var(--new-slot-recently-played) no-repeat center/contain
}

.pop-casino-details-filter .my-favorites {
    float: right;
    background: var(--new-slot-my-favorites-bg)
}

.pop-casino-details-filter .my-favorites:before {
    background: var(--new-slot-my-favorites) no-repeat center/contain
}

body {
    flex-direction: column;
    font-family: var(--custom-font),var(--custom-serif);
    font-weight: 400
}

@supports (height: 100dvh) {
    body {
        min-height:100dvh
    }
}

@supports not (height: 100dvh) {
    body {
        min-height:100vh
    }
}

.limit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 8.5333333333rem);
    height: 100dvh;
    margin: auto;
    padding: 3.2rem;
    padding-top: 0;
    color: var(--limit-title);
    font-family: var(--custom-font),var(--custom-serif)
}

.limit-content .logo-box {
    width: 18.6666666667rem;
    height: 18.6666666667rem;
    margin: 0 auto;
    background: no-repeat center/contain
}

.limit-content h1 {
    margin: 2.1333333333rem 0;
    font-size: 8rem;
    font-weight: 600;
    text-align: center
}

.limit-content h2 {
    color: var(--limit-time-txt);
    font-size: 8rem;
    font-weight: 500
}

.limit-content h3 {
    margin: 2.1333333333rem 0;
    color: var(--limit-timezone-txt);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.limit-content h4 {
    margin: 3.2rem 0;
    color: var(--limit-txt);
    font-size: 3.7333333333rem;
    font-weight: 500;
    line-height: 5.3333333333rem;
    text-align: center
}

.limit-content span {
    color: var(--limit-ip-txt);
    font-size: 3.7333333333rem;
    line-height: 5.3333333333rem
}

.limit-content video {
    width: 80%;
    max-width: 280px;
    margin: 6.4rem 0
}

.limit-content .sm {
    width: 60%
}

.limit-content .img-not-found {
    width: 80%;
    max-width: 280px;
    margin: 8rem 0
}

.limit-content .img-for-ios {
    width: 60%;
    margin: 8rem 0
}

.limit-content .btn-box {
    margin: auto;
    max-width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 3.2rem 0 0;
    text-align: right
}

.limit-content .btn-box .button {
    display: inline-block;
    flex: 1;
    width: 100%;
    max-width: 100%;
    margin: 2.6666666667rem;
    padding: 0 2.6666666667rem
}

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

.bg-wrap {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%
}

.bg-wrap .bg-inner {
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%
}

.bg-wrap .bg-inner .start-color {
    stop-color: var(--transfer-ani-default-light-bg)
}

.bg-wrap .bg-inner .end-color {
    stop-color: var(--transfer-ani-default-bg)
}

.bg-wrap .bg-color {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--transfer-ani-default-bg)
}

.content-wrap {
    position: relative;
    z-index: 2;
    padding: 5.3333333333rem
}

.content-wrap .content-box {
    display: grid;
    grid-template-columns: 52% 35% 15%;
    width: 90%;
    margin: 0 auto;
    color: var(--transfer-ani-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-weight: 500
}

.content-wrap .content-box h1 {
    grid-column: 1/span 3;
    margin-bottom: 2.6666666667rem;
    font-size: 6.6666666667rem;
    font-weight: 500;
    text-align: center
}

.content-wrap .content-box h2 {
    align-self: flex-end;
    font-size: 5.8666666667rem;
    font-weight: 500
}

.content-wrap .content-box h3 {
    align-self: center;
    padding-top: 2.6666666667rem;
    opacity: .7;
    font-size: 3.7333333333rem;
    font-weight: 500;
    line-height: 1.2
}

.content-wrap .content-box .arrival-time {
    align-self: flex-end;
    margin-right: 2.1333333333rem;
    font-size: 16rem;
    font-weight: 700;
    text-align: right
}

.content-wrap .tips {
    display: inline-block;
    position: relative;
    left: 50%;
    margin-top: 2.6666666667rem;
    padding: 2.1333333333rem 4rem 1.6rem;
    transform: translate(-50%);
    border: .32rem solid var(--transfer-ani-default-tips-border);
    border-radius: 5.3333333333rem;
    background: var(--transfer-ani-default-tips-bg);
    box-shadow: 0 1.0666666667rem 2.6666666667rem 0 var(--transfer-ani-default-tips-bg),inset 0 .8rem 1.0666666667rem 0 var(--transfer-ani-default-tips-border);
    color: var(--transfer-ani-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4rem;
    font-weight: 500
}

.content-wrap .ani-box {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 90%;
    margin: 10.6666666667rem auto 21.3333333333rem;
    font-family: var(--custom-font),var(--custom-serif);
    font-weight: 500
}

.content-wrap .ani-box .before-amount {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 5%;
    align-items: center;
    justify-content: flex-end;
    width: 90%;
    height: 13.3333333333rem;
    padding: 0 6rem;
    animation: push-up .8s 1.2s;
    border-radius: 13.3333333333rem;
    opacity: 0
}

.content-wrap .ani-box .before-amount:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -2.1333333333rem;
    left: 10.6666666667rem;
    width: 0;
    height: 0;
    border-width: 2.1333333333rem 2.1333333333rem 0;
    border-style: solid
}

.content-wrap .ani-box .before-amount .icon-account {
    position: absolute;
    left: 1.0666666667rem;
    align-self: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    border-radius: 50%
}

.content-wrap .ani-box .before-amount .icon-account span {
    display: block;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background-repeat: no-repeat;
    background-position: center
}

.content-wrap .ani-box .before-amount .currency {
    margin-top: 3.2rem
}

.content-wrap .ani-box .before-amount .amount {
    font-size: 8rem;
    font-weight: 500
}

.content-wrap .ani-box .before-amount .player-account {
    position: absolute;
    right: 6rem;
    bottom: -2.6666666667rem;
    padding: .5333333333rem 2.6666666667rem .8rem;
    border-radius: 13.3333333333rem;
    font-size: 3.2rem;
    font-weight: 500
}

.content-wrap .ani-box .after-amount {
    display: flex;
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: -8rem;
    align-items: center;
    align-self: flex-end;
    justify-content: flex-start;
    width: 90%;
    height: 13.3333333333rem;
    padding: 0 6rem;
    animation: push-up .8s 2.7s;
    border-radius: 13.3333333333rem;
    opacity: 0
}

.content-wrap .ani-box .after-amount:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.1333333333rem;
    right: 10.6666666667rem;
    width: 0;
    height: 0;
    border-width: 0 2.1333333333rem 2.1333333333rem;
    border-style: solid
}

.content-wrap .ani-box .after-amount .platform-logo {
    position: absolute;
    right: 1.0666666667rem;
    align-self: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    border-radius: 50%
}

.content-wrap .ani-box .after-amount .platform-logo span {
    display: block;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background-repeat: no-repeat;
    background-position: center
}

.content-wrap .ani-box .after-amount .currency {
    margin-top: 3.2rem
}

.content-wrap .ani-box .after-amount .amount {
    font-size: 8rem;
    font-weight: 500
}

.content-wrap .ani-box .after-amount .platform-name {
    position: absolute;
    bottom: -2.6666666667rem;
    left: 6rem;
    padding: .5333333333rem 2.6666666667rem .8rem;
    border-radius: 13.3333333333rem;
    font-size: 3.2rem;
    font-weight: 500
}

.content-wrap .ani-box .earth {
    display: flex;
    position: relative;
    top: 8rem;
    align-items: center;
    justify-content: center;
    width: 100%
}

.content-wrap .ani-box .earth .circle {
    position: relative;
    width: 80rem;
    height: 80rem;
    border: 2.6666666667rem solid color-mix(in srgb,var(--transfer-ani-default-circle-bg),transparent 90%);
    border-radius: 50%;
    background: color-mix(in srgb,var(--transfer-ani-default-circle-bg),transparent 80%);
    box-shadow: inset 0 .2666666667rem 10.6666666667rem 0 var(--transfer-ani-default-circle-shadow)
}

.content-wrap .ani-box .earth img {
    position: absolute;
    width: 90%;
    height: auto
}

.content-wrap .ani-box .earth video {
    position: absolute;
    width: 90%;
    height: auto
}

.content-wrap .ani-box .earth .payment {
    display: flex;
    position: absolute;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 17.6rem;
    height: 17.6rem;
    animation: enlarge-payment .8s .9s;
    border: .32rem solid #ffffff;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(180deg,#d8d8d8cc,#fffc);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem #ffffff80
}

.content-wrap .ani-box .earth .payment .payment-logo {
    width: auto;
    max-width: 9.6rem;
    height: auto;
    max-height: 9.6rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.content-wrap .ani-box .earth .green-circle {
    position: absolute;
    width: 20.2666666667rem;
    height: 20.2666666667rem;
    animation: enlarge-green 1.1s 1.9s;
    border: 2.1333333333rem solid #40c618;
    border-radius: 50%;
    opacity: 0
}

.content-wrap.deposit .ani-box .before-amount {
    border: .32rem solid #ffffff;
    background: var(--transfer-ani-account-bg);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem #ffffff80
}

.content-wrap.deposit .ani-box .before-amount:before {
    border-color: rgba(255,255,255,.9) transparent transparent
}

.content-wrap.deposit .ani-box .before-amount .icon-account {
    border: .32rem solid var(--transfer-ani-account-logo-border);
    background: linear-gradient(180deg,var(--transfer-ani-account-darken-color) 0%,var(--transfer-ani-account-lighten-color) 100%);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-account-lighten-color)
}

.content-wrap.deposit .ani-box .before-amount .currency,.content-wrap.deposit .ani-box .before-amount .amount {
    color: #4f9907
}

.content-wrap.deposit .ani-box .before-amount .player-account {
    border: .32rem solid var(--transfer-ani-account-lighten-color);
    background: linear-gradient(180deg,var(--transfer-ani-account-darken-color) 0%,var(--transfer-ani-account-lighten-color) 100%);
    box-shadow: 0 .8rem 2.6666666667rem 0 var(--transfer-ani-account-darken-color),inset 0 .8rem 1.0666666667rem 0 var(--transfer-ani-account-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.deposit .ani-box .after-amount {
    border: .32rem solid var(--transfer-ani-platform-lighten-color);
    background: var(--transfer-ani-platform-bg);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-platform-lighten-color)
}

.content-wrap.deposit .ani-box .after-amount:before {
    border-color: transparent transparent color-mix(in srgb,var(--transfer-ani-platform-bg),transparent 10%)
}

.content-wrap.deposit .ani-box .after-amount .platform-logo {
    border: .32rem solid var(--transfer-ani-platform-logo-border);
    background: linear-gradient(180deg,var(--transfer-ani-platform-darken-color) 0%,var(--transfer-ani-platform-lighten-color) 100%);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-platform-lighten-color)
}

.content-wrap.deposit .ani-box .after-amount .platform-logo span {
    background-size: 60%
}

.content-wrap.deposit .ani-box .after-amount .currency,.content-wrap.deposit .ani-box .after-amount .amount {
    color: #fff
}

.content-wrap.deposit .ani-box .after-amount .platform-name {
    border: .32rem solid var(--transfer-ani-platform-secondary-lighten-color);
    background: linear-gradient(180deg,var(--transfer-ani-platform-secondary-darken-color) 0%,var(--transfer-ani-platform-secondary-lighten-color) 100%);
    box-shadow: 0 .8rem 2.6666666667rem 0 var(--transfer-ani-platform-secondary-darken-color),inset 0 .8rem 1.0666666667rem 0 var(--transfer-ani-platform-secondary-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.withdrawal .ani-box .before-amount {
    border: .32rem solid var(--transfer-ani-platform-lighten-color);
    background: var(--transfer-ani-platform-bg);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-platform-lighten-color)
}

.content-wrap.withdrawal .ani-box .before-amount:before {
    border-color: color-mix(in srgb,var(--transfer-ani-platform-bg),transparent 10%) transparent transparent
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account {
    border: .32rem solid var(--transfer-ani-platform-logo-border);
    background: linear-gradient(180deg,var(--transfer-ani-platform-darken-color) 0%,var(--transfer-ani-platform-lighten-color) 100%);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-platform-lighten-color)
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account span {
    background-size: 60%
}

.content-wrap.withdrawal .ani-box .before-amount .currency,.content-wrap.withdrawal .ani-box .before-amount .amount {
    color: #fff
}

.content-wrap.withdrawal .ani-box .before-amount .player-account {
    border: .32rem solid var(--transfer-ani-platform-secondary-lighten-color);
    background: linear-gradient(180deg,var(--transfer-ani-platform-secondary-darken-color) 0%,var(--transfer-ani-platform-secondary-lighten-color) 100%);
    box-shadow: 0 .8rem 2.6666666667rem 0 var(--transfer-ani-platform-secondary-darken-color),inset 0 .8rem 1.0666666667rem 0 var(--transfer-ani-platform-secondary-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.withdrawal .ani-box .after-amount {
    border: .32rem solid #ffffff;
    background: linear-gradient(180deg,#d8d8d8cc,#fffc);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem #ffffff80
}

.content-wrap.withdrawal .ani-box .after-amount:before {
    border-color: transparent transparent rgba(255,255,255,.9)
}

.content-wrap.withdrawal .ani-box .after-amount .platform-logo {
    border: .32rem solid var(--transfer-ani-account-logo-border);
    background: linear-gradient(180deg,var(--transfer-ani-account-darken-color) 0%,var(--transfer-ani-account-lighten-color) 100%);
    box-shadow: 0 .5333333333rem .5333333333rem #2d2d2d1a,0 1.0666666667rem 1.0666666667rem #3131311a,0 2.1333333333rem 2.1333333333rem #2a2a2a1a,0 3.2rem 3.2rem #2020201a,inset 0 .8rem .8rem 0 var(--transfer-ani-account-lighten-color)
}

.content-wrap.withdrawal .ani-box .after-amount .currency,.content-wrap.withdrawal .ani-box .after-amount .amount {
    color: #4f9907
}

.content-wrap.withdrawal .ani-box .after-amount .platform-name {
    border: .32rem solid var(--transfer-ani-account-lighten-color);
    background: linear-gradient(180deg,var(--transfer-ani-account-darken-color) 0%,var(--transfer-ani-account-lighten-color) 100%);
    box-shadow: 0 .8rem 2.6666666667rem 0 var(--transfer-ani-account-darken-color),inset 0 .8rem 1.0666666667rem 0 var(--transfer-ani-account-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap .button-box {
    display: flex;
    width: 80%;
    margin: 0 auto;
    animation: push-up .8s 3.2s;
    opacity: 0;
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 5.3333333333rem;
    font-weight: 500;
    text-align: center
}

.content-wrap .button-box a {
    display: inline-block;
    flex: 1;
    width: 100%;
    padding: 4rem;
    overflow-x: hidden;
    border: .32rem solid var(--transfer-ani-platform-lighten-color);
    border-radius: 2.6666666667rem;
    background: var(--transfer-ani-platform-bg);
    color: #fff;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-wrap .button-box a+a {
    width: 48%;
    margin-left: 2%
}

.logo-wrap {
    display: flex;
    position: fixed;
    z-index: 129;
    top: 50%;
    right: 1.0666666667rem;
    flex-direction: column;
    padding: 0 1.0666666667rem;
    transform: translateY(-50%);
    border-radius: 1.0666666667rem;
    background: #fffc
}

.logo-wrap img {
    position: relative;
    left: 50%;
    width: auto;
    max-width: 8rem;
    height: auto;
    max-height: 8rem;
    margin: 2.6666666667rem 0;
    transform: translate(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

@keyframes push-up {
    0% {
        transform: translateY(50%);
        opacity: 0
    }

    50% {
        transform: translateY(-25%);
        opacity: 1
    }

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

@keyframes enlarge-payment {
    0% {
        transform: scale(.7);
        opacity: 0
    }

    50% {
        transform: scale(1.02)
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes enlarge-green {
    0% {
        transform: scale(.7);
        opacity: .5
    }

    50% {
        transform: scale(1.02);
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 3.2rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background: var(--accordion-bg);
    cursor: pointer
}

.accordion-wrap.show .a-content {
    height: 100%;
    max-height: 999vh;
    opacity: 1
}

.accordion-wrap.show .a-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-wrap .a-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333rem;
    padding: 3.2rem;
    background: var(--accordion-title-bg);
    color: var(--accordion-title);
    font-size: 4rem;
    text-align: left
}

.accordion-wrap .a-title .a-text {
    flex-grow: 1;
    font-weight: 500
}

.accordion-wrap .a-title .a-icon {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin: 0 2.1333333333rem;
    background: var(--accordion-info-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.accordion-wrap .a-title .a-arrow {
    display: none;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    transition: all .3s;
    background-color: var(--accordion-arrow-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 75%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 75%
}

.accordion-wrap .a-content {
    position: relative;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s,opacity .5s;
    opacity: 0;
    color: var(--accordion-txt);
    text-align: left
}

.accordion-wrap .a-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3.2rem;
    width: calc(100% - 6.4rem);
    height: .32rem;
    background: var(--accordion-dot)
}

.accordion-wrap .a-content ol.a-list {
    padding: 3.2rem 3.2rem 3.2rem 8.5333333333rem
}

.accordion-wrap .a-content .a-list {
    padding: 3.2rem 0 0;
    list-style: auto
}

.accordion-wrap .a-content .a-item {
    padding: 1.0666666667rem 0;
    font-size: 3.7333333333rem;
    line-height: 1.3
}

.accordion-wrap .a-content p {
    padding: 3.2rem;
    font-size: 3.7333333333rem;
    line-height: 1.3;
    white-space: pre-wrap
}

.accordion-wrap.error {
    margin: 2.6666666667rem 0 0
}

.accordion-wrap.error .a-title {
    padding: 3.2rem 0;
    color: var(--color-danger)
}

.accordion-wrap.error .a-title .a-icon,.accordion-wrap.error .a-title .a-arrow {
    background-color: var(--color-danger)
}

.accordion-wrap.error .a-title:after {
    width: 100%
}

.accordion-wrap.error .a-content {
    color: var(--color-danger)
}

.accordion-wrap.error .a-content .a-item {
    font-size: 3.7333333333rem;
    line-height: 1.5
}

.accordion-wrap .toggle-btn .a-arrow {
    display: block
}

.accordion-wrap strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cricket-betting-details-value-number)
}

.accordion-wrap span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cricket-betting-details-value-title);
    font-size: 3.4666666667rem;
    line-height: 4.2666666667rem
}

.list-loading {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    height: 80rem;
    margin: auto;
    padding: 6.4rem 0;
    transition: height .3s ease
}

.list-loading:before,.list-loading:after {
    content: "";
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    mix-blend-mode: screen
}

.list-loading:before {
    animation: slide-right-left 1s linear infinite;
    background: var(--new-slot-details-loading-color-1)
}

.list-loading:after {
    animation: slide-left-right 1s linear infinite;
    background: var(--new-slot-details-loading-color-2)
}

@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)
    }
}

.tab-btn-section {
    width: 100%
}

.tab-btn-page {
    display: flex;
    position: relative;
    z-index: 3;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 13.3333333333rem;
    background: var(--tab-header-bg)
}

.tab-btn-page-underline {
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.tab-btn-page .line {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    transition: all .3s
}

.tab-btn-page .line:after {
    content: "";
    display: block;
    width: 4.2666666667rem;
    height: .5333333333rem;
    margin: 0 auto;
    border-radius: 1.0666666667rem;
    background: var(--tab-line-underline)
}

.tab-btn-page .btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: inherit!important;
    height: auto;
    padding: 3.2rem 0;
    transition: background .8s ease,border .8s ease,color .8s ease;
    text-align: center
}

.tab-btn-page .btn.active .text {
    color: var(--tab-line-txt-active)
}

.tab-btn-page .btn .text {
    display: inline-block;
    position: relative;
    margin: 0 3.2rem;
    color: var(--tab-line-txt);
    font-size: 3.4666666667rem;
    text-align: center
}

.tab-btn-page .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.0666666667rem;
    transform: translate(90%,-100%);
    border-radius: 1.0666666667rem;
    background: var(--tab-line-badge-bg);
    color: var(--tab-line-badge-txt);
    font-size: 3.4666666667rem
}

.tab-btn-page .btn[data-tab-current=current] .text {
    color: var(--tab-line-txt-active);
    font-weight: 500
}

.tab-btn-page .btn[data-tab-current=current]:after {
    display: block
}

.player-nav-page .tab-btn-page {
    background: transparent
}

.tab-btn-wrap {
    position: relative;
    padding: 2.1333333333rem 3.2rem 3.2rem;
    background: var(--tab-btn-bg)
}

.tab-btn-wrap:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 13.3333333333rem;
    transform: translateY(-100%);
    pointer-events: none
}

.tab-btn-bar {
    display: flex;
    position: relative;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8.5333333333rem;
    transition: all .3s
}

.tab-btn-bar:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 120%;
    transform: translateY(-50%);
    border-radius: 1.0666666667rem;
    background: var(--tab-btn-bar-bg)
}

.tab-btn-bar .line {
    position: absolute;
    top: 3%;
    left: 0;
    padding: 0 1.0666666667rem;
    transition: all .3s
}

.tab-btn-bar .line:after {
    content: "";
    display: block;
    width: 100%;
    height: 8rem;
    border-radius: 1.0666666667rem;
    background: var(--tab-btn-bg-active)
}

.tab-btn-bar .btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    transition: all .3s;
    text-align: center
}

.tab-btn-bar .btn.active .text {
    color: var(--tab-btn-txt-active)
}

.tab-btn-bar .btn .icon+.text {
    margin-left: 1.0666666667rem
}

.tab-btn-bar .btn .text {
    display: inline-block;
    position: relative;
    padding: 2.1333333333rem 0;
    color: var(--tab-btn-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center
}

.tab-btn-bar .btn[data-tab-current=current]:after {
    display: block
}

.tab-btn-bar .btn[data-tab-current=current] .text {
    color: var(--tab-btn-txt-active)
}

.tab-content-page {
    display: block;
    width: 100%;
    overflow: hidden
}

.tab-content-page.disable .deposit-wallet .button {
    background: var(--btn-main-bg-disabled)
}

.tab-content-page.disable .deposit-wallet .button a {
    color: var(--btn-main-txt-disabled)
}

.tab-content-page.disable .withdraw-wallet .button {
    background: var(--btn-main-bg-disabled);
    pointer-events: none
}

.tab-content-page.disable .withdraw-wallet .button a {
    color: var(--btn-main-txt-disabled)
}

.tab-content-page.disable .withdraw-wallet .verify-tips {
    display: block
}

.tab-content-page.disable .withdraw-wallet .accordion-wrap.error {
    width: 95%;
    margin: 1.0666666667rem auto
}

.tab-content-page.disable .withdraw-wallet .button a:before {
    display: inline-block
}

.withdraw-wallet .verify-tips {
    display: none
}

.close-tips {
    display: inline-block;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    transition: all .3s;
    background: var(--tips-info-arrow-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 70%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70%
}

.tips-info {
    position: relative;
    flex: 1;
    margin: 3.2rem;
    border-radius: 1.0666666667rem;
    background-color: var(--tips-info-bg);
    text-align: left;
    white-space: normal
}

.tips-info.show ol {
    height: auto;
    max-height: 10000px;
    opacity: 1
}

.tips-info.show ol:after {
    display: block
}

.tips-info.show .close-tips {
    transform: rotate(180deg);
    transform-origin: center
}

.tips-info ol {
    position: relative;
    width: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s,opacity .3s;
    opacity: 0;
    color: var(--accordion-txt)
}

.tips-info ol:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3.2rem;
    width: calc(100% - 6.4rem);
    height: .32rem;
    background: var(--accordion-dot)
}

.tips-info .title-box {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 3.2rem
}

.tips-info h5 {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 92%;
    margin-bottom: 2.6666666667rem;
    color: var(--tips-info-title);
    font-size: 3.7333333333rem
}

.tips-info h5 i {
    display: inline-block;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 3.2rem;
    background: var(--tips-info-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.tips-info h5 span {
    display: inline-block;
    flex: 1;
    width: calc(100% - 50px);
    line-height: 4.2666666667rem;
    vertical-align: text-top
}

.tips-info a {
    text-decoration: none
}

.tips-info p,.tips-info b {
    display: block;
    padding-bottom: 1.0666666667rem;
    color: var(--tips-info-title);
    font-size: 3.4666666667rem;
    line-height: 1.2;
    text-align: left
}

.tips-info i {
    padding: 0 .8rem;
    color: var(--tips-info-i);
    font-weight: 500
}

.tips-info ul,.tips-info ol {
    display: block;
    color: var(--tips-info-title);
    font-size: 3.4666666667rem;
    line-height: 1.5;
    text-align: left
}

.tips-info li {
    display: list-item;
    margin: 3.2rem
}

.verify-tips a {
    display: block;
    width: 100%
}

.verify-tips label {
    display: block;
    margin-bottom: 2.1333333333rem;
    font-size: 3.7333333333rem;
    font-weight: 500
}

.verify-tips p {
    display: block
}

.verify-tips h5 {
    margin-bottom: 0
}

.personal-info,.contact-info,.document-info,.info-supporting {
    position: relative;
    padding: 1.0666666667rem 0
}

.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.0666666667rem;
    background: color-mix(in srgb,var(--tips-info-arrow-icon-color),transparent 80%)
}

.personal-info li,.contact-info li,.document-info li,.info-supporting li {
    display: inline-block;
    margin: 0 1.0666666667rem 1.6rem 0;
    padding: .5333333333rem 2.1333333333rem;
    border-radius: 5.3333333333rem;
    vertical-align: middle
}

.personal-info label {
    color: var(--tips-info-personal-txt)
}

.personal-info li {
    background: var(--tips-info-personal-bg);
    color: var(--tips-info-personal-txt)
}

.contact-info label {
    color: var(--tips-info-content-txt)
}

.contact-info li {
    background: var(--tips-info-content-bg);
    color: var(--tips-info-content-txt)
}

.document-info label {
    color: var(--tips-info-document-txt)
}

.document-info li {
    background: var(--tips-info-document-bg);
    color: var(--tips-info-document-txt)
}

.info-choose-one label {
    color: var(--tips-info-document-choose-one-txt)
}

.info-choose-one li {
    background: transparent;
    border: .32rem solid var(--tips-info-document-choose-one-txt);
    color: var(--tips-info-document-choose-one-txt)
}

.info-supporting label {
    color: var(--tips-info-supporting-txt)
}

.info-supporting li {
    background: transparent;
    border: .32rem solid var(--tips-info-supporting-txt);
    color: var(--tips-info-supporting-txt)
}

.tab-content .inner-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: all .3s
}

.tab-content .inner-box {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 100%
}

.info-top-type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 6.4rem 0 3.2rem
}

.info-top-type .player-info {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 32rem
}

.info-top-type .player-info video,.info-top-type .player-info img {
    height: 42.6666666667rem
}

.info-top-type .player-info .vip-image {
    width: 32rem
}

.membername-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 3.2rem 0 0
}

.membername-wrap .membername {
    width: 100%;
    font-size: 4.2666666667rem;
    color: var(--profile-id)
}

.membername-wrap .level {
    width: 100%;
    text-align: center;
    font-size: 3.4666666667rem;
    padding: 1.0666666667rem;
    margin-left: 1.0666666667rem;
    background-image: linear-gradient(105deg,#c8c3b2 2%,#80795a);
    border-radius: 1.0666666667rem;
    color: #fff
}

.player-top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: var(--wallet-top-bg)
}

.player-top:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 13.3333333333rem;
    transform: translateY(-100%);
    z-index: -1;
    background-color: var(--primary);
    pointer-events: none
}

.player-top .player-card {
    margin: 1.0666666667rem 2.6666666667rem 6.6666666667rem
}

.player-top .credit-card {
    margin: 3.2rem 3.2rem 2.1333333333rem
}

.player-top:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -1px
}

.player-top.player-deposit {
    position: relative;
    flex-direction: column;
    height: auto;
    background: var(--wallet-top-bg)
}

.player-top.player-deposit:before {
    display: none
}

.player-top.player-deposit+.content {
    padding: 0
}

.player-top.player-nav-page {
    background: var(--wallet-top-bg);
    flex-wrap: wrap
}

.player-top.player-withdraw {
    position: static;
    position: relative;
    flex-direction: column;
    height: auto;
    background: var(--wallet-top-bg);
    color: var(--wallet-top-txt)
}

.credit-card {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - 6.4rem);
    min-height: 51.2rem;
    margin: 0 auto 3.2rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--wallet-bank-card-bg);
    box-shadow: 0 .5333333333rem .8rem var(--wallet-bank-card-shadow);
    font-size: 3.7333333333rem;
    z-index: 0
}

.credit-card .credit-card-inner {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    color: var(--wallet-bank-card-txt)
}

.credit-card .unit-icon {
    display: none;
    width: 5.3333333333rem;
    height: auto
}

.credit-card .user-name .bank-name p,.credit-card .bank-branch p {
    font-size: 4.2666666667rem;
    line-height: 1.1
}

.credit-card .card-number {
    margin-top: 2.1333333333rem;
    font-size: 6.9333333333rem;
    line-height: 1.2;
    word-break: break-all;
    font-size: 5.3333333333rem
}

.credit-card .user-name {
    font-size: 4.2666666667rem;
    line-height: 1.5
}

.credit-card .bank-info-copy {
    margin-bottom: 2.1333333333rem;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: inherit;
    border-radius: 1.0666666667rem;
    font-size: 4.2666666667rem;
    transform: all .3s
}

.credit-card .bank-info-copy p {
    color: var(--wallet-bank-card-txt);
    word-break: break-all;
    text-shadow: 0 0 .5333333333rem var(--wallet-account-info-copy-tooltips-txt-shadow)
}

.credit-card .bank-info-copy i {
    z-index: 1;
    display: inline-block;
    margin-left: 3.2rem;
    width: 4rem;
    height: 4rem;
    background-color: var(--wallet-bank-card-copy-icon-color);
    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 4rem
}

.credit-card .bank-info-copy.active {
    background: var(--wallet-bank-card-copy-active)
}

.credit-card .bank-info-copy.active .tips-txt {
    display: block;
    animation: tips-txt-show .3s linear forwards
}

.credit-card .bank-info-copy.hide {
    background: var(--wallet-bank-card-copy-active)
}

.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.6666666667rem;
    padding: 1.0666666667rem 2.6666666667rem;
    border-radius: 1.0666666667rem;
    opacity: 0;
    background: var(--wallet-bank-card-copy-tooltips-bg);
    box-shadow: 0 0 .5333333333rem #99999980;
    font-size: 3.4666666667rem;
    color: var(--wallet-bank-card-copy-tooltips-txt);
    line-height: 1.5;
    transform: translateY(-100%)
}

.credit-card .tips-txt:before {
    content: "";
    position: absolute;
    right: 2.6666666667rem;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: var(--wallet-bank-card-copy-tooltips-bg) transparent transparent
}

.credit-card .bg-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

.credit-card .deposit-amount {
    position: absolute;
    bottom: 5.3333333333rem
}

.credit-card .deposit-amount label,.credit-card .deposit-amount p {
    display: inline-block
}

.credit-card .deposit-amount label {
    margin-right: 2.6666666667rem;
    line-height: 1.8;
    text-align: left
}

.credit-card .deposit-amount p {
    color: var(--wallet-bank-card-amount);
    font-size: 4.2666666667rem
}

.credit-card .deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    margin: 3.2rem
}

.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-color: var(--content-bg)
}

.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-color: var(--content-bg);
    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
}

.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;
    border-radius: 1.0666666667rem;
    background: var(--wallet-kyc-verify-mask-bg);
    overflow: hidden
}

.kyc-verify-mask .kyc-verify-mask-icon {
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 auto
}

.kyc-verify-mask .kyc-verify-mask-icon:before {
    content: "!";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.4rem;
    height: 6.4rem;
    border-radius: 50%;
    background: var(--wallet-kyc-verify-mask-txt);
    color: var(--wallet-kyc-verify-mask-bg);
    font-size: 6.4rem;
    font-weight: 700;
    line-height: 4.2666666667rem;
    text-align: center
}

.kyc-verify-mask .kyc-verify-mask-message {
    display: block;
    color: var(--wallet-kyc-verify-mask-txt);
    text-shadow: 0 0 .5333333333rem var(--wallet-kyc-verify-mask-txt-shadow);
    text-align: center;
    margin: 2.1333333333rem 2.1333333333rem 0
}

.kyc-verify-mask .kyc-verify-mask-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    z-index: -1
}

.deposit-crypto-cont .player-crypto-bankcard .menu-box {
    margin-top: 0
}

.deposit-crypto-cont .credit-card {
    margin-top: 2.6666666667rem;
    margin-bottom: 6.4rem
}

.player-crypto-bankcard,.player-crypto-channel {
    display: none
}

.player-crypto-bankcard.active,.player-crypto-channel.active {
    display: block
}

.list-field {
    display: block;
    flex: 1;
    padding: 0 2.1333333333rem;
    text-align: center
}

.list-field .tags {
    padding: 1.0666666667rem;
    overflow: hidden;
    transform: scale(.9);
    border-radius: .5333333333rem;
    color: var(--transaction-record-status-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.list-field.amount {
    justify-content: flex-end
}

.list-title,.list-content li {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    line-height: 1.3
}

.list-title {
    margin: 0 3.2rem;
    padding: 2.1333333333rem 1.0666666667rem;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background: var(--vip-points-table-head-bg);
    color: var(--vip-points-table-head-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.list-title .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: .2666666667rem solid var(--vip-points-table-head-border)
}

.list-title .list-field:last-child {
    border: 0
}

.list-title .list-field:last-child:after {
    content: none
}

.list-content {
    padding: 1.0666666667rem;
    background: var(--vip-points-table-body-bg);
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

.list-content li {
    position: relative;
    align-items: center;
    padding: 1.0666666667rem 0;
    background: var(--vip-points-table-body-record-bg);
    color: var(--vip-points-table-body-txt);
    font-size: 3.2rem;
    cursor: pointer
}

.list-content li+li {
    border-top: .2666666667rem solid var(--vip-points-table-body-top-border)
}

.list-content li .list-field:last-of-type {
    border: 0
}

.list-content .list-field {
    position: relative;
    padding: 1.0666666667rem;
    border-right: .2666666667rem solid var(--vip-points-table-body-border)
}

.no-detail-info .list-arrow {
    opacity: 0
}

.list-arrow {
    flex: 0 1 3.2rem;
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 1.0666666667rem;
    transform: rotate(180deg);
    background: var(--vip-points-table-body-arrow-icon);
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: 80%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 80%
}

.date-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.1333333333rem;
    background: var(--transaction-record-table-body-date-bg);
    color: var(--transaction-record-table-body-date)
}

.date-title .date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 3.4666666667rem
}

.date-title .date i {
    display: inline-block;
    width: 4.2666666667rem;
    height: 4rem;
    margin-right: 2.1333333333rem;
    background: var(--transaction-record-calendar-icon-color);
    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 {
    padding: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    font-size: 3.2rem
}

.time-zone {
    margin-left: 1.0666666667rem;
    padding: 0 1.0666666667rem;
    border: .32rem solid var(--vip-points-table-head-zone);
    border-radius: 1.0666666667rem;
    color: var(--vip-points-table-head-zone);
    font-weight: 400
}

.status-pending .tags {
    background: var(--transaction-record-pending-bg)
}

.status-revert .tags {
    background: var(--transaction-record-revert-bg)
}

.status-positive .tags {
    background: var(--transaction-record-positive-bg)
}

.status-negative .tags {
    background: var(--transaction-record-negative-bg)
}

.profit {
    text-align: right
}

.profit.positive {
    color: var(--betting-record-positive-txt)
}

.profit.negative {
    color: var(--betting-record-negative-txt)
}

.transaction-record-list .list-group {
    margin: 0 3.2rem
}

.transaction-record-list .list-content {
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

.transaction-record-list .list-content .time {
    flex: 0 0 15%;
    border: 0
}

.transaction-record-list .list-content .amount {
    text-align: right
}

.transaction-record-list .time-zone {
    border: .32rem solid var(--transaction-record-table-body-zone);
    color: var(--transaction-record-table-body-zone)
}

.transaction-record-list .no-result {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

[lang=vn] .vip-list .vip-point {
    flex: 0 0 30%
}

.ticket-wrap {
    display: block;
    width: inherit
}

.ticket {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    margin: 3.2rem;
    border-radius: 1.0666666667rem;
    color: var(--turnover-card-title);
    overflow: hidden
}

.ticket+.ticket {
    margin-top: 3.2rem
}

.ticket.completed .ticket-deco:before,.ticket.completed .ticket-deco:after {
    background: var(--content-bg)
}

.ticket.completed .ticket-inner {
    background: var(--turnover-card-bg-completed)
}

.ticket.completed .ticket-inner-left>div+div {
    margin-top: 1.0666666667rem
}

.ticket.completed .ticket-inner-right:after {
    background-image: linear-gradient(to bottom,var(--pop-bonuswallet-card-detail) 20%,rgba(255,255,255,0) 0%);
    background-repeat: repeat-y;
    background-position: left;
    background-size: .2666666667rem 2.6666666667rem
}

.ticket.completed .ticket-inner-right .text {
    color: var(--color-success)
}

.ticket.completed .ticket-inner-right .text:before {
    content: "";
    display: block;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin: auto;
    background: var(--color-success);
    mask: var(--pop-turnover-check-icon) no-repeat center/100%;
    -webkit-mask: var(--pop-turnover-check-icon) no-repeat center/100%
}

.ticket .ticket-deco {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden
}

.ticket .ticket-deco .line {
    display: block;
    position: absolute;
    top: 3.2rem;
    left: 75%;
    width: .32rem;
    height: calc(100% - 6.4rem);
    background: var(--accordion-dot)
}

.ticket .ticket-banner {
    display: none;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    padding: 2.6666666667rem 4rem 0;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    background-color: var(--turnover-card-bg)
}

.ticket .ticket-banner img {
    display: block;
    width: 100%;
    margin: auto;
    border-radius: 1.0666666667rem
}

.ticket .ticket-inner {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 100%;
    background: var(--turnover-card-bg)
}

.ticket .ticket-inner-left {
    position: relative;
    width: 75%;
    padding: 3.2rem;
    border-right-width: .2666666667rem
}

.ticket .ticket-inner-left>div+div {
    margin-top: 1.0666666667rem
}

.ticket .ticket-inner-right {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    width: 25%;
    padding: 0 3.2rem;
    text-align: center
}

.ticket .ticket-inner-right .text {
    margin: auto;
    padding: 1.0666666667rem;
    color: var(--bonuswallet-detail-txt);
    font-size: 3.4666666667rem;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: keep-all
}

.ticket .title {
    position: relative;
    overflow: hidden;
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ticket .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--turnover-card-border);
    vertical-align: sub
}

.ticket .detail {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start
}

.ticket .detail .date {
    margin: auto 0;
    color: var(--turnover-card-date);
    font-size: 3.2rem
}

.ticket .detail .detail-btn {
    display: flex;
    margin: auto 1.0666666667rem;
    padding: .5333333333rem 1.0666666667rem;
    border: .32rem solid var(--turnover-card-detail);
    border-radius: .5333333333rem
}

.ticket .detail .detail-btn a {
    color: var(--turnover-card-detail);
    font-size: 3.2rem;
    text-decoration: none
}

.ticket .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: var(--bonuswallet-amount)
}

.ticket .discount .currency {
    margin: 1.6rem 1.0666666667rem 0 0;
    font-size: 3.7333333333rem
}

.ticket .discount .amount {
    font-size: 5.8666666667rem;
    font-weight: 500
}

[lang=vn] .ticket .detail .detail-btn {
    flex: 1 0 20%
}

.referral-partner {
    padding-bottom: 1.0666666667rem
}

.referral-partner .menu-box img {
    width: 100%;
    overflow: hidden;
    border-radius: 1.0666666667rem
}

.referral-partner .recommend-friends-list .date-title {
    margin: 0 2.1333333333rem;
    padding: 2.1333333333rem
}

.referral-partner .recommend-friends-list .date-title .date .item-icon {
    display: inline-block;
    width: 4.2666666667rem;
    height: 4rem;
    margin-right: 2.1333333333rem;
    background: var(--referral-partner-details-date-icon, var(--transaction-record-calendar-icon-color));
    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%
}

.referral-partner .recommend-friends-list .time-zone {
    border-color: var(--referral-partner-details-time-zone-border, var(--color-text));
    color: var(--referral-partner-details-time-zone-txt, var(--color-text))
}

.referral-partner .recommend-friends-list .form-title {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    line-height: 1.3;
    padding: 2.1333333333rem 0;
    background: var(--referral-partner-details-list-title-bg, var(--vip-points-table-head-bg));
    color: var(--referral-partner-details-list-title-txt, var(--vip-points-table-head-txt));
    font-size: 3.2rem;
    font-weight: 500;
    margin: 3.2rem 3.2rem 0;
    border-radius: 1.0666666667rem 1.0666666667rem 0 0;
    align-content: center
}

.referral-partner .recommend-friends-list .form-title div {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 1.0666666667rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: .2666666667rem dotted var(--referral-partner-details-list-title-border, var(--vip-points-table-head-border))
}

.referral-partner .recommend-friends-list .form-title div:last-child {
    border: 0
}

.referral-partner .recommend-friends-list .form-title div:last-child:after {
    content: none
}

.referral-partner .recommend-friends-list .list-content li div {
    display: block;
    text-align: center;
    border-right: .2666666667rem dotted var(--referral-partner-details-list-content-td-border, #ffffff);
    padding: 2.1333333333rem 1.3333333333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    z-index: 1
}

.referral-partner .recommend-friends-list .list-content li div:last-child {
    border: 0
}

.referral-partner .recommend-friends-list .list-content li div:last-child:after {
    content: none
}

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

.referral-partner .recommend-friends-list .list-content li .status {
    position: relative;
    color: var(--referral-partner-details-list-content-state-txt, #ffffff);
    padding: 2.1333333333rem
}

.referral-partner .recommend-friends-list .list-content li .status:before {
    content: "";
    display: block;
    position: absolute;
    top: 2.1333333333rem;
    left: 2.1333333333rem;
    height: calc(100% - 8.5333333333rem);
    width: calc(100% - 6.9333333333rem);
    padding: 2.1333333333rem 1.3333333333rem;
    border-radius: 1.0666666667rem;
    z-index: -1
}

.referral-partner .recommend-friends-list .list-content li .status.available:before {
    background: var(--referral-partner-details-list-content-state-available, #efbd33)
}

.referral-partner .recommend-friends-list .list-content li .status.completed:before {
    background: var(--referral-partner-details-list-content-state-completed, #47c05c)
}

.referral-partner .recommend-friends-list .list-content li .status.expired:before {
    background: var(--referral-partner-details-list-content-state-expired, #aeaeae)
}

.referral-partner .recommend-friends-list .list-content li .status.claimed:before {
    background: var(--referral-partner-details-list-content-state-claimed, #f2794e)
}

.referral-partner .recommend-friends-list .list-content li .status.rejected:before {
    background: var(--referral-partner-details-list-content-state-rejected, #d46465)
}

.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, var(--primary))
}

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.7333333333rem)
}

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.7333333333rem);
    color: var(--referral-partner-sub-title, var(--color-title))
}

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

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.7333333333rem);
    color: var(--referral-partner-txt, var(--color-title))
}

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,mcd-referral-bonus-terms-conditions h3,mcd-referral-bonus-goals h3,mcd-referral-bonus-period-info h3,mcd-requirement h3,mcd-contact-info h3,mcd-bonus-received-billboard h3,mcd-leaderboard h3,mcd-total-issued-bonuses h3,mcd-income-calculator h3,mcd-commission-info h3,mcd-period-revenue-goals h3,mcd-can-receive-bonus h3,mcd-dashboard h3,mcd-received-bonus-record h3,mcd-invitation-link h3 {
    margin: 2.1333333333rem 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-sub-txt, var(--color-title))
}

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, var(--primary))
}

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.1333333333rem 0
}

mcd-referral-bonus-terms-conditions .table,mcd-referral-bonus-goals .table,mcd-referral-bonus-period-info .table,mcd-requirement .table,mcd-contact-info .table,mcd-bonus-received-billboard .table,mcd-leaderboard .table,mcd-total-issued-bonuses .table,mcd-income-calculator .table,mcd-commission-info .table,mcd-period-revenue-goals .table,mcd-can-receive-bonus .table,mcd-dashboard .table,mcd-received-bonus-record .table,mcd-invitation-link .table {
    margin-bottom: 5.3333333333rem
}

mcd-referral-bonus-terms-conditions .table table,mcd-referral-bonus-goals .table table,mcd-referral-bonus-period-info .table table,mcd-requirement .table table,mcd-contact-info .table table,mcd-bonus-received-billboard .table table,mcd-leaderboard .table table,mcd-total-issued-bonuses .table table,mcd-income-calculator .table table,mcd-commission-info .table table,mcd-period-revenue-goals .table table,mcd-can-receive-bonus .table table,mcd-dashboard .table table,mcd-received-bonus-record .table table,mcd-invitation-link .table table {
    width: 100%;
    text-align: center
}

mcd-referral-bonus-terms-conditions .table table tr,mcd-referral-bonus-goals .table table tr,mcd-referral-bonus-period-info .table table tr,mcd-requirement .table table tr,mcd-contact-info .table table tr,mcd-bonus-received-billboard .table table tr,mcd-leaderboard .table table tr,mcd-total-issued-bonuses .table table tr,mcd-income-calculator .table table tr,mcd-commission-info .table table tr,mcd-period-revenue-goals .table table tr,mcd-can-receive-bonus .table table tr,mcd-dashboard .table table tr,mcd-received-bonus-record .table table tr,mcd-invitation-link .table table tr {
    border-bottom: transparent
}

mcd-referral-bonus-terms-conditions .table table th,mcd-referral-bonus-goals .table table th,mcd-referral-bonus-period-info .table table th,mcd-requirement .table table th,mcd-contact-info .table table th,mcd-bonus-received-billboard .table table th,mcd-leaderboard .table table th,mcd-total-issued-bonuses .table table th,mcd-income-calculator .table table th,mcd-commission-info .table table th,mcd-period-revenue-goals .table table th,mcd-can-receive-bonus .table table th,mcd-dashboard .table table th,mcd-received-bonus-record .table table th,mcd-invitation-link .table table th {
    background: var(--referral-partner-table-title-bg, var(--betting-details-table-head-bg));
    padding: 1.0666666667rem;
    vertical-align: middle;
    color: var(--referral-partner-table-title-txt, var(--color-text))
}

mcd-referral-bonus-terms-conditions .table table td,mcd-referral-bonus-goals .table table td,mcd-referral-bonus-period-info .table table td,mcd-requirement .table table td,mcd-contact-info .table table td,mcd-bonus-received-billboard .table table td,mcd-leaderboard .table table td,mcd-total-issued-bonuses .table table td,mcd-income-calculator .table table td,mcd-commission-info .table table td,mcd-period-revenue-goals .table table td,mcd-can-receive-bonus .table table td,mcd-dashboard .table table td,mcd-received-bonus-record .table table td,mcd-invitation-link .table table td {
    background: var(--referral-partner-table-content-bg, var(--form-box-bg));
    color: var(--referral-partner-table-txt, var(--color-text));
    padding: 1.3333333333rem
}

mcd-referral-bonus-terms-conditions .table table th,mcd-referral-bonus-goals .table table th,mcd-referral-bonus-period-info .table table th,mcd-requirement .table table th,mcd-contact-info .table table th,mcd-bonus-received-billboard .table table th,mcd-leaderboard .table table th,mcd-total-issued-bonuses .table table th,mcd-income-calculator .table table th,mcd-commission-info .table table th,mcd-period-revenue-goals .table table th,mcd-can-receive-bonus .table table th,mcd-dashboard .table table th,mcd-received-bonus-record .table table th,mcd-invitation-link .table table th,mcd-referral-bonus-terms-conditions .table table td,mcd-referral-bonus-goals .table table td,mcd-referral-bonus-period-info .table table td,mcd-requirement .table table td,mcd-contact-info .table table td,mcd-bonus-received-billboard .table table td,mcd-leaderboard .table table td,mcd-total-issued-bonuses .table table td,mcd-income-calculator .table table td,mcd-commission-info .table table td,mcd-period-revenue-goals .table table td,mcd-can-receive-bonus .table table td,mcd-dashboard .table table td,mcd-received-bonus-record .table table td,mcd-invitation-link .table table td {
    border: .32rem solid var(--referral-partner-table-border, var(--form-box-bg))
}

mcd-commission-info ol,mcd-commission-info ul {
    padding-left: 4.8rem
}

mcd-commission-info ol li+li,mcd-commission-info ul li+li {
    margin-top: 2.1333333333rem
}

mcd-commission-info ul {
    list-style: auto
}

mcd-commission-info ol {
    list-style: disc
}

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 4rem;
    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, var(--primary))
}

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

mcd-invitation-link .code-box .btn-share {
    width: 100%;
    height: 10.6666666667rem;
    margin: auto auto 3.2rem 0;
    font-size: 4.2666666667rem;
    background: var(--referral-partner-code-box-share-btn, var(--btn-main-bg));
    color: var(--referral-partner-code-box-share-txt, var(--btn-main-txt))
}

mcd-invitation-link .code-box .code {
    height: 10.6666666667rem;
    border: 0
}

mcd-invitation-link .code-box .code span {
    border: .32rem solid var(--recommend-input-border);
    border-radius: 1.0666666667rem 0 0 1.0666666667rem
}

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

mcd-invitation-link .invite-cont-center {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1.3333333333rem 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.1333333333rem 1.3333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--referral-partner-invite-cont-center-btn-bg, var(--primary));
    padding: 1.6rem 8.5333333333rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4.2666666667rem;
    height: 10.6666666667rem;
    line-height: 1.1;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--referral-partner-invite-cont-center-btn-txt, var(--color-text))
}

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

mcd-invitation-link .invite-cont {
    display: inline-flex;
    width: 100%;
    margin-top: 3.2rem;
    color: var(--referral-partner-invite-cont-txt, var(--color-text))
}

mcd-invitation-link .bonus-title {
    line-height: 1.1;
    margin-bottom: 1.0666666667rem
}

mcd-invitation-link .left {
    flex: 0 0 35%
}

mcd-invitation-link .invite-qr-code {
    position: relative;
    width: 100%;
    height: auto;
    padding: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    border: .32rem solid var(--referral-partner-invite-qr-code-border, var(--color-border))
}

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

mcd-invitation-link .right {
    position: relative;
    flex: 1;
    margin: 0 0 0 3.2rem;
    padding-left: 3.2rem
}

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

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.2rem;
    color: var(--referral-partner-invite-box-title-txt, var(--color-text))
}

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

mcd-received-bonus-record .invite-box .text i {
    font-weight: 500;
    color: var(--referral-partner-invite-box-item-txt, var(--primary))
}

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.0666666667rem);
    margin-bottom: 2.1333333333rem;
    align-items: center;
    text-align: center;
    background: var(--referral-partner-dashboard-item-bg, var(--form-input-bg));
    border-radius: 1.0666666667rem;
    padding: 4rem 4rem 2.6666666667rem
}

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

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

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

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

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

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

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

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

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

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

mcd-can-receive-bonus .receive-box .button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10.6666666667rem;
    z-index: 0;
    padding: 3.2rem 6.4rem;
    font-size: 3.7333333333rem;
    background: var(--referral-partner-receive-btn-active, var(--btn-main-bg));
    color: var(--referral-partner-receive-btn-txt, var(--btn-main-txt))
}

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

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.1333333333rem;
    flex: 0 0 18.1333333333rem;
    margin-right: 3.2rem
}

mcd-period-revenue-goals .goals-box .goals-item+.goals-box-tips {
    margin-top: 2.1333333333rem
}

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

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

mcd-period-revenue-goals .goals-number {
    margin-bottom: 3.2rem
}

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

mcd-period-revenue-goals .progress-bar .bar {
    height: 3.2rem;
    background: var(--referral-partner-progress-bar-bg, var(--form-input-bg))
}

mcd-period-revenue-goals .progress-bar .bar .bar-inner {
    background: var(--referral-partner-progress-bar-inner-bg, linear-gradient(to right, #777777 0%, #222222 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, var(--color-text))
}

mcd-commission-info .menu-box .title {
    margin: 0!important
}

mcd-commission-info .sec+.sec {
    margin-top: 3.2rem
}

mcd-commission-info img {
    margin: 3.2rem 0
}

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

mcd-commission-info .commission-bets-box .sec+.sec {
    border-top: .32rem solid var(--referral-partner-commission-bets-border, var(--color-border))
}

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

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.1333333333rem 0;
    font-size: 4.2666666667rem
}

mcd-income-calculator .income-calculator h1 {
    font-size: 6.4rem;
    font-weight: 700;
    color: var(--referral-partner-income-calculator-title, var(--primary))
}

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

mcd-income-calculator .income-calculator .range-slider-text-input {
    margin: 0 2.1333333333rem;
    padding: 2.1333333333rem;
    border: 0;
    border-radius: 1.0666666667rem;
    background: var(--referral-partner-income-calculator-range-slider-txt-bg, var(--form-input-bg));
    color: var(--referral-partner-income-calculator-range-slider-txt, var(--primary));
    text-align: center
}

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

mcd-income-calculator .income-calculator .range-slider-input::-webkit-slider-thumb {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    background: var(--referral-partner-income-calculator-range-slider-thumb-bg, #222222);
    box-shadow: inset 0 0 .8rem var(--referral-partner-income-calculator-range-slider-shadow-inset, transparent);
    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.6666666667rem
}

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

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

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.0666666667rem
}

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, var(--color-text))
}

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

mcd-total-issued-bonuses .bonuses-box .bonuses-group .bonuses-number {
    color: var(--referral-partner-bonuses-number-txt, var(--content-bg));
    font-size: 5.8666666667rem
}

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

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

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

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

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.3333333333rem;
    height: auto
}

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

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

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

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

mcd-leaderboard .leaderboard-box .leaderboard-number {
    justify-content: left;
    flex: 1;
    color: var(--referral-partner-bonuses-number-txt, var(--primary))
}

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.3333333333rem 3.2rem;
    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, var(--form-input-bg));
    border-radius: .8rem;
    margin-top: 2.6666666667rem
}

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

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

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

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

mcd-requirement .menu-box .title {
    padding: 0;
    font-size: 3.2rem;
    color: var(--referral-partner-condition-title-txt, var(--color-title))
}

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

mcd-requirement .referral-cont .title {
    margin: 2.6666666667rem 0;
    border: 0!important
}

mcd-requirement .referral-cont .title:before {
    display: none
}

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

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

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.0666666667rem);
    margin-bottom: 2.1333333333rem;
    align-items: center;
    text-align: center;
    background: var(--referral-partner-condition-item-bg, var(--content-bg));
    border-radius: 1.0666666667rem;
    padding: 4rem
}

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

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

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

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

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

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

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

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

mcd-referral-bonus-goals .tab-btn-page {
    width: -webkit-fill-available;
    justify-content: flex-start;
    background: transparent
}

mcd-referral-bonus-goals .tab-btn-page .btn {
    min-width: -moz-fit-content;
    min-width: fit-content;
    padding: 0
}

mcd-referral-bonus-goals .tab-btn-page .btn.active .text {
    border: .32rem solid var(--referral-reward-tab-btn-border-active);
    background: var(--referral-reward-tab-btn-bg-active);
    color: var(--referral-reward-tab-btn-txt-active)
}

mcd-referral-bonus-goals .tab-btn-page .btn.active .text:after {
    content: "";
    position: absolute;
    left: -.32rem;
    bottom: -.32rem;
    width: calc(100% + .64rem);
    height: .5333333333rem;
    border-radius: .5333333333rem;
    z-index: 1;
    background: var(--referral-reward-tab-btn-underline-active)
}

mcd-referral-bonus-goals .tab-btn-page .btn .text {
    width: inherit;
    height: 8rem;
    line-height: 8rem;
    margin: 0 .5333333333rem;
    padding: 0 3.2rem;
    border: .32rem solid var(--referral-reward-tab-btn-border);
    border-radius: 1.0666666667rem;
    font-weight: 500;
    background: var(--referral-reward-tab-btn-bg);
    color: var(--referral-reward-tab-btn-txt)
}

mcd-referral-bonus-goals .tab-btn-page .btn .text:hover {
    border: .32rem solid var(--referral-reward-tab-btn-border-hover);
    background: var(--referral-reward-tab-btn-bg-hover);
    color: var(--referral-reward-tab-btn-txt-hover)
}

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

mcd-referral-bonus-goals .tab-btn-block {
    width: 100%;
    margin-top: 6.4rem;
    overflow-x: auto
}

mcd-referral-bonus-goals .achievement-bonus-block {
    position: relative;
    top: -.8rem;
    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 3.2rem;
    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: .2666666667rem;
    background-color: var(--referral-partner-bonus-goals-sub-title-border, var(--color-border));
    flex: 1
}

mcd-referral-bonus-goals .achievement-bonus-box li {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 1.0666666667rem;
    margin: 3.2rem 0;
    padding: 3.2rem;
    background: var(--referral-partner-achievement-list-bg, linear-gradient(to bottom, #ffdb83 0, #ffbb15 100%));
    overflow: hidden
}

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

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.1333333333rem
}

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, var(--color-text));
    margin: 0
}

mcd-referral-bonus-goals .achievement-bonus-box i {
    color: var(--referral-partner-achievement-txt-strong, var(--color-danger));
    font-size: 4rem
}

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: 8rem;
    height: 8rem;
    z-index: 2
}

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

mcd-referral-bonus-goals .achievement-bonus-box .complete-mask:before {
    background: var(--referral-reward-complete-mask)
}

mcd-referral-bonus-goals .achievement-bonus-box .lock-mask:before {
    background: var(--referral-reward-lock-mask)
}

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

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.1333333333rem
}

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

mcd-referral-bonus-goals .progress-bar .bar {
    background: var(--referral-partner-achievement-progress-bar-bg, var(--vip-card-progress-bar-bg));
    box-shadow: none
}

mcd-referral-bonus-goals .progress-bar .bar-inner {
    background: var(--referral-partner-achievement-progress-bar-active, linear-gradient(to right, #777777 0%, #222222 100%));
    box-shadow: none
}

mcd-referral-bonus-goals .progress-bar .bar-inner:after {
    display: none
}

mcd-referral-bonus-goals .menu-box .title-group {
    display: flex;
    justify-content: space-between;
    align-items: center
}

mcd-referral-bonus-goals .menu-box .title-group h2 {
    max-width: 60%
}

mcd-referral-bonus-goals .menu-box .detail-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 1.0666666667rem;
    background: var(--referral-partner-detail-btn-bg, var(--secondary));
    padding: 2.1333333333rem 3.2rem;
    width: auto;
    max-width: 40%;
    height: 9.3333333333rem
}

mcd-referral-bonus-goals .menu-box .detail-btn img {
    width: 4rem;
    height: 4rem
}

mcd-referral-bonus-goals .menu-box .detail-btn span {
    display: inline-block;
    font-size: 3.2rem;
    line-height: 1;
    color: var(--referral-partner-detail-btn-txt, var(--color-text));
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

mcd-referral-bonus-goals .menu-box .detail-btn img+span {
    margin-left: 1.3333333333rem
}

mcd-referral-bonus-goals .pop-bg {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    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: 1.0666666667rem;
    background: var(--referral-partner-bonus-goals-detail-bg, var(--pop-bg-content))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .btn-close {
    cursor: pointer;
    opacity: 1;
    position: relative;
    width: 5rem;
    height: 5rem;
    position: absolute;
    z-index: 2;
    margin: 2.6666666667rem;
    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: .5rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background-color: var(--referral-partner-bonus-goals-detail-btn-close, var(--color-title));
    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: 10rem
}

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.3333333333rem;
    margin: 3.2rem 3.2rem 0;
    background: transparent;
    color: var(--referral-partner-bonus-goals-detail-title-txt, var(--color-text))
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .title p {
    width: 50%;
    padding: 0 2.1333333333rem;
    font-size: 3.4666666667rem;
    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.2rem 2.1333333333rem;
    margin: 2.6666666667rem 0
}

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

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: .2666666667rem;
    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.2666666667rem;
    padding: 0 4.2666666667rem
}

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 li+li {
    margin-top: 2.1333333333rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 3.2rem 2.1333333333rem;
    color: var(--referral-partner-reward-pop-list-txt, var(--color-text));
    font-size: 3.7333333333rem;
    background: var(--referral-partner-reward-pop-list-bg-default, #ffb80c)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span:first-child {
    border-radius: 1.0666666667rem 0 0 1.0666666667rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span:last-child {
    border-radius: 0 1.0666666667rem 1.0666666667rem 0
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list span+span {
    margin-left: 2.1333333333rem
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(1) span {
    background: var(--referral-partner-reward-pop-list-bg-first, #fff8c7)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(2) span {
    background: var(--referral-partner-reward-pop-list-bg-second, #fff4ab)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(3) span {
    background: var(--referral-partner-reward-pop-list-bg-third, #fdf1a1)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(4) span {
    background: var(--referral-partner-reward-pop-list-bg-fourth, #fff08e)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(5) span {
    background: var(--referral-partner-reward-pop-list-bg-fifth, #ffec6b)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(6) span {
    background: var(--referral-partner-reward-pop-list-bg-sixth, #ffe958)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(7) span {
    background: var(--referral-partner-reward-pop-list-bg-seventh, #ffd958)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(8) span {
    background: var(--referral-partner-reward-pop-list-bg-eighth, #ffd23b)
}

mcd-referral-bonus-goals-detail .referral-reward-bonus .reward-bonus-list li:nth-child(9) span {
    background: var(--referral-partner-reward-pop-list-bg-ninth, #ffc63b)
}

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

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

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

mcd-referral-success-pop .show .success-checkmark .check-icon {
    width: 14.1333333333rem;
    height: 14.1333333333rem;
    border: 1.0666666667rem solid var(--referral-partner-success-check-icon-border, var(--color-success))
}

mcd-referral-success-pop .show .success-checkmark .check-icon:after {
    top: 0;
    left: 8rem;
    width: 16rem;
    animation: rotate-circle 4s ease-in;
    border-radius: 0 26.6666666667rem 26.6666666667rem 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.3333333333rem;
    border-radius: .5333333333rem;
    background-color: var(--referral-partner-success-check-icon-color, var(--color-success))
}

mcd-referral-success-pop .show .success-checkmark .check-icon .icon-line.line-tip {
    top: 8rem;
    left: 2.1333333333rem;
    width: 4.8rem;
    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.6666666667rem;
    right: 1.6rem;
    width: 8.5333333333rem;
    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.1333333333rem;
    height: 14.1333333333rem;
    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.2rem;
    line-height: 1.2
}

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

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

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

.referral-reward-bonus-popup .pop-wrap.ani {
    display: flex;
    flex-direction: column
}

.betting-record-list .platform {
    flex: 0 0 20%
}

.betting-record-list .type {
    flex: 0 0 25%
}

.betting-record-list .list-group {
    margin: 0 3.2rem;
    border-radius: 0 0 1.0666666667rem 1.0666666667rem;
    overflow: hidden
}

.betting-record-list .list-content .bet,.betting-record-list .list-content .profit {
    text-align: right
}

.betting-record-list .list-content .profit {
    border: 0
}

.betting-record-list .list-content .list-field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betting-record-list .no-result {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.betting-record-inner-list .list-group {
    border-radius: 0 0 1.0666666667rem 1.0666666667rem;
    margin: 0 3.2rem
}

.betting-record-inner-list .list-content .bet {
    text-align: right
}

.betting-record-inner-list .list-content .list-field.game {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betting-record-inner-list .profit {
    border: 0
}

.betting-record-inner-list .time-zone {
    border: .32rem solid var(--transaction-record-table-body-zone);
    color: var(--transaction-record-table-body-zone)
}

.betting-record-list .list-content li,.betting-record-inner-list .list-content li {
    padding: 0
}

.betting-record-list .list-content .list-field,.betting-record-inner-list .list-content .list-field {
    padding: 2.1333333333rem 1.0666666667rem
}

.content-betting-record .time-zone {
    border: .32rem solid var(--betting-record-table-zone);
    color: var(--betting-record-table-zone)
}

.list-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--betting-record-table-date-area-bg)
}

.list-bar .tip-area {
    display: inline-flex;
    position: relative;
    z-index: 1;
    justify-content: flex-end
}

.list-bar .tip-area .tip-icon {
    display: block;
    width: 8rem;
    height: 8rem;
    background: var(--betting-record-tooltips-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.list-bar .tip-box {
    display: flex;
    position: absolute;
    top: 100%;
    right: 1.0666666667rem;
    flex-direction: column;
    min-height: 0;
    max-height: 0;
    padding: 0 .8rem;
    overflow: hidden;
    transition: all ease-in-out .3s;
    border-radius: 1.0666666667rem;
    background: var(--betting-record-tooltips-bg);
    color: var(--betting-record-tooltips-txt);
    font-size: 3.2rem
}

.list-bar .tip-box.active {
    min-height: 5.3333333333rem;
    max-height: 53.3333333333rem;
    padding: .8rem;
    border: .32rem solid var(--betting-record-tooltips-border)
}

.list-bar .tip-box span {
    display: flex;
    white-space: nowrap;
    padding: 1.0666666667rem 2.1333333333rem
}

.list-bar .tip-box span:before {
    content: "";
    display: block;
    flex: 0 0 2.1333333333rem;
    width: 2.1333333333rem;
    height: 2.1333333333rem;
    margin: 0 1.0666666667rem 0 0;
    border-radius: 50%
}

.list-bar .tip-box span:nth-child(1):before {
    background-color: var(--betting-record-tooltips-revocation)
}

.list-bar .tip-box span:nth-child(2):before {
    background-color: var(--betting-record-tooltips-void)
}

.list-bar .tip-box span:nth-child(3):before {
    background-color: var(--betting-record-tooltips-refund)
}

.list-bar .date-title {
    display: flex;
    align-items: center
}

.betting-record-sum {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3.2rem;
    padding: 3.2rem 0;
    background: var(--betting-details-table-head-bg)
}

.betting-record-sum .item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.4666666667rem;
    line-height: 1.5
}

.betting-record-sum .item+.item {
    border-left: .2666666667rem solid var(--betting-details-table-head-border)
}

.betting-record-sum .item .title {
    color: var(--betting-record-table-head-title);
    font-weight: 500
}

.betting-record-sum .item .text {
    color: var(--betting-record-table-head-txt)
}

.betting-record-sum .item.positive .text {
    color: var(--betting-record-positive-txt)
}

.record-item.settled .item-status {
    display: none
}

.record-item.revocation .item-status {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-revocation),transparent 60%)
}

.record-item.revocation .item-status .tags {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-revocation),transparent 20%)
}

.record-item.void .item-status {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-void),transparent 60%)
}

.record-item.void .item-status .tags {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-void),transparent 20%)
}

.record-item.refund .item-status {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-refund),transparent 60%)
}

.record-item.refund .item-status .tags {
    background-color: color-mix(in srgb,var(--betting-record-tooltips-refund),transparent 20%)
}

.record-item.transaction-record-list {
    grid-template-columns: 1.5fr 1.5fr 1.2fr 1fr;
    padding: 0 2.1333333333rem
}

.record-item.transaction-record-list .item {
    padding: 2.1333333333rem
}

.record-item.transaction-record-list .status {
    padding: 2.1333333333rem 1.0666666667rem
}

.record-item.revocation .list-field,.record-item.void .list-field,.record-item.refund .list-field {
    opacity: .3
}

.item-status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: calc(100% - 4px);
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem
}

.item-status .tags {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    padding: .8rem 1.0666666667rem;
    transform: translate(-50%,-50%);
    border-radius: 1.0666666667rem;
    font-size: 3.2rem;
    font-weight: 500
}

.inbox-list__editor {
    display: flex;
    justify-content: flex-end
}

.inbox-list .editor__btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    background: var(--mail-editor-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 35%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 35%
}

.inbox-list .list-field {
    overflow: visible;
    border: 0
}

.inbox-list .editor-active .chose-btn {
    display: block
}

.inbox-list .editor-active .content-wrap {
    width: 70%
}

.inbox-list .chose-btn {
    display: none;
    flex: 0 0 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    background-color: var(--mail-editor-choose-icon-color);
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: contain
}

.inbox-list .icon {
    position: relative;
    flex: 0 0 8rem;
    height: 8rem;
    padding: 0;
    border-radius: 50%;
    background: var(--mail-notice-icon-circle-bg)
}

.inbox-list .icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 2%;
    right: 2%;
    width: 2.1333333333rem;
    height: 2.1333333333rem;
    border-radius: 50%;
    background-color: var(--color-danger)
}

.inbox-list .icon img {
    display: block;
    position: absolute;
    inset: 0;
    width: 50%;
    margin: auto
}

.inbox-list .content-wrap {
    width: 85%;
    margin-left: 3.2rem;
    padding: 2.1333333333rem 0;
    font-size: 3.7333333333rem;
    line-height: 1.5
}

.inbox-list .content-wrap .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.inbox-list .content-wrap .title span {
    overflow: hidden;
    color: var(--mail-list-title);
    font-size: 4.2666666667rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inbox-list .content-wrap .title .msg-time {
    color: var(--mail-list-txt);
    font-size: 3.4666666667rem
}

.inbox-list .content-wrap .text {
    width: 100%;
    height: 5.0666666667rem;
    overflow: hidden;
    color: var(--mail-list-txt);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left
}

.inbox-list .content-wrap .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inbox-list .list-content {
    padding: 1.0666666667rem 0;
    background: var(--mail-list-bg)
}

.inbox-list .list-content li {
    background: var(--mail-list-bg)
}

.inbox-list .list-content .read .icon:before {
    display: none
}

.inbox-list .list-content .chosed .chose-btn {
    background-color: var(--mail-editor-choose-icon-active)
}

.inbox-list .date-title {
    background: var(--mail-date-bg);
    color: var(--mail-date-txt)
}

.inbox-list .date-title .date i {
    background: var(--mail-date-calendar-icon-color)
}

.inbox-list .date-title .time-zone {
    border: .32rem solid var(--mail-date-zone);
    color: var(--mail-date-zone)
}

.inbox-list .message-item {
    padding: 0 3.2rem
}

@keyframes choseBtn-ani {
    0% {
        transform: translate(0);
        transform-origin: 50px 50px
    }

    to {
        transform: translate(100%);
        transform-origin: 50px 50px
    }
}

.bonus-wallet-wrap {
    display: block;
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--bonuswallet-card-bg);
    overflow: hidden;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.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: 4rem;
    box-shadow: 0 -.5333333333rem 1.0666666667rem #0000061a,inset .2666666667rem .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 90%)
}

.bonus-wallet .title {
    position: relative;
    overflow: hidden;
    color: var(--bonuswallet-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-wallet .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.8rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--bonuswallet-border);
    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.3333333333rem;
    height: 6.9333333333rem;
    padding: 0 1.0666666667rem 0 .2666666667rem;
    border-radius: 8rem 0 0 8rem;
    background-color: var(--promotion-bonuswallet-label-normal);
    color: #fff;
    font-size: 2.9333333333rem
}

.bonus-wallet .wallet-label span {
    display: inline-block;
    width: 6.9333333333rem;
    height: 6.9333333333rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%
}

.bonus-wallet .wallet-label--running {
    background-color: var(--promotion-bonuswallet-label-running)
}

.bonus-wallet .wallet-label--disabled {
    background-color: var(--promotion-bonuswallet-label-disabled)
}

.bonus-wallet .wallet-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 2.6666666667rem;
    border-radius: 1.0666666667rem
}

.bonus-wallet .wallet-inner-left {
    width: 21.8666666667rem;
    height: 21.8666666667rem;
    margin-right: 4rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.bonus-wallet .wallet-inner-right {
    display: flex;
    position: relative;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 70%
}

.bonus-wallet .wallet-inner-right .text {
    margin: auto;
    padding: 2.6666666667rem;
    color: var(--pop-bonuswallet-card-detail);
    font-size: 3.4666666667rem;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.bonus-wallet .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    margin-bottom: 2.6666666667rem
}

.bonus-wallet .card-detail .card-date {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    margin: 0 1.0666666667rem 0 0;
    color: var(--pop-bonuswallet-card-date);
    font-size: 3.2rem
}

.bonus-wallet .card-detail .card-date div {
    line-height: 1.5
}

.bonus-wallet .card-detail .time-zone {
    display: block;
    align-self: flex-start;
    margin: .8rem 1.0666666667rem .8rem 0;
    padding: .5333333333rem 1.0666666667rem;
    border: .32rem solid var(--bonuswallet-zone);
    border-radius: 1.0666666667rem;
    color: var(--bonuswallet-zone);
    font-size: 3.2rem
}

.bonus-wallet .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8rem 0;
    padding: .5333333333rem 1.0666666667rem;
    border: .32rem solid var(--pop-bonuswallet-card-detail);
    border-radius: 1.0666666667rem;
    font-weight: 500
}

.bonus-wallet .card-detail .detail-btn a {
    color: var(--pop-bonuswallet-card-detail);
    font-size: 3.2rem;
    text-decoration: none
}

.bonus-wallet .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: var(--bonuswallet-amount)
}

.bonus-wallet .discount.complete {
    color: var(--bonuswallet-amount-complete)
}

.bonus-wallet .discount.disable {
    color: var(--bonuswallet-amount-disable)
}

.bonus-wallet .discount .currency {
    margin: 1.6rem 1.0666666667rem 0 0;
    font-size: 3.7333333333rem
}

.bonus-wallet .discount .amount {
    padding-bottom: 2.6666666667rem;
    font-size: 5.8666666667rem;
    font-weight: 500
}

.bonus-wallet .discount .turn-hide {
    display: none
}

.bonus-wallet .discount02 {
    display: none;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 2.6666666667rem;
    color: var(--bonuswallet-detail-txt);
    font-size: 3.4666666667rem
}

.bonus-wallet .discount02 .deposit {
    padding-right: 5.3333333333rem
}

.dec-line-wrap {
    position: relative;
    height: 5.3333333333rem
}

.dec-line-wrap .dec-line {
    display: block;
    position: relative;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: .2666666667rem;
    margin: 3.2rem 0;
    background-image: linear-gradient(to right,var(--recommend-dot) 0%,var(--recommend-dot) 10%,transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667rem
}

.bonus-card-down {
    display: block;
    position: relative;
    padding: 2.1333333333rem 3.2rem 3.2rem;
    border-radius: 0 0 2.6666666667rem 1.0666666667rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #0000001a
}

.bonus-card-down .card-down-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border-radius: 1.0666666667rem
}

.bonus-card-down .card-down-inner .turn-hide {
    display: none
}

.bonus-card-down .card-down-inner-right {
    position: relative;
    min-width: 29.3333333333rem;
    margin-left: 2.6666666667rem
}

.bonus-card-down .card-down-inner-right .btn {
    min-width: 29.3333333333rem;
    min-height: 7.4666666667rem;
    margin: auto;
    border-radius: 1.0666666667rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
    font-size: 3.4666666667rem;
    line-height: 7.4666666667rem;
    text-align: center
}

.bonus-card-down .card-down-inner-right .btn--start {
    background: var(--bonuswallet-claim-btn-bg);
    color: var(--bonuswallet-claim-btn-txt)
}

.bonus-card-down .card-down-inner-right .btn--cancel {
    background: var(--bonuswallet-cancel-btn-bg);
    color: var(--bonuswallet-cancel-btn-txt)
}

.bonus-card-down .card-down-inner-right .btn--receive {
    background: var(--bonuswallet-receive-btn-bg);
    color: var(--bonuswallet-receive-btn-txt)
}

.bonus-card-down .card-down-inner-right .btn--disabled {
    background: var(--bonuswallet-disabled-btn-bg);
    color: var(--bonuswallet-disabled-btn-txt)
}

.bonus-card-down .card-down-inner-right .btn--working {
    background: var(--bonuswallet-working-btn-bg);
    color: var(--bonuswallet-working-btn-txt)
}

.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.7333333333rem;
    height: 11.4666666667rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img img {
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%)
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .back {
    z-index: 3;
    filter: drop-shadow(.5333333333rem .5333333333rem .5333333333rem rgba(45,45,45,.1)) drop-shadow(1.0666666667rem 1.0666666667rem 1.0666666667rem rgba(49,49,49,.1)) drop-shadow(2.1333333333rem 2.1333333333rem 2.1333333333rem rgba(42,42,42,.1)) drop-shadow(3.2rem 3.2rem 3.2rem rgba(32,32,32,.1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .front {
    z-index: 5;
    filter: drop-shadow(1.0666666667rem 1.0666666667rem 1.0666666667rem 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.3333333333rem;
    height: 5.3333333333rem;
    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: -4rem;
    left: 8.8rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-2 {
    top: -5.3333333333rem;
    left: 5.3333333333rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-3 {
    top: -4rem;
    left: 1.0666666667rem
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-4 {
    top: -3.2rem;
    left: 4.8rem
}

.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: 8rem;
    height: 8rem;
    overflow: hidden
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li span {
    display: block;
    z-index: 2;
    width: 8rem;
    height: 8rem;
    background-repeat: no-repeat;
    background-position: 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;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: var(--bonuswallet-amount)
}

.bonus-card-down .card-down-inner .bonus-left .bonus-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 3.4666666667rem;
    padding: 1.0666666667rem 0
}

.bonus-card-down .card-down-inner .bonus-left .currency {
    padding: 0 .8rem 0 2.1333333333rem;
    font-size: 3.7333333333rem
}

.bonus-card-down .card-down-inner .bonus-left .bonus-number {
    font-size: 4.8rem;
    font-weight: 500
}

.bonus-card-down .card-down-inner .bonus-left .bonus-tips {
    transform: scale(.9);
    transform-origin: left;
    padding: .8rem 0;
    color: var(--bonuswallet-detail-txt);
    font-size: 3.4666666667rem
}

.turn-gray {
    filter: grayscale(100%) brightness(140%)
}

.turn-gray2 {
    filter: grayscale(100%) brightness(120%)
}

.turn-hide {
    display: none!important
}

.turn-show {
    display: flex!important
}

.bgcolor-gray {
    background: var(--bonuswallet-card-bg-completed)
}

@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: 122;
    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;
    left: 50%;
    bottom: -100%;
    width: 100%;
    transform: translate(-50%);
    transition: bottom .3s;
    background: var(--pop-bg-content);
    color: var(--pop-bonuswallet-txt)
}

.pop-wrap3.active {
    bottom: 0;
    transition: bottom .3s
}

.pop-wrap3 {
    border-radius: 5.3333333333rem 5.3333333333rem 0 0;
    color: var(--color-title);
    line-height: 1.5
}

.pop-wrap3 .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12rem;
    height: 12rem;
    background: var(--pop-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%
}

.pop-wrap3 .title-wrap {
    display: flex;
    position: relative
}

.pop-wrap3 .title-wrap .btn-back {
    display: block;
    position: relative;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    -webkit-text-decoration: block;
    text-decoration: block
}

.pop-wrap3 .title-wrap .btn-back.btn-back-show {
    display: block
}

.pop-wrap3 .title-wrap .btn-back div {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    overflow: hidden;
    transform: scale(1);
    transition: transform .4s 0s cubic-bezier(.2,0,0,1.6);
    border-radius: 50%
}

.pop-wrap3 .title-wrap .btn-back div:after {
    content: "";
    position: absolute;
    top: 0;
    left: -2.1333333333rem;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    transition: transform .4s 0s cubic-bezier(.2,0,0,1);
    background: var(--pop-bonuswallet-lvup-back-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 40%
}

.pop-wrap3 .title-wrap .btn-back:hover div {
    border: .32rem solid #8d8d8d
}

.pop-wrap3 .title-wrap .btn-back:hover div:after {
    transform: translate(-50%)
}

.pop-wrap3 .title-wrap .title {
    margin-bottom: 3.2rem;
    color: var(--pop-bonuswallet-title);
    font-size: 4.2666666667rem;
    line-height: 1.5
}

.pop-wrap3 .title-wrap .title .tips {
    color: color-mix(in srgb,var(--pop-bonuswallet-title),transparent 40%);
    font-size: 3.4666666667rem
}

.pop-wrap3 .inner-wrap {
    display: flex;
    flex-direction: row;
    width: auto;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s;
    -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: 3.2rem
}

.pop-wrap3 .inner-wrap .inner-left {
    transform: translate(0)
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    height: auto;
    padding: 3.2rem
}

.pop-wrap3 .inner-wrap .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100rem;
    height: 0;
    padding: 0;
    overflow: hidden
}

.pop-wrap3 .bottom-wrap .tips2 {
    margin-bottom: 3.2rem;
    color: var(--pop-bonuswallet-tips);
    font-size: 3.4666666667rem;
    text-align: center
}

.reel-box {
    display: block;
    margin-bottom: 3.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.lvup-select-wrap {
    display: grid;
    grid-gap: 3.2rem;
    grid-template-columns: repeat(2,1fr)
}

.lvup-select-wrap .event {
    display: block;
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.lvup-select-wrap .event-click {
    border: .32rem solid var(--pop-bonuswallet-lvup-check)
}

.lvup-select-wrap .event-click:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5.3333333333rem;
    height: 4.2666666667rem;
    transition: all .3s;
    opacity: 1;
    background: var(--pop-bonuswallet-lvup-check);
    mask: url(/assets/images/player/select-check.svg) no-repeat top center/cover;
    -webkit-mask: url(/assets/images/player/select-check.svg) no-repeat top center/cover
}

@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
    }
}

.lvup-event-detail {
    display: none;
    width: 100%;
    height: 0;
    max-height: 58.6666666667rem;
    margin-bottom: 3.2rem;
    padding: 3.2rem;
    overflow-y: scroll;
    border-radius: 1.0666666667rem;
    background: var(--pop-bonuswallet-lvup-tips-bg);
    -webkit-overflow-scrolling: touch
}

.lvup-event-detail.active {
    display: block;
    height: auto;
    min-height: 26.6666666667rem;
    animation: scale-in-ver-top .5s both
}

.lvup-event-detail .event-title {
    position: relative;
    margin: 0;
    overflow: hidden;
    color: var(--pop-bonuswallet-lvup-tips-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lvup-event-detail .event-detail {
    color: var(--pop-bonuswallet-lvup-tips-title);
    font-size: 3.4666666667rem
}

.lvup-event-detail .event-date {
    margin-top: 1.0666666667rem;
    color: var(--pop-bonuswallet-lvup-tips-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.lvup-event-detail .event-date:before {
    content: "";
    display: inline-block;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 1.0666666667rem;
    background: var(--pop-bonuswallet-lvup-tips-date-icon-color);
    vertical-align: middle;
    mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/80%;
    -webkit-mask: url(/assets/images/icon-set/icon-clock.svg) no-repeat center/80%
}

.bonus-event {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    width: 100%;
    height: 29.3333333333rem;
    margin-bottom: 2.6666666667rem;
    padding: 2.6666666667rem 4.8rem;
    border-radius: 1.0666666667rem;
    background: var(--pop-bonuswallet-card-bg);
    box-shadow: 0 .8rem 1.0666666667rem #0000001f
}

.bonus-event:last-child {
    margin-bottom: 0
}

.bonus-event-left {
    width: 70%
}

.bonus-event-left .title {
    position: relative;
    margin-top: 2.6666666667rem;
    overflow: hidden;
    color: var(--pop-bonuswallet-card-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-event-left .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin: 0 2.6666666667rem 0 0;
    border-radius: 1.0666666667rem;
    background: var(--pop-bonuswallet-card-border);
    vertical-align: sub
}

.bonus-event-left .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start
}

.bonus-event-left .card-detail .card-date {
    margin: auto 0;
    color: var(--pop-bonuswallet-card-date);
    font-size: 3.2rem
}

.bonus-event-left .card-detail .detail-btn {
    display: flex;
    margin-left: 1.0666666667rem;
    padding: 0 1.0666666667rem;
    border: .32rem solid var(--pop-bonuswallet-card-detail);
    border-radius: 1.0666666667rem;
    font-weight: 500
}

.bonus-event-left .card-detail .detail-btn a {
    color: var(--pop-bonuswallet-card-detail);
    font-size: 3.2rem;
    text-decoration: none
}

.bonus-event-left .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: var(--pop-bonuswallet-card-amount)
}

.bonus-event-left .discount .currency {
    margin: 2.1333333333rem 1.0666666667rem 0 0;
    font-size: 3.7333333333rem
}

.bonus-event-left .discount .amount {
    padding-bottom: 2.6666666667rem;
    font-size: 5.8666666667rem;
    font-weight: 500
}

.bonus-event-right {
    width: 30%
}

.bonus-event-right .btn {
    min-width: 18.6666666667rem;
    min-height: 7.4666666667rem;
    margin: auto;
    border-radius: 1.0666666667rem;
    background: var(--pop-bonuswallet-card-start-btn);
    box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
    color: var(--pop-bonuswallet-card-start-txt);
    font-size: 3.4666666667rem;
    line-height: 7.4666666667rem;
    text-align: center
}

.bonus-event .notch-l {
    position: absolute;
    left: 0;
    width: 2.1333333333rem;
    height: 4rem;
    border-radius: 0 50% 50% 0;
    background: var(--pop-bg-content)
}

.bonus-event .notch-r {
    position: absolute;
    right: 0;
    width: 2.1333333333rem;
    height: 4rem;
    border-radius: 50% 0 0 50%;
    background: var(--pop-bg-content)
}

.deposit-acc-info-box {
    margin: 4rem 0 0;
    padding: 4rem;
    border-radius: 1.0666666667rem;
    background: var(--wallet-account-info-bg);
    font-size: 3.4666666667rem
}

.deposit-acc-info-box p {
    flex: 1;
    margin-right: 2.6666666667rem;
    opacity: .7;
    color: var(--wallet-account-info-txt);
    text-align: right;
    word-break: break-word
}

.acc-info li {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 2.6666666667rem;
    padding-bottom: 1.0666666667rem;
    border-bottom: .2666666667rem solid var(--wallet-account-info-border);
    line-height: 1.5
}

.acc-info li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

.acc-info li.active .icon-copy {
    display: block;
    animation: tips-txt-show .3s linear forwards
}

.acc-info li.hide .icon-copy {
    display: block;
    animation: tips-txt-hide .2s linear forwards
}

.acc-info label {
    flex: 0 0 45%;
    padding-right: 1.0666666667rem;
    font-weight: 500;
    color: var(--wallet-account-info-txt)
}

.icon-copy {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 2.6666666667rem;
    padding: 1.0666666667rem 2.6666666667rem;
    border-radius: 1.0666666667rem;
    opacity: 0;
    background: var(--wallet-bank-card-copy-tooltips-bg);
    box-shadow: 0 0 .5333333333rem #99999980;
    font-size: 3.4666666667rem;
    color: var(--wallet-bank-card-copy-tooltips-txt);
    line-height: 1.5;
    transform: translateY(-100%)
}

.icon-copy:before {
    content: "";
    position: absolute;
    right: 2.6666666667rem;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: var(--wallet-bank-card-copy-tooltips-bg) transparent transparent
}

.maintain-mask {
    display: none
}

.under-maintain {
    pointer-events: none
}

.under-maintain .maintain-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    border-radius: 1.0666666667rem;
    background: var(--wallet-maintain-bg)
}

.under-maintain .maintain-tag {
    padding: .8rem 1.0666666667rem;
    border-radius: 1.0666666667rem;
    line-height: 1
}

.under-maintain .maintain-tag img {
    display: inline-block;
    margin-right: .8rem
}

.under-maintain .maintain-tag .text {
    display: inline-block;
    color: var(--wallet-maintain-txt);
    font-size: 3.2rem;
    line-height: 1.2
}

.option-group {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 2.6666666667rem
}

.option-group label {
    position: relative;
    height: 6.4rem;
    overflow: hidden;
    color: var(--form-txt);
    font-weight: 500;
    line-height: 6.4rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333rem
}

.option-group select {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 8.5333333333rem 0 3.2rem;
    border: 0;
    border-radius: 1.0666666667rem;
    outline: none;
    background-color: var(--form-input-bg);
    color: var(--form-input-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 3.4666666667rem;
    appearance: none
}

.option-group select option {
    font-size: 3.4666666667rem
}

.option-group select:disabled {
    border-bottom: .2666666667rem solid var(--form-input-border-disabled);
    border-radius: 0;
    background: none
}

.option-group h2 {
    position: relative;
    width: 100%;
    padding-left: 3.2rem;
    color: var(--color-title);
    font-size: 4rem;
    font-weight: 500;
    line-height: 2
}

.option-group h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 0;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 1.0666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--wallet-title-border);
    vertical-align: middle
}

.option-group.select-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 3.2rem;
    padding: 2.1333333333rem 0 2.1333333333rem 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--form-box-bg)
}

.option-group.select-bar .option-wrap {
    width: 100%;
    background-color: transparent
}

.option-group.select-bar select {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: transparent;
    color: var(--form-input-txt);
    text-align-last: right;
    text-overflow: ellipsis;
    white-space: nowrap
}

.option-group.select-bar option {
    background: var(--form-input-bg);
    color: var(--form-input-txt)
}

.option-wrap {
    position: relative;
    width: 100%;
    border-radius: 1.0666666667rem
}

.option-wrap:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 3.2rem;
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

.player-deposit-step2 .qrcode.noCreditCardTemplate {
    top: 0;
    right: 3.2rem
}

.button.btn-primary.contact_cs {
    margin: 2.1333333333rem
}

.bank-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center
}

.bank-qrcode .deposit-qrcode {
    width: 80%;
    margin-bottom: 4.2666666667rem;
    border-radius: 1.0666666667rem
}

.bank-qrcode .button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80%
}

.bank-qrcode .item-icon {
    display: block;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-left: 4.2666666667rem;
    background: var(--wallet-qrcode-icon);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

@keyframes tips-txt-show {
    0% {
        top: -13.3333333333rem;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes tips-txt-hide {
    0% {
        top: 0;
        opacity: 1
    }

    to {
        top: -13.3333333333rem;
        opacity: 0
    }
}

.playerform-content .button {
    height: 12rem;
    margin: 3.2rem;
    line-height: 12rem
}

.playerform-content .verify-tips {
    margin-bottom: 4rem
}

.drop-down-menu {
    margin-bottom: 2.6666666667rem;
    overflow: hidden;
    border: .32rem solid var(--accordion-add-bank-card-title-bg);
    border-radius: 1.0666666667rem;
    background: var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu:last-child {
    margin-bottom: 0
}

.drop-down-menu.under-review {
    border: .32rem solid var(--accordion-review);
    background: var(--accordion-review)
}

.drop-down-menu.success {
    border: .32rem solid var(--accordion-success);
    background: var(--accordion-success)
}

.drop-down-menu.failed {
    border: .32rem solid var(--accordion-failed);
    background: var(--accordion-failed)
}

.drop-down-menu.bankcard {
    border: .32rem solid var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu.bankcard .drop-down-menu-btn.add-bank-card {
    background: var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease-in-out
}

.drop-down-menu-content .menu-box {
    margin: 0;
    border-radius: 0;
    box-shadow: none
}

.drop-down-menu-content.show {
    height: auto;
    max-height: 2000px
}

.drop-down-menu.verify-menu {
    margin-top: 2.1333333333rem
}

.drop-down-menu .phone-area-code {
    flex: 0 0 35%
}

.drop-down-menu .phone-code-list {
    top: 68rem;
    left: 8.8rem;
    width: 25.0666666667rem;
    max-height: 24rem
}

.drop-down-menu-btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    height: 13.3333333333rem;
    padding: 0 8rem 0 2.6666666667rem;
    border-radius: 2.1333333333rem 2.1333333333rem 0 0;
    color: var(--accordion-color-bg-title)
}

.drop-down-menu-btn:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4rem;
    transform: translateY(-25%);
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--accordion-triangle) transparent transparent
}

.drop-down-menu-btn.drop-downn-menu-btn-verify {
    justify-content: center
}

.drop-down-menu-btn.drop-downn-menu-btn-verify:after {
    display: none
}

.drop-down-menu-btn .icon {
    display: flex;
    flex: none;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 4rem 0 1.0666666667rem
}

.drop-down-menu-btn .icon img {
    display: block;
    width: 100%;
    margin: auto
}

.drop-down-menu-btn .text {
    overflow: hidden;
    font-size: 3.4666666667rem;
    line-height: 11.7333333333rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.recommend-friends-box {
    width: auto;
    height: auto;
    margin: 3.2rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-detail-box-bg)
}

.recommend-friends-box.deco {
    margin-top: 17.0666666667rem
}

.recommend-friends-box .deco-box {
    position: relative;
    height: 17.0666666667rem
}

.recommend-friends-box .deco-box .deco-img {
    display: block;
    position: relative;
    width: 32rem;
    height: 32rem;
    margin: auto;
    overflow: hidden;
    transform: translateY(-50%);
    background: var(--recommend-gift-bg);
    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 .deco-box .deco-img video {
    width: 32rem;
    height: 32rem
}

.recommend-friends-box .deco-box .deco-img .img-ios-gift {
    top: 45%;
    width: 32rem;
    height: 32rem
}

.recommend-friends-box .title {
    width: 100%;
    line-height: 9.3333333333rem
}

.recommend-friends-box .title h2 {
    color: var(--recommend-title);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.recommend-friends-box .title h2 span {
    display: inline-block;
    vertical-align: middle
}

.recommend-friends-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.6666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--recommend-border);
    vertical-align: middle
}

@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 {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between
}

.code-box:after {
    content: "";
    display: block;
    position: relative;
    bottom: 0;
    width: 100%;
    height: .32rem;
    margin: 6.4rem 0;
    background: var(--recommend-dot)
}

.code-box p {
    width: 100%;
    padding-bottom: 2.6666666667rem;
    line-height: 1.3;
    font-size: 3.4666666667rem;
    color: var(--recommend-txt)
}

.code-box .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex: 2;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    border: .32rem solid var(--recommend-input-border)
}

.code-box .code span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    max-width: calc(100% - 10.6666666667rem);
    width: calc(100% - 10.6666666667rem);
    height: 10.6666666667rem;
    padding: 0 3.2rem;
    color: var(--vip-detail-txt);
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 4.8rem
}

.code-box .code .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    padding: 1.0666666667rem 2.6666666667rem;
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    transition: all .3s;
    background: var(--recommend-input-btn)
}

.code-box .code .btn:active {
    opacity: .7
}

.code-box .btn-share {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: .8;
    background: var(--recommend-share-btn);
    border-radius: 1.0666666667rem;
    font-size: 3.7333333333rem;
    font-weight: 500;
    color: var(--recommend-share-txt);
    margin-left: 2.6666666667rem;
    padding: 0 2.6666666667rem
}

.condition-box .title {
    display: flex;
    align-items: center;
    margin-bottom: 3.2rem;
    color: var(--recommend-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    line-height: 1.2
}

.condition-box .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.6666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--recommend-border);
    vertical-align: middle
}

.condition-box .item {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    font-size: 3.2rem;
    font-weight: 500
}

.condition-box .item+.item {
    margin-top: 2.1333333333rem
}

.condition-box .item .condition {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    line-height: 1.2;
    color: var(--recommend-condition-title)
}

.condition-box .item .condition:before {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 2.6666666667rem 0 0;
    border-radius: 50%;
    background: var(--recommend-condition-dot)
}

.condition-box .item .text {
    width: 65%;
    height: 10.6666666667rem;
    line-height: 10.6666666667rem;
    color: var(--vip-detail-card-txt);
    border-radius: 1.0666666667rem;
    background-color: var(--recommend-condition-bg);
    padding: 0 3.2rem
}

.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.0666666667rem;
    text-align: center
}

.status-box .status.accept {
    position: relative
}

.status-box .status.accept:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .32rem;
    height: 100%;
    background: var(--recommend-dot)
}

.status-box .status.accept:last-child:after {
    background: none
}

.status-box .status.accept .number {
    color: var(--vip-detail-highlight-txt)
}

.status-box .status .number {
    font-size: 8rem;
    margin-bottom: 2.1333333333rem;
    font-weight: 600
}

.status-box .status .text {
    color: var(--vip-detail-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.terms {
    text-align: center
}

.terms .terms-link {
    display: inline-block;
    margin: auto;
    color: var(--recommend-terms-link);
    font-size: 3.2rem;
    font-weight: 500;
    transition: all .3s;
    text-decoration: underline
}

.date-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 3.2rem
}

.date-bar .text {
    display: block;
    font-size: 3.4666666667rem;
    padding: 0 .8rem;
    color: var(--recommend-rewards-datepicker-txt)
}

.date-bar .date-input {
    width: 35%
}

.date-bar .date-input:before {
    left: auto;
    right: 0;
    width: 9.3333333333rem;
    margin: 0;
    height: 8rem
}

.date-bar .date-input input {
    width: 100%;
    padding: 0
}

.btn-submit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 20%;
    border-radius: 1.0666666667rem;
    padding: 0 1.0666666667rem;
    margin-left: 1.0666666667rem;
    height: 8rem;
    line-height: 8rem;
    color: var(--btn-main-txt);
    text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb,var(--text-shadow),transparent 60%);
    background: var(--btn-main-bg);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-align: center
}

.list-status {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 3.2rem
}

.list-status .title {
    color: var(--vip-detail-card-txt);
    font-size: 3.4666666667rem
}

.list-status img {
    width: 4.2666666667rem;
    margin: 0 1.0666666667rem
}

.list-status .text {
    font-size: 3.2rem
}

.list-status div {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.list-status .pending .text {
    color: var(--recommend-pending-txt)
}

.list-status .expired {
    margin-left: 2.6666666667rem
}

.list-status .expired .text {
    color: var(--recommend-expired-txt)
}

.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: 16rem;
    height: 16rem;
    transform: translate(-50%,-50%) scale(0);
    border: solid 8rem #ffe75a
}

.spread .circle {
    width: .375rem;
    height: .375rem;
    margin: -.1875rem;
    box-shadow: .3247595264rem -6.1875rem 0 -.1875rem #ff8080,-.3247595264rem -5.8125rem 0 -.1875rem #ffed80,5.0400665505rem -3.603935927rem 0 -.1875rem #ffed80,4.3419112394rem -3.8779416952rem 0 -.1875rem #a4ff80,5.9601006635rem 1.6934654059rem 0 -.1875rem #a4ff80,5.739034332rem .9767858111rem 0 -.1875rem #80ffc8,2.3920574129rem 5.7156527478rem 0 -.1875rem #80ffc8,2.8145503072rem 5.0959743279rem 0 -.1875rem #80c8ff,-2.9772538586rem 5.4338369925rem 0 -.1875rem #80c8ff,-2.2292640758rem 5.3778130146rem 0 -.1875rem #a480ff,-6.104632245rem 1.0602311526rem 0 -.1875rem #a480ff,-5.5928411824rem 1.6105369557rem 0 -.1875rem #ff80ed,-4.6350976008rem -4.1117502783rem 0 -.1875rem #ff80ed,-4.7246417338rem -3.3623215902rem 0 -.1875rem #ff8080
}

.member-menu-shortcut .spread {
    z-index: 1;
    top: 35%
}

.member-menu-shortcut .spread .bubble {
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    border: solid 4rem color-mix(in srgb,var(--sidenav-set-shortcut-set-icon-color),transparent 50%)
}

.member-menu-shortcut .spread .circle {
    width: 1.0666666667rem;
    height: 1.0666666667rem;
    margin: .5333333333rem;
    box-shadow: .3247595264rem -3.1875rem 0 -.1875rem #ff8080,-.3247595264rem -2.8125rem 0 -.1875rem #ffed80,2.6945721031rem -1.7334665214rem 0 -.1875rem #ffed80,1.996416792rem -2.0074722897rem 0 -.1875rem #a4ff80,3.0353169269rem 1.025902604rem 0 -.1875rem #a4ff80,2.8142505954rem .3092230092rem 0 -.1875rem #80ffc8,1.0904061956rem 3.0127461441rem 0 -.1875rem #80ffc8,1.5128990899rem 2.3930677242rem 0 -.1875rem #80c8ff,-1.6756026413rem 2.7309303888rem 0 -.1875rem #80c8ff,-.9276128584rem 2.6749064109rem 0 -.1875rem #a480ff,-3.1798485085rem .3926683507rem 0 -.1875rem #a480ff,-2.6680574459rem .9429741538rem 0 -.1875rem #ff80ed,-2.2896031695rem -2.2412808754rem 0 -.1875rem #ff80ed,-2.3791473025rem -1.4918521873rem 0 -.1875rem #ff8080
}

@keyframes bubble {
    0% {
        transform: translate(-50%,-50%) scale(0)
    }

    10% {
        transform: translate(-50%,-50%) scale(1);
        border-width: 8rem
    }

    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.9875rem #ff8080,-.3247595264rem -4.6125rem #ffed80,4.1018687716rem -2.8557481648rem #ffed80,3.4037134604rem -3.129753933rem #a4ff80,4.7901871689rem 1.4264402852rem #a4ff80,4.5691208374rem .7097606903rem #80ffc8,1.871396926rem 4.6344901063rem #80ffc8,2.2938898203rem 4.0148116864rem #80c8ff,-2.4565933717rem 4.352674351rem #80c8ff,-1.7086035888rem 4.2966503731rem #a480ff,-4.9347187504rem .7932060319rem #a480ff,-4.4229276878rem 1.3435118349rem #ff80ed,-3.6968998283rem -3.3635625171rem #ff80ed,-3.7864439613rem -2.614133829rem #ff8080
    }
}

@keyframes setsparkles {
    0%,35% {
        opacity: 0
    }

    40% {
        opacity: 1;
        box-shadow: .3247595264rem -2.7675rem 0 -.05625rem #ff8080,-.3247595264rem -2.3925rem 0 -.05625rem #ffed80,2.3662028805rem -1.4716008047rem 0 -.05625rem #ffed80,1.6680475694rem -1.7456065729rem 0 -.05625rem #a4ff80,2.6258472038rem .9324438118rem 0 -.05625rem #a4ff80,2.4047808723rem .2157642169rem 0 -.05625rem #80ffc8,.9081750251rem 2.6343392196rem 0 -.05625rem #80ffc8,1.3306679195rem 2.0146607997rem 0 -.05625rem #80c8ff,-1.4933714708rem 2.3525234643rem 0 -.05625rem #80c8ff,-.745381688rem 2.2964994864rem 0 -.05625rem #a480ff,-2.7703787854rem .2992095585rem 0 -.05625rem #a480ff,-2.2585877228rem .8495153615rem 0 -.05625rem #ff80ed,-1.9612339491rem -1.979415159rem 0 -.05625rem #ff80ed,-2.0507780821rem -1.2299864709rem 0 -.05625rem #ff8080
    }
}

.complete-time {
    color: var(--recommend-complete-txt)
}

.complete-time.pending {
    color: var(--color-warning)
}

.complete-time.expired {
    color: var(--color-danger)
}

.complete-time img {
    width: 4.2666666667rem
}

.complete-time .text {
    margin-left: 1.0666666667rem;
    text-align: left
}

.recommend-friends-list .list-content {
    margin: 0 3.2rem
}

.recommend-friends-list .list-content .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.recommend-friends-list .list-content .pending,.recommend-friends-list .list-content .expired {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center
}

.recommend-friends-list .no-result {
    margin-top: 0
}

.biometric-info {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem;
    text-align: center
}

.biometric-info .biometric-animation {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 58.6666666667rem;
    height: 58.6666666667rem;
    margin: 21.3333333333rem auto
}

.biometric-info .biometric-animation .graduations .graduation {
    top: 2.4074074074rem;
    transform-origin: 0 26.962962963rem;
    display: block;
    position: absolute;
    left: 50%;
    width: .8rem;
    height: 2.6666666667rem;
    transform: rotate(0) trargb(7,8,7) -50%;
    border-radius: 1.0666666667rem;
    background: var(--biometric-wave-line-cirle)
}

.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 .biometric-animation video,.biometric-info .biometric-animation img {
    width: 32rem;
    height: 32rem
}

.biometric-info h3 {
    margin-bottom: 1.0666666667rem;
    color: var(--biometric-txt);
    font-size: 4rem;
    font-weight: 700
}

.biometric-info p {
    width: inherit;
    margin-bottom: 5.3333333333rem;
    color: color-mix(in srgb,var(--biometric-txt),transparent 50%);
    font-size: 3.4666666667rem;
    line-height: 1.6
}

.biometric-switch {
    position: relative;
    width: 18.9333333333rem;
    height: 10.6666666667rem;
    margin: 0 auto;
    padding: 0 2.6666666667rem;
    transition: all .3s;
    border-radius: 10.6666666667rem;
    background: color-mix(in srgb,var(--biometric-switch-bg),transparent 50%);
    color: var(--sidenav-category-txt);
    font-size: 3.4666666667rem;
    line-height: 10.6666666667rem
}

.biometric-switch span {
    position: absolute;
    top: 1.0666666667rem;
    left: 1.0666666667rem;
    width: 8rem;
    height: 8rem;
    transition: all .3s;
    border-radius: 50%;
    background-repeat: no-repeat
}

.biometric-switch.active {
    background-color: var(--biometric-switch-bg);
    text-indent: 8rem
}

.biometric-switch.active span {
    top: 1.0666666667rem;
    left: 9.6rem
}

.pop-biometric-success {
    display: none
}

.face-id-wrapper {
    position: relative;
    width: 32rem;
    height: 32rem;
    margin: 0 auto 2.1333333333rem
}

.face-id-wrapper video {
    width: 100%
}

@keyframes line-wave {
    0% {
        box-shadow: 0 -.2666666667rem 0 var(--biometric-wave-line-ani)
    }

    1% {
        box-shadow: 0 -.5333333333rem 0 var(--biometric-wave-line-ani)
    }

    2% {
        box-shadow: 0 -.8rem 0 var(--biometric-wave-line-ani)
    }

    3% {
        box-shadow: 0 -1.0666666667rem 0 var(--biometric-wave-line-ani)
    }

    4% {
        box-shadow: 0 -1.3333333333rem 0 var(--biometric-wave-line-ani)
    }

    5% {
        box-shadow: 0 -1.6rem 0 var(--biometric-wave-line-ani)
    }

    6% {
        box-shadow: 0 -1.8666666667rem 0 var(--biometric-wave-line-ani)
    }

    7% {
        box-shadow: 0 -2.1333333333rem 0 var(--biometric-wave-line-ani)
    }

    24% {
        box-shadow: 0 0 0 var(--biometric-wave-line-ani)
    }

    25% {
        background-color: var(--biometric-wave-line-gradient-start);
        box-shadow: 0 0 0 var(--content-bg)
    }

    to {
        background-color: var(--biometric-wave-line-gradient-end);
        box-shadow: 0 0 0 var(--content-bg)
    }
}

.main-wallet-info {
    width: 100%;
    padding: 3.2rem;
    zoom:1}

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

.main-wallet-info h4 {
    display: inline-block;
    width: 95%;
    font-size: 9.3333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    text-align: right
}

.main-wallet-info h5 {
    display: inline-block;
    width: 5%;
    font-size: 6.4rem;
    font-weight: 500
}

.operating-wallet {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.operating-wallet button,.operating-wallet .btn-renew {
    min-width: 21.3333333333rem;
    margin: 0 1.0666666667rem 0 0;
    padding: 0 4rem;
    border: 0;
    border-radius: 8rem;
    outline: none;
    box-shadow: inset 0 .2666666667rem .2666666667rem #ffffff80,0 0 .5333333333rem .2666666667rem #0003;
    color: var(--btn-main-txt);
    font-size: 3.4666666667rem;
    line-height: 8rem;
    text-align: center
}

.operating-wallet button:last-child,.operating-wallet .btn-renew:last-child {
    margin-right: 0
}

.operating-wallet .btn-take-back {
    background: var(--pop-transfer-btn-take-back)
}

.operating-wallet .btn-other-account {
    background: var(--pop-transfer-btn-other-account)
}

.operating-wallet .btn-renew {
    background: var(--pop-transfer-btn-other-renew)
}

.operating-wallet .btn-renew img {
    width: 3.2rem;
    margin-right: 1.0666666667rem
}

.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;
    width: 100%;
    align-items: center;
    line-height: 2
}

.renew-main-wallet.active .icon-refresh {
    animation: rotate 1s forwards
}

.renew-main-wallet span {
    font-size: 3.4666666667rem;
    font-weight: 500
}

.renew-main-wallet .icon-refresh {
    display: inline-block;
    width: 3.2rem;
    height: 3.2rem;
    margin-left: 2.1333333333rem;
    background: var(--pop-transfer-wallet-refresh-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    cursor: pointer
}

.content-transfer {
    overflow: hidden
}

.content-transfer .menu-box {
    padding: 2.6666666667rem
}

.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;
    right: 2.6666666667rem;
    bottom: 18%;
    transform: translateY(-25%);
    border-width: 1.0666666667rem;
    border-style: solid;
    border-color: var(--form-select-triangle) transparent transparent
}

.select-box label {
    display: block;
    font-size: 3.7333333333rem;
    line-height: 2
}

.select-box select {
    display: block;
    position: relative;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0 2.6666666667rem;
    border: 0;
    border-radius: 1.0666666667rem;
    outline: none;
    color: var(--wallet-account-info-txt);
    appearance: none
}

.pop-other-account {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    left: 0;
    width: 100%;
    min-height: 20vh;
    max-height: 85vh;
    padding: 4rem 5%;
    overflow: hidden;
    transition: .4s;
    border-radius: 2.6666666667rem 2.6666666667rem 0 0;
    background: var(--pop-bg-content)
}

.pop-other-account.active {
    bottom: 0
}

.pop-other-account .menu-box {
    padding: 0
}

.pop-other-account .button {
    height: 12rem;
    line-height: 12rem
}

.account-count {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 72vh;
    margin-top: 2.6666666667rem;
    overflow-x: hidden;
    overflow-y: auto
}

.secondary-money-info {
    min-width: 84%;
    margin-top: 2.1333333333rem;
    padding: 1.0666666667rem 3.2rem;
    float: right;
    border: .32rem solid var(--pop-transfer-bonus-border);
    border-radius: 8rem;
    background: var(--pop-transfer-bonus-bg);
    color: var(--pop-transfer-bonus-txt);
    font-size: 3.4666666667rem;
    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
}

.pop-transfer {
    padding: 0
}

.pop-transfer .main-wallet-info {
    background: var(--pop-transfer-bg);
    color: var(--pop-transfer-txt)
}

.pop-transfer .menu-box {
    padding: 3.2rem
}

.verification-wrap .verification-txt {
    margin-bottom: 2.1333333333rem;
    color: var(--verify-otp-txt);
    font-weight: 700;
    text-align: center
}

.verification-wrap .verification-txt span {
    display: block;
    margin-top: 2.1333333333rem;
    color: var(--verify-otp-phone-txt);
    line-height: 1.5
}

.verification-wrap .btn-primary .icon-mail {
    display: inline-flex;
    width: 5.3333333333rem;
    height: 4rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--verify-otp-mail-icon-color)
}

.verification-wrap .btn-primary.btn-disabled .icon-mail {
    background: var(--verify-otp-mail-icon-disabled)
}

.verification-wrap .verification-content .button a {
    display: inline-flex
}

.verification-wrap .verification-content .input-group input {
    font-size: 3.7333333333rem
}

#holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .2
}

.vip-content {
    background: var(--vip-bg);
    font-family: var(--custom-font),var(--custom-serif);
    min-height: 100%!important;
    height: auto;
    overflow: hidden;
    padding-top: 13.3333333333rem
}

.vip-content .button {
    width: auto;
    height: 14.9333333333rem;
    margin: 3.2rem;
    border-radius: 1.0666666667rem;
    font-size: 4.2666666667rem;
    line-height: 14.9333333333rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.vip-content .button.allow {
    overflow: hidden;
    background: var(--vip-cash-point-allow-btn-bg);
    box-shadow: 0 0 2.6666666667rem .5333333333rem var(--vip-cash-point-allow-btn-bg-box-shadow),inset 0 0 1.0666666667rem -.8rem var(--vip-card-shadow);
    text-shadow: 0 2px 1.0666666667rem var(--vip-cash-point-allow-btn-bg-txt-shadow)
}

.vip-content .button.allow:after {
    content: "";
    position: absolute;
    top: 0;
    width: 30%;
    height: 14.9333333333rem;
    transform: skew(-40deg);
    animation: shiny 3s ease 2s infinite;
    background: linear-gradient(to right,#fff0 0,#ffffff4d,#fff0)
}

.vip-content .button.default {
    background: var(--vip-cash-point-default-btn-bg);
    box-shadow: inset 0 0 1.0666666667rem -.8rem var(--vip-card-shadow);
    color: var(--vip-cash-point-default-btn-txt);
    text-shadow: 0 .5333333333rem 1.0666666667rem var(--vip-cash-point-default-btn-txt-shadow)
}

.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: 1.0666666667rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 5px -3px var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.vip-content .convert-content .convert-ani .text {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--vip-ani-title);
    font-size: 4.2666666667rem
}

.player-vip-box {
    position: relative;
    margin: 3.2rem
}

.player-vip-box.total {
    padding: 2.1333333333rem
}

.player-vip-box .title {
    position: relative;
    color: var(--vip-total-ttile);
    font-size: 3.4666666667rem
}

.player-vip-box .title h2 {
    display: flex;
    align-items: center;
    color: var(--vip-convert-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.player-vip-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-convert-border);
    vertical-align: middle
}

.player-vip-box .refresh {
    display: inline-flex;
    position: absolute;
    right: 0;
    bottom: .2666666667rem;
    align-items: center
}

.player-vip-box .refresh .text {
    color: var(--vip-refresh-txt)
}

.player-vip-box .refresh-icon {
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    margin-left: 1.6rem;
    background: var(--vip-refresh-icon-color);
    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
}

.player-vip-box .status-box {
    display: inline-block;
    width: 100%
}

.player-vip-box .status {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 86%;
    padding: 0;
    background: transparent
}

.player-vip-box .status .number {
    margin-right: 2.6666666667rem;
    margin-bottom: 0;
    color: var(--vip-total-num);
    font-size: 9.3333333333rem;
    font-weight: 500
}

.player-vip-box .status:after {
    content: none
}

.player-vip-box .status .text {
    width: auto;
    height: 5.3333333333rem;
    margin-top: 3.2rem;
    padding: 0 2.6666666667rem;
    border-radius: 13.3333333333rem;
    background: var(--vip-total-txt-bg);
    color: var(--vip-total-txt);
    font-size: 3.2rem;
    line-height: 5.3333333333rem
}

.cleader {
    position: absolute;
    right: 2.6666666667rem;
    bottom: 2.6666666667rem;
    display: flex;
    width: auto;
    height: auto;
    padding: 2.6666666667rem 3.2rem;
    border-radius: 5.3333333333rem;
    background: var(--vip-total-record-btn-bg);
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-transform: capitalize
}

.cleader .item-icon {
    display: inline-flex;
    width: 2.9333333333rem;
    height: 3.7333333333rem;
    background: var(--vip-total-record-icon-color, #ffffff);
    margin-left: .5333333333rem;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.cleader p {
    display: inline-flex;
    margin-left: 1.3333333333rem;
    font-size: 3.2rem;
    color: var(--vip-total-record-btn-txt, var(--vip-total-record-icon-color));
    margin: 0 0 0 1.3333333333rem;
    line-height: 5.3333333333rem
}

.cleader a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16rem;
    height: 10.6666666667rem
}

.card-top {
    height: auto;
    padding: 6.4rem 6.4rem 10.6666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-card-bg);
    box-shadow: inset 0 0 1.0666666667rem -.8rem var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.card-top .bar {
    background: var(--vip-card-progress-bar-bg);
    box-shadow: inset 0 0 .2666666667rem 0 var(--vip-card-shadow)
}

.card-top .bar-inner {
    background: var(--vip-card-progress-bar-bg-active);
    background-size: 300% 100%;
    box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb,var(--vip-card-progress-bar-bg-active-shadow),transparent 60%),0 0 .8rem color-mix(in srgb,var(--vip-card-progress-bar-bg-active-shadow),transparent 60%)
}

.card-top .bar-inner:after {
    background-color: var(--vip-card-bar-dot);
    box-shadow: 0 0 2.6666666667rem .2666666667rem var(--vip-card-shadow)
}

.card-top p {
    margin: 3.2rem 0 6.4rem;
    transform-origin: left;
    color: var(--vip-card-tips);
    font-size: 3.4666666667rem;
    line-height: 1.7;
    text-decoration: none
}

.card-top p i {
    font-weight: 500;
    color: var(--vip-points-card-top-info-txt-strong)
}

.vip-lv-area {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 5.3333333333rem
}

.vip-lv-area:nth-child(2) {
    margin-bottom: 0
}

.vip-lv-area .progress-bar {
    flex: 1
}

.vip-lv-area .progress-bar .txt {
    display: flex;
    justify-content: flex-end
}

.vip-lv-area .progress-bar .txt p {
    margin: 0;
    width: -moz-fit-content;
    width: fit-content;
    transform-origin: right
}

.vip-lv-area .progress-bar .txt span {
    color: var(--vip-points-progress-bar-txt);
    font-weight: 500
}

.lv-totem {
    width: 12rem;
    height: 12rem;
    margin-right: 4rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.lv-text {
    color: var(--vip-card-title)
}

.lv-text .text {
    margin-bottom: 1.0666666667rem;
    font-size: 3.2rem;
    font-weight: 700
}

.lv-text h2 {
    font-size: 4.8rem;
    font-weight: 700;
    text-transform: uppercase
}

.lv-history {
    position: absolute;
    right: 0;
    display: flex;
    width: auto;
    height: auto;
    border-radius: 5.3333333333rem;
    padding: 2.6666666667rem 3.2rem;
    background: var(--vip-card-history-btn-bg);
    text-decoration: none;
    align-items: center;
    justify-content: center;
    text-transform: capitalize
}

.lv-history .item-icon {
    display: inline-flex;
    width: 3.7333333333rem;
    height: 2.9333333333rem;
    background: var(--vip-card-history-icon-color, #ffffff);
    margin-left: .5333333333rem;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.lv-history p {
    display: inline-flex;
    margin-left: 1.3333333333rem;
    font-size: 3.2rem;
    color: var(--vip-card-history-btn-txt, var(--vip-card-history-icon-color));
    margin: 0 0 0 1.3333333333rem;
    line-height: 5.3333333333rem
}

.next-lv-totem {
    width: 7.4666666667rem;
    height: 7.4666666667rem;
    margin-left: 4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.card-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    flex-flow: row-reverse nowrap;
    align-items: center;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0 3.2rem;
    border-radius: 0 0 1.0666666667rem 1.0666666667rem;
    background: var(--vip-card-bottom-bg)
}

.card-bottom a {
    color: var(--vip-card-bottom-more-txt);
    font-size: 3.4666666667rem;
    text-decoration: none
}

.card-bottom a span {
    display: inline-block;
    width: 3.2rem;
    height: 2.6666666667rem;
    margin-left: 2.6666666667rem;
    background: var(--vip-card-bottom-more-txt);
    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%
}

.cash-card {
    padding: 0
}

.cash-card .title {
    margin-bottom: 2.1333333333rem
}

.cash-points {
    display: inline-flex;
    width: 100%;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 1.0666666667rem -.8rem var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.cash-points .coin {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position: relative;
    width: 25%;
    height: auto
}

.movie-box {
    width: 100%;
    height: auto;
    padding: 0
}

.cash-detail {
    width: 75%;
    padding: 1.0666666667rem 2.6666666667rem
}

.cash-detail .detail-title {
    position: relative;
    margin: 2.6666666667rem 0;
    color: var(--vip-cash-point-requirement-txt);
    font-size: 3.4666666667rem
}

.cash-detail .detail-title .text {
    float: right
}

.cash-detail .detail-title .text span {
    margin-left: 1.0666666667rem
}

.cash-detail .detail-title span {
    color: var(--vip-cash-point-title)
}

.cash-detail .cash-input input[type=number] {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    padding: 2.6666666667rem;
    border: 0;
    border-radius: 1.0666666667rem;
    outline: none;
    background: var(--vip-cash-point-input-bg);
    color: var(--vip-cash-point-input-txt);
    font-size: 5.3333333333rem;
    font-weight: 500;
    text-align: left;
    box-shadow: 0 0 .8rem #0003 inset
}

.cash-detail .cash-input input[type=number]::placeholder {
    color: var(--vip-cash-point-input-placeholder)
}

.cash-detail .cash-input.error input[type=number] {
    animation: shake-horizontal .5s cubic-bezier(.455,.3,.515,.955) both;
    color: var(--vip-cash-point-input-error);
    border: .32rem solid var(--vip-cash-point-input-error)
}

.cash-detail .conversion {
    position: relative;
    height: 8.5333333333rem;
    margin-top: 5.3333333333rem;
    color: var(--vip-cash-point-tips);
    font-size: 3.4666666667rem
}

.cash-detail .conversion .ratio {
    display: inline-flex;
    height: 8.5333333333rem;
    font-weight: 500
}

.cash-detail .conversion .ratio .text {
    margin-left: 2.6666666667rem;
    color: var(--vip-cash-point-input-txt)
}

.cash-detail .conversion .ratio.hide {
    display: none
}

.cash-detail .conversion .error-tip {
    display: -webkit-inline-box;
    flex-flow: row nowrap;
    align-content: flex-start;
    justify-content: space-between;
    height: 8.5333333333rem
}

.cash-detail .conversion .error-tip:before {
    content: "!";
    display: inline-block;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    border-radius: 5.3333333333rem;
    background-color: var(--vip-cash-point-input-error);
    color: var(--vip-cash-point-input-error-icon);
    line-height: 3.7333333333rem;
    text-align: center
}

.cash-detail .conversion .error-tip .text {
    margin-left: 2.1333333333rem;
    color: var(--vip-cash-point-input-error)
}

.cash-detail .conversion .error-tip.hide {
    display: none
}

.convert-icon {
    display: flex;
    position: absolute;
    top: 25.3333333333rem;
    justify-content: center;
    width: 100%
}

.convert-icon .chevron {
    position: absolute;
    width: 4.2666666667rem;
    height: .64rem;
    transform: scale(.3);
    opacity: 0
}

.convert-icon .chevron:first-child {
    animation: move-chevron 2.8s ease-out infinite
}

.convert-icon .chevron:first-child:before,.convert-icon .chevron:first-child:after {
    background: var(--vip-cash-point-def)
}

.convert-icon .chevron:nth-child(2) {
    animation: move-chevron 2.8s ease-out 1s infinite
}

.convert-icon .chevron:nth-child(2):before,.convert-icon .chevron:nth-child(2):after {
    background: var(--vip-cash-point-grey)
}

.convert-icon .chevron:before,.convert-icon .chevron:after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%
}

.convert-icon .chevron:before {
    left: 0;
    transform: skewY(30deg)
}

.convert-icon .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg)
}

@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.6rem);
        opacity: 1
    }

    66.6% {
        transform: translateY(3.2rem);
        opacity: 1
    }

    to {
        transform: translateY(4.8rem) scale(.5);
        opacity: 0
    }
}

.acquired-content {
    padding: 0 3.2rem
}

.vip-year {
    margin: 3.2rem 0;
    color: var(--vip-history-year);
    font-size: 4.8rem;
    font-weight: 700
}

.form-vip-history {
    position: relative;
    margin: 0 0 3.2rem 16rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 1.0666666667rem -.8rem var(--vip-card-shadow);
    color: var(--vip-card-title);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.form-vip-history:before {
    content: "";
    display: block;
    position: absolute;
    top: 8.5333333333rem;
    left: -4.1333333333rem;
    width: .5333333333rem;
    height: 23.4666666667rem;
    background: var(--vip-history-month);
    border-radius: 1.0666666667rem
}

.form-vip-history:after {
    content: "";
    display: block;
    position: absolute;
    top: 3.7333333333rem;
    left: -5.3333333333rem;
    width: 2.1333333333rem;
    height: 2.1333333333rem;
    border-radius: 50%;
    border: .5333333333rem solid var(--vip-history-month)
}

.form-vip-history:last-child:before {
    height: 18.1333333333rem
}

.form-vip-history:lang(vn):after,.form-vip-history:lang(bn):after {
    display: none
}

.form-vip-history:lang(vn):before,.form-vip-history:lang(bn):before {
    top: 11.2rem;
    height: 26.6666666667rem
}

.form-vip-history .vip-month {
    position: absolute;
    top: 3.2rem;
    left: -16rem;
    color: var(--vip-history-year);
    font-weight: 500
}

.form-vip-history .vip-level {
    margin-bottom: 2.6666666667rem;
    font-weight: 700
}

.form-vip-history .vip-level .text {
    margin-bottom: .5333333333rem;
    font-size: 3.2rem
}

.form-vip-history .vip-level .level {
    font-size: 4.8rem;
    line-height: 5.3333333333rem;
    text-transform: uppercase
}

.form-vip-history .vip-acquired {
    font-weight: 500
}

.form-vip-history .vip-acquired .text {
    margin-bottom: 1.0666666667rem;
    font-size: 3.4666666667rem
}

.form-vip-history .vip-acquired .acquired {
    color: var(--vip-card-title);
    font-size: 3.7333333333rem
}

.vip-level-icon {
    position: absolute;
    z-index: 1;
    top: 3.2rem;
    right: 3.2rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.player-vip-detailed-menu {
    padding: 3.2rem 3.2rem 0
}

.player-vip-detailed-menu .btn {
    display: flex;
    position: relative;
    flex-flow: column-reverse nowrap;
    align-items: center;
    width: calc(23.8095238095% - 2.6666666667rem);
    height: 32rem;
    margin: 2.6666666667rem 2.6666666667rem 0 0;
    padding: 0 1.0666666667rem 2.6666666667rem;
    transform: translateY(-1.0666666667rem);
    transition: .3s;
    border-radius: 2.6666666667rem 50% 2.6666666667rem 1.0666666667rem;
    background: linear-gradient(180deg,var(--vip-detail-lv1-bg) 0%,var(--vip-detail-lv-bottom-bg) 100%);
    box-shadow: 0 .5333333333rem .8rem #0003
}

.player-vip-detailed-menu .btn.active {
    transform: translateY(-2.1333333333rem) scale(1);
    box-shadow: 0 1.0666666667rem 1.0666666667rem #0003
}

.player-vip-detailed-menu .btn .vip-ball {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto
}

.player-vip-detailed-menu .vip-lv2 {
    background: linear-gradient(180deg,var(--vip-detail-lv2-bg) 0%,var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv3 {
    background: linear-gradient(180deg,var(--vip-detail-lv3-bg) 0%,var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv4 {
    background: linear-gradient(180deg,var(--vip-detail-lv4-bg) 0%,var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu .vip-lv5 {
    background: linear-gradient(180deg,var(--vip-detail-lv5-bg) 0%,var(--vip-detail-lv-bottom-bg) 100%)
}

.player-vip-detailed-menu p {
    position: relative;
    color: var(--vip-detail-lv-txt);
    font-size: 3.4666666667rem;
    font-weight: 500
}

.player-vip-detailed-menu .vip-level-icon {
    top: 0;
    right: -2.6666666667rem;
    width: 11.2rem;
    height: 11.2rem;
    transition: .3s
}

.player-vip-detailed-menu .slick-dots {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 2.6666666667rem
}

.player-vip-detailed-menu .slick-dots li {
    display: inline-block;
    position: relative;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    margin: 0 2.1333333333rem;
    overflow: hidden;
    text-indent: -2666.4rem
}

.player-vip-detailed-menu .slick-dots li button {
    display: block;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    padding: 1.0666666667rem;
    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.6666666667rem;
    height: 2.6666666667rem;
    border-radius: 50%;
    background: var(--event-slick-dot)
}

.player-vip-detailed-menu .slick-dots li.slick-active button:before {
    background: var(--event-slick-dot-active)
}

.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-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 8.5333333333rem);
    height: auto;
    margin: 3.2rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background: var(--vip-detail-box-bg);
    box-shadow: 0 0 1.6rem var(--vip-detail-box-bg-shadow)
}

.player-vip-detailed-box .title {
    margin: 3.2rem 3.2rem 0
}

.player-vip-detailed-box .title h2 {
    color: var(--color-title);
    font-size: 4rem;
    font-weight: 500
}

.player-vip-detailed-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--secondary);
    vertical-align: middle
}

.player-vip-detailed-box .title span {
    display: inline-block;
    vertical-align: middle
}

.head-lv-name {
    height: 8.5333333333rem;
    padding-left: 3.2rem;
    border-radius: 2.6666666667rem 2.6666666667rem 0 0;
    background: linear-gradient(90deg,#bcb8a8,#80795a);
    color: #fff;
    font-weight: 500;
    line-height: 8.5333333333rem
}

.vip-lv1 .head-lv-name {
    background: var(--vip-detail-title-bg-lv1)
}

.vip-lv2 .head-lv-name {
    background: var(--vip-detail-title-bg-lv2)
}

.vip-lv3 .head-lv-name {
    background: var(--vip-detail-title-bg-lv3)
}

.vip-lv4 .head-lv-name {
    background: var(--vip-detail-title-bg-lv4)
}

.vip-lv5 .head-lv-name {
    background: var(--vip-detail-title-bg-lv5)
}

.lv-info-wrap {
    padding: 3.2rem;
    border-bottom: .2666666667rem solid var(--vip-detail-border)
}

.lv-info-wrap .status-box.status-box2 {
    flex-wrap: wrap
}

.lv-info-wrap .status-box .number {
    font-size: 3.7333333333rem
}

.lv-info-wrap .status-box .number.number2 {
    color: var(--vip-detail-highlight-txt);
    font-size: 4.2666666667rem
}

.lv-info-wrap .status {
    width: 33%
}

.lv-info-wrap .status.accept2 {
    position: relative;
    width: 48%;
    height: 17.3333333333rem;
    margin: 0 2.6666666667rem 2.6666666667rem 0;
    padding: 2.6666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--vip-detail-card-bg);
    box-shadow: 0 .8rem 1.0666666667rem var(--vip-detail-card-bg-shadow),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.lv-info-wrap .status.accept2:nth-child(2n) {
    margin: 0 0 2.6666666667rem
}

.lv-info-wrap .status.accept2 .text {
    color: var(--vip-detail-card-txt)
}

.terms {
    padding: 3.2rem
}

.terms .terms-link {
    margin-bottom: 2.6666666667rem;
    color: var(--vip-detail-link)
}

.terms p {
    color: var(--vip-detail-link);
    font-size: 3.4666666667rem;
    line-height: 5.3333333333rem
}

.vip-list {
    margin-top: 2.1333333333rem
}

.vip-list .list-title .list-field {
    line-height: 1.5
}

.vip-list .list-content {
    margin: 0 3.2rem;
    border-radius: 0 0 1.0666666667rem 1.0666666667rem
}

.vip-list .list-content .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.vip-list .vip-source,.vip-list .vip-use {
    flex: 0 0 25%
}

.vip-list .vip-time {
    flex: 0 0 33%;
    text-align: center
}

.vip-list .vip-no {
    flex: 1 0 5%
}

.vip-list .vip-point {
    flex: 0 0 32%
}

.accordion-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 13.8666666667rem;
    margin: 3.2rem;
    transition: all .4s ease-in-out;
    border-radius: 1.0666666667rem;
    opacity: 1;
    background: var(--wallet-pending-transactions-bg)
}

.accordion-card-wrap.remove {
    height: 0;
    min-height: 0;
    margin: 0 2.6666666667rem;
    transform: translateY(-10%);
    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;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333rem;
    padding: 3.2rem;
    color: var(--wallet-pending-transactions-title);
    font-size: 4rem;
    text-align: left
}

.accordion-card-wrap .ac-title .ac-text {
    flex-grow: 1;
    font-weight: 500
}

.accordion-card-wrap .ac-title .ac-icon {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 3.2rem;
    background: var(--wallet-pending-transactions-arrow-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.accordion-card-wrap .ac-title .ac-arrow {
    display: none;
    width: 3.4666666667rem;
    height: 3.4666666667rem;
    transition: all .3s;
    background-color: var(--tips-info-arrow-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 80%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 80%
}

.accordion-card-wrap .ac-title .ac-notice {
    position: absolute;
    top: 0;
    right: 0;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    transform: translate(15%,-35%);
    transition: all .3s ease-in-out;
    border-radius: 50%;
    opacity: 1;
    background: var(--color-danger);
    box-shadow: 0 0 .8rem #00000080;
    font-weight: 700;
    color: #fff;
    line-height: 5.3333333333rem;
    text-align: center
}

.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 {
    position: relative;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s,opacity .5s;
    opacity: 0;
    color: var(--accordion-txt)
}

.accordion-card-wrap .ac-content:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 3.2rem;
    width: calc(100% - 6.4rem);
    height: .32rem;
    background: var(--accordion-dot)
}

.ac-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    margin: 0 3.2rem;
    padding: 1.0666666667rem 0;
    transition: all .4s ease-in-out;
    opacity: 1
}

.ac-list+.ac-list:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: .2666666667rem;
    background-image: linear-gradient(to right,var(--accordion-dot) 0%,var(--accordion-dot) 10%,transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667rem
}

.ac-list>div {
    transition: all .2s ease-in-out;
    opacity: 1
}

.ac-list.removed {
    height: 0;
    min-height: 0;
    margin: 0 1.0666666667rem;
    padding: 0 4rem;
    transform: translate(-100%)
}

.ac-list.removed>div {
    opacity: 0
}

.ac-list .ac-item {
    overflow: hidden;
    line-height: 1.8
}

.ac-list .ac-item .number {
    color: var(--wallet-pending-transactions-number);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-decoration: underline
}

.ac-list .ac-item .date {
    color: var(--wallet-pending-transactions-date);
    font-size: 3.4666666667rem
}

.ac-list .ac-item .amount {
    color: var(--wallet-pending-transactions-amount);
    font-size: 4rem;
    font-weight: 500
}

.ac-list .btn-revert {
    position: relative;
    z-index: 0;
    padding: 3.2rem 6.4rem;
    border-radius: 1.0666666667rem;
    background: var(--wallet-pending-transactions-btn-bg);
    color: var(--wallet-pending-transactions-btn-txt);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.accordion-card-wrap .toggle-btn .ac-arrow {
    display: block
}

.withdrawal-processing-pop .pop-inner,.deposit-success-pop .pop-inner {
    padding: 6.4rem;
    text-align: center
}

.withdrawal-processing-pop .info-cont,.deposit-success-pop .info-cont {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 6.4rem
}

.withdrawal-processing-pop .processing-cont,.deposit-success-pop .processing-cont {
    width: 100%;
    padding: 0 3.2rem 3.2rem;
    margin-bottom: 3.2rem;
    border-bottom: .2666666667rem solid var(--transaction-pop-processing-cont-border-color)
}

.withdrawal-processing-pop .state,.deposit-success-pop .state {
    position: relative;
    width: 19.2rem;
    height: 19.2rem;
    margin: 0 auto;
    animation: fallin .7s forwards .2s;
    border-radius: 100%;
    opacity: 0;
    background: var(--transaction-pop-state-bg)
}

.withdrawal-processing-pop .state .icon,.deposit-success-pop .state .icon {
    position: absolute;
    right: -.4rem;
    background-color: var(--transaction-pop-state-icon-bg);
    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%
}

.withdrawal-processing-pop .processing,.deposit-success-pop .processing {
    text-align: center
}

.withdrawal-processing-pop .processing h3,.deposit-success-pop .processing h3 {
    color: var(--transaction-pop-processing-title);
    font-size: 5.3333333333rem;
    margin: 2.6666666667rem 0 1.0666666667rem;
    font-weight: 700
}

.withdrawal-processing-pop .processing span,.deposit-success-pop .processing span {
    color: var(--transaction-pop-processing-txt);
    font-size: 3.2rem;
    line-height: 1
}

.withdrawal-processing-pop .amount-cont,.deposit-success-pop .amount-cont {
    font-weight: 700
}

.withdrawal-processing-pop .amount-cont h4,.deposit-success-pop .amount-cont h4 {
    font-weight: 400;
    font-size: 4.8rem;
    color: var(--transaction-pop-amount-cont-txt);
    margin-bottom: 2.6666666667rem;
    line-height: 1
}

.withdrawal-processing-pop .amount-cont .amount,.deposit-success-pop .amount-cont .amount {
    font-size: 6.9333333333rem;
    color: var(--transaction-pop-amount-cont-txt-strong)
}

.withdrawal-processing-pop .info-list,.deposit-success-pop .info-list {
    margin: 6.4rem 0 0;
    overflow: auto;
    font-size: 3.4666666667rem;
    text-align: left
}

.withdrawal-processing-pop .info-list li,.deposit-success-pop .info-list li {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0
}

.withdrawal-processing-pop .info-list li label,.withdrawal-processing-pop .info-list li span,.deposit-success-pop .info-list li label,.deposit-success-pop .info-list li span {
    display: inline-block;
    word-break: break-all;
    padding: 2.6666666667rem;
    line-height: 1.3
}

.withdrawal-processing-pop .info-list li label,.deposit-success-pop .info-list li label {
    color: var(--transaction-pop-info-list-title);
    background: var(--transaction-pop-info-list-title-bg)
}

.withdrawal-processing-pop .info-list li span,.deposit-success-pop .info-list li span {
    color: var(--transaction-pop-info-list-txt);
    background: var(--transaction-pop-info-list-txt-bg)
}

@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
    }
}

.tag-free {
    position: absolute;
    z-index: 3;
    top: 1.0666666667rem;
    left: -1.0666666667rem;
    width: 4.8rem;
    height: 4rem;
    border-radius: .5333333333rem 0 0 .5333333333rem;
    background: var(--wallet-free-tag-bg)
}

.tag-free i {
    position: absolute;
    top: 0;
    left: .32rem;
    width: 100%;
    height: 100%;
    background-color: var(--wallet-free-tag-txt);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 85%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 85%
}

.tag-free:after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 4.8rem;
    border-top: 2rem solid transparent;
    border-bottom: 2rem solid transparent;
    border-left: 1.0666666667rem solid var(--wallet-free-tag-bg)
}

.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.5333333333rem;
    background: transparent!important
}

.tab-real-time-bonus .btn {
    min-width: -moz-fit-content;
    min-width: fit-content;
    height: 8rem;
    line-height: 8rem;
    padding: 0;
    border: .32rem solid var(--realtime-bonus-summary-tab-btn-border);
    border-radius: 1.0666666667rem;
    color: var(--realtime-bonus-summary-tab-btn-txt);
    background: var(--realtime-bonus-summary-tab-btn-bg)
}

.tab-real-time-bonus .btn:hover {
    border: .32rem solid var(--realtime-bonus-summary-tab-btn-border-hover);
    background: var(--realtime-bonus-summary-tab-btn-bg-hover)
}

.tab-real-time-bonus .btn:hover .text {
    color: var(--realtime-bonus-summary-tab-btn-txt-hover)
}

.tab-real-time-bonus .btn.active {
    border: .32rem solid var(--realtime-bonus-summary-tab-btn-border-active);
    background: var(--realtime-bonus-summary-tab-btn-bg-active)
}

.tab-real-time-bonus .btn.active:after {
    content: "";
    position: absolute;
    left: -.32rem;
    bottom: -.32rem;
    width: calc(100% + .64rem);
    height: .5333333333rem;
    border-radius: .5333333333rem;
    z-index: 1;
    background: var(--realtime-bonus-summary-tab-btn-underline-active)
}

.tab-real-time-bonus .btn.active .text {
    color: var(--realtime-bonus-summary-tab-btn-txt-active)
}

.tab-real-time-bonus .btn+.btn {
    margin-left: 1.0666666667rem
}

.tab-real-time-bonus .btn .text {
    font-weight: 500;
    color: var(--realtime-bonus-summary-tab-btn-txt)
}

.tab-real-time-bonus .line {
    display: none
}

.available-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    background: var(--realtime-bonus-available-bg)
}

.available-amount__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 80rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.available-amount__title {
    display: flex;
    align-items: center;
    margin: 3.2rem auto
}

.available-amount__icon {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 2.1333333333rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--realtime-bonus-available-title-icon)
}

.available-amount__text {
    color: var(--realtime-bonus-available-title);
    font-size: 3.7333333333rem
}

.available-amount__decor {
    width: 21.3333333333rem;
    height: 21.3333333333rem;
    margin: 3.2rem auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.available-amount__value {
    margin: 3.2rem auto;
    color: var(--realtime-bonus-available-amount);
    font-weight: 700;
    font-size: 7.4666666667rem;
    text-align: center
}

.available-amount__button {
    display: flex;
    align-items: center;
    z-index: 1;
    width: -moz-fit-content;
    width: fit-content;
    margin: 3.2rem auto;
    padding: 0 9.6rem;
    font-size: 4.2666666667rem;
    background: var(--realtime-bonus-available-btn-bg)
}

.available-amount__button a {
    color: var(--realtime-bonus-available-btn-txt)
}

.available-amount__tips {
    font-size: 3.4666666667rem;
    color: var(--realtime-bonus-available-tips-txt);
    text-align: center
}

.claimed-box {
    display: flex;
    justify-content: space-around;
    text-align: center
}

.claimed-box__title {
    font-size: 3.2rem;
    color: var(--realtime-bonus-claimed-title)
}

.claimed-box__value {
    margin-top: 2.1333333333rem;
    font-size: 4.8rem;
    font-weight: 500;
    color: var(--realtime-bonus-claimed-value)
}

.real-time-bonuses-accordion {
    margin: 3.2rem 0 0;
    background: var(--realtime-bonus-summary-list-content-bg)
}

.real-time-bonuses-accordion .accordion-header {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3.2rem;
    background: var(--realtime-bonus-summary-list-header-bg);
    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.3333333333rem);
    line-height: 1.2;
    font-size: 3.7333333333rem;
    font-weight: 700;
    color: var(--realtime-bonus-summary-list-header-title)
}

.real-time-bonuses-accordion .accordion-header__arrow {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--realtime-bonus-summary-list-header-arrow-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 75%;
    mask-size: 75%;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform .3s
}

.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: .5333333333rem;
    margin-top: 3.2rem
}

.real-time-bonuses-accordion .total-rebate {
    grid-area: total-rebate;
    display: flex;
    justify-content: space-between
}

.real-time-bonuses-accordion .total-rebate__title {
    color: var(--realtime-bonus-summary-list-header-total-rebate-title)
}

.real-time-bonuses-accordion .total-rebate__value {
    font-size: 4.2666666667rem;
    font-weight: 500;
    color: var(--realtime-bonus-summary-list-header-total-rebate-amount)
}

.real-time-bonuses-accordion .total-claimed,.real-time-bonuses-accordion .total-expired {
    padding: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--realtime-bonus-summary-list-header-total-bg)
}

.real-time-bonuses-accordion .total-claimed__title,.real-time-bonuses-accordion .total-expired__title {
    display: block
}

.real-time-bonuses-accordion .total-claimed__value,.real-time-bonuses-accordion .total-expired__value {
    display: block;
    margin-top: 1.0666666667rem;
    font-size: 4.2666666667rem;
    text-align: right
}

.real-time-bonuses-accordion .total-claimed {
    grid-area: total-claimed
}

.real-time-bonuses-accordion .total-claimed__title {
    color: var(--realtime-bonus-summary-list-header-total-claimed-title)
}

.real-time-bonuses-accordion .total-claimed__value {
    color: var(--realtime-bonus-summary-list-header-total-claimed-amount)
}

.real-time-bonuses-accordion .total-expired {
    grid-area: total-expired
}

.real-time-bonuses-accordion .total-expired__title {
    color: var(--realtime-bonus-summary-list-header-total-expired-title)
}

.real-time-bonuses-accordion .total-expired__value {
    color: var(--realtime-bonus-summary-list-header-total-expired-amount)
}

.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;
    border: .32rem solid var(--realtime-bonus-summary-list-content-border)
}

.real-time-bonuses-accordion .accordion-collapse__item {
    display: grid;
    position: relative;
    grid-template-columns: 1fr;
    row-gap: .5333333333rem;
    margin: 3.2rem
}

.real-time-bonuses-accordion .accordion-collapse li+li:before {
    content: "";
    display: block;
    position: absolute;
    top: -3.2rem;
    width: 100%;
    height: .32rem;
    background: var(--realtime-bonus-summary-list-content-border)
}

.real-time-bonuses-accordion .game-type-rebate,.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.2rem
}

.real-time-bonuses-accordion .game-type-rebate {
    margin-bottom: 2.1333333333rem;
    color: var(--realtime-bonus-summary-list-content-title)
}

.real-time-bonuses-accordion .game-type {
    font-size: 3.7333333333rem;
    font-weight: 700
}

.real-time-bonuses-accordion .rebate-pct {
    display: inline;
    font-weight: 700
}

.real-time-bonuses-accordion .rebate-pct span+span {
    margin-left: 2.1333333333rem
}

.real-time-bonuses-accordion .total-rebate-amount {
    grid-column: 1/span 2;
    grid-row: 2/span 1;
    color: var(--realtime-bonus-summary-list-content-txt)
}

.real-time-bonuses-accordion .total-turnover {
    grid-column: 1/span 2;
    grid-row: 3/span 1;
    color: var(--realtime-bonus-summary-list-content-txt)
}

.accordion-wrap--expanded .accordion-header__arrow {
    transform: rotate(180deg)
}

.accordion-wrap--expanded .accordion-collapse {
    height: 100%;
    max-height: 266.6666666667rem;
    opacity: 1
}

.pop-real-time-bonus .pop-inner {
    text-align: center
}

.pop-real-time-bonus h5 {
    font-size: 6.4rem;
    font-weight: 700;
    color: var(--pop-realtime-bonus-number)
}

.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-accent {
    --mat-option-selected-state-label-text-color: #c9a33d;
    --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,html,.mat-accent {
    --mat-full-pseudo-checkbox-selected-icon-color: #c9a33d;
    --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: #c9a33d;
    --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: #c9a33d;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(201, 163, 61, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(201, 163, 61, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(201, 163, 61, .3);
    --mat-datepicker-toggle-active-state-icon-color: #c9a33d;
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(201, 163, 61, .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: #c9a33d;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(201, 163, 61, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(201, 163, 61, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(201, 163, 61, .3);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(201, 163, 61, .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: #c9a33d
}

.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
}

.datepicker-toggle {
    color: #222
}

header .logo {
    width: 17.0666666667rem
}

header a+a {
    margin-left: 2.1333333333rem
}

header.normal-logo-left a {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4)
}

header.normal-logo-left .login {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #747687
}

header.normal-logo-left .register {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

header .service-btn {
    display: flex
}

header .service-btn .item-icon {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-bottom: .5333333333rem;
    background-color: var(--primary);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain
}

header .service-btn p {
    color: var(--primary);
    font-size: 3.2rem
}

header .header-right-btn-group {
    align-items: center
}

.logo-image {
    background-size: 60%
}

.float-wrap-btn__inner {
    transform: scale(1.5)
}

.footer .footer-collapse__logo {
    height: 11.7333333333rem
}

.footer .footer-collapse__btn {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4);
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #747687
}

.footer .partner .partner,.footer__download {
    display: inline-block
}

.loading .nav-wrap {
    height: 69.3333333333rem
}

.button a {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4)
}

.button.btn-primary,.button.btn-default {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

.button.btn-primary.btn-disabled,.button.btn-default.btn-disabled {
    box-shadow: none
}

.button.btn-secondary {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #747687
}

.button.btn-secondary.btn-disabled {
    box-shadow: none
}

.content-style .button-box .button {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4)
}

.content-style .button-box .button__apply,.content-style .button-box .button__deposit {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #747687
}

.content-style .button-box .button__detail {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

.code-box .btn-share,.receive-box .button {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4);
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

.receive-box .button.btn-disabled {
    text-shadow: none;
    box-shadow: none
}

.achievement-bonus-box li {
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #747687
}

mcd-referral-bonus-goals .menu-box .detail-btn {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4);
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

.disable .btn-primary,.disable .btn-secondary {
    box-shadow: none
}

.area-mask .m-btn {
    text-shadow: 0 0 .5333333333rem rgba(0,0,0,.4);
    box-shadow: 0 1.0666666667rem 2.1333333333rem #191e32;,inset 0 0 .5333333333rem #d4b665
}

.footer-content {
    grid-column: 1/span 4;
    margin: 4.2666666667rem 0
}

.footer-content__logo {
    width: auto;
    height: 8rem;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    aspect-ratio: 219/94
}

.footer-content__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.1333333333rem;
    color: var(--footer-title);
    font-size: 4.8rem;
    font-weight: 600;
    line-height: normal;
    margin: 2.1333333333rem 0
}

.footer-content h2 {
    margin-bottom: 0
}

.footer-content__content p {
    color: var(--footer-txt);
    font-size: 3.7333333333rem;
    line-height: normal
}

.footer-content__btn {
    width: 32rem;
    margin-top: 3.2rem;
    padding: 3.2rem 8.5333333333rem;
    border: .32rem solid var(--footer-btn-border);
    border-radius: 1.0666666667rem;
    background: var(--footer-btn-bg);
    color: var(--footer-btn-txt);
    font-size: 3.7333333333rem;
    cursor: pointer
}

.best-casino-wrap .article-content {
    padding-bottom: 13.3333333333rem
}

* {
    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-color: var(--content-bg);
    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: 80px
}

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 .8rem
}

.player-vip-detailed-box .section-wrap {
    display: block;
    height: 100%;
    transition: all .3s ease;
    width: 100%
}

.register-content .verification .refresh.active {
    animation: refresh1 .5s linear
}

@keyframes refresh1 {
    0% {
        transform: translateY(-50%) rotate(0)
    }

    to {
        transform: translateY(-50%) rotate(1turn)
    }
}

.register-content .verification-wrap .refresh.active {
    animation: refresh .5s linear
}

@keyframes refresh {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.player-vip-detailed-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.player-vip-detailed-menu::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none
}

.player-vip-detailed-menu .btn-wrap {
    display: inline-flex
}

.player-vip-detailed-menu .btn-wrap .btn {
    min-width: 24rem
}

.login-info-box .error-message-box {
    flex: 1 0 60%
}

.btn-select.only:after {
    display: none
}

.popup-page-wrapper {
    display: block;
    position: relative;
    text-align: center;
    z-index: 110
}

.third-party-login.member-content.new-profile,.third-party-login.member-content.new-login,.third-party-login.verify-code {
    min-height: 100%!important
}

.carousel-wrap {
    display: block;
    position: relative;
    width: auto;
    overflow: hidden;
    max-width: 100rem;
    margin: auto;
    height: 100%
}

html.is-desktop .carousel-wrap {
    max-width: none
}

.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.4rem 2.4rem 7.2rem;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #221919;
    opacity: 1;
    overflow: hidden
}

.carousel-wrap .item .item-pic {
    display: block;
    position: relative;
    margin: auto;
    height: 100%;
    border-radius: 1.0666666667rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    transform-origin: center;
    transition: all .3s
}

.carousel-wrap .item .item-pic:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.carousel-wrap.siblings .item {
    padding: 3.2rem
}

.carousel-wrap.siblings .item .item-pic {
    border-radius: 1.0666666667rem
}

.carousel-wrap.siblings .item .item-pic.focus {
    box-shadow: 0 .5333333333rem 3.2rem #00000059;
    transform: translateY(-2px)
}

.carousel-wrap.siblings .dot-group {
    bottom: 0
}

.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
}

.dot-group {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 2.1333333333rem;
    left: 0;
    z-index: 1
}

.dot-group.style-dot li {
    display: block;
    margin-right: 1.0666666667rem;
    margin-left: 1.0666666667rem;
    width: 2.1333333333rem;
    height: 2.1333333333rem;
    background: var(--event-slick-dot);
    border-radius: 50%;
    transition: .3s;
    cursor: pointer
}

.dot-group.style-dot li:hover {
    background: var(--event-slick-dot)
}

.dot-group.style-dot li.active {
    background: var(--event-slick-dot-active)
}

.dot-group.style-bar {
    padding: 2.1333333333rem 0 .8rem
}

.dot-group.style-bar li {
    display: block;
    margin: 0 .8rem;
    width: 5.3333333333rem;
    height: .5333333333rem;
    background: #ffffff80;
    border-radius: 1.0666666667rem;
    overflow: hidden
}

.dot-group.style-bar li:hover .dot-progress,.dot-group.style-bar li.active .dot-progress {
    animation-name: dot-ani;
    background: #fff
}

.dot-group.style-bar li .dot-progress {
    display: block;
    width: 100%;
    height: 100%
}

.button-prev,.button-next {
    padding: 15px 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .3s;
    border-radius: 1.0666666667rem;
    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% {
        transform: translate(-100%)
    }

    to {
        transform: translate(0)
    }
}

.carousel-wrap.debug {
    border: .32rem solid white;
    overflow: visible
}

.carousel-wrap.debug .item-drag {
    border: .32rem solid red
}

.carousel-wrap.debug .item-drag .item-left {
    border: .32rem solid yellow
}

.carousel-wrap.debug .item-drag .item-left .item-wrap {
    border: .32rem solid blue
}

.carousel-wrap.debug .button-prev,.carousel-wrap.debug .button-next {
    background-color: #fff3
}

.carousel-wrap.debug .item {
    border: .32rem solid olive
}

.carousel-wrap.debug .item .item-pic {
    border: .32rem solid purple
}

.mcd-date-picker .cdk-global-overlay-wrapper {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
}

.mcd-date-picker .mat-datepicker-content {
    border-radius: 1.3333333333rem;
    background-color: unset;
    background: var(--date-picker-calendar-bg);
    box-shadow: 0 4.2666666667rem 2.1333333333rem var(--date-picker-calendar-shadow),inset 0 .2666666667rem .5333333333rem var(--date-picker-calendar-shadow-inset);
    border: .2666666667rem solid var(--date-picker-calendar-border)
}

.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: var(--date-picker-calendar-table-txt)
}

.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: var(--date-picker-calendar-selected-bg);
    box-shadow: 0 .2666666667rem .5333333333rem var(--date-picker-calendar-selected-shadow),inset 0 0 .8rem var(--date-picker-calendar-selected-shadow-inset);
    border-width: 0;
    color: var(--date-picker-calendar-selected-txt)
}

.mcd-date-picker .mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: var(--date-picker-calendar-today-border)
}

.mcd-date-picker .mat-calendar-table-header th {
    font-weight: 700;
    color: var(--date-picker-calendar-table-title)
}

.mcd-date-picker .mat-calendar-arrow {
    fill: var(--date-picker-calendar-arrow-icon)
}

.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: var(--date-picker-calendar-today-txt-disabled)
}

.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: all .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-color: #222;
    border-radius: 1.0666666667rem
}

.nav .btn.selected p {
    color: #fff
}

.nav .btn.selected:before {
    box-shadow: 0 .5333333333rem 1.0666666667rem #0000004d
}

.nav .btn.selected:after {
    display: block
}

.nav.nav-auto {
    display: flex;
    overflow: auto
}

.nav.nav-auto .btn {
    width: auto;
    min-width: 21.3333333333rem
}

.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-color: var(--content-bg);
    -webkit-overflow-scrolling: touch;
    z-index: 7999;
    border-radius: 1.0666666667rem
}

.dialog-wrap .dialog-wrap-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    z-index: 1
}

.dialog-wrap .dialog-wrap-inner {
    border-radius: 1.0666666667rem;
    overflow: hidden;
    position: absolute;
    background-color: var(--content-bg);
    width: 100rem;
    z-index: 2
}

.dialog-wrap .dialog-wrap-inner:host-context(html.is-desktop) {
    height: calc(100% - 53.3333333333rem);
    margin: auto;
    inset: 0
}

.dialog-wrap .close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    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.3333333333rem;
    height: .5333333333rem;
    margin: -.2666666667rem 0 0 -2.6666666667rem;
    border-radius: 1.0666666667rem;
    background-color: var(--header-bg)
}

.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.3333333333rem;
    overflow: hidden;
    transition: all .3s;
    background: var(--popup-page-main-header-bg);
    z-index: 2
}

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

.top-bar .close:before,.top-bar .close:after {
    background-color: var(--pop-title)
}

.dialog-overlay-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100rem;
    max-height: 700px;
    overflow: hidden;
    transform: translate(-50%,-50%)
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop {
        height:calc(100dvh - 16rem)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop {
        height:calc(100vh - 16rem)
    }
}

.dialog-overlay-desktop .popup {
    position: absolute;
    top: 50%;
    right: 50%;
    max-height: 100%;
    border-radius: 1.0666666667rem;
    transform: translate(50%,-50%);
    width: 100rem
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height:calc(100dvh - 16rem)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height:calc(100vh - 16rem)
    }
}

.back-bar {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333rem;
    overflow: hidden;
    transition: all .3s;
    background: var(--header-bg)
}

.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: var(--header-title);
    font-size: 4.2666666667rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.back-bar__arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    transform: rotate(90deg);
    z-index: 1
}

.back-bar__arrow .item-icon {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--header-back-icon-color);
    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: var(--recommend-input-bg)
}

.date-bar .date-input .mat-mdc-form-field-flex,.date-bar .date-input .mat-mdc-form-field-infix {
    height: 8rem
}

.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.4666666667rem
}

.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.0666666667rem
}

.date-bar .date-input .mdc-text-field__input {
    height: 100%
}

.date-bar .date-input .mdc-icon-button svg {
    fill: var(--recommend-rewards-datepicker-txt)
}

.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.0666666667rem;
    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: 12rem
}

.date-bar .date-input .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: var(--recommend-rewards-datepicker-txt)
}

.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.0666666667rem;
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size)
}

.input-group .mdc-icon-button svg {
    fill: var(--form-txt)
}

body.mcw-theme-default {
    --color-primary: #c9a33d;
    --color-secondary: #222222;
    --color-primaryDark-100: #c0a024;
    --color-primaryDark-200: #8b6b05;
    --color-primaryLight-100: #ffe156;
    --color-primaryLight-200: #fff4c1;
    --color-black-100: #f2f2f2;
    --color-black-200: #ebebeb;
    --color-black-300: #dde3e5;
    --color-black-400: #b3bbbf;
    --color-black-500: #7e919e;
    --color-black-600: #878e92;
    --color-black-700: #5a5e62;
    --color-black-800: #262c32;
    --color-black-900: #191e32;;
    --color-header-background-from: rgb(255, 195, 49) 0%;
    --color-header-background-to: rgb(255, 184, 12) 100%;
    --color-button-normal: #c9a33d;
    --color-button-normal-text: #1e1e1e;
    --color-event-tab: #c9a33d;
    --color-event-th-option: #1e1e1e;
    --color-main-tab-bg-active: #ffc331;
    --color-main-tab-text-active: #000000;
    --color-main-menu-bg-active: #222222;
    --color-main-menu-text-active: #c9a33d;
    --color-unread-number-bg: #e20000;
    --color-main-collapse-bg: #222222;
    --color-market-name: #1e1e1e;
    --color-market-sub-icon: rgba(0, 0, 0, .25);
    --color-market-exchange-tip: #c9a33d;
    --color-scoreboard-accent: #c9a33d;
    --color-widget-active-bg: #ffc800;
    --color-pop-title-bg: #dde3e5;
    --color-pop-title-text: #000000;
    --color-checkbox-bg: #e1e1e1;
    --color-checkbox-boder: #939393;
    --color-checkbox-bg-checked: #e1e1e1;
    --color-checkbox-icon: #191e32;
}

body.mcw-theme-dark {
    --color-secondary: #000000;
    --color-primaryDark-200: #063669;
    --color-primaryDark-100: #0958ad;
    --color-primary: #0b6dd5;
    --color-primaryLight-100: #3897fc;
    --color-primaryLight-200: #76b9ff;
    --color-body: #1b2530;
    --color-black-900: #202020;
    --color-black-800: #2d2f30;
    --color-black-700: #3b3e41;
    --color-black-600: #6c7276;
    --color-black-500: #90999e;
    --color-black-400: #bdbdbd;
    --color-black-300: #dde3e5;
    --color-black-200: #ebebeb;
    --color-black-100: #f2f2f2;
    --color-main-tab-text: #ededed;
    --color-main-tab-bg: #3d3c3c;
    --color-main-tab-parlay: #58a608;
    --color-main-tab-parlay-text: #80f40b;
    --color-main-tab-parlay-text-active: #ededed;
    --color-main-tab-text-active: #ffffff;
    --color-main-tab-bg-active: #0b6dd5;
    --color-main-menu-number-bg: #222222;
    --color-main-menu-num: #ffffff;
    --color-unread-number-bg: #e62626;
    --color-main-menu-text-active: #c9a33d;
    --color-main-menu-bg-active: #042140;
    --color-header-background-from: #0b6dd5;
    --color-header-background-to: #063669;
    --color-sort-by-icon: #90999e;
    --color-event-games-bg: #0958ad;
    --color-event-games-num: #ffffff;
    --color-main-collapse-bg: #063669;
    --color-event-tab: #f2f2f2;
    --color-market-star-icon: #ffffff;
    --color-market-name: #ffffff;
    --color-scoreboard-tab-bg: rgba(255, 255, 255, .2);
    --color-scoreboard-tab-text: #ededed;
    --color-scoreboard-tab-bg-active: #bdbdbd;
    --color-scoreboard-tab-text-active: #000000;
    --color-scoreboard-accent: #0dce64;
    --color-market-exchange-tip: #0bad54;
    --color-market-tab-text-active: #ededed;
    --color-market-tab-bg-active: #303030;
    --color-market-tab-text: #ededed;
    --color-market-tab-bg: #191e32;;
    --color-market-sub-text: #ededed;
    --color-widget-title: #76b9ff;
    --color-widget-active-bg: #063669;
    --color-widget-info-bg: #0b6dd5;
    --color-event-th-option: #ededed;
    --color-event-dot: #7bc1eb;
    --color-parlay-list-icon: #ffffff;
    --color-forecast-up-text: #75e208;
    --color-forecast-down-text: #e83838;
    --color-parlay-bet-text: #ededed;
    --color-parlay-bet-normal: rgba(255, 255, 255, .15);
    --color-parlay-bet-book: rgba(0, 0, 0, .15);
    --color-checkbox-bg: #343434;
    --color-checkbox-boder: #939393;
    --color-checkbox-bg-checked: #2d2f30;
    --color-checkbox-icon: #ffffff;
    --color-button-normal: #0b6dd5;
    --color-button-normal-text: #ffffff;
    --color-pop-title-bg: #131313;
    --color-pop-title-text: #ededed;
    --color-voucher-select: #c0a024;
    --color-voucher-select-icon: #c0a024;
    --color-market-match-amount: #76b9ff;
    --color-market-sub-icon: rgba(255, 255, 255, .6);
    --color-category-title: #ededed;
    --color-maint-title: #ededed;
    --color-maint-text: #ededed;
    --color-cash-out-icon: #76b9ff;
    --color-matched-cash-out: #76b9ff;
    --color-forecast-up-sportsb: #2f704c;
    --color-main-sport-bg: #0b6dd5;
    --color-button-cashout: rgba(40, 77, 114, .8);
    --color-cashout-dot-border: rgba(56, 151, 252, .5);
    --color-button-unmatched: #e26521
}

::-webkit-scrollbar {
    width: 1.0666666667rem;
    height: 1.0666666667rem
}

::-webkit-scrollbar-thumb {
    background: #5555554d;
    border-radius: 1.0666666667rem
}

::-webkit-scrollbar-thumb:hover {
    background: #5555554d
}

::-webkit-scrollbar-track {
    background: transparent
}

.layout-desktop__content .select-group [type=checkbox]+label,.layout-desktop__content .select-group [type=radio]+label {
    padding: 0 4rem;
    font-size: 3.4666666667rem;
    line-height: 10.6666666667rem
}

.left-menu-orion {
    display: flex;
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    padding: 3.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s;
    -webkit-overflow-scrolling: touch;
    z-index: 129;
    pointer-events: none
}

.left-menu-orion.active {
    left: 0;
    transition-delay: .3s;
    transition: left .3s
}

.left-menu-orion .item-box {
    width: 64rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.left-menu-orion__nav {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    z-index: 129;
    pointer-events: auto
}

.left-menu-orion__nav .item-box {
    background: var(--desktop-left-menu-1st-bg)
}

.left-menu-orion__nav .left-menu__nav-item:hover {
    color: var(--desktop-left-menu-1st-item-txt-hover);
    cursor: pointer
}

.left-menu-orion__nav .left-menu__nav-item:hover .left-menu__nav-arrow {
    background: var(--desktop-left-menu-1st-item-arrow-hover)
}

.left-menu-orion__nav .left-menu__nav-item+.left-menu__nav-item {
    margin-top: 2.1333333333rem
}

.left-menu-orion__nav .left-menu__nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.1
}

.left-menu-orion__nav .item-box:last-child {
    flex-grow: 1
}

.left-menu-orion__subnav {
    position: relative;
    height: 100%;
    pointer-events: auto
}

.left-menu-orion__subnav .item-box {
    background: var(--desktop-left-menu-2nd-bg)
}

.left-menu__search-games {
    display: flex;
    justify-content: space-between;
    padding: 3.2rem 6.4rem;
    border: .32rem solid transparent;
    border-radius: 1.0666666667rem;
    background: var(--desktop-left-menu-search-btn-bg);
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%);
    color: var(--desktop-left-menu-search-btn-txt);
    transition: border .3s;
    cursor: pointer
}

.left-menu__search-games:hover {
    border: .32rem solid var(--desktop-left-menu-search-btn-border-hover)
}

.left-menu__search-games-icon {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--desktop-left-menu-search-btn-search-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 80%;
    mask-position: 80%
}

.left-menu__other-nav-box .left-menu__nav-item {
    display: flex;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0 3.2rem;
    border-radius: 1.0666666667rem;
    transition: background .8s,border .8s,color .8s
}

.left-menu__other-nav-box .left-menu__nav-item a {
    display: grid;
    grid-template-columns: 6.4rem 1fr;
    grid-gap: 2.1333333333rem;
    align-items: center;
    width: 100%;
    color: inherit
}

.left-menu__nav-item {
    position: relative;
    display: grid;
    grid-template-columns: 6.4rem 1fr 4.2666666667rem;
    grid-gap: 2.1333333333rem;
    align-items: center;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0 3.2rem;
    border-radius: 1.0666666667rem;
    color: var(--desktop-left-menu-1st-item-txt);
    transition: color .4s ease-in-out,background-position .4s ease-in-out;
    background-size: 200% auto;
    background-position: right center;
    background-image: var(--desktop-left-menu-1st-item-bg-hover)
}

.left-menu__nav-item.active {
    background-position: left center;
    background-image: var(--desktop-left-menu-1st-item-bg-checked);
    color: var(--desktop-left-menu-1st-item-txt-checked)
}

.left-menu__nav-item.active:after {
    content: "";
    position: absolute;
    left: -.2666666667rem;
    width: 1.0666666667rem;
    height: 100%;
    background: var(--desktop-left-menu-1st-item-underline-checked);
    border-radius: .5333333333rem;
    z-index: 1
}

.left-menu__nav-item.active .left-menu__nav-arrow {
    background: var(--desktop-left-menu-1st-item-arrow-checked)
}

.left-menu__nav-item:hover {
    background-position: left center
}

.left-menu__nav-icon {
    width: 6.4rem;
    height: 6.4rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.left-menu__nav-arrow {
    justify-self: flex-end;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--desktop-left-menu-1st-item-arrow);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 80%;
    mask-position: 80%;
    transform: rotate(-90deg);
    transition: background .8s,border .8s,color .8s
}

.left-menu__vendor-box,.left-menu__contact-box {
    position: absolute;
    top: 0;
    left: -70.4rem;
    display: grid;
    grid-template-columns: repeat(2,calc(50% - 1.0666666667rem));
    grid-auto-rows: 18.6666666667rem;
    grid-gap: 3.2rem 2.1333333333rem;
    height: 100%;
    max-height: 100%;
    overflow-y: scroll;
    transition: all .3s;
    opacity: 0
}

.left-menu__vendor-box.active,.left-menu__contact-box.active {
    top: 0;
    left: 3.2rem;
    opacity: 1
}

.left-menu__vendor-box a,.left-menu__contact-box a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.left-menu__vendor-box p,.left-menu__contact-box p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    margin-bottom: 2.1333333333rem;
    font-size: 3.7333333333rem;
    color: var(--desktop-left-menu-2nd-item-txt)
}

.left-menu__subnav-item {
    display: flex;
    justify-content: center;
    border-radius: 1.0666666667rem;
    text-align: center;
    transition: transform .3s ease;
    cursor: pointer
}

.left-menu__subnav-item:hover {
    transform: scale(1.1)
}

.left-menu__subnav-item__maintain-inner {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1.1;
    border-radius: 1.0666666667rem;
    background: var(--desktop-left-menu-2nd-item-maintain-bg);
    color: var(--desktop-left-menu-2nd-item-maintain-txt);
    font-size: 3.2rem;
    font-weight: 500;
    z-index: 115
}

.left-menu__subnav-item__maintain-inner p {
    margin-bottom: 0
}

.left-menu__subnav-icon {
    width: 8rem;
    height: 8rem;
    margin: 2.1333333333rem
}

.left-menu__subnav-icon--bg {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.nav-wrap .nav-content-wrap .nav-content-inner {
    transition: all .75s ease-in-out
}

.layout-brand {
    padding: 0
}

.navbar {
    display: flex;
    justify-content: center;
    width: 100%;
    height: var(--desktop-header-nav-height);
    background: var(--desktop-header-nav-bg)
}

.navbar .navbar__item-head,.navbar .navbar__item-text {
    display: flex;
    align-items: center;
    padding: clamp(4px,2vw,4px);
    width: max-content;
    flex: 0 1 auto
}

.navbar ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    color: var(--desktop-header-nav-txt);
    overflow: hidden
}

.navbar__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    flex: 0 1 auto;
    min-width: 26.6666666667rem;
    height: var(--desktop-header-nav-height);
    text-align: center;
    transition: background-position .2s ease-in-out,border .2s ease-in-out,color .2s ease-in-out;
    background-size: auto 200%;
    background-position: top center;
    background-image: var(--desktop-header-nav-bg-hover);
    cursor: pointer
}

.navbar__item:hover {
    background-position: bottom center;
    color: var(--desktop-header-nav-txt-hover)
}

.navbar__item:hover .navbar__item-arrow {
    background: var(--desktop-header-nav-txt-hover)
}

.navbar__item.open {
    background-position: bottom center;
    background-image: var(--desktop-header-nav-bg-open);
    color: var(--desktop-header-nav-txt-open)
}

.navbar__item.open .navbar__item-arrow {
    transform: rotate(180deg);
    background: var(--desktop-header-nav-arrow-icon-open)
}

.navbar__item.active {
    background-position: bottom center;
    background-image: var(--desktop-header-nav-bg-active);
    color: var(--desktop-header-nav-txt-active)
}

.navbar__item.active:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(100% + .8rem);
    height: .5333333333rem;
    background: var(--desktop-header-nav-underline-active);
    border-radius: .5333333333rem;
    z-index: 1
}

.navbar__item.active .navbar__item-arrow {
    background: var(--desktop-header-nav-arrow-icon-active)
}

.navbar__item:before {
    content: "";
    display: block;
    position: absolute;
    inset: auto auto auto 0;
    width: .32rem;
    height: 4.2666666667rem;
    background: var(--desktop-header-nav-border)
}

.navbar__item:first-child:before {
    display: none
}

.navbar__item-arrow {
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    margin-left: .5333333333rem;
    flex: 0 0 2.6666666667rem;
    background: var(--desktop-header-nav-arrow-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: 70%;
    mask-position: 70%;
    transition: background .2s ease-in-out,transform .2s ease-in-out
}

.navbar__sub-nav {
    display: flex;
    position: fixed;
    left: 0;
    top: calc(var(--desktop-header-main-height) + var(--desktop-header-nav-height));
    justify-content: center;
    width: 100vw;
    height: auto;
    max-height: 0;
    padding: 6.4rem 0;
    background: var(--desktop-header-sub-nav-bg);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    overflow-x: scroll;
    transition: visibility .5s ease,opacity .5s ease,max-height .5s ease
}

.navbar__sub-nav.active {
    visibility: visible;
    opacity: 1;
    max-height: 266.6666666667rem
}

.navbar__sub-nav-inner {
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-gap: 2.1333333333rem;
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit)
}

.navbar__sub-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 32rem;
    height: 19.2rem;
    transition: transform .3s ease
}

.navbar__sub-nav-item:hover {
    transform: scale(1.1)
}

.navbar__sub-nav-item.maintain {
    overflow: hidden
}

.navbar__sub-nav-item-icon {
    width: 8rem;
    height: 8rem;
    margin-bottom: 1.0666666667rem;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat
}

.navbar__sub-nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    width: 100%;
    margin-top: 1.0666666667rem;
    font-size: 3.4666666667rem;
    color: var(--desktop-header-sub-nav-txt);
    text-shadow: 0 0 1.0666666667rem color-mix(in srgb,var(--text-shadow),transparent 80%);
    line-height: 1.2
}

.navbar__sub-nav-item__maintain-inner {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1.1;
    padding: 3.2rem;
    border-radius: 2.1333333333rem;
    background: var(--desktop-header-sub-nav-maintain-bg);
    color: var(--desktop-header-sub-nav-maintain-txt);
    font-size: 3.7333333333rem;
    z-index: 115
}

.icon-marquee {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin: 3.2rem auto 6.4rem
}

.header {
    background: var(--desktop-header-bg)
}

.header__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    height: var(--desktop-header-main-height);
    margin: 0 auto
}

.header__menu-btn {
    opacity: 1;
    margin-right: 2.1333333333rem;
    padding: 2.1333333333rem;
    cursor: pointer
}

.header__menu-btn:hover {
    opacity: .7
}

.header__menu-btn li {
    width: 4.2666666667rem;
    height: .5333333333rem;
    border-radius: 1.0666666667rem;
    margin: 1.0666666667rem 0;
    background: var(--header-burger-icon-color)
}

.header__menu-btn li:nth-child(2) {
    width: 3.2rem
}

.header__logo {
    display: block;
    width: var(--desktop-header-logo-width);
    height: var(--desktop-header-main-height);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    opacity: 1
}

.header__logo:hover {
    opacity: .7
}

.header__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 28rem;
    height: 10.6666666667rem;
    margin-right: 3.2rem;
    padding: 3.2rem;
    border-radius: 1.0666666667rem;
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 3.7333333333rem;
    border: none;
    cursor: pointer
}

.header__btn--primary {
    background: var(--desktop-header-login-bg);
    color: var(--desktop-header-login-txt)
}

.header__btn--secondary {
    background: var(--desktop-header-register-bg);
    color: var(--desktop-header-register-txt)
}

.header__btn--deposit {
    background: var(--desktop-header-deposit-bg);
    color: var(--desktop-header-deposit-txt)
}

.header__btn--wallet {
    background: var(--desktop-header-wallet-bg);
    color: var(--desktop-header-wallet-txt)
}

.header__btn--wallet.clicked .header__icon--wallet {
    animation: rotate 1s
}

.header__btn-value {
    margin-left: 2.1333333333rem
}

.header__icon {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    margin-right: 2.1333333333rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain
}

.header__icon img {
    width: 100%
}

.header__icon--deposit {
    background: var(--desktop-header-deposit-txt)
}

.header__icon--wallet {
    mask-size: 70%;
    -webkit-mask-size: 70%;
    background: var(--desktop-header-wallet-txt)
}

.header__user,.header__switch-mode {
    height: 8rem;
    width: 8rem;
    margin-right: 3.2rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    background: var(--desktop-header-user-icon)
}

.header__switch-lang {
    height: 8rem
}

.header__switch-lang img {
    height: 100%
}

.header .auth-container {
    display: flex
}

.header--shrink .header__main {
    width: var(--desktop-layout-content-limit-when-menu-open)
}

.header__brand,.header__right {
    display: flex;
    align-items: center
}

.header__user,.header__switch-mode,.header__deposit-label,.header__main-wallet-label,.header__auth-container button,.header__switch-lang {
    cursor: pointer;
    opacity: 1;
    transition: opacity .5s
}

.header__user:hover,.header__switch-mode:hover,.header__deposit-label:hover,.header__main-wallet-label:hover,.header__auth-container button:hover,.header__switch-lang:hover {
    opacity: .8
}

.cricket-money {
    display: flex;
    align-items: center;
    height: 10.6666666667rem;
    border-radius: 1.0666666667rem 0 0 1.0666666667rem;
    background: var(--header-login-btn-bg, #000);
    color: var(--header-login-btn-txt, #fff);
    margin-left: 2.1333333333rem;
    padding: 2.1333333333rem
}

.exp {
    align-items: center;
    height: 10.6666666667rem;
    background: var(--header-exp-btn-bg, #000);
    border-radius: 0 1.0666666667rem 1.0666666667rem 0;
    color: var(--header-exp-btn-txt, #fff);
    display: flex;
    margin-right: 2.1333333333rem;
    padding: 2.1333333333rem
}

.icon-refresh {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--header-refresh-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin-right: 2.1333333333rem
}

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

.popup-page-main {
    width: 375px;
    max-height: 700px;
    border-radius: 1.0666666667rem
}

@supports (height: 100dvh) {
    .popup-page-main {
        height:calc(100dvh - 16rem)
    }
}

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

.layout-desktop__content .tab.search-tab,.layout-desktop__content .tab.filter-tab {
    width: 100%;
    height: 56px;
    margin: 3.2rem auto
}

.layout-desktop__content .tab ul li {
    height: 40px;
    min-width: 24.8rem
}

.layout-desktop__content .tab .btn {
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .tab .btn:hover {
    opacity: .7
}

.layout-desktop__content .tab .btn span {
    mask-size: 32%;
    -webkit-mask-size: 32%
}

.sort-bar {
    align-items: flex-end;
    margin: 3.2rem 0 0
}

.sort-bar__btn {
    display: none
}

.sort-bar__select {
    position: relative;
    top: 0;
    flex-direction: row;
    grid-gap: 2.1333333333rem;
    max-height: none;
    padding-top: 0;
    opacity: 1;
    overflow: visible
}

.sort-bar__select__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 10.6666666667rem;
    padding: 0 6.4rem;
    color: var(--desktop-games-tab-txt);
    background: var(--desktop-games-tab-bg);
    border: .32rem solid var(--desktop-games-tab-border);
    border-radius: 1.0666666667rem;
    font-size: 3.7333333333rem;
    transition: background .8s,border .8s,color .8s
}

.sort-bar__select__item:hover {
    background: var(--desktop-games-tab-bg-hover);
    border: .32rem solid var(--desktop-games-tab-border-hover);
    color: var(--desktop-games-tab-txt-hover);
    cursor: pointer
}

.sort-bar__select__item.active {
    background: var(--desktop-games-tab-bg-checked);
    border: .32rem solid var(--desktop-games-tab-border-checked);
    color: var(--desktop-games-tab-txt-checked)
}

.sort-bar__select__item.active:after {
    content: "";
    position: absolute;
    bottom: -.32rem;
    width: calc(100% + .64rem);
    height: .5333333333rem;
    background: var(--desktop-games-tab-underline-checked);
    border-radius: .5333333333rem;
    z-index: 1
}

.sort-bar__select__item:first-child,.sort-bar__select__item:last-child {
    border-radius: 1.0666666667rem
}

.announcement-row {
    background: var(--announvement-bg)
}

.announcement-row:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(var(--desktop-layout-content-max-width) * -.5),-50%);
    z-index: 1
}

.announcement-row:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    height: 8rem;
    transform: translate(calc(var(--desktop-layout-content-max-width) * -.5),-50%);
    background: var(--announvement-bg)
}

.announcement-row .marquee {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto
}

.icon-sport {
    width: 8rem;
    height: 8rem;
    margin: 2.1333333333rem
}

.dropdown-menu {
    width: 58.6666666667rem;
    height: 100%;
    border-radius: 1.0666666667rem;
    color: var(--desktop-header-dropdown-menu-txt);
    background: var(--desktop-header-dropdown-menu-bg);
    overflow: auto;
    box-shadow: .5333333333rem 1.0666666667rem 1.0666666667rem var(--pop-bg-shadow)
}

.dropdown-menu__head {
    padding: 4.2666666667rem
}

.dropdown-menu__group {
    position: relative;
    padding: 4.2666666667rem
}

.dropdown-menu__group:before {
    content: "";
    display: block;
    position: absolute;
    inset: 0 auto auto;
    width: calc(100% - 8.5333333333rem);
    height: .32rem;
    background: var(--desktop-header-dropdown-menu-border)
}

.dropdown-menu__user-name {
    font-size: 4.2666666667rem;
    font-weight: 700
}

.dropdown-menu__user-name+.dropdown-menu__user-info {
    margin-top: 2.1333333333rem
}

.dropdown-menu__user-info+.dropdown-menu__user-info {
    margin-top: 1.0666666667rem
}

.user-info__title {
    font-size: 3.7333333333rem;
    line-height: 1.2
}

.user-info__value {
    color: var(--desktop-header-dropdown-menu-hightlight);
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 1.2
}

.user-info__value--refreshable {
    cursor: pointer
}

.user-info__value>.user-info__refresh-icon {
    margin-left: 2.1333333333rem
}

.user-info__refresh-icon {
    width: 3.2rem;
    height: 3.2rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    transform: rotate 1s;
    background: var(--desktop-header-dropdown-menu-hightlight)
}

.user-info__value--reloading .user-info__refresh-icon {
    animation: rotate 1s
}

.dropdown-menu-item {
    display: flex;
    align-items: center;
    cursor: pointer
}

.dropdown-menu-item+.dropdown-menu-item {
    margin-top: 4.2666666667rem
}

.dropdown-menu-item__icon {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center
}

.dropdown-menu-item__icon+.dropdown-menu-item__text {
    margin-left: 4.2666666667rem
}

.dropdown-menu-item__text {
    color: var(--desktop-header-dropdown-menu-txt);
    font-size: 3.7333333333rem;
    font-weight: 600;
    transition: color .2s ease
}

.dropdown-menu-item__text:hover {
    color: var(--desktop-header-dropdown-menu-txt-hover)
}

.dropdown-menu-item__notice {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    min-width: 5.3333333333rem;
    min-height: 5.3333333333rem;
    border-radius: 50%;
    line-height: 5.3333333333rem;
    margin-left: auto;
    text-align: center;
    font-size: 3.7333333333rem;
    font-weight: 500;
    background: var(--desktop-header-dropdown-menu-inbox-bg);
    color: var(--desktop-header-dropdown-menu-inbox-txt)
}

.dropdown-menu-item__exclamation {
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    min-width: 5.3333333333rem;
    min-height: 5.3333333333rem;
    border-radius: 50%;
    line-height: 5.3333333333rem;
    margin-left: auto;
    text-align: center;
    background: var(--desktop-header-dropdown-menu-exclamation-bg, var(--desktop-header-dropdown-menu-inbox-bg))
}

.dropdown-menu-item__exclamation .item-icon {
    display: block;
    width: 5.3333333333rem;
    height: 5.3333333333rem;
    background: var(--desktop-header-dropdown-menu-exclamation-txt, var(--desktop-header-dropdown-menu-inbox-txt))
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.recommend-orion {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    margin: 13.8666666667rem auto 6.4rem
}

.recommend-orion .recommend-title {
    display: flex;
    align-items: center;
    margin-bottom: 3.2rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    letter-spacing: .2666666667rem;
    vertical-align: middle
}

.recommend-orion .recommend-title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--event-border);
    vertical-align: middle
}

.feature-games-orion {
    display: grid;
    grid-template-columns: 64rem auto;
    grid-gap: 3.2rem;
    margin-top: 3.2rem
}

.feature-games-orion .recommend-main {
    position: relative;
    width: auto;
    margin: 0;
    overflow: unset
}

.slot-slider-banner {
    width: 64rem;
    height: 85.3333333333rem;
    overflow: hidden;
    cursor: pointer
}

.slot-slider-banner .item-pic {
    height: 85.3333333333rem;
    background-size: cover;
    border-radius: 1.0666666667rem
}

.slot-slider-banner img {
    width: 100%;
    height: auto;
    border-radius: 1.0666666667rem
}

.slot-slider-banner.loading .slot-banner-default {
    position: relative;
    display: block;
    width: 64rem;
    height: 85.3333333333rem;
    border-radius: 1.0666666667rem;
    overflow: hidden
}

.slot-slider-banner.loading .slot-banner-default:before {
    animation: game-box-loading 2s linear infinite;
    background-size: 200% auto;
    background-repeat: repeat;
    content: "";
    height: 100%;
    left: -50%;
    position: absolute;
    top: 0;
    width: 200%;
    transform-origin: center;
    background-image: var(--desktop-feature-game-coming-soon-pic-loading-bg)
}

.pagination-orion {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 3.2rem
}

.games-tab-group {
    position: absolute;
    top: -13.8666666667rem;
    right: 0;
    display: flex;
    grid-gap: 2.1333333333rem
}

.games-tab-group li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10.6666666667rem;
    line-height: 10.6666666667rem;
    padding: 0 6.4rem;
    color: var(--desktop-feature-game-tab-txt);
    background: var(--desktop-feature-game-tab-bg);
    border: .32rem solid var(--desktop-feature-game-tab-border);
    border-radius: 1.0666666667rem;
    font-size: 3.7333333333rem;
    font-weight: 500;
    transition: background .8s,border .8s,color .8s
}

.games-tab-group li:hover {
    background: var(--desktop-feature-game-tab-bg-hover);
    border: .32rem solid var(--desktop-feature-game-tab-border-hover);
    color: var(--desktop-feature-game-tab-txt-hover);
    cursor: pointer
}

.games-tab-group li.active {
    background: var(--desktop-feature-game-tab-bg-checked);
    border: .32rem solid var(--desktop-feature-game-tab-border-checked);
    color: var(--desktop-feature-game-tab-txt-checked)
}

.games-tab-group li.active:after {
    content: "";
    position: absolute;
    bottom: -.32rem;
    width: calc(100% + .64rem);
    height: .5333333333rem;
    background: var(--desktop-feature-game-tab-underline-checked);
    border-radius: .5333333333rem;
    z-index: 1
}

.games .games-result-group {
    display: grid;
    grid-template-columns: repeat(5,48rem);
    grid-gap: 3.2rem
}

.games .games-result-group.loading .pic {
    position: relative
}

.games .games-result-group.loading .pic:before {
    animation: game-box-loading 2s linear infinite;
    background-size: 200% auto;
    background-repeat: repeat;
    content: "";
    height: 600%;
    left: -50%;
    position: absolute;
    top: -200%;
    width: 200%;
    transform-origin: center;
    background-image: var(--desktop-feature-game-coming-soon-pic-loading-bg)
}

.games .games-result-group.loading .text h3 {
    color: transparent;
    background: var(--desktop-feature-game-coming-soon-pic-loading-txt);
    border-radius: 1.0666666667rem
}

.games .game-coming-soon {
    background: var(--desktop-feature-game-coming-soon-bg)
}

.games .game-coming-soon .pic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48rem;
    height: 32rem;
    padding: 3.2rem;
    font-size: 6.9333333333rem;
    font-weight: 700;
    background: var(--desktop-feature-game-coming-soon-pic-bg)
}

.games .game-coming-soon .pic h2 {
    line-height: 7.4666666667rem;
    background: var(--desktop-feature-game-coming-soon-pic-gradient-txt);
    color: transparent;
    text-align: center;
    background-clip: text;
    -webkit-background-clip: text
}

.games .game-coming-soon .pic h2 span {
    display: block
}

.games .game-coming-soon .text h3 {
    color: var(--desktop-feature-game-coming-soon-pic-txt)
}

@keyframes game-box-loading {
    0% {
        background-position: 200% 200%
    }

    50% {
        background-position: 100% 100%
    }

    to {
        background-position: 0% 0%
    }
}

.footer {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 6.4rem 3.2rem
}

.footer__partners,.footer__ambassadors {
    margin: 6.4rem 0
}

.footer .footer-collapse {
    padding-bottom: 20.2666666667rem
}

.footer .footer-collapse__btn {
    bottom: 6.4rem
}

.footer .footer-collapse__btn:hover {
    background: var(--footer-btn-bg-hover);
    color: var(--footer-btn-txt-hover);
    border-color: var(--footer-btn-border-hover)
}

.footer .footer-collapse__btn:hover .footer-collapse__btn-arrow,.footer .footer-collapse__btn:hover .footer-collapse__btn-arrow--active {
    display: inline-block;
    width: 4.2666666667rem;
    height: 2.1333333333rem;
    margin-left: 1.0666666667rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background: var(--footer-btn-arrow);
    background: var(--footer-btn-arrow-hover)
}

.footer__partners {
    grid-column: 1/span 2
}

.footer__ambassadors {
    grid-column: 3/span 2
}

.footer__copyrights {
    padding: 6.4rem 0
}

.footer .pay,.footer .about-us {
    grid-column: 1/span 4;
    margin: 6.4rem 0
}

.footer .about-us ul {
    display: inline-flex;
    grid-gap: unset
}

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

.footer .about-us li:after {
    left: calc(100% + 3.2rem)
}

.footer .about-us li+li {
    margin-left: 8.5333333333rem
}

.footer .about-us a:hover {
    color: var(--footer-link-hover)
}

.footer .footer-social {
    grid-column: 3/span 2;
    margin: 6.4rem 0
}

.footer .footer-social ul {
    grid-template-columns: repeat(12,1fr)
}

.footer .license,.footer .partner,.footer__download {
    margin: 6.4rem 0
}

.footer .row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-gap: 2.1333333333rem
}

html,body {
    height: 100%
}

.main-router-wrapper {
    display: contents
}

body {
    overflow: hidden
}

.layout-desktop__content .button {
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .button:hover {
    opacity: .7
}

.layout-desktop .cricket-container {
    width: 480px;
    margin: 0 auto;
    background: var(--content-bg);
    z-index: 0
}

.layout-desktop .cricket-maintenance-container {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--content-bg)
}

.layout-desktop .content-box {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto
}

.layout-desktop__body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat
}

.get-vcode-btn,.btn-closed,.btn-close,.add-btn,.save-btn,.bank-info-copy,.checkbox-agree,.float-wrap__btn,.right-language-area li,.button,.editor__btn,.editor-menu li,.editor-check li,.message-item,.tab-btn .btn {
    cursor: pointer;
    opacity: 1
}

.get-vcode-btn:hover,.btn-closed:hover,.btn-close:hover,.add-btn:hover,.save-btn:hover,.bank-info-copy:hover,.checkbox-agree:hover,.float-wrap__btn:hover,.right-language-area li:hover,.button:hover,.editor__btn:hover,.editor-menu li:hover,.editor-check li:hover,.message-item:hover,.tab-btn .btn:hover {
    opacity: .7
}

.nav-category {
    width: inherit
}

.nav-category .btn,.card1 li a {
    cursor: pointer
}

.nav.nav-auto {
    overflow: visible
}

.maintenance-row {
    margin: 3.2rem 0 0
}

.maintenance-row .tooltips {
    top: 12rem;
    right: 8px
}

.nextevent {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin: 3.2rem auto 6.4rem
}

.nextevent .carousel-wrap {
    padding-bottom: 0
}

.nextevent .banner .banner-v1 .carousel-wrap .item-drag,.nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 60.2666666667rem
}

.third-party-login .list-group .status.unconfirm-btn {
    cursor: pointer;
    opacity: 1
}

.third-party-login .list-group .status.unconfirm-btn:hover {
    opacity: .7
}

.pop-wrap,.pop-wrap3 {
    max-width: 375px
}

.pop-language {
    width: 100%;
    height: auto;
    border-radius: 1.0666666667rem;
    overflow: hidden
}

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

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

@supports (height: 100dvh) {
    .pop-language .pop-inner {
        max-height:calc(90dvh - 13.3333333333rem)
    }
}

@supports not (height: 100dvh) {
    .pop-language .pop-inner {
        max-height:calc(90vh - 13.3333333333rem)
    }
}

.pop-reset-password,.pop-account-lock {
    top: 50%;
    left: 50%;
    bottom: unset;
    max-width: 375px;
    transform: translate(-50%,-50%)
}

.pop-reset-password .btn-close,.pop-account-lock .btn-close {
    position: absolute;
    display: inline-block;
    z-index: 1;
    top: 0;
    right: 0;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    transition: .5s;
    background: var(--pop-lock-close-icon-color);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%
}

.games .recommend-main .games-box {
    margin: 0 3.2rem 0 0
}

.recommend {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin: 3.2rem auto 6.4rem
}

.layout-desktop__content .searchpage {
    z-index: 129;
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    width: 375px;
    border: .32rem solid var(--desktop-searchpage-border);
    border-radius: 1.0666666667rem
}

.layout-desktop__content .searchpage .button {
    font-size: 4.2666666667rem
}

.layout-desktop__content .search-top-info {
    flex: none;
    height: 60px
}

.layout-desktop__content .search-top-info .back {
    width: 60px;
    transform: rotate(180deg);
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .search-top-info .back:hover {
    opacity: .7
}

.layout-desktop__content .search-top-info input {
    border-radius: 1.0666666667rem
}

.layout-desktop__content .search-top-info .icon-search {
    width: 60px;
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .search-top-info .icon-search:hover {
    opacity: .7
}

.layout-desktop__content .searchpage-main {
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 4px
}

.layout-desktop__content .searchpage-main h2 {
    margin-bottom: 3.2rem;
    font-size: 3.7333333333rem
}

.layout-desktop__content .searchpage-main .check-group {
    padding: 3.2rem
}

.layout-desktop__content .check-group {
    background: var(--pop-search-inner-bg)
}

.layout-desktop__content .check-group:nth-child(1) {
    border-radius: 4px 4px 0 0
}

.layout-desktop__content .check-group:last-child {
    border-radius: 0 0 4px 4px
}

.layout-desktop__content .search-checkbox-group ul {
    grid-gap: 4px;
    margin-bottom: 0
}

.layout-desktop__content .search-checkbox-group [type=checkbox]+label,.layout-desktop__content .search-checkbox-group [type=radio]+label {
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .search-checkbox-group [type=checkbox]+label:hover,.layout-desktop__content .search-checkbox-group [type=radio]+label:hover {
    opacity: .7
}

.layout-desktop__content .searchpage-bar {
    position: absolute;
    right: auto;
    top: auto;
    transform: translate(0)
}

.layout-desktop__content .searchpage-bar.active {
    right: auto
}

.search-container {
    left: calc((100vw - 800px)/2);
    width: 850px;
    height: calc(100vh - 32rem);
    margin-top: 32rem;
    background: transparent
}

.search-container .search__header {
    padding-left: 0;
    background: transparent
}

.search-container .search__header input {
    box-shadow: 0 2.1333333333rem 3.2rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.search-container .search__results {
    width: 800px;
    height: calc(100vh - 32rem - 13.3333333333rem - 3.2rem);
    margin-top: 6.4rem
}

.search-container .games .games-main {
    grid-template-columns: repeat(4,1fr)
}

.transparent-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent
}

.third-party-login a,.third-party-login .login-group label,.third-party-login .accordion-wrap,.third-party-login .refresh-icon,.third-party-login .captcha-bar-btn {
    cursor: pointer;
    opacity: 1
}

.third-party-login a:hover,.third-party-login .login-group label:hover,.third-party-login .accordion-wrap:hover,.third-party-login .refresh-icon:hover,.third-party-login .captcha-bar-btn:hover {
    opacity: .7
}

.third-party-login .currency-list-area li {
    cursor: pointer
}

.third-party-login .currency-list-area li:hover {
    background-color: var(--third-party-register-form-select-item-hover)
}

.top-banner-wrapper {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 3.2rem
}

.top-banner-wrapper .banner {
    height: 80rem
}

html.is-desktop .top-banner-wrapper .banner {
    overflow: hidden
}

.top-banner-wrapper .banner:before {
    display: none
}

.top-banner-wrapper .banner .carousel-wrap {
    display: flex;
    align-items: center;
    max-width: none;
    width: auto;
    height: auto
}

.top-banner-wrapper .banner .carousel-wrap .carousel-frame-alpha-container {
    max-width: 1200px;
    margin: 0 auto
}

.top-banner-wrapper .banner .carousel-wrap .item {
    height: 80rem;
    padding: 0;
    border-radius: 1.0666666667rem
}

.top-banner-wrapper .banner .carousel-wrap .item .item-pic {
    height: 80rem;
    border-radius: 1.0666666667rem
}

.games .jackpot {
    position: relative;
    width: 100%;
    height: 66.6666666667rem;
    margin: 3.2rem auto
}

.games .jackpot h2 {
    margin-bottom: 5.3333333333rem;
    font-size: 5.8666666667rem
}

.games .games-main {
    padding: 0;
    grid-template-columns: repeat(6,1fr);
    grid-gap: 3.2rem
}

.games .games-box {
    margin: auto;
    cursor: pointer
}

.games .games-box .pic img {
    transition: transform .8s
}

.games .games-box:hover .pic img {
    transform: scale(1.2)
}

.games .jackpot-banner-wrapper {
    position: relative;
    height: auto;
    transform: unset;
    padding: 2.6666666667rem 0 0
}

.games .game-jackpot-number-group p.center-peak-grand {
    top: 75%;
    font-size: 6.4rem
}

.games .game-jackpot-number-group p.center-peak-major {
    top: 81%;
    left: 72%;
    font-size: 6.4rem
}

.games .game-jackpot-number-group p.center-peak-mini {
    top: 81%;
    left: 29%;
    font-size: 6.4rem
}

.games .game-jackpot-number-group p.twin-base-grand {
    left: 39%;
    font-size: 9.0666666667rem
}

.games .game-jackpot-number-group p.twin-base-major {
    top: 81%;
    left: 49%;
    font-size: 6.4rem
}

.games .game-jackpot-number-group p.twin-base-mini {
    top: 81%;
    left: 30%;
    font-size: 6.4rem
}

.games .game-jackpot-number-group p.wide-to-narrow-grand {
    top: 30%;
    left: 38%;
    font-size: 6.6666666667rem
}

.games .game-jackpot-number-group p.wide-to-narrow-major {
    top: 55%;
    left: 38%;
    font-size: 6.1333333333rem
}

.games .game-jackpot-number-group p.wide-to-narrow-mini {
    top: 79%;
    left: 38%;
    font-size: 6.1333333333rem
}

.games .game-jackpot-number-group p.left-aligned-grand {
    top: 61%;
    left: 28%;
    font-size: 10.6666666667rem
}

.games .game-jackpot-number-group p.center-aligned-grand {
    top: 67%;
    left: 50%;
    font-size: 11.2rem
}

.games .game-jackpot-number-group p.right-aligned-grand {
    top: 61%;
    left: 73%;
    font-size: 11.2rem
}

.games-main.main-vertical {
    grid-template-columns: repeat(auto-fill,minmax(36rem,1fr))
}

.games-main.main-vertical .games-box {
    width: 100%!important;
    transition: transform .2s ease-in-out;
    transform: translateY(0)
}

.games-main.main-vertical .games-box.games-box--login {
    margin: 4.8rem auto 0px!important
}

.games-main.main-vertical .games-box .info-wrap {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3.2rem 3.2rem 6.4rem;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transition: opacity .3s
}

.games-main.main-vertical .games-box .info-wrap:before {
    z-index: 1;
    opacity: 0;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--game-box-info-hover-bg, #2d2e30);
    border-radius: 1.0666666667rem;
    transition: opacity .5s ease-in
}

.games-main.main-vertical .games-box .info-wrap .game-info-container,.games-main.main-vertical .games-box .info-wrap .game-group {
    z-index: 1;
    line-height: 5.3333333333rem;
    color: var(--game-box-info-hover-txt, #fff)
}

.games-main.main-vertical .games-box .info-wrap .game-group {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 3.7333333333rem
}

.games-main.main-vertical .games-box .game-info-wrap {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden
}

.games-main.main-vertical .games-box .wrap-icon {
    z-index: 1;
    height: 10.6666666667rem;
    width: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: var(--game-box-info-hover-txt, #fff)
}

.games-main.main-vertical .games-box:hover {
    transform: translateY(-4%)
}

.games-main.main-vertical .games-box:hover .pic img {
    transform: none
}

.games-main.main-vertical .games-box:hover .info-wrap {
    opacity: 1;
    pointer-events: all;
    z-index: 2
}

.games-main.main-vertical .games-box:hover .info-wrap:before {
    opacity: .9
}

.games-main.main-vertical .games-box:hover .like {
    transform: translateY(-90%) rotate(144deg)
}

.games-main.main-vertical .games-box:hover .like img[alt=favStar] {
    filter: drop-shadow(0px 0px 1px var(--game-box-star-shower-colr))
}

.games-empty-container {
    display: block;
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto 16px
}

.games-empty-container .top-inner {
    max-width: 375px;
    padding: 20px
}

.header__btn {
    text-shadow: 0 0 2px rgba(0,0,0,.4)
}

.header__btn--primary {
    box-shadow: 0 4px 8px #191e32;,inset 0 0 2px #747687
}

.header__btn--secondary {
    box-shadow: 0 4px 8px #191e32;,inset 0 0 2px #d4b665
}

.footer .footer-social {
    grid-column: 4/span 1
}

.partners-list {
    max-width: var(--desktop-layout-content-max-width);
    width: var(--desktop-layout-content-limit);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin: 3.2rem auto
}

.partners-list ul {
    display: flex;
    justify-content: center
}

.partners-list li {
    display: flex;
    align-items: center
}

.partners-list li:not(:first-child):before {
    content: "";
    display: inline-block;
    width: .32rem;
    height: 6.4rem;
    margin-left: 3.2rem;
    background: var(--color-border)
}

.partners-list img {
    width: auto;
    height: 6.4rem;
    margin: 0 3.2rem
}

.partners-list p {
    font-size: 3.7333333333rem;
    color: #fff
}

.launch-game-page .site-top .site-menu.no-deposit .f-logo-bg {
    width: 100px;
    height: 100%
}
.layout-desktop__header-inner--shaded{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.header-dropdown{
    pointer-events: all !important;
}
body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* Standard */
  -webkit-touch-callout: none; /* Disable iOS long-press menu */
}