@import"https://fonts.googleapis.com/css2?family=Arsenal:wght@400;700&display=swap";@charset "UTF-8";:root {
    --primary: #281a70;
    --secondary: #ffd259;
    --color-success: #40d0cb;
    --color-danger: #ff5959;
    --color-warning: #ffd259;
    --color-info: #00b5ff;
    --content-bg: #281a70;
    --pop-bg: rgba(0, 0, 0, .4);
    --pop-bg-content: #281a70;
    --pop-bg-shadow: rgba(0, 0, 0, .05);
    --pop-mask-bg: color-mix(in srgb, var(--pop-bg), transparent 30%);
    --color-title: #ffffff;
    --color-text: rgba(255, 255, 255, .4);
    --color-text-strong: #79a5fc;
    --offset-shadow: #281a70;
    --inset-shadow: #ffffff;
    --text-shadow: #834c00;
    --gradient-red: linear-gradient(to bottom, #da1a1a 35%, #f26969 100%);
    --gradient-orange: linear-gradient(135deg, #ffae12 0%, #ff7e00 100%);
    --gradient-yellow: linear-gradient(to right, #ffd259 0%, #ffd259 100%);
    --gradient-green: linear-gradient(135deg, #86cc4e 0%, #3dac3c 100%);
    --gradient-blue: linear-gradient(135deg, #698af2 0%, #3356cd 100%);
    --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: #79a5fc;
    --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-exp-btn-bg: #e62626;
    --header-exp-btn-txt: #ffffff;
    --header-refresh-icon-color: #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-main-txt-shadow-disabled: transparent;
    --form-box-bg: #363285;
    --form-txt: var(--color-title);
    --form-input-bg: #444796;
    --form-input-border: var(--form-input-bg);
    --form-input-txt: var(--color-title);
    --form-input-txt-placeholder: rgba(255, 255, 255, .3);
    --form-input-border-focus: #ffd259;
    --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(/assets/images/icon-set/icon-cross-type09.svg);
    --form-clear-icon-color: #ffd259;
    --form-eyes-close-icon: url(/assets/images/icon-set/icon-eye-close-type03.svg);
    --form-eyes-open-icon: url(/assets/images/icon-set/icon-eye-open-type03.svg);
    --form-eyes-icon-color: #ffffff;
    --form-select-triangle: #ffffff;
    --form-refresh-icon: url(/assets/images/icon-set/icon-refresh-type01.svg);
    --form-refresh-icon-color: #ffffff;
    --form-upload-bg: var(--form-input-bg);
    --form-upload-border: rgba(255, 255, 255, .3);
    --form-upload-camera-icon: url(/assets/images/icon-set/player/kyc/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-bg-checked: linear-gradient(180deg, #6e4a85 0%, #3d1f97 100%);
    --radio-border-checked: linear-gradient(190deg, #ff9fa2 0%, #6d25f4 100%);
    --radio-txt-checked: #ffffff;
    --checkbox-bg-checked: linear-gradient(180deg, #6d4985 0%, #3e1f97 100%);
    --checkbox-bg-color: #222222;
    --checkbox-bg-color-checked: #ffffff;
    --checkbox-tick: #222222;
    --checkbox-border: #222222;
    --checkbox-border-checked: #ffffff;
    --checkbox-check-icon: url(/images/rain/h5/check.svg);
    --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;
    --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);
    --mode-txt: #ffffff;
    --mode-tips-bg: #444796;
    --mode-tips-txt: #ffffff;
    --pagination-bg: #ffd259;
    --pagination-bullet-bg: #ffb80c;
    --pagination-bullet-bg-active: #ffffff;
    --pop-bonus-txt: linear-gradient( to top, #ffffff 15%, #bacfe7 50%, #ffffff 70% );
    --pop-bonus-money: linear-gradient(135deg, #f8ff91 0%, #ffdf3d 50%);
    --pop-bonus-border-inside: linear-gradient( to top, #ffffff 0%, #8da5c0 50%, #ffffff 100% );
    --pop-bonus-border-outside: linear-gradient( to top, #a5bad1 0%, #ffffff 50%, #8da5c0 100% );
    --btn-voucher-txt: #ffffff;
    --btn-voucher-txt-value: #ff3a3a;
    --btn-voucher-bg: rgba(34, 34, 34, .9);
    --btn-voucher-bg-border: #494949;
    --sidenav-mask: rgba(0, 0, 0, .5);
    --sidenav-close-icon-color: #79a5fc;
    --sidenav-member-close-icon-color: var(--sidenav-close-icon-color);
    --sidenav-info-bg: linear-gradient( 135deg, rgba(0, 236, 255, .6) 0%, rgba(98, 48, 213, .6) 40%, rgba(78, 92, 255, .6) 60%, rgba(0, 187, 230, .6) 100% );
    --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: #ffd259;
    --sidenav-info-register-icon-color: #00b5ff;
    --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: rgba(204, 204, 204, .2);
    --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-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-content-bg: var(--content-bg);
    --pop-language-item-bg: rgba(54, 50, 133, .6);
    --pop-language-txt: #ffffff;
    --pop-language-btn: rgba(54, 50, 133, .8);
    --pop-language-btn-txt: #ffffff;
    --pop-language-btn-bg-active: linear-gradient( 180deg, #6e4a85 0%, #3d1f97 100% );
    --pop-language-btn-border: linear-gradient(245deg, #ff9fa2 0%, #6d25f4 100%);
    --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: var(--primary);
    --announvement-icon: url(/wp-content/uploads/2024/08/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: #281a70;
    --sa-maintenance-bg: #ffffff;
    --sa-maintenance-icon-color: #ffb80c;
    --sa-maintenance-txt: #222222;
    --sa-maintenance-info-bg: #ffffff;
    --sa-maintenance-info-icon-color: #878e92;
    --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;
    --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: #647dca;
    --footer-area-bg: rgba(255, 255, 255, .08);
    --footer-link: #79a5fc;
    --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: #878e92;
    --footer-seo-content-wrapper-fold-btn: var(--btn-main-bg);
    --footer-seo-content-wrapper-fold-btn-txt: var(--btn-main-txt);
    --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-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: #4caf50;
    --register-success-check-icon-clip: transparent;
    --register-fail-check-icon: #ff5959;
    --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: #281a70;
    --search-item-bg: #342e80;
    --search-item-txt: #ffffff;
    --search-item-bg-active: #79a5fc;
    --search-item-txt-active: #ffffff;
    --search-search-icon-color: #ffffff;
    --pop-search-header-bg: #281a70;
    --pop-search-back-icon-color: var(--search-search-icon-color);
    --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: rgba(255, 255, 255, .3);
    --pop-search-clear-txt: var(--color-text);
    --pop-search-title: var(--color-title);
    --pop-search-inner-bg: #ffffff;
    --search-btn: var(--search-bg);
    --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);
    --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;
    --slot-empty-bg: #342e81;
    --slot-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;
    --color-walletcard-start-txt: var(--color-walletcard-tx);
    --color-walletcard-start-btn: linear-gradient( to bottom, #eed29f 0%, #cca967 100% );
    --color-walletcard-cancel-txt: var(--color-walletcard-tx);
    --color-walletcard-cancel-btn: linear-gradient( to bottom, #d15454 0%, #cb4141 100% );
    --color-walletcard-receive-txt: var(--color-walletcard-tx);
    --color-walletcard-receive-btn: linear-gradient( to bottom, #9fd562 0%, #7cb43e 100% );
    --color-walletcard-disabled-btn: linear-gradient( to bottom, #d8d8d8 0%, #bfbfbf 100% );
    --color-walletcard-disabled-border: #444444;
    --color-walletcard-disabled-txt: #444444;
    --color-walletcard-working-btn: linear-gradient( to bottom, #d8d8d8 0%, #bfbfbf 100% );
    --color-walletcard-working-border: #6481cd;
    --color-walletcard-working-txt: #6481cd;
    --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: #4e55a2;
    --new-slot-details-loading-color-2: #6481cd;
    --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: #ff777c;
    --promotion-tag-free-txt: #ffffff;
    --promotion-tag-bonus-bg: #40d0cb;
    --promotion-tag-bonus-txt: #ffffff;
    --pop-promotion-close-icon-color: #ffffff;
    --pop-promotion-bg: #ffffff;
    --pop-promotion-txt: #5c567a;
    --pop-promotion-title-bg: #342e80;
    --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: #00cc66;
    --btn-request-bg: #ff3233;
    --btn-joined-bg: #ffad00;
    --btn-apply-bg: #027aff;
    --btn-detail-bg: var(--btn-main-bg);
    --btn-deposit-bg: var(--btn-secondary-bg);
    --btn-request-status-txt: #878e92;
    --btn-joined-status-txt: #878e92;
    --btn-apply-status-txt: var(--btn-status-txt);
    --btn-detail-status-txt: var(--btn-main-txt);
    --btn-deposit-status-txt: var(--btn-secondary-txt);
    --btn-before-bg: linear-gradient( to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 100% );
    --form-inputgroup-btn-bg: var(--primary);
    --form-inputgroup-btn-txt: var(--btn-status-txt);
    --form-inputgroup-input-bg: hsla( 229, 44%, 7%, 1 );
    --form-inputgroup-input-txt: #fff;
    --form-inputgroup-input-border: var(--form-input-border);
    --form-inputgroup-input-border-focus: var(--form-inputgroup-btn-bg);
    --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: linear-gradient( to top, #281a70 0%, #281a70 50% );
    --app-download-primary: #ff9fa2;
    --app-download-header-bg: rgba(40, 26, 112, .4);
    --app-download-txt: linear-gradient(to bottom, #ff9fa2 0%, #ff9fa2 50%);
    --app-download-btn-bg: linear-gradient(160deg, #ff9fa2 0%, #6d25f4 80%);
    --app-download-btn-txt: #ffffff;
    --app-download-btn-shadow: rgba(255, 217, 218, .5);
    --app-download-side-bg: rgba(40, 26, 112, .95);
    --app-download-close-icon: #ffffff;
    --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);
    --search-tab-brand-btn-bg: linear-gradient( to bottom, hsla(250, 63%, 17%, 1), rgba(42, 42, 42, 0) );
    --search-tab-title: #ffffff;
    --search-tab-sort-btn-bg: var(--search-item-bg);
    --search-tab-sort-btn-bg-active: hsla( 250, 62%, 39%, 1 );
    --color-card-bg: lighten(var(--color-content-bg), 7%);
    --tips-content-info-tag: #409fff;
    --tips-document-info-tag: #ff777c;
    --tips-document-choose-one-info-tag: #ef67ab;
    --tips-info-supporting-txt-tag: #d8a845;
    --third-party-primary: #ffb80c;
    --third-party-error: #f35e5e;
    --third-party-check: #70b267;
    --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: #878e92;
    --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: linear-gradient( 135deg, var(--third-party-gradient-tertiary-light) 0%, var(--third-party-gradient-tertiary-dark) 50% );
    --third-party-register-btn-tertiary-bg-inner-shadow: transparent;
    --third-party-register-btn-tertiary-txt: var(--third-party-txt-default);
    --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(--color-success);
    --third-party-register-success-subtitle: var(--third-party-primary);
    --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-border: transparent;
    --third-party-personal-item-status-txt: var(--third-party-check);
    --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(--third-party-icon-default);
    --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-wrap-bg: darken( var(--third-party-input-default), 5% );
    --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-bg: var(--third-party-input-default);
    --quick-register-entry-btn-border: var(--third-party-border-default);
    --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-icon-active: var(--quick-register-entry-btn-bg);
    --quick-register-entry-btn-txt: var(--third-party-primary);
    --color-banner-bg: var(--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: hsla( 250, 62%, 37%, 1 );
    --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;
    --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-tips: rgba(255, 255, 255, .8);
    --vip-card-bottom-bg: rgba(255, 255, 255, .1);
    --vip-card-bottom-more-txt: rgba(255, 255, 255, .8);
    --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-color: var(--vip-card-history-icon-color);
    --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: rgba(0, 0, 0, .2);
    --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(--content-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);
    --accordion-bg: #363285;
    --accordion-title-bg: #363285;
    --accordion-title: #ffffff;
    --accordion-info-icon-color: var(--accordion-title);
    --accordion-arrow-icon-color: #ffffff;
    --accordion-dot: rgba(255, 255, 255, .4);
    --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: #79a5fc;
    --wallet-recommond-tag-icon-color: #ffffff;
    --wallet-bouns-tag-bg: var(--color-danger);
    --wallet-bouns-tag-txt: #ffffff;
    --wallet-maintain-bg: rgba(40, 26, 112, .8);
    --wallet-maintain-border: rgba(255, 255, 255, .2);
    --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-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;
    --transaction-pop-processing-cont-border-color: var(--form-input-border);
    --transaction-pop-state-bg: var(--secondary);
    --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(--search-bg);
    --filter-title: #ffffff;
    --filter-item-bg: var(--search-item-bg);
    --filter-item-txt: var(--search-item-txt);
    --filter-item-bg-active: var(--search-item-bg-active);
    --filter-item-txt-active: var(--search-item-txt-active);
    --filter-btn: var(--search-btn);
    --transaction-record-filter-icon-color: var(--search-search-icon-color);
    --transaction-record-table-body-date-bg: var(--content-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(--content-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;
    --sa-betting-details-total-bg: #ffb80c;
    --sa-betting-details-total-title-bg: #222222;
    --sa-betting-details-totalt-title: #ffb80c;
    --sa-betting-details-total-platform-bg: var( --sa-betting-details-total-title-bg );
    --sa-betting-details-total-platform: #ffffff;
    --sa-betting-details-total-txt: #222222;
    --sa-betting-details-title: #222222;
    --sa-betting-details-tag-bg: #f2f2f2;
    --sa-betting-details-tag-txt: #878e92;
    --sa-betting-details-date-txt: #878e92;
    --ccs-betting-details-collapse-arrow-color: #222222;
    --sa-betting-details-avg-odds-circle: #ffb80c;
    --sa-betting-details-avg-odds-icon-color: #222222;
    --sa-betting-details-turnover-circle: #222222;
    --sa-betting-details-turnover-icon-color: #ffb80c;
    --sa-betting-details-stake-circle: var(--sa-betting-details-turnover-circle);
    --sa-betting-details-stake-icon-color: var( --sa-betting-details-turnover-icon-color );
    --sa-betting-details-profit-circle: var(--sa-betting-details-avg-odds-circle);
    --sa-betting-details-profit-icon-color: var( --sa-betting-details-avg-odds-icon-color );
    --sa-betting-details-value-title: #878e92;
    --sa-betting-details-value: #222222;
    --sa-betting-details-sub-item-bg: #f2f2f2;
    --sa-betting-details-sub-item-sport-icon-color: #222222;
    --sa-betting-details-sub-item-vs-txt: #222222;
    --sa-betting-details-sub-item-title: #878e92;
    --sa-betting-details-sub-item-txt: #222222;
    --sa-betting-details-sub-item-win-txt: #ffffff;
    --sa-betting-details-sub-item-lose-txt: #ffffff;
    --sa-betting-details-sub-item-cancel-txt: #222222;
    --sa-betting-details-sub-item-voided-txt: var(--sa-betting-details-value);
    --sa-betting-details-sub-item-table-bg: #ffffff;
    --sa-betting-details-sub-item-value-title: var( --sa-betting-details-value-title );
    --sa-betting-details-sub-item-value: var(--sa-betting-details-value);
    --sa-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: rgba(255, 255, 255, .4);
    --mail-editor-choose-icon-active: #79a5fc;
    --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;
    --state-expired: #ff595a;
    --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(--secondary);
    --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-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);
    --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;
    --color-ticket-deco-border: #cccccc;
    --bonuswallet-progress-bar-bg-mine: linear-gradient( to right, #f26969, #cd3336 );
    --bonuswallet-progress-bar-bg-shadow-mine: #f26969;
    --color-pop-select-bg: #ffffff;
    --color-pop-btn-border: var(--pop-promotion-table-content-border);
    --color-pop-repair: #eeeeee;
    --color-player-form-border: rgba(255, 255, 255, .05);
    --color-player-form-upload: #999999;
    --color-input-form-disabled: rgba(255, 255, 255, .5);
    --color-record-item-text: var(--color-title);
    --color-rf-statusbox-input-date-text: #a0a2ca;
    --color-rf-status-pending-text: #ffd259;
    --color-rf-status-expired-text: #ff5959;
    --upload-icon-shadow: rgba(0, 0, 0, .5);
    --form-tag-recommand-border: hsla( 220, 96%, 43%, 1 );
    --game-hall-primary: #186db9;
    --game-hall-text-primary: #ffffff;
    --game-hall-btn-shadow: #0a68bf;
    --game-hall-header-bg: #0f212e;
    --game-hall-header-text: var(--game-hall-text-primary);
    --game-hall-header-back-btn: var(--game-hall-primary);
    --game-hall-header-item-bg: #253b49;
    --game-hall-content-bg: #071825;
    --game-hall-nav-icon: #fff;
    --game-hall-nav-btn: linear-gradient(180deg, #1562a4 0%, #12243c 100%);
    --game-hall-nav-bar-btn-icon: #878e92;
    --game-hall-nav-bar-btn: #2b3944;
    --game-hall-nav-bar-btn-icon-active: #fff;
    --game-hall-nav-bar-btn-active: linear-gradient( 180deg, #1562a4 0%, #12243c 100% );
    --game-hall-nav-bar-btn-shadow: rgba(#0a68bf, .5);
    --game-hall-nav-bar-bg: #202f3b;
    --game-hall-card-control-btn: #202f3b;
    --game-hall-card-control-btn-icon: #e9e9e9;
    --game-hall-card-control-btn-border: #415768;
    --game-hall-card-title: var(--game-hall-text-primary);
    --game-hall-card-title-games-number-bg: #263a49;
    --game-hall-card-title-games-number-text: #fff;
    --game-hall-card-title-games-btn-text: #fff;
    --game-hall-search-back-btn: var(--game-hall-primary);
    --game-hall-search-arrow-btn: #fff;
    --game-hall-searchpage-results-leaderboard-list: #f60044;
    --game-hall-searchpage-results-game-text: #fff;
    --game-hall-searchpage-results-vendor-text: #fff
}

:root {
    --marquee-bg: #000000;
    --main-wrapper-bg: #282828;
    --footer-slogan-txt: #13926a;
    --footer-list-border-bottom: #2f2f2f;
    --footer-title-txt: #8c8c8c;
    --footer-descrp-txt: #8c8c8c;
    --footer-opyright-txt: #fff;
    --nav-shell-bg: linear-gradient( to right, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 100% );
    --nav-shell-category-border: rgba(255, 255, 255, .2);
    --nav-shell-category-bg: var(--marquee-bg);
    --nav-shell-inner-bg: linear-gradient(#4e4e4e 0%, #353535 100%);
    --slick-current-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(0, 0, 0, .5);
    --content-title-p: #fff;
    --nav-fixed-bg: linear-gradient(180deg, #818181 0%, #4a4a4a 99%);
    --group-title-span: var(--content-title-p);
    --slot-head-bg: #333;
    --slot-head-txt: #fff;
    --slot-option-bg: var(--slot-head-bg);
    --slot-option-txt: var(--slot-head-txt);
    --slot-option-bg-active: #13926a;
    --slot-option-border: var(--slot-head-bg);
    --jackpot-total: #13926a;
    --jackpot-amount: #fff;
    --tab-wrapper-btn-shadow: -2px 0 7px #000000, 0px -1px 0px 0px #fff;
    --tab-wrapper-before-bg: var(--nav-shell-bg);
    --tab-scroll-wrapper-border: rgba(255, 255, 255, .2);
    --tab-scroll-wrapper-bg: var(--marquee-bg);
    --search-btn-bg: #13926a;
    --search-btn-txt: #fff;
    --search-tab-bg: var(--nav-shell-inner-bg);
    --list-loading-bg: #13926a;
    --list-loading-txt: #000000;
    --main-wallet-display-value-txt: #fff;
    --main-wallet-display-btn: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .58) 99%, #fff 100% )
}

:root {
    --primary: #13926a;
    --secondary: #13926a;
    --content-bg: #282828;
    --pop-bg: rgba(0, 0, 0, .4);
    --pop-bg-content: #282828;
    --pop-bg-gradient: transparent;
    --pop-bg-shadow: rgba(255, 255, 255, .05);
    --offset-shadow: #222;
    --color-text-strong: #13926a;
    --text-shadow: #13926a;
    --custom-font: "Lexend";
    --header-bg: #333;
    --header-bg-tab: #000000;
    --header-bg-active: #000000;
    --header-burger-icon-color: #13926a;
    --header-back-icon-color: #fff;
    --header-title: #fff;
    --header-vip-title: #fff;
    --header-vip-bg-active: #333;
    --header-vip-title-active: #fff;
    --header-slot-bg-active: #373a4b;
    --header-login-btn-bg: #13926a;
    --header-login-btn-txt: #fff;
    --header-register-btn-bg: transparent;
    --header-register-btn-txt: #13926a;
    --btn-main-bg: #13926a;
    --btn-main-txt: #fff;
    --btn-secondary-bg: linear-gradient(180deg, #4d4d4d 0%, #363636 100%);
    --btn-main-bg-disabled: #333;
    --btn-main-txt-disabled: rgba(255, 255, 255, .2);
    --form-box-bg: #333;
    --form-input-bg: #3c3e3c;
    --form-input-txt: #fff;
    --form-input-border-focus: #13926a;
    --form-input-bg-disabled: rgba(0, 0, 0, .1);
    --form-input-txt-disabled: rgba(255, 255, 255, .7);
    --form-clear-icon-color: #fff;
    --form-select-triangle: #13926a;
    --form-upload-camera-icon-color: rgba(255, 255, 255, .2);
    --form-upload-txt: #fff;
    --form-upload-mask-bg: rgba(51, 51, 51, .7);
    --form-upload-file-bg: #13926a;
    --form-uncheck-color: #fff;
    --tab-header-bg: #333;
    --tab-line-txt: rgba(255, 255, 255, .5);
    --tab-line-txt-active: #13926a;
    --tab-line-underline: #13926a;
    --tab-line-badge-bg: #13926a;
    --tab-line-badge-txt: #fff;
    --tab-btn-txt-shadow: transparent;
    --tab-btn-bg: #3d3a30;
    --tab-btn-bg-active: #13926a;
    --tab-btn-active-shadow: #000000;
    --tab-btn-bar-bg: rgba(0, 0, 0, .4);
    --radio-bg: #434343;
    --radio-bg-checked: linear-gradient(180deg, #394c45 0%, #434343 100%);
    --radio-border-checked: #13926a;
    --radio-txt-checked: #fff;
    --checkbox-bg-checked: linear-gradient(180deg, #394c45 0%, #434343 100%);
    --checkbox-bg-color: #3d392f;
    --checkbox-bg-color-checked: #13926a;
    --checkbox-tick: #fff;
    --checkbox-border: #13926a;
    --checkbox-border-checked: #13926a;
    --switch-bg: #434343;
    --switch-target-btn-bg: #3c3e3c;
    --popup-page-main-shadow: #fff;
    --mode-tips-bg: #333;
    --pagination-bg: transparent;
    --pagination-bullet-bg: #3b392f;
    --pagination-bullet-bg-active: #13926a;
    --pop-bonus-money: linear-gradient(135deg, #13926a 0%, #13926a 50%);
    --sidenav-close-icon-color: #fff;
    --sidenav-info-bg: #333;
    --sidenav-info-bottom-bg: #13926a;
    --sidenav-title-txt: #13926a;
    --sidenav-profile-txt: #fff;
    --sidenav-info-title-bottom: #222;
    --sidenav-info-login-icon-color: #fff;
    --sidenav-info-register-icon-color: #fff;
    --sidenav-wallet-txt: #fff;
    --sidenav-wallet-icon-bg: #222;
    --sidenav-shortcut-txt: #fff;
    --sidenav-shortcut-icon-bg: #fff;
    --sidenav-shortcut-icon-txt: #fff;
    --sidenav-category-bg: linear-gradient(45deg, #302f2d 0%, #23211b 100%);
    --sidenav-category-columns-bg: linear-gradient( 45deg, #302f2d 0%, #23211b 100% );
    --sidenav-category-shadow: rgba(0, 0, 0, .2);
    --sidenav-category-bg-active: rgba(255, 255, 255, .2);
    --sidenav-info-points-bg: rgba(255, 255, 255, .2);
    --sidenav-info-points-txt: #fff;
    --sidenav-info-points-number: #fff;
    --sidenav-bg: #282828;
    --sidenav-set-shortcut-icon-bg: #13926a;
    --sidenav-set-shortcut-icon-color: #fff;
    --sidenav-set-shortcut-edit-icon-bg: #ff0043;
    --sidenav-set-shortcut-edit-icon-color: #fff;
    --sidenav-set-shortcut-set-icon-color: #13926a;
    --sidenav-set-shortcut-add-icon-bg: #ff0043;
    --sidenav-set-shortcut-add-icon-color: #fff;
    --sidenav-category-area-bg: #2d2e30;
    --sidenav-category-icon-bg: #3c3e3c;
    --sidenav-service-title: #fff;
    --sidenav-service-txt: #fff;
    --pop-language-header-bg: #333;
    --pop-language-item-bg: #333;
    --pop-language-btn: #434343;
    --pop-language-btn-bg-active: linear-gradient(180deg, #394c45 0%, #333 100%);
    --pop-language-btn-border: #13926a;
    --board-register-btn-txt-shadow: #13926a;
    --announvement-bg: transparent;
    --announvement-icon-color: #13926a;
    --announvement-txt: #989590;
    --nav-bg: linear-gradient(#4e4e4e 0%, #353535 100%);
    --nav-category-txt: #9fa7ab;
    --nav-category-bg-active-circle: linear-gradient(#13926a 0%, #126e51 100%);
    --nav-category-txt-active: #fff;
    --nav-underline: transparent;
    --nav-item-bg: rgba(255, 255, 255, .1);
    --sa-maintenance-bg: #111111;
    --sa-maintenance-icon-color: #13926a;
    --sa-maintenance-txt: #fff;
    --sa-maintenance-info-bg: #111111;
    --sa-maintenance-info-tooltips-bg: rgba(0, 0, 0, .9);
    --sa-loader-circle: #010f35;
    --event-border: #13926a;
    --event-slick-dot: #624500;
    --event-slick-dot-active: #13926a;
    --footer-bg: #333;
    --footer-title: #fff;
    --footer-link: #13926a;
    --login-forgetpassword-btn-border: #13926a;
    --login-link: #13926a;
    --biometric-btn: #13926a;
    --biometric-btn-txt: #13926a;
    --biometric-wave-line-ani: #13926a;
    --biometric-wave-line-cirle: #13926a;
    --biometric-wave-line-gradient-start: #13926a;
    --biometric-wave-line-gradient-end: #13926a;
    --biometric-switch-bg: #13926a;
    --biometric-wave-color-2: #13926a;
    --biometric-wave-color-3: #13926a;
    --biometric-face-bg: #262626;
    --biometric-title: #13926a;
    --biometric-content: rgba(255, 255, 255, .5);
    --register-affiliate: #13926a;
    --pop-register-success-bg: #333;
    --search-bg: #333;
    --search-item-bg: #3c3e3c;
    --search-item-bg-active: #13926a;
    --search-item-txt-active: #fff;
    --search-search-icon-color: #fff;
    --pop-search-header-bg: #333;
    --pop-search-back-icon-color: #fff;
    --pop-search-input-bg: #222;
    --pop-search-inner-bg: #333;
    --search-btn: #13926a;
    --slot-tag-new-bg: #13926a;
    --slot-tag-new-txt: #fff;
    --slot-card-bg: #575147;
    --pop-transfer-bg: #222;
    --pop-transfer-btn-take-back: linear-gradient( 180deg, #13926a 0%, #13926a 100% );
    --pop-transfer-bonus-bg: #222;
    --pop-transfer-bonus-border: #13926a;
    --pop-transfer-bonus-txt: #13926a;
    --pop-transfer-tips: #fff;
    --pop-transfer-amount-fade: #13926a;
    --slot-empty-bg: #333;
    --pop-bonuswallet-txt: rgba(255, 255, 255, .5);
    --pop-bonuswallet-card-bg: #463b17;
    --pop-bonuswallet-card-detail: #13926a;
    --pop-bonuswallet-card-amount: #13926a;
    --pop-bonuswallet-card-start-btn: #13926a;
    --pop-bonuswallet-card-start-txt: #111111;
    --promotion-bonuswallet-label-running: #1d63ff;
    --color-walletcard-start-btn: linear-gradient( to bottom, #19bf8b 0%, #13926a 100% );
    --color-walletcard-disabled-btn: linear-gradient( to bottom, #2d2f30 0%, #141516 100% );
    --color-walletcard-disabled-border: #9fa7ab;
    --color-walletcard-disabled-txt: #9fa7ab;
    --color-walletcard-working-btn: linear-gradient( to bottom, #2d2f30 0%, #141516 100% );
    --color-walletcard-working-border: #13926a;
    --color-walletcard-working-txt: #13926a;
    --pop-bonuswallet-lvup-check: #13926a;
    --pop-bonuswallet-lvup-tips-bg: #13926a;
    --pop-bonuswallet-lvup-tips-txt: rgba(255, 255, 255, .5);
    --pop-bonuswallet-lvup-tips-date-icon-color: #13926a;
    --new-slot-search-bg: #071824;
    --new-slot-search-border: #d8d8d8;
    --new-slot-search-icon-color: #fff;
    --new-slot-provider-bg: #0f212e;
    --new-slot-provider-border: #d8d8d8;
    --new-slot-provider-shadow: rgba(216, 216, 216, .2);
    --new-slot-provider-border-active: #13926a;
    --new-slot-provider-shadow-active: rgba(19, 146, 106, .3);
    --new-slot-input-bg: #fff;
    --new-slot-input-txt: #fff;
    --new-slot-clear-icon-color: #878e92;
    --new-slot-cancel-txt: rgba(255, 255, 255, .8);
    --new-slot-cancel-border: rgba(255, 255, 255, .08);
    --new-slot-search-area-bg: #071824;
    --new-slot-recently-played-bg: linear-gradient( 180deg, #15a477 0%, #13926a 100% );
    --new-slot-my-favorites-bg: linear-gradient(0deg, #3976ff 0%, #1d63ff 100%);
    --new-slot-category-title: #fff;
    --new-slot-history-clock-icon-color: #fff;
    --new-slot-history-clear-icon-color: #878e92;
    --new-slot-history-border: rgba(255, 255, 255, .08);
    --new-slot-results-title: #fff;
    --new-slot-results-layout-icon-color: #fff;
    --new-slot-ranking-txt: rgba(19, 146, 106, .4);
    --new-slot-ranking-img-shadow: rgba(19, 146, 106, .5);
    --new-slot-game-list-btn-bg: #0b2639;
    --new-slot-game-list-btn-bg-active: #13926a;
    --new-slot-details-game-grid-shadow: #071824;
    --new-slot-details-select-date-bg: #0f212e;
    --new-slot-details-select-date-week-txt: rgba(255, 255, 255, .5);
    --new-slot-details-select-date-ball: #13926a;
    --new-slot-details-pop-bg: #333;
    --new-slot-details-pop-btn-bg: #13926a;
    --new-slot-details-loading-color-1: #13926a;
    --new-slot-details-loading-color-2: #13926a;
    --promotion-bg: #333;
    --promotion-info-bg: #6096b6;
    --promotion-clock-icon-color: rgba(255, 255, 255, .5);
    --promotion-tag-bonus-bg: #24aba7;
    --pop-promotion-bg: #282828;
    --pop-promotion-txt: #fff;
    --pop-promotion-title-bg: #333;
    --pop-promotion-clock-icon-color: #fff;
    --pop-promotion-table-title-bg: #13926a;
    --pop-promotion-table-content-bg: #2f2f2f;
    --pop-promotion-table-content-title-bg: #8b895b;
    --pop-promotion-table-content-txt: #fff;
    --pop-promotion-bonuswallet-title: #fff;
    --pop-promotion-bonuswallet-wallet-bg: #222;
    --pop-promotion-bonuswallet-wallet-txt: #fff;
    --pop-promotion-bonuswallet-wallet-number: #13926a;
    --pop-promotion-bonuswallet-deposit-now-border: rgba(255, 255, 255, .2);
    --pop-promotion-bonuswallet-deposit-now-bg: #282828;
    --pop-promotion-bonuswallet-link: #13926a;
    --btn-attend-bg: var(--btn-main-bg);
    --btn-attend-status-txt: var(--btn-main-txt);
    --btn-request-bg: #d4d4d4;
    --btn-request-status-txt: #878e92;
    --btn-joined-bg: #d4d4d4;
    --btn-joined-status-txt: #878e92;
    --btn-apply-bg: var(--btn-main-bg);
    --btn-apply-status-txt: var(--btn-main-txt);
    --btn-detail-bg: var(--btn-secondary-bg);
    --btn-detail-status-txt: var(--btn-secondary-txt);
    --btn-deposit-bg: var(--btn-main-bg);
    --btn-deposit-status-txt: var(--btn-main-txt);
    --form-inputgroup-input-bg: #3b392f;
    --form-inputgroup-input-txt: #fff;
    --form-inputgroup-input-title: rgba(255, 255, 255, .9);
    --limit-title: #13926a;
    --limit-txt: rgba(255, 255, 255, .8);
    --limit-ip-txt: #fff;
    --limit-timezone-txt: rgba(255, 255, 255, .6);
    --limit-time-txt: #fff;
    --gotop-bg: linear-gradient(#13926a 0%, #13926a 100%);
    --chat-bg: linear-gradient(#f49c04 0%, #d87803 100%);
    --app-download-bg: linear-gradient( to bottom, #222222 0%, #121212 50% );
    --app-download-primary: #13926a;
    --app-download-header-bg: rgba(0, 0, 0, .4);
    --app-download-txt: linear-gradient(to bottom, #13926a 0%, #13926a 50%);
    --app-download-btn-bg: linear-gradient(to bottom, #13926a 0%, #13926a 80%);
    --app-download-btn-txt: #fff;
    --app-download-btn-shadow: rgba(19, 146, 106, .5);
    --app-download-side-bg: rgba(18, 18, 18, .9);
    --launch-bg: #282828;
    --launch-menu-highlight-shadow-color01: rgba(153, 153, 153, .1);
    --launch-menu-highlight-shadow-color02: rgba(153, 153, 153, .1);
    --launch-home-btn-icon-color: #fff;
    --launch-home-btn-bg: #282828;
    --lanuch-stop-color: #13926a;
    --lanuch-end-color: #13926a;
    --launch-game-header-bg: #282828;
    --launch-game-btn-bg: linear-gradient(180deg, #717171 0%, #222 100%);
    --launch-game-logo-shadow: none;
    --launch-info-border-left: rgba(255, 255, 255, .1);
    --launch-info-title: #13926a;
    --launch-info-value: #fff;
    --search-tab-brand-btn-bg: linear-gradient( to bottom, rgba(19, 146, 106, .4), #3b392f );
    --color-card-bg: rgba(20, 20, 20, 1);
    --third-party-txt-default: #fff;
    --third-party-primary: #13926a;
    --third-party-login-content-bg: #282828;
    --third-party-login-form-txt: #fff;
    --third-party-login-form-input-bg: #3b392f;
    --third-party-login-form-input-border-focus: #13926a;
    --third-party-login-form-eyes-icon-color: #fff;
    --third-party-login-form-clear-icon-color: #fff;
    --third-party-login-puzzle-box-bg: #3b392f;
    --third-party-login-puzzle-box-border: #333;
    --third-party-login-puzzle-box-txt: #fff;
    --third-party-login-puzzle-box-tips-txt: #13926a;
    --third-party-login-puzzle-box-slider-bg: #333;
    --third-party-login-puzzle-box-slider-border: #484848;
    --third-party-login-puzzle-box-slider-btn-bg: #13926a;
    --third-party-login-puzzle-box-slider-btn-arrow-icon-color: #222;
    --third-party-login-btn-main-bg: #13926a;
    --third-party-login-btn-main-txt: #222;
    --third-party-login-btn-main-bg-disabled: #52514d;
    --third-party-login-txt: #fff;
    --third-party-login-findpassword-txt: #13926a;
    --third-party-login-tab-txt: #949494;
    --third-party-login-tab-txt-active: #13926a;
    --third-party-login-tab-line-active: #13926a;
    --third-party-register-btn-main-bg: #13926a;
    --third-party-register-btn-main-txt: #222;
    --third-party-register-btn-secondary-bg: linear-gradient( #555555 0%, #3b392f 100% );
    --third-party-register-btn-tertiary-txt: #222;
    --third-party-register-tips-txt: #fff;
    --third-party-register-link: #13926a;
    --quick-register-entry-btn-active-bg: #13926a;
    --quick-register-entry-btn-icon-active: #222;
    --quick-register-entry-btn-txt: #13926a;
    --quick-register-entry-btn-name: #878e92;
    --quick-register-entry-btn-icon: #878e92;
    --quick-register-entry-btn-bg: #333;
    --quick-register-entry-btn-active-shadow: transparent;
    --third-party-personal-item-title: #fff;
    --third-party-personal-item-icon-color-border: #6b6b6b;
    --third-party-personal-item-tag-tips: #13926a;
    --third-party-personal-item-tag-txt: #949494;
    --third-party-personal-item-tag-bg: #3b392f;
    --third-party-personal-add-phone-border: #6b6b6b;
    --third-party-menubox-bg: #333;
    --third-party-pop-success-bg: #333;
    --profile-add-btn-txt: #fff;
    --profile-number-default-txt: rgba(0, 0, 0, .8);
    --profile-vip-number: #13926a;
    --profile-vip-btn-bg: #13926a;
    --profile-vip-btn-txt: #111111;
    --profile-vip-arrow-icon-color: #111111;
    --profile-id: #fff;
    --profile-tips-link: #13926a;
    --profile-member-menu-point-bg: #353535;
    --pop-getvcode-btn: #3fd0cb;
    --pop-getvcode-btn-txt: #111111;
    --pop-getvcode-countdown-txt: #3fd0cb;
    --pop-getvcode-resend-txt: #3fd0cb;
    --bonuswallet-card-bg: #333;
    --bonuswallet-card-bg-completed: #333;
    --bonuswallet-zone: rgba(255, 255, 255, .6);
    --bonuswallet-amount: #13926a;
    --bonuswallet-amount-complete: #13926a;
    --bonuswallet-amount-disable: #13926a;
    --bonuswallet-progress-bar-bg-active: linear-gradient( 90deg, #239c50 0%, #6fc226 100% );
    --bonuswallet-progress-bar-bg-active-shadow: #222;
    --bonuswallet-progress-bar-txt: rgba(255, 255, 255, .5);
    --bonuswallet-dot: rgba(255, 255, 255, .2);
    --bonuswallet-detail-txt: #13926a;
    --vip-bg: linear-gradient(180deg, #222 0%, #000000 100%);
    --vip-card-bg: linear-gradient( 120deg, rgba(19, 146, 106, .6) 0, rgba(19, 146, 106, .7) 40%, rgba(19, 146, 106, .6) 80%, rgba(19, 146, 106, .5) 100% );
    --vip-card-history-btn-bg: linear-gradient(180deg, #7f5c05 8%, #453213 100%);
    --vip-card-progress-bar-bg-active: linear-gradient( 180deg, #19bf8b 8%, #13926a 100% );
    --vip-card-progress-bar-bg-active-shadow: #fff;
    --vip-card-tips: rgba(62, 42, 0, .8);
    --vip-card-bottom-bg: rgba(0, 0, 0, .1);
    --vip-card-bottom-more-txt: #fff;
    --vip-total-ttile: #fff;
    --vip-total-txt-bg: rgba(19, 146, 106, .2);
    --vip-total-record-btn-bg: linear-gradient( 180deg, #19bf8b 8%, #13926a 100% );
    --vip-total-record-icon-color: #fff;
    --vip-convert-title: #fff;
    --vip-refresh-txt: #fff;
    --vip-refresh-icon-color: #fff;
    --vip-cash-point-bg: linear-gradient( 120deg, rgba(19, 146, 106, .6) 0, rgba(19, 146, 106, .7) 40%, rgba(19, 146, 106, .6) 80%, rgba(19, 146, 106, .5) 100% );
    --vip-cash-point-def: #fff;
    --vip-cash-point-grey: rgba(255, 255, 255, .5);
    --vip-cash-point-title: #fff;
    --vip-cash-point-requirement-txt: #fff;
    --vip-cash-point-input-txt: #fff;
    --vip-cash-point-tips: #fff;
    --vip-cash-point-default-btn-bg: linear-gradient( 90deg, #717171 0%, #222 100% );
    --vip-cash-point-allow-btn-bg: linear-gradient( 180deg, #13926a 0%, #0d6549 100% );
    --vip-detail-lv-bottom-bg: #ebebeb;
    --vip-detail-lv-txt: rgba(0, 0, 0, .8);
    --vip-detail-box-bg: #333;
    --vip-detail-box-bg-shadow: rgba(0, 0, 0, .05);
    --vip-detail-highlight-txt: #13926a;
    --vip-detail-txt: #fff;
    --vip-detail-border: rgba(255, 255, 255, .06);
    --vip-detail-card-bg: #2b3944;
    --vip-detail-card-bg-shadow: rgba(0, 0, 0, .1);
    --vip-detail-card-txt: #13926a;
    --vip-detail-link: #d2b671;
    --vip-points-table-head-bg: #13926a;
    --vip-points-table-head-txt: #fff;
    --vip-points-table-body-bg: #333;
    --vip-points-table-body-record-bg: #424242;
    --vip-points-table-body-top-border: #071824;
    --accordion-bg: #333;
    --accordion-title-bg: #333;
    --accordion-txt: rgba(255, 255, 255, .6);
    --accordion-add-bank-card-title-bg: #222;
    --accordion-review: #7bb6eb;
    --accordion-success: #48d7c4;
    --accordion-failed: #ff5959;
    --pop-verification-link: #13926a;
    --wallet-recommond-tag-bg: #217ece;
    --wallet-maintain-bg: rgba(0, 0, 0, .8);
    --wallet-account-info-bg: #6d6346;
    --wallet-account-info-border: rgba(109, 99, 70, .5);
    --wallet-account-info-copy-tooltips-txt: #555555;
    --wallet-bank-card-bg: #333;
    --wallet-crypto-switch-icon-color: #9a937c;
    --wallet-crypto-tips-txt: #9a937c;
    --wallet-crypto-tips-highlight: #fff;
    --wallet-top-bg: #282828;
    --tips-info-bg: #333;
    --tips-info-icon-color: #13926a;
    --tips-info-content-txt: #4fa1f4;
    --wallet-pending-transactions-bg: #333;
    --wallet-pending-transactions-date: rgba(255, 255, 255, .5);
    --wallet-pending-transactions-btn-bg: linear-gradient( #4e4e4e 0%, #353535 100% );
    --wallet-pending-transactions-btn-border: #4e4e4e;
    --wallet-pending-transactions-btn-txt: #fff;
    --wallet-free-tag-bg: #6cb1f6;
    --wallet-free-tag-txt: #fff;
    --wallet-express-bg: linear-gradient( 60deg, #a480ff, #ffa380, #c880ff, #ff85f0 );
    --wallet-select-bank-card-txt: #fff;
    --wallet-bankcard-bg: #333;
    --wallet-bankcard-bg-checked-bg: #555555;
    --wallet-bankcard-bg-checked-border: #13926a;
    --wallet-otp-resend-txt: #13926a;
    --transfer-ani-default-tips-bg: #222;
    --transfer-ani-default-tips-border: #414141;
    --transfer-ani-platform-bg: #222;
    --transfer-ani-platform-darken-color: #1c1c1c;
    --transfer-ani-platform-lighten-color: #515151;
    --transfer-ani-platform-secondary-darken-color: #0d6549;
    --transfer-ani-platform-secondary-lighten-color: #13926a;
    --transaction-pop-processing-cont-border-color: rgba(255, 255, 255, .3);
    --transaction-pop-processing-txt: var(--color-title);
    --transaction-pop-amount-cont-txt: var(--color-title);
    --transaction-pop-info-list-title: var(--color-text);
    --transaction-pop-info-list-title-bg: #333;
    --filter-title: #fff;
    --transaction-record-status-txt: #222;
    --transaction-record-table-body-date-bg: #222;
    --transaction-record-table-body-date: #fff;
    --transaction-record-calendar-icon-color: #fff;
    --transaction-record-table-body-zone: #fff;
    --pop-transaction-details-bank-name-bg: #333;
    --pop-transaction-details-header-bg: #333;
    --pop-transaction-details-tab-bg: #333;
    --pop-transaction-details-date: #878e92;
    --pop-transaction-details-message-bg: #333;
    --pop-transaction-details-table-bg: #333;
    --pop-transaction-details-table-bg-even: #262626;
    --pop-transaction-details-tips-txt: #13926a;
    --pop-transaction-details-btn-area-bg: #071824;
    --transaction-record-table-body-empty-bg: #333;
    --betting-details-table-head-bg: #46401a;
    --betting-details-table-head-border: #fff;
    --betting-record-table-head-txt: rgba(255, 255, 255, .8);
    --betting-record-table-date-area-bg: #5d572c;
    --betting-record-table-zone: #fff;
    --betting-record-tooltips-icon-color: #fff;
    --betting-record-tooltips-bg: #241907;
    --sa-betting-details-total-bg: #3b301a;
    --sa-betting-details-total-title-bg: #13926a;
    --sa-betting-details-totalt-title: #fff;
    --sa-betting-details-total-txt: #fff;
    --sa-betting-details-title: #fff;
    --sa-betting-details-tag-bg: rgba(0, 0, 0, .3);
    --sa-betting-details-tag-txt: rgba(255, 255, 255, .7);
    --sa-betting-details-date-txt: rgba(255, 255, 255, .7);
    --sa-betting-details-avg-odds-circle: #13926a;
    --sa-betting-details-avg-odds-icon-color: #d5b2b2;
    --sa-betting-details-turnover-circle: #d86f03;
    --sa-betting-details-turnover-icon-color: #fff;
    --sa-betting-details-profit-icon-color: #fff;
    --sa-betting-details-value-title: rgba(255, 255, 255, .7);
    --sa-betting-details-value: #fff;
    --sa-betting-details-sub-item-bg: #654e17;
    --sa-betting-details-sub-item-sport-icon-color: #fff;
    --sa-betting-details-sub-item-vs-txt: #fff;
    --sa-betting-details-sub-item-txt: #fff;
    --sa-betting-details-sub-item-table-bg: #333;
    --mail-notice-icon-circle-bg: #13926a;
    --mail-date-bg: #13926a;
    --mail-date-txt: #fff;
    --mail-date-zone: #fff;
    --mail-list-bg: #333;
    --mail-editor-choose-icon-active: #13926a;
    --mail-editor-pop-check-bg: #333;
    --recommend-gift-bg: linear-gradient( 270deg, #13926a 0%, #19bf8b 80% );
    --recommend-border: #13926a;
    --recommend-input-border: #13926a;
    --recommend-input-btn: #13926a;
    --recommend-share-btn: #13926a;
    --recommend-condition-title: #fff;
    --recommend-condition-dot: #13926a;
    --recommend-condition-bg: #262626;
    --recommend-input-bg: rgba(255, 255, 255, .1);
    --recommend-complete-txt: rgba(255, 255, 255, .7);
    --color-rf-statusbox-input-date-text: rgba(255, 250, 240, .7);
    --turnover-card-bg: #333;
    --turnover-card-detail: #13926a;
    --pop-turnover-table-bg: #312f2c;
    --pop-turnover-arrow-icon-color: #13926a;
    --about-us-bg: #333;
    --about-us-table-title: #13926a;
    --about-us-table-title-txt: rgba(255, 255, 255, .7);
    --about-us-table-title-bg: #8b845b;
    --about-us-mail-link: #13926a;
    --tips-info-i: #13926a;
    --referral-program-panel-bg: #333;
    --referral-program-summarize-panel-bg: #13926a;
    --referral-program-text-highlight: #ffe01b;
    --referral-program-text-highlight-2: #13926a;
    --referral-leaderboard-row-1: #444444;
    --referral-leaderboard-row-2: #333333;
    --program-rate-board-tier-head-bg: #222;
    --program-rate-board-tier-content: #333;
    --referral-program-bo3card-title-bg: #ffe01b;
    --referral-program-bo3card-title-text: #222;
    --referral-program-panel-border: #333;
    --program-rate-board-navi: #13926a;
    --program-rate-board-navi-arrow: #fff;
    --referral-program-promotion-btnMixin-background-image: linear-gradient( to bottom, #13926a 0%, #13926a 100% );
    --referral-program-promotion-btnMixin-border-color: #13926a;
    --referral-program-details-btn-background-image: linear-gradient( to bottom, #13926a 0%, #13926a 100% );
    --referral-program-details-btn-border-color: #13926a;
    --referral-program-rule-bg: #fff;
    --record-item-title-bg: #13926a;
    --record-item-bg: #3b392f;
    --record-item-title-text: #fff;
    --record-item-title-text-contrasting: #000;
    --table-body-bg-even: #3b392f;
    --referral-program-records-btn-background-image: linear-gradient( to bottom, #13926a 0%, #13926a 100% );
    --referral-program-records-btn-border-color: #13926a;
    --referral-program-record-detail-total-bg: #7b5700;
    --referral-program-record-detail-form-head-bg: #13926a;
    --referral-program-record-detail-collapse-head-bg: #3b392f;
    --referral-program-record-detail-content-bg: #333;
    --referral-program-record-detail-text-contrasting: #000;
    --referral-program-panel-btn-text: #fff;
    --referral-program-panel-btn-img: linear-gradient( to bottom, #13926a 0%, #13926a 100% );
    --referral-program-panel-btn-bg: #666;
    --referral-program-panel-btn-text-contrasting: #fff;
    --referral-program-downline-board-title: #fff;
    --referral-program-downline-board-text-contrasting: #fff;
    --referral-program-text-contrasting: #000;
    --referral-program-text-muted: #878e92;
    --referral-program-downline-bg: #333;
    --referral-program-downline-info-bg: #3b392f;
    --referral-program-downline-text-highlight: #fff;
    --main-wallet-display-bg: #4a4a4a;
    --main-wallet-display-latter-bg: #13926a;
    --widget-btn-stick-bg: #dedede;
    --desktop-searchpage-border: hsla(0, 0%, 22%, 1);
    --lighten-third-party-btn-mask-bg-shadow-1: transparent;
    --lighten-third-party-btn-mask-bg-shadow-2: transparent;
    --tab-btn-bar-line-shadow: hsla( 20, 0%, 0%, 1 );
    --form-tag-recommand-border: hsla( 220, 96%, 43%, 1 );
    --loading-animation-card-banner: hsla( 0, 0%, 17%, 1 );
    --loading-animation-lobby-icon-gradient: hsla( 0, 0%, 22%, 1 );
    --loading-animation-lobby-icon-gradient-bg: hsla( 0, 0%, 17%, 1 )
}

.header-desktop {
    --header-background: #333;
    --header-btn-bg: #13926a;
    --header-btn-color: #fff;
    --header-btn-bg-secondary: #4e4e4e;
    --header-btn-color-secondary: #fff;
    --icon-color: #e9e9e9
}

.header-desktop-user-dropdown {
    --header-desktop-user-dropdown-bg: #2d2e30;
    --header-desktop-user-dropdown-border: #454545;
    --header-desktop-user-dropdown-txt: #fff;
    --header-desktop-user-dropdown-inbox-bg: #13926a;
    --header-desktop-user-dropdown-inbox-txt: #fff;
    --header-desktop-user-dropdown-value-display-highlight: #13926a
}

.left-menu {
    --leftmenu-head-arrow-icon: #e9e9e9;
    --leftmenu-head-arrow-bg: #454545;
    --leftmenu-head-bg: #282828;
    --leftmenu-head-btn-bg: #333;
    --leftmenu-head-btn-txt: #fff;
    --leftmenu-head-btn-bg-highlight: #13926a;
    --leftmenu-head-btn-txt-highlight: #fff;
    --leftmenu-category-border: #4d4d4d;
    --leftmenu-category-bg: #222;
    --leftmenu-category-txt: #fff;
    --leftmenu-category-sec-bg: #282828;
    --leftmenu-category-arrow-icon: #e9e9e9;
    --toggle-box-bg: #454545;
    --toggle-box-txt: rgba(255, 255, 255, .8)
}

.layout-desktop {
    --layout-desktop-mask-color: rgba(0, 0, 0, .6);
    --layout-desktop-content-limit-when-menu-open: 100%
}

.deposit-label {
    --deposit-label-bg: #13926a;
    --main-deposit-text: #fff
}

.main-wallet-label {
    --main-wallet-label-bg: #454545;
    --main-wallet-label-text: #fff
}

.float-widget {
    --widget-btn-bg: linear-gradient( 45deg, rgb(48, 47, 45, .5) 0%, rgb(35, 33, 27, .5) 100% );
    --widget-btn-item-bg: linear-gradient( 45deg, rgb(48, 47, 45, .5) 0%, rgb(35, 33, 27, .5) 100% );
    --widget-btn-item-shadow: rgba(255, 255, 255, .7)
}

.tab.brand-tab .search-btn {
    --ct-tab-brand-search-btn-shadow: hsla(20, 0%, 3%, 1)
}

.list-loading {
    --ct-vip-list-loading-1: var(--secondary);
    --ct-vip-list-loading-2: hsla(42, 97%, 53%, 1)
}

.games {
    --game-box-info-hover-bg: #13926a;
    --game-box-star-shower-colr: rgba(255, 184, 10)
}

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
}

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

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

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

body {
    line-height: 1
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

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

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

* {
    outline: none
}

select,input {
    border-radius: 0;
    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
}

.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: .5333333333rem;
    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: 2.6666666667rem;
    bottom: 5.3333333333rem;
    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
}

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

.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: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 50%
}

.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: 2.1333333333rem;
    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 2.6666666667rem 2.6666666667rem;
    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 .8rem 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 2.1333333333rem 0 6.6666666667rem;
    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 2.1333333333rem 0 6.6666666667rem;
    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 4.2666666667rem;
    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: 4.2666666667rem
}

.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: 2.6666666667rem;
    background: var(--sidenav-category-columns-bg);
    box-shadow: 0 2.1333333333rem 2.6666666667rem 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.6666666667rem
}

.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: 2.6666666667rem;
    background: var(--sidenav-category-bg);
    box-shadow: 0 2.1333333333rem 2.6666666667rem color-mix(in srgb,var(--sidenav-category-shadow),transparent 70%),inset .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%);
    font-size: 2.9333333333rem;
    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: 19.2rem;
    line-height: 1.5;
    margin-top: 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: 2.6666666667rem;
    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: 2.6666666667rem;
    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)
}

.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: 1px solid var(--btn-voucher-bg-border)
}

.btn-voucher .voucher-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2.6666666667rem;
    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: 2.6666666667rem 2.6666666667rem 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: -2.6666666667rem;
    width: 28rem;
    height: 19.7333333333rem
}

.menu-header .member-name {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    height: 16rem;
    padding-left: 26.6666666667rem;
    font-size: 3.2rem;
    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: 4.2666666667rem;
    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: .8rem 2.6666666667rem;
    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: 2.6666666667rem;
    opacity: 1;
    background: var(--sidenav-category-bg-active)
}

.menu-second ul li {
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 2.6666666667rem 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 1.3333333333rem;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.5))
}

.menu-second ul li p {
    color: var(--sidenav-category-txt-active);
    font-size: 3.2rem;
    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.2rem;
    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, 5px)
}

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

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

    to {
        background-position: 0 50%
    }
}

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

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

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

.tab.search-tab ul li {
    background: var(--search-item-bg);
    color: var(--search-item-txt);
    position: relative;
    display: inline-table;
    padding: 0
}

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

.tab.search-tab ul li.active {
    z-index: 0;
    color: var(--search-item-txt-active);
    font-weight: 500
}

.tab.search-tab ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.6666666667rem;
    background: var(--search-item-bg-active)
}

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

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

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

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

.tab.filter-tab ul li.active {
    z-index: 0;
    color: var(--filter-item-txt-active);
    font-weight: 500
}

.tab.filter-tab ul li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2.6666666667rem;
    background: var(--filter-item-bg-active)
}

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

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

.tab.search-tab,.tab.filter-tab {
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

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

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

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

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

.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
}

.tab ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 0 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 4.2666666667rem;
    border-radius: 2.6666666667rem;
    font-size: 3.4666666667rem;
    line-height: 8rem;
    vertical-align: middle;
    text-align: center
}

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

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

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

.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 4.2666666667rem;
    transition: background .3s;
    border: .2666666667rem solid var(--form-input-border);
    border-radius: 2.6666666667rem;
    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:focus,.input-group textarea:focus {
    padding: 0 11.7333333333rem 0 4.2666666667rem;
    border: .2666666667rem solid var(--form-input-border-focus)
}

.input-group input:disabled,.input-group textarea:disabled {
    border: .2666666667rem 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 4.2666666667rem
}

.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: .8rem;
    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: 1px solid var(--color-danger)
}

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

.input-group .member-error span {
    color: #ff5959
}

.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: 4.2666666667rem;
    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 2.6666666667rem;
    border-radius: 2.1333333333rem;
    background: var(--form-input-bg);
    pointer-events: none
}

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

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

.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.3333333333rem;
    transform: translateY(-50%);
    border-radius: 5.3333333333rem;
    background-color: var(--wallet-amount-info-icon);
    color: var(--wallet-amount-info-icon-txt);
    font-size: 2.4rem;
    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 4.2666666667rem;
    transform: translateY(-50%);
    color: var(--color-success);
    font-size: 3.2rem;
    text-decoration: none
}

.input-wrap .status:before {
    content: "";
    display: inline-block;
    position: relative;
    top: .5333333333rem;
    width: 3.4666666667rem;
    height: 3.4666666667rem;
    margin-right: 1.3333333333rem;
    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.3333333333rem;
    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.2rem;
    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-top: 2.1333333333rem;
    color: var(--color-danger);
    font-size: 3.2rem;
    text-align: left
}

.error-message:before {
    content: "!";
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    border-radius: 50%;
    background-color: var(--color-danger);
    color: var(--form-box-bg);
    font-size: 3.2rem;
    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/30%;
    -webkit-mask: var(--form-clear-icon) no-repeat center/30%
}

.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.2rem;
    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: .8rem;
    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: .8rem;
    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 {
    display: flex;
    flex-direction: column;
    padding-bottom: 4.2666666667rem;
    font-size: 3.2rem;
    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: 10px;
    grid-template-columns: 100;
    width: 100%
}

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

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

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

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

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

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

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

.check-group [type=checkbox]:checked+label,.check-group [type=radio]:checked+label {
    z-index: 2;
    background: var(--radio-border-checked);
    color: var(--radio-txt-checked)
}

.check-group [type=checkbox]:checked+label: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)
}

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

.check-group [type=radio]:checked+label {
    background: var(--radio-border-checked)
}

.check-group [type=radio]:checked+label:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: .2666666667rem;
    left: .2666666667rem;
    width: calc(100% - .5333333333rem);
    height: calc(100% - .5333333333rem);
    border-radius: 2.5333333333rem;
    background: var(--radio-bg-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: 2.6666666667rem;
    border-top: .2666666667rem dashed var(--color-player-form-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: 2.6666666667rem;
    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: 2.5333333333rem;
    background: transparent
}

.overflow:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667rem;
    left: .2666666667rem;
    width: calc(100% - .5333333333rem);
    height: calc(100% - .5333333333rem);
    border-radius: 2.2666666667rem;
    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
}

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

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

.select-group {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 3.2rem;
    font-size: 3.2rem;
    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 4.2666666667rem;
    transition: background .3s;
    border: 0;
    border-radius: 2.6666666667rem;
    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: 4.2666666667rem;
    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: 10px;
    grid-template-columns: 100;
    width: 100%
}

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

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

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

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

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

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

.select-group [type=checkbox]+label,.select-group [type=radio]+label {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    padding: 0 2.6666666667rem;
    border-radius: .8rem;
    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: .2666666667rem solid var(--radio-border-checked);
    background-color: var(--radio-bg-checked);
    color: var(--radio-txt)
}

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

.style-bank:after {
    display: none
}

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

.style-bank li {
    overflow: hidden
}

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

.style-bank li input[type=checkbox].active+label,.style-bank li input[type=radio].active+label {
    border: .4rem 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: .2666666667rem solid color-mix(in srgb,var(--content-bg),transparent 80%);
    border-radius: 2.1333333333rem;
    opacity: 0
}

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

.frost-card .frost-bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 2.1333333333rem;
    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(2px);
    backdrop-filter: blur(2px)
}

.frost-card .frost-mask .frost-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.3333333333rem 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: .5333333333rem;
    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: 2.6666666667rem 2.6666666667rem 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 2.6666666667rem;
    border-radius: 2.1333333333rem;
    font-size: 3.2rem;
    line-height: 8.5333333333rem
}

.frost-card .frost-mask .frost-btn .btn.add-card {
    box-sizing: border-box;
    border: .4rem 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: 2.6666666667rem 2.6666666667rem 2.6666666667rem 4.2666666667rem;
    overflow: hidden;
    border-radius: 2.1333333333rem;
    box-shadow: 0 .5333333333rem .8rem var(--slick-slide-shadow);
    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.3333333333rem 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.3333333333rem;
    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: 2.1333333333rem;
    color: var(--color-title);
    pointer-events: none
}

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

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

.upload-btn {
    display: flex;
    flex: 1;
    flex-basis: 8rem;
    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: 1.8666666667rem;
    overflow: hidden;
    transition: .3s;
    border: 0;
    text-align: center
}

.upload-group.active {
    height: 40rem;
    border: 1px dashed var(--color-player-form-upload)
}

.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%;
    box-shadow: 0 0 1.0666666667rem var(--upload-icon-shadow)
}

.area-mask .m-text {
    font-size: 3.7333333333rem;
    text-shadow: 0 0 4px var(--upload-icon-shadow)
}

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

.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: 1px dashed var(--form-upload-border);
    border-radius: 2.6666666667rem;
    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;
    padding: 2.1333333333rem 0;
    background-color: var(--form-box-bg);
    font-size: 3.2rem;
    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-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

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

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

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

.qrcode img {
    width: 100%
}

.tag-recommond {
    position: absolute;
    z-index: 1;
    top: 1.3333333333rem;
    left: -1.0666666667rem;
    width: 5.3333333333rem;
    height: 4rem;
    border-top-left-radius: .5333333333rem;
    border-top-right-radius: .8rem;
    border-bottom-right-radius: .8rem;
    background-color: 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-color);
    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(--form-tag-recommand-border) 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: 5.3333333333rem 5.3333333333rem 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: 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-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.3333333333rem 2.6666666667rem;
    transform: translateY(-100%);
    border-radius: .8rem;
    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.2rem;
    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: 1.8666666667rem;
    color: var(--pop-getvcode-resend-txt);
    font-size: 2.6666666667rem;
    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: 2.6666666667rem;
    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.3333333333rem
}

.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 4.2666666667rem;
    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: .2666666667rem solid var(--form-input-bg);
    border-radius: 2.6666666667rem;
    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: .2666666667rem solid var(--form-input-border-focus);
    outline: none
}

.crypto-group-2 .crypto-input .delete-btn {
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 8rem;
    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.2rem
}

.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: 1.8666666667rem;
    overflow: hidden;
    transition: all .3s;
    border: 0;
    text-align: center;
    cursor: pointer
}

.upload-box.active {
    height: 40rem;
    border: 1px dashed var(--color-player-form-upload)
}

.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.3333333333rem;
    padding: 0 .5333333333rem;
    border-radius: .8rem;
    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.3333333333rem
}

.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: 3px;
    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.3333333333rem
}

.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: 8rem;
    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.3333333333rem;
    padding: 0;
    text-align: left;
    color: var(--login-txt);
    font-size: 3.2rem
}

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

.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.3333333333rem;
    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: 6.6666666667rem;
    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)
}

.banner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: -.2666666667rem 0 0;
    overflow: hidden;
    background-color: var(--color-banner-bg)
}

.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 .banner-v1 {
    height: 36rem
}

.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: .5333333333rem;
    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)
}

.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(5px);
    backdrop-filter: blur(5px)
}

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

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

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

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

.popup-page-main {
    flex: none;
    width: 100%;
    height: 100%;
    box-shadow: 0 .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: gray;
    transform-origin: 50% 50%
}

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

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

.popup-page-main__close:before,.popup-page-main__close:after {
    border-radius: 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
}

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)
}

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

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

.menu-box {
    position: relative;
    height: auto;
    margin: 4.2666666667rem;
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    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: 4.2666666667rem;
    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.3333333333rem;
    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.2rem;
    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 4.2666666667rem
}

.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.3333333333rem;
    color: var(--btn-main-txt);
    font-size: 5.3333333333rem;
    font-weight: 500;
    line-height: 12.8rem;
    text-align: center;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%);
    text-shadow: none
}

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

.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);
    text-shadow: 0 .2666666667rem .8rem color-mix(in srgb,var(--btn-main-txt-shadow-disabled),transparent 50%);
    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.3333333333rem
}

.prompt {
    display: block;
    width: 100%;
    color: var(--form-input-txt-placeholder);
    font-size: 3.4666666667rem;
    text-align: center;
    padding: 4.2666666667rem 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: 1.8666666667rem
}

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

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

.custom-banner-wrapper {
    position: relative
}

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

.custom-banner-wrapper .carousel-frame-alpha__navigation {
    top: 22.6666666667rem!important;
    left: 50%!important;
    transform: translate(-50%)!important;
    width: calc(100% + 13.3333333333rem)!important;
    height: 5.3333333333rem!important;
    z-index: 3
}

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

.custom-banner-wrapper .carousel-frame-alpha__navigation .navigation__prev:after,.custom-banner-wrapper .carousel-frame-alpha__navigation .navigation__next:after {
    content: "";
    display: block;
    z-index: -1;
    position: relative;
    top: -5.8666666667rem;
    left: -.5333333333rem;
    width: 6.4rem;
    height: 6.4rem;
    background: color-mix(in srgb,var(--main-wrapper-bg),transparent 60%);
    border-radius: 50%
}

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

.custom-banner-wrapper .carousel-frame-alpha__navigation img:hover {
    transform: scale(1.5)
}

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

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

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

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

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

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

.custom-banner-wrapper .carousel-wrap .pagination {
    height: 7.4666666667rem;
    margin-top: 0;
    background: var(--pagination-bg)
}

.custom-banner-wrapper .carousel-wrap .pagination__bullet {
    background: var(--pagination-bullet-bg)
}

.custom-banner-wrapper .carousel-wrap .pagination__bullet--active {
    background-color: var(--pagination-bullet-bg-active)
}

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

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

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

.banner .banner-v1 .carousel-wrap.siblings .item {
    padding: 1.3333333333rem 1.3333333333rem 3.4666666667rem
}

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

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

header {
    display: flex;
    position: fixed;
    top: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.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 {
    height: 13.3333333333rem;
    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: 1.0666666667rem 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 a,header.normal-logo-left a {
    border-radius: 1.3333333333rem
}

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.3333333333rem 0 0 1.3333333333rem;
    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.3333333333rem 1.3333333333rem 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: 4.8rem;
    height: 4.8rem;
    border-radius: 100%;
    box-shadow: 0 0 .4rem #0006
}

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 4.2666666667rem
}

.menu-btn ul li {
    width: 5.3333333333rem;
    height: .5333333333rem;
    margin: 1.0666666667rem 0;
    border-radius: .5333333333rem;
    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.2rem;
    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.2rem;
    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: 1px solid transparent;
    outline: none;
    background: none
}

.login-btn p {
    color: var(--header-service-icon-color);
    font-size: 3.2rem;
    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.2rem;
    font-weight: 700;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

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

.nav-category {
    display: flex;
    position: relative;
    z-index: 2;
    width: 100%;
    height: auto;
    background: var(--nav-bg)
}

.nav-category:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 1.3333333333rem;
    background: var(--content-bg)
}

.nav-category:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .4rem;
    background: var(--nav-underline)
}

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

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

.nav-category .btn .icon-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 10.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.3333333333rem 1.3333333333rem 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 {
    margin-bottom: 3.2rem;
    color: var(--nav-category-txt);
    font-size: 3.2rem;
    font-weight: 600;
    text-align: center
}

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

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

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

    to {
        height: 64px;
        opacity: 1
    }
}

.nav-category .slick-current .icon-list {
    z-index: 2;
    padding-top: 0;
    transform: translateY(-2px) scale(1.25);
    transition: transform .5s ease;
    background: 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.3333333333rem #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%
}

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

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

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

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

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

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

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

.footer-top div h2 {
    margin: 0 0 1.0666666667rem;
    color: var(--footer-title);
    font-size: 3.2rem
}

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

.footer-top div a {
    display: block
}

.footer-top ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--footer-area-bg);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

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

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

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

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

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

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

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

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

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

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

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

.footer-top .about-us ul {
    display: grid;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(3,1fr)
}

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

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

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

.footer-top .about-us a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--footer-link);
    font-size: 3.4666666667rem;
    text-align: center;
    text-decoration: underline
}

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

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

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

.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.3333333333rem;
    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
}

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

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

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

.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 .lobby-icon {
    animation: shine 1s infinite ease-in-out;
    background-image: linear-gradient(-45deg,transparent 0%,transparent 25%,var(--loading-animation-lobby-icon-gradient) 50%,transparent 75%,transparent 100%);
    background-repeat: repeat-y;
    background-position: -360% 0%;
    background-size: 80% 100%;
    height: 16.5333333333rem;
    background-color: var(--loading-animation-lobby-icon-gradient-bg)
}

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

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

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

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

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

.pop-wrap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 90%;
    max-height: 95vh;
    transform: translate(-50%,-55%);
    transition: transform .3s;
    animation: hide 0s 1s 1 forwards;
    border-radius: 1.3333333333rem;
    opacity: 0;
    background: var(--pop-bg-content);
    background-image: var(--pop-bg-gradient);
    box-shadow: 0 1px 6px 0 var(--pop-bg-shadow),inset 0 1px 2px var(--pop-bg-shadow);
    color: var(--pop-txt)
}

.pop-wrap.show {
    display: block
}

.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;
    background: var(--pop-promotion-title-bg)
}

.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: 25%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 25%
}

.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.3333333333rem 1.3333333333rem 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: 2.6666666667rem 2.6666666667rem 0 0;
    text-align: center
}

.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: 2.1333333333rem 2.1333333333rem 4.2666666667rem;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left
}

.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-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.3333333333rem;
    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.3333333333rem
}

.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.3333333333rem;
    background: var(--pop-language-btn);
    box-shadow: inset 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 90%),inset 0 -.2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 90%);
    color: var(--pop-language-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: 0;
    background: var(--pop-language-btn-border);
    color: var(--pop-language-btn-txt)
}

.pop-language .pop-inner .language-list .right-language-area .radio-box li.active:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667rem;
    left: .3333333333rem;
    width: calc(100% - .6666666667rem);
    height: calc(100% - .5333333333rem);
    border-radius: 1.3333333333rem;
    background: var(--pop-language-btn-bg-active)
}

.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: 1px 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: color-mix(in srgb,var(--pop-language-txt),transparent 40%);
    font-size: 3.2rem;
    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: 4.2666666667rem 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: 4.2666666667rem 0;
    padding: 6.4rem 4.2666666667rem;
    border-radius: 1.3333333333rem;
    background: var(--pop-promotion-bonuswallet-wallet-bg);
    color: var(--pop-promotion-bonuswallet-wallet-txt);
    font-size: 3.2rem
}

.pop-setwallet label {
    position: relative;
    height: 6.4rem;
    overflow: hidden;
    color: var(--form-txt);
    font-size: 3.2rem;
    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.2rem
}

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

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

.pop-setwallet .deposit-now {
    margin-top: 4.2666666667rem;
    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: 4.2666666667rem 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: .2666666667rem 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: 5.3333333333rem 5.3333333333rem 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: 1px 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);
    background-image: var(--pop-bg-gradient)
}

.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.3333333333rem;
    right: 1.3333333333rem;
    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.3333333333rem;
    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.3333333333rem;
    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.3333333333rem;
    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.3333333333rem;
    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.3333333333rem;
    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
}

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

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

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

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

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

.pop-wrap.pop-bonus-complete .pop-title .number span {
    display: flex;
    justify-content: center;
    padding: 1.6rem 0 0;
    background: var(--pop-bonus-money);
    color: transparent;
    font-size: 11.7333333333rem;
    line-height: 11.2rem;
    background-clip: text;
    -webkit-background-clip: text
}

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

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

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

.pop-wrap.pop-bonus-complete .kv-block .kv-img:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: -1.3333333333rem;
    left: -1.3333333333rem;
    width: 24rem;
    height: 24rem;
    padding: 2.6666666667rem;
    border: .5333333333rem solid transparent;
    border-radius: 50%;
    background: var(--pop-bonus-border-inside);
    background-clip: padding-box;
    -webkit-background-clip: padding-box
}

.pop-wrap.pop-bonus-complete .kv-block .kv-img:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -2;
    top: -2.1333333333rem;
    left: -2.1333333333rem;
    width: 25.6rem;
    height: 25.6rem;
    padding: 2.6666666667rem;
    border: .5333333333rem solid transparent;
    border-radius: 50%;
    background: var(--pop-bonus-border-outside);
    background-clip: padding-box
}

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

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

.pop-wrap.pop-bonus-complete .bonus-wallet-title {
    display: block;
    position: relative;
    bottom: 57.6rem;
    width: 90%;
    height: 20rem;
    margin: 0 5%;
    overflow: hidden;
    background: var(--pop-bonus-txt);
    color: transparent;
    font-size: 7.4666666667rem;
    line-height: 9.6rem;
    text-overflow: ellipsis;
    background-clip: text;
    -webkit-background-clip: text;
    line-clamp: 2;
    box-orient: vertical;
    filter: drop-shadow(0 .5333333333rem 1.3333333333rem rgba(0,0,0,.7))
}

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

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

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

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

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

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

.pop-otp-verification {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    width: 100%;
    max-height: 95vh;
    padding-top: 4.2666666667rem;
    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: 2.6666666667rem 2.6666666667rem 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: 2.1333333333rem 4.2666666667rem;
    transform: translate(-50%);
    border-radius: 2.1333333333rem;
    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: 4.2666666667rem;
    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: 2.6666666667rem 2.6666666667rem 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: 4.2666666667rem;
    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: .8rem;
    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 .4rem 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: .4rem;
    transform-origin: 0 50%;
    animation: spinClockwise 2s linear infinite;
    border-radius: 1.3333333333rem;
    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: .4rem;
    transform-origin: 0 50%;
    animation: spinClockwise 12s linear infinite;
    border-radius: 1.3333333333rem;
    background-color: var(--pop-transaction-details-timer)
}

.transaction-details-wrap {
    height: 100%;
    margin: 0;
    padding: 4.2666666667rem;
    overflow-x: hidden;
    overflow-y: auto
}

.transaction-details-wrap .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.6666666667rem 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.3333333333rem;
    overflow: hidden;
    transform: scale(.9);
    border-radius: 1.0666666667rem;
    color: var(--transaction-record-status-txt);
    font-size: 3.2rem;
    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: 2.6666666667rem
}

.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.3333333333rem 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: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--pop-transaction-details-message-bg);
    box-shadow: .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 90%),inset 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.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.3333333333rem
}

.timeline-block .content .time {
    width: 24%;
    color: var(--pop-transaction-details-message-txt);
    font-size: 2.9333333333rem;
    text-align: right
}

.timeline-block.current:before {
    height: 110%
}

.timeline-block.current .point {
    display: flex;
    z-index: 1;
    top: -6.4rem;
    left: 1.8666666667rem;
    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: 2.6666666667rem
}

.details-box .info {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    padding: 4.2666666667rem;
    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 .name {
    font-size: 3.4666666667rem;
    font-weight: 500
}

.details-box .info .value {
    font-size: 3.4666666667rem;
    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 4.2666666667rem;
    transition: top .3s;
    animation: errorTipsShow .5s alternate linear forwards;
    border: .2666666667rem solid var(--alert-login-fail-tips-border);
    border-radius: 2.6666666667rem;
    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.2rem;
    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: 4.2666666667rem;
    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: 4.2666666667rem
}

.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: 4.2666666667rem 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 4.2666666667rem 4.2666666667rem;
    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(--color-walletcard-cancel-btn)
}

.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(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

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

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

.rotating-pop.show {
    opacity: 1;
    pointer-events: auto
}

.rotating-phone-wrap {
    position: relative;
    bottom: 10%;
    width: 26.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
}

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

.beforelogin a,.afterlogin a {
    text-align: left;
    padding: 1.0666666667rem 4.2666666667rem;
    border-radius: 5.3333333333rem;
    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.2rem;
    line-height: 1.2;
    text-decoration: none
}

.beforelogin .main-wallet,.afterlogin .main-wallet {
    width: 33%;
    border-radius: 2.6666666667rem 0 0 2.6666666667rem;
    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 .8rem 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 .8rem 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 .8rem 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 2.6666666667rem 2.6666666667rem 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.2rem;
    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%
}

.announcement-row {
    display: flex;
    position: relative;
    width: 100%;
    height: 8rem;
    background-color: var(--announvement-bg);
    color: var(--announvement-txt);
    font-size: 3.2rem;
    line-height: 8rem
}

.announcement-row:before {
    content: "";
    display: block;
    width: 8rem;
    height: 8rem;
    margin-left: 3.2rem;
    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
}

.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;
    padding-top: 1.0666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--sidenav-category-area-bg);
    box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 90%);
    font-size: 3.2rem
}

.member-menu-box:nth-child(1) {
    background: none;
    box-shadow: none
}

.member-menu-box:nth-child(1) .title {
    padding: 0
}

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

.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: 2.6666666667rem;
    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.3333333333rem;
    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.3333333333rem;
    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 .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.3333333333rem;
    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: 1.8666666667rem
}

.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.2rem;
    text-decoration: none
}

.member-menu-box .member-menu-service a p {
    margin-bottom: 1.3333333333rem;
    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 6.4rem 4.2666666667rem;
    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;
    max-width: 70%;
    color: var(--profile-tips-txt);
    font-size: 3.2rem;
    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: 4.2666666667rem 0;
    border-radius: 2.6666666667rem;
    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: 4.2666666667rem;
    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 .8rem 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)
    }
}

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

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

.member-content .button {
    width: calc(100% - 8.5333333333rem);
    margin: 4.2666666667rem auto
}

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

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

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

.member-content p,.login-biometric-content p {
    padding: 0 4.2666666667rem;
    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: 4.2666666667rem 4.2666666667rem 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: 4.2666666667rem
}

.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%;
    background: #fff;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%
}

.biometric-group .btn-biometric 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
    }
}

.layout-brand {
    display: block
}

.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,.card2 {
    width: 100%;
    height: auto;
    margin-bottom: 2.6666666667rem;
    border-radius: .8rem
}

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

.card1 li,.card2 li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    border-radius: 4.2666666667rem;
    background: var(--nav-item-bg);
    box-shadow: 0 1.6rem 1.3333333333rem 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,.card2 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 a,.card2 li a {
    display: block;
    text-decoration: none
}

.card1 li img,.card2 li img {
    display: block;
    width: 50%;
    margin: 1.0666666667rem auto 0
}

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

.card2 ul {
    grid-template-columns: repeat(3,1fr)
}

.card2 li img {
    width: 40%
}

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

.nextevent {
    position: relative;
    height: 62.9333333333rem
}

.nextevent .title {
    display: flex;
    align-items: center;
    margin: 2.1333333333rem 4.2666666667rem;
    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: 3.2rem;
    border-radius: .5333333333rem;
    background: var(--event-border);
    vertical-align: middle
}

.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 4.2666666667rem;
    border-radius: 4.2666666667rem
}

.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)
}

.mcd-style .nextevent {
    padding: 0 2.6666666667rem;
    height: auto
}

.mcd-style .nextevent .banner {
    height: auto
}

.mcd-style .nextevent .banner .banner-v1 {
    height: auto!important
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap {
    height: auto;
    padding-bottom: 6.4rem
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item-drag {
    height: 54.1333333333rem;
    padding-top: 0%
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item {
    height: auto;
    padding: 0
}

.mcd-style .nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 54.1333333333rem;
    border-radius: 1.3333333333rem;
    background-size: cover
}

.progress-bar .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333rem;
    margin-bottom: 1.3333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--bonuswallet-progress-bar-bg);
    box-shadow: inset 0 0 .2666666667rem 0 var(--bonuswallet-progress-bar-bg-shadow)
}

.progress-bar .bar-inner {
    position: absolute;
    left: 0;
    width: 60%;
    height: 100%;
    border-radius: 1.3333333333rem;
    background: var(--bonuswallet-progress-bar-bg-mine);
    box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb,var(--bonuswallet-progress-bar-bg-shadow-mine),transparent 60%),0 0 .8rem color-mix(in srgb,var(--bonuswallet-progress-bar-bg-shadow-mine),transparent 60%)
}

.progress-bar .bar-inner:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    width: .8rem;
    height: .8rem;
    transform: translate(-50%,-50%);
    border-radius: .8rem;
    background-color: #fff;
    box-shadow: 0 0 .5333333333rem .2666666667rem var(--bonuswallet-progress-bar-bg-shadow-mine)
}

.progress-bar .number {
    display: flex;
    align-content: center;
    justify-content: space-between;
    color: var(--bonuswallet-progress-bar-txt);
    font-size: 2.6666666667rem
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner,.ticket-wrap .progress-bar .bar .bar-inner {
    background: var(--bonuswallet-progress-bar-bg-active);
    box-shadow: 0 .2666666667rem .8rem .2666666667rem color-mix(in srgb,var(--bonuswallet-progress-bar-bg-active-shadow),transparent 60%),0 0 .8rem color-mix(in srgb,var(--bonuswallet-progress-bar-bg-active-shadow),transparent 60%)
}

.bonus-wallet-wrap .progress-bar .bar .bar-inner:after,.ticket-wrap .progress-bar .bar .bar-inner:after {
    box-shadow: 0 0 .5333333333rem .2666666667rem var(--bonuswallet-progress-bar-bg-active-shadow)
}

.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 .3s,z-index 0s .3s
}

.search-top-block:after {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 13.3333333333rem;
    background: var(--pop-search-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-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 13.3333333333rem;
    background: var(--pop-search-header-bg)
}

.search-top-info .back {
    display: block;
    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: 30%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 30%;
    cursor: pointer
}

.search-top-info input {
    position: relative;
    width: calc(100% - 16rem);
    height: 10.6666666667rem;
    padding: 0;
    border: 0;
    border-radius: 2.6666666667rem;
    outline: none;
    background: var(--pop-search-input-bg);
    color: var(--pop-search-input-txt);
    font-size: 3.7333333333rem;
    text-indent: 5.3333333333rem
}

.search-top-info input::placeholder {
    color: var(--pop-search-input-placeholder)
}

.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;
    padding: 4.2666666667rem 2.1333333333rem
}

.searchpage-main .clear-result {
    position: absolute;
    top: 4.2666666667rem;
    right: 2.1333333333rem;
    color: var(--pop-search-clear-txt);
    font-size: 3.2rem;
    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: 2.1333333333rem;
    background: var(--pop-search-inner-bg)
}

.searchpage-main .check-group:nth-child(1) {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.searchpage-main .check-group:last-child {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.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;
    margin-bottom: 4.2666666667rem;
    overflow: hidden
}

.search-checkbox-group li {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-checkbox-group li:nth-child(3n) {
    margin-right: 0
}

.search-checkbox-group [type=checkbox]+label,.search-checkbox-group [type=radio]+label {
    padding: 0 3.2rem;
    overflow: hidden;
    background: var(--radio-bg);
    color: var(--radio-txt);
    line-height: 10.6666666667rem
}

.searchpage-bar {
    position: fixed;
    z-index: 10;
    right: -50%;
    bottom: 0;
    width: 100%;
    padding: 2.1333333333rem;
    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.3333333333rem;
    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
}

.no-result {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100rem;
    background: var(--transaction-record-table-body-empty-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
}

.switch-mode {
    display: grid;
    grid-gap: 4.2666666667rem;
    grid-template-columns: repeat(2,1fr);
    margin: 4.2666666667rem
}

.switch-mode li {
    display: flex;
    position: relative;
    flex-direction: column;
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--switch-bg);
    color: var(--radio-txt);
    text-align: center
}

.switch-mode li.active {
    background: var(--switch-bg-checked);
    color: var(--radio-txt-checked)
}

.switch-mode li.active i {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    border-bottom-right-radius: 2.1333333333rem;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center
}

.switch-mode li.active:after {
    content: "";
    position: absolute;
    top: .2666666667rem;
    left: .2666666667rem;
    width: calc(100% - .5333333333rem);
    height: calc(100% - .5333333333rem);
    border-radius: 2.5333333333rem;
    background: var(--checkbox-bg-checked)
}

.switch-mode li video,.switch-mode li h4,.switch-mode li p,.switch-mode li img {
    z-index: 1;
    color: var(--mode-txt)
}

.switch-mode li video,.switch-mode li img {
    position: relative;
    left: 10%;
    width: 80%;
    margin-bottom: 2.1333333333rem
}

.switch-mode li h4 {
    margin: 2.1333333333rem 0;
    font-size: 3.7333333333rem;
    font-weight: 500
}

.switch-mode li p {
    font-size: 3.2rem
}

.mode-tips {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 4.2666666667rem;
    transform: translate(-50%);
    border-radius: 1.3333333333rem;
    background: var(--mode-tips-bg);
    color: var(--mode-tips-txt);
    font-weight: 500
}

.inner-block {
    margin: 5.3333333333rem
}

.inner-block li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    background: var(--switch-bg);
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    color: var(--radio-txt)
}

.inner-block .toggle-box p {
    color: color-mix(in srgb,var(--color-title),transparent 20%)
}

.lobby-wrap {
    display: block;
    padding: 2.1333333333rem 0;
    background: var(--lobby-bg)
}

.lobby-wrap .lobby-area {
    padding: 2.1333333333rem 0 0
}

.lobby-wrap .lobby-area:last-child {
    padding: 2.1333333333rem 0
}

.lobby-wrap .lobby-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 4.2666666667rem 2.1333333333rem;
    font-weight: 500
}

.lobby-wrap .lobby-title h2 {
    color: var(--lobby-title)
}

.lobby-wrap .lobby-title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 3.2rem;
    border-radius: .5333333333rem;
    background: var(--lobby-border);
    vertical-align: middle
}

.lobby-wrap .lobby-title .lobby-arrow {
    display: block;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    transform: rotate(180deg);
    background: var(--lobby-arrow);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 70%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70%
}

.lobby-wrap .lobby-list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.1333333333rem 0 2.1333333333rem 4.2666666667rem;
    overflow: auto
}

.lobby-wrap .lobby-list .lobby-item {
    display: flex;
    flex: none;
    flex-direction: column;
    justify-content: center;
    width: 44rem;
    margin: 0 2.6666666667rem 0 0;
    padding: 0;
    border-radius: 1.3333333333rem;
    background: var(--lobby-item-bg);
    box-shadow: 0 0 1.6rem #0130494d
}

.lobby-wrap .lobby-list .lobby-item .lobby-icon {
    position: relative;
    width: 100%;
    height: 28rem;
    overflow: hidden;
    border-radius: 1.3333333333rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.lobby-wrap .lobby-list .lobby-item .lobby-icon img {
    width: 100%;
    height: 100%
}

.lobby-wrap .lobby-list .lobby-item .lobby-text {
    padding: 2.1333333333rem 2.6666666667rem;
    color: var(--lobby-item-title);
    font-size: 3.2rem
}

.lobby-wrap .tag {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: .5333333333rem 1.6rem;
    transform: scale(.8);
    transform-origin: left bottom;
    border-radius: 0 .5333333333rem 0 0;
    font-size: 3.2rem
}

.lobby-wrap .tag.new {
    background: var(--lobby-item-new-tag-bg);
    color: var(--lobby-item-new-tag-txt);
    text-shadow: 0 .2666666667rem .2666666667rem color-mix(in srgb,var(--text-shadow),transparent 80%)
}

@font-face {
    font-family: aBigDeal;
    src: local("aBigDeal"),url(aBigDeal.1671204006a25bbb.woff) format("woff"),url(aBigDeal.0ceaed960312a7e3.ttf) format("opentype")
}

.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% - 4.2666666667rem);
    border-radius: 1.3333333333rem
}

.games .jackpot .text {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    text-align: center
}

.games .jackpot h2 {
    margin-bottom: 1.3333333333rem;
    color: #fff;
    font-size: 4rem;
    text-shadow: 0 0 2.6666666667rem rgba(0,0,0,.5)
}

.games .jackpot span {
    display: block;
    color: #ffef3c;
    font-size: 7.4666666667rem;
    font-weight: 700;
    text-shadow: 0 0 2.6666666667rem rgba(0,0,0,.5)
}

.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 1.0666666667rem
}

.games .games-box {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: .8rem
}

.games .games-box .text {
    position: relative;
    width: 100%;
    height: auto;
    padding: 1.3333333333rem 2.6666666667rem;
    background-color: var(--slot-card-bg)
}

.games .games-box .text h3 {
    width: 83%;
    margin-bottom: 1.3333333333rem;
    overflow: hidden;
    color: var(--slot-card-title);
    font-size: 4rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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: .5333333333rem;
    background-color: var(--slot-tag-new-bg);
    color: var(--slot-tag-new-txt);
    font-size: 2.6666666667rem;
    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: 4.2666666667rem 0;
    font-size: 3.4666666667rem;
    text-align: center
}

.games-main.main-vertical {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(29.3333333333rem,1fr));
    grid-gap: 1.3333333333rem;
    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.8666666667rem;
    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: 4.2666666667rem;
    left: 50%;
    transform: translate(-50%);
    font-size: 1.8666666667rem;
    line-height: 1.8666666667rem;
    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%
}

: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: 4.2666666667rem;
    background-position: bottom
}

.slot-game .banner .slider .slick-slide .banner-image:after,.casino-game .banner .slider .slick-slide .banner-image:after {
    content: "";
    display: block;
    height: 100%;
    border-radius: 4.2666666667rem;
    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: 4.2666666667rem 4.2666666667rem 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 4.2666666667rem 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: 2.6666666667rem;
    -webkit-backdrop-filter: blur(.1066666667vw);
    backdrop-filter: blur(.1066666667vw)
}

.slot-game .recommend-wrap .recommend-scroll li h4,.casino-game .recommend-wrap .recommend-scroll li h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 1.0666666667rem 4.2666666667rem;
    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 4.2666666667rem;
    opacity: .7;
    color: var(--new-slot-recommend-txt);
    font-size: 3.2rem
}

.slot-game .games-wrap,.casino-game .games-wrap {
    margin: 4.2666666667rem 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: 2.6666666667rem;
    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: 2.6666666667rem
}

.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 4.2666666667rem 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: 4.2666666667rem;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    border-radius: .5333333333rem;
    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: .5333333333rem 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 4.2666666667rem;
    border: 0;
    border-radius: 2.6666666667rem;
    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: 4.2666666667rem;
    padding: 2.1333333333rem;
    border: 0;
    border-radius: 50%;
    background: var(--new-slot-clear-icon-color);
    font-size: 3.2rem;
    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 4.2666666667rem;
    border-left: .4rem solid var(--new-slot-cancel-border);
    color: var(--new-slot-cancel-txt);
    font-size: 3.2rem
}

.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: .5333333333rem 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: .5333333333rem 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
}

.search-box {
    display: none;
    position: relative;
    top: 0;
    width: 100%;
    height: 100vh;
    padding: 4.2666666667rem 4.2666666667rem 17.0666666667rem;
    overflow-y: auto;
    border-radius: 0 0 4rem 4rem;
    background: var(--new-slot-search-area-bg)
}

.search-box:after {
    content: "";
    display: block;
    position: fixed;
    bottom: 0;
    width: calc(100% - 8.5333333333rem);
    height: 21.3333333333rem;
    background: var(--new-slot-search-area-bg)
}

.search-box .recently-played,.search-box .my-favorites {
    display: inline-flex;
    position: relative;
    align-items: center;
    width: 48%;
    height: 15.4666666667rem;
    margin-bottom: 6.4rem;
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    color: #fff;
    font-size: 3.2rem;
    font-weight: 500;
    text-decoration: none
}

.search-box .recently-played:before,.search-box .my-favorites:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    width: 100%;
    height: 15.4666666667rem;
    mix-blend-mode: overlay
}

.search-box .recently-played {
    background: var(--new-slot-recently-played-bg)
}

.search-box .recently-played:before {
    background: var(--new-slot-recently-played) no-repeat center/contain
}

.search-box .my-favorites {
    float: right;
    background: var(--new-slot-my-favorites-bg)
}

.search-box .my-favorites:before {
    background: var(--new-slot-my-favorites) no-repeat center/contain
}

.search-box .button {
    position: fixed;
    z-index: 9000;
    bottom: 4.2666666667rem;
    width: calc(100% - 8.5333333333rem)
}

.results-box {
    display: none;
    position: relative;
    z-index: 9000;
    top: 0;
    width: 100%;
    height: auto;
    padding: 0 4.2666666667rem 4.2666666667rem;
    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.2rem;
    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: 4.2666666667rem;
    row-gap: 1.0666666667rem
}

.game-list li+li {
    margin-top: 4.2666666667rem
}

.game-list li img {
    grid-row: 1/span 2;
    max-width: 100%;
    border-radius: 1.3333333333rem
}

.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.2rem
}

.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: 2.6666666667rem;
    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: 2.6666666667rem
}

.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: 2.6666666667rem
}

.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: 4.2666666667rem
}

.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: 4.2666666667rem;
    opacity: 0;
    color: color-mix(in srgb,var(--new-slot-category-title),transparent 50%);
    font-size: 3.2rem
}

.category ul {
    display: grid;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(4,1fr);
    margin: 4.2666666667rem 0;
    padding: 0;
    list-style: none
}

.category ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 10.6666666667rem;
    border-radius: 2.6666666667rem;
    opacity: 0;
    background: var(--new-slot-radio-bg);
    color: var(--new-slot-radio-txt);
    font-size: 3.2rem;
    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:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    border-bottom-right-radius: 3.2rem;
    background: var(--checkbox-check-icon) no-repeat center
}

.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: 4.2666666667rem 6.4rem 4.2666666667rem 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 4.2666666667rem
}

.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: 4.2666666667rem;
    overflow-y: auto
}

.recently-played-wrap .game-box .date-info,.my-favorites-wrap .game-box .date-info {
    position: relative;
    top: 0;
    margin-bottom: 4.2666666667rem;
    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: 2.6666666667rem;
    border-top-right-radius: 2.6666666667rem;
    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: 4.2666666667rem 4.2666666667rem 14.9333333333rem;
    transform: translate(0);
    transition: bottom .3s;
    border-radius: 2.6666666667rem 2.6666666667rem 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: 2.6666666667rem;
    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: 2.6666666667rem
}

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: 4.2666666667rem;
    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.2rem
}

.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: 4.2666666667rem
}

.recommend-box .title {
    display: flex;
    align-items: center;
    height: 4.2666666667rem;
    margin: 4.2666666667rem;
    color: var(--event-title);
    font-size: 3.7333333333rem;
    font-weight: 500
}

.recommend-box .title:before {
    content: "";
    position: absolute;
    left: 4.2666666667rem;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    border-radius: .5333333333rem;
    background: var(--event-border)
}

.recommend-box .title:after {
    content: "";
    position: absolute;
    right: 4.2666666667rem;
    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: 4.2666666667rem;
    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 4.2666666667rem 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: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    color: #fff;
    font-size: 3.2rem;
    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
}

.iplimit-card-wrap {
    display: block;
    height: auto;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .8rem 1.3333333333rem 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% - 4.2666666667rem);
    margin: 0 2.1333333333rem 12.8rem;
    padding: 4.2666666667rem;
    background: var(--slot-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,.games-empty-container .top-inner h4 {
    color: var(--slot-empty-txt)
}

.games-empty-container .top-inner h3 {
    display: inline-block;
    font-size: 18.1333333333rem;
    vertical-align: middle
}

.games-empty-container .top-inner h4 {
    margin-bottom: 15px;
    opacity: .8;
    line-height: 1.8
}

.content-full-height {
    text-align: center
}

.logo-box {
    display: flex;
    position: relative;
    width: 53.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: 4.2666666667rem;
    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 32%;
    margin-right: 2.1333333333rem
}

.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.3333333333rem;
    overflow: scroll;
    border-radius: 1.3333333333rem;
    background: var(--form-input-bg);
    box-shadow: 0 .5333333333rem 1.0666666667rem #345ece26
}

.phone-code-list li,.currency-code-list li,.social-code-list li {
    margin-bottom: 0;
    padding-top: 1.3333333333rem;
    padding-bottom: 1.3333333333rem;
    list-style: none
}

.phone-code-list img,.currency-code-list img,.social-code-list img {
    margin: 1.3333333333rem;
    border-radius: 50%
}

.phone-code-list span,.currency-code-list span,.social-code-list span {
    color: var(--form-input-txt);
    font-size: 3.2rem
}

.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 {
    margin-left: 2.1333333333rem;
    font-family: var(--custom-font),var(--custom-serif)
}

.phone-code-list img,.phone-code-list span,.social-code-list img,.social-code-list span,.btn-select img,.btn-select span {
    display: inline-block;
    vertical-align: middle
}

.phone-code-list-group,.currency-code-list-group,.social-code-list-group {
    display: none;
    width: 100%;
    border-radius: 1.3333333333rem;
    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: 2.6666666667rem;
    background: var(--form-input-bg);
    color: var(--form-input-txt);
    font-size: 3.2rem
}

.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(--color-input-form-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: 4.2666666667rem;
    color: var(--wallet-otp-resend-txt);
    font-size: 3.2rem;
    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.3333333333rem;
    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: .8rem;
    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: 4.2666666667rem;
    transform: translate(-50%,-50%);
    border: .2666666667rem solid var(--register-affiliate);
    color: var(--register-affiliate);
    border-radius: .8rem;
    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: .8rem;
    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: 2.6666666667rem;
    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: 2.6666666667rem
}

.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 4.2666666667rem 4.2666666667rem;
    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
}

.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.3333333333rem 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: 4.2666666667rem;
    transform: translate(-50%,-50%);
    border-radius: 2.6666666667rem;
    background: var(--pop-register-success-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: 0 .5333333333rem .5333333333rem .2666666667rem #0000001a,0 1.0666666667rem 1.0666666667rem .2666666667rem #0000001a,0 2.1333333333rem 2.1333333333rem .2666666667rem #0000001a,0 4.2666666667rem 4.2666666667rem .2666666667rem #0000001a,0 8.5333333333rem 8.5333333333rem .2666666667rem #0000001a;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.register-success-wrap:before,.register-fail-wrap:before,.pop-biometric-success:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.register-success-cont,.register-fail-cont,.biometric-success-cont {
    display: inline-block;
    width: 98%;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle
}

.register-success-cont .top-inner h3,.register-fail-cont .top-inner h3,.biometric-success-cont .top-inner h3 {
    color: var(--pop-register-success-title);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 10.6666666667rem
}

.register-success-cont .top-inner h4,.register-fail-cont .top-inner h4,.biometric-success-cont .top-inner h4 {
    margin-bottom: 2.1333333333rem;
    color: var(--pop-register-success-subtitle);
    font-size: 4.8rem;
    line-height: 1.6;
    text-align: center;
    word-break: keep-all
}

.register-success-cont .top-inner p,.register-fail-cont .top-inner p,.biometric-success-cont .top-inner p {
    max-height: 42.6666666667rem;
    margin-bottom: 4.2666666667rem;
    padding: 1.0666666667rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--pop-register-success-txt);
    font-size: 4rem;
    line-height: 1.5;
    word-break: break-word
}

.register-success-cont .top-inner .link,.register-fail-cont .top-inner .link,.biometric-success-cont .top-inner .link {
    display: block;
    color: 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 {
    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 {
    margin-right: 2.6666666667rem
}

.register-success-cont .btn-cancel,.register-fail-cont .btn-cancel,.biometric-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: 0 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.3333333333rem;
    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.3333333333rem;
    height: 22.6666666667rem;
    transform: rotate(-45deg);
    background-color: var(--register-success-check-icon-clip)
}

.fail-checkmark {
    width: 24rem;
    height: 25.3333333333rem;
    margin: 0 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.3333333333rem;
    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.3333333333rem;
    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
    }
}

.promotion {
    width: 100%;
    height: auto
}

.promotion .promotion-main {
    padding: 0 2.1333333333rem
}

.promotion .prompt {
    margin: 4.2666666667rem 0;
    font-size: 3.4666666667rem;
    text-align: center
}

.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 ol,.content-style ul {
    margin: 2.6666666667rem 0
}

.content-style ol li,.content-style ul li {
    margin: 0 0 1.3333333333rem;
    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.3333333333rem 4rem;
    list-style-type: decimal;
    text-indent: 0
}

.content-style .table {
    width: 100%;
    margin-bottom: 4rem;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 2.6666666667rem;
    text-align: left;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.content-style table tbody {
    border-radius: 2.6666666667rem
}

.content-style table th,.content-style table td {
    width: 20%;
    padding: 2.1333333333rem 4.2666666667rem;
    border: .2666666667rem 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.3333333333rem;
    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: 2.6666666667rem;
    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
}

.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.2rem;
    white-space: nowrap
}

.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: 2.1333333333rem;
    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: .4rem;
    transform: translate(-50%,-50%);
    border-radius: .5333333333rem;
    background-color: var(--primary)
}

.content-style .button .toggle:after {
    width: .4rem;
    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:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    background: var(--btn-before-bg);
    width: 100%;
    height: 100%
}

.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.3333333333rem;
    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.3333333333rem 1.3333333333rem 0;
    padding: 0 2.1333333333rem;
    font-size: 2.6666666667rem;
    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.3333333333rem;
    height: 1.3333333333rem
}

.promotion-box__tag:before {
    top: -5px
}

.promotion-box__tag:after {
    display: none
}

html.is-mobile .promotion-box__tag:after {
    display: block;
    bottom: -5px;
    transform: rotateX(180deg)
}

.promotion-box .tag--free {
    background-color: 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: .5333333333rem;
    background: var(--promotion-info-bg);
    color: var(--promotion-info-txt);
    font-size: 3.2rem;
    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: 4.2666666667rem
}

.promo-code-form .input-group {
    height: 8rem;
    padding-bottom: 0;
    border-radius: 1.3333333333rem
}

.promo-code-form .input-group .promo-code-add-btn {
    position: absolute;
    text-align: center;
    line-height: 8rem;
    border-radius: 0 3px 3px 0;
    opacity: 1;
    background-color: var(--form-inputgroup-btn-bg);
    color: var(--form-inputgroup-btn-txt);
    inset: 0 0 0 auto;
    width: 12rem;
    height: 8rem
}

.promo-code-form .input-group input {
    height: 8rem;
    background-color: var(--form-inputgroup-input-bg);
    color: var(--form-inputgroup-input-txt);
    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.3333333333rem;
    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: 0 3px 3px 0;
    padding: 0 1.3333333333rem;
    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: .2666666667rem 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%
}

.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: 4.2666666667rem;
    color: var(--about-us-table-title);
    font-size: 4.2666666667rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5
}

.article-detail {
    margin-bottom: 6.4rem;
    line-height: 1.5
}

.article-detail-tile {
    margin-bottom: 2.1333333333rem;
    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: 6.4rem;
    color: var(--about-us-table-title-txt);
    font-size: 3.4666666667rem;
    line-height: 1.6
}

.article-detail-content .list-number,.article-detail-content .list-number-suffix-parentheses,.article-detail-content .list-lower-alpha,.article-detail-content .list-dot {
    width: inherit;
    margin-bottom: 5.3333333333rem;
    margin-left: 5.3333333333rem;
    color: var(--about-us-table-title-txt);
    font-size: 3.4666666667rem;
    line-height: 1.6
}

.article-detail-content .list-number>li,.article-detail-content .list-number-suffix-parentheses>li,.article-detail-content .list-lower-alpha>li,.article-detail-content .list-dot>li {
    display: list-item;
    padding-bottom: 1.3333333333rem;
    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.3333333333rem
}

.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: 4.2666666667rem
}

.article-detail-content .point:before {
    content: "\25b8";
    display: block;
    margin-right: 2.1333333333rem;
    margin-left: -4rem;
    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: 5.3333333333rem;
    border-collapse: separate;
    border: .2666666667rem solid var(--about-us-table-title-border);
    border-radius: 2.6666666667rem;
    background-color: var(--about-us-table-bg);
    font-size: 3.2rem;
    line-height: 1.4
}

.article-detail .table-title {
    padding: 0 2.6666666667rem;
    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: 2.1333333333rem 0 0
}

.article-detail .table-title:last-child {
    border-radius: 0 2.1333333333rem 0 0
}

.article-detail .table td {
    padding: 1.6rem;
    border-top: .2666666667rem solid var(--about-us-table-title-border);
    color: var(--color-text)
}

.article-detail .txt-center {
    text-align: center
}

.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: 1.8666666667rem 4rem 1.6rem;
    transform: translate(-50%);
    border: .2666666667rem solid var(--transfer-ani-default-tips-border);
    border-radius: 5.3333333333rem;
    background: var(--transfer-ani-default-tips-bg);
    box-shadow: 0 1.3333333333rem 2.6666666667rem 0 var(--transfer-ani-default-tips-bg),inset 0 .8rem 1.3333333333rem 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.3333333333rem;
    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.3333333333rem;
    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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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.3333333333rem 0 var(--transfer-ani-account-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.deposit .ani-box .after-amount {
    border: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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.3333333333rem 0 var(--transfer-ani-platform-secondary-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.withdrawal .ani-box .before-amount {
    border: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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.3333333333rem 0 var(--transfer-ani-platform-secondary-lighten-color);
    color: var(--transfer-ani-txt)
}

.content-wrap.withdrawal .ani-box .after-amount {
    border: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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 4.2666666667rem 4.2666666667rem #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: .2666666667rem 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.3333333333rem 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: .5333333333rem 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.3333333333rem;
    flex-direction: column;
    padding: 0 1.3333333333rem;
    transform: translateY(-50%);
    border-radius: 1.3333333333rem;
    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
    }
}

.third-party-login.content {
    height: 100vh;
    overflow: auto;
    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.member-content .button {
    margin: 2.6666666667rem 2.1333333333rem
}

.third-party-login {
    text-align: center
}

.third-party-login .quick-login-wrapper .logo-box {
    margin: 21.3333333333rem auto 9.3333333333rem
}

.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 {
    width: calc(100% - 9.0666666667rem);
    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(--third-party-register-btn-main-bg);
    box-shadow: inset 0 0 .8rem var(--third-party-register-btn-main-bg-inner-shadow);
    color: var(--third-party-register-btn-main-txt)
}

.third-party-login .btn-primary a {
    color: var(--third-party-register-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);
    box-shadow: inset 0 0 .8rem var(--third-party-register-btn-tertiary-bg-inner-shadow)
}

.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.3333333333rem;
    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 {
    margin-bottom: 0
}

.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: 4.2666666667rem;
    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: .2666666667rem solid var(--form-input-border);
    border-radius: 1.3333333333rem;
    background: var(--form-input-bg)
}

.third-party-login .puzzle-verification-box .title {
    position: relative;
    padding: 4.5333333333rem;
    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: 4.2666666667rem;
    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: 4.2666666667rem;
    border: .2666666667rem 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: .2666666667rem 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: .2666666667rem 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 .menu-box {
    margin-top: 0;
    background: transparent;
    font-family: var(--custom-font),var(--custom-serif);
    text-align: left;
    box-shadow: none;
    margin: 2.1333333333rem;
    padding: 2.1333333333rem
}

.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: 4.2666666667rem;
    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;
    padding: 2.1333333333rem;
    transform: unset;
    width: auto;
    box-shadow: none;
    margin: 2.1333333333rem
}

.third-party-login .register-success-cont .top-inner h4,.third-party-login .register-success-cont .top-inner h3 {
    font-family: var(--custom-font),var(--custom-serif);
    line-height: 1.2;
    font-size: 4.2666666667rem
}

.third-party-login .register-success-cont .top-inner h3 {
    color: var(--third-party-register-succes-title);
    font-weight: 700
}

.third-party-login .register-success-cont .top-inner h3+h4 {
    margin: 4.2666666667rem 0 0
}

.third-party-login .register-success-cont .top-inner h4 {
    color: var(--third-party-register-success-subtitle);
    font-size: 3.7333333333rem
}

.third-party-login .register-success-cont .top-inner p {
    margin-top: 4.2666666667rem;
    color: var(--third-party-register-success-txt);
    font-size: 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: 14.6666666667rem
}

.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: 13.3333333333rem
}

.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: 4.2666666667rem
}

.third-party-login .user-password-info label {
    padding-right: 1.3333333333rem;
    font-size: 3.2rem;
    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 4.2666666667rem;
    border-radius: 1.3333333333rem;
    border: .2666666667rem 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: .2666666667rem 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: .2666666667rem solid var(--color-danger)
}

.third-party-login .verification-wrap input[type=number]:focus,.third-party-login .verification-wrap input[type=number].input-focus {
    border: .2666666667rem 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: .2666666667rem 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.3333333333rem;
    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: 4.2666666667rem;
    transform: translate(-50%);
    border-radius: 1.3333333333rem;
    background: var(--mode-tips-bg);
    color: var(--mode-tips-txt);
    font-weight: 500;
    right: auto;
    box-shadow: 0 0 1.3333333333rem 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 .menu-box {
    margin-top: 0;
    background: var(--form-box-bg)
}

.third-party-login .input-group+.puzzle-verification-box {
    margin-top: 3.7333333333rem
}

.third-party-login .input-group+.login-info-box {
    margin-top: 1.3333333333rem
}

.third-party-login .input-group input.active+.delete-btn {
    border: 1px solid #2d3953;
    background: #2d3953
}

.third-party-login .input-group.error select {
    border: .2666666667rem 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: 4.2666666667rem;
    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: 4.2666666667rem;
    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: 2.1333333333rem;
    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 4.2666666667rem
}

.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 4.2666666667rem;
    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.3333333333rem;
    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.3333333333rem;
    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: 8rem;
    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: .2666666667rem solid var(--third-party-login-form-input-border);
    border-radius: 1.3333333333rem;
    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;
    position: fixed;
    top: 0rem;
    width: 100%;
    margin-bottom: 2.6666666667rem;
    background: var(--tab-header-bg)
}

.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.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: .8rem;
    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.3333333333rem 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-top: 5.3333333333rem;
    padding-bottom: 9.6rem;
    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.3333333333rem 2.6666666667rem 4rem
}

.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% - 4.2666666667rem);
    padding: 0 4.2666666667rem;
    bottom: 0;
    left: 0
}

.third-party-login .another-login-block.verification a {
    display: block;
    color: var(--third-party-verification-code-link);
    margin-top: 4.2666666667rem;
    text-decoration: none
}

.third-party-login .tips-info .title-box {
    padding: 0
}

.third-party-login .info-supporting label {
    color: #d8a845
}

.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 .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 .button {
    font-size: 3.7333333333rem;
    color: var(--third-party-login-btn-main-txt);
    width: 26.6666666667rem;
    height: 8rem;
    border-radius: .8rem;
    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);
    line-height: 1;
    border: 0;
    margin: 0
}

.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: 2.6666666667rem;
    background-color: var(--third-party-personal-item-tag-bg);
    padding: 1.0666666667rem 1.3333333333rem;
    border-radius: .8rem;
    margin-left: .8rem
}

.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: 1px solid var(--third-party-personal-item-status-border);
    font-size: 3.7333333333rem;
    width: 21.3333333333rem;
    height: 8rem;
    border-radius: .8rem;
    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: .2666666667rem 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.3333333333rem;
    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 .register-btn-wrap {
    background-color: var(--quick-register-entry-btn-wrap-bg);
    padding: 4.2666666667rem 3.2rem;
    display: flex;
    justify-content: space-between;
    gap: 1.3333333333rem
}

.third-party-login .register-btn-wrap .register-btn {
    width: 100%;
    text-decoration: none
}

.third-party-login .register-btn-wrap .register-icon-wrap {
    color: var(--quick-register-entry-btn-name);
    background: var(--quick-register-entry-btn-bg);
    border: .2666666667rem solid var(--quick-register-entry-btn-border);
    padding: 4rem 0;
    width: 100%;
    border-radius: 1.3333333333rem
}

.third-party-login .register-btn-wrap .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 .register-btn-wrap .register-type-name {
    padding-top: 2.6666666667rem;
    color: var(--quick-register-entry-btn-name);
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center
}

.third-party-login .register-btn-wrap .active {
    pointer-events: none
}

.third-party-login .register-btn-wrap .active .register-icon-wrap {
    border-color: transparent;
    box-shadow: 0 0 .8rem var(--quick-register-entry-btn-active-shadow) inset;
    background: var(--quick-register-entry-btn-active-bg)
}

.third-party-login .register-btn-wrap .active .register-icon {
    background-color: var(--quick-register-entry-btn-icon-active)
}

.third-party-login .register-btn-wrap .active .register-type-name {
    color: var(--quick-register-entry-btn-txt)
}

.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: 1.8666666667rem 2.9333333333rem;
    border-radius: .8rem;
    border: .2666666667rem 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: 3vw 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
    }
}

.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: 1px dotted 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: 4rem;
    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 .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: 4.2666666667rem
}

.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 label:before {
    display: none
}

.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 .menu-box {
    margin: 2.1333333333rem;
    padding: 2.6666666667rem 2.1333333333rem
}

.third-party-login .vip-area-group {
    padding: 0 4.2666666667rem;
    height: 14.4rem;
    background: var(--third-party-personal-membername-wrap-bg);
    border-radius: 1.3333333333rem
}

.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.3333333333rem;
    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;
    padding: 0 3.2rem
}

.third-party-login .list-group+.list-group {
    margin-top: 4.2666666667rem;
    padding-top: 4.2666666667rem;
    border-top: 1px solid var(--third-party-personal-item-icon-color-border)
}

.third-party-login .list-group .icon-block {
    display: block;
    height: 100%;
    margin-top: 1.8666666667rem
}

.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 .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-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: 8rem;
    border-radius: .8rem;
    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);
    border: 0;
    margin: 0;
    text-decoration: unset
}

.third-party-login .list-group .btn-google {
    overflow: hidden
}

.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 {
    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 {
    max-width: 100%;
    word-wrap: break-word
}

.third-party-login .list-info .left .title {
    color: var(--third-party-personal-item-title);
    font-size: 4.2666666667rem
}

.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.3333333333rem;
    border-radius: .8rem;
    margin-left: 1.3333333333rem
}

.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: 1px solid var(--third-party-personal-item-status-border);
    font-size: 3.7333333333rem;
    min-width: 25.3333333333rem;
    height: 8rem;
    border-radius: .8rem;
    line-height: 1;
    margin: 0;
    padding: 0 2.1333333333rem;
    color: var(--third-party-personal-item-status-txt)
}

.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: 2.1333333333rem;
    border: 1px 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.3333333333rem;
    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: 5px;
    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 4.2666666667rem
}

@keyframes zoomIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.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 .input-group .clear,.third-party-login .input-group .eyes {
    cursor: pointer;
    opacity: 0;
    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 .currency-list-area li {
    cursor: pointer
}

.third-party-login .currency-list-area li:hover {
    background-color: var(--third-party-register-form-select-item-hover)
}

.third-party-login .list-group .status.unconfirm-btn {
    cursor: pointer;
    opacity: 1
}

.third-party-login .list-group .status.unconfirm-btn:hover {
    opacity: .7
}

.info-top-type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 6.4rem 0 4.2666666667rem
}

.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: 40rem
}

.membername-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 8.5333333333rem 0 0
}

.membername-wrap .membername {
    width: 100%;
    font-size: 4.2666666667rem;
    color: var(--profile-id);
    margin-right: 1.3333333333rem
}

.membername-wrap .level {
    width: 100%;
    text-align: center;
    font-size: 3.2rem;
    padding: 1.3333333333rem;
    margin-left: 1.3333333333rem;
    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.3333333333rem 2.6666666667rem 6.6666666667rem
}

.player-top .credit-card {
    margin: 4.2666666667rem 4.2666666667rem 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: 92rem;
    min-height: 51.2rem;
    margin: 0 auto 6.6666666667rem;
    padding: 6.4rem;
    border-radius: 4rem;
    background: var(--wallet-bank-card-bg);
    box-shadow: 0 .5333333333rem .8rem var(--wallet-bank-card-shadow);
    font-size: 3.2rem;
    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 .bank-name p {
    font-size: 3.7333333333rem;
    margin-bottom: .8rem;
    line-height: 1.1
}

.credit-card .bank-branch p {
    font-size: 3.2rem;
    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: 3.2rem;
    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;
    transform: all .3s
}

.credit-card .bank-info-copy p {
    color: var(--wallet-bank-card-txt);
    word-break: break-all;
    text-shadow: 0 0 2px 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: 15px;
    height: 15px;
    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 15px
}

.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.3333333333rem 2.6666666667rem;
    border-radius: .8rem;
    opacity: 0;
    background: var(--wallet-bank-card-copy-tooltips-bg);
    box-shadow: 0 0 .5333333333rem #99999980;
    font-size: 3.2rem;
    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: 4.2666666667rem
}

.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-step1 .menu-box {
    margin: 4.2666666667rem
}

.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
}

.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;
    transition: all .3s;
    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: .8rem;
    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: 4rem 0;
    transition: all .3s;
    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 4rem;
    color: var(--tab-line-txt);
    font-size: 3.7333333333rem;
    text-align: center
}

.tab-btn-page .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.3333333333rem;
    transform: translate(90%,-100%);
    border-radius: 2.6666666667rem;
    background: var(--tab-line-badge-bg);
    color: var(--tab-line-badge-txt);
    font-size: 3.2rem
}

.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 4.2666666667rem 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;
    color: #fff
}

.tab-btn-bar:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 120%;
    transform: translateY(-50%);
    border-radius: 2.1333333333rem;
    background: var(--tab-btn-bar-bg)
}

.tab-btn-bar .line {
    position: absolute;
    top: 3%;
    left: 0;
    padding: 0 1.3333333333rem;
    transition: all .3s
}

.tab-btn-bar .line:after {
    content: "";
    display: block;
    width: 100%;
    height: 8rem;
    border-radius: 2.1333333333rem;
    background: var(--tab-btn-bg-active);
    box-shadow: 0 0 .5333333333rem .2666666667rem color-mix(in srgb,var(--tab-btn-bar-line-shadow),transparent 50%)
}

.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.3333333333rem
}

.tab-btn-bar .btn .text {
    display: inline-block;
    position: relative;
    padding: 1.6rem 0;
    color: var(--tab-btn-txt);
    font-size: 3.4666666667rem;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 .5333333333rem 1.0666666667rem color-mix(in srgb,var(--tab-btn-txt-shadow),transparent 60%)
}

.tab-btn-bar .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.3333333333rem;
    transform: translate(90%,-100%);
    border-radius: 2.6666666667rem;
    background-color: #ffea00;
    color: #e41a43;
    font-size: 2.6666666667rem
}

.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 {
    text-shadow: 0 .2666666667rem .8rem color-mix(in srgb,var(--btn-main-txt-shadow-disabled),transparent 50%);
    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 {
    text-shadow: 0 .2666666667rem .8rem color-mix(in srgb,var(--btn-main-txt-shadow-disabled),transparent 50%);
    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.3333333333rem 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: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    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;
    width: calc(100% - 8.5333333333rem);
    height: .2666666667rem;
    margin: 0 4.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
}

.tips-info .title-box {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 4.2666666667rem
}

.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.3333333333rem;
    color: var(--tips-info-title);
    font-size: 3.2rem;
    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.2rem;
    line-height: 1.5;
    text-align: left
}

.tips-info li {
    display: list-item;
    margin: 4.2666666667rem
}

.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.3333333333rem;
    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: .2666666667rem 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: .2666666667rem 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%
}

.list-loading {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    margin: auto;
    padding: 2.6666666667rem 0 5.3333333333rem
}

.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)
    }
}

.accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4.2666666667rem 4.2666666667rem 0;
    overflow: hidden;
    border-radius: 2.6666666667rem;
    background: var(--accordion-bg)
}

.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%;
    padding: 4.2666666667rem;
    background: var(--accordion-title-bg);
    color: var(--accordion-title);
    font-size: 4rem;
    text-align: left
}

.accordion-wrap .a-title:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667rem;
    width: calc(100% - 8.5333333333rem);
    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 2.6666666667rem
}

.accordion-wrap .a-title .a-text {
    flex-grow: 1;
    font-weight: 500
}

.accordion-wrap .a-title .a-icon {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 4.2666666667rem;
    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: 3.7333333333rem;
    height: 3.7333333333rem;
    transition: all .3s;
    background-color: var(--accordion-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%
}

.accordion-wrap .a-content {
    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 ol.a-list {
    padding: 4.2666666667rem 4.2666666667rem 4.2666666667rem 8.5333333333rem
}

.accordion-wrap .a-content .a-list {
    padding: 4.2666666667rem 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: 5.3333333333rem;
    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: 4.2666666667rem 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
}

.ticket-wrap {
    display: block;
    width: inherit;
    padding: 4.2666666667rem
}

.ticket {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: var(--turnover-card-title)
}

.ticket+.ticket {
    margin-top: 4.2666666667rem
}

.ticket.completed .ticket-deco:before,.ticket.completed .ticket-deco:after {
    background-color: var(--content-bg)
}

.ticket.completed .ticket-inner {
    background-color: var(--turnover-card-bg-completed)
}

.ticket.completed .ticket-inner-left>div+div {
    margin-top: 1.3333333333rem
}

.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);
    line-height: 2
}

.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: 10%;
    left: 75%;
    width: .2666666667rem;
    height: 80%;
    background-image: linear-gradient(to bottom,var(--accordion-dot) 0%,var(--accordion-dot) 10%,transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667rem 2.6666666667rem
}

.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-banner .deco {
    display: inline-block;
    position: relative;
    width: 100%;
    height: .5333333333rem;
    margin: 2.6666666667rem 0;
    background-color: var(--color-ticket-deco-border)
}

.ticket .ticket-banner .deco:before,.ticket .ticket-banner .deco:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 1.6rem;
    height: 1.6rem;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--color-ticket-deco-border)
}

.ticket .ticket-banner .deco:before {
    left: 0
}

.ticket .ticket-banner .deco:after {
    right: 0
}

.ticket .ticket-inner {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 100%;
    border-radius: 2.6666666667rem;
    background: var(--turnover-card-bg)
}

.ticket .ticket-inner-left {
    position: relative;
    width: 75%;
    padding: 4.2666666667rem;
    border-right-width: .2666666667rem
}

.ticket .ticket-inner-left>div+div {
    margin-top: 1.3333333333rem
}

.ticket .ticket-inner-right {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    width: 25%;
    padding: 0 1.3333333333rem
}

.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: break-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: 2.1333333333rem;
    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: 2.6666666667rem
}

.ticket .detail .detail-btn {
    display: flex;
    margin: auto 1.3333333333rem;
    padding: .5333333333rem 1.0666666667rem;
    border: .2666666667rem solid var(--turnover-card-detail);
    border-radius: 1.3333333333rem
}

.ticket .detail .detail-btn a {
    color: var(--turnover-card-detail);
    font-size: 2.6666666667rem;
    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.3333333333rem 0 0;
    font-size: 3.7333333333rem
}

.ticket .discount .amount {
    font-size: 5.8666666667rem;
    font-weight: 500
}

.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: 1.0666666667rem;
    color: var(--transaction-record-status-txt);
    font-size: 3.2rem;
    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 {
    padding: 2.1333333333rem;
    background-color: var(--vip-points-table-head-bg);
    color: var(--vip-points-table-head-txt);
    font-size: 3.2rem;
    font-weight: 500
}

.list-title .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: .2666666667rem dotted 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: 2.1333333333rem;
    background: var(--vip-points-table-body-bg)
}

.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: 2.9333333333rem
}

.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 2.1333333333rem;
    border-right: .2666666667rem dotted var(--vip-points-table-body-border)
}

.no-detail-info .list-arrow {
    opacity: 0
}

.list-arrow {
    flex: 0 1 5.3333333333rem;
    width: 3.2rem;
    height: 3.2rem;
    transform: rotate(180deg);
    background: var(--pop-search-back-icon-color);
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 50%
}

.date-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 5.3333333333rem;
    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.2rem
}

.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: .8rem 1.3333333333rem;
    border-radius: 1.3333333333rem;
    font-size: 2.6666666667rem
}

.time-zone {
    margin-left: 2.1333333333rem;
    padding: 0 1.0666666667rem;
    border: .2666666667rem solid var(--vip-points-table-head-zone);
    border-radius: 1.3333333333rem;
    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)
}

.vip-list .list-content .list-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.vip-list .vip-time {
    flex: 0 0 30%;
    text-align: center
}

.vip-list .vip-point {
    flex: 0 0 23%
}

.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: .2666666667rem solid var(--transaction-record-table-body-zone);
    color: var(--transaction-record-table-body-zone)
}

.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 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 2.6666666667rem;
    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: 5%;
    right: 5%;
    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: 4.2666666667rem;
    padding: 4.2666666667rem 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.2rem
}

.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: 2.1333333333rem 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: .2666666667rem solid var(--mail-date-zone);
    color: var(--mail-date-zone)
}

.inbox-list .message-item {
    align-items: center;
    padding: 0 4.2666666667rem;
    border-bottom: .2666666667rem solid var(--mail-list-border)
}

@keyframes choseBtn-ani {
    0% {
        transform: translate(0);
        transform-origin: 50px 50px
    }

    to {
        transform: translate(100%);
        transform-origin: 50px 50px
    }
}

.betting-record-list .platform {
    flex: 0 0 20%
}

.betting-record-list .type {
    flex: 0 0 28%
}

.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-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: .2666666667rem 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.3333333333rem
}

.content-betting-record .time-zone {
    border: .2666666667rem 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.3333333333rem;
    flex-direction: column;
    min-height: 0;
    max-height: 0;
    padding: 0 .8rem;
    overflow: hidden;
    transition: all ease-in-out .3s;
    border-radius: .8rem;
    background: var(--betting-record-tooltips-bg);
    color: var(--betting-record-tooltips-txt);
    font-size: 2.6666666667rem
}

.list-bar .tip-box.active {
    min-height: 5.3333333333rem;
    max-height: 53.3333333333rem;
    padding: .8rem;
    border: .2666666667rem solid var(--betting-record-tooltips-border)
}

.list-bar .tip-box span {
    display: flex;
    white-space: nowrap;
    padding: 1.3333333333rem 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.3333333333rem 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;
    padding: 2.6666666667rem 0;
    background-color: var(--betting-details-table-head-bg)
}

.betting-record-sum .item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    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.6666666667rem
}

.record-item.transaction-record-list .item {
    padding: 2.6666666667rem
}

.record-item.transaction-record-list .status {
    padding: 2.6666666667rem 1.3333333333rem
}

.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: .8rem
}

.item-status .tags {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    padding: .8rem 1.3333333333rem;
    transform: translate(-50%,-50%);
    border-radius: .8rem;
    color: var(--color-record-item-text);
    font-size: 2.6666666667rem;
    font-weight: 500
}

.deposit-acc-info-box {
    margin: 4rem 0 0;
    padding: 4rem;
    border-radius: 2.1333333333rem;
    background: var(--wallet-account-info-bg);
    font-size: 3.2rem
}

.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.3333333333rem;
    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.3333333333rem;
    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.3333333333rem 2.6666666667rem;
    border-radius: .8rem;
    opacity: 0;
    background: var(--wallet-bank-card-copy-tooltips-bg);
    box-shadow: 0 0 .5333333333rem #99999980;
    font-size: 3.2rem;
    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: .2666666667rem dashed var(--wallet-maintain-border);
    border-radius: 2.6666666667rem;
    background: var(--wallet-maintain-bg)
}

.under-maintain .maintain-tag {
    padding: .8rem 1.3333333333rem;
    border-radius: .5333333333rem;
    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: 2.6666666667rem;
    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 4.2666666667rem;
    border: 0;
    border-radius: 2.6666666667rem;
    outline: none;
    background-color: var(--form-input-bg);
    color: var(--form-input-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 3.2rem;
    appearance: none
}

.option-group select option {
    font-size: 3.2rem
}

.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: 4.2666666667rem;
    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.3333333333rem;
    border-radius: .5333333333rem;
    background: var(--wallet-title-border);
    vertical-align: middle
}

.option-group.select-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 4.2666666667rem;
    padding: 2.1333333333rem 0 2.1333333333rem 4.2666666667rem;
    border-radius: 2.6666666667rem;
    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: .8rem
}

.option-wrap:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 4.2666666667rem;
    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
}

@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
    }
}

.accordion-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 13.8666666667rem;
    margin: 4.2666666667rem;
    transition: all .4s ease-in-out;
    border-radius: 2.6666666667rem;
    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.8666666667rem;
    padding: 4.2666666667rem;
    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: 4.2666666667rem;
    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: 70%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70%
}

.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;
    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:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: calc(100% - 8.5333333333rem);
    height: .2666666667rem;
    margin: 0 4.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 {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    margin: 0 4.2666666667rem;
    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.3333333333rem;
    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: 2.9333333333rem
}

.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: 2.4rem 5.3333333333rem;
    border-radius: 2.6666666667rem;
    background: var(--wallet-pending-transactions-btn-border);
    color: var(--wallet-pending-transactions-btn-txt);
    font-size: 3.2rem
}

.ac-list .btn-revert: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(--wallet-pending-transactions-btn-bg)
}

.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: -moz-fit-content;
    width: fit-content;
    padding: 0 4.2666666667rem 4.2666666667rem;
    margin-bottom: 4.2666666667rem;
    border-bottom: .2666666667rem solid var(--transaction-pop-processing-cont-border-color)
}

.withdrawal-processing-pop .state,.deposit-success-pop .state {
    position: relative;
    width: 14.4rem;
    height: 14.4rem;
    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.3333333333rem;
    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.2rem;
    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.3333333333rem;
    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: .4rem;
    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.3333333333rem solid var(--wallet-free-tag-bg)
}

.main-wallet-info {
    width: 100%;
    padding: 4.2666666667rem;
    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.3333333333rem 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.2rem;
    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.3333333333rem
}

.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.2rem;
    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%
}

.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: .8rem;
    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
}

.account-box {
    flex: 0 0 32%;
    margin: 0 2% 1.6rem 0;
    padding: 1.8666666667rem;
    border: .2666666667rem solid var(--color-pop-btn-border);
    border-radius: .8rem;
    background: var(--color-pop-select-bg);
    font-size: 3.2rem;
    text-align: center
}

.account-box:nth-child(3n) {
    margin-right: 0
}

.account-box h6 {
    margin-bottom: 2.1333333333rem;
    color: var(--primary);
    font-weight: 700
}

.account-box>p {
    color: var(--color-title)
}

.account-box div img {
    margin-right: 1.3333333333rem;
    vertical-align: middle
}

.account-box div span {
    color: #999
}

.account-box.loading img {
    animation: reneWallet 2s linear infinite
}

.account-box.repair {
    background: var(--color-pop-repair)
}

.account-box.repair h6 {
    color: #888
}

.secondary-money-info {
    min-width: 84%;
    margin-top: 2.1333333333rem;
    padding: 1.0666666667rem 4.2666666667rem;
    float: right;
    border: .2666666667rem solid var(--pop-transfer-bonus-border);
    border-radius: 8rem;
    background: var(--pop-transfer-bonus-bg);
    color: var(--pop-transfer-bonus-txt);
    font-size: 3.2rem;
    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: 4.2666666667rem
}

.recommend-friends-box {
    width: auto;
    height: auto;
    margin: 4.2666666667rem;
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--vip-detail-box-bg);
    box-shadow: 0 0 1.6rem var(--vip-detail-box-bg-shadow),inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 80%)
}

.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: 2.1333333333rem;
    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: .2666666667rem;
    margin: 4.2666666667rem 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
}

.code-box p {
    width: 100%;
    padding-bottom: 2.6666666667rem;
    line-height: 1.3;
    font-size: 3.2rem;
    color: var(--recommend-txt)
}

.code-box .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex: 2;
    border: .2666666667rem solid var(--recommend-input-border);
    border-radius: 2.6666666667rem;
    overflow: hidden
}

.code-box .code span {
    display: block;
    color: var(--vip-detail-txt);
    letter-spacing: 2px;
    padding: 1.3333333333rem 3.2rem;
    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.3333333333rem 2.6666666667rem;
    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: 2.6666666667rem;
    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: 2.6666666667rem;
    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: 2.1333333333rem;
    background: var(--recommend-border);
    vertical-align: sub
}

.condition-box .item {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin: 0 0 2.1333333333rem;
    font-size: 3.2rem;
    font-weight: 500
}

.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: 2.6666666667rem;
    background-color: var(--recommend-condition-bg);
    padding: 0 4.2666666667rem
}

.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.3333333333rem;
    text-align: center
}

.status-box .status.accept {
    position: relative
}

.status-box .status.accept:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .2666666667rem;
    height: 100%;
    background-image: linear-gradient(to bottom,var(--recommend-dot) 0%,var(--recommend-dot) 10%,transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667rem 2.6666666667rem
}

.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: 1.8666666667rem;
    font-weight: 600
}

.status-box .status .text {
    color: var(--vip-detail-txt);
    font-size: 3.2rem;
    font-weight: 500
}

.terms {
    text-align: center
}

.terms .terms-link {
    display: inline-block;
    margin: auto;
    color: var(--recommend-terms-link);
    font-size: 2.9333333333rem;
    font-weight: 500;
    transition: all .3s;
    text-decoration: underline
}

.date-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4.2666666667rem
}

.date-bar .text {
    display: block;
    font-size: 3.2rem;
    padding: 0 .8rem;
    color: var(--color-rf-statusbox-input-date-text)
}

.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.3333333333rem;
    padding: 0 1.3333333333rem;
    margin-left: 1.3333333333rem;
    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 4.2666666667rem
}

.list-status .title {
    color: var(--vip-detail-card-txt);
    font-size: 3.2rem
}

.list-status img {
    width: 4.2666666667rem;
    margin: 0 1.3333333333rem
}

.list-status .text {
    font-size: 2.9333333333rem
}

.list-status div {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.list-status .pending .text {
    color: var(--color-rf-status-pending-text)
}

.list-status .expired {
    margin-left: 2.6666666667rem
}

.list-status .expired .text {
    color: var(--color-rf-status-expired-text)
}

.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.3333333333rem;
    height: 1.3333333333rem;
    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(--state-expired)
}

.complete-time img {
    width: 4.8rem
}

.complete-time .text {
    margin-left: 1.3333333333rem;
    flex: 1 1 auto;
    text-align: left
}

.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
}

.bonus-wallet-wrap {
    display: block;
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--bonuswallet-card-bg);
    overflow: hidden;
    box-shadow: 0 .5333333333rem .5333333333rem #281a700d
}

.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.3333333333rem 0 0;
    color: var(--pop-bonuswallet-card-date);
    font-size: 2.6666666667rem
}

.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.3333333333rem .8rem 0;
    padding: .5333333333rem 1.0666666667rem;
    border: 1px solid var(--bonuswallet-zone);
    border-radius: 1.3333333333rem;
    color: var(--bonuswallet-zone);
    font-size: 2.6666666667rem
}

.bonus-wallet .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8rem 0;
    padding: .5333333333rem 1.3333333333rem;
    border: .2666666667rem solid var(--pop-bonuswallet-card-detail);
    border-radius: 1.3333333333rem;
    font-weight: 500
}

.bonus-wallet .card-detail .detail-btn a {
    color: var(--pop-bonuswallet-card-detail);
    font-size: 2.6666666667rem;
    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.3333333333rem 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.2rem
}

.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: 4.2666666667rem 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 4.2666666667rem 4.2666666667rem;
    border-radius: 0 0 2.6666666667rem 2.6666666667rem;
    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.3333333333rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
    color: var(--color-walletcard-txt);
    font-size: 3.4666666667rem;
    line-height: 7.4666666667rem;
    text-align: center
}

.bonus-card-down .card-down-inner-right .btn--start {
    color: var(--color-walletcard-start-txt);
    background: var(--color-walletcard-start-btn)
}

.bonus-card-down .card-down-inner-right .btn--cancel {
    color: var(--color-walletcard-cancel-txt);
    background: var(--color-walletcard-cancel-btn)
}

.bonus-card-down .card-down-inner-right .btn--receive {
    color: var(--color-walletcard-receive-txt);
    background: var(--color-walletcard-receive-btn)
}

.bonus-card-down .card-down-inner-right .btn--disabled {
    color: var(--color-walletcard-disabled-txt);
    background: var(--color-walletcard-disabled-btn);
    border: 1px dotted var(--color-walletcard-disabled-border);
    box-shadow: 0 0 #00000040
}

.bonus-card-down .card-down-inner-right .btn--working {
    color: var(--color-walletcard-working-txt);
    background: var(--color-walletcard-working-btn);
    border: 1px dotted var(--color-walletcard-working-border)
}

.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(4.2666666667rem 4.2666666667rem 4.2666666667rem 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.2rem;
    padding: 1.3333333333rem 0
}

.bonus-card-down .card-down-inner .bonus-left .currency {
    padding: 0 .8rem 0 1.8666666667rem;
    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.2rem
}

.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: .5333333333rem solid #8d8d8d
}

.pop-wrap3 .title-wrap .btn-back:hover div:after {
    transform: translate(-50%)
}

.pop-wrap3 .title-wrap .title {
    margin-bottom: 4.2666666667rem;
    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.2rem
}

.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: 4.2666666667rem
}

.pop-wrap3 .inner-wrap .inner-left {
    transform: translate(0)
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    height: auto;
    padding: 4.2666666667rem
}

.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: 4.2666666667rem;
    color: var(--pop-bonuswallet-tips);
    font-size: 3.2rem;
    text-align: center
}

.reel-box {
    display: block;
    margin-bottom: 4.2666666667rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.lvup-select-wrap {
    display: grid;
    grid-gap: 4.2666666667rem;
    grid-template-columns: repeat(2,1fr)
}

.lvup-select-wrap .event {
    display: block;
    position: relative;
    width: 100%;
    height: 12rem;
    overflow: hidden;
    border-radius: 2.6666666667rem;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.lvup-select-wrap .event-click {
    border: .5333333333rem 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: 4.2666666667rem;
    padding: 4.2666666667rem;
    overflow-y: scroll;
    border-radius: 2.6666666667rem;
    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.2rem
}

.lvup-event-detail .event-date {
    margin-top: 1.3333333333rem;
    color: var(--pop-bonuswallet-lvup-tips-txt);
    font-size: 3.2rem;
    font-weight: 500
}

.lvup-event-detail .event-date:before {
    content: "";
    display: inline-block;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 1.3333333333rem;
    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.3333333333rem;
    background: var(--pop-bonuswallet-card-bg);
    box-shadow: 0 .8rem 1.3333333333rem #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: 2.6666666667rem
}

.bonus-event-left .card-detail .detail-btn {
    display: flex;
    margin-left: 1.0666666667rem;
    padding: 0 1.0666666667rem;
    border: .2666666667rem solid var(--pop-bonuswallet-card-detail);
    border-radius: 1.3333333333rem;
    font-weight: 500
}

.bonus-event-left .card-detail .detail-btn a {
    color: var(--pop-bonuswallet-card-detail);
    font-size: 2.6666666667rem;
    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.3333333333rem 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.3333333333rem;
    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)
}

.player-vip-detailed-menu {
    padding: 4.2666666667rem 4.2666666667rem 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.3333333333rem 2.6666666667rem;
    transform: translateY(-1.0666666667rem);
    transition: .3s;
    border-radius: 2.6666666667rem 50% 2.6666666667rem 2.6666666667rem;
    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: 4.2666666667rem;
    overflow: hidden;
    border-radius: 2.6666666667rem;
    background: var(--vip-detail-box-bg);
    box-shadow: 0 0 1.6rem var(--vip-detail-box-bg-shadow)
}

.player-vip-detailed-box .title {
    margin: 4.2666666667rem 4.2666666667rem 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: 2.1333333333rem;
    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: 4.2666666667rem;
    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: 4.2666666667rem;
    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: 2.6666666667rem;
    background: var(--vip-detail-card-bg);
    box-shadow: 0 .8rem 1.3333333333rem 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: 4.2666666667rem
}

.terms .terms-link {
    margin-bottom: 2.6666666667rem;
    color: var(--vip-detail-link)
}

.terms p {
    color: var(--vip-detail-link);
    font-size: 3.2rem;
    line-height: 5.3333333333rem
}

.vip-list {
    margin-top: 2.1333333333rem
}

.vip-list .list-title .list-field {
    line-height: 1.5
}

.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 35%
}

.vip-list .vip-time {
    flex: 0 0 33%;
    text-align: center
}

.vip-list .vip-no {
    flex: 1 0 12%
}

.vip-list .vip-point {
    flex: 0 0 20%
}

.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: 2.6666666667rem;
    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.3333333333rem;
    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.3333333333rem;
    left: 1.3333333333rem;
    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.3333333333rem;
    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)
    }
}

#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: 4rem;
    border-radius: 5.3333333333rem;
    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.3333333333rem -.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.3333333333rem -.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: 5.3333333333rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 5px -3px var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.vip-content .convert-content .convert-ani .text {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--vip-ani-title);
    font-size: 4.2666666667rem
}

.player-vip-box {
    position: relative;
    margin: 2.1333333333rem 4.2666666667rem;
    border-radius: 5.3333333333rem;
    box-shadow: none
}

.player-vip-box.total {
    padding: 2.6666666667rem
}

.player-vip-box .title {
    position: relative;
    color: var(--vip-total-ttile);
    font-size: 3.2rem
}

.player-vip-box .title h2 {
    color: var(--vip-convert-title);
    font-size: 4.2666666667rem;
    font-weight: 500
}

.player-vip-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4.2666666667rem;
    margin-right: 1.3333333333rem;
    border-radius: 2.1333333333rem;
    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: 2.9333333333rem;
    line-height: 5.3333333333rem
}

.cleader {
    position: absolute;
    right: 0;
    bottom: 2.6666666667rem;
    width: 16rem;
    height: 10.6666666667rem;
    border-radius: 5.3333333333rem;
    background: var(--vip-total-record-btn-bg)
}

.cleader span {
    display: inline-block;
    width: 100%;
    height: 10.6666666667rem;
    background: var(--vip-total-record-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%
}

.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: 5.3333333333rem;
    background: var(--vip-card-bg);
    box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.card-top .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333rem;
    margin-bottom: 0;
    border-radius: 1.3333333333rem;
    background: var(--vip-card-progress-bar-bg);
    box-shadow: inset 0 0 .2666666667rem 0 var(--vip-card-shadow)
}

.card-top .bar-inner {
    animation: progress-animation 5s linear infinite;
    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 {
    right: -.5333333333rem;
    width: 1.6rem;
    height: 1.6rem;
    box-shadow: 0 0 2.6666666667rem .2666666667rem var(--vip-card-shadow)
}

.card-top p {
    margin-bottom: 2.1333333333rem;
    transform: scale(.9);
    transform-origin: left;
    color: var(--vip-card-tips);
    font-size: 3.2rem;
    line-height: 9.3333333333rem;
    text-decoration: none
}

.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
}

.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.3333333333rem;
    font-size: 2.6666666667rem;
    font-weight: 700
}

.lv-text h2 {
    font-size: 4.8rem;
    font-weight: 700;
    text-transform: uppercase
}

.lv-history {
    position: absolute;
    right: 0;
    width: 16rem;
    height: 10.6666666667rem;
    border-radius: 5.3333333333rem;
    background: var(--vip-card-history-btn-bg)
}

.lv-history span {
    display: inline-block;
    width: 100%;
    height: 10.6666666667rem;
    background: var(--vip-card-history-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%
}

.lv-history a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16rem;
    height: 10.6666666667rem
}

.next-lv-totem {
    width: 7.4666666667rem;
    height: 7.4666666667rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.next-lv-totem {
    width: 7.4666666667rem;
    height: 7.4666666667rem;
    margin-left: 4rem
}

.card-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    flex-flow: row-reverse nowrap;
    align-items: center;
    width: 100%;
    height: 10.6666666667rem;
    padding: 0 4rem;
    border-radius: 0 0 5.3333333333rem 5.3333333333rem;
    background: var(--vip-card-bottom-bg)
}

.card-bottom a {
    color: var(--vip-card-bottom-more-txt);
    font-size: 3.2rem;
    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: 0 0 4rem;
    padding-left: 2.6666666667rem
}

.cash-points {
    display: inline-flex;
    width: 100%;
    padding: 2.6666666667rem;
    border-radius: 5.3333333333rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.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.3333333333rem 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.3333333333rem
}

.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.3333333333rem;
    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: 1px 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.2rem
}

.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: 5.3333333333rem;
    height: .8rem;
    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 progress-animation {
    0% {
        background-position: 100%
    }

    50% {
        background-position: 0
    }

    to {
        background-position: 100%
    }
}

@keyframes shake-horizontal {
    0%,to {
        transform: translate(0)
    }

    10%,30%,50%,70% {
        transform: translate(-2px)
    }

    20%,40%,60% {
        transform: translate(2px)
    }

    80% {
        transform: translate(1px)
    }

    90% {
        transform: translate(-1px)
    }
}

@keyframes shiny {
    0% {
        left: -100%
    }

    to {
        left: 150%
    }
}

@keyframes move-chevron {
    25% {
        opacity: 1
    }

    33.3% {
        transform: translateY(1.6rem);
        opacity: 1
    }

    66.6% {
        transform: translateY(3.2rem);
        opacity: 1
    }

    to {
        transform: translateY(4.8rem) scale(.5);
        opacity: 0
    }
}

.acquired-content {
    padding: 0 4rem
}

.vip-year {
    margin: 2.6666666667rem 0;
    color: var(--vip-history-year);
    font-size: 4.8rem;
    font-weight: 700
}

.form-vip-history {
    position: relative;
    margin: 0 0 4.2666666667rem 16rem;
    padding: 5.3333333333rem;
    border-radius: 5.3333333333rem;
    background: var(--vip-cash-point-bg);
    box-shadow: inset 0 0 1.3333333333rem -.8rem var(--vip-card-shadow);
    color: var(--vip-card-title);
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.form-vip-history:before {
    content: "";
    display: block;
    position: absolute;
    top: 10.1333333333rem;
    left: -4.2666666667rem;
    width: .5333333333rem;
    height: 29.3333333333rem;
    background: var(--vip-history-month)
}

.form-vip-history:after {
    content: "";
    display: block;
    position: absolute;
    top: 5.0666666667rem;
    left: -5.3333333333rem;
    width: 2.1333333333rem;
    height: 2.1333333333rem;
    border-radius: 50%;
    border: 2px solid var(--vip-history-month)
}

.form-vip-history:last-child:before {
    height: 21.3333333333rem
}

.form-vip-history:lang(vn):after,.form-vip-history:lang(bn):after,.form-vip-history:lang(tl):after {
    display: none
}

.form-vip-history:lang(vn):before,.form-vip-history:lang(bn):before,.form-vip-history:lang(tl):before {
    top: 11.2rem;
    height: 26.6666666667rem
}

.form-vip-history .vip-month {
    position: absolute;
    top: 4.2666666667rem;
    left: -16rem;
    color: var(--vip-history-year);
    font-weight: 500
}

.form-vip-history .vip-month:lang(tl) {
    width: 16rem;
    text-align: right;
    font-size: 3.2rem;
    left: 0;
    top: 5.3333333333rem;
    transform: translate(-110%)
}

.form-vip-history .vip-level {
    margin-bottom: 2.6666666667rem;
    font-weight: 700
}

.form-vip-history .vip-level .text {
    margin-bottom: .5333333333rem;
    font-size: 2.6666666667rem
}

.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.3333333333rem;
    font-size: 3.2rem
}

.form-vip-history .vip-acquired .acquired {
    color: var(--vip-card-title);
    font-size: 3.7333333333rem
}

.vip-level-icon {
    position: absolute;
    z-index: 1;
    top: 5.3333333333rem;
    right: 5.3333333333rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.playerform-content .button {
    height: 12rem;
    margin: 4.2666666667rem;
    line-height: 12rem
}

.playerform-content .verify-tips {
    margin-bottom: 4rem
}

.drop-down-menu {
    margin-bottom: 2.6666666667rem;
    overflow: hidden;
    border: .2666666667rem solid var(--accordion-add-bank-card-title-bg);
    border-radius: 2.6666666667rem;
    background: var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu:last-child {
    margin-bottom: 0
}

.drop-down-menu.under-review {
    border: .2666666667rem solid var(--accordion-review);
    background: var(--accordion-review)
}

.drop-down-menu.success {
    border: .2666666667rem solid var(--accordion-success);
    background: var(--accordion-success)
}

.drop-down-menu.failed {
    border: .2666666667rem solid var(--accordion-failed);
    background: var(--accordion-failed)
}

.drop-down-menu.bankcard {
    border: .2666666667rem solid var(--accordion-add-bank-card-title-bg)
}

.drop-down-menu.bankcard .drop-down-menu-btn.add-bank-card {
    background-color: 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 .phone-area-code {
    flex: 0 0 34%
}

.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: 11.7333333333rem;
    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 .icon {
    display: flex;
    flex: none;
    width: 6.4rem;
    height: 6.4rem;
    margin: 0 4rem 0 1.3333333333rem
}

.drop-down-menu-btn .icon img {
    display: block;
    width: 100%;
    margin: auto
}

.drop-down-menu-btn .text {
    overflow: hidden;
    font-size: 3.2rem;
    line-height: 11.7333333333rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.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
}

.voucher-card-wrap {
    display: block;
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--bonuswallet-card-bg);
    overflow: hidden
}

.voucher-card-top {
    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%)
}

.voucher-card-top__title {
    position: relative;
    overflow: hidden;
    color: var(--bonuswallet-title);
    font-size: 3.7333333333rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.voucher-card-top__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
}

.voucher-card-top__label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    right: 5.3333333333rem;
    width: 8.5333333333rem;
    height: 9.6rem;
    border-radius: 0 0 1.3333333333rem 1.3333333333rem;
    background: var(--pop-bonuswallet-card-start-btn);
    font-size: 2.9333333333rem
}

.voucher-card-top__label .icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 60%;
    background-size: 50%
}

.voucher-card-top .card-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 2.6666666667rem;
    border-radius: 1.0666666667rem
}

.voucher-card-top .card-content__left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21.8666666667rem;
    height: 21.8666666667rem;
    margin-right: 4rem;
    overflow: hidden;
    border-radius: 1.0666666667rem
}

.voucher-card-top .card-content__left .pic {
    width: 100%;
    height: auto
}

.voucher-card-top .card-content__right {
    display: flex;
    position: relative;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 70%
}

.voucher-card-top .card-content__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
}

.voucher-card-top .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    margin-bottom: 2.6666666667rem
}

.voucher-card-top .card-detail .card-date {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    margin: 0 1.3333333333rem 0 0;
    color: var(--pop-bonuswallet-card-date);
    font-size: 2.6666666667rem
}

.voucher-card-top .card-detail .card-date div {
    line-height: 1.5
}

.voucher-card-top .card-detail .time-zone {
    display: block;
    align-self: flex-start;
    margin: .8rem 1.3333333333rem .8rem 0;
    padding: .5333333333rem 1.0666666667rem;
    border: 1px solid var(--bonuswallet-zone);
    border-radius: 1.3333333333rem;
    color: var(--bonuswallet-zone);
    font-size: 2.6666666667rem
}

.voucher-card-top .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8rem 0;
    padding: .5333333333rem 1.3333333333rem;
    border: .2666666667rem solid var(--pop-bonuswallet-card-detail);
    border-radius: 1.3333333333rem;
    font-weight: 500
}

.voucher-card-top .card-detail .detail-btn a {
    color: var(--pop-bonuswallet-card-detail);
    font-size: 2.6666666667rem;
    text-decoration: none
}

.voucher-card-deco {
    position: relative;
    height: 5.3333333333rem
}

.voucher-card-deco:before,.voucher-card-deco:after {
    content: "";
    position: absolute;
    top: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 100%;
    background-color: var(--content-bg)
}

.voucher-card-deco:before {
    right: -1.6rem
}

.voucher-card-deco:after {
    left: -1.6rem
}

.voucher-card-deco .dec-line {
    display: block;
    position: relative;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: .2666666667rem;
    margin: 4.2666666667rem 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
}

.voucher-card-down {
    display: block;
    position: relative;
    padding: 2.1333333333rem 4.2666666667rem 4.2666666667rem;
    border-radius: 0 0 2.6666666667rem 2.6666666667rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #0000001a
}

.voucher-card-down .card-down-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    border-radius: 1.0666666667rem
}

.voucher-card-down .card-down-inner__left {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: var(--bonuswallet-amount)
}

.voucher-card-down .card-down-inner__left .bonus-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 3.2rem;
    padding: 1.3333333333rem 0
}

.voucher-card-down .card-down-inner__left .currency {
    padding: 0 .8rem 0 1.8666666667rem;
    font-size: 3.7333333333rem
}

.voucher-card-down .card-down-inner__left .bonus-number {
    font-size: 4.8rem;
    font-weight: 500
}

.voucher-card-down .card-down-inner__left .bonus-tips {
    transform: scale(.9);
    transform-origin: left;
    padding: .8rem 0;
    color: var(--bonuswallet-detail-txt);
    font-size: 3.2rem
}

.voucher-card-down .card-down-inner__center {
    color: var(--bonuswallet-detail-txt);
    font-size: 3.2rem
}

.voucher-card-down .card-down-inner__right {
    position: relative;
    margin-left: 2.6666666667rem
}

.voucher-card-down .card-down-inner__right .btn {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 29.3333333333rem;
    min-height: 7.4666666667rem;
    max-width: 58.6666666667rem;
    margin: auto;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #00000040;
    color: var(--color-walletcard-txt);
    font-size: 3.4666666667rem;
    line-height: 7.4666666667rem;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.voucher-card-down .card-down-inner__right .btn--start {
    background-image: var(--color-walletcard-start-btn)
}

.voucher-card-down .card-down-inner__right .btn--disabled {
    color: var(--color-walletcard-disabled-txt);
    background-image: var(--color-walletcard-disabled-btn);
    border: 1px dotted var(--color-walletcard-disabled-border);
    box-shadow: 0 0 #00000040
}

.mat-ripple {
    overflow: hidden;
    position: relative
}

.mat-ripple:not(:empty) {
    transform: translateZ(0)
}

.mat-ripple.mat-ripple-unbounded {
    overflow: visible
}

.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity,transform 0ms cubic-bezier(0,0,.2,1);
    transform: scale3d(0,0,0);
    background-color: var(--mat-ripple-color, rgba(0, 0, 0, .1))
}

.cdk-high-contrast-active .mat-ripple-element {
    display: none
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    left: 0
}

[dir=rtl] .cdk-visually-hidden {
    left: auto;
    right: 0
}

.cdk-overlay-container,.cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%
}

.cdk-overlay-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1000;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .4s cubic-bezier(.25,.8,.25,1);
    opacity: 0
}

.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 1
}

.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: .6
}

.cdk-overlay-dark-backdrop {
    background: #00000052
}

.cdk-overlay-transparent-backdrop {
    transition: visibility 1ms linear,opacity 1ms linear;
    visibility: hidden;
    opacity: 1
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
    visibility: visible
}

.cdk-overlay-backdrop-noop-animation {
    transition: none
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px
}

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll
}

textarea.cdk-textarea-autosize {
    resize: none
}

textarea.cdk-textarea-autosize-measuring {
    padding: 2px 0!important;
    box-sizing: content-box!important;
    height: auto!important;
    overflow: hidden!important
}

textarea.cdk-textarea-autosize-measuring-firefox {
    padding: 2px 0!important;
    box-sizing: content-box!important;
    height: 0!important
}

@keyframes cdk-text-field-autofill-start {
}

@keyframes cdk-text-field-autofill-end {
}

.cdk-text-field-autofill-monitored:-webkit-autofill {
    animation: cdk-text-field-autofill-start 0s 1ms
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    animation: cdk-text-field-autofill-end 0s 1ms
}

.mat-focus-indicator {
    position: relative
}

.mat-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-focus-indicator-display, none);
    border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
    border-radius: var(--mat-focus-indicator-border-radius, 4px)
}

.mat-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-focus-indicator-display: block
}

.mat-mdc-focus-indicator {
    position: relative
}

.mat-mdc-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-mdc-focus-indicator-display, none);
    border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
    border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
}

.mat-mdc-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-mdc-focus-indicator-display: block
}

.mat-app-background {
    background-color: var(--mat-app-background-color, transparent);
    color: var(--mat-app-text-color, inherit)
}

html {
    --mat-ripple-color: rgba(255, 255, 255, .1)
}

html {
    --mat-option-selected-state-label-text-color: #435f9b;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-accent {
    --mat-option-selected-state-label-text-color: #a38d5b;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-warn {
    --mat-option-selected-state-label-text-color: #f44336;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

html {
    --mat-optgroup-label-text-color: white
}

.mat-primary {
    --mat-full-pseudo-checkbox-selected-icon-color: #435f9b;
    --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: #435f9b;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html,.mat-accent {
    --mat-full-pseudo-checkbox-selected-icon-color: #a38d5b;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #a38d5b;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

.mat-warn {
    --mat-full-pseudo-checkbox-selected-icon-color: #f44336;
    --mat-full-pseudo-checkbox-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-unselected-icon-color: rgba(255, 255, 255, .7);
    --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #303030;
    --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
    --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
    --mat-minimal-pseudo-checkbox-selected-checkmark-color: #f44336;
    --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868
}

html {
    --mat-app-background-color: #303030;
    --mat-app-text-color: white
}

.mat-elevation-z0,.mat-mdc-elevation-specific.mat-elevation-z0 {
    box-shadow: 0 0 #0003,0 0 #00000024,0 0 #0000001f
}

.mat-elevation-z1,.mat-mdc-elevation-specific.mat-elevation-z1 {
    box-shadow: 0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f
}

.mat-elevation-z2,.mat-mdc-elevation-specific.mat-elevation-z2 {
    box-shadow: 0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f
}

.mat-elevation-z3,.mat-mdc-elevation-specific.mat-elevation-z3 {
    box-shadow: 0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f
}

.mat-elevation-z4,.mat-mdc-elevation-specific.mat-elevation-z4 {
    box-shadow: 0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f
}

.mat-elevation-z5,.mat-mdc-elevation-specific.mat-elevation-z5 {
    box-shadow: 0 3px 5px -1px #0003,0 5px 8px #00000024,0 1px 14px #0000001f
}

.mat-elevation-z6,.mat-mdc-elevation-specific.mat-elevation-z6 {
    box-shadow: 0 3px 5px -1px #0003,0 6px 10px #00000024,0 1px 18px #0000001f
}

.mat-elevation-z7,.mat-mdc-elevation-specific.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px #0003,0 7px 10px 1px #00000024,0 2px 16px 1px #0000001f
}

.mat-elevation-z8,.mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: 0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f
}

.mat-elevation-z9,.mat-mdc-elevation-specific.mat-elevation-z9 {
    box-shadow: 0 5px 6px -3px #0003,0 9px 12px 1px #00000024,0 3px 16px 2px #0000001f
}

.mat-elevation-z10,.mat-mdc-elevation-specific.mat-elevation-z10 {
    box-shadow: 0 6px 6px -3px #0003,0 10px 14px 1px #00000024,0 4px 18px 3px #0000001f
}

.mat-elevation-z11,.mat-mdc-elevation-specific.mat-elevation-z11 {
    box-shadow: 0 6px 7px -4px #0003,0 11px 15px 1px #00000024,0 4px 20px 3px #0000001f
}

.mat-elevation-z12,.mat-mdc-elevation-specific.mat-elevation-z12 {
    box-shadow: 0 7px 8px -4px #0003,0 12px 17px 2px #00000024,0 5px 22px 4px #0000001f
}

.mat-elevation-z13,.mat-mdc-elevation-specific.mat-elevation-z13 {
    box-shadow: 0 7px 8px -4px #0003,0 13px 19px 2px #00000024,0 5px 24px 4px #0000001f
}

.mat-elevation-z14,.mat-mdc-elevation-specific.mat-elevation-z14 {
    box-shadow: 0 7px 9px -4px #0003,0 14px 21px 2px #00000024,0 5px 26px 4px #0000001f
}

.mat-elevation-z15,.mat-mdc-elevation-specific.mat-elevation-z15 {
    box-shadow: 0 8px 9px -5px #0003,0 15px 22px 2px #00000024,0 6px 28px 5px #0000001f
}

.mat-elevation-z16,.mat-mdc-elevation-specific.mat-elevation-z16 {
    box-shadow: 0 8px 10px -5px #0003,0 16px 24px 2px #00000024,0 6px 30px 5px #0000001f
}

.mat-elevation-z17,.mat-mdc-elevation-specific.mat-elevation-z17 {
    box-shadow: 0 8px 11px -5px #0003,0 17px 26px 2px #00000024,0 6px 32px 5px #0000001f
}

.mat-elevation-z18,.mat-mdc-elevation-specific.mat-elevation-z18 {
    box-shadow: 0 9px 11px -5px #0003,0 18px 28px 2px #00000024,0 7px 34px 6px #0000001f
}

.mat-elevation-z19,.mat-mdc-elevation-specific.mat-elevation-z19 {
    box-shadow: 0 9px 12px -6px #0003,0 19px 29px 2px #00000024,0 7px 36px 6px #0000001f
}

.mat-elevation-z20,.mat-mdc-elevation-specific.mat-elevation-z20 {
    box-shadow: 0 10px 13px -6px #0003,0 20px 31px 3px #00000024,0 8px 38px 7px #0000001f
}

.mat-elevation-z21,.mat-mdc-elevation-specific.mat-elevation-z21 {
    box-shadow: 0 10px 13px -6px #0003,0 21px 33px 3px #00000024,0 8px 40px 7px #0000001f
}

.mat-elevation-z22,.mat-mdc-elevation-specific.mat-elevation-z22 {
    box-shadow: 0 10px 14px -6px #0003,0 22px 35px 3px #00000024,0 8px 42px 7px #0000001f
}

.mat-elevation-z23,.mat-mdc-elevation-specific.mat-elevation-z23 {
    box-shadow: 0 11px 14px -7px #0003,0 23px 36px 3px #00000024,0 9px 44px 8px #0000001f
}

.mat-elevation-z24,.mat-mdc-elevation-specific.mat-elevation-z24 {
    box-shadow: 0 11px 15px -7px #0003,0 24px 38px 3px #00000024,0 9px 46px 8px #0000001f
}

.mat-theme-loaded-marker {
    display: none
}

html {
    --mat-datepicker-calendar-container-shape: 4px;
    --mat-datepicker-calendar-container-touch-shape: 4px;
    --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, .2), 0px 4px 5px 0px rgba(0, 0, 0, .14), 0px 1px 10px 0px rgba(0, 0, 0, .12);
    --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12)
}

html {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #435f9b;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(67, 95, 155, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(67, 95, 155, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(67, 95, 155, .3);
    --mat-datepicker-toggle-active-state-icon-color: #435f9b;
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(67, 95, 155, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
    --mat-datepicker-toggle-icon-color: white;
    --mat-datepicker-calendar-body-label-text-color: rgba(255, 255, 255, .7);
    --mat-datepicker-calendar-period-button-text-color: white;
    --mat-datepicker-calendar-period-button-icon-color: white;
    --mat-datepicker-calendar-navigation-button-icon-color: white;
    --mat-datepicker-calendar-header-divider-color: rgba(255, 255, 255, .12);
    --mat-datepicker-calendar-header-text-color: rgba(255, 255, 255, .7);
    --mat-datepicker-calendar-date-today-outline-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(255, 255, 255, .3);
    --mat-datepicker-calendar-date-text-color: white;
    --mat-datepicker-calendar-date-outline-color: transparent;
    --mat-datepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-date-preview-state-outline-color: rgba(255, 255, 255, .24);
    --mat-datepicker-range-input-separator-color: white;
    --mat-datepicker-range-input-disabled-state-separator-color: rgba(255, 255, 255, .5);
    --mat-datepicker-range-input-disabled-state-text-color: rgba(255, 255, 255, .5);
    --mat-datepicker-calendar-container-background-color: #424242;
    --mat-datepicker-calendar-container-text-color: white
}

.mat-datepicker-content.mat-accent {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #a38d5b;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(163, 141, 91, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(163, 141, 91, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(163, 141, 91, .3);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(163, 141, 91, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-content.mat-warn {
    --mat-datepicker-calendar-date-selected-state-text-color: white;
    --mat-datepicker-calendar-date-selected-state-background-color: #f44336;
    --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, .4);
    --mat-datepicker-calendar-date-today-selected-state-outline-color: white;
    --mat-datepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, .3);
    --mat-datepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, .3);
    --mat-datepicker-calendar-date-in-range-state-background-color: rgba(244, 67, 54, .2);
    --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, .2);
    --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
    --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e
}

.mat-datepicker-toggle-active.mat-accent {
    --mat-datepicker-toggle-active-state-icon-color: #a38d5b
}

.mat-datepicker-toggle-active.mat-warn {
    --mat-datepicker-toggle-active-state-icon-color: #f44336
}

.mat-calendar-controls {
    --mat-icon-button-touch-target-display: none
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 8px
}

.datepicker-toggle {
    color: #222
}

header.cricket,header.member,header.normal,header.player,header.normal-logo-left {
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

header.slot,header.editor,header.vip {
    box-shadow: none
}

header .logo {
    width: 10.6666666667rem
}

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

.member-content .button {
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem
}

.menu-box {
    margin: 2.1333333333rem;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.input-group input {
    border-radius: 1.3333333333rem
}

.input-group.upload-file .input-wrap:before {
    border-radius: 1.3333333333rem
}

.under-maintain .maintain-mask,.select-group select,.btn-select {
    border-radius: 1.3333333333rem
}

.option-group.select-bar {
    padding: 2.1333333333rem 0 2.1333333333rem 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.option-group select {
    padding: 0 6.4rem 0 2.1333333333rem
}

.option-wrap:after {
    right: 2.1333333333rem
}

.upload-wrap .upload-group,.file-box,.crypto-group-2 .crypto-input input {
    border-radius: 1.3333333333rem
}

.reset-password-page .menu-box {
    margin: 2.1333333333rem;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.reset-password-page .accordion-wrap {
    margin: 2.1333333333rem 2.1333333333rem 0
}

.tab-btn-bar:before {
    border-radius: 1.3333333333rem
}

.tab-btn-bar .line:after {
    border-radius: 1.3333333333rem
}

.tab-btn-page {
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.btn-box {
    margin: 2.1333333333rem 0 0
}

.switch-mode,.inner-block {
    grid-gap: 2.1333333333rem;
    margin: 2.1333333333rem
}

.switch-mode li,.inner-block li {
    border-radius: 1.3333333333rem
}

.switch-mode li.active:after,.inner-block li.active:after {
    border-radius: 1.0666666667rem
}

.switch-mode li.active:before,.inner-block li.active:before {
    border-radius: 1.0666666667rem
}

.loader-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

.loader-box video {
    width: 21.3333333333rem
}

.menu-first .beforelogin,.menu-first .afterlogin {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.menu-first .menu-item li,.menu-first .menu-item .item-box,.menu-first .menu-item .contact-box,.menu-first .menu-item .home-box {
    border-radius: 1.3333333333rem
}

.menu-header {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.member-menu-content {
    padding: 2.1333333333rem
}

.member-menu-box {
    margin: 0 0 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.member-menu-box .title {
    padding: 0 3.2rem
}

.member-menu-box ul {
    padding: 0 0 2.1333333333rem
}

.member-menu-box ul li {
    padding: 1.0666666667rem
}

.member-menu-box:nth-child(1) {
    background: var(--sidenav-category-area-bg);
    box-shadow: inset 0 .2666666667rem .5333333333rem color-mix(in srgb,var(--inset-shadow),transparent 90%)
}

.member-menu-box:nth-child(1) .title {
    padding: 0 2.1333333333rem
}

.menu-second ul.active {
    border-radius: 1.3333333333rem
}

.cricket .betting {
    width: 100%;
    margin-top: 2.1333333333rem
}

.nextevent .title {
    margin: 2.1333333333rem
}

.nextevent .slider .slick-slide {
    margin: 0 2.1333333333rem
}

.login-info-box {
    margin: 1.0666666667rem 2.1333333333rem 0
}

.pop-account-lock,.pop-reset-password {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-confirm-password,.pop-get-vcode {
    padding-top: 9.6rem;
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.register-content .button:not(.btn-vcode) {
    margin: 2.1333333333rem
}

.pop-biometric-success,.register-fail-wrap,.register-success-wrap {
    border-radius: 1.3333333333rem
}

.pop-other-account {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-transfer .menu-box {
    padding: 2.1333333333rem
}

.pop-wrap3 {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    padding: 8.5333333333rem 2.1333333333rem 2.1333333333rem
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
    padding: 8.5333333333rem 2.1333333333rem 2.1333333333rem
}

.pop-wrap3 .title-wrap .title {
    margin-bottom: 2.1333333333rem
}

.lvup-select-wrap {
    grid-gap: 2.1333333333rem
}

.lvup-select-wrap .event {
    border-radius: 1.3333333333rem
}

.reel-box {
    margin-bottom: 2.1333333333rem
}

.lvup-event-detail {
    margin-bottom: 2.1333333333rem;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.category {
    padding-bottom: 2.1333333333rem
}

.category ul {
    grid-gap: 1.0666666667rem;
    margin: 2.1333333333rem 0
}

.category ul li {
    border-radius: 1.3333333333rem
}

.category ul li.active:after {
    border-radius: 1.3333333333rem
}

.category ul li.active:before {
    border-bottom-right-radius: 1.3333333333rem
}

.search-box .my-favorites,.search-box .recently-played,.game-list li button {
    border-radius: 1.3333333333rem
}

.recently-played-wrap .select-date,.my-favorites-wrap .select-date,.pop-casino-details-filter,.pop-slot-details-filter,.pop-casino-details-filter .pop-btn-group,.pop-slot-details-filter .pop-btn-group {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

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

.tips-info {
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.member-menu-point {
    margin: 0 2.1333333333rem 2.1333333333rem
}

.bonus-wallet-wrap {
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.bonus-wallet {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.bonus-card-down {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.no-result {
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.vip-area-group .right-box .goto-myvip {
    border-radius: 1.3333333333rem
}

.player-vip-box {
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.card-top {
    border-radius: 1.3333333333rem
}

.card-bottom {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.vip-content .button {
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.acquired-content {
    padding: 0 2.1333333333rem
}

.cash-points,.form-vip-history {
    border-radius: 1.3333333333rem
}

.player-vip-detailed-menu {
    padding: 2.1333333333rem 2.1333333333rem 0
}

.player-vip-detailed-menu .btn {
    border-radius: 1.3333333333rem 50% 1.3333333333rem 1.3333333333rem
}

.player-vip-detailed-box .inner-box {
    width: calc(100% - 4.2666666667rem);
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.player-vip-detailed-box .title {
    margin: 2.1333333333rem 2.1333333333rem 0
}

.head-lv-name {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.lv-info-wrap {
    padding: 2.1333333333rem
}

.lv-info-wrap .status.accept2 {
    border-radius: 1.3333333333rem
}

.terms {
    padding: 2.1333333333rem
}

.list-title {
    margin: 2.1333333333rem 2.1333333333rem 0;
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.list-content {
    margin: 0 2.1333333333rem;
    padding: 1.0666666667rem;
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.list-content li {
    padding: 0
}

.vip-list {
    margin-top: 0
}

.time-zone {
    border-radius: .5333333333rem
}

.accordion-wrap {
    margin: 2.1333333333rem 2.1333333333rem 0;
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.accordion-wrap.error {
    box-shadow: none
}

.playerform-content .button {
    margin: 2.1333333333rem
}

.drop-down-menu {
    border-radius: 1.3333333333rem
}

.drop-down-menu .phone-code-list {
    left: 4.5333333333rem;
    width: 29.6rem
}

.drop-down-menu-btn {
    border-radius: 1.0666666667rem 1.0666666667rem 0 0
}

.accordion-card-wrap.select-bar,.option-group.select-bar,.player-deposit-wrap .player-deposit-step1 .menu-box {
    margin: 2.1333333333rem
}

.player-top .credit-card {
    margin: 2.1333333333rem 0 1.0666666667rem
}

.credit-card {
    width: calc(100% - 4.2666666667rem)
}

.main-wallet-info {
    padding: 2.1333333333rem
}

.accordion-card-wrap {
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.pop-otp-verification {
    padding-top: 8.5333333333rem;
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.ac-list .btn-revert {
    border-radius: 1.3333333333rem
}

.ac-list .btn-revert:after {
    border-radius: 1.0666666667rem
}

.info-list li:first-child {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.info-list li:last-child {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.style-bank li input[type=checkbox]+label,.style-bank li input[type=radio]+label {
    border-radius: 1.3333333333rem
}

.style-bank li input[type=checkbox].active+label:before,.style-bank li input[type=radio].active+label:before {
    border-bottom-right-radius: 1.3333333333rem
}

.transaction-record-list .list-title {
    margin: 0 2.1333333333rem
}

.list-group .date-title {
    margin: 0 2.1333333333rem;
    padding: 2.1333333333rem
}

.list-group:last-child {
    margin-bottom: 2.1333333333rem
}

.list-group:last-child .list-content {
    border-radius: 0 0 1.3333333333rem 1.3333333333rem
}

.transaction-record-list .no-result,.betting-record-list .no-result,.betting-record-inner-list .no-result {
    margin-top: 0
}

.betting-record-list .list-content {
    border-radius: 0
}

.list-bar {
    margin: 0 2.1333333333rem
}

.list-bar .date-title {
    margin: 0
}

.timeline-block .content {
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.details-box {
    border-radius: 1.3333333333rem
}

.pop-transaction-records-details .member-content .button {
    width: auto
}

.list-arrow {
    margin-right: 2.1333333333rem
}

.pop-transaction-records-details {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.pop-transaction-records-details .bank-name {
    border-radius: 1.0666666667rem
}

.inbox-list .inner-box {
    margin-top: 2.1333333333rem
}

.inbox-list .list-group:first-child .date-title {
    border-radius: 1.3333333333rem 1.3333333333rem 0 0
}

.inbox-list .list-content {
    border-radius: 0
}

.inbox-list .message-item {
    padding: 0 2.1333333333rem
}

.inbox-list .message-item:last-child {
    border-bottom: 0
}

.inbox-list .content-wrap {
    margin-left: 2.1333333333rem;
    padding: 2.1333333333rem 0
}

.recommend-friends-box {
    margin: 2.1333333333rem;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem
}

.recommend-friends-box.deco {
    margin-top: 17.0666666667rem
}

.date-bar {
    padding: 2.1333333333rem
}

.code-box .code,.code-box .btn-share,.condition-box .item .text {
    border-radius: 1.3333333333rem
}

.ticket-wrap {
    padding: 2.1333333333rem
}

.ticket+.ticket {
    margin-top: 2.1333333333rem
}

.ticket .ticket-inner-left {
    padding: 2.1333333333rem
}

.ticket .ticket-inner {
    border-radius: 1.3333333333rem
}

.article-content {
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.article-detail .table {
    border-radius: 1.3333333333rem
}

.article-detail .table-title:first-child {
    border-radius: 1.3333333333rem 0 0
}

.article-detail .table-title:last-child {
    border-radius: 0 1.3333333333rem 0 0
}

.currency-selector-wrap {
    width: 26.6666666667rem;
    top: 4.2666666667rem;
    right: 4.2666666667rem;
    background-color: var(--form-input-bg);
    box-shadow: 0 1.6rem 3.2rem #0003;
    border-radius: 1.3333333333rem;
    display: flex;
    flex-flow: row nowrap;
    padding: 0 2.1333333333rem
}

.currency-selector-wrap.input-wrap {
    position: fixed
}

.currency-selector-wrap .currency-area-code {
    width: 100%
}

.currency-selector-wrap .btn-select {
    position: relative;
    background-color: var(--form-input-bg);
    padding: 0;
    line-height: normal;
    box-shadow: none
}

.currency-selector-wrap .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333rem;
    right: 0;
    border-width: 1.3333333333rem;
    border-style: solid;
    border-color: var(--pop-close-icon-color) transparent transparent
}

.currency-selector-wrap li {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 2.1333333333rem 0;
    list-style: none
}

.currency-selector-wrap li img {
    width: 8rem;
    margin-right: 3.2rem;
    border-radius: 50%;
    box-shadow: 0 0 .5333333333rem #000c
}

.currency-selector-wrap li span {
    font-size: 3.2rem;
    color: var(--pop-txt);
    margin-left: 0
}

.nav-category {
    padding: 0 1.0666666667rem 1.0666666667rem
}

.nav-category:before {
    background: transparent
}

.nav-category.nav-auto .slick-list .btn {
    min-width: 21.3333333333rem
}

.nav-category .btn {
    margin-top: 1.0666666667rem;
    padding: 1.0666666667rem 0;
    transition: background .05s ease-out
}

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

.nav-category .btn.slick-current {
    border-radius: 1.3333333333rem;
    background: var(--nav-category-bg-active-circle)
}

.nav-category .btn p {
    margin: 1.0666666667rem;
    font-size: 2.6666666667rem;
    font-weight: 700
}

.nav-category.active {
    height: 8.5333333333rem!important;
    animation: slide-out-top .2s cubic-bezier(.55,.085,.68,.53) both
}

.nav-category.active .btn {
    margin-top: 1.3333333333rem
}

.nav-category.active .btn span {
    height: 0
}

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

@keyframes slide-out-top {
    0% {
        height: 6.4rem;
        opacity: 0
    }

    to {
        height: 8.5333333333rem;
        opacity: 1
    }
}

.card1 li,.card2 li {
    border-radius: 1.3333333333rem;
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.content-title {
    padding: 1.0666666667rem
}

.content-main .slick-slide {
    margin: 0 2.1333333333rem
}

.maintenance-row {
    display: grid;
    position: relative;
    grid-gap: 2.1333333333rem;
    grid-template-columns: calc(100% - 8rem - 2.1333333333rem) 6rem;
    margin: 2.1333333333rem
}

.maintenance-row h6 {
    display: flex;
    align-items: center;
    height: 8rem;
    background: var(--sa-maintenance-bg);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%);
    padding: 1.0666666667rem 2.1333333333rem;
    border-radius: 1.3333333333rem;
    font-size: 3.2rem;
    line-height: 8rem
}

.maintenance-row h6 i {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    margin-right: 2.1333333333rem;
    background: var(--sa-maintenance-icon-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.maintenance-row h6 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sa-maintenance-txt);
    max-width: calc(100% - 6.4rem)
}

.maintenance-row h6 .error-code {
    margin-left: auto
}

.maintenance-row .info {
    position: relative;
    justify-content: flex-end;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: var(--sa-maintenance-info-bg);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%)
}

.maintenance-row .info:before {
    content: "?";
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: var(--sa-maintenance-info-icon-color);
    font-weight: 700;
    line-height: 8rem;
    text-align: center
}

.maintenance-row .tooltips {
    display: none;
    position: absolute;
    z-index: 3;
    top: 10.1333333333rem;
    right: 0;
    width: auto;
    max-width: 100%;
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--sa-maintenance-info-tooltips-bg);
    color: var(--sa-maintenance-info-tooltips-txt);
    font-size: 3.2rem;
    line-height: 4.2666666667rem
}

.maintenance-row .tooltips:before {
    content: "";
    display: block;
    position: absolute;
    top: -1.6rem;
    right: 2.4rem;
    border-width: 0 1.6rem 1.6rem;
    border-style: solid;
    border-color: transparent transparent var(--sa-maintenance-info-tooltips-bg)
}

.maintenance-row .tooltips.active {
    display: block
}

.back-to-cricket-row {
    display: grid;
    grid-template-columns: 6.4rem calc(100% - 6.4rem);
    align-items: center;
    width: calc(100% - 4.2666666667rem);
    height: 8rem;
    margin: 2.1333333333rem;
    padding: 1.0666666667rem 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--sa-back-to-cricket-bg);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%);
    color: var(--sa-maintenance-info-tooltips-txt)
}

.back-to-cricket-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    color: var(--sa-maintenance-txt);
    font-size: 3.2rem
}

.back-to-cricket-row .tap-circle {
    position: relative
}

.back-to-cricket-row .tap {
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    background: var(--sa-back-tocricket-tap-icon-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.back-to-cricket-row .circle-wave-1 {
    position: absolute;
    top: 0;
    left: .4rem;
    width: 1.6rem;
    height: 1.6rem;
    transform-origin: 45% 35%;
    border: .2666666667rem solid var(--sa-back-tocricket-tap-icon-color);
    border-radius: 50%;
    opacity: .25
}

.back-to-cricket-row .circle-wave-2 {
    position: absolute;
    top: -.5333333333rem;
    left: -.1333333333rem;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    transform-origin: 45% 35%;
    border: .2666666667rem solid var(--sa-back-tocricket-tap-icon-color);
    border-radius: 50%;
    opacity: .4
}

.sport-loader {
    position: relative
}

.sport-loader svg {
    position: absolute;
    width: 100%;
    height: 53.3333333333rem
}

.sport-loader circle {
    fill: var(--sa-loader-circle)
}

.sport-loader .target {
    position: absolute;
    animation: target-ball 3s infinite ease-in-out
}

.sport-loader .ball-wrap {
    position: absolute;
    width: 100%;
    height: 53.3333333333rem
}

.sport-loader .ball-wrap li {
    display: inline-block;
    position: absolute;
    top: calc(50% - 2.1333333333rem);
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    transform-origin: center;
    animation: rotate-in-center infinite 2s cubic-bezier(.25,.46,.45,.94) both;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.sport-loader .basketball {
    animation-delay: .3s;
    left: calc(40% - 2.1333333333rem)
}

.sport-loader .soccer {
    animation-delay: .6s;
    left: calc(50% - 2.1333333333rem)
}

.sport-loader .cricket {
    animation-delay: .9s;
    left: calc(60% - 2.1333333333rem)
}

@keyframes tap {
    0% {
        transform: rotateX(0)
    }

    10% {
        transform: rotateX(15deg) rotateY(-10deg)
    }

    15% {
        transform: rotateX(25deg) rotateY(-10deg)
    }

    30% {
        transform: rotateX(0)
    }
}

@keyframes tap-circle {
    0% {
        transform: scale(0);
        opacity: 0
    }

    25% {
        transform: scale(1.05);
        opacity: .5
    }

    30% {
        transform: scale(1);
        opacity: .4
    }
}

@keyframes dot {
    50% {
        transform: translate(400%)
    }
}

@keyframes target-ball {
    0% {
        transform: translate(-15%)
    }

    50% {
        transform: translate(15%)
    }

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

@keyframes rotate-in-center {
    0% {
        transform: rotate(-360deg)
    }

    to {
        transform: rotate(0)
    }
}

.cricket-total-wrap {
    display: grid;
    grid-template-columns: 40% auto;
    align-items: center;
    margin: 2.1333333333rem;
    border-radius: 1.3333333333rem;
    background: var(--sa-betting-details-total-bg);
    box-shadow: 0 .5333333333rem .5333333333rem color-mix(in srgb,var(--offset-shadow),transparent 95%);
    color: var(--sa-betting-details-total-txt);
    font-size: 3.7333333333rem
}

.cricket-total-wrap .title {
    padding: 2.1333333333rem;
    border-radius: 1.3333333333rem 0 0;
    background: var(--sa-betting-details-total-title-bg);
    color: var(--sa-betting-details-totalt-title)
}

.cricket-total-wrap .platform {
    padding: 2.1333333333rem;
    border-radius: 0 0 0 1.3333333333rem;
    background: var(--sa-betting-details-total-platform-bg);
    color: var(--sa-betting-details-total-platform)
}

.cricket-total-wrap .platform span {
    margin-left: .5333333333rem
}

.cricket-total-wrap .profit,.cricket-total-wrap .turnover {
    display: inline-flex;
    padding: 2.1333333333rem;
    text-align: left
}

.cricket-total-wrap .profit span,.cricket-total-wrap .turnover span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 21.3333333333rem
}

.cricket-total-wrap .profit-amount,.cricket-total-wrap .turnover-amount {
    margin-left: auto;
    font-weight: 700
}

.cricket-total-wrap .profit {
    position: relative
}

.cricket-total-wrap .profit:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667rem;
    width: 95%;
    height: .2666666667rem;
    background: linear-gradient(to right,var(--accordion-dot) 0%,var(--accordion-dot) 10%,transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667rem 2.6666666667rem
}

.cricket-total-wrap .negative {
    color: var(--color-danger)
}

.cricket-list-content .accordion-wrap {
    margin: 2.1333333333rem
}

.accordion-wrap .accordion-header {
    width: 100%;
    padding: 2.1333333333rem
}

.accordion-wrap .accordion-header.show .arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-wrap .accordion-collapse {
    display: block;
    width: 100%;
    padding: 1.0666666667rem
}

.accordion-wrap .main-info {
    display: grid;
    grid-template-columns: 10.6666666667rem calc(100% - 20.2666666667rem) 5.3333333333rem;
    align-items: center;
    margin-bottom: 2.1333333333rem;
    column-gap: 2.1333333333rem
}

.accordion-wrap .main-info img {
    grid-row: 1/span 2;
    width: 10.6666666667rem
}

.accordion-wrap .title {
    display: inline-flex;
    align-items: center;
    overflow: hidden
}

.accordion-wrap .category-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sa-betting-details-title);
    font-size: 4.2666666667rem;
    font-weight: 700
}

.accordion-wrap .parlay-type {
    height: 4.8rem;
    margin-left: 2.1333333333rem;
    padding: .5333333333rem 1.0666666667rem;
    border-radius: 1.0666666667rem;
    background: var(--sa-betting-details-tag-bg);
    color: var(--sa-betting-details-tag-txt);
    font-size: 3.2rem;
    line-height: 3.7333333333rem
}

.accordion-wrap .arrow {
    position: relative;
    width: 8rem;
    height: 8rem;
    transition: all .3s;
    background: unset;
    justify-self: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 30%;
    mask-size: 30%;
    background: var(--ccs-betting-details-collapse-arrow-color)
}

.accordion-wrap .settled-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2/span 2;
    color: var(--sa-betting-details-date-txt);
    font-size: 3.2rem
}

.accordion-wrap .settled-date span {
    color: var(--sa-betting-details-date-txt)
}

.accordion-wrap .betting-info {
    display: grid;
    position: relative;
    grid-gap: 2.1333333333rem;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 2.1333333333rem
}

.accordion-wrap .betting-info:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - .4rem);
    width: 100%;
    height: .2666666667rem;
    background: linear-gradient(to right,var(--accordion-dot) 0%,var(--accordion-dot) 10%,transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667rem 2.6666666667rem
}

.accordion-wrap .betting-info:after {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - .4rem);
    width: .2666666667rem;
    height: 100%;
    background: linear-gradient(to bottom,var(--accordion-dot) 0%,var(--accordion-dot) 10%,transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667rem 2.6666666667rem
}

.accordion-wrap .avg-odds,.accordion-wrap .turnover,.accordion-wrap .stake,.accordion-wrap .profit {
    display: grid;
    grid-template-columns: 4.8rem calc(100% - 4.8rem);
    padding: 1.0666666667rem;
    column-gap: 2.1333333333rem
}

.accordion-wrap .avg-odds span,.accordion-wrap .turnover span,.accordion-wrap .stake span,.accordion-wrap .profit span {
    grid-column: 2/span 1
}

.accordion-wrap .avg-odds .item-icon,.accordion-wrap .turnover .item-icon,.accordion-wrap .stake .item-icon,.accordion-wrap .profit .item-icon {
    position: relative;
    width: 4.8rem;
    height: 4.8rem
}

.accordion-wrap .avg-odds .icon {
    fill: var(--sa-betting-details-avg-odds-icon-color)
}

.accordion-wrap .avg-odds .circle {
    fill: var(--sa-betting-details-avg-odds-circle)
}

.accordion-wrap .turnover .icon {
    fill: var(--sa-betting-details-turnover-icon-color)
}

.accordion-wrap .turnover .circle {
    fill: var(--sa-betting-details-turnover-circle)
}

.accordion-wrap .stake .icon {
    fill: var(--sa-betting-details-stake-icon-color)
}

.accordion-wrap .stake .circle {
    fill: var(--sa-betting-details-stake-circle)
}

.accordion-wrap .profit {
    text-align: left
}

.accordion-wrap .profit .icon {
    fill: var(--sa-betting-details-profit-icon-color)
}

.accordion-wrap .profit .circle {
    fill: var(--sa-betting-details-profit-circle)
}

.accordion-wrap strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sa-betting-details-value)
}

.accordion-wrap span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sa-betting-details-value-title);
    font-size: 3.2rem
}

.accordion-wrap .bet-bid,.accordion-wrap .bet-placed {
    grid-column: 1/span 2;
    color: var(--sa-betting-details-date-txt);
    font-size: 3.2rem
}

.accordion-wrap .bet-bid {
    float: left;
    text-align: left
}

.accordion-wrap .bet-placed {
    float: right;
    text-align: right
}

.parlay-wrap {
    display: grid;
    position: relative;
    grid-template-columns: 6.4rem calc(100% - 6.4rem);
    grid-template-rows: 6.4rem auto auto;
    padding: 1.0666666667rem;
    overflow: hidden;
    border-radius: 1.0666666667rem;
    background: var(--sa-betting-details-sub-item-bg)
}

.parlay-wrap+.parlay-wrap {
    margin-top: 1.0666666667rem
}

.parlay-wrap:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 9.6rem 9.6rem 0;
    border-style: solid
}

.parlay-wrap .event-type {
    align-self: center;
    width: 4.2666666667rem;
    height: 4.2666666667rem;
    fill: var(--sa-betting-details-sub-item-sport-icon-color);
    justify-self: center
}

.parlay-wrap .event-name {
    display: inline-flex;
    grid-column: 2/span 8;
    align-self: center;
    overflow: hidden;
    color: var(--sa-betting-details-sub-item-vs-txt);
    font-size: 3.2rem;
    font-weight: 700
}

.parlay-wrap .event-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: calc((100% - 4.2666666667rem - 9.6rem) / 2);
    color: var(--sa-betting-details-sub-item-title);
    font-weight: 400
}

.parlay-wrap .event-name i {
    margin: 0 1.0666666667rem
}

.parlay-wrap .market {
    grid-column: 2/span 9;
    color: var(--sa-betting-details-sub-item-txt);
    font-size: 3.7333333333rem;
    line-height: 4.2666666667rem
}

.parlay-wrap .parlay-status {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 9.6rem;
    height: 9.6rem
}

.parlay-wrap.win:after {
    border-color: transparent var(--color-success) transparent transparent
}

.parlay-wrap.win .parlay-status {
    fill: var(--sa-betting-details-sub-item-win-txt)
}

.parlay-wrap.lose:after {
    border-color: transparent var(--color-danger) transparent transparent
}

.parlay-wrap.lose .parlay-status {
    fill: var(--sa-betting-details-sub-item-lose-txt)
}

.parlay-wrap.cancel:after {
    border-color: transparent #d5d9dc transparent transparent
}

.parlay-wrap.cancel .parlay-status {
    fill: var(--sa-betting-details-sub-item-cancel-txt)
}

.parlay-wrap.voided:after {
    border-color: transparent var(--color-warning) transparent transparent
}

.parlay-wrap.voided .parlay-status {
    fill: var(--sa-betting-details-sub-item-voided-txt)
}

.parlay-wrap .details {
    display: grid;
    grid-column: 1/span 2;
    grid-gap: .5333333333rem;
    grid-template-columns: repeat(2,1fr);
    margin-top: 2.1333333333rem
}

.parlay-wrap .details .select {
    grid-column: 1/span 2;
    padding: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--sa-betting-details-sub-item-table-bg);
    color: var(--sa-betting-details-sub-item-txt);
    font-size: 4.2666666667rem
}

.parlay-wrap .details .bet-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1/span 2
}

.parlay-wrap .details .odds-req,.parlay-wrap .details .odds-matched,.parlay-wrap .details .bet-type {
    padding: 2.1333333333rem;
    border-radius: 1.0666666667rem;
    background: var(--sa-betting-details-sub-item-table-bg);
    color: var(--sa-betting-details-sub-item-value-title);
    font-size: 3.2rem
}

.parlay-wrap .details .odds-req strong,.parlay-wrap .details .odds-matched strong,.parlay-wrap .details .bet-type strong {
    display: block;
    color: var(--sa-betting-details-sub-item-value);
    font-size: 4.2666666667rem;
    text-align: right
}

header .logo {
    width: 30rem;
    left: 15.7333333333rem;
    background-position: center
}

header .menu-btn {
    padding-left: 1.6rem
}

header a {
    border-radius: 4.6666666667rem!important;
    padding: 1.3333333333rem 3.7333333333rem
}

.custom-content-sponsor {
    position: absolute;
    left: 33.3333333333rem;
    padding: 0 1.3333333333rem;
    width: 10.6666666667rem
}

.custom-content-sponsor .hd-spon {
    width: 100%
}

.custom-content-sponsor .hd-spon__icon {
    width: 8rem;
    height: 8rem
}

.app-download-content {
    padding-top: 0
}

.btn-goback {
    display: inline-block;
    background: var(--search-btn);
    color: var(--header-login-btn-txt);
    padding: 1.0666666667rem 2.1333333333rem 1.0666666667rem 1.6rem;
    font-size: 3.2rem;
    border-radius: 2.6666666667rem
}

.icon-goback {
    display: inline-block;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    vertical-align: middle;
    background-color: var(--header-login-btn-txt);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain
}

.register-checkbox[type=checkbox] {
    position: relative;
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    background-color: var(--checkbox-bg-color);
    border-radius: 25%;
    border: .2666666667rem solid var(--checkbox-border);
    appearance: none!important;
    -webkit-appearance: none!important;
    outline: none
}

.register-checkbox:after {
    position: absolute;
    border: .5333333333rem solid var(--checkbox-tick);
    border-top: none;
    border-right: none;
    height: .8rem;
    width: 1.6rem;
    left: .5333333333rem;
    top: .5866666667rem;
    transform: rotate(-45deg);
    opacity: 0;
    content: ""
}

.register-checkbox[type=checkbox]:checked {
    background-color: var(--checkbox-bg-color-checked);
    border-color: var(--checkbox-border-checked)
}

.register-checkbox[type=checkbox]:checked:after {
    opacity: 1
}

.nav-category .slick-current:before {
    box-shadow: none
}

.card-top .bar-inner {
    box-shadow: none
}

.credit-card .bank-info-copy p {
    text-shadow: none;
    color: var(--wallet-select-bank-card-txt)
}

.banner {
    margin-top: 0;
    overflow: visible
}

.banner:before {
    display: none
}

.banner .carousel-wrap {
    overflow: visible
}

.banner .carousel-wrap .dot-group {
    bottom: -8rem
}

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

.logo-box {
    width: 30rem
}

mat-datepicker-toggle {
    color: var(--color-title)!important
}

.mat-calendar-body-selected {
    background: var(--secondary)
}

html:lang(vn) .limit-content .btn-box,html:lang(tl) .limit-content .btn-box {
    flex-direction: column
}

html:lang(vn) .limit-content .button,html:lang(tl) .limit-content .button {
    flex: 1;
    margin: 0 0 5.3333333333rem!important
}

html:lang(vn) .ticket-inner-left .detail-btn,html:lang(tl) .ticket-inner-left .detail-btn {
    flex: 1 0 22%
}

.reset-password-page .reset-password-txt p {
    color: var(--reset-password-txt)
}

.style-bank li input[type=checkbox]+label,.style-bank li input[type=radio]+label {
    border-radius: 4rem
}

.game-entrance-item__title {
    letter-spacing: 0!important
}

.float-wrap-btn__img {
    width: 100%!important;
    height: 100%!important
}

.float-wrap-btn__img--stick {
    width: 30%!important;
    height: 30%!important
}

.nav-wrap .card2 .games-main.main-vertical.exclusiveGame {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 1.0666666667rem;
    padding: 0
}

.nav-wrap .card2 li p {
    position: absolute;
    width: 100%;
    color: #fff;
    font-family: Anton;
    font-size: 4.5333333333rem;
    white-space: normal;
    text-wrap: balance;
    bottom: 0;
    text-shadow: .1066666667rem .1066666667rem .8rem rgba(0,0,0,.2),-.1066666667rem -.1066666667rem .8rem rgba(0,0,0,.2),-.1066666667rem .1066666667rem .8rem rgba(0,0,0,.2),.1066666667rem -.1066666667rem .8rem rgba(0,0,0,.2);
    letter-spacing: .0533333333rem
}

.nav-wrap .card2.exclusive li p,.nav-wrap .card2.game-type__rain li p,.nav-wrap .card2.game-type__sport li p {
    text-align: left;
    padding-left: 4.8rem;
    padding-bottom: 3.7333333333rem
}

.menu-first .menu-item li a p {
    white-space: normal;
    line-height: 1;
    padding: 0 .8rem
}

.menu-second li.menu-second-submenu-item {
    width: 100%;
    padding: 1.0666666667rem 0
}

.menu-second li.menu-second-submenu-item:first-child {
    margin-top: 4rem
}

.menu-second li.menu-second-submenu-item img {
    width: 85%;
    max-height: 100%;
    margin: 0 auto;
    border-radius: 1.3333333333rem
}

.beforelogin a,.afterlogin a {
    font-size: 2.6666666667rem
}

.beforelogin .login-button a,.afterlogin .login-button a {
    margin-left: 0
}

[lang=vn] .beforelogin .login-button span,[lang=vn] .beforelogin .register-button span,[lang=tl] .beforelogin .login-button span,[lang=tl] .beforelogin .register-button span {
    margin: 0 2.1333333333rem 0 5.3333333333rem
}

[lang=vn] .beforelogin .login-button a,[lang=vn] .beforelogin .register-button a,[lang=tl] .beforelogin .login-button a,[lang=tl] .beforelogin .register-button a {
    white-space: normal
}

@media screen and (max-device-width: 361px) {
    [lang=vn] .menu-first p,[lang=tl] .menu-first p {
        letter-spacing:-.4px
    }
}

@media screen and (max-device-width: 355px) {
    [lang=vn] .menu-first p,[lang=tl] .menu-first p {
        letter-spacing:-.7px
    }
}

@font-face {
    font-family: Bebas Neue;
    src: url(/font/BebasNeue-Regular.ttf)
}

.tag-recommond {
    height: 5.3333333333rem
}

.launch-game-loading.select-logo .center-logo-bg.dark-logo-bg {
    background-color: #282828;
    background-image: linear-gradient(135deg,#282828,#1f1f1f4d 50%)
}

.launch-game-loading.select-logo .center-logo-bg.smaller-logo .center-logo {
    background-size: 80%
}

.launch-game-loading .center-logo-bg.exclusive-game .center-logo {
    background-size: 100%!important;
    background-position-y: -1.3333333333rem
}

.nav-shell:has(.nav-fixed).open-euro2024 .nav-fixed-inner {
    padding: 1.3333333333rem 4.8rem
}

.nav-shell:has(.nav-fixed).open-euro2024 .nav-fixed-inner p {
    padding-left: 1.3333333333rem
}

.nav-shell:has(.nav-fixed).open-euro2024 .nav-fixed-inner img {
    width: 6.9333333333rem;
    height: 6.9333333333rem
}

.nav-shell:has(.nav-fixed).open-euro2024 .nav-category .nav-inner {
    padding: 1.3333333333rem 1.3333333333rem 1.3333333333rem 37.3333333333rem
}

.vip-detail-wrapper {
    background: #000;
    font-family: Roboto,sans-serif!important;
    line-height: 1.2;
    overflow: hidden;
    margin-bottom: -29.3333333333rem
}

.vip-detail-wrapper section {
    margin-bottom: 13.3333333333rem
}

.vip-detail-wrapper p strong {
    color: #f8d072
}

.vip-detail-wrapper.vipbg p {
    font-size: 3.2rem;
    font-weight: 300
}

.vip-detail-wrapper .title {
    margin-bottom: 5.3333333333rem;
    text-align: center
}

.vip-detail-wrapper .title:nth-child(1) {
    margin-bottom: 10.6666666667rem
}

.vip-detail-wrapper .title h1 {
    margin-bottom: 2.6666666667rem;
    font-size: 5.3333333333rem;
    font-weight: 900;
    background: -webkit-linear-gradient(#ffffbe,#d1a129);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.vip-detail-wrapper .title p {
    font-size: 3.2rem;
    line-height: 1.5;
    color: #fff
}

.vip-detail-wrapper i {
    font-style: italic
}

.vip-detail-wrapper th {
    text-align: center;
    font-weight: 700;
    vertical-align: middle
}

.vip-detail-wrapper th p {
    font-weight: 400
}

.vip-detail-wrapper td.td-left {
    border-radius: 2.6666666667rem 0 0 2.6666666667rem
}

.vip-detail-wrapper td.td-right {
    border-radius: 0 2.6666666667rem 2.6666666667rem 0
}

.vip-detail-wrapper td.row1-rank {
    text-align: center
}

.vip-detail-wrapper td.row1-rank span {
    width: 100%;
    display: block
}

.vip-detail-wrapper .container .more {
    width: 90%;
    margin: 5.3333333333rem auto 0;
    text-align: center;
    overflow: hidden
}

.vip-detail-wrapper .container .more p {
    display: inline-block;
    margin-bottom: 5.3333333333rem;
    color: #fff
}

.vip-detail-wrapper .container .more i {
    font-size: 3.2rem;
    font-style: italic
}

.vip-detail-wrapper .container .more a {
    text-decoration: underline;
    display: inline-block;
    color: #c2aa6b;
    font-size: 3.7333333333rem
}

.vip-detail-wrapper table.leaderboard {
    width: 98%;
    padding: 15px 0 5px;
    margin: 0 auto
}

.vip-detail-wrapper table.leaderboard-rank td {
    font-weight: 700;
    color: #fff
}

.vip-detail-wrapper .red {
    color: #ff0103!important
}

.vip-detail-wrapper .green {
    color: #00ad32!important
}

.vip-detail-wrapper .gold {
    color: #f8d072!important
}

.vip-detail-wrapper .silver {
    color: #cecece!important
}

.vip-detail-wrapper .tab-cont {
    margin: 2.6666666667rem auto 0;
    width: 90%
}

.vip-detail-wrapper .info {
    padding: 2.6666666667rem
}

.vip-detail-wrapper .info p {
    font-size: 3.4666666667rem
}

.vip-detail-wrapper .info h4 {
    margin-bottom: 1.3333333333rem;
    font-size: 4.2666666667rem
}

.vip-detail-wrapper .info img {
    margin-top: 8rem;
    width: 5.3333333333rem
}

#tab-content-3 .tab-cont {
    margin-top: 18.6666666667rem
}

#tab-content-3 .board tr td:nth-child(2) img {
    width: 6.6666666667rem
}

#myVideo {
    position: absolute;
    left: 50%;
    width: 100%;
    transform: translate(-50%);
    z-index: -9999!important
}

.vip-title {
    width: 100%;
    padding-top: 14%;
    padding-bottom: 2%;
    text-align: center
}

.vip-title img {
    width: 90%
}

.top-ranking {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    transform: translateY(-200%)
}

.top-ranking img {
    padding: 0;
    width: 15%
}

.title-popout {
    text-align: left
}

.table-warp {
    width: 100%;
    margin: 2.6666666667rem auto 5.3333333333rem;
    padding: .5333333333rem;
    border-radius: 2.6666666667rem;
    background: linear-gradient(to bottom,#eed6a8,#bca463 34%,#fff1cc 60%,#bca463 81%,#c5a971)
}

.table-warp table {
    font-size: 3.7333333333rem
}

.table-warp table th p {
    font-size: 2.6666666667rem
}

.table-bg {
    background: #000;
    border-radius: 2.6666666667rem
}

.levelling {
    margin: 0 auto;
    width: 100%
}

.levelling th {
    height: 16rem;
    color: #4a3d1b;
    background: linear-gradient(to bottom,#bca463,#eed6a8);
    vertical-align: middle;
    text-align: center;
    font-weight: 700
}

.levelling p {
    font-size: 3.2rem
}

.leaderboard {
    margin: 0 auto;
    padding: 4rem 0 1.3333333333rem;
    width: 98%
}

.leaderboard th {
    font-weight: 700
}

.leaderboard th p {
    margin-top: 15px;
    color: #ffffff80
}

.leaderboard-rank td {
    font-weight: 400;
    color: #fff;
    background: #0b0b0b!important
}

.benefits-col {
    margin: 1.3333333333rem auto 0;
    width: 98%;
    border-collapse: separate;
    border-spacing: 0 2.6666666667rem
}

.benefits-col tr {
    background: #0b0b0b;
    transition: all .3s ease-in-out
}

.benefits-col tr:hover {
    background: #141414
}

.benefits-col td {
    padding-left: .5333333333rem;
    text-align: center;
    color: #f8d072;
    vertical-align: middle;
    font-size: 3.2rem
}

.benefits-col td h2 {
    font-size: 3.2rem
}

.benefits-col td img {
    display: inline-block;
    position: relative;
    top: -vw(-1px);
    left: 0;
    margin-right: 1.3333333333rem;
    width: 4rem;
    vertical-align: middle
}

.benefits-col h2 {
    font-size: 4.2666666667rem;
    color: #fff
}

.benefits-rank {
    margin: 0 auto;
    padding-top: 5.3333333333rem;
    width: 100%;
    text-align: center
}

.benefits-rank th {
    text-align: center
}

.benefits-rank img {
    width: 100%
}

.benefits {
    margin: 0 auto;
    width: 100%;
    color: #fff;
    text-align: center
}

.benefits img {
    display: inline-block;
    margin-right: 1.3333333333rem;
    vertical-align: middle
}

.benefits th {
    padding-top: 20px
}

.table-col {
    margin: 1.3333333333rem auto 0;
    width: 98%;
    border-collapse: separate;
    border-spacing: 0 2.1333333333rem
}

.table-col td {
    height: 13.3333333333rem;
    background: #0b0b0b;
    text-align: center;
    color: #f8d072;
    vertical-align: middle;
    font-size: 3.4666666667rem;
    border: 1px solid #0b0b0b
}

.table-col td img {
    display: inline-block;
    position: relative;
    top: -.5333333333rem;
    left: 0;
    width: 4.2666666667rem;
    margin-right: .8rem;
    vertical-align: middle
}

.table-col td.td-left {
    border-radius: 2.6666666667rem 0 0 2.6666666667rem
}

.table-col td.td-right {
    border-radius: 0 2.6666666667rem 2.6666666667rem 0
}

.table-col .td-left img {
    position: static;
    width: 6.6666666667rem
}

.remodal[data-remodal-id=prev_ranking] td {
    color: #fff
}

.remodal[data-remodal-id=prev_ranking] td img {
    width: 6.6666666667rem
}

.remodal[data-remodal-id=prev_ranking] td.td-right {
    color: #cecece
}

.remodal[data-remodal-id=prev_ranking] td.td-right img {
    width: 4.2666666667rem
}

.zeb {
    background: #141414!important;
    font-weight: 700
}

.zeb span {
    display: block
}

.bftb {
    margin-top: 5.3333333333rem
}

.bfbg {
    margin: 0 auto;
    padding: 4rem 0;
    width: 100%;
    background: #141414;
    border-radius: 2.6666666667rem;
    text-align: center
}

.vpcoin {
    margin: 0 auto;
    width: 100%;
    text-align: right
}

.vpcoin img {
    display: inline-block;
    margin-left: 4rem;
    width: 4.2666666667rem;
    vertical-align: middle
}

.vpcoin ul li {
    display: inline-block;
    list-style: none;
    vertical-align: middle
}

.vpcoin h3 {
    display: inline-block;
    padding-left: 1.3333333333rem;
    font-size: 3.7333333333rem;
    font-weight: 400
}

span.exchange {
    margin: 0 2.6666666667rem;
    color: #666;
    font-size: 5.3333333333rem
}

.leaderboard-warp {
    margin: 0 auto 8rem;
    width: 100%;
    border-radius: 2.6666666667rem;
    font-size: 3.7333333333rem
}

.board {
    margin-bottom: 5.3333333333rem;
    padding: 4rem 1% 2.6666666667rem;
    width: 100%;
    background: #141414;
    border-radius: 2.6666666667rem;
    text-align: center
}

.personal-rank {
    padding-bottom: 4rem;
    background: linear-gradient(to bottom,#eed6a8,#bca463);
    color: #4a3d1b
}

.personal-rank .leaderboard th {
    color: #4a3d1b;
    font-weight: 700
}

.leaderboard-update-time {
    margin: 2.6666666667rem 0;
    color: #ffffffb3;
    font-style: italic
}

[data-ca3_icon]:before {
    content: attr(data-ca3_icon);
    font-weight: 400
}

.ca3-scroll-down-link {
    display: none!important;
    position: absolute;
    right: 5%;
    bottom: 9%;
    width: 21.3333333333rem;
    height: 16rem;
    line-height: 16rem;
    color: #fff;
    text-align: center;
    font-size: 18.6666666667rem;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0 0 3px rgba(0,0,0,.4);
    animation: ca3_fade_move_down 2s ease-in-out infinite
}

.leaderboard-no-data {
    padding: 6.6666666667rem 0;
    opacity: .5
}

body:lang(bn) .vip-detail-wrapper .tabs a {
    margin-top: .8rem;
    padding: 2.4rem 0
}

.tab-content-1>section {
    padding-top: 8rem
}

.tab-content-1 .td-right img {
    width: 4.2666666667rem
}

.bonuses-table td {
    color: #fff
}

.remodal-txt {
    margin-bottom: 5.3333333333rem
}

.remodal-txt p {
    margin-bottom: 2.6666666667rem;
    line-height: 1.2
}

.remodal-txt span {
    font-weight: 700
}

.remodal-txt strong {
    color: #f8d072
}

.pop-vip .table-warp {
    margin-top: 4rem;
    width: 100%;
    text-align: center
}

.js-tab-content,.leaderboard-warp {
    overflow: hidden
}

.banner-box {
    height: auto;
    overflow: hidden
}

.banner-mobile {
    width: 100%;
    height: auto
}

.link-rewards {
    color: #dcb74c;
    text-decoration: underline;
    transition: .3s
}

.link-rewards:hover {
    color: #f5e99c
}

@keyframes ca3_fade_move_down {
    0% {
        transform: translateY(-20px);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        transform: translateY(20px);
        opacity: 0
    }
}

.list-loading:before {
    background: var(--ct-vip-list-loading-1)
}

.list-loading:after {
    background: var(--ct-vip-list-loading-2)
}

.js-tabs-container {
    position: relative
}

.js-tab-content {
    color: #fff;
    display: none
}

.no-js .js-tab-content {
    display: block
}

.tabs-warp {
    position: absolute;
    margin: 0 auto;
    padding: .8rem;
    top: 80rem;
    left: 2%;
    width: 96%;
    text-align: center;
    border-radius: 26.6666666667rem;
    background: linear-gradient(to bottom,#eed6a8,#bca463 34%,#fff1cc 60%,#bca463 81%,#c5a971);
    z-index: 3;
    opacity: 0
}

.tabs-warp.active {
    animation: tabShow .6s .5s ease-in-out forwards
}

@keyframes tabShow {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        transform: translate(0);
        opacity: 1
    }
}

.tabs {
    margin: 0 auto;
    padding: 0 1.3333333333rem;
    width: 100%;
    height: 10.4rem;
    background: linear-gradient(to bottom,#8f7b45,#c5a971);
    list-style: none;
    border-radius: 26.6666666667rem;
    box-shadow: inset 0 0 3px #000
}

.tabs:before,.tabs:after {
    content: "";
    display: table
}

.tabs:after {
    clear: both;
    zoom:1}

.tabs li {
    width: 33.333%;
    float: left
}

.tabs li:first-child {
    margin-left: 0
}

.tabs li a {
    display: inline-block;
    margin-top: 1.3333333333rem;
    padding: 1.6rem 0;
    width: 100%!important;
    text-align: center;
    text-decoration: none;
    border-radius: 26.6666666667rem;
    color: #4a3d1b;
    font-size: 3.7333333333rem;
    font-weight: 700
}

.tabs .tab-active a,.tabs .tab-active a:hover {
    cursor: default;
    color: #4a3d1b;
    font-weight: 700;
    background: linear-gradient(to bottom,#eed6a8,#bca463);
    box-shadow: 0 .2666666667rem .5333333333rem #8a7644
}

.js-tab-content-container {
    margin-top: 0
}

.js-tab-content-container:focus {
    outline: none
}

li.js-tab-toggler {
    display: none;
    float: right
}

.js-tab-stack li {
    display: none
}

.js-tab-stack li.tab-available,.js-tab-stack li.tab-active,.js-tab-stack-open li,.js-tab-stack li.js-tab-toggler {
    display: block
}

.js-tab-toggler a:after {
    content: " +"
}

.js-tab-stack-open li.js-tab-clone,.js-tab-stack-open-complete li {
    clear: left
}

.js-tab-clone-container {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden
}

.js-tab-stack-open li.js-tab-clone,.js-tab-stack-open li.js-ready-for-anim,.js-tab-stack-open-complete li {
    margin-left: 0
}

li.js-ready-for-anim {
    position: absolute;
    transition: all .5s cubic-bezier(.13,.965,.38,.985)
}

li.js-ready-for-anim a:hover {
    background: none
}

.js-tab-stack-open li.tab-active a:hover {
    background: #337ab7
}

.js-tab-stack-open li.js-tab-toggler {
    display: none
}

html.remodal-is-locked {
    overflow: hidden;
    touch-action: none
}

.remodal,[data-remodal-id] {
    display: none
}

.remodal-overlay {
    display: none;
    position: fixed;
    z-index: 8000;
    inset: -5000px
}

.remodal-wrapper {
    overflow: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch
}

.remodal-wrapper .td-left img {
    display: block;
    margin: 0 auto 3px
}

.remodal-wrapper i {
    font-style: italic
}

.remodal-wrapper:after {
    content: "";
    display: inline-block;
    margin-left: -.05em;
    height: 100%
}

.remodal-overlay,.remodal-wrapper {
    backface-visibility: hidden
}

.remodal {
    position: relative;
    max-width: 96%!important;
    outline: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%
}

.remodal h4 {
    margin: 5px auto 6px;
    font-size: 4rem!important
}

.remodal p {
    font-size: 3.2rem
}

.remodal-is-initialized {
    display: inline-block
}

.leaderboard-btn {
    margin: 5.3333333333rem 0;
    text-align: center
}

.leaderboard-btn a {
    display: inline-block;
    margin-left: 2.6666666667rem;
    padding: 2.1333333333rem 0 2.6666666667rem;
    width: 40rem;
    text-align: center;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(to bottom,#c10323,#6d0019);
    border-radius: 13.3333333333rem;
    transition: all .5s ease-in-out
}

.leaderboard-btn a:hover {
    background: linear-gradient(to bottom,#6d0019,#c10323 100% 101%)
}

.pop-wrap.customer-vip-detail {
    background: transparent;
    width: 100%
}

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

body:lang(bn) .vipbg {
    background-size: 100% auto
}

body:lang(bn) .tabs li a {
    margin-top: 1.0666666667rem;
    padding: 1.3333333333rem 0
}

.vipbg {
    background-size: 100% auto
}

.join {
    margin-top: 16%;
    margin-bottom: 10.6666666667rem;
    width: 100%;
    text-align: center
}

.join a {
    display: block
}

.join img {
    margin-top: 8rem;
    width: 40rem
}

.privileges-warp {
    margin: 0 auto;
    padding-bottom: 13.3333333333rem;
    width: 90%;
    text-align: center
}

.privileges-warp img {
    margin-top: 4%;
    width: 100%
}

.web-none {
    display: table
}

.remodal-bg {
    padding: 4rem!important
}

.remodal-bg .more {
    font-size: 3.2rem
}

.vip-top-cover {
    height: auto
}

.privileges img {
    margin-right: 5.3333333333rem;
    padding: 1.6rem;
    width: 40%;
    float: left
}

.info-push1,.info-push2,.info-push3,.info-push4 {
    padding-top: 8%
}

ul.accordion-list {
    position: relative;
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    list-style: none
}

ul.accordion-list li {
    position: relative;
    display: block;
    margin: 0 auto 4rem;
    padding: 5.3333333333rem;
    width: 100%;
    height: auto;
    background-color: #141414;
    border-radius: 1.3333333333rem;
    border: 1px solid #000;
    transition: all .3s ease-in-out
}

ul.accordion-list li.active {
    background-color: #0b0b0b;
    border: 1px solid #ceb67c
}

ul.accordion-list li.active div.answer {
    height: auto;
    max-height: 1000px
}

ul.accordion-list li.active h3:after {
    transform: rotate(45deg)
}

ul.accordion-list li h3 {
    position: relative;
    display: block;
    padding: 0 2.6666666667rem 0 0;
    width: 100%;
    height: auto;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: .01em
}

ul.accordion-list li h3:after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    color: #cab276;
    transition: all .3s ease-in-out;
    transform-origin: center;
    font-size: 5.3333333333rem
}

ul.accordion-list li div.answer {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: all .7s ease-in-out
}

ul.accordion-list li div.answer p {
    color: #ccc;
    position: relative;
    display: block;
    margin: 0;
    padding: 2.6666666667rem 0 0;
    font-weight: 400;
    line-height: 150%;
    font-size: 3.7333333333rem
}

@media only screen and (max-width: 400px) {
    body:lang(bn) .tabs li a {
        font-size:3.2rem
    }
}

@media only screen and (max-width: 468px) {
    .vip-detail-wrapper .tabs li a {
        font-size:3.2rem
    }

    .vip-detail-wrapper .info h4 {
        font-size: 14px;
        margin-bottom: 5px
    }

    .vip-detail-wrapper .info p {
        font-size: 11px
    }

    .info-push1,.info-push2,.info-push3,.info-push4 {
        padding-top: 8%
    }

    .join {
        margin-top: 16%;
        margin-bottom: 50px
    }

    .join img {
        width: 150px;
        margin-top: 30px
    }

    .privileges_warp {
        width: 90%;
        margin: 0 auto;
        padding-bottom: 50px
    }

    .gold_warp {
        width: 100%
    }

    .privileges img {
        width: 40%;
        float: left;
        padding: 6px;
        margin-right: 10px
    }

    .remodal {
        max-width: 96%!important
    }

    .remodal p {
        font-size: 12px
    }

    .web_none {
        display: table!important
    }

    .vip_title {
        width: 100%;
        padding-top: 20%;
        padding-bottom: 2%
    }

    .vip_title img {
        width: 90%
    }

    .top_ranking {
        bottom: 0;
        top: 11%
    }

    .top_ranking img {
        width: 15%;
        padding: 0;
        margin: 0;
        z-index: 999
    }

    .title h1 {
        font-size: 20px;
        margin-bottom: 5px
    }

    .table_warp {
        width: 100%;
        padding: 2px 2px .1px;
        margin-top: 20px
    }

    .table_warp table {
        font-size: 14px
    }

    .table_warp table th p {
        font-size: 10px
    }

    td.row1_rank {
        text-align: center!important;
        padding-left: 0!important
    }

    td.row1_rank span {
        width: 100%;
        display: block
    }

    table.table-col td img {
        left: 0
    }

    table.benefits_rank {
        width: 100%;
        padding-top: 20px
    }

    table.benefits_rank th {
        text-align: center
    }

    table.benefits_rank img,table.benefits {
        width: 100%
    }

    table.benefits_col {
        border-spacing: 0 10px
    }

    table.benefits_col td h2 {
        font-size: 12px
    }

    .bfbg {
        text-align: center;
        vertical-align: middle!important
    }

    .bfbg span {
        position: relative;
        top: 2px
    }

    .bftb {
        margin-top: 20px!important
    }

    table.benefits_col td {
        text-align: center;
        padding-left: 2px
    }

    table.benefits_col td img {
        width: 16px;
        top: 0;
        left: 0
    }

    .vpcoin {
        width: 100%;
        margin: 0 auto;
        text-align: right
    }

    .vpcoin img {
        display: inline-block;
        vertical-align: middle;
        margin-left: 15px
    }

    .vpcoin ul li {
        display: inline-block;
        vertical-align: middle;
        list-style: none
    }

    .vpcoin h3 {
        font-size: 14px;
        padding-left: 5px;
        font-weight: 400;
        display: inline-block
    }

    .remodal_bg {
        padding: 15px!important
    }

    .remodal h4 {
        font-size: 15px!important
    }

    .mobile_p {
        padding: 0 10px
    }

    .leaderboard-btn {
        text-align: right;
        margin: 20px 0
    }

    .leaderboard-btn a {
        text-align: center;
        color: #fff;
        text-decoration: none;
        background: #c10323;
        background: linear-gradient(to bottom,#c10323,#6d0019);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c10323",endColorstr="#6d0019",GradientType=0);
        border-radius: 13.3333333333rem;
        width: 40rem;
        padding: 2.1333333333rem 0 2.6666666667rem;
        display: inline-block;
        margin-left: 2.6666666667rem;
        transition: all .5s ease-in-out
    }

    .leaderboard-btn a:hover {
        color: #fff;
        background: #6d0019;
        background: linear-gradient(to bottom,#6d0019,#c10323 100% 101%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6d0019",endColorstr="#c10323",GradientType=0);
        transition: all .5s ease-in-out
    }

    .leaderboard-rank td {
        font-weight: 400!important
    }

    .personal_rank {
        background: #ffffbe;
        background: linear-gradient(to bottom,#ffffbe,#d1a129);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffbe",endColorstr="#d1a129",GradientType=0);
        color: #4a3d1b;
        margin-top: 4rem
    }
}

@media only screen and (max-width: 1024px) {
    .privileges img {
        width:25%
    }

    .leaderboard-btn {
        text-align: center;
        margin: 20px 0
    }

    .leaderboard-btn a {
        text-align: center;
        color: #fff;
        text-decoration: none;
        margin: 0 5px
    }

    .privileges_warp {
        width: 82%;
        margin: 0 auto
    }

    .gold_warp {
        width: 100%;
        margin-left: 0
    }

    .web_none {
        display: table!important
    }

    .vip-detail-wrapper p {
        font-size: 14px
    }

    .mobile_none {
        display: none
    }

    .vip_title {
        width: 100%;
        padding-top: 10%;
        padding-bottom: 2%
    }

    .vip_title img {
        width: 90%
    }

    .top_ranking {
        bottom: 10%;
        margin-bottom: 10%
    }

    .top_ranking img {
        width: 15%;
        padding: 0;
        margin: 0
    }

    .title h1 {
        font-size: 20px;
        margin-bottom: 5px
    }

    .table_warp {
        width: 100%;
        padding: 2px 2px .1px;
        margin-top: 20px
    }

    .table_warp table,.table_warp table th p {
        font-size: 14px
    }

    table.table-col td img {
        left: 0
    }

    table.benefits_rank {
        width: 100%;
        padding-top: 20px
    }

    table.benefits_rank th {
        text-align: center
    }

    table.benefits_rank img,table.benefits {
        width: 100%
    }

    table.benefits_col {
        border-spacing: 0 10px
    }

    table.benefits_col td h2 {
        font-size: 14px
    }

    .bfbg {
        text-align: center
    }

    .bftb {
        margin-top: 20px!important
    }

    table.benefits_col td {
        text-align: center;
        padding-left: 2px
    }

    table.benefits_col td img {
        width: 15px;
        top: 0;
        left: 0
    }

    .vpcoin {
        width: 100%;
        margin: 0 auto;
        text-align: right
    }

    .vpcoin img {
        display: inline-block;
        vertical-align: middle;
        margin-left: 15px
    }

    .vpcoin ul li {
        display: inline-block;
        vertical-align: middle;
        list-style: none
    }

    .vpcoin h3 {
        font-size: 14px;
        padding-left: 5px;
        font-weight: 400;
        display: inline-block
    }

    .remodal_bg {
        padding: 15px!important
    }

    .remodal h4 {
        font-size: 15px!important
    }
}

@media only screen and (max-width: 567px) {
    .privileges_warp img {
        width:100%;
        float: none;
        margin: 4% 0 0
    }

    .join img {
        width: 200px;
        margin-top: 30px
    }

    .top_ranking {
        bottom: 0;
        top: 30%
    }

    .vip-detail-wrapper .info {
        padding: 10px
    }

    .vip-detail-wrapper .info h4 {
        font-size: 16px;
        margin-bottom: 5px
    }

    .vip-detail-wrapper .info p {
        font-size: 13px
    }

    .privileges img {
        width: 40%;
        float: left;
        padding: 6px;
        margin-right: 20px
    }

    .info-push1,.info-push2,.info-push3,.info-push4 {
        padding-top: 8%
    }
}

@media only screen and (max-width: 468px) {
    .info-push1,.info-push3,.info-push4 {
        padding-top:6%
    }

    .info-push2 {
        padding-top: 5%
    }
}

body {
    letter-spacing: -.1333333333rem
}

.marquee-wrapper {
    padding: 1.8666666667rem 0;
    background-color: var(--marquee-bg)
}

.main-wallet-wrapper {
    padding: 5.3333333333rem 2.6666666667rem 0px;
    background-color: var(--marquee-bg)
}

.main-wrapper {
    background-color: var(--main-wrapper-bg);
    padding-bottom: 2.6666666667rem
}

.nextevent .title {
    margin: 2.6666666667rem 0;
    letter-spacing: 0;
    color: var(--content-title-p);
    font-weight: 700
}

.nextevent .title:before {
    margin-right: 2.1333333333rem
}

.custom-banner-wrapper--shrink {
    background-color: var(--marquee-bg)
}

.custom-banner-wrapper .carousel-wrap .item .item-pic {
    padding-top: 2.1333333333rem
}

.top-banner-wrapper .banner {
    
}
div#mainWrapper {
    margin-top: -80px;
    width: 100% !important;
}
.top-banner-wrapper .banner .banner-v1 {
   
}

.top-banner-wrapper .banner .banner-v1 .carousel-wrap,.top-banner-wrapper .banner .banner-v1 .carousel-wrap .item {
   
}

.top-banner-wrapper .banner .banner-v1 .carousel-wrap .item .item-pic {
    height: 100%;
    border-radius: 0
}

.nextevent {
    margin: 0 0 0 2.6666666667rem;
    width: 100%;
    height: 58.6666666667rem
}

.nextevent .banner {
    height: auto;
    width: 80%;
    margin: 0
}

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

.nextevent .banner .banner-v1 .carousel-wrap,.nextevent .banner .banner-v1 .carousel-wrap .item {
    height: auto
}

.nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
    min-height: 40.8rem
}

.nextevent .banner .banner-v1 .carousel-wrap .pagination {
    position: absolute;
    width: 122%
}

.footer-top {
    padding: 0
}

.footer-top div {
    margin-bottom: 0
}

.footer-top ul {
    justify-content: center;
    border-radius: 0
}

.footer-top .list {
    display: flex;
    background-color: transparent;
    border-bottom: 2px solid var(--footer-list-border-bottom);
    width: 100%
}

.footer-top .list__title {
    width: 100%;
    color: var(--footer-slogan-txt);
    font-size: 3.7333333333rem;
    margin: 1.3333333333rem 0 2.6666666667rem
}

.footer-top .list__wrap {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%
}

.footer-top .list__item {
    display: inline-flex;
    align-items: center;
    margin: 1.3333333333rem 2.6666666667rem;
    text-align: center;
    cursor: pointer
}

.footer-top .list__item a {
    display: inline-block
}

.footer-top .list__item img {
    height: 100%;
    max-height: 8rem
}

.footer-top .list__item .list__item--img {
    margin-right: 1.3333333333rem
}

.footer-top .list--sponsor-data,.footer-top .list--ambassador-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%
}

.footer-top .list--sponsor-data,.footer-top .list--ambassador-data,.footer-top .list--pay-data {
    padding: 5.3333333333rem 0;
    text-align: center
}

.footer-top .list--safe-data,.footer-top .list--license-data,.footer-top .list--social-data {
    padding: 8rem 0
}

.footer-top .list--safe-data li,.footer-top .list--license-data li,.footer-top .list--social-data li {
    margin: 0 2.6666666667rem
}

.footer-top .list--safe-data .footer-top .list__item+.footer-top .list__item,.footer-top .list--license-data .footer-top .list__item+.footer-top .list__item,.footer-top .list--social-data .footer-top .list__item+.footer-top .list__item {
    margin-left: 8rem
}

.footer-top .list .item__icon {
    display: flex;
    justify-content: flex-start;
    flex-direction: row
}

.footer-top .list .item__icon img {
    margin-right: 1.3333333333rem;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    max-height: 10.6666666667rem
}

.footer-top .list .item__content {
    display: flex;
    flex-direction: column
}

.footer-top .list .item .txt {
    text-align: center;
    font-size: 3.2rem;
    margin: 1.3333333333rem 0;
    color: var(--footer-opyright-txt)
}

.footer-top .list .item span {
    text-align: start;
    margin-top: .8rem;
    font-size: 2.6666666667rem;
    color: var(--footer-descrp-txt);
    line-height: 1.5
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 5.3333333333rem 3.2rem 8.5333333333rem;
    text-align: center
}

.footer-bottom .logoarea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.footer-bottom .logoarea__logo {
    width: 21.3333333333rem;
    margin: 0 auto
}

.footer-bottom .logoarea__logo img {
    width: 100%
}

.footer-bottom .logoarea__slogan {
    color: var(--footer-slogan-txt);
    font-size: 3.7333333333rem;
    margin-top: 4rem
}

.footer-bottom .logoarea__copyright {
    font-size: 3.2rem;
    margin-top: 1.3333333333rem;
    color: var(--footer-opyright-txt)
}

.footer-bottom__descrp-title {
    font-size: 3.2rem;
    margin-top: 7.7333333333rem;
    color: var(--footer-descrp-txt);
    line-height: 1.5;
    font-weight: 900
}

.footer-bottom__descrp {
    margin-top: .8rem;
    font-size: 2.6666666667rem;
    color: var(--footer-descrp-txt);
    line-height: 1.5
}

html.is-desktop .footer-top .list__item {
    text-align: start
}

html.is-desktop .footer-top .list__wrap,html.is-desktop .footer-top .list__title {
    justify-content: flex-start
}

html.is-desktop .footer-top .list--sponsor-data {
    margin-right: 8rem
}

html.is-desktop .footer-top .list--sponsor-data,html.is-desktop .footer-top .list--ambassador-data {
    justify-content: flex-start
}

html.is-desktop .footer-top .list--sponsor-data,html.is-desktop .footer-top .list--ambassador-data,html.is-desktop .footer-top .list--pay-data {
    text-align: start;
    padding: 8rem 0
}

html.is-desktop .footer-top .list .item .txt {
    text-align: start
}

.nav-shell {
    position: relative;
    height: 13.3333333333rem
}

.nav-shell:before {
    content: "";
    display: none;
    position: absolute;
    width: 13.3333333333rem;
    height: 100%;
    z-index: 10;
    transition: opacity .5s;
    background: radial-gradient(circle at left bottom,transparent 0%,var(--nav-shell-category-bg) 8%);
    pointer-events: none;
    border-radius: 0 0 0 2.9333333333rem
}

.nav-shell--active:before {
    opacity: 1
}

.nav-category {
    display: block;
    background: transparent;
    padding: 0 2.6666666667rem 2.6666666667rem;
    border-bottom-left-radius: 7.2rem;
    border-bottom: .5333333333rem solid var(--nav-shell-category-border);
    border-left: .5333333333rem solid var(--nav-shell-category-border);
    background-color: var(--nav-shell-category-bg);
    margin-left: -.5333333333rem
}

.nav-category:after {
    display: none
}

.nav-category .nav-inner {
    display: inline-flex;
    background: var(--nav-shell-inner-bg);
    border-radius: 266.4rem;
    padding: 1.3333333333rem
}

@keyframes popIn {
    0% {
        transform: scale(.8)
    }

    to {
        transform: scale(1)
    }
}

.nav-category .btn {
    display: flex;
    align-items: center;
    padding: 2.1333333333rem 2.6666666667rem;
    margin-top: 0;
    border-radius: 266.4rem;
    transition: background .2s
}

.nav-category .btn:before {
    display: none
}

.nav-category .btn img {
    width: 5.8666666667rem;
    height: 5.8666666667rem
}

.nav-category .btn img+p {
    margin-left: .8rem
}

.nav-category .btn.slick-current {
    box-shadow: 0 1px #ffffffbf inset,0 2px 4px #00000080;
    border-radius: 266.4rem;
    transform: scale(.8);
    animation: popIn .5s forwards
}

.nav-category .btn p {
    white-space: nowrap
}

.nav-inner-box {
    margin-left: 5.3333333333rem
}

.nav-shell:has(.nav-fixed):before {
    display: block
}

.nav-shell:has(.nav-fixed) .nav-category .nav-inner {
    padding: 1.3333333333rem 1.3333333333rem 1.3333333333rem 29.3333333333rem
}

.nav-shell:has(.nav-fixed.quick-game-icf) .nav-category .nav-inner {
    padding: 1.3333333333rem 1.3333333333rem 1.3333333333rem 34.6666666667rem
}

.nav-fixed {
    position: absolute;
    left: 2.6666666667rem;
    top: 0;
    height: calc(100% - .5333333333rem);
    padding-right: 10px;
    z-index: 11;
    border-radius: 266.4rem 0 0 266.4rem;
    overflow: hidden
}

.nav-fixed-inner {
    height: 100%;
    margin-left: -5px;
    padding: 1.3333333333rem 5.3333333333rem;
    background: var(--nav-fixed-bg);
    box-shadow: 1px 0 2px #00000080;
    border-radius: 266.4rem 0 0 266.4rem;
    transform: skew(-10deg)
}

.nav-fixed-inner .btn {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    height: 100%
}

.nav-fixed-inner p {
    color: #fff;
    font-size: 3.2rem
}

.nav-fixed-inner img {
    width: 5.8666666667rem;
    height: 5.8666666667rem
}

.nav-fixed-inner-cont {
    height: 100%;
    transform: skew(10deg)
}

.nav-content-section {
    margin: 0 auto;
    padding-top: 1.6rem
}

.nav.nav-auto .btn {
    min-width: 21.3333333333rem!important
}

.content-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 2.6666666667rem
}

.content-title img {
    width: 5.8666666667rem;
    height: 5.8666666667rem
}

.content-title img+p {
    margin-left: 1.0666666667rem
}

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

.content-title+* {
    padding-top: 2.1333333333rem
}

.card2 li:before {
    display: none
}

.card2 li img {
    width: 100%;
    margin: 0
}

.card-area ul {
    grid-template-columns: repeat(1,1fr);
    grid-gap: 2.6666666667rem
}

.card-area__options {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 32%;
    height: 100%;
    right: 0;
    padding: 1.3333333333rem 0
}

.card-area__options .option:before,.card-area__options .option:after {
    z-index: 0;
    content: "";
    position: absolute
}

.card-area__options .option:before {
    height: 9.3333333333rem;
    width: calc(100% + 1.3333333333rem);
    border-radius: 4.6666666667rem 0 0 4.6666666667rem;
    transform: translate(-1.3333333333rem,-1.3333333333rem);
    background: linear-gradient(90deg,#222222b3,#22222280)
}

.card-area__options .option__btn,.card-area__options .option__txt {
    display: inline-block;
    text-align: center
}

.card-area__options .option__btn i {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.6666666667rem;
    height: 6.6666666667rem;
    border-radius: 50%;
    background-color: #13926a;
    font-size: 3.2rem;
    color: #fff
}

.card-area__options .option__btn i.sv388,.card-area__options .option__btn i.awcmsv388 {
    background-color: #d49237
}

.card-area__options .option__btn i.saba {
    background-color: #2572d7
}

.card-area__options .option__btn i.sbov2 {
    background-color: #00beff
}

.card-area__options .option__btn i.ugv3 {
    background-color: #d90d00
}

.card-area__options .option__btn i.icf {
    background-color: #7b58e6
}

.card-area__options .option__btn i.awcme1sport {
    background-color: #7aa916
}

.card-area__options .option__btn i.awcmbc {
    background-color: #54c68c
}

.card-area__options .option__btn i.sbtech {
    background-color: #f66201
}

.card-area__options .option__btn i.awcmhorsebook {
    background-color: #b58766
}

.card-area__options .option__btn i.nst {
    background-color: #f2b02e
}

.card-area__options .option__btn i.cfe {
    background-color: #2e866d
}

.card-area__options .option__txt {
    z-index: 1;
    position: relative;
    width: calc(100% - 8rem);
    font-size: 3.2rem;
    color: #ffffff80
}

.card-area__options .option:first-child:nth-last-child(1) {
    transform: translate(-4rem)
}

.card-area__options .option:first-child:nth-last-child(1) .option__btn i {
    width: 12rem;
    height: 12rem
}

.card-area__options .option:first-child:nth-last-child(1):before {
    height: 14.6666666667rem;
    width: calc(100% + 5.3333333333rem);
    border-radius: 7.3333333333rem 0 0 7.3333333333rem
}

.card-area__options .option:first-child:nth-last-child(2),.card-area__options .option:first-child:nth-last-child(2)~.option {
    transform: translate(-2.6666666667rem)
}

.card-area__options .option:first-child:nth-last-child(2) .option__btn i,.card-area__options .option:first-child:nth-last-child(2)~.option .option__btn i {
    width: 10.6666666667rem;
    height: 10.6666666667rem
}

.card-area__options .option:first-child:nth-last-child(2):before,.card-area__options .option:first-child:nth-last-child(2)~.option:before {
    height: 13.3333333333rem;
    width: calc(100% + 4rem);
    border-radius: 6.6666666667rem 0 0 6.6666666667rem
}

.card-area__options .option:first-child:nth-last-child(4),.card-area__options .option:first-child:nth-last-child(4)~.option {
    transform: translate(0)
}

.card-area__options .option:first-child:nth-last-child(4) .option__btn i,.card-area__options .option:first-child:nth-last-child(4)~.option .option__btn i {
    text-align: center;
    font-size: 2.9333333333rem;
    width: 5.3333333333rem;
    height: 5.3333333333rem
}

.card-area__options .option:first-child:nth-last-child(4):before,.card-area__options .option:first-child:nth-last-child(4)~.option:before {
    height: 8rem;
    width: calc(100% + 1.3333333333rem);
    border-radius: 4rem 0 0 4rem
}

.card-area li {
    width: 100%;
    border-radius: 1.3333333333rem;
    overflow: hidden
}

.card-area li img {
    display: block;
    width: 100%
}

.tag {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    width: 100%;
    right: 4rem;
    color: #fff;
    border-radius: 2.6666666667rem;
    overflow: hidden
}

.tag__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 2.6666666667rem 0 13.3333333333rem;
    background: linear-gradient(270deg,#0009,#0000 90%)
}

.tag__icon__txt {
    display: block;
    font-size: 3.7333333333rem;
    color: #fff9;
    margin-top: 1.3333333333rem
}

.tag__icon__icon {
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    background: #fff;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain
}

.tag__cta {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 2.6666666667rem;
    border-left: 1px solid rgba(255,255,255,.4);
    background: linear-gradient(90deg,#0009,#0003);
    font-family: "Anton",var(--custom-font),var(--custom-serif);
    font-weight: 700
}

.group-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.6666666667rem
}

.group-title {
    display: flex;
    align-items: center
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.group-title img {
    width: 5.8666666667rem
}

.group-title span {
    font-size: 3.7333333333rem;
    color: var(--group-title-span);
    font-weight: 700
}

.group-title span.animated {
    animation: fadeIn .5s forwards
}

.group-title img+span {
    margin-left: 2.1333333333rem
}

.select {
    position: relative;
    display: inline-block;
    width: 28.2666666667rem
}

.select__head {
    background-color: var(--slot-head-bg);
    border-radius: 1.6rem;
    padding: 2.4rem 2.6666666667rem;
    display: flex;
    align-items: center;
    font-size: 3.2rem;
    color: var(--slot-head-txt);
    justify-content: space-between
}

.select__head:after {
    content: "";
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-left: .8rem solid var(--slot-head-txt);
    border-bottom: .8rem solid var(--slot-head-txt);
    border-radius: .5333333333rem;
    transform-origin: 50% 50%;
    transform: rotate(-45deg);
    transition: transform .5s;
    margin-left: 2.6666666667rem;
    margin-top: -.5333333333rem
}

.select--active .select__head:after {
    transform: rotate(135deg)
}

.select__options {
    position: absolute;
    bottom: -1.3333333333rem;
    transform: translateY(100%);
    width: 100%;
    border-radius: 1.6rem;
    z-index: 4;
    overflow: hidden;
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none
}

.select--active .select__options {
    opacity: 1;
    pointer-events: auto
}

.select__option {
    padding: 1.6rem 2.6666666667rem;
    background-color: var(--slot-option-bg);
    transition: background-color .5s;
    font-size: 3.2rem;
    color: var(--slot-option-txt)
}

.select__option--active {
    background-color: var(--slot-option-bg-active)
}

.select__option+.select__option {
    border-top: 1px solid var(--slot-option-border)
}

.jackpot {
    margin: 0 auto
}

.jackpot .text h2 {
    text-align: left;
    color: var(--jackpot-total)
}

.jackpot .text span {
    color: var(--jackpot-amount)
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.6,.6,.6)
    }

    50% {
        opacity: 1
    }
}

.tab-wrapper {
    position: relative
}

.tab-wrapper .btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    box-shadow: var(--tab-wrapper-btn-shadow)
}

.tab-wrapper:before {
    content: "";
    display: block;
    position: absolute;
    width: 13.3333333333rem;
    height: 100%;
    z-index: 10;
    opacity: 0;
    transition: opacity .5s;
    background: var(--tab-wrapper-before-bg);
    pointer-events: none
}

.tab-wrapper--active:before {
    opacity: 1
}

.tab-scroll-wrapper {
    overflow: auto;
    width: 100%;
    padding: 2.6666666667rem;
    border-bottom-left-radius: 7.2rem;
    border-bottom: .5333333333rem solid var(--tab-scroll-wrapper-border);
    border-left: .5333333333rem solid var(--tab-scroll-wrapper-border);
    background-color: var(--tab-scroll-wrapper-bg);
    margin-left: -.5333333333rem
}

.tab-scroll-wrapper .search-btn {
    border-top-left-radius: 1.3333333333vw;
    border-bottom-left-radius: 1.3333333333vw;
    background: #62605a;
    display: block;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    padding: inherit
}

.tab-scroll-wrapper .search-btn span {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fff;
    mask-repeat: no-repeat;
    mask-position: center 50%;
    mask-size: 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center 50%;
    -webkit-mask-size: 50%
}

.tab-scroll-wrapper .tab.search-tab,.tab-scroll-wrapper .tab.filter-tab {
    margin: 0;
    width: auto;
    border-radius: 5.7333333333rem;
    margin-right: 13vw;
    background: var(--search-tab-bg)
}

.tab-scroll-wrapper .tab {
    display: inline-block;
    height: auto
}

.tab-scroll-wrapper .tab ul {
    display: flex;
    align-items: center;
    width: auto;
    overflow-x: visible;
    overflow-y: visible;
    white-space: normal;
    padding: .8rem
}

.tab-scroll-wrapper .tab ul li {
    background-color: transparent;
    color: var(--nav-category-txt);
    font-weight: 600;
    text-align: center;
    padding: 1.6rem 3.2rem;
    flex-basis: auto;
    display: flex;
    min-width: 18.6666666667rem
}

.tab-scroll-wrapper .tab ul li:after {
    display: none
}

.tab-scroll-wrapper .tab ul li label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.tab-scroll-wrapper .tab ul li label img {
    width: 5.3333333333rem;
    display: block;
    max-height: 5.3333333333rem
}

.tab-scroll-wrapper .tab ul li label span {
    display: inline-block
}

.tab-scroll-wrapper .tab ul li label img+span {
    margin-left: 2.6666666667rem
}

.tab-scroll-wrapper .tab ul li.active {
    animation: zoomIn .25s forwards;
    box-shadow: var(--slick-current-shadow);
    border-radius: 266.4rem;
    background-color: var(--nav-category-bg-active-circle);
    color: var(--nav-category-txt-active)
}

@keyframes rotate {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.main-wallet-display {
    height: 16rem;
    position: relative
}

.main-wallet-display__inner {
    box-shadow: .2666666667rem .2666666667rem #ffffff26 inset;
    display: flex;
    overflow: hidden;
    height: 100%;
    border-radius: 2.6666666667rem;
    background: var(--main-wallet-display-bg)
}

.main-wallet-display__deco {
    position: absolute;
    bottom: 0;
    width: 32rem;
    font-size: 0;
    left: 40%;
    pointer-events: none
}

.main-wallet-display__deco video,.main-wallet-display__deco img {
    width: 100%
}

.main-wallet-display__former {
    flex: 227;
    padding: 9px 19px
}

.main-wallet-display__top {
    display: flex;
    align-items: center
}

.main-wallet-display__refresh {
    width: 3.4666666667rem;
    margin-left: 2.4rem;
    opacity: .5
}

.main-wallet-display__refresh img {
    width: 100%
}

.main-wallet-display__refresh img.active {
    animation: rotate 1s forwards
}

.main-wallet-display__value {
    font-size: 4.8rem;
    color: var(--main-wallet-display-value-txt);
    margin-top: 1.3333333333rem;
    font-weight: 700
}

.main-wallet-display__title {
    font-size: 3.2rem;
    color: var(--main-wallet-display-value-txt);
    opacity: .5
}

.main-wallet-display__latter {
    flex: 160;
    background: var(--main-wallet-display-latter-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4rem
}

.main-wallet-display__button {
    border-radius: 4rem;
    box-shadow: 0 .5333333333rem 1.0666666667rem #333,-.5333333333rem .2666666667rem .8rem #ffffff80;
    padding: .8rem 2.9333333333rem;
    font-weight: 700;
    text-shadow: 0px 0px 5px #281a70;
    color: #fff;
    background-image: var(--main-wallet-display-btn)
}

.pop-language .pop-inner .left-language-area img {
    border-radius: 50%;
    border: .2666666667rem var(--pop-language-btn-border) solid
}

html:lang(tl) .referral-program-banner__title,html:lang(tl) .referral-program-promotion-banner__title {
    top: 16rem
}

html:lang(tl) .referral-program-banner__title-fragment,html:lang(tl) .referral-program-promotion-banner__title-fragment {
    font-size: 5.3333333333rem
}

.remodal-overlay {
    background: #000c
}

.remodal-overlay.remodal-is-opening,.remodal-overlay.remodal-is-closing {
    animation-duration: .3s;
    animation-fill-mode: forwards
}

.remodal-overlay.remodal-is-opening {
    animation-name: remodal-overlay-opening-keyframes
}

.remodal-overlay.remodal-is-closing {
    animation-name: remodal-overlay-closing-keyframes
}

.remodal-wrapper {
    display: flex;
    z-index: 9999;
    justify-content: center;
    align-items: center
}

.remodal {
    display: block;
    box-sizing: border-box;
    width: 96%;
    height: 600px;
    margin-bottom: 10px;
    padding: 5px;
    text-align: left;
    background: #eed6a8;
    background: linear-gradient(to bottom,#eed6a8,#bca463 34%,#fff1cc 60%,#bca463 81%,#c5a971);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eed6a8",endColorstr="#c5a971",GradientType=0);
    border-radius: 10px;
    transform: translateZ(0);
    color: #fff
}

.remodal h4 {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.3px;
    background: -webkit-linear-gradient(#ffffbe,#d1a129);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    margin-top: 16px
}

.remodal ul li {
    list-style: inside
}

.remodal-bg {
    height: 590px;
    overflow: scroll;
    overflow-x: hidden;
    background: #000;
    padding: 30px;
    border-radius: 10px
}

.remodal.remodal-is-opening,.remodal.remodal-is-closing {
    animation-duration: .3s;
    animation-fill-mode: forwards
}

.remodal.remodal-is-opening {
    animation-name: remodal-opening-keyframes
}

.remodal.remodal-is-closing {
    animation-name: remodal-closing-keyframes
}

.remodal,.remodal-wrapper:after {
    vertical-align: middle
}

.remodal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    overflow: visible;
    z-index: 8501!important;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: color .2s;
    text-decoration: none;
    color: #95979c;
    border: 0;
    outline: 0;
    background: transparent
}

.remodal-close:hover,.remodal-close:focus {
    color: #2b2e38
}

.remodal-close:before {
    font-family: Arial,Helvetica CY,Nimbus Sans L,sans-serif!important;
    font-size: 25px;
    line-height: 35px
}

.remodal-confirm,.remodal-cancel {
    font: inherit;
    display: inline-block;
    overflow: visible;
    min-width: 110px;
    margin: 0;
    padding: 12px 0;
    cursor: pointer;
    transition: background .2s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 0;
    outline: 0
}

.remodal-confirm {
    color: #fff;
    background: #81c784
}

.remodal-confirm:hover,.remodal-confirm:focus {
    background: #66bb6a
}

.remodal-cancel {
    color: #fff;
    background: #e57373
}

.remodal-cancel:hover,.remodal-cancel:focus {
    background: #ef5350
}

.remodal-confirm::-moz-focus-inner,.remodal-cancel::-moz-focus-inner,.remodal-close::-moz-focus-inner {
    padding: 0;
    border: 0
}

@keyframes remodal-opening-keyframes {
    0% {
        transform: scale(1.05);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes remodal-closing-keyframes {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(.95);
        opacity: 0;
        filter: blur(0)
    }
}

@keyframes remodal-overlay-opening-keyframes {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes remodal-overlay-closing-keyframes {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@media only screen and (min-width: 641px) {
    .remodal {
        max-width:65%
    }
}

.lt-ie9 .remodal-overlay {
    background: #2b2e38
}

.lt-ie9 .remodal {
    width: 700px
}

.ambassador-navigation .flex-prev,.ambassador-navigation .flex-next {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffbd28;
    box-shadow: 0 0 10px #00000080;
    cursor: pointer;
    opacity: .8
}

.ambassador-navigation .flex-prev img,.ambassador-navigation .flex-next img {
    width: 25%
}

.ambassador-wrapper {
    color: #fff;
    font-size: 4.5333333333rem;
    font-weight: lighter;
    line-height: 1.2;
    font-family: var(--custom-font),var(--custom-serif);
    position: relative;
    overflow: hidden;
    background: #000
}

.ambassador-wrapper h5 {
    margin-bottom: 4rem;
    font-size: 6.9333333333rem;
    font-weight: lighter;
    color: #13926a;
    text-align: center
}

.ambassador-wrapper .flex-prev,.ambassador-wrapper .flex-next {
    position: fixed;
    top: 50vh;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10.6666666667rem;
    height: 10.6666666667rem;
    border-radius: 50%;
    background: #13926a;
    box-shadow: 0 0 10px #00000080
}

.ambassador-wrapper .flex-prev img,.ambassador-wrapper .flex-next img {
    width: 25%
}

.ambassador-wrapper .flex-prev {
    left: 5%
}

.ambassador-wrapper .flex-next {
    right: 5%
}

.ambassador-wrapper .slick-num01 a {
    background: #02a7bd
}

.ambassador-wrapper .slick-num02 a {
    background: #dca800
}

.about-list-box {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 4.2666666667rem
}

.about-list-box>div {
    margin-bottom: 5.3333333333rem;
    padding: 5.3333333333rem;
    border-radius: 2.6666666667rem
}

.about-list-box>div:last-child {
    margin-bottom: 0
}

.about-list-box p {
    font-weight: lighter
}

.about-list-box p strong {
    display: inline
}

.about-list-box strong {
    display: block;
    text-transform: uppercase;
    font-weight: 700
}

.brand-ambassador-img {
    display: block;
    width: 75%;
    margin: 0 auto 5.3333333333rem
}

.choose-baji-section {
    position: relative;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat
}

.ambassador-title {
    display: block;
    width: 80%;
    margin: 0 auto 5.3333333333rem;
    animation: titleShow 1s linear forwards
}

.ambassador-text-box {
    padding: 5.3333333333rem;
    background: #000;
    text-align: center
}

.ambassador-text-box>strong,.ambassador-text-box>p {
    display: block;
    margin-bottom: 4rem
}

.ambassador-text-box p:last-child {
    margin-bottom: 0
}

.ambassador-text-box li {
    margin-bottom: 6.6666666667rem
}

.ambassador-text-box li strong {
    font-size: 6.4rem;
    font-weight: lighter;
    color: #21b796
}

.ambassador-text-box li>p {
    font-size: 4rem
}

.ambassador-text-box li:last-child {
    margin-bottom: 0
}

.ambassador-subtitle {
    font-size: 6.9333333333rem;
    font-weight: 500;
    text-transform: uppercase;
    text-shadow: 0 3px 3px rgba(0,0,0,.6);
    text-align: center;
    line-height: 1.5;
    letter-spacing: 3px;
    background: #21b796
}

.ambassador-cont {
    position: relative;
    width: 85%;
    margin: 6.6666666667rem auto 0
}

.ambassador-cont .ambassador-text-box {
    background: #000c;
    border-radius: 4rem;
    margin-bottom: 5.3333333333rem
}

.ambassador-star {
    position: absolute;
    bottom: 0;
    right: -8rem;
    width: 60%;
    z-index: 0
}

.ambassador-btn {
    position: relative;
    display: block;
    width: 70%;
    margin: 0 auto 8rem;
    transition: .3s;
    line-height: 0
}

.ambassador-btn img:not(.ambassador-btn-icon) {
    display: block;
    width: 100%
}

.ambassador-btn .ambassador-btn-icon {
    width: 6%
}

.ambassador-btn .ambassador-btn-icon:first-child {
    left: 3%;
    animation: iconLeftMove .5s linear alternate-reverse infinite;
    transform: translateY(-50%)
}

.ambassador-btn .ambassador-btn-icon:last-child {
    right: 3%;
    animation: iconRightMove .5s linear alternate-reverse infinite;
    transform: translateY(-50%) scaleX(-1)
}

.ambassador-btn-icon {
    position: absolute;
    top: 50%;
    width: 6%
}

@keyframes iconLeftMove {
    to {
        left: 5%
    }
}

@keyframes iconRightMove {
    to {
        right: 5%
    }
}

.menu-first .menu-item .ambassador {
    padding: 1.0666666667rem .8rem
}

.ambassador-wrapper {
    position: relative;
    overflow: hidden;
    background: #000;
    color: #fff;
    line-height: 1.5;
    padding-top: 0
}

.ambassador-wrap {
    padding-bottom: 5.3333333333rem;
    vertical-align: top
}

.ambassador-wrap.sao-oudom .ambassador-inner-title h2 {
    background-image: linear-gradient(135deg,#dca800,#ff9145)
}

.ambassador-banner {
    width: 100%;
    height: auto
}

.about-contain {
    margin-bottom: 13.3333333333rem
}

.about-contain-background {
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 0
}

.about-contain-background img {
    width: 95%;
    opacity: .16;
    filter: grayscale(100%)
}

.ambassador-inner-box {
    width: 90%;
    margin: 5.3333333333rem auto;
    z-index: 1
}

.ambassador-inner-box>div {
    margin-bottom: 8rem
}

.ambassador-inner-box .ambassador-inner-title {
    margin-bottom: 4rem
}

.ambassador-inner-title {
    text-align: center
}

.ambassador-inner-title h2 {
    display: inline-block;
    background-image: linear-gradient(to top,#d7d7d7,#fff);
    font-size: 6.4rem;
    font-weight: 700;
    line-height: 1.5;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.ambassador-inner-title h3 {
    font-size: 3.4666666667rem;
    letter-spacing: .5333333333rem
}

.ambassador-inner-title h6 {
    font-weight: 700
}

.about-list-box,.about-list-box-inline {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 3.7333333333rem
}

.about-list-box h3,.about-list-box-inline h3 {
    margin-bottom: 5.3333333333rem
}

.about-list-box>div,.about-list-box-inline>div {
    padding: 5.3333333333rem;
    border-radius: 2.6666666667rem
}

.about-list-box p,.about-list-box-inline p {
    font-weight: lighter
}

.about-list-box p strong,.about-list-box-inline p strong {
    display: inline
}

.about-list-box strong,.about-list-box-inline strong {
    display: block;
    text-transform: uppercase;
    font-weight: 700
}

.about-list-box .about-title,.about-list-box-inline .about-title {
    padding-bottom: 2.6666666667rem;
    font-size: 3.2rem
}

.about-list-box .about-inner-main,.about-list-box .about-inner-secondary,.about-list-box-inline .about-inner-main,.about-list-box-inline .about-inner-secondary {
    display: inline-block;
    flex: 1 0 45%;
    margin: 2.1333333333rem
}

.about-list-box .about-inner,.about-list-box-inline .about-inner {
    background: linear-gradient(45deg,#d1480466,#725f0099,#41360099 66%,#5953004d)
}

.about-list-box ul li,.about-list-box-inline ul li {
    font-weight: 100
}

.about-list-box {
    margin: 10.6666666667rem 0
}

.about-inner-main {
    background: linear-gradient(135deg,#5953004d,#725f0099)
}

.about-inner-secondary {
    background: linear-gradient(135deg,#7f5d004d,#d1480466)
}

.font-color-card01 {
    color: #fbe666
}

.font-color-card02 {
    color: #e1004a
}

.star-list-box,.ambassafor-awards-box {
    margin: 5.3333333333rem auto 0;
    overflow-x: scroll
}

.star-list {
    width: 150%;
    text-align: center;
    font-size: 3.7333333333rem;
    line-height: 3
}

.star-list th,.star-list td {
    margin: 0 2.6666666667rem
}

.star-list th:first-child,.star-list td:first-child {
    text-align: left
}

.star-list th {
    font-weight: 400;
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #fff
}

.star-list td {
    font-weight: 700;
    font-size: 4.2666666667rem
}

.ambassador-article {
    text-align: left;
    width: 90%;
    margin: 0 auto;
    color: #ccc
}

.ambassador-article h6 {
    font-size: 3.7333333333rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 5.3333333333rem
}

.ambassador-article p {
    margin-bottom: 5.3333333333rem;
    font-size: 3.7333333333rem;
    text-align: justify
}

.ambassador-article p.bold {
    color: #fff;
    font-weight: 400
}

.ambassador-article .ambassador-text-list__title {
    margin: 5.3333333333rem 0
}

.ambassador-article .ambassador-text-list__item-text {
    margin: 0 0 5.3333333333rem 2.6666666667rem
}

.why-contain .ambassador-inner-title h2 {
    background-image: linear-gradient(135deg,#dca800,#ff9145)
}

.why-contain .ambassador-inner-box>.ambassador-video,.why-contain .ambassador-inner-box>.ambassador-video-shadow {
    margin: 0 auto
}

.ambassafor-awards {
    font-size: 3.7333333333rem;
    text-transform: uppercase;
    color: #ccc
}

.ambassafor-awards .bold {
    color: #fff;
    font-weight: 400
}

.ambassafor-awards li {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 5.3333333333rem
}

.ambassafor-awards span {
    flex: 0 0 16%;
    font-weight: lighter
}

.ambassafor-awards label {
    flex: 0 0 40%;
    margin-right: 5.3333333333rem
}

.ambassafor-awards p {
    flex: 1
}

.ambassador-video {
    position: relative;
    width: 100%;
    padding: 3.2rem;
    z-index: 1
}

.ambassador-video-inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 5.3333333333rem;
    padding-bottom: 55.9%;
    background: #000;
    border: .8rem solid #710562;
    overflow: hidden
}

.ambassador-video-inner iframe,.ambassador-video-inner object,.ambassador-video-inner embed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

.video-top,.video-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: -1
}

.video-top {
    top: 0;
    height: 100%
}

.video-bottom {
    bottom: 0;
    transform: scaleY(-1)
}

.ambassador-video-shadow {
    opacity: .2
}

.ambassador-video-shadow img {
    width: 100%
}

.photo-video-tab {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 8rem;
    padding-top: 2.6666666667rem;
    border-top: 1px solid rgba(255,255,255,.5)
}

.photo-video-tab li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 0 30%;
    padding: 0 1.3333333333rem;
    color: #ffffff80;
    line-height: 1.3;
    border-left: 1px solid rgba(255,255,255,.5);
    font-size: 3.7333333333rem;
    text-align: center;
    transition: .3s
}

.photo-video-tab li:first-child {
    border: 0
}

.photo-video-tab li[data-tab-current=current] {
    color: #fff
}

.photo-video-cont li {
    display: none
}

.photo-video-cont li[data-tab-current=current] {
    display: block
}

.album-list,.video-list {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start
}

.album-item {
    flex: 0 0 23.5%;
    margin: 0 2% 5.3333333333rem 0
}

.album-item:nth-child(4n) {
    margin-right: 0
}

.album-item p {
    text-align: left;
    color: #fff
}

.album {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 5.3333333333rem;
    border: 1px solid #fff
}

.album img {
    width: 100%;
    height: 100%
}

.album-inner {
    position: absolute;
    top: 1.3333333333rem;
    left: 1.3333333333rem;
    width: 100%;
    height: 100%;
    background-size: cover
}

.video-item {
    flex: 0 0 31%;
    margin: 0 2% 8rem 0;
    width: 100%;
    height: 56.25%
}

.video-item iframe,.video-item object,.video-item embed {
    width: 100%;
    height: 100%
}

.footy-league {
    background-color: #1d314fe6
}

.footy-league>* {
    position: relative;
    z-index: 2
}

.footy-league .bottom-bg {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1;
    opacity: .8;
    mix-blend-mode: screen;
    mask: linear-gradient(to bottom,transparent 0%,#000 100%);
    -webkit-mask: linear-gradient(to bottom,transparent 0%,#000 100%)
}

.footy-league .ambassador-banner {
    position: relative;
    font-size: 0;
    mask: linear-gradient(to bottom,#000 80%,transparent 100%);
    -webkit-mask: linear-gradient(to bottom,#000 80%,transparent 100%)
}

.footy-league .ambassador-banner:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: #1d314fe6;
    background-image: linear-gradient(to bottom,rgba(0,0,0,.5) 30%,transparent 100%);
    z-index: 2
}

.footy-league .ambassador-banner__logo {
    position: absolute;
    width: 40%;
    left: 0;
    right: 0;
    top: 15%;
    margin: 0 auto;
    z-index: 4
}

.footy-league .ambassador-banner__bg {
    width: 100%;
    position: relative;
    z-index: 1;
    mask: linear-gradient(to bottom,#000 90%,transparent 100%);
    -webkit-mask: linear-gradient(to bottom,#000 90%,transparent 100%)
}

.footy-league .ambassador-banner__bg-fx {
    position: absolute;
    width: 80%;
    left: 0;
    right: 0;
    top: -16%;
    margin: 0 auto;
    z-index: 3;
    mix-blend-mode: screen;
    mask: radial-gradient(closest-side ellipse,#000 45%,transparent 100%);
    -webkit-mask: radial-gradient(closest-side ellipse,#000 45%,transparent 100%);
    opacity: .5
}

.footy-league .ambassador-inner-box {
    margin-top: 0
}

.footy-league .ambassador-inner-title h3 {
    font-size: 3.2rem;
    font-weight: 700
}

.footy-league .ambassador-inner-title h2 {
    font-size: 5.3333333333rem;
    background: linear-gradient(to bottom right,#00a2c2,#005c9f);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.footy-league .about-contain {
    margin-top: -20%;
    position: relative;
    z-index: 3
}

.footy-league .about-contain .ambassador-article p {
    font-size: 3.2rem;
    letter-spacing: 0px
}

.footy-league .ambassador-photo-video-group {
    padding-top: 10%;
    border-top: 1px solid rgba(255,255,255,.4)
}

.amy-jackson {
    background: linear-gradient(to top,#0a293d,transparent 40%)
}

.amy-jackson .ambassador-inner-title h2 {
    background: linear-gradient(to right,#0382a7,#027a9c,#33e8d0 80%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.amy-jackson .about-inner-main {
    background: linear-gradient(to right,#00255280,#002552)
}

.amy-jackson .about-inner-secondary {
    background: linear-gradient(to right,#013056,#0cc5d680)
}

.amy-jackson .about-inner-secondary strong {
    font-size: 4rem
}

.amy-jackson .about-bj-03 {
    background: radial-gradient(farthest-corner at left bottom,#017faacc,#014185e6 25%,#0d019980)
}

.amy-jackson .ambassafor-awards .ambassafor-awards-block {
    flex: 0 0 42%;
    padding: 0 1.0666666667rem
}

.mia .about-contain {
    margin-bottom: 13.3333333333rem;
    background-repeat: no-repeat;
    background-position: 0 40%;
    background-size: 100%
}

.mia .ambassador-inner-title h2,.mia .ambassador-inner-title h3,.mia .ambassador-inner-title h6 {
    background: linear-gradient(to right,#ff9702,#e05b00 80%,#9d4400);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent
}

.mia .about-inner-main {
    background: linear-gradient(135deg,#ff8e00 0,#c66221,#d45e3e)
}

.mia .about-inner-secondary {
    background: linear-gradient(135deg,#c46523 0,#d37a1a,#d78d32)
}

.mia .about-bj-03 {
    background: linear-gradient(200deg,#ed590a 0,#eb9334,#e9584e)
}

.mia .ambassafor-awards p {
    font-weight: 400
}

.mia .photo-list {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-column-gap: 2.6666666667rem;
    width: 100%;
    height: 69.3333333333rem
}

.mia .photo-list div {
    background-size: cover
}

html:lang(en) .ambassador-wrapper {
    letter-spacing: 1px
}

html:lang(en) .ambassador-inner-title h2 {
    font-family: var(--custom-font),var(--custom-serif);
    font-weight: 700
}

html:lang(en) .ambassador-article p {
    letter-spacing: 1px
}

html:lang(en) .ambassador-text-list__item-text {
    margin: 0 0 5.3333333333rem 4rem
}

.tab.brand-tab {
    align-items: center;
    height: 13.3333333333rem;
    border: 0;
    background-color: transparent
}

.tab.brand-tab ul {
    padding-top: 0
}

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

.tab.brand-tab li {
    display: inline-flex;
    justify-items: center;
    align-items: center;
    width: 13.3333333333rem;
    height: 13.3333333333rem;
    margin-right: 1.3333333333rem;
    background: var(--tab-btn-bar-bg);
    text-align: center;
    border-radius: .8rem;
    line-height: 0;
    border: var(--tab-btn-bar-bg) .2666666667rem solid
}

.tab.brand-tab li .condition-groups__inner {
    padding: 2.1333333333rem
}

.tab.brand-tab li.active {
    border: var(--primary) .2666666667rem solid;
    background: var(--search-tab-brand-btn-bg)
}

.tab.brand-tab li.active:after {
    display: none
}

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

.tab.brand-tab .search-btn {
    background-color: var(--primary);
    border: none;
    border-radius: 0 1.3333333333rem 1.3333333333rem 0;
    box-shadow: 0 0 .5333333333rem .2666666667rem color-mix(in srgb,var(--ct-tab-brand-search-btn-shadow),transparent 50%)
}

.tab.brand-tab .search-btn .item-icon {
    width: 13.3333333333rem;
    height: 13.3333333333rem
}

.tab.brand-tab .icon-all {
    display: inline-block;
    width: 12.2666666667rem;
    height: 12.2666666667rem;
    background-size: 42%;
    background-repeat: no-repeat;
    background-position: center
}

.sort-bar {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 94.6666666667rem;
    margin: 0 auto;
    padding: 1.3333333333rem 0 4.5333333333rem;
    z-index: 1
}

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

.sort-bar__title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667rem;
    height: 4rem;
    margin-right: 1.3333333333rem;
    background-color: #281a70;
    vertical-align: middle
}

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

.sort-bar__box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 3.2rem;
    color: #fff
}

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

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

.sort-bar__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    padding: 1.8666666667rem 2.6666666667rem;
    border-radius: .8rem;
    background-color: #342e80;
    margin-bottom: 1.0666666667rem
}

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

.sort-bar__select__item {
    display: block;
    width: 100%;
    margin: 0 2.4rem;
    background-color: #342e80;
    transition: all .3s
}

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

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

.sort-bar__select__item.active {
    background-color: #3a26a2
}

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

.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 {
    background-color: var(--launch-bg);
    background-image: var(--launch-linear-bg)
}

.launch-game-loading.select-logo .center-logo-bg .center-logo {
    background-size: cover
}

.launch-game-loading.select-slot .center-logo-bg {
    background-color: var(--launch-bg);
    background-image: var(--launch-linear-bg)
}

.launch-game-loading.select-slot .center-logo-bg .center-logo {
    background-size: cover
}

.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 {
    background-position: 15% 46%;
    background-size: 260%
}

.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 {
    background-size: 120%
}

.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 {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    z-index: 1
}

.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: 44px;
    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: 5.3333333333rem;
    margin: 0 2.1333333333rem;
    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: 44px;
    height: 44px;
    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: 17.8666666667rem;
    height: 6.6666666667rem;
    margin: 0 2.1333333333rem;
    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 {
    background-size: contain;
    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: 44px;
    left: 0;
    width: 100%;
    height: calc(100% - 44px);
    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(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.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: 10.0449775112vmax
    }
}

* {
    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
}

.loading-mask .movie-box video {
    display: block;
    margin: auto;
    width: 21.3333333333rem;
    height: 21.3333333333rem
}

header {
    transition: all 0s
}

.wrap {
    display: block;
    position: inherit;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    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%
}

.footer {
    transition: .3s all
}

.footer.hide {
    opacity: 0
}

.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%
}

.login-info-box .forgetpassword-buttn {
    margin-top: 3px
}

.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
}

.banner {
    background-color: transparent
}

html.is-desktop .banner {
    overflow: hidden
}

.banner .banner-v1 {
    height: 26vh
}

.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.3333333333rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    transform-origin: center;
    transition: all .3s
}

.carousel-wrap.siblings .item {
    padding: 1.3333333333rem 1.3333333333rem 3.4666666667rem
}

.carousel-wrap.siblings .item .item-pic {
    border-radius: 1.3333333333rem
}

.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: 0;
    left: 0;
    padding: .5333333333rem;
    z-index: 1
}

.dot-group.style-dot li {
    display: block;
    margin-right: 1.3333333333rem;
    margin-left: 1.3333333333rem;
    width: 2.6666666667rem;
    height: 2.6666666667rem;
    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: 1.8666666667rem 0 .8rem
}

.dot-group.style-bar li {
    display: block;
    margin: 0 .8rem;
    width: 5.3333333333rem;
    height: .5333333333rem;
    background: #ffffff80;
    border-radius: 1.3333333333rem;
    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: 3px;
    cursor: pointer;
    position: absolute;
    z-index: 1
}

.button-prev {
    left: 0
}

.button-next {
    right: 0;
    transform: translateY(-50%) rotateY(180deg)
}

.button-prev:hover,.button-next:hover {
    opacity: .7
}

.button-prev img,.button-next img {
    display: block;
    max-width: 50px
}

@keyframes dot-ani {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(0)
    }
}

.carousel-wrap.debug {
    border: 1px solid white;
    overflow: visible
}

.carousel-wrap.debug .item-drag {
    border: 1px solid red
}

.carousel-wrap.debug .item-drag .item-left {
    border: 1px solid yellow
}

.carousel-wrap.debug .item-drag .item-left .item-wrap {
    border: 1px solid blue
}

.carousel-wrap.debug .button-prev,.carousel-wrap.debug .button-next {
    background-color: #fff3
}

.carousel-wrap.debug .item {
    border: 1px solid olive
}

.carousel-wrap.debug .item .item-pic {
    border: 1px solid purple
}

.nav-wrap {
    overflow: hidden
}

.nav-wrap .nav-content-wrap {
    display: block;
    width: 100%;
    overflow: visible
}

.nav-wrap .nav-content-wrap .nav-content-inner {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    transition: 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.3333333333rem
}

.nav .btn.selected p {
    color: #fff
}

.nav .btn.selected:before {
    box-shadow: 0 .5333333333rem 1.3333333333rem #0000004d
}

.nav .btn.selected:after {
    display: block
}

.nav.nav-auto {
    display: flex;
    overflow: auto
}

.nav.nav-auto .btn {
    width: auto;
    min-width: 21.3333333333rem
}

.layout-brand {
    padding: 0 2.6666666667rem
}

.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
}

.dialog-wrap .dialog-wrap-backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 1
}

.dialog-wrap .dialog-wrap-inner {
    border-radius: 1.3333333333rem;
    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: .5333333333rem;
    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(--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;
    font-weight: 500;
    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: 2.6666666667rem;
    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.3333333333rem
}

.date-bar .date-input .mdc-text-field__input {
    height: 100%
}

.date-bar .date-input .mdc-icon-button svg {
    fill: var(--color-rf-statusbox-input-date-text)
}

.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.3333333333rem;
    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(--color-rf-statusbox-input-date-text)
}

.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.3333333333rem;
    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)
}

.carousel-wrap .item-drag {
    padding-top: 44.9%
}

.limit-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100% - 8.5333333333rem);
    margin: auto;
    padding: 4.2666666667rem;
    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: 4.2666666667rem 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: 8rem 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
}

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

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
    }
}

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

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

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

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

body {
    background-color: var(--content-bg)
}

.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;
    transition: all .3s;
    background-color: var(--primary)
}

.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: 60%;
    text-indent: -2666.4rem
}

.reset-password-page .content {
    background-color: var(--content-bg);
    background-repeat: no-repeat;
    background-position: top 0 right 60%;
    font-family: var(--custom-font),var(--custom-serif);
    text-align: center
}

.reset-password-page .content .lock {
    width: 43%;
    height: auto;
    margin: 17.6rem auto 0
}

.reset-password-page .content .reset-password-txt {
    width: 90%;
    max-width: 94.6666666667rem;
    margin: 0 auto;
    padding: 4.2666666667rem 0
}

.reset-password-page .content .reset-password-txt p {
    color: var(--reset-password-txt);
    font-size: 3.7333333333rem;
    font-weight: 500;
    line-height: 1.6
}

.reset-password-page .tips-info {
    position: relative;
    flex: 1;
    margin: 4.2666666667rem 0;
    padding: 4.2666666667rem;
    border: .2666666667rem solid var(--tips-info-border);
    border-radius: 2.6666666667rem;
    background-color: var(--tips-info-bg);
    text-align: left;
    white-space: normal
}

.reset-password-page .tips-info .title-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.1333333333rem
}

.reset-password-page .tips-info h5 {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 92%;
    color: var(--tips-info-title)
}

.reset-password-page .tips-info h5:before {
    content: "!";
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin-right: 2.6666666667rem;
    border-radius: 50%;
    background-color: var(--tips-info-title);
    color: var(--tips-info-bg);
    text-align: center
}

.reset-password-page .tips-info h5 span {
    display: inline-block;
    flex: 1;
    width: calc(100% - 13.3333333333rem);
    vertical-align: text-top
}

.reset-password-page .tips-info a {
    text-decoration: none
}

.reset-password-page .tips-info p,.reset-password-page .tips-info b {
    display: block;
    padding-bottom: 5px;
    color: var(--tips-info-title);
    font-size: 3.2rem;
    line-height: 1.2;
    text-align: left
}

.reset-password-page .tips-info i {
    padding: 0 .8rem;
    color: var(--tips-info-i);
    font-weight: 700
}

.reset-password-page .tips-info ol,.reset-password-page .tips-info ol li {
    list-style: decimal outside
}

.reset-password-page .tips-info ul,.reset-password-page .tips-info ul li {
    list-style: disc outside
}

.reset-password-page .tips-info ul,.reset-password-page .tips-info ol {
    display: block;
    width: 100%;
    padding-left: 4rem;
    color: var(--tips-info-title);
    font-size: 3.2rem;
    line-height: 1.5;
    text-align: left
}

.reset-password-page .tips-info li {
    display: list-item
}

.reset-password-page .menu-box {
    position: relative;
    height: auto;
    margin: 4.2666666667rem;
    padding: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--form-box-bg)
}

.reset-password-page .input-group {
    display: flex;
    position: relative;
    flex-direction: column;
    padding-bottom: 3.2rem;
    font-size: 3.2rem;
    line-height: 1.5
}

.reset-password-page .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
}

.reset-password-page .input-group input {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333rem;
    padding: 0 11.7333333333rem 0 4.2666666667rem;
    transition: background .3s;
    border: .2666666667rem solid var(--form-input-bg);
    border-radius: 2.6666666667rem;
    background: var(--form-input-bg);
    color: var(--form-input-txt);
    font-family: var(--custom-font),var(--custom-serif);
    font-size: 4.8rem;
    font-weight: 400
}

.reset-password-page .input-group input::placeholder {
    color: var(--form-input-txt-placeholder)
}

.reset-password-page .input-group input:focus {
    border: .2666666667rem solid var(--form-input-border-focus)
}

.reset-password-page .input-group input:disabled {
    background: var(--form-input-bg-disabled);
    color: var(--form-input-txt-disabled)
}

.reset-password-page .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: url(/assets/images/icon-set/icon-cross-type09.svg) no-repeat center/30%;
    -webkit-mask: url(/assets/images/icon-set/icon-cross-type09.svg) no-repeat center/30%
}

.reset-password-page .input-group .clear.active {
    opacity: 1
}

.reset-password-page .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%
}

.reset-password-page .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%
}

.reset-password-page .input-group.password .clear {
    right: 11.7333333333rem
}

.reset-password-page .button {
    position: relative;
    width: calc(100% - 8.5333333333rem);
    height: 13.3333333333rem;
    margin: 4.2666666667rem;
    border-radius: 2.6666666667rem;
    background: var(--btn-main-bg);
    color: var(--btn-main-txt);
    font-size: 5.3333333333rem;
    font-weight: 500;
    line-height: 13.3333333333rem;
    text-align: center
}

.reset-password-page .button a {
    display: block;
    padding: 0 4rem;
    overflow: hidden;
    color: var(--btn-main-txt);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.reset-password-page .accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4.2666666667rem 4.2666666667rem 0;
    overflow: hidden;
    border-radius: 2.6666666667rem;
    background: var(--accordion-bg)
}

.reset-password-page .accordion-wrap.show .a-content {
    height: 100%;
    max-height: 80rem;
    opacity: 1
}

.reset-password-page .accordion-wrap.show .a-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.reset-password-page .accordion-wrap .a-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4.2666666667rem;
    background: var(--accordion-title-bg);
    color: var(--accordion-title);
    font-size: 4rem;
    text-align: left
}

.reset-password-page .accordion-wrap .a-title:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667rem;
    width: calc(100% - 8.5333333333rem);
    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 2.6666666667rem
}

.reset-password-page .accordion-wrap .a-title .a-text {
    flex-grow: 1;
    font-weight: 500
}

.reset-password-page .accordion-wrap .a-title .a-icon {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    margin-right: 4.2666666667rem;
    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%
}

.reset-password-page .accordion-wrap .a-title .a-arrow {
    width: 3.7333333333rem;
    height: 3.7333333333rem;
    transition: all .3s;
    background: var(--accordion-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%
}

.reset-password-page .accordion-wrap .a-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s,opacity .5s;
    opacity: 0;
    color: var(--accordion-txt);
    text-align: left
}

.reset-password-page .accordion-wrap .a-content ol.a-list {
    padding: 4.2666666667rem 4.2666666667rem 4.2666666667rem 8.5333333333rem
}

.reset-password-page .accordion-wrap .a-content .a-list {
    padding: 4.2666666667rem 0 0;
    list-style: auto
}

.reset-password-page .accordion-wrap .a-content .a-item {
    padding: 1.0666666667rem 0;
    font-size: 3.7333333333rem;
    font-weight: 400;
    line-height: 1.3
}

.reset-password-page .error .a-arrow {
    display: none
}

::-webkit-scrollbar {
    width: 1.3333333333rem;
    height: 1.3333333333rem
}

::-webkit-scrollbar-thumb {
    background: #5555554d;
    border-radius: 1.3333333333rem
}

::-webkit-scrollbar-thumb:hover {
    background: #5555554d
}

::-webkit-scrollbar-track {
    background: transparent
}

.nav-wrap .nav-content-wrap .nav-content-inner {
    transition: all .75s ease-in-out
}

.layout-brand {
    padding: 0
}

.layout-desktop__content .tab.search-tab,.layout-desktop__content .tab.filter-tab {
    width: 100%;
    margin: 5.3333333333rem auto
}

.layout-desktop__content .tab.search-tab ul li,.layout-desktop__content .tab.filter-tab ul li {
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .tab.search-tab ul li:hover,.layout-desktop__content .tab.filter-tab ul li:hover {
    opacity: .7
}

.layout-desktop__content .tab.search-tab ul li label,.layout-desktop__content .tab.filter-tab ul li label {
    cursor: pointer;
    opacity: 1
}

.layout-desktop__content .tab.search-tab ul li label:hover,.layout-desktop__content .tab.filter-tab ul li label:hover {
    opacity: .7
}

.layout-desktop__content .tab ul li {
    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%
}

.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
}

.popup-page-main {
    width: 100rem;
    max-height: 700px;
    border-radius: 2.6666666667rem
}

@supports (height: 100dvh) {
    .popup-page-main {
        height:calc(100dvh - 16rem)
    }
}

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

.popup-page-main .tab.search-tab ul li,.popup-page-main .tab.filter-tab ul li {
    cursor: pointer;
    opacity: 1
}

.popup-page-main .tab.search-tab ul li:hover,.popup-page-main .tab.filter-tab ul li:hover {
    opacity: .7
}

.popup-page-main .tab.search-tab ul li label,.popup-page-main .tab.filter-tab ul li label {
    cursor: pointer;
    opacity: 1
}

.popup-page-main .tab.search-tab ul li label:hover,.popup-page-main .tab.filter-tab ul li label:hover {
    opacity: .7
}

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 .main-wrapper,.layout-desktop .content-box {
    max-width: var(--layout-desktop-content-max-width, 1200px);
    width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto
}

.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
}

.footer-top {
    max-width: 1200px
}

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

.footer-top .footer-social ul {
    grid-template-columns: repeat(25,1fr)
}

.footer-top .about-us ul {
    display: flex
}

.footer-top .about-us ul li {
    max-width: 150px
}

.float-banner {
    bottom: 30px;
    left: 30px
}

.float-banner .close {
    cursor: pointer;
    opacity: 1
}

.float-banner .close:hover {
    opacity: .7
}

.float-banner img {
    min-width: 120px;
    min-height: 120px;
    max-width: 240px;
    max-height: 240px;
    cursor: pointer
}

.pop-wrap {
    max-width: 500px
}

.pop-wrap3 {
    max-width: 375px
}

.pop-language {
    width: 100%;
    height: auto;
    border-radius: 2.6666666667rem;
    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: 500px;
    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%
}

.layout-desktop__content .searchpage {
    display: flex;
    flex-direction: column;
    top: var(--header-desktop-height, 60px);
    bottom: 0;
    width: 450px;
    border: 2px solid var(--desktop-searchpage-border);
    border-radius: 1.3333333333rem;
    box-shadow: 1px 2.6px 3.6px #00000023,2.6px 7.1px 10px #00000032,6.3px 17.2px 24.1px #00000041,21px 57px 80px #00000063
}

.layout-desktop__content .searchpage .button {
    font-size: 16px
}

.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: 5px
}

.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 {
    position: relative;
    padding: 15px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 5px
}

.layout-desktop__content .searchpage-main h2 {
    margin-bottom: 2.6666666667rem;
    font-size: 14px
}

.layout-desktop__content .searchpage-main .check-group {
    padding: 5.3333333333rem
}

.layout-desktop__content .check-group {
    background: var(--pop-search-inner-bg)
}

.layout-desktop__content .check-group:nth-child(1) {
    border-radius: 5px 5px 0 0
}

.layout-desktop__content .check-group:last-child {
    border-radius: 0 0 5px 5px
}

.layout-desktop__content .search-checkbox-group ul {
    grid-gap: 8px;
    margin-bottom: 0
}

.layout-desktop__content .search-checkbox-group [type=checkbox]+label,.layout-desktop__content .search-checkbox-group [type=radio]+label {
    padding: 0 4rem;
    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: relative;
    right: auto;
    top: auto;
    transform: translate(0);
    padding: 0 15px 35px
}

.layout-desktop__content .searchpage-bar.active {
    right: auto
}

.games .jackpot {
    position: relative;
    width: calc(100% - 5.3333333333rem);
    height: 66.6666666667rem;
    margin: 5.3333333333rem auto
}

.games .jackpot h2 {
    margin-bottom: 5.3333333333rem;
    font-size: 5.8666666667rem
}

.games .games-main {
    padding: 0;
    grid-template-columns: repeat(auto-fill,minmax(48rem,1fr));
    column-gap: 2.6666666667rem;
    row-gap: 5.3333333333rem
}

.games .games-box {
    width: 48rem;
    margin: auto;
    cursor: pointer
}

.games .games-box:hover .pic img {
    transform: scale(1.2)
}

.games .games-box .pic img {
    transition: transform .3s ease-in;
    transform: scale(1)
}

.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: 4.2666666667rem 4.2666666667rem 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: .8rem;
    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(--layout-desktop-content-max-width, 1200px);
    width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
    transition: width 1s;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto 16px
}

.games-empty-container .top-inner {
    max-width: 500px;
    padding: 20px
}

.btn-goback {
    padding: 2.1333333333rem 4.2666666667rem 2.1333333333rem 3.2rem;
    font-size: 3.4666666667rem;
    cursor: pointer;
    opacity: 1
}

.btn-goback:hover {
    opacity: .7
}

.icon-goback {
    width: 4rem;
    height: 4rem
}

.select {
    cursor: pointer
}

[lang=km] .auth-container__button {
    padding: 5px 10px!important
}

.register-checkbox[type=checkbox] {
    cursor: pointer;
    opacity: 1
}

.register-checkbox[type=checkbox]:hover {
    opacity: .7
}

.register-checkbox:after {
    left: .5333333333rem;
    top: .5333333333rem
}

.register-checkbox~span {
    cursor: pointer;
    opacity: 1
}

.register-checkbox~span:hover {
    opacity: .7
}

.popup-page--fullheight .popup-page__main {
    height: auto;
    max-height: 100%
}

.popup-page .popup-page-main__container {
    position: unset;
    margin-top: 13.3333333333rem;
    padding-bottom: 6.6666666667rem
}

.nav-wrap .content-box {
    padding-top: 5.0666666667rem
}

.nav-wrap .is-login.content-box:has(.games) {
    padding-top: 0
}

.nav-wrap .card2 {
    padding-top: .5333333333rem
}

.nav-wrap .card2 .games-main.main-vertical,.nav-wrap .card2 .games-main.main-vertical.exclusiveGame {
    grid-template-columns: repeat(8,1fr);
    gap: 5.3333333333rem 2.6666666667rem
}

.nav-wrap .card2 li p {
    font-size: 5.0666666667rem!important;
    padding-bottom: 4.2666666667rem!important
}

@media screen and (max-width: 1200px) {
    .nav-wrap .card2 li p {
        font-size:4.2666666667rem!important
    }
}

.header-desktop .auth-container__button {
    font-family: var(--custom-font),var(--custom-serif)
}

.custom-banner-wrapper .carousel-frame-alpha__navigation {
    width: var(--layout-desktop-content-max-width, 1200px)!important
}

.custom-banner-wrapper--thin {
    margin: 0 auto
}

.top-banner-wrapper .banner,.top-banner-wrapper .banner .banner-v1,.top-banner-wrapper .banner .banner-v1 .carousel-wrap {
    
}

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

.top-banner-wrapper .banner .banner-v1 .carousel-wrap .item .item-pic {
    
    border-radius: 0
}

.nextevent {
    margin: 0 auto;
    padding: 0 2.6666666667rem 4rem
}

.nextevent .banner {
    width: 100%
}

.nextevent .banner .banner-v1 .carousel-wrap {
    height: 58.6666666667rem
}

.nextevent .banner .banner-v1 .carousel-wrap .item {
    cursor: pointer;
    opacity: 1
}

.nextevent .banner .banner-v1 .carousel-wrap .item:hover {
    opacity: .7
}

.nextevent .banner .banner-v1 .carousel-wrap .item .item-pic {
    height: auto;
    padding: 22%
}

.marquee-wrapper {
    background: 0
}

.marquee-wrapper.marquee-clickable li {
    cursor: pointer
}

.pop-wrap .detail-banner img {
    min-height: 28rem;
    object-fit: cover
}

.layout-desktop,.header-desktop-user-dropdown {
    font-family: var(--custom-font),var(--custom-serif)
}

.left-menu .nav-item__text {
    font-size: 14px!important
}

.nav-shell:before {
    background: none
}

.nav-category {
    padding: 0;
    margin-left: 0;
    background: 0;
    border: 0
}

.nav-category .nav-inner {
    width: 100%;
    overflow: auto;
    height: 12.8rem
}

.nav-category .nav-inner .btn {
    cursor: pointer;
    opacity: 1
}

.nav-category .nav-inner .btn:hover {
    opacity: .7
}

.nav-fixed {
    left: 0
}

.nav-fixed-inner-cont {
    cursor: pointer;
    opacity: 1
}

.nav-fixed-inner-cont:hover {
    opacity: .7
}

.nav.nav-auto {
    overflow: hidden
}

.content-title+* {
    margin: 0 2.6666666667rem
}

.card2 ul {
    grid-template-columns: repeat(8,1fr);
    gap: 5.3333333333rem 2.6666666667rem
}

.card2.no-border-radius li {
    border-radius: 0
}

.card2 li {
    transform: translateY(0);
    transition: transform .2s ease-in-out
}

.card2 li:hover {
    transform: translateY(-4%)
}

.card-area ul {
    grid-template-columns: repeat(3,1fr)
}

.card-area li:has(.card-area__options):hover {
    opacity: 1!important;
    transform: none
}

.card-area__options .option:hover {
    transform: scale(1.1)!important
}

.card-area__options .option:hover:before {
    box-shadow: #2226 0 4px 12px
}

.card-area__options .option:hover:first-child:nth-last-child(1) {
    transform: scale(1.1) translate(-4rem)!important
}

.card-area__options .option:hover:first-child:nth-last-child(2),.card-area__options .option:hover:first-child:nth-last-child(2)~.option {
    transform: scale(1.1) translate(-2.6666666667rem)!important
}

.card1 li,.card2 li {
    cursor: pointer;
    opacity: 1
}

.card1 li:hover,.card2 li:hover {
    opacity: .7
}

.footer {
    flex: none
}

.footer-top {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto 1fr;
    grid-template-areas: "sponsor ambassador" "pay pay" "safe license" "social social";
    max-width: 1200px
}

.footer-top ul {
    justify-content: flex-start
}

.footer-top .list--sponsor-data {
    grid-area: sponsor
}

.footer-top .list--ambassador-data {
    grid-area: ambassador
}

.footer-top .list--pay-data {
    grid-area: pay
}

.footer-top .list--safe-data {
    grid-area: safe
}

.footer-top .list--social-data {
    grid-area: social
}

.footer-top .list--license-data {
    grid-area: license
}

.footer-bottom {
    max-width: 1200px;
    align-items: flex-start
}

.footer-bottom__descrp {
    text-align: start
}

.footer-bottom .logoarea {
    flex-wrap: wrap;
    flex-direction: row
}

.footer-bottom .logoarea__slogan,.footer-bottom .logoarea__copyright {
    margin: 0 0 0 5.3333333333rem
}

.layout-desktop .ambassador-navigation .flex-prev {
    left: 8%;
    transition: left .3s ease-in .2s
}

.layout-desktop--menu-open .ambassador-navigation .flex-prev {
    left: 21%;
    transition: left .3s linear
}

.about-contain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: var(--layout-desktop-content-max-width, 1200px);
    width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
    height: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-bottom: 40px;
    min-height: 600px
}

.about-contain-background img {
    width: auto
}

.why-contain {
    margin: 0 auto;
    max-width: var(--layout-desktop-content-max-width, 1200px);
    width: calc(100% - var(--layout-desktop-content-limit-gap, 15px) * 2);
    height: 100%
}

.ambassador-video {
    width: 60%
}

.about-list-box-inline {
    flex-direction: row
}

.about-list-box-inline .about-inner-main {
    margin-right: 10px
}

.about-inner h6 {
    text-align: left
}

.about-inner-secondary {
    height: 40rem
}

.mia .about-contain {
    max-width: 100%;
    width: 100%;
    background-position: 0 120%
}

.mia .ambassador-inner-box {
    max-width: var(--layout-desktop-content-max-width, 1200px);
    width: 70%
}

.mia .why-contain .ambassador-inner-box {
    width: 85%
}

.mia .about-inner-main,.mia .about-inner-secondary {
    min-height: 40rem
}

.mia .ambassador-article h6 {
    font-size: 6.4rem
}

.mia .photo-list {
    grid-column-gap: 5.3333333333rem;
    height: 208rem
}

.ambassafor-awards span {
    flex: 0 0 8%
}

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

.layout-desktop__content .tab.brand-tab {
    width: calc(100% - 2.6666666667rem);
    height: 17.3333333333rem
}

.layout-desktop__content .tab.brand-tab ul li {
    min-width: 13.3333333333rem;
    height: 12.8rem
}

.layout-desktop__content .tab.brand-tab .search-btn .item-icon {
    height: 100%
}

.sort-bar {
    width: calc(100% - 2.6666666667rem)
}

.limit-content {
    flex: none;
    max-width: 273.0666666667rem
}

.limit-content .logo-box {
    width: 26.6666666667rem;
    height: 26.6666666667rem
}

.limit-content h1 {
    margin: 3.2rem 0;
    font-size: 13.3333333333rem
}

.limit-content h2 {
    font-size: 13.3333333333rem
}

.limit-content h3 {
    margin: 3.2rem 0;
    font-size: 5.8666666667rem
}

.limit-content h4 {
    margin: 4.2666666667rem 0;
    font-size: 5.8666666667rem;
    line-height: 7.4666666667rem
}