:root {
    --main-bg: #000;
    --modal-title-bg: #3C3C3C;
    --main-text-color: #fff;
    --sub-text-color: #ffd053;
    --game-menu-bg: #3C3C3C;
    --game-menu-bg-select: #e66a64;
    --menu-bg: #292727;
    --menu-text-color: #7C7979;
    --menu-text-color-select: #ffd053;
    --title-linear-gradient-left: #3C3C3C;
    --title-linear-gradient-right: #3C3C3C;
    --title-linear-gradient-top: #3C3C3C;
    --title-linear-gradient-bottom: #3C3C3C;
    --main-button-bg: #e66a64;
    --sub-button-bg: #3C3C3C;
    --side-menu-bg: #272727;
    --page-bg: #fff;
    --promotion-content-bg: #fff;
    --page-text-color: #3C3C3C;
    --promotion-content-color: #000;
    --header-bg: #3C3C3C;
    --register-bg: #000;
    --login-bg: #fff;
    --popup-text-color: #fff
}

.r-container-component {
    display: block;
    padding-bottom: 67px
}

.r-footer-component {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15
}

.r-footer-component ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
    background-color: var(--menu-bg)
}

.r-footer-component ul li {
    position: relative;
    display: inline-block;
    width: 25%;
    height: 67px;
    vertical-align: top
}

.r-footer-component ul li+li:before {
    content: '';
    position: absolute;
    top: 0;
    left: -.5px;
    bottom: 0;
    width: 1px;
    background-color: var(--menu-text-color);
    opacity: .5
}

.r-footer-component ul li a {
    display: block;
    height: 100%;
    padding-top: 10px;
    font-size: 12px;
    color: var(--menu-text-color);
    text-align: center;
    text-decoration: none
}

.r-footer-component ul li a:hover,
.r-footer-component ul li a:focus {
    color: var(--menu-text-color);
    text-decoration: none
}

.r-footer-component ul li a i {
    font-size: 25px
}

.r-footer-component ul li a span {
    display: block;
    margin-top: 4px
}

.r-footer-component ul.menu-entire li {
    width: 20%
}

.r-footer-component ul li.active a,
.r-footer-component ul li.active a i {
    color: var(--menu-text-color-select)
}

.r-footer-component ul li.point a {
    position: relative
}

.r-footer-component ul li.point a:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 27px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #f00
}

.rgc-game-category-component .game-category {
    display: flex;
    padding: 10px 0;
    margin: 0 5px;
    justify-content: space-between
}

.rgc-game-category-component .game-category .section-category {
    width: 24%
}

.rgc-game-category-component .game-category .category-item {
    margin: 0 0 6px;
    text-align: center;
    font-size: 13px;
    word-break: break-all;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    border-radius: 5px;
    color: var(--main-text-color);
    background-color: var(--game-menu-bg)
}

.rgc-game-category-component .game-category .category-item:last-child {
    margin-bottom: 0
}

.rgc-game-category-component .game-category .category-item i {
    width: 16px;
    height: 16px;
    margin-right: 3px;
    background: var(--main-text-color);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    opacity: .6
}

.rgc-game-category-component .game-category .category-item.active {
    background-color: var(--game-menu-bg-select)
}

.rgc-game-category-component .game-category .category-item.active i {
    opacity: 1
}

.rgc-game-category-component .game-category .section-game {
    width: 74%;
    height: 70vh;
    padding-left: 1%;
    overflow: scroll
}

.rgc-game-category-component .game-category .game-part .game-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-x: hidden
}

.rgc-game-category-component .game-category .game-part .game-item {
    position: relative;
    width: 49%;
    margin: 0 0 2%;
    border-radius: 5px
}

.rgc-game-category-component .game-category .game-part .game-item i {
    position: absolute;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top
}

.rgc-game-category-component .game-category .game-part .game-item i.hot {
    top: 0;
    left: 0;
    width: 7vw;
    height: 7vw
}

.rgc-game-category-component .game-category .game-part .game-item i.new {
    bottom: 30%;
    right: 0;
    width: 6.23vw;
    height: 9vw
}

.rgc-game-category-component .game-category .game-part .game-item i.event {
    top: 0;
    right: 0;
    width: 10vw;
    height: 10vw
}

.rgc-game-category-component .game-category .game-part .game-item img {
    width: 100%
}

@media(min-width:768px) {
    .rgc-game-category-component .game-category .section-game {
        height: 82vh
    }
}

.r-header-component {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: block;
    background-color: var(--main-bg)
}

.r-header-component .top {
    height: 60px;
    font-size: 0;
    background-color: var(--header-bg)
}

.r-header-component .top:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

.r-header-component .top-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle
}

.r-header-component .bars {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px
}

.r-header-component .bars:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

.r-header-component .bars span {
    vertical-align: middle;
    color: var(--main-text-color);
    font-size: 24px
}

.r-header-component .logo {
    text-align: center
}

.r-header-component .logo a {
    display: inline-block;
    vertical-align: middle
}

.r-header-component .logo a img {
    max-width: 145px;
    max-height: 60px
}

.r-header-component .domain {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 20px
}

.r-header-component .domain:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle
}

.r-header-component .domain>div {
    display: inline-block;
    vertical-align: middle;
    color: var(--main-text-color);
    font-size: 12px;
    text-align: center;
    line-height: normal
}

.r-header-component .domain span {
    color: var(--sub-text-color)
}

.r-header-component .slide-banner .slide-wrapper.no-left-shift .slick-track {
    left: 0 !important
}

.r-header-component .slide-banner .slick-slide {
    padding: 10px 0;
    -moz-transform: scale(.92);
    -ms-transform: scale(.92);
    -o-transform: scale(.92);
    -webkit-transform: scale(.92);
    transform: scale(.92);
    -moz-transition: transform ease .3s, opacity ease .3s;
    -o-transition: transform ease .3s, opacity ease .3s;
    -webkit-transition: transform ease .3s, opacity ease .3s;
    transition: transform ease .3s, opacity ease .3s;
    opacity: .5;
    outline: none
}

.r-header-component .slide-banner .slick-slide.slick-center {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.r-header-component .slide-banner .slick-slide img {
    max-width: 100%;
    -moz-box-shadow: 0 5px 10px #000;
    -webkit-box-shadow: 0 5px 10px #000;
    box-shadow: 0 5px 10px #000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.r-header-component .news {
    position: relative;
    height: 30px;
    padding: 0 10px 0 50px;
    color: var(--popup-text-color);
    font-size: 12px;
    line-height: 30px
}

.r-header-component .news>span {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    color: var(--sub-text-color);
    text-align: center
}

.r-header-component .news .marquee {
    overflow: hidden
}

.r-header-component .news .marquee span {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px;
    white-space: nowrap
}

.r-nav-component .mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 16;
    display: none
}

.r-nav-component .nav {
    position: fixed;
    top: 0;
    left: -200px;
    bottom: 0;
    z-index: 54;
    width: 180px;
    padding-top: 45px;
    background-color: var(--side-menu-bg);
    -moz-transition: left ease .3s;
    -o-transition: left ease .3s;
    -webkit-transition: left ease .3s;
    transition: left ease .3s;
    overflow-y: auto
}

.r-nav-component .nav .closed {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 25px;
    height: 25px;
    color: #000;
    font-size: 15px;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.r-nav-component .nav .extra-info {
    padding-left: 14px;
    padding-bottom: 10px;
    color: var(--main-text-color);
    font-size: 12px;
    line-height: 2;
    border-bottom: 1px solid var(--menu-text-color)
}

.r-nav-component .nav .menu {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.r-nav-component .nav .menu li {
    position: relative;
    height: 41px;
    color: var(--main-text-color);
    font-size: 14px;
    line-height: 40px;
    border-bottom: 1px solid var(--menu-text-color)
}

.r-nav-component .nav .menu li i {
    position: absolute;
    top: 11px;
    left: 5px;
    width: 36px;
    font-size: 18px;
    text-align: center
}

.r-nav-component .nav .menu li img.side-icon {
    position: absolute;
    top: 11px;
    left: 0;
    right: 135px;
    display: block;
    margin: 0 auto;
    max-width: 36px;
    height: 18px
}

.r-nav-component .nav .menu li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 45px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.r-nav-component .nav .menu li select {
    margin-left: 45px;
    color: #000
}

.r-nav-component .active .mask {
    display: block
}

.r-nav-component .active .nav {
    left: 0
}

html,
body {
    position: relative;
    background-color: var(--main-bg)
}

body {
    font-size: 14px;
    font-family: Arial, 'Microsoft YaHei';
    color: #000
}

body.single-page {
    height: 100%;
    overflow: auto
}

body.single-page .s-app-download-component,
body.single-page root-component>*:not(.v-modal-page-component),
body.single-page ..s-modal-page-component,
body.single-page s-activity-entrance-component {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden
}

#render-body {
    min-height: 100vh;
    padding: 90px 0 67px;
    background-color: var(--page-bg)
}

#page-title,
.page-title {
    color: var(--main-text-color);
    background: -moz-linear-gradient(left, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%);
    background: -webkit-linear-gradient(left, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%);
    background: linear-gradient(to right, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%)
}

.base-background {
    background-color: var(--modal-title-bg)
}

.base-active:active,
.base-active.active {
    background-color: var(--modal-title-bg)
}

.modal-announcement {
    position: fixed;
    top: 60px
}

.panel-custom {
    border: 1px solid #ccc
}

#announcement-content .modal-announcement-content>.mac-title,
#promotion .discount>.content .content-bar,
.panel-custom>.panel-heading {
    color: var(--main-text-color);
    background: var(--modal-title-bg)
}

#promotion .navtab .btn,
l-activity-component .ad-category-list li {
    opacity: .5;
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

#promotion .navtab .btn.btn-success,
l-activity-component .ad-category-list li.active {
    opacity: 1;
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

#promotion ul.top-link li a.activity,
#promotion ul.top-link li a.wallet {
    color: var(--main-text-color);
    background-color: var(--sub-button-bg)
}

#promotion .discount>.content:before,
.announcement-content-bg {
    background: var(--promotion-content-bg)
}

#promotion .discount>.content .content-text,
.announcement-content-color {
    color: var(--promotion-content-color)
}

mc-layout-component .mc-icon-color {
    color: var(--page-text-color)
}

mc-layout-component .mc-border-color {
    border-color: var(--page-text-color)
}

mc-layout-component .mc-text-color {
    color: var(--page-text-color)
}

#modal-page .modal-page-mask,
.modal-page-open #modal-page .modal-page-mask {
    z-index: 14;
    padding-bottom: 67px
}

#modal-page .modal-page-mask>div {
    background-color: var(--page-bg)
}

#modal-page .modal-page-title {
    color: var(--main-text-color);
    background-color: var(--modal-title-bg)
}

..s-modal-page-component#modal-page .mp-icon-color {
    color: var(--page-text-color)
}

..s-modal-page-component#modal-page .mp-border-color {
    border-color: var(--page-text-color)
}

..s-modal-page-component#modal-page .mp-text-color {
    color: var(--page-text-color)
}

yuebao-layout-component .button-list li {
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

gbc-layout-component .button-list li {
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

body.display-promotion-game #render-body {
    padding-bottom: 115px
}

body .s-promotion-game-component {
    bottom: 67px;
    z-index: 10
}

body .s-promotion-game-component .promotion-game-list {
    color: #6a6a6a;
    background-color: rgba(255, 255, 255, .9)
}

body .s-promotion-game-component .switch {
    color: #000;
    background-color: #c3c3c3;
    font-weight: normal
}

body .s-promotion-game-component .switch.toggle-color {
    color: #fff
}

body .s-promotion-game-component .switch:before {
    border-color: transparent transparent #c3c3c3 transparent
}

body .s-promotion-game-component .switch:after {
    border-color: transparent transparent transparent #c3c3c3
}

body .s-promotion-game-component .switch.isShow {
    color: #000;
    background-color: rgba(255, 255, 255, .9);
    font-weight: normal
}

body .s-promotion-game-component .switch.isShow:before {
    border-color: transparent transparent rgba(255, 255, 255, .9) transparent
}

body .s-promotion-game-component .switch.isShow:after {
    border-color: transparent transparent transparent rgba(255, 255, 255, .9)
}

.custom-modal .cms-modal-footer .btn.btn-cancel {
    background-color: var(--sub-button-bg)
}

.custom-modal .cms-modal-footer .btn.btn-confirm {
    background-color: var(--main-button-bg)
}

sm-layout-component .btn.btn-primary,
.modal.site-mail .btn.btn-primary {
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

sm-layout-component .mail-content .nav>li>a {
    color: var(--main-button-bg)
}

sm-layout-component .text-info {
    color: var(--modal-title-bg)
}

.financial-layout-component div.tab-section ul.hasNote {
    padding: 18px 0 0
}

.financial-layout-component div.tab-section ul li.active span {
    color: var(--page-text-color);
    background-color: var(--page-bg)
}

.financial-layout-component div.tab-section ul li i.note {
    z-index: 1
}

.financial-layout-component financial-recommend-component {
    color: var(--main-text-color);
    background: var(--modal-title-bg)
}

.financial-layout-component financial-list-component ul li {
    color: var(--page-text-color)
}

company-deposit-layout-component div.top-section {
    color: var(--main-text-color);
    background: var(--modal-title-bg)
}

company-deposit-layout-component div.step-section ul li.active {
    color: var(--main-button-bg)
}

company-deposit-layout-component div.step-section ul li.active .step {
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

company-deposit-account-component div.select-bank a.active {
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

company-deposit-account-component div.deposit-tip {
    color: var(--main-button-bg)
}

company-deposit-layout-component button.btn.btn-light {
    background-color: var(--main-button-bg)
}

#financial .custom-deposit-color {
    color: var(--main-text-color)
}

#financial .custom-deposit-bg {
    background-color: var(--sub-button-bg)
}

#financial .custom-deposit-border-color {
    border-color: var(--sub-button-bg)
}

#financial .custom-deposit-border-color-i {
    border-color: var(--sub-button-bg) !important
}

#financial .custom-deposit-color-r {
    color: var(--sub-button-bg)
}

#financial .custom-deposit-bg-r {
    background-color: var(--main-text-color)
}

#financial .custom-deposit-hover:hover {
    color: var(--main-text-color);
    background-color: var(--sub-button-bg)
}

#financial .custom-deposit-tip-color {
    color: var(--sub-button-bg)
}

br.p-layout-component .btn-primary,
br.p-layout-component .btn-primary:active,
br.p-layout-component .btn-primary:hover,
br.p-layout-component .btn-primary:active:hover {
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

#lobby {
    z-index: 0
}

#lobby .btn-favorite {
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

#lobby #search {
    background: -moz-linear-gradient(top, var(--title-linear-gradient-top) 0, var(--title-linear-gradient-bottom) 100%);
    background: -webkit-linear-gradient(top, var(--title-linear-gradient-top) 0, var(--title-linear-gradient-bottom) 100%);
    background: linear-gradient(to bottom, var(--title-linear-gradient-top) 0, var(--title-linear-gradient-bottom) 100%)
}

#lobby #search select {
    color: #757575
}

#lobby .game-list li,
fg-layout-component .game-list li {
    color: var(--page-text-color)
}

#lobby ul.game-list li .pic img {
    z-index: auto
}

#lobby ul.game-list li.PNG:before {
    z-index: auto
}

.s-game-favorite-component .click-area.favorited {
    color: var(--page-text-color)
}

#lobby #recommend-list .slick-dots li button:before {
    color: var(--page-text-color);
    opacity: .6
}

body.lobby-page #render-body {
    min-height: 100vh;
    background-color: var(--main-bg)
}

body.lobby-page #render-body:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .35)
}

body.lobby-page.is-lobby #render-body,
body.lobby-page.is-lobby #render-body:before {
    background-color: var(--page-bg)
}

.lgc-layout-component .category-nav {
    color: var(--main-text-color);
    background: -moz-linear-gradient(left, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%);
    background: -webkit-linear-gradient(left, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%);
    background: linear-gradient(to right, var(--title-linear-gradient-left) 0, var(--title-linear-gradient-right) 100%)
}

.lgc-layout-component .category-nav li {
    position: relative
}

.lgc-layout-component .category-nav li.active:before {
    background-color: var(--main-text-color)
}

.lgc-layout-component .category-nav li.active span {
    color: var(--title-linear-gradient-right);
    background-color: transparent
}

.lgc-layout-component #search:before,
.lgc-layout-component #search:after {
    background-color: var(--main-text-color);
    opacity: .1
}

.lgc-layout-component #search>div.is-login>a {
    color: var(--modal-title-bg);
    border: 1px solid #c8c8c8;
    background: -moz-linear-gradient(top, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%);
    background: linear-gradient(to bottom, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%)
}

.lgc-layout-component .btn-hotkey {
    color: var(--modal-title-bg);
    border: 1px solid #c8c8c8;
    background: -moz-linear-gradient(top, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%);
    background: -webkit-linear-gradient(top, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%);
    background: linear-gradient(to bottom, #fefefe 0, #fefefe 37%, #ececec 67%, #e2e2e3 89%, #e0e0e0 96%, #e5e5e5 100%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

.lgc-layout-component .btn-hotkey.selected {
    background: #ffd65b
}

.lgc-layout-component .game-list-wrapper {
    min-height: calc(100vh - 60px - 30px - 40px - 88px - 67px)
}

.lgc-layout-component .game-list-wrapper .entrance-section ul {
    position: relative;
    color: var(--main-text-color)
}

.lgc-layout-component .game-list-wrapper .entrance-section ul li {
    position: relative;
    z-index: 1;
    background: linear-gradient(to right, var(--main-bg) 0%, rgba(0, 0, 0, .3) 100%);
    background: -moz-linear-gradient(left, var(--main-bg) 0%, rgba(0, 0, 0, .3) 100%);
    background: -webkit-linear-gradient(left, var(--main-bg) 0%, rgba(0, 0, 0, .3) 100%)
}

.lgc-layout-component .game-list-wrapper .entrance-section ul li.active {
    background: var(--modal-title-bg)
}

.lgc-layout-component .game-list-wrapper .entrance-section ul li.active:before,
.lgc-layout-component .game-list-wrapper .entrance-section ul li.active:after {
    border-color: transparent transparent transparent var(--modal-title-bg)
}

.lgc-layout-component .game-list-wrapper .entrance-section .more-tip {
    color: var(--main-text-color);
    background-color: var(--modal-title-bg);
    z-index: 2
}

lgc-navigation-list-component ul li {
    color: var(--main-text-color)
}

.atd-content .btn-danger,
.atd-content .btn-danger:hover:active {
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

.atd-content .btn-primary,
.atd-content .btn-primary:hover:active {
    color: var(--main-text-color);
    background-color: var(--sub-button-bg);
    border-color: var(--sub-button-bg)
}

.modal-atdcd .atdcd-operation .button-section button.btn {
    color: var(--main-text-color);
    background-color: var(--sub-button-bg);
    border-color: var(--sub-button-bg)
}

.modal-atdcd .atdcd-operation .button-section button.btn-blue {
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

.atd-operator.scroll-to-fixed-fixed {
    bottom: 90px !important
}

.AnyTimeDiscount atd-layout-component .top-link li a.recommend,
.AnyTimeDiscount atd-layout-component .top-link li a.favorite,
.AnyTimeDiscount atd-layout-component .top-link li a.review {
    color: var(--main-text-color);
    background-color: var(--sub-button-bg)
}

#render-body #register {
    color: var(--page-text-color);
    background: var(--page-bg)
}

#register button.submit {
    color: var(--main-text-color);
    background-color: var(--main-button-bg);
    border-color: var(--main-button-bg)
}

#account-box.login-page {
    display: none
}

fg-layout-component .game-list li {
    min-width: auto;
    height: auto;
    padding-top: 0
}

fg-layout-component .game-list li span {
    display: inline-block
}

rg-layout-component .review-tab {
    border-color: var(--main-bg)
}

rg-layout-component .review-tab li {
    color: var(--main-text-color);
    background-color: var(--main-bg);
    border-color: var(--main-bg)
}

.modal-auth .modal-header,
.modal-binding-tip .modal-header {
    color: #fff;
    background-color: var(--sub-button-bg)
}

.modal-auth .modal-body .auth-item:hover,
.modal-auth .modal-body .auth-item:active {
    border-color: var(--sub-button-bg)
}

.modal-auth .modal-body .auth-item .icon-go {
    color: var(--sub-button-bg)
}

.modal-binding-tip .modal-body .btn-binding {
    color: #fff;
    background-color: var(--sub-button-bg)
}

s-activity-entrance-component {
    z-index: 5 !important
}

body.modal-page-open s-activity-entrance-component {
    z-index: 0 !important
}

.modal-page-open.full-screen .r-footer-component {
    z-index: 14
}

.financial-color {
    color: var(--side-menu-bg)
}

.financial-background-color {
    background-color: var(--side-menu-bg)
}

.financial-border-color {
    border-color: var(--side-menu-bg)
}

#app-member-center .page-container .page-wrapper {
    padding-bottom: 80px
}

.vs-account-nav-component {
    display: block;
    font-size: 0
}

.vs-account-nav-component ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.vs-account-nav-component ul li {
    display: inline-block;
    width: 25%;
    vertical-align: top
}

.vs-account-nav-component ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: var(--main-text-color);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    outline: none
}

.vs-account-nav-component ul li a:hover,
.vs-account-nav-component ul li a:focus {
    color: var(--main-text-color);
    text-decoration: none
}

.vs-account-nav-component ul li a span {
    display: block
}

.vs-account-nav-component ul li a i {
    font-size: 20px
}

.vs-account-nav-component ul li.deposit a i {
    background: -webkit-linear-gradient(66deg, #36ffb1 0, #cdff36 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.vs-account-nav-component ul li.withdraw a i {
    background: -webkit-linear-gradient(66deg, #36d2ff 0, #91ffd1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.vs-account-nav-component ul li.promotion a i {
    background: -webkit-linear-gradient(66deg, #ff7a7a 0, #ffd236 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.vs-account-nav-component ul li.checkinoffer a i {
    background: -webkit-linear-gradient(66deg, #f359fd 0, #a9a7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.vh-mi-layout-component {
    display: block;
    margin: 0 5px
}

.vh-mi-layout-component .section-top {
    height: 25px;
    padding: 0 20px;
    color: var(--main-text-color);
    font-size: 12px;
    line-height: 25px;
    text-align: left;
    background-color: var(--modal-title-bg);
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0
}

.vh-mi-layout-component .section-bottom {
    position: relative;
    padding: 7px 0;
    font-size: 0
}

.vh-mi-layout-component .section-bottom:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-color: var(--modal-title-bg);
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    opacity: .5
}

.vh-mi-layout-component .section-bottom>div {
    position: relative;
    z-index: 1;
    display: inline-block;
    vertical-align: middle
}

.vh-mi-layout-component .section-bottom .balance {
    width: 30%;
    height: 40px;
    border-right: 2px solid var(--modal-title-bg)
}

.vh-mi-layout-component .section-bottom .balance .btn-login {
    display: inline-block;
    padding: 3px 10px;
    margin-top: 6px;
    color: var(--sub-text-color);
    font-size: 14px;
    border: 1px solid var(--sub-text-color);
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px
}

.vh-mi-layout-component .section-bottom .balance .detail {
    padding-left: 20px;
    color: var(--main-text-color);
    font-size: 12px;
    line-height: 20px
}

.vh-mi-layout-component .section-bottom .balance .detail i {
    margin-left: 3px
}

.vh-mi-layout-component .section-bottom .balance .detail span {
    display: block;
    color: var(--sub-text-color);
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vh-mi-layout-component .section-bottom .account-nav {
    width: 70%;
    padding-right: 3%
}

vl-login-component {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    background-image: url('https://cdn.xolgvhb.cn/Web.Mobile/_Common/_Plan/F/ng-component/default/view/login/bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-color: var(--main-bg);
    z-index: 10
}

vl-login-component .login {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

vl-login-component .login .login-logo {
    margin: 15px 0 10px;
    font-size: 0;
    text-align: center
}

vl-login-component .login .login-logo a img {
    max-width: 200px
}

vl-login-component .login form {
    position: relative;
    width: 90%;
    margin: 0 5% 6%;
    padding: 10% 10% 5%;
    border-radius: 10px;
    overflow: hidden
}

vl-login-component .login form:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--login-bg);
    opacity: .2;
    z-index: -1
}

vl-login-component .login form .login-title {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: var(--main-text-color)
}

vl-login-component .login form .login-item {
    position: relative
}

vl-login-component .login form .login-item i {
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 100;
    color: var(--main-text-color);
    font-size: 16px
}

vl-login-component .login form .login-item input {
    display: block;
    width: 100%;
    height: 35px;
    margin: 0 auto 10px;
    padding-left: 45px;
    border: none;
    border-radius: 20px;
    outline: 0;
    color: var(--main-text-color);
    background-color: rgba(0, 0, 0, .4)
}

vl-login-component .login form .login-item img {
    position: absolute;
    right: 6%;
    top: 4px;
    height: 27px
}

vl-login-component .login form .login-item input::-webkit-input-placeholder {
    color: inherit
}

vl-login-component .login form .login-item input::-moz-placeholder {
    color: inherit
}

vl-login-component .login form .login-item input:-ms-input-placeholder {
    color: inherit
}

vl-login-component .login form .login-link {
    margin: 15px 0;
    color: var(--main-text-color);
    text-align: right
}

vl-login-component .login form .login-link span {
    display: inline-block;
    width: 49%;
    text-align: center
}

vl-login-component .login form .login-btn {
    margin: 0 0 10px;
    width: 100%;
    height: 35px;
    padding: 6px;
    border-radius: 20px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

vl-login-component .login .register-btn,
vl-login-component .login .trial-btn {
    width: 90%;
    margin: 0 5% 3%;
    height: 40px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 16px;
    color: var(--main-text-color);
    background-color: rgba(0, 0, 0, .4)
}

vl-login-component .link-section {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 5%;
    display: flex;
    justify-content: space-between
}

vl-login-component .link-section.fix-to-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0
}

vl-login-component .link-section button {
    width: 47.5%;
    height: 40px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 16px;
    color: var(--main-text-color);
    background-color: rgba(0, 0, 0, .4);
    outline: none
}

.vmc-layout-component {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 14;
    display: block;
    width: 100%;
    padding: 20px 0 77px;
    background-color: var(--main-bg)
}

.vmc-layout-component .member-info {
    display: block;
    margin: 0 10px 10px;
    background-color: var(--modal-title-bg);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.vmc-layout-component .member-info .profile {
    padding: 15px 0 10px;
    font-size: 0;
    text-align: center
}

.vmc-layout-component .member-info .profile .account {
    display: inline-block;
    width: 40%;
    vertical-align: middle;
    text-align: left
}

.vmc-layout-component .member-info .profile .account i {
    vertical-align: middle;
    margin-right: 10px;
    color: var(--main-text-color);
    font-size: 50px
}

.vmc-layout-component .member-info .profile .account span {
    display: inline-block;
    width: calc(100% - 60px);
    vertical-align: middle;
    color: var(--main-text-color);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.vmc-layout-component .member-info .profile .balance {
    display: inline-block;
    width: 45%;
    vertical-align: middle;
    margin-left: 10px;
    padding-left: 20px;
    color: var(--main-text-color);
    font-size: 12px;
    text-align: left;
    border-left: 1px solid var(--main-bg)
}

.vmc-layout-component .member-info .profile .balance i {
    margin-left: 10px
}

.vmc-layout-component .member-info .profile .balance span {
    color: var(--sub-text-color);
    font-size: 18px
}

.vmc-layout-component .member-info .extra-info {
    padding: 15px 0 10px;
    font-size: 0;
    text-align: center
}

.vmc-layout-component .member-info .extra-info>div {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    color: var(--main-text-color);
    font-size: 12px;
    text-align: left
}

.vmc-layout-component .member-info .extra-info>div span {
    color: var(--sub-text-color);
    font-size: 18px
}

.vmc-layout-component .member-info .extra-info>div+div {
    width: 45%;
    margin-left: 10px;
    padding-left: 20px;
    border-left: 1px solid var(--main-bg)
}

.vmc-layout-component .vs-account-nav-component ul li a {
    padding: 10px 0
}

.vmc-layout-component .vs-account-nav-component {
    padding-bottom: 10px
}

.vmc-layout-component .vmc-operation-menu-component {
    display: block;
    padding: 15px 0 5px;
    border-top: 1px solid var(--main-bg)
}

.vmc-layout-component .vmc-operation-menu-component ul {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
    text-align: left
}

.vmc-layout-component .vmc-operation-menu-component ul li {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-bottom: 10px
}

.vmc-layout-component .vmc-operation-menu-component ul li a {
    position: relative;
    display: block;
    padding: 5px 0;
    color: var(--main-text-color);
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    outline: none
}

.vmc-layout-component .vmc-operation-menu-component ul li a:hover,
.vmc-layout-component .vmc-operation-menu-component ul li a:focus {
    color: var(--main-text-color);
    text-decoration: none
}

.vmc-layout-component .vmc-operation-menu-component ul li a i {
    font-size: 30px
}

.vmc-layout-component .vmc-operation-menu-component ul li a .text {
    display: block;
    margin-top: 5px
}

.vmc-layout-component .vmc-operation-menu-component ul li a .mail-count {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 5em;
    padding: 0 5px;
    margin-left: 7%;
    font-size: 12px;
    line-height: 14px;
    text-decoration: none;
    color: #fff;
    background: #f00;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    z-index: 1
}

.vmc-layout-component .vmc-operation-menu-component ul li a .member-security-tip {
    position: absolute;
    top: -5px;
    right: 15%;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: #f03
}

.vmc-layout-component .activities {
    margin-bottom: 10px;
    font-size: 0;
    text-align: center
}

.vmc-layout-component .activities a {
    display: inline-block;
    width: calc((100vw - 30px)/2);
    height: calc(((100vw - 30px)/2)*.588);
    background-color: var(--modal-title-bg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.vmc-layout-component .activities a+a {
    margin-left: 10px
}

.vmc-layout-component .activities a.activity {
    background-image: url('/static/image/activity.png')
}

.vmc-layout-component .activities a.promotion {
    background-image: url('/static/image/promotion.png')
}

.vmc-layout-component .slide-menu {
    margin: 0 10px;
    background-color: var(--side-menu-bg);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.vmc-layout-component .slide-menu ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.vmc-layout-component .slide-menu ul li {
    position: relative;
    height: 41px;
    color: var(--main-text-color);
    font-size: 12px;
    line-height: 40px
}

.vmc-layout-component .slide-menu ul li+li {
    border-top: 1px solid var(--menu-text-color)
}

.vmc-layout-component .slide-menu ul li i {
    position: absolute;
    top: 11px;
    left: 5px;
    width: 36px;
    font-size: 18px;
    text-align: center
}

.vmc-layout-component .slide-menu ul li img.side-icon {
    position: absolute;
    top: 11px;
    left: 0;
    right: calc(100% - 45px);
    display: block;
    margin: 0 auto;
    max-width: 36px;
    height: 18px
}

.vmc-layout-component .slide-menu ul li a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding-left: 45px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vmc-layout-component .slide-menu ul li select {
    margin-left: 45px;
    color: #000
}

vr-agreement-component {
    color: #000
}

vr-agreement-component .lineheight {
    color: #f00
}

vr-register-component {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100vh;
    background-image: url('https://cdn.xolgvhb.cn/Web.Mobile/_Common/_Plan/F/ng-component/default/view/login/bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: 100% 100%;
    background-color: var(--main-bg);
    z-index: 10
}

vr-register-component .register {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

vr-register-component .register .register-logo {
    margin: 15px 0 10px;
    font-size: 0;
    text-align: center
}

vr-register-component .register .register-logo a img {
    max-width: 200px
}

vr-register-component .register form {
    position: relative;
    width: 92%;
    margin: 0 auto 6%;
    padding: 10px 4% 5%;
    border-radius: 10px;
    overflow: hidden
}

vr-register-component .register form:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--register-bg);
    opacity: .4;
    filter: opacity(opacity=40);
    z-index: -1
}

vr-register-component .register form .register-title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: var(--main-text-color)
}

vr-register-component .register form .register-item {
    position: relative;
    margin: 0 auto 5px
}

vr-register-component .register form .register-item label {
    margin-left: 10px;
    font-weight: normal;
    color: var(--main-text-color)
}

vr-register-component .register form .register-item label .fa-star {
    color: #bd2d27
}

vr-register-component .register form .register-item input:not([type="radio"]) {
    display: block;
    width: 100%;
    height: 35px;
    padding-left: 15px;
    border: none;
    border-radius: 20px;
    outline: 0;
    color: var(--main-text-color);
    background-color: rgba(255, 255, 255, .2)
}

vr-register-component .register form .register-item img {
    position: absolute;
    right: 6%;
    top: 4px;
    height: 27px
}

vr-register-component .register form .register-item input::-webkit-input-placeholder {
    color: inherit;
    opacity: .8
}

vr-register-component .register form .register-item input::-moz-placeholder {
    color: inherit;
    opacity: .8
}

vr-register-component .register form .register-item input:-ms-input-placeholder {
    color: inherit;
    opacity: .8
}

vr-register-component .register form .register-item span.radio-inline {
    margin-left: 10px;
    color: var(--main-text-color)
}

vr-register-component .register form .register-item span.radio-inline input {
    width: auto;
    height: auto
}

vr-register-component .register form .register-item .register-agree {
    margin-left: 10px;
    color: var(--main-text-color)
}

vr-register-component .register form .register-item .register-agree input {
    display: inline-block;
    width: auto;
    height: auto;
    border: none;
    outline: 0;
    vertical-align: sub
}

vr-register-component .register form .register-item .register-agree a {
    color: var(--sub-text-color)
}

vr-register-component .register form .register-btn {
    margin: 0 0 10px;
    width: 100%;
    height: 35px;
    padding: 6px;
    border-radius: 20px;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: var(--main-text-color);
    background-color: var(--main-button-bg)
}

vr-register-component .register .form-group {
    width: 90%;
    margin: 0 5% 5%;
    height: 40px;
    border-radius: 5px;
    border: none;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    background-color: rgba(255, 255, 255, .2)
}

vr-register-component .register .form-group a {
    color: var(--main-text-color);
    text-decoration: none
}