.placeholder {
    min-height: 7rem
}

.swiper {
    height: 15rem;
    max-width: 100%;
    overflow: hidden;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #444 url(images/logo.png) no-repeat center/50%
}

.swiper:hover .next {
    transform: translateZ(0) translateX(0)
}

.swiper:hover .prev {
    transform: translateZ(0) translateX(0) rotate(180deg)
}

.pc .swiper {
    height: 50rem
}

.swiper .swiper-container {
    width: auto;
    height: 100%;
    display: flex;
    position: relative;
    transition: all .4s
}

.swiper .next,
.swiper .prev {
    width: 8rem;
    height: 15rem;
    position: absolute;
    right: 0;
    top: calc(50% - 10rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem 0 0 2rem;
    cursor: pointer;
    background: #fff8 url('../DABOGAMING _ situs game online 2024_files/icon-arrow.svg') no-repeat center/2rem;
    transform: translateZ(0) translateX(100%);
    transition: all .4s
}

.swiper .next:hover,
.swiper .prev:hover {
    background: #fff url('../DABOGAMING _ situs game online 2024_files/icon-arrow.svg') no-repeat center/2rem
}

.swiper .prev {
    right: unset;
    left: 0;
    transform: translateZ(0) rotate(180deg) translateX(100%)
}

.swiper .swiper-dots {
    position: absolute;
    bottom: 2rem;
    width: auto;
    display: flex;
    gap: 1rem
}

.swiper .swiper-dots .dot {
    width: .5rem;
    height: .5rem;
    display: block;
    border-radius: .25rem;
    cursor: pointer;
    background: rgba(255, 255, 255, .7);
    transition: all .4s;
    box-shadow: .2rem .4rem .6rem rgba(0, 0, 0, .8)
}

.swiper .swiper-dots .current {
    width: 1.5rem;
    background: #fff;
    cursor: default
}

.swiper .swiper-item {
    flex: 1;
    min-width: 37.5rem;
    max-width: 37.5rem;
    height: 100%;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s;
    filter: brightness(.6)
}

.pc .swiper .swiper-item {
    min-width: 120rem;
    max-width: 120rem
}

.swiper .current {
    filter: unset !important
}

.swiper .swiper-item img {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    object-fit: cover;
    background: #444 url(images/logo.png) no-repeat center/50%;
    position: relative;
    transition: all 2s
}

.swiper .current:hover img {
    transform: translateZ(0) scale(1.1)
}

.notice {
    margin: 0;
    background: #fff;
    height: 3rem;
    min-height: 3rem;
    overflow: hidden;
    display: flex;
    gap: .5rem;
    align-items: center;
    box-shadow: .2rem .4rem .6rem #0001;
    border-radius: 0 0 1rem 1rem
}

.notice ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.notice ul li {
    line-height: 3rem;
    height: 3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0 1rem 0 0
}

.notice .scrollText {
    width: 100%
}

.notice .scrollText li {
    float: left;
    padding-right: 2rem;
    min-width: 42rem;
    box-sizing: border-box
}

.notice:before {
    content: '';
    display: block;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 0 0 1rem;
    background: url(images/_icon-tip.svg) no-repeat center/contain;
    filter: invert(50%) sepia(98%) saturate(3528%) hue-rotate(1deg) brightness(103%) contrast(107%)
}

.user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: 0 .5rem .5rem .5rem;
    min-height: 3rem;
    background: #71a9f1;
    position: sticky;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 2;
    width: calc(100%);
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: .2rem .4rem .6rem #0003
}

.user .password,
.user .username {
    height: 2.5rem;
    border-radius: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 14rem;
    background: #eee
}

.user .password:before,
.user .username:before {
    content: '';
    display: block;
    width: 3rem;
    min-width: 3rem;
    height: 2rem;
    background: url(images/icon-user.png) no-repeat center/2rem
}

.user .password:before {
    background: url(images/icon-psw.png) no-repeat center/2rem
}

.user input {
    appearance: none;
    outline: 0;
    border: 0;
    background: 0 0;
    display: flex;
    height: 100%;
    flex: auto;
    min-width: 5rem
}

.user .loginBtn {
    height: 2.5rem;
    padding: 0 1rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    flex: auto;
    background: #3a9ce8
}

.user a[href="#/forget"] {
    display: block;
    flex: auto;
    text-align: center
}

.user .item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem
}

.user .avatar {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    display: block
}

.user .nick {
    flex: 1;
    display: flex;
    align-items: center;
    color: #fff;
    gap: 1rem;
    height: 100%;
    overflow: hidden
}

.user .nick h1 {
    font-weight: 400;
    font-size: 1.4rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.user .nick span {
    background: 0 0;
    box-shadow: unset;
    color: #3ea4f7;
    font-size: 1rem;
    height: unset;
    margin: 0
}

.user .purse {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #3ea4f7
}

.user .purse i {
    font-style: normal
}

.user .overage {
    display: flex;
    align-items: center;
    color: gold;
    height: 100%
}

.user .overage i {
    font-style: normal
}

.user .logout-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    height: 100%;
    padding: 0 1rem;
    color: #fff
}

.user .logout-btn:before {
    content: '';
    display: block;
    width: 2rem;
    height: 2rem;
    background: url(images/_icon-logout.svg) no-repeat center/contain;
    filter: invert(64%) sepia(48%) saturate(5283%) hue-rotate(182deg) brightness(100%) contrast(82%)
}

.tabs {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background: #71a9f1;
    min-height: 4rem;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 .5rem
}

.tabs .logo {
    height: 3rem !important;
    object-fit: contain;
    display: block;
    background: #71a9f1;
    border-radius: .5rem
}

.tabs .tab {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    color: #fff
}

.tabs .bookmark {
    display: none
}

.tabs .tab img {
    display: block;
    height: 2rem;
    margin: 0 .5rem 0 0
}

.tabs .tab b {
    font-weight: 400
}

.tabs .bookmark b {
    display: none
}

.tabs .tab[data-href="#/deposit"],
.tabs .tab[data-href="#/withdrawal"] {
    display: none
}

.tabs .tab.tab-forget,
.tabs .tab[data-href="#/forget"] {
    display: flex;
    align-items: center;
    gap: .5rem
}

.tabs .tab[data-href="#/register"] img {
    display: block;
    filter: invert(1);
    height: 1.8rem
}

.tabs .tab.tab-forget:before,
.tabs .tab[data-href="#/forget"]:before {
    content: '';
    display: block;
    width: 1.8rem;
    height: 1.8rem;
    background: url(images/icon-forgot.svg) no-repeat center/contain;
    filter: invert(1)
}

.game-list {
    margin: 1rem 0 0 0;
    display: flex;
    justify-content: space-between
}

.game-list .game-menus {
    margin: 0 0 7rem 0
}

.game-list .game-menu {
    width: 6rem;
    min-width: 6rem;
    position: sticky;
    top: 7rem;
    left: 0;
    bottom: 7rem;
    overflow: hidden;
    border-radius: 0 1rem 1rem 0;
    border-top: .1rem #fff solid;
    border-right: .1rem #fff solid;
    border-bottom: .1rem #fff solid;
    background: linear-gradient(to right, #f4f6fa, #f5f7fa);
    box-shadow: .2rem .4rem .6rem 0 rgb(209 221 242 / 50%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch
}

.game-list .game-menu p {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: calc(100% + .5rem);
    height: 6.8rem;
    border-radius: 0 1rem 1rem 0;
    background: linear-gradient(45deg, #4daaff, #9cd6ff);
    transition: all .4s
}

.game-list .game-menu .game-menu-item {
    min-height: 6.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(0deg, #f4f6fa, #f5f7fa);
    box-shadow: 0 3px 12px 0 rgb(209 221 242 / 50%);
    transition: all .4s
}

.game-list .game-menu .home b {
    background: url(images/home.svg) no-repeat center/contain
}

.game-list .game-menu .game-menu-current {
    display: flex
}

.game-list .game-menu .game-menu-item b {
    font-weight: 400;
    width: 6rem;
    height: 4rem;
    position: relative;
    z-index: 1;
    transition: all .4s;
    filter: grayscale(1)
}

.game-list .game-menu .game-menu-current b {
    filter: unset;
    transform: translateZ(0) rotate(360deg)
}

.game-list .game-menu .game-menu-item i {
    font-style: normal;
    display: block;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    font-size: 1rem;
    transition: all .4s;
    word-break: break-word;
    text-transform: capitalize;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.game-list .game-menu .game-menu-current i {
    color: #fff
}

.game-list .game-items {
    flex: 1;
    height: 100%;
    display: flex;
    margin: 0 0 6rem 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch
}

.game-list .game-items .game-category {
    display: none;
    transition: all .4s;
    margin: 0 1rem 1rem 1rem;
    opacity: 0;
    transform: translateZ(0) translateX(30rem)
}

.game-list .game-category-current {
    display: grid !important;
    grid-gap: 1rem;
    grid-template-rows: max-content;
    opacity: 1 !important;
    transform: translateZ(0) translateX(0) !important
}

.game-list .game-items .home-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem
}

.game-list .game-items .home-tabs .tab {
    background: linear-gradient(160deg, #666, #000);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: .2rem .4rem .6rem #0003;
    border: .3rem gold solid
}

.game-list .game-items .home-tabs .tab img {
    display: block;
    object-fit: contain;
    width: 100%
}

.game-list .game-items .home-banner {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: .2rem .4rem .6rem #0003;
    grid-column: 3 span;
    position: relative
}

.game-list .game-items .home-banner img {
    display: block
}

.game-list .game-items .home-banner .banner-link {
    display: block;
    width: 13rem;
    height: 3.5rem;
    position: absolute;
    right: 8rem;
    bottom: 1rem
}

.game-list .game-items .home-banklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content;
    gap: .5rem;
    background: linear-gradient(0deg, #f4f6fa, #f5f7fa);
    box-shadow: 0 3px 12px 0 rgb(209 221 242 / 50%);
    padding: 0 1rem 1rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 32.5rem;
    border: #fff .1rem solid;
    margin-bottom: 1rem
}

.game-list .game-items .home-banklist dt {
    position: relative;
    grid-column: 2 span;
    text-align: center;
    color: #fff;
    margin: 0 0 0 -1rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: rgba(0, 0, 0, .5);
    width: 108%
}

.game-list .game-items .home-banklist dt i {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: #7cfc00;
    border-radius: 50%;
    margin: 0 .2rem 0 -.2rem
}

.game-list .game-items .home-banklist dt i:nth-child(3) {
    background: red
}

.game-list .game-items .home-banklist dt i:nth-child(5) {
    background: #ff0
}

.game-list .game-items .home-banklist dt b {
    font-weight: 400;
    transform: scale(.8);
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    word-spacing: 0;
    padding-top: .1rem;
    margin-left: -.6rem
}

.game-list .game-items .home-banklist dt .bank-switch {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 3.5rem;
    width: 2.4rem;
    background: url("images/arrow-3.png") no-repeat center center;
    background-size: 1rem 1rem;
    transform: rotate(180deg)
}

.game-list .game-items .home-banklist.off dt .bank-switch {
    transform: rotate(0)
}

.game-list .game-items .home-banklist dd {
    border-radius: .5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    justify-content: center;
    gap: .5rem;
    overflow: hidden
}

.game-list .game-items .home-banklist .bank-rule {
    justify-content: center;
    align-items: center;
    color: #fff
}

.game-list .game-items .home-banklist.off {
    height: auto;
    min-height: auto;
    padding-bottom: 0
}

.game-list .game-items .home-banklist dt {
    z-index: 2
}

.game-list .game-items .home-banklist.off dd {
    display: none
}

.game-list .game-items .home-banklist dd i {
    display: none;
    width: .8rem;
    min-width: .8rem;
    height: .8rem;
    background: #7cfc00;
    border-radius: 50%
}

.game-list .game-items .home-banklist dd .status-2 {
    background: red
}

.game-list .game-items .home-banklist dd .status-3 {
    background: #ff0
}

.game-list .game-items .home-banklist dd img {
    display: block;
    object-fit: contain;
    width: 100%
}

.game-bank-rule {
    margin: 0 1rem 7rem
}

.game-bank-rule .home-banklist {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content;
    gap: .5rem;
    background: linear-gradient(0deg, #f4f6fa, #f5f7fa);
    box-shadow: 0 3px 12px 0 rgb(209 221 242 / 50%);
    padding: 0 1rem 1rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 32.5rem;
    border: #fff .1rem solid;
    margin-bottom: 1rem
}

.game-bank-rule .home-banklist.off {
    height: auto;
    min-height: auto;
    padding-bottom: 0
}

.game-bank-rule .home-banklist dt {
    position: relative;
    grid-column: 2 span;
    text-align: center;
    color: #fff;
    margin: 0 0 0 -1rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: rgba(0, 0, 0, .5);
    width: 106%
}

.game-bank-rule .home-banklist dt i {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    background: #7cfc00;
    border-radius: 50%;
    margin: 0 .2rem 0 -.2rem
}

.game-bank-rule .home-banklist dt b {
    font-weight: 400;
    transform: scale(.8);
    display: inline-block;
    vertical-align: top;
    letter-spacing: 0;
    word-spacing: 0;
    padding-top: .1rem;
    margin-left: -.6rem
}

.game-bank-rule .home-banklist dt .bank-switch {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 3.5rem;
    width: 2.4rem;
    background: url("images/arrow-3.png") no-repeat center center;
    background-size: 1rem 1rem;
    transform: rotate(180deg)
}

.game-bank-rule .home-banklist.off dt .bank-switch {
    transform: rotate(0)
}

.game-bank-rule .home-banklist dd {
    border-radius: .5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    justify-content: center;
    gap: .5rem;
    overflow: hidden
}

.game-bank-rule .home-banklist.off dd {
    display: none
}

.game-bank-rule .home-banklist .bank-rule {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 28.6rem;
    display: block;
    box-sizing: border-box;
    margin-top: 3.5rem;
    padding: 1rem 1.5rem 0;
    overflow: auto;
    z-index: 1;
    line-height: 2rem;
    text-align: center
}

.game-bank-rule .home-banklist .bank-rule h3 {
    line-height: 2.4rem
}

.game-bank-rule .home-banklist .bank-rule a {
    color: #3a9ce8
}

.game-list.is-home .game-menus {
    margin-bottom: 2rem
}

.game-list.is-home .game-items {
    margin-bottom: 0
}

.game-list .game-items .game-item {
    position: relative;
    box-sizing: content-box;
    transition: all .4s;
    border-radius: 1rem;
    overflow: hidden
}

#activity .game-list .game-items .game-item {
    position: relative;
    box-sizing: content-box;
    transition: all .4s;
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    padding: 1rem;
    box-shadow: .2rem .4rem .6rem #0001
}

.game-list .game-items .game-item span {
    border-radius: .5rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
    transition: all .4s
}

.game-list .game-items .game-item span img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: contain;
    transition: all .4s;
    position: relative;
    filter: drop-shadow(0 0 1rem rgba(0, 0, 0, .5))
}

.game-list .game-items .game-item span b {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(1rem)
}

.game-list .game-items .game-item h3 {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 3rem;
    font-weight: 400
}

.game-list .game-items .game-item .game-periodid {
    position: absolute;
    top: 0;
    right: 0;
    height: 2.4rem;
    padding: 0 2rem;
    line-height: 2.4rem;
    border-radius: 0 0 0 1.2rem;
    background: rgba(255, 255, 255, .8);
    color: #999
}

.game-list .game-items .game-item.closed::before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 2;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

.game-list .game-items .game-item i {
    display: block;
    color: #959aa5;
    font-style: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.game-list .game-items .game-item .game-corner {
    position: absolute;
    right: 0;
    top: 0;
    padding: .5rem 1rem;
    color: #fff;
    background: rgba(0, 0, 218, .8);
    border-radius: 0 0 0 1rem;
    font-weight: 700
}

.game-list .game-items .game-item .game-corner.no-corner {
    display: none
}

.game-list .hot {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .hot p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .hot p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .hot h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, #8b0000 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .game-items .fish .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .5rem
}

.game-list .game-items .douji {
    border-radius: .5rem;
    overflow: hidden
}

.game-list .game-items .douji img {
    width: 100%;
    height: 29rem;
    display: block;
    object-fit: cover
}

.game-list .live {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

.game-list .live p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .live p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .live h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, gold 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    text-shadow: 0 0 .2rem #000;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .vegas p>img:first-child {
    z-index: 1;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    left: unset;
    right: .5rem;
    opacity: unset
}

.game-list .vegas p>img:nth-child(2) {
    object-fit: cover;
    width: 100%
}

.game-list .vegas h3 {
    background: linear-gradient(45deg, #333 50%, transparent);
    color: #fff
}

.game-list .saLv {
    aspect-ratio: 4/3
}

.game-list .saLv p>img:first-child {
    left: unset;
    right: .5rem;
    z-index: 1;
    width: 40%
}

.game-list .saLv h3 {
    background: linear-gradient(45deg, #f60 50%, transparent);
    color: #fff
}

.game-list .rcg h3 {
    background: linear-gradient(45deg, #8b0000 50%, transparent);
    color: #fff
}

.game-list .sport {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

.game-list .sport p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .sport p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .sport h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, #228b22 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .game-items .game-item.sport {
    height: 16rem
}

.game-list .game-items .game-item.sport h3 {
    position: absolute;
    bottom: 0;
    left: 0
}

.game-list .game-items .game-item.sport p {
    height: 100%
}

.game-list .game-items .game-item.sport .button-box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 101;
    width: 100%;
    box-sizing: border-box
}

.game-list .game-items .game-item.sport .button-box a {
    width: 50%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    cursor: pointer;
    padding: 0 1rem;
    box-sizing: border-box;
    color: #333;
    background: #058107;
    color: #fff
}

.game-list .game-items .game-item.sport .button-box a:nth-of-type(2) {
    background: #0b9dd0
}

.game-list .fish {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

.game-list .fish p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .fish p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .fish h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, #1e90ff 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .game-items .category-search {
    position: relative;
    padding-top: 35px
}

.game-list .game-items .category-search .searchKey {
    position: absolute;
    top: 0;
    right: 0;
    height: 25px;
    background: #fff9;
    border: none;
    padding: 0 8px;
    border-radius: 5px
}

.game-list .game-items .category-search .searchKey:focus {
    outline: 0;
    border: none;
    box-shadow: none
}

.game-list .game-items .category-search .searchKey::-webkit-input-placeholder {
    color: #333
}

.game-list .lottery {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .lottery p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .lottery p>img {
    aspect-ratio: 1/1;
    width: 80%;
    display: block;
    object-fit: cover;
    margin: 0 auto
}

.game-list .lottery p>img.closed {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%)
}

.game-list .lottery .lottery-countdown {
    padding-top: .5rem;
    text-align: center;
    margin-top: -6rem;
    background: rgba(0, 0, 0, .4)
}

.game-list .lottery .lottery-number {
    padding: .5rem 0;
    background: rgba(0, 0, 0, .4);
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    white-space: normal
}

.game-list .lottery .lottery-countdown span {
    justify-content: center
}

.game-list .lottery .lottery-countdown.isOver .countdown-time {
    color: #3a9ce8;
    text-decoration: underline
}

.game-list .lottery h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, #cd5c5c 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .elgame {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

.game-list .elgame p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .elgame p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .elgame h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, gold 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2f4f4f;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.game-list .card {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

.game-list .card p {
    width: 100%;
    display: block;
    position: relative
}

.game-list .card p>img {
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover
}

.game-list .card h3 {
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(165deg, #8b0000 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
    overflow: hidden;
    font-weight: 700 !important;
    position: relative;
    z-index: 1;
    text-transform: uppercase
}

.navigator-bar {
    background: #fff;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
    border-radius: 0 0 .5rem .5rem;
    height: 5rem;
    min-height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10
}

.navigator-bar:after {
    content: '';
    min-width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.navigator-bar .navi-btn {
    min-width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.navigator-bar .detail-navi-back,
.navigator-bar .navi-back {
    background: url('../DABOGAMING _ situs game online 2024_files/icon-arrow.svg') no-repeat center/2rem;
    transform: translateZ(0) rotate(180deg)
}

.navigator-bar h1 {
    display: block;
    flex: 1;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    line-height: 1.5rem
}

.navigator-bar .back-home {
    display: block;
    position: absolute;
    left: 5rem;
    top: 0;
    width: 5rem;
    height: 5rem;
    background: url("images/back-home.png") no-repeat center;
    background-size: 2.6rem 2.3rem
}

.game-list .game-items .activity {
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    height: 18rem
}

.game-list .game-items .activity h3 {
    display: block;
    padding: 0 1rem
}

.game-list .game-items .activity i {
    display: block;
    padding: 0 1rem 1rem 1rem
}

#service .navigator-bar {
    background: #71a9f0;
    color: #fff;
    height: 8rem;
    border-bottom: .5rem #91f6fe solid
}

#service .navigator-bar .navi-btn,
#service .navigator-bar:after {
    min-width: 3rem
}

#service .navigator-bar .service-navi-bar {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .1rem;
    background: #fff;
    height: 4rem
}

#service .navigator-bar .service-navi-bar img {
    height: 4rem;
    width: auto;
    display: block;
    object-fit: contain;
    background: #71a9f0;
    padding: 0 1rem 0 0
}

#service .navigator-bar .service-navi-bar p {
    background: #71a9f0;
    padding: 0 0 0 1rem;
    height: 4rem;
    line-height: 2rem;
    font-style: italic
}

#service .game-list {
    flex-direction: column
}

#service .game-list .game-items {
    margin-bottom: 0
}

.game-list .game-items .service {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    height: 15rem;
    border: 0
}

.game-list .game-items .service:first-child {
    margin: 3rem 0 0 0
}

.game-list .game-items .service span:after {
    content: '';
    width: 3rem;
    height: 3rem;
    display: block;
    transform: rotate(180deg);
    background: url(images/arrow-1.png) no-repeat center/contain;
    position: absolute;
    right: 2rem;
    top: 5rem
}

.game-list .game-items .service span img {
    position: absolute;
    height: 2rem;
    top: 3rem;
    left: 2rem;
    width: 2rem
}

.game-list .game-items .service h3 {
    position: absolute;
    font-size: 2rem;
    top: 2.5rem;
    left: 5rem;
    width: 10rem;
    color: #fff
}

.game-list .game-items .service i {
    position: absolute;
    font-size: 1.5rem;
    top: 6.5rem;
    left: 2rem;
    color: #fff;
    width: 30rem;
    white-space: unset
}

.game-list .customer-items {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    place-items: center;
    margin: 0 4rem
}

.game-list .customer-items a {
    position: relative;
    display: block
}

.game-list .customer-items img {
    width: 100%;
    display: block
}

.game-list .customer-items span {
    position: absolute;
    color: #fff;
    left: 50%;
    bottom: 1.4rem;
    margin-left: -4rem;
    transform: scale(.8)
}

.mine-container {
    overflow-x: hidden;
    flex: 1;
    margin: 0 0 8rem 0
}

.mine-top {
    min-height: 16rem;
    position: relative;
    background: url(images/mine-bg-0.png) no-repeat center bottom/contain;
    overflow: hidden
}

.mine-top .mine-info {
    margin: 0 2rem;
    height: 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.mine-top .mine-info .audit-word {
    position: absolute;
    left: 6rem;
    bottom: 2px;
    color: #f60;
    font-weight: 700
}

.mine-top .mine-info .mine-head {
    width: 5rem;
    height: 5rem;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 1rem 0 0
}

.mine-top .mine-info .mine-info-name {
    flex: 1;
    overflow: hidden
}

.mine-top .mine-info .mine-info-name i {
    font-style: normal;
    text-transform: uppercase
}

.mine-top .mine-info .mine-info-name h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .5rem 0;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 1
}

.mine-top .mine-info .about {
    min-width: 2rem;
    height: 2rem;
    display: block;
    background: url(images/icon-aboutus.png) no-repeat center/cover;
    margin: 0 0 2rem 2rem
}

.mine-top .mine-statistics-container {
    position: absolute;
    bottom: .8rem;
    width: 34rem;
    height: 8rem;
    left: calc((100% - 34rem)/ 2);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.mine-top .mine-statistics {
    background: linear-gradient(120deg, #f6fafc, #e7f6ff);
    position: relative;
    width: 32rem;
    height: 7rem;
    border-radius: 1rem 1rem 0 0;
    transition: all 1s .5s;
    transform: translateZ(0) translateY(9rem);
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1)
}

.mine-top .mine-statistics-in {
    transform: translateZ(0) translateY(0)
}

.mine-top .mine-statistics li {
    width: 9rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.mine-top .mine-statistics li:first-child {
    width: auto;
    flex: 1
}

.mine-top .mine-statistics li img {
    width: 2.6rem;
    height: 2.2rem;
    margin: 0 0 .5rem 0;
    display: block
}

.mine-top .mine-statistics li p {
    display: flex;
    align-items: center;
    height: 2.2rem;
    margin: 0 0 .5rem 0
}

.mine-top .mine-statistics li span {
    text-transform: capitalize
}

.mine-top .mine-statistics .commissionToday span,
.mine-top .mine-statistics .myPurse span {
    color: #ffcb46
}

.mine-top .mine-statistics .commissionToday span i,
.mine-top .mine-statistics .myPurse span i {
    color: #6a82ad;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    margin: 0 0 0 .3rem
}

.mine-top .mine-statistics .myPurse p {
    display: flex;
    justify-content: center;
    align-items: center
}

.mine-top .mine-statistics .myPurse p b {
    font-weight: 400
}

.mine-top .mine-statistics .myPurse p u {
    display: none;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0 0 .5rem;
    background: url(images/icon-refresh.svg) no-repeat center/contain
}

.mine-common {
    background: #fff;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .1)
}

.mine-common dt {
    flex-basis: 100%;
    border-bottom: .1rem #eee solid;
    font-size: 1.4rem;
    font-weight: 700;
    height: 2rem;
    min-height: 2rem;
    padding: 0 0 1rem 0;
    margin: 0 0 1rem 0
}

.mine-common dd {
    flex-basis: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.mine-common dd img {
    width: 3.4rem;
    height: 3.4rem;
    display: block;
    margin: 0 0 .5rem 0
}

.mine-common dd span {
    display: block;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.mine-menus {
    background: #fff;
    margin: 1rem 0
}

.mine-menus ul {
    margin: 0 1.5rem;
    list-style-type: none;
    padding: 0
}

.mine-menus ul li {
    background: #fff;
    height: 4rem;
    border-bottom: .1rem #eee solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer
}

.mine-menus ul li:last-child {
    border: 0
}

.mine-menus ul li:after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .2;
    margin: 0 0 0 1rem
}

.mine-menus ul li[data-redirect="#/gameRules"] img {
    filter: invert(54%) sepia(21%) saturate(683%) hue-rotate(180deg) brightness(89%) contrast(91%)
}

.mine-menus ul li[data-redirect="#/oddsRules"] img {
    filter: invert(54%) sepia(21%) saturate(683%) hue-rotate(180deg) brightness(89%) contrast(91%)
}

.mine-menus ul li img {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 1rem 0 0;
    display: block
}

.mine-menus ul li b {
    font-weight: 400;
    margin: 0 1rem 0 0;
    position: relative;
    display: flex;
    align-items: center;
    text-transform: capitalize
}

.mine-menus ul li b i {
    content: '';
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .4rem;
    border-radius: .8rem;
    background: red;
    color: #fff;
    font-size: 1rem;
    margin: 0 0 0 .5rem;
    transform: translateZ(0) scale(0);
    transition: transform .4s
}

.mine-menus ul li b .dot-in {
    transform: translateZ(0) scale(1)
}

.mine-menus ul li i {
    flex: 1;
    font-style: normal;
    color: #bac2cc;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.register-step ul li {
    position: relative
}

.register-step ul li .captcha-image {
    position: absolute;
    right: 0;
    bottom: 1rem;
    display: block;
    width: 10.5rem;
    height: 3.5rem;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer
}

.logout {
    background: #fc1855;
    height: 4rem;
    margin: 0 1.5rem 3.5rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 0 1rem rgb(0 0 0 / 30%)
}

.mine-about {
    flex: 1;
    margin: 1rem 0
}

.mine-about ul {
    margin: 0 0 1.5rem 0;
    list-style-type: none;
    padding: 0
}

.mine-about ul li {
    background: #fff;
    height: 4rem;
    border-bottom: .1rem #eee solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem
}

.mine-about ul li:last-child {
    border: 0
}

.mine-about ul li:after {
    content: '';
    display: block;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .2
}

.mine-about ul .version:after {
    display: none
}

.mine-about ul li b {
    min-width: 10rem;
    font-weight: 400;
    text-transform: capitalize
}

.mine-about ul li i {
    flex: 1;
    font-style: normal;
    color: #bac2cc;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

#about .detail {
    position: fixed;
    z-index: 10000;
    top: 5%;
    left: 5%;
    bottom: 5%;
    right: 5%;
    transform: translateZ(0) scale(0);
    transition: transform .5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

#about .detail-in {
    transform: translateZ(0) scale(1)
}

#about .detail .detail-container {
    flex: 1;
    width: 100%;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 0 1rem rgba(255, 255, 255, .5)
}

#about .detail .close {
    width: 3rem;
    height: 3rem;
    min-height: 3rem;
    margin: 1rem 0 0 0;
    display: block
}

#about .detail .detail-container .window-navigator-bar {
    width: 100%;
    background: #fff;
    box-shadow: 0 0 1rem rgb(0 0 0 / 10%);
    min-height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center
}

#about .detail .detail-container .content {
    flex: 1;
    display: block;
    margin: 2rem;
    min-height: 20rem;
    text-align: justify;
    overflow-x: hidden
}

#about .detail .content h3 {
    font-size: 1.4rem;
    margin: 1rem 0
}

#about .detail .content p {
    margin: 1rem 0
}

#about .detail .content ol li {
    height: 4rem;
    display: flex;
    align-items: center
}

.newsdetail {
    flex: 1;
    overflow-x: hidden
}

.newsdetail h3 {
    margin: 1rem auto 0 auto;
    text-align: center
}

.newsdetail .content {
    margin: 1rem;
    padding: 1rem;
    min-height: 20rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0 1rem rgb(0 0 0 / 10%)
}

.newsdetail .content h3 {
    font-size: 1.4rem;
    margin: 1rem 0
}

.newsdetail .content p {
    margin: 1rem 0
}

.newsdetail .content img {
    width: 100%;
    display: block
}

#transactionRecords .navigator-bar {
    box-shadow: unset;
    border-radius: 0
}

#transactionRecords .navigator-bar .navi-filter {
    position: absolute;
    background: url('../DABOGAMING _ situs game online 2024_files/icon-filter.svg') no-repeat center/2rem;
    right: 0;
    z-index: 1
}

#transactionRecords .filterMenu {
    position: absolute;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 1;
    color: #333;
    font-size: 1.6rem;
    box-shadow: 0 0 1rem rgb(0 0 0 / 10%);
    border-radius: 0 0 1rem 1rem;
    transform: translateZ(0) translateY(-100%);
    transition: transform .5s
}

#transactionRecords .filterMenu-in {
    transform: translateZ(0) translateY(0)
}

#transactionRecords .filterMenu dt {
    flex-basis: 100%;
    margin: 0 0 1rem
}

#transactionRecords .filterMenu dd {
    flex-basis: calc((100% - 2rem)/ 2 + 0.5rem);
    border: .1rem #eee solid;
    box-sizing: border-box;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    margin: .5rem 0;
    border-radius: .5rem;
    transition: all .5s
}

#transactionRecords .filterMenu .current {
    background: rgba(238, 81, 8, .8);
    color: #fff
}

#transactionRecords .filterMenu .cancel {
    border-radius: 2.5rem;
    border: .1rem #ccc solid
}

#transactionRecords .filterMenu .ok {
    border-radius: 2.5rem;
    background: #4290ff;
    color: #fff
}

#transactionRecords .tabs {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background: #eee;
    padding: 0
}

#transactionRecords .tabs li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all .4s;
    text-transform: capitalize;
    height: 100%;
    padding: 0 1rem
}

#transactionRecords .tabs li:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -.8rem;
    width: 0;
    height: .3rem;
    background: #f60;
    transition: all .4s
}

#transactionRecords .tabs .actived {
    color: #fff;
    background: #f60
}

#transactionRecords .range {
    margin: 1rem 1rem 0 1rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#transactionRecords .range:after,
#transactionRecords .range:before {
    content: '';
    display: block;
    flex: 1;
    height: .1rem;
    border-top: .1rem #6a82ad dashed;
    box-sizing: border-box
}

#transactionRecords .range h3 {
    margin: 0 1rem;
    font-size: 1.6rem;
    font-weight: 400
}

#transactionRecords .list {
    flex: 1;
    background: #fff;
    margin: 1rem 0;
    overflow-x: hidden
}

#transactionRecords .list .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1rem;
    padding: 1rem 0;
    border-bottom: .1rem #eee solid;
    overflow: hidden
}

#transactionRecords .list .center {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 1rem;
    overflow: hidden
}

#transactionRecords .list .center b {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 400
}

#transactionRecords .list .center i {
    font-style: normal;
    color: #999 !important
}

#transactionRecords .list .right {
    display: flex;
    flex-direction: column;
    text-align: right
}

#transactionRecords .list .right b {
    font-size: 1.8rem;
    font-weight: 400
}

#transactionRecords .list .right b u {
    text-decoration: none;
    color: #ffcb46;
    margin: 0 0 0 .3rem;
    font-size: 1rem
}

#transactionRecords .list .right i {
    font-style: normal;
    color: #6ea269
}

#transactionRecords .list .item:before {
    content: '';
    display: block;
    width: 4rem;
    min-width: 4rem;
    height: 4rem;
    background: url('../DABOGAMING _ situs game online 2024_files/icon-rankcard.svg') no-repeat center/contain;
}

#transactionRecords .list .status_2 i {
    color: red
}

#transactionRecords .list .status_0 i {
    color: #f90
}

#transactionRecords .list .paytype_2:before {
    background: url(images/icon-alipay.svg) no-repeat center/contain
}

.rebate-table {
    margin: 1rem 1.5rem 0
}

.rebate-table table {
    width: 100%;
    border-collapse: collapse
}

.rebate-table table td,
.rebate-table table th {
    border: #eee 1px solid
}

.rebate-table table thead th {
    height: 3.5rem;
    background: #f8f8f8;
    text-align: center
}

.rebate-table table tbody td {
    background: #fff;
    text-align: center;
    height: 2.5rem
}

.rebate-table .no-data-box td {
    padding: 3rem;
    color: #999
}

.rebate-table .no-data-box img {
    height: 15rem;
    display: block;
    margin: 0 auto 1rem
}

#transactionRecords .sub-tabs {
    overflow: hidden;
    list-style: none;
    text-align: left;
    margin: 1.5rem 1.5rem 0
}

#transactionRecords .sub-tabs.liveGame {
    display: block
}

#transactionRecords .sub-tabs li {
    display: inline-block;
    letter-spacing: 0;
    word-spacing: 0;
    vertical-align: top;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: .3rem;
    min-width: 4rem;
    text-align: center;
    transform: none;
    box-shadow: none
}

#transactionRecords .sub-tabs .actived {
    background: #f60;
    color: #fff
}

.rebate-more {
    height: 4rem;
    display: none;
    margin: 0 0 1rem 0;
    line-height: 4rem;
    text-align: center
}

#betRecords .navigator-bar {
    box-shadow: unset;
    border-radius: 0
}

#betRecords .navigator-bar .navi-filter {
    position: absolute;
    background: url('../DABOGAMING _ situs game online 2024_files/icon-filter.svg') no-repeat center/2rem;
    right: 0;
    z-index: 1
}

#betRecords .filterMenu {
    position: absolute;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    top: 4rem;
    left: 0;
    right: 0;
    z-index: 1;
    color: #333;
    font-size: 1.6rem;
    box-shadow: 0 0 1rem rgb(0 0 0 / 10%);
    border-radius: 0 0 1rem 1rem;
    transform: translateZ(0) translateY(-100%);
    transition: transform .5s
}

#betRecords .filterMenu-in {
    transform: translateZ(0) translateY(0)
}

#betRecords .filterMenu dt {
    flex-basis: 100%;
    margin: 0 0 1rem
}

#betRecords .filterMenu dd {
    flex-basis: calc((100% - 2rem)/ 2 + 0.5rem);
    border: .1rem #eee solid;
    box-sizing: border-box;
    background: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    margin: .5rem 0;
    border-radius: .5rem;
    transition: all .5s
}

#betRecords .filterMenu .current {
    background: rgba(238, 81, 8, .8);
    color: #fff
}

#betRecords .filterMenu .cancel {
    border-radius: 2.5rem;
    border: .1rem #ccc solid
}

#betRecords .filterMenu .ok {
    border-radius: 2.5rem;
    background: #4290ff;
    color: #fff
}

#betRecords .tabs {
    display: flex;
    gap: 0;
    align-items: center;
    list-style-type: none;
    margin: 0;
    overflow: auto;
    background: #eee;
    padding: 0
}

#betRecords .tabs li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all .4s;
    text-transform: capitalize;
    height: 100%;
    padding: 0 1rem;
    text-align: center
}

#betRecords .tabs li:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -.8rem;
    width: 0;
    height: .3rem;
    background: #f60;
    transition: all .4s
}

#betRecords .tabs .actived {
    color: #fff;
    background: #f60
}

#betRecords .sub-tabs {
    display: none;
    overflow: hidden;
    list-style: none;
    background: #eee
}

#betRecords .sub-tabs.liveGame {
    display: block
}

#betRecords .sub-tabs li {
    float: left;
    height: 5rem;
    line-height: 5rem;
    padding: 0 1rem
}

#betRecords .sub-tabs .actived {
    color: #f60
}

#betRecords .range {
    margin: 1rem 1rem 0 1rem;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#betRecords .range:after,
#betRecords .range:before {
    content: '';
    display: block;
    flex: 1;
    height: .1rem;
    border-top: .1rem #6a82ad dashed;
    box-sizing: border-box
}

#betRecords .range h3 {
    margin: 0 1rem;
    font-size: 1.6rem;
    font-weight: 400
}

#betRecords .list {
    margin: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-x: hidden
}

#betRecords .list .items {
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: .1rem;
    background: #eee;
    border: .1rem #eee solid
}

#betRecords .list .items li {
    padding: .5rem 1rem;
    background: #f8f8f8
}

#betRecords .list .items li:nth-child(2n) {
    background: #fff;
    color: #000;
    text-align: right;
    word-break: break-all
}

#betRecords .list .items li:nth-child(2n-1) {
    text-transform: capitalize
}

#betRecords .list .items .bet {
    color: gold !important;
    font-weight: 700
}

#betRecords .list .items .income {
    color: green !important;
    font-weight: 700
}

.history-detail-table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse
}

.history-detail-table thead th {
    font-size: 12px;
    background-color: #f60;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #e9ecef;
    color: #fff;
    text-align: center;
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #e9ecef
}

.history-detail-table tbody td {
    text-align: center;
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid #e9ecef
}

.lottery-history-detail {
    left: 3%;
    right: 3%
}

.lottery-history-detail .popUp-container .popUp-content {
    margin: 2rem .5rem;
    overflow: auto
}

.popUp .popUp-container .history-detail-title {
    text-align: left;
    font-size: 14px
}

.popUp .popUp-container .popUp-content .paginate ul {
    text-align: center
}

.popUp .popUp-container .popUp-content::-webkit-scrollbar {
    display: block;
    background: #eee;
    width: 5px;
    height: 0
}

.popUp .popUp-container .popUp-content::-webkit-scrollbar-thumb {
    background: #ccc
}

.popUp .popUp-container .popUp-navigator-bar {
    position: relative;
    justify-content: left;
    padding-left: 15px
}

.popUp .popUp-container .popUp-content dl {
    line-height: 4rem;
    font-size: 1.4rem
}

.popUp .popUp-container .popUp-content dl dt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.popUp .popUp-container .popUp-content dl dt span {
    font-size: 4rem;
    color: #333
}

.popUp .popUp-container .popUp-content dl dt span b {
    font-size: 1.6rem
}

.popUp .popUp-container .popUp-content dl dt i {
    font-style: normal;
    color: #6ea269
}

.popUp .popUp-container .popUp-content .status_2 {
    color: red
}

.popUp .popUp-container .popUp-content .status_0 {
    color: #f90
}

.popUp .popUp-container .popUp-content dl dd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem #eee solid
}

.popUp .popUp-container .popUp-content dl dd:last-child {
    height: 7rem;
    padding: 1rem 0 0 0;
    border: 0;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.popUp .popUp-container .popUp-content dl dd p {
    flex: 1;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: .5rem 0 0 0;
    line-height: 1.5rem;
    text-align: center;
    position: relative;
    background: url(images/icon-right.svg) no-repeat center top/2rem
}

.popUp .popUp-container .popUp-content dl dd p:nth-child(3) {
    color: #6ea269
}

.popUp .popUp-container .popUp-content dl dd p:first-child:before,
.popUp .popUp-container .popUp-content dl dd p:nth-child(3):after {
    display: none
}

.popUp .popUp-container .popUp-content dl dd .status_2 {
    background: url(images/icon-error.svg) no-repeat center top/2rem;
    color: red !important
}

.popUp .popUp-container .popUp-content dl dd .status_0 {
    background: url(images/icon-wait.svg) no-repeat center top/2rem;
    color: #f90 !important
}

.popUp .popUp-container .popUp-content dl dd p:after,
.popUp .popUp-container .popUp-content dl dd p:before {
    content: '';
    height: .1rem;
    width: calc(50% - 1.3rem);
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: 0;
    background: #1078ff
}

.popUp .popUp-container .popUp-content dl dd p:after {
    left: unset;
    right: 0
}

.popUp .popUp-container .popUp-content dl dd b {
    color: #999;
    display: block;
    min-width: 10rem;
    margin: 0 1rem 0 0
}

.popUp .popUp-container .popUp-content dl dd i {
    font-style: normal;
    display: block;
    flex: 1;
    text-align: right;
    overflow: hidden;
    word-break: break-all;
    line-height: 2rem;
    padding: 1rem 0
}

#myFavorite .navigator-bar {
    box-shadow: unset;
    border-radius: 0
}

#myFavorite .navigator-bar .navi-edit {
    position: absolute;
    right: 0;
    z-index: 1;
    font-size: 1.6rem;
    text-transform: capitalize
}

#myFavorite .tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .1rem;
    list-style-type: none;
    margin: 0 0 1rem 0;
    overflow: hidden;
    min-height: 3rem;
    border-radius: 0 0 .5rem .5rem;
    background: #fff
}

#myFavorite .tabs li {
    flex: auto;
    min-height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    position: relative;
    transition: all .4s;
    cursor: pointer;
    padding: 0 1rem;
    background: #efefef;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-transform: capitalize
}

#myFavorite .tabs li i {
    font-style: normal
}

#myFavorite .tabs .actived {
    color: #fff;
    background: #f60
}

#myFavorite .list {
    flex: 1;
    background: #fff;
    margin: 0;
    padding: 0 2rem 2rem 2rem;
    overflow-x: hidden;
    display: flex;
    flex-direction: column
}

#myFavorite .list .live {
    border: .1rem #f0f4fa solid;
    box-sizing: content-box;
    min-height: 15rem;
    transition: all .4s;
    border-radius: .5rem;
    margin: 2rem 0 0 0;
    position: relative
}

#myFavorite .list .live p {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: .5rem;
    background: linear-gradient(to bottom, #f0f4fa, #ccd3dd)
}

#myFavorite .list .live p:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: -28rem;
    width: 40rem;
    height: 200%;
    transition: all 1s;
    background: linear-gradient(to bottom, #fff, rgb(255, 255, 255, .8));
    transform: translateZ(0) translateX(10rem) rotate(-30deg)
}

#myFavorite .list .live p img:first-child {
    position: absolute;
    display: block;
    height: 4rem;
    filter: grayscale(1);
    z-index: 1;
    transition: all 1s;
    top: 1rem;
    left: 1rem
}

#myFavorite .list .live:hover p img:first-child {
    filter: grayscale(0);
    border-radius: .5rem
}

#myFavorite .list .live p img:nth-child(2) {
    position: absolute;
    display: block;
    height: 10rem;
    top: 2rem;
    right: 3rem;
    opacity: .1
}

#myFavorite .list .live>img {
    position: absolute;
    right: 0;
    bottom: 0;
    transition: all 1s;
    height: 16rem !important;
    transform: translateZ(0) scale(.8);
    transform-origin: right bottom;
    width: unset !important
}

#myFavorite .list .live:hover {
    transform: translateZ(0) translateY(-1rem);
    box-shadow: .5rem 1rem 1rem 0 #bfccd9;
    margin: 2rem 0 0 0
}

#myFavorite .list .live:hover p:before {
    transform: translateZ(0) translateX(0) rotate(-30deg)
}

#myFavorite .list .live:hover>img {
    transform: translateZ(0) translateX(1rem) scale(1)
}

#myFavorite .list .live h3 {
    position: absolute;
    z-index: 1;
    top: 7.5rem;
    left: 2rem;
    width: 17rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0;
    transition: all 1s
}

#myFavorite .list .live:hover h3 {
    font-size: 2rem;
    top: 1.5rem;
    left: 7rem;
    text-shadow: .2rem .2rem 0 rgb(255 255 255)
}

#myFavorite .list .live ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1s;
    overflow: hidden
}

#myFavorite .list .live:hover ul {
    bottom: 2.5rem
}

#myFavorite .list .live ul li {
    min-width: 8rem;
    height: 3rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    cursor: pointer;
    margin: 0 .5rem;
    padding: 0 1rem;
    background: #fff;
    border: 1px #d4dbe8 solid;
    box-sizing: content-box
}

#myFavorite .list .live ul .active {
    background: #3a9ce8;
    color: #fff;
    border: .1rem #3a9ce8 solid;
    animation: flash 1s infinite
}

#myFavorite .list .live ul li:hover {
    background: rgba(75, 166, 254, .92) !important;
    border: 1px rgba(75, 166, 254, .92) solid;
    color: #fff
}

#myFavorite .list .live ul .favorite {
    width: 3rem;
    height: 3rem;
    background: #d4dbe8 url(images/icon-favorite.svg) no-repeat center/2rem;
    flex: unset;
    border: 0;
    min-width: 3rem;
    border-radius: .5rem;
    padding: 0;
    transition: all .4s
}

#myFavorite .list .live ul .favorited {
    width: 3rem;
    height: 3rem;
    background: #ffcb46 url(images/icon-favorite.svg) no-repeat center/2rem;
    flex: unset;
    border: 0;
    min-width: 3rem;
    padding: 0;
    transition: all .4s
}

#myFavorite .list .live ul .favorite:hover {
    background: #d4dbe8 url(images/icon-favorite.svg) no-repeat center/2rem !important;
    border: 0 !important;
    color: unset !important
}

#myFavorite .list .live ul .favorited:hover {
    background: #ffcb46 url(images/icon-favorite.svg) no-repeat center/2rem !important
}

#myMessage .navigator-bar {
    box-shadow: unset;
    border-radius: 0
}

#myMessage .navigator-bar .navi-edit {
    position: absolute;
    right: 0;
    z-index: 1;
    font-size: 1.6rem;
    text-transform: capitalize
}

#myMessage .tabs {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background: #eee;
    padding: 0
}

#myMessage .tabs li {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all .4s;
    text-transform: capitalize;
    padding: 0 1rem
}

#myMessage .tabs li i {
    font-style: normal
}

#myMessage .tabs .actived {
    color: #fff;
    background: #f60
}

#myMessage .list {
    flex: 1;
    background: #fff;
    margin: 1rem 0 0 0;
    overflow-x: hidden
}

#myMessage .list .item {
    display: flex;
    margin: 0 1rem;
    padding: 1.5rem 0;
    border-bottom: .1rem #eee solid;
    overflow: hidden
}

#myMessage .list .item:last-child {
    border: 0
}

#myMessage .list .item .left {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden
}

#myMessage .list .item .left .top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

#myMessage .list .item .left .top u {
    text-decoration: none;
    background: #6ea269;
    min-width: 2rem;
    height: 2rem;
    padding: 0 1rem;
    border-radius: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff
}

#myMessage .list .item .left .top .msgType-1 {
    background: #f60
}

#myMessage .list .item .left .top b {
    font-weight: 700;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 1rem;
    color: #333
}

#myMessage .list .item .left .top i {
    min-width: 7rem;
    font-style: normal;
    text-align: right
}

#myMessage .list .item .left .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: .5rem 0 0 0
}

#myMessage .list .item .left .bottom p {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: 0 1rem 0 0;
    color: #999
}

#myMessage .list .item .left .bottom i {
    display: block;
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
    opacity: .5;
    background: url('../DABOGAMING _ situs game online 2024_files/icon-arrow.svg') no-repeat center/contain
}

#myMessage .list .item .right {
    width: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    transition: all .4s;
    overflow: hidden
}

#myMessage .list .item .edit-in {
    width: 4rem;
    min-width: 4rem
}

#myMessage .list .item .right input {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: .1rem #ccc solid
}

#myMessage .editArea {
    margin: 0;
    background: #ffc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 1rem;
    overflow: hidden;
    height: 0;
    transition: all .5s;
    border: 0
}

#myMessage .editArea-in {
    border: .1rem #eee solid;
    height: 4rem;
    margin: 1rem
}

#myMessage .editArea p {
    flex: 1;
    background: #ffc;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: .1rem #eee solid;
    box-sizing: border-box;
    color: #666
}

#myMessage .editArea p:nth-child(2) {
    color: red
}

#myMessage .editArea p:last-child {
    border: 0;
    color: #2a87f1
}

.myMessage .content {
    min-height: 5rem;
    text-align: justify
}

.myMessage .content img {
    width: 100%;
    display: block
}

#personalData ul {
    background: #fff;
    margin: 1rem 0 0 0;
    list-style-type: none;
    padding: 0 1rem;
    font-size: 1.4rem
}

#personalData ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    line-height: 2rem;
    border-bottom: .1rem #eee solid
}

#personalData ul li:last-child {
    border: 0
}

#personalData ul li .avatar {
    height: 4rem;
    width: 4rem;
    display: inline-block;
    border-radius: 50%
}

#personalData ul li u {
    text-decoration: none;
    min-width: 10rem;
    text-transform: capitalize
}

#personalData ul li b {
    text-decoration: none;
    font-weight: 400;
    font-style: normal;
    flex: 1;
    color: #bbb;
    margin: 0 1rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5rem
}

#personalData ul li i {
    display: block;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .2
}

.personalData .avatars {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: max-content;
    overflow: hidden;
    list-style-type: none;
    padding: 1rem
}

.personalData .avatars li {
    width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    position: relative;
    overflow: unset
}

.personalData .avatars li:after {
    content: '';
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    right: -.5rem;
    background: #fff url(images/icon-success.svg) no-repeat center/contain;
    box-shadow: 0 0 .5rem #fff;
    transform: translateZ(0) scale(0);
    transition: transform .5s
}

.personalData .avatars .current:after {
    transform: translateZ(0) scale(1)
}

.personalData .avatars li img {
    width: 100%;
    height: 100%;
    display: block;
    filter: sepia(1);
    transition: all .5s;
    box-shadow: 0 0 1rem transparent;
    border-radius: 50%
}

.personalData .avatars .current img {
    filter: sepia(0);
    box-shadow: 0 0 .5rem rgba(0, 0, 0, .5)
}

.personalData .birthday,
.personalData .nickName {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap
}

.personalData .birthday li,
.personalData .nickName li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    flex-basis: 100%;
    border: 0
}

.personalData #birthday,
.personalData #nickname {
    flex: 1;
    border: .1rem #eee solid;
    color: #999;
    outline: 0;
    border-radius: 1rem;
    width: 100%;
    height: 3rem;
    display: flex;
    text-align: center;
    align-items: center;
    font-size: 1.6rem;
    box-sizing: content-box
}

#accountsAndSecurity ul {
    background: #fff;
    margin: 1rem 0 0 0;
    list-style-type: none;
    padding: 0 1rem;
    font-size: 1.4rem
}

#accountsAndSecurity ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: .1rem #eee solid;
    overflow: hidden
}

#accountsAndSecurity ul li:last-child {
    border: 0
}

#accountsAndSecurity ul li .avatar {
    height: 4rem;
    width: 4rem;
    display: inline-block;
    border-radius: 50%
}

#accountsAndSecurity ul li label,
#accountsAndSecurity ul li u {
    text-decoration: none;
    min-width: 10rem;
    text-transform: capitalize
}

#accountsAndSecurity ul li p {
    display: flex;
    flex: 1;
    align-items: center
}

#accountsAndSecurity p input {
    flex: 1;
    width: 20rem;
    display: block;
    padding: .5rem 0;
    border-radius: .5rem
}

#accountsAndSecurity p b {
    display: block;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 1rem;
    transition: background .4s;
    background: url(images/icon-eyes-close.png) no-repeat center right/contain
}

#accountsAndSecurity ul li i {
    display: block;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .2
}

.accountsAndSecurity ul {
    background: #fff;
    list-style-type: none;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 1.4rem
}

.accountsAndSecurity ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0 !important;
    border-bottom: .1rem #eee solid;
    overflow: hidden;
    flex-wrap: nowrap
}

.accountsAndSecurity ul li:last-child {
    border: 0
}

.accountsAndSecurity ul li label,
.accountsAndSecurity ul li u {
    text-decoration: none;
    min-width: 10rem;
    margin: 0 1rem 0 0;
    max-width: 10rem;
    text-align: left
}

.accountsAndSecurity ul li p {
    display: flex;
    align-items: center
}

.accountsAndSecurity p input {
    display: block;
    padding: .5rem 0;
    border-radius: .5rem;
    width: 100%
}

.accountsAndSecurity p b {
    display: block;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 0 0 1rem;
    transition: background .4s;
    background: url(images/icon-eyes-close.png) no-repeat center right/contain
}

.accountsAndSecurity li i {
    display: block;
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .2
}

#paymentMethod .container {
    background: #fff;
    overflow: hidden;
    margin: 1rem 0
}

#paymentMethod .container .payment-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem #f60 solid
}

#paymentMethod .container .payment-tabs .payment-tab {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    transition: all .5s
}

#paymentMethod .container .payment-tabs .current {
    background: #f60;
    color: #fff;
    font-size: 1.4rem
}

#paymentMethod .container .payment-list {
    background: #fff;
    padding: 2rem
}

#paymentMethod .container .payment-list .payment-add {
    background: #f9f9f9;
    border: .1rem #eee solid;
    height: 14rem;
    padding: 0 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: #999;
    font-size: 1.5rem
}

#paymentMethod .container .payment-list .payment-add:before {
    content: '';
    width: 3rem;
    height: 3rem;
    display: block;
    background: url(images/icon-add.svg) no-repeat center/contain;
    opacity: .2;
    margin: 0 1rem 0 0
}

#paymentMethod .container .payment-list .payment-item {
    background: linear-gradient(to right, #fc7369, #fc4e65);
    height: 14rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden
}

#paymentMethod .container .payment-list .payment-item:after {
    content: 'Bank';
    font-weight: 700;
    font-size: 5rem;
    height: 5rem;
    color: rgba(255, 255, 255, .2);
    position: absolute;
    bottom: 1rem;
    right: 1rem
}

#paymentMethod .container .payment-list .payment-item h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    width: 4rem;
    height: 4rem;
    background: #fff;
    color: #de1828;
    border-radius: 50%;
    position: absolute;
    top: 1rem;
    left: 1rem
}

#paymentMethod .container .payment-list .payment-item p {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.5rem;
    width: 20rem;
    height: 4rem;
    color: #fff;
    position: absolute;
    top: 1rem;
    left: 6rem;
    overflow: hidden
}

#paymentMethod .container .payment-list .payment-item p u {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none
}

#paymentMethod .container .payment-list .payment-item b {
    font-size: 2rem;
    width: 20rem;
    height: 3rem;
    color: #fff;
    position: absolute;
    top: 8rem;
    left: 3rem
}

#paymentMethod .container .payment-list .payment-item i {
    font-size: 1rem;
    height: 2rem;
    color: #fff;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-style: normal;
    padding: 0 1rem;
    border: .1rem #fff solid;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.popUp .popUp-container .popUp-content .addPayment {
    background: #fff;
    list-style-type: none;
    font-size: 1.4rem
}

.popUp .popUp-container .popUp-content .addPayment li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
    border-bottom: .1rem #eee solid;
    overflow: hidden;
    flex-wrap: nowrap
}

.popUp .popUp-container .popUp-content ul li:last-child {
    border: 0
}

.popUp .popUp-container .popUp-content .addPayment li label,
.popUp .popUp-container .popUp-content .addPayment li u {
    text-decoration: none;
    min-width: 10rem;
    flex-basis: unset
}

.popUp .popUp-container .popUp-content .addPayment li label {
    display: flex;
    align-items: center
}

.popUp .popUp-container .popUp-content .addPayment li label i {
    font-style: normal;
    display: block;
    margin: 0 .5rem 0 0;
    color: red;
    background: unset;
    opacity: 1
}

.popUp .popUp-container .popUp-content input {
    width: 100%;
    display: flex;
    padding: 1rem 0;
    border-radius: .5rem;
    text-align: right
}

.popUp .popUp-container .popUp-content select {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    appearance: none;
    outline: 0;
    border: 0;
    color: #999;
    flex: 1;
    background: 0 0;
    font: 1.4rem PingFangSC-Medium, 'PingFang SC', 'Microsoft YaHei UI', verdana, tahoma;
    text-align: right;
    height: 3rem
}

.popUp .popUp-container .popUp-content p b {
    display: block;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 1rem;
    transition: background .4s;
    background: url(images/icon-eyes-close.png) no-repeat center right/contain
}

.popUp .popUp-container .popUp-content .btn {
    flex: 1;
    background: #fc1855;
    height: 4rem;
    margin: 1.5rem 0;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff
}

.popUp .popUp-container .popUp-content .replace {
    margin: 0
}

.popUp .popUp-container .popUp-content .replace .support {
    display: flex;
    justify-content: center;
    align-items: center
}

.popUp .popUp-container .popUp-content .replace .support:before {
    content: '';
    width: 5rem;
    min-width: 5rem;
    height: 5rem;
    display: block;
    background: url(images/icon-support.svg) no-repeat center/contain
}

.popUp .popUp-container .popUp-content .replace .support div {
    display: flex;
    flex-direction: column;
    margin: 0 1rem
}

.popUp .popUp-container .popUp-content .replace .support div h3 {
    line-height: 3rem;
    font-size: 1.5rem;
    margin: 0 0 .5rem 0;
    border-bottom: .1rem #6a82ad dashed
}

.popUp .popUp-container .popUp-content .replace .support i {
    width: 2rem;
    height: 2rem;
    display: block;
    background: url(images/icon-arrow.svg) no-repeat center/contain;
    opacity: .3
}

#deposit .container {
    overflow-x: hidden
}

#deposit .container .bindCardFirst {
    text-align: center;
    width: 20rem;
    display: block;
    margin: 10rem auto;
    font-size: 1.4rem;
    color: #0091ff
}

#deposit .container .bankcode-image {
    padding: 2rem 0;
    background: #fff
}

#deposit .container .bankcode-image canvas,
#deposit .container .bankcode-image img {
    width: 22.7rem;
    display: block;
    margin: 0 auto
}

#deposit .container .bankcode-image .refresh-button {
    display: block;
    width: 22.7rem;
    height: 4rem;
    line-height: 4rem;
    margin: auto;
    margin-top: 2rem;
    background: #f60;
    text-align: center;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgb(0 0 0 / 20%);
    color: #fff
}

#deposit .container ul {
    background: #fff;
    margin: 1rem 0 0 0;
    list-style-type: none;
    padding: 0 1rem;
    font-size: 1.4rem
}

#deposit .container ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem #eee solid;
    overflow: hidden;
    min-height: 3rem;
    padding: 1rem 0
}

#deposit .container ul li:last-child {
    border: 0
}

#deposit .container ul li label {
    text-decoration: none;
    min-width: 10rem
}

#deposit .container ul li label i {
    color: red
}

#deposit .container ul li b {
    font-weight: 400
}

#deposit .container ul li i {
    font-style: normal;
    color: #ffcb46
}

#deposit .container ul li p {
    flex: 1;
    text-align: right;
    color: #333
}

#deposit .container ul li input {
    flex: 1;
    text-align: right;
    width: 100%;
    margin: 0 .5rem 0 1rem;
    height: 5rem;
    line-height: 5rem;
    font-size: 4rem;
    position: relative;
    font-weight: 700
}

#deposit .container ul li input::placeholder {
    font-size: 1.4rem;
    font-weight: 400;
    display: block;
    position: absolute;
    right: 0;
    bottom: 1.6rem
}

#deposit .container .bank-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    color: #333;
    margin: 1rem 0;
    gap: .1rem;
    border-radius: .5rem;
    overflow: hidden
}

#deposit .container .bank-tabs .bank-tab {
    padding: .5rem;
    background: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex: auto;
    width: 23.1%;
    margin: .3rem;
    box-sizing: border-box;
    border-radius: .3rem;
    box-shadow: 0 .1rem .2rem #999;
    min-width: 4.3rem
}

#deposit .container .bank-tabs .bank-tab:nth-of-type(10),
#deposit .container .bank-tabs .bank-tab:nth-of-type(11),
#deposit .container .bank-tabs .bank-tab:nth-of-type(9) {
    width: 30.6%
}

#deposit .container .bank-tabs .selected {
    color: #fff;
    background: #f60;
    transition: all .5s;
    cursor: default
}

#deposit .container .bank-tabs .selected i {
    color: #fff !important
}

#deposit .container .bank-tabs .bank-tab i {
    font-style: normal;
    color: #666;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
}

#deposit .container .bank-list {
    color: #333;
    flex: 1;
    flex-basis: 100%
}

#deposit .container .bank-list .bank-items {
    display: none
}

#deposit .container .bank-list .bank-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem #eee solid;
    padding: .5rem 0;
    line-height: 1.5rem;
    height: 3rem
}

#deposit .container .bank-list .bank-item:last-child {
    border-bottom: 0
}

#deposit .container .bank-list .qris-item {
    margin: 0 .5rem;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 .1rem .5rem #999;
    padding-bottom: 1.5rem
}

#deposit .container .bank-list .qris-item .qris-title {
    font-size: 1.3rem;
    background: #71a9f1;
    height: 3.7rem;
    line-height: 3.7rem;
    text-align: center;
    border-radius: 1rem 1rem 0 0;
    color: #fff;
    margin: 0;
    display: block;
    font-weight: 700
}

#deposit .container .bank-list .qris-item .amount-qris {
    position: relative;
    padding: 0
}

#deposit .container .bank-list .qris-item .amount-qris input {
    height: 2.6rem;
    line-height: 2.6rem;
    border-radius: .3rem;
    background: #dadada;
    font-size: 1.4rem;
    margin-right: 0;
    padding-left: .5rem;
    padding-right: 3rem;
    text-align: left
}

#deposit .container .bank-list .qris-item .amount-qris input::placeholder {
    font-size: 1.4rem;
    font-weight: 400;
    display: block;
    position: absolute;
    right: 3rem;
    bottom: .4rem
}

#deposit .container .bank-list .qris-item .amount-qris i {
    position: absolute;
    right: .5rem;
    top: .5rem;
    color: #333
}

#deposit .container .bank-list .qris-item .amount-select {
    padding-left: 11.4rem
}

#deposit .container .bank-list .qris-item .amount-select ul {
    display: flex;
    justify-content: space-between
}

#deposit .container .bank-list .qris-item .amount-select li {
    width: 3.3rem;
    height: 1.9rem;
    min-height: 1.9rem;
    justify-content: center;
    line-height: 1.9rem;
    font-size: 1.2rem;
    color: #fff;
    background: #71a9f1;
    border-radius: .3rem;
    padding: 0;
    border-bottom: 0
}

#deposit .container .bank-list .qris-item .bankcode-image p {
    width: 100%;
    margin: 0;
    display: block;
    padding: 1rem 1rem 0;
    box-sizing: border-box;
    color: red;
    text-align: center
}

#deposit .container .bank-list .qris-item .qris-info {
    display: flex;
    padding: 0 1rem
}

#deposit .container .bank-list .qris-item .qris-info .qris-logo img {
    width: 13rem
}

#deposit .container .bank-list .qris-item .qris-info .qris-bank {
    display: flex;
    margin-top: .2rem
}

#deposit .container .bank-list .qris-item .qris-info .qris-bank li {
    padding: 0;
    height: auto;
    min-height: auto;
    display: block;
    margin-right: .3rem;
    border-bottom: 0
}

#deposit .container .bank-list .qris-item .qris-info .qris-bank li img {
    height: 1.6rem;
    border-radius: .3rem
}

#deposit .container .bank-list .qris-item .submit {
    margin-bottom: 0;
    background: #f86609;
    border-radius: .3rem;
    height: 2.8rem;
    line-height: 2.8rem
}

#deposit .container .bank-list b {
    min-width: 10rem;
    max-width: 10rem;
    width: 10rem;
    color: #6a82ad;
    text-transform: capitalize
}

#deposit .container .bank-list p {
    flex: 1;
    margin: 0 0 0 1rem;
    line-height: 1.6rem;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

#deposit .container .bank-list p u {
    text-decoration: none;
    margin: 0 0 0 1rem;
    line-height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: right
}

#deposit .container .bank-list p i {
    text-align: right;
    display: inline-block;
    color: #2a87f1;
    font-style: normal;
    margin: 0 0 0 1rem;
    text-transform: capitalize
}

#deposit .container .choosePic {
    flex-basis: 70%;
    height: 13rem;
    margin: 1rem auto;
    border-radius: 1rem;
    overflow: hidden;
    background: #efefef;
    border: .1rem #eee solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

#deposit #receipt {
    display: none
}

#deposit .container .choosePic:before {
    content: '';
    width: 10rem;
    height: 10rem;
    background: #eee url(images/icon-camera.svg) no-repeat center/contain;
    opacity: .3
}

#deposit .container .choosePic img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff
}

#deposit .container .submit {
    flex: 1;
    background: #fc1855;
    height: 4rem;
    margin: 1.5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 0 1rem rgb(0 0 0 / 30%)
}

#deposit .container .submit.isQrSubmit {
    display: none
}

#deposit .container .submit.isSubmitShow {
    display: flex
}

#deposit .container dl {
    background: #fff;
    margin: 1rem 0;
    padding: 1rem
}

#deposit .container dl dt {
    font-weight: 700
}

#deposit .container dl dd {
    margin: .5rem 0;
    text-align: justify
}

#deposit .container .bank-status-list {
    padding: 0 1rem 1rem
}

#deposit .container .deposit-banklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: max-content;
    gap: .5rem;
    background: linear-gradient(0deg, #f4f6fa, #f5f7fa);
    box-shadow: 0 3px 12px 0 rgb(209 221 242 / 50%);
    padding: 0 1rem 1rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 32.5rem;
    border: #fff .1rem solid
}

#deposit .container .deposit-banklist dt {
    grid-column: 2 span;
    text-align: center;
    color: #fff;
    margin: 0 0 0 -1rem;
    height: 3.5rem;
    line-height: 3.5rem;
    background: rgba(0, 0, 0, .5);
    width: 106%
}

#deposit .container .deposit-banklist dt i {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    background: #7cfc00;
    border-radius: 50%;
    margin: 0 .2rem
}

#deposit .container .deposit-banklist dt i:nth-child(2) {
    background: red
}

#deposit .container .deposit-banklist dt i:nth-child(3) {
    background: #ff0
}

#deposit .container .deposit-banklist dd {
    border-radius: .5rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 0 .5rem;
    justify-content: center;
    gap: .5rem;
    overflow: hidden
}

#deposit .container .deposit-banklist dd i {
    display: none;
    width: .8rem;
    min-width: .8rem;
    height: .8rem;
    background: #7cfc00;
    border-radius: 50%
}

#deposit .container .deposit-banklist dd .status-2 {
    background: red
}

#deposit .container .deposit-banklist dd .status-3 {
    background: #ff0
}

#deposit .container .deposit-banklist dd img {
    display: block;
    object-fit: contain;
    width: 100%
}

#withdrawal .container .payment-add {
    background: #f9f9f9;
    border: .1rem #eee solid;
    height: 14rem;
    padding: 0 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    color: #999;
    font-size: 1.5rem;
    margin: 2rem
}

#withdrawal .container .payment-add:before {
    content: '';
    width: 3rem;
    height: 3rem;
    display: block;
    background: url(images/icon-add.svg) no-repeat center/contain;
    opacity: .2;
    margin: 0 1rem 0 0
}

#withdrawal .container .payment-list {
    display: flex;
    flex-direction: column
}

#withdrawal .container .payment-list .payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    margin: 1rem 0;
    border-radius: .5rem;
    padding: 1rem;
    position: relative;
    border: .1rem #eee solid
}

#withdrawal .container .payment-list .payment-item h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    background: #fc1855;
    color: #fff;
    border-radius: 50%;
    overflow: hidden
}

#withdrawal .container .payment-list .payment-item p {
    flex: 1;
    display: block;
    margin: 0 1rem;
    overflow: hidden
}

#withdrawal .container .payment-list .payment-item p u {
    display: block;
    text-decoration: none;
    font-size: 1.6rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#withdrawal .container .payment-list .payment-item p b {
    font-weight: 400;
    display: block;
    margin: .5rem 0 0 0;
    font-size: 2rem
}

#withdrawal .container .payment-list .payment-item i {
    font-style: normal
}

#withdrawal .container .submit {
    flex: 1;
    background: #fc1855;
    height: 4rem;
    margin: 1.5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    color: #fff;
    box-shadow: 0 0 1rem rgb(0 0 0 / 30%)
}

#withdrawal .container ul {
    background: #fff;
    list-style-type: none;
    padding: 0 1rem;
    font-size: 1.4rem
}

#withdrawal .container ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: .1rem #eee solid;
    overflow: hidden;
    min-height: 3rem;
    padding: 1rem 0
}

#withdrawal .container ul li:last-child {
    border: 0
}

#withdrawal .container ul li label {
    text-decoration: none;
    min-width: 15rem;
    max-width: 15rem;
    text-transform: capitalize
}

#withdrawal .container ul li label i {
    color: red
}

#withdrawal .container ul li b {
    font-weight: 400
}

#withdrawal .container ul li i {
    font-style: normal;
    margin: 0 0 0 1rem;
    text-transform: capitalize
}

#withdrawal .container ul .withdrawableAmount i {
    color: #ffcb46
}

#withdrawal .container ul li p {
    flex: 1;
    text-align: right;
    color: #333
}

#withdrawal .container ul li p>i {
    color: #ffcb46
}

#withdrawal .container ul li input {
    width: 100%;
    font-size: 3rem;
    position: relative;
    font-weight: 700;
    text-align: right;
    flex: 1;
    margin: 0 0 0 1rem
}

#withdrawal .container ul li input::placeholder {
    font-size: 1.4rem;
    display: block;
    position: absolute;
    right: 0;
    top: 1rem;
    font-weight: 400
}

#withdrawal .container ul li #payPassword {
    flex: 1;
    width: 100%;
    text-align: right;
    position: relative;
    margin: 0 .5rem
}

#withdrawal ul .withdrawablePsw b {
    display: block;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0 1rem;
    transition: background .4s;
    background: url(images/icon-eyes-close.png) no-repeat center right/contain
}

#oddsRules {
    display: block
}

#oddsRules .navigator-bar i {
    width: 5rem;
    height: 3rem;
    display: block;
    background: url(images/icon-filter.svg) no-repeat center/2rem;
    transition: all .4s
}

#oddsRules .navigator-bar .filter {
    background: url(images/icon-arrow.svg) no-repeat center/2rem;
    transform: translateZ(0) rotate(-90deg)
}

#oddsRules .navigator-bar:after {
    display: none
}

#oddsRules .rule-detail {
    height: calc(100% - 5rem);
    overflow: auto
}

#oddsRules .rule-detail .tabs {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: .1rem;
    list-style-type: none;
    overflow: auto;
    margin: 0 0 1rem 0;
    padding: 0 !important;
    background: #fff !important;
    max-height: 0;
    min-height: 0;
    transition: all .4s;
    box-shadow: 0 0 1rem #0003
}

#oddsRules .rule-detail .tabs li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    position: relative;
    transition: all .4s;
    cursor: pointer;
    padding: .5rem 1rem;
    background: #efefef;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

#oddsRules .rule-detail .tabs li:hover {
    background: #fc4e65;
    color: #fff
}

#oddsRules .rule-detail .tabs .actived {
    background: #f60;
    color: #fff
}

#oddsRules .rule-detail .tabs li[data-flag=category] {
    background: #ccc;
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: 1.4rem;
    grid-column: 3 span
}

#oddsRules .rule-detail .expand {
    max-height: 100vh
}

#oddsRules .rule-detail .rule-content {
    line-height: 2rem;
    min-height: 30rem;
    margin: 0 1rem 3rem 1rem;
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: .2rem .4rem .6rem #0003
}

#oddsRules .rule-detail .rule-content dd {
    display: none
}

#oddsRules .rule-detail .rule-content dd h2 {
    font-size: 2rem;
    color: #fc4e65
}

#oddsRules .rule-detail .rule-content section {
    width: 100%;
    display: none;
    overflow: hidden;
    min-width: unset;
    min-height: unset
}

#oddsRules .rule-detail .rule-content section p {
    padding: 1rem 2rem;
    border-radius: 1rem;
    background: #f60;
    color: #fff;
    line-height: 2rem
}

#oddsRules .rule-detail .rule-content select {
    margin: 0 0 0 2rem;
    height: 3rem;
    appearance: auto;
    border: 0;
    padding: 0 1rem;
    outline: 0
}

#oddsRules .rule-detail .rule-content dd table {
    width: 100%;
    margin: 1rem 0;
    background: #fff;
    overflow: hidden;
    border-spacing: .1rem
}

#oddsRules .rule-detail .rule-content dd table tr {
    background: #f8f8f8
}

#oddsRules .rule-detail .rule-content dd table tr:nth-child(odd) {
    background: #eee
}

#oddsRules .rule-detail .rule-content dd table tr:first-child {
    background: #999;
    font-weight: 700;
    color: #fff
}

#oddsRules .rule-detail .rule-content dd table tr td {
    padding: .5rem
}

#gameRules {
    display: block
}

#gameRules .navigator-bar i {
    width: 5rem;
    height: 3rem;
    display: block;
    background: url('../DABOGAMING _ situs game online 2024_files/icon-filter.svg') no-repeat center/2rem;
    transition: all .4s
}

#gameRules .navigator-bar .filter {
    background: url('../DABOGAMING _ situs game online 2024_files/icon-arrow.svg') no-repeat center/2rem;
    transform: translateZ(0) rotate(-90deg)
}

#gameRules .navigator-bar:after {
    display: none
}

#gameRules .rule-detail {
    height: calc(100% - 5rem);
    overflow: auto
}

#gameRules .rule-detail .tabs {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: .1rem;
    list-style-type: none;
    overflow: auto;
    margin: 0 0 1rem 0;
    padding: 0 !important;
    background: #fff !important;
    max-height: 0;
    min-height: 0;
    transition: all .4s;
    box-shadow: 0 0 1rem #0003
}

#gameRules .rule-detail .tabs li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    position: relative;
    transition: all .4s;
    cursor: pointer;
    padding: .5rem 1rem;
    background: #efefef;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

#gameRules .rule-detail .tabs li:hover {
    background: #fc4e65;
    color: #fff
}

#gameRules .rule-detail .tabs .actived {
    background: #f60;
    color: #fff
}

#gameRules .rule-detail .tabs li[data-flag=category] {
    background: #ccc;
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: 1.4rem;
    grid-column: 4 span
}

#gameRules .rule-detail .expand {
    max-height: 100vh
}

#gameRules .rule-detail .rule-content {
    line-height: 2rem;
    margin: 0 1rem 3rem 1rem;
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: .2rem .4rem .6rem #0003
}

#gameRules .rule-detail .rule-content dd {
    display: none
}

#gameRules .rule-detail .rule-content dd hr {
    margin: 2rem 0
}

#gameRules .rule-detail .rule-content dd p {
    margin: 1rem 0
}

#gameRules .rule-detail .rule-content dd h2 {
    margin: 2rem 0
}

#gameRules .rule-detail .rule-content dd h4 {
    font-size: 2rem
}

#gameRules .rule-detail .rule-content dd ol,
#gameRules .rule-detail .rule-content dd ul {
    margin: 0 0 0 3rem
}

#gameRules .rule-detail .rule-content dd img {
    max-width: 100%;
    display: inline-block
}

#gameRules .rule-detail .rule-content dd table {
    width: 100%;
    border-collapse: separate;
    border-spacing: .1rem;
    background: #000;
    overflow: hidden
}

#gameRules .rule-detail .rule-content dd table tr {
    background: #f8f8f8;
    color: #333
}

#gameRules .rule-detail .rule-content dd table tr:nth-child(odd) {
    background: #eee
}

#gameRules .rule-detail .rule-content dd table tr:first-child {
    background: #999;
    font-weight: 700;
    color: #fff
}

#gameRules .rule-detail .rule-content dd table tr td {
    padding: .5rem;
    line-height: 1.5rem;
    word-break: break-word
}

#gameRules .rule-detail .rule-content dd table tr td p {
    margin: 0;
    padding: 0
}

#gameRules .rule-detail .rule-content dd .shio-table tr td {
    color: #333
}

#myRecommend {
    display: block
}

#myRecommend .detail {
    display: block;
    margin: 2rem;
    min-height: 30rem
}

#myRecommend .detail dl {
    background: #eee;
    display: grid;
    grid-gap: .1rem;
    grid-template-columns: repeat(2, 1fr);
    border: .1rem #eee solid
}

#myRecommend .detail dl dd {
    background: #f8f8f8;
    padding: 1rem
}

#myRecommend .detail dl dd:nth-child(2n) {
    background: #fff;
    text-align: right
}

#myRecommend .sub-tabs {
    overflow: hidden;
    list-style: none;
    text-align: left;
    margin-top: 1.5rem
}

#myRecommend .sub-tabs.liveGame {
    display: block
}

#myRecommend .sub-tabs li {
    display: inline-block;
    letter-spacing: 0;
    word-spacing: 0;
    vertical-align: top;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1rem;
    cursor: pointer;
    font-size: 1.4rem;
    border-radius: .3rem;
    min-width: 4rem;
    text-align: center
}

#myRecommend .sub-tabs .actived {
    background: #f60;
    color: #fff
}

#game .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin: 2rem
}

#game .list.sboSport-list {
    grid-template-columns: repeat(1, 1fr)
}

#game .list.sboSport-list .item {
    height: 16rem
}

#game .list.sboSport-list .item h3 {
    bottom: 3rem
}

#game .list.sboSport-list .button-box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 101;
    width: 100%;
    box-sizing: border-box
}

#game .list.sboSport-list .button-box a {
    width: 50%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    cursor: pointer;
    padding: 0 1rem;
    box-sizing: border-box;
    color: #333;
    background: #058107;
    color: #fff
}

#game .list.sboSport-list .item p {
    background-size: 100%;
    background-repeat: no-repeat
}

#game .list.sboSport-list .item p>img:first-child {
    width: 15%
}

#game .list.sboSport-list .item p>img:nth-child(2) {
    display: none
}

#game .list.sboSport-list .button-box a:nth-of-type(2) {
    background: #0b9dd0
}

#game .list.cmdSport-list {
    grid-template-columns: repeat(1, 1fr)
}

#game .list.cmdSport-list .item {
    height: 16rem
}

#game .list.cmdSport-list .item h3 {
    bottom: 3rem
}

#game .list.cmdSport-list .button-box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 101;
    width: 100%;
    box-sizing: border-box
}

#game .list.cmdSport-list .button-box a {
    width: 50%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    cursor: pointer;
    padding: 0 1rem;
    box-sizing: border-box;
    color: #333;
    background: #058107;
    color: #fff
}

#game .list.cmdSport-list .item p {
    background-size: 100%;
    background-repeat: no-repeat
}

#game .list.cmdSport-list .item p>img:first-child {
    width: 15%
}

#game .list.cmdSport-list .item p>img:nth-child(2) {
    display: none
}

#game .list.cmdSport-list .button-box a:nth-of-type(2) {
    background: #0b9dd0
}

#game .list.sabaSport-list {
    grid-template-columns: repeat(1, 1fr)
}

#game .list.sabaSport-list .item {
    height: 16rem
}

#game .list.sabaSport-list .item h3 {
    bottom: 3rem
}

#game .list.sabaSport-list .button-box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 101;
    width: 100%;
    box-sizing: border-box
}

#game .list.sabaSport-list .button-box a {
    width: 50%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    cursor: pointer;
    padding: 0 1rem;
    box-sizing: border-box;
    color: #333;
    background: #058107;
    color: #fff
}

#game .list.sabaSport-list .item p {
    background-size: 100%;
    background-repeat: no-repeat
}

#game .list.sabaSport-list .item p>img:first-child {
    width: 15%
}

#game .list.sabaSport-list .item p>img:nth-child(2) {
    display: none
}

#game .list.sabaSport-list .button-box a:nth-of-type(2) {
    background: #0b9dd0
}

#game .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 2;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

#game .navigator-bar:after {
    display: none
}

#game .navigator-bar i {
    width: 5rem;
    height: 5rem;
    display: block;
    background: url(images/icon-avatar.svg) no-repeat center/2rem
}

#game .list .item {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    aspect-ratio: 1/1;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

#game .list .item .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

#game .list .item.closed:after {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

#game .list .item p {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

#game .list .item p>img:first-child {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 40%;
    aspect-ratio: 1/1;
    display: block;
    opacity: .5;
    object-fit: contain
}

#game .list .item p>img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    display: block
}

#game .list .item.jokerFish p>img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover
}

#game .list .item h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(45deg, gold 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2f4f4f;
    overflow: hidden;
    font-weight: 700 !important
}

#game .list .vegas p>img:first-child {
    z-index: 1;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    left: unset;
    right: .5rem;
    opacity: unset
}

#game .list .vegas p>img:nth-child(2) {
    object-fit: cover;
    width: 100%
}

#game .list .vegas h3 {
    background: linear-gradient(45deg, #f60 50%, transparent);
    color: #fff
}

#game .list .saLv {
    background: #ddd
}

#game .list .saLv p>img:first-child {
    z-index: 1;
    width: 40%;
    filter: invert(50%) sepia(90%) saturate(4024%) hue-rotate(3deg) brightness(105%) contrast(104%);
    opacity: .6
}

#game .list .saLv h3 {
    background: linear-gradient(45deg, #666 50%, transparent);
    color: #fff
}

#game .list .rcg h3 {
    background: linear-gradient(45deg, #8b0000 50%, transparent);
    color: #fff
}

#game .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin: 2rem
}

#game .navigator-bar:after {
    display: none
}

#game .navigator-bar i {
    width: 5rem;
    height: 5rem;
    display: block;
    background: url(images/icon-avatar.svg) no-repeat center/2rem
}

#game .list .item {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    aspect-ratio: 1/1;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

#game .list .item .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

#game .list .item p {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

#game .list .item p>img:first-child {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 40%;
    aspect-ratio: 1/1;
    display: block;
    opacity: .5;
    object-fit: contain
}

#game .list .item p>img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    display: block
}

#game .list .item h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(45deg, gold 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2f4f4f;
    overflow: hidden;
    font-weight: 700 !important
}

#game .list .pplc {
    order: 27
}

#game .list .pplc:nth-of-type(2) {
    order: 1
}

#game .list .pplc:nth-of-type(27) {
    order: 2
}

#game .list .pplc:nth-of-type(25) {
    order: 3
}

#game .list .pplc:nth-of-type(26) {
    order: 4
}

#game .list .pplc:nth-of-type(8) {
    order: 5
}

#game .list .pplc:nth-of-type(9) {
    order: 6
}

#game .list .pplc:nth-of-type(15) {
    order: 7
}

#game .list .pplc:nth-of-type(3) {
    order: 8
}

#game .list .pplc:nth-of-type(6) {
    order: 9
}

#game .list .pplc:nth-of-type(5) {
    order: 10
}

#game .list .pplc:nth-of-type(4) {
    order: 11
}

#game .list .vegas p>img:first-child {
    z-index: 1;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    left: unset;
    right: .5rem;
    opacity: unset
}

#game .list .vegas p>img:nth-child(2) {
    object-fit: cover;
    width: 100%
}

#game .list .vegas h3 {
    background: linear-gradient(45deg, #f60 50%, transparent);
    color: #fff
}

#game .list .saLv {
    background: #ddd
}

#game .list .saLv p>img:first-child {
    z-index: 1;
    width: 40%;
    filter: invert(50%) sepia(90%) saturate(4024%) hue-rotate(3deg) brightness(105%) contrast(104%);
    opacity: .6
}

#game .list .saLv h3 {
    background: linear-gradient(45deg, #666 50%, transparent);
    color: #fff
}

#game .list .rcg h3 {
    background: linear-gradient(45deg, #8b0000 50%, transparent);
    color: #fff
}

#game .game-list-box {
    position: relative;
    padding-top: 30px
}

#game .game-list-box .searchKey {
    position: absolute;
    top: 10px;
    right: 20px;
    height: 25px;
    background: #fff9;
    border: none;
    padding: 0 8px;
    border-radius: 5px
}

#game .game-list-box .searchKey:focus {
    outline: 0;
    border: none;
    box-shadow: none
}

#game .game-list-box .searchKey::-webkit-input-placeholder {
    color: #333
}

#game .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    margin: 2rem
}

#game .navigator-bar:after {
    display: none
}

#game .navigator-bar i {
    width: 5rem;
    height: 5rem;
    display: block;
    background: url(images/icon-avatar.svg) no-repeat center/2rem
}

#game .list .item {
    border: 1px #fff solid;
    box-sizing: border-box !important;
    width: 100%;
    aspect-ratio: 1/1;
    transition: all .4s;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem 0 #bfccd9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #eee
}

#game .list .item.room-closed,
.game-list .game-items .game-item.room-closed {
    filter: sepia(1);
    -webkit-filter: sepia(1);
    order: 999
}

#game .list .item .coming:before {
    content: attr(data-before-content);
    display: flex;
    width: 100%;
    height: 100%;
    background: #0008;
    position: absolute;
    z-index: 1;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-transform: capitalize
}

#game .list .item p {
    width: 100%;
    height: 100%;
    display: block;
    position: relative
}

#game .list .item p>img:first-child {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 40%;
    aspect-ratio: 1/1;
    display: block;
    opacity: .5;
    object-fit: contain
}

#game .list .item p>img:nth-child(2) {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    display: block
}

#game .list .item h3 {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 1rem;
    line-height: 3rem !important;
    width: calc(100% - 2rem);
    background: linear-gradient(45deg, gold 50%, transparent);
    padding: 0 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #2f4f4f;
    overflow: hidden;
    font-weight: 700 !important
}

#game .list .item.PIONEERLIVE h3 {
    bottom: 4.5rem;
    background: linear-gradient(45deg, #fff 20%, transparent)
}

#game .list .vegas p>img:first-child {
    z-index: 1;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    left: unset;
    right: .5rem;
    opacity: unset
}

#game .list .vegas p>img:nth-child(2) {
    object-fit: cover;
    width: 100%
}

#game .list .vegas h3 {
    background: linear-gradient(45deg, #f60 50%, transparent);
    color: #fff
}

#game .list .saLv {
    background: #ddd
}

#game .list .saLv p>img:first-child {
    z-index: 1;
    width: 40%;
    filter: invert(50%) sepia(90%) saturate(4024%) hue-rotate(3deg) brightness(105%) contrast(104%);
    opacity: .6
}

#game .list .saLv h3 {
    background: linear-gradient(45deg, #666 50%, transparent);
    color: #fff
}

#game .list .rcg h3 {
    background: linear-gradient(45deg, #8b0000 50%, transparent);
    color: #fff
}

#game .list .elgame {
    aspect-ratio: unset;
    max-height: 259px
}

#game .list .elgame p {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1
}

#game .list .elgame p>img:first-child {
    opacity: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

#game .list .elgame p>img:nth-child(2) {
    display: block;
    aspect-ratio: 1/1;
    width: calc((100% - 1rem) * .6);
    height: auto;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    box-shadow: .2rem .2rem .3rem 0 #000;
    border-radius: 1.5rem
}

#game .list .elgame h3 {
    position: relative
}

#game .list .ppslot {
    order: 250
}

#game .list .ppslot:nth-child(5) {
    order: 1
}

#game .list .ppslot:nth-child(248) {
    order: 2
}

#game .list .ppslot:nth-child(7) {
    order: 3
}

#game .list .ppslot:nth-child(9) {
    order: 4
}

#game .list .ppslot:nth-child(12) {
    order: 5
}

#game .list .ppslot:nth-child(16) {
    order: 6
}

#game .list .ppslot:nth-child(129) {
    order: 7
}

#game .list .ppslot:nth-child(115) {
    order: 8
}

#game .list .ppslot:nth-child(13) {
    order: 9
}

#game .list .ppslot:nth-child(88) {
    order: 10
}

#game .list .ppslot:nth-child(11) {
    order: 11
}

#game .list .ppslot:nth-child(10) {
    order: 12
}

#game .list .ppslot:nth-child(47) {
    order: 13
}

#game .list .ppslot:nth-child(15) {
    order: 14
}

#game .list .ppslot:nth-child(17) {
    order: 15
}

#game .list .ppslot:nth-child(75) {
    order: 16
}

#game .list .ppslot:nth-child(19) {
    order: 17
}

#game .list .ppslot:nth-child(28) {
    order: 18
}

#game .list .ppslot:nth-child(120) {
    order: 19
}

#game .list .ppslot:nth-child(104) {
    order: 20
}

#gameWindow {
    display: block;
    min-height: 100vh
}

#gameWindow .content .icon {
    display: block;
    width: 20rem;
    height: 20rem;
    border-radius: 3rem;
    object-fit: contain;
    background: #eee;
    margin: 2rem auto 2rem auto;
    box-shadow: .2rem .4rem .6rem #0003
}

#gameWindow .content p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 2rem
}

#gameWindow .content p:before {
    content: '';
    width: 2rem;
    height: 2rem;
    display: block;
    background: rgba(255, 255, 255, 0) url(images/loading.svg) no-repeat center/2rem
}

.register-step ul li .bank-select {
    flex-wrap: wrap
}

.register-step ul li .bank-select a {
    display: block;
    width: 10rem;
    height: 3rem;
    background: #eee;
    color: #333;
    text-align: center;
    line-height: 3rem;
    margin: 0 .5rem .5rem 0
}

.register-step ul li .bank-select a.active {
    background: #fc1855;
    color: #fff
}

#myRecommend .tabs {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background: #eee;
    padding: 0
}

#myRecommend .tabs li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: all .4s;
    text-transform: capitalize;
    min-height: 4rem;
    padding: 0 1rem
}

#myRecommend .tabs li:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -.8rem;
    width: 0;
    height: .3rem;
    background: #f60;
    transition: all .4s
}

#myRecommend .tabs .actived {
    color: #fff;
    background: #f60
}

.recommend-page {
    margin-top: 2rem;
    display: flex;
    justify-content: center
}

.recommend-page a {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    background: #eee;
    color: #333;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 3.5rem
}

.recommend-page ul {
    display: flex;
    list-style: none
}

.recommend-page ul li {
    display: none
}

.recommend-page ul li.show {
    display: block
}

.recommend-page ul li a {
    font-weight: 400;
    font-size: 1.4rem
}

.recommend-page ul li a.active {
    background: #fc1855;
    color: #fff
}

.recommend-table {
    margin-top: 2rem
}

.recommend-table table {
    width: 100%;
    border-collapse: collapse
}

.recommend-table table td,
.recommend-table table th {
    border: #eee 1px solid
}

.recommend-table table thead th {
    height: 3.5rem;
    background: #f8f8f8;
    text-align: center
}

.recommend-table table tbody td {
    background: #fff;
    text-align: center;
    height: 2.5rem
}

.recommend-table .no-data-box td {
    padding: 3rem;
    color: #999
}

.recommend-table .no-data-box img {
    height: 15rem;
    display: block;
    margin: 0 auto 1rem
}

.recommend-share {
    position: relative;
    padding: 1rem 6rem 1rem 1rem;
    border: #eee 1px solid;
    background: #fff;
    word-break: break-all
}

.recommend-share a {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -1rem;
    right: 1rem;
    width: 4rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: #f60;
    color: #fff
}

#registerReferral .navigator-bar .navi-back a {
    display: block;
    width: 100%;
    height: 100%
}

.recommend-register {
    padding-top: 1rem;
    text-align: center
}

.recommend-register a {
    display: inline-block;
    width: 100%;
    border-radius: .5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    color: #fff;
    background: #289fff
}

.register-step ul .register-success-info {
    display: none;
    padding-top: 0;
    border-bottom: none
}

.register-step ul .register-success-info p {
    display: block;
    color: green;
    text-align: center;
    font-weight: 700
}

.register-step ul .register-success-info a {
    display: block;
    margin: 0 auto;
    width: 8rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: .3rem;
    background: #f60;
    color: #fff;
    margin-top: 1rem
}

.winnerInfo {
    display: none;
    height: 3.5rem;
    background: rgba(255, 203, 70, .7);
    z-index: 9997
}

.winnerInfo.winnerFooterMargin {
    margin-bottom: 5rem
}

.winnerInfo dd {
    padding: 0 1rem
}

.winnerInfo dd i {
    font-size: 1.3rem
}

.winnerInfo:before {
    width: 3.5rem;
    height: 3.5rem
}

footer {
    height: 5rem
}

#footer {
    position: absolute;
    bottom: 0;
    display: none;
    background: #000;
    width: 1400px;
    color: #828e9e;
    margin: 0 auto
}

#footer .footer-inner {
    width: 1300px;
    min-height: 100px;
    margin: 0 auto
}

#footer .footer-inner .worktogether {
    border-bottom: 1px solid #4e5665;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

#footer .footer-inner .worktogether img {
    display: block;
    height: 55px;
    filter: brightness(1);
    transition: filter .4s
}

#footer .footer-inner .worktogether img:hover {
    filter: brightness(3)
}

#footer .footer-inner .other {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden
}

#footer .footer-inner .other .authentication {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center
}

#footer .footer-inner .other .authentication .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
    filter: brightness(1);
    transition: filter .4s
}

#footer .footer-inner .other .authentication .item img {
    height: 60px;
    display: block
}

#footer .footer-inner .other .authentication .item:hover {
    filter: brightness(3)
}

#footer .footer-inner .other .about {
    min-width: 100px;
    display: flex;
    justify-content: center;
    align-items: center
}

#footer .footer-inner .other .about a {
    color: #828e9e
}

#footer .footer-inner .other .service {
    min-width: 150px;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #828e9e;
    margin: 20px 0 0 0
}

#footer .footer-inner .other .service a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    color: #828e9e
}

#footer .footer-inner .other .service a:after {
    content: '立即咨询';
    display: flex;
    padding: 5px;
    flex-basis: 80px;
    border: 1px #828e9e solid;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 10px 0
}

#footer .footer-inner .other .service a img {
    margin: 0 5px 0 0
}

#footer .footer-inner .copyright {
    height: 100%;
    padding: 30px 0 50px 0;
    text-align: center
}

#footer .footer-inner .copyright span {
    display: block
}

.livechat_button {
    position: absolute;
    left: 1rem;
    top: 9rem;
    padding: 1rem 2rem 1rem 1rem;
    box-sizing: border-box;
    width: 50%;
    height: 9rem
}

.livechat_button a {
    display: block;
    width: 100%;
    height: 100%
}

.livechat_button img {
    width: 100%
}

.livechat_button.customer-button {
    display: none;
    width: calc(100% - 4rem);
    padding: 0;
    left: 2rem;
    right: 2rem;
    overflow: hidden
}

.livechat_button.customer-button img {
    display: none
}

.livechat_button.bottom-button {
    position: fixed;
    padding: 0;
    left: auto;
    top: auto;
    right: 2rem;
    bottom: 10rem;
    width: 4rem;
    height: 4rem;
    background: url("images/chat-logo.png") no-repeat;
    background-size: 100%;
    z-index: 1000
}

.livechat_button.bottom-button img {
    opacity: 0
}

.game-list .customer-items .livechat-before dl {
    background: url("images/livechat.png") no-repeat;
    background-size: 100%
}

.notice-box {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box
}

.notice-box .notice-item {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 5rem;
    background: #3a9ce8;
    margin-bottom: 1rem;
    border-radius: .5rem;
    overflow: hidden
}

.notice-box .notice-item .img-game {
    position: relative;
    width: 5.5rem;
    height: 5rem;
    margin-left: 0;
    z-index: 999
}

.notice-box .notice-item .img-bg2 {
    position: absolute;
    width: 9.5rem;
    height: 4.5rem;
    top: .5rem;
    left: .5rem
}

.notice-box .notice-item .notice-info {
    width: 16.7rem;
    margin-left: 2.5rem;
    font-size: 1.2rem;
    padding: .5rem 0
}

.contactus-box li {
    position: relative;
    padding-left: 4rem;
    margin-bottom: 1rem;
    min-height: 3rem
}

.contactus-box li i {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -1.5rem;
    height: 3rem;
    width: 3rem;
    background-repeat: no-repeat;
    background-size: 100%
}

.contactus-box li a {
    display: flex;
    word-break: break-all;
    align-items: center;
    min-height: 3rem;
    color: #3a9ce8
}

#mask .notify-image,
#mask .notify-image .pop-notify {
    width: 95%;
    margin: auto;
    background: 0 0;
    box-shadow: none;
    text-align: right
}

#mask .notify-image .pop-notify img {
    width: 100%
}

#mask .notify-image .close {
    text-align: right;
    cursor: pointer;
    display: inline-block
}

#mask .login-notify {
    padding: 1rem 0 8.8rem;
    width: 100%;
    margin: 0;
    background: #fff;
    color: #333;
    border-radius: .5rem;
    box-sizing: border-box;
    height: 100%;
    overflow: auto
}

#mask .login-notify h3 {
    padding: 1rem 0 1.5rem;
    font-size: 1.8rem;
    text-align: center;
    box-sizing: border-box
}

#mask .login-notify p {
    padding: 0 2rem;
    font-size: 1.2rem;
    line-height: 2.1rem
}

#mask .login-success-btn {
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0
}

#mask .login-success-btn a {
    display: flex;
    background: #289fff;
    border-radius: .5rem;
    color: #fff;
    padding: 1rem 2rem;
    margin: 0 1rem;
    font-size: 1.4rem
}

#myFeedback {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden
}

.pc #myFeedback {
    gap: 2rem
}

#myFeedback .navi {
    height: 5rem;
    min-height: 5rem;
    background: linear-gradient(180deg, #111, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.6rem
}

.pc #myFeedback .navi {
    grid-column: 2 span
}

#myFeedback .navi i {
    height: 100%;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(images/arrow-1.png) no-repeat center/1.5rem
}

#myFeedback .navi u {
    height: 100%;
    width: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(images/home.svg) no-repeat center/2rem
}

#myFeedback .contain {
    flex: 1;
    display: flex;
    transition: all .4s;
    max-height: calc(100% - 11rem)
}

.pc #myFeedback .contain {
    order: 2
}

#myFeedback .contain.inbox {
    transform: translateZ(0) translateX(0)
}

#myFeedback .contain.outbox {
    transform: translateZ(0) translateX(-100%)
}

#myFeedback .contain.publishForm {
    transform: translateZ(0) translateX(-200%)
}

#myFeedback .contain.files {
    transform: translateZ(0) translateX(-300%)
}

#myFeedback .contain .inboxList,
#myFeedback .contain .outboxList {
    min-width: calc(100% - 4rem);
    max-height: calc(100% - 4rem);
    margin: 1rem 1rem 0 1rem;
    overflow: auto;
    padding: 1rem
}

.pc #myFeedback .contain .inboxList,
.pc #myFeedback .contain .outboxList {
    min-width: 100%;
    max-height: calc(100% - 4rem);
    margin: 0;
    overflow: auto;
    padding: 0
}

#myFeedback .contain .inboxList dl,
#myFeedback .contain .outboxList dl {
    min-width: calc(100% - 4rem);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem
}

#myFeedback .contain .inboxList dt,
#myFeedback .contain .outboxList dt {
    display: flex
}

#myFeedback .contain .inboxList dt.addDate,
#myFeedback .contain .outboxList dt.addDate {
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(90deg, #000, transparent);
    padding: .5rem
}

#myFeedback .contain .inboxList dt.addDate:before,
#myFeedback .contain .outboxList dt.addDate:before {
    content: '';
    width: 2rem;
    height: 2rem;
    display: block;
    background: url(images/icon-wait.svg) no-repeat center/contain
}

#myFeedback .contain .inboxList dt.noData,
#myFeedback .contain .outboxList dt.noData {
    min-height: 30rem;
    font-size: 2rem;
    margin: 0
}

#myFeedback .contain .inboxList dd,
#myFeedback .contain .outboxList dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #666;
    padding: 1rem;
    border-radius: 1rem;
    gap: 1rem;
    overflow: hidden;
    cursor: pointer;
    line-height: 1.6rem;
    transition: all .4s;
    -webkit-tap-highlight-color: transparent
}

#myFeedback .contain .inboxList dd .btn.reply,
#myFeedback .contain .outboxList dd .btn.reply {
    display: none;
    background: #5f9ea0;
    height: 3rem;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    font-size: 1.6rem
}

#myFeedback .contain .inboxList dd.expand,
#myFeedback .contain .outboxList dd.expand {
    background: #333
}

#myFeedback .contain .inboxList dd.expand .btn.reply,
#myFeedback .contain .outboxList dd.expand .btn.reply {
    display: flex
}

#myFeedback .contain .inboxList dd:hover,
#myFeedback .contain .outboxList dd:hover {
    box-shadow: .2rem .4rem .6rem #0009
}

#myFeedback .contain .inboxList dd h4,
#myFeedback .contain .outboxList dd h4 {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 400;
    color: #67c23a
}

#myFeedback .contain .inboxList dd h4 u,
#myFeedback .contain .outboxList dd h4 u {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: .5rem
}

#myFeedback .contain .inboxList dd h4 u:before,
#myFeedback .contain .outboxList dd h4 u:before {
    content: '';
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(images/arrow-0.png) no-repeat center/contain;
    transition: all .4s
}

#myFeedback .contain .inboxList dd.expand h4 u:before,
#myFeedback .contain .outboxList dd.expand h4 u:before {
    transform: translateZ(0) rotate(180deg)
}

#myFeedback .contain .inboxList dd h3,
#myFeedback .contain .outboxList dd h3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem
}

#myFeedback .contain .inboxList dd h3 u,
#myFeedback .contain .outboxList dd h3 u {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-decoration: none
}

#myFeedback .contain .inboxList dd.expand h3 u,
#myFeedback .contain .outboxList dd.expand h3 u {
    white-space: unset;
    text-overflow: unset
}

#myFeedback .contain .inboxList dd h3 u i,
#myFeedback .contain .outboxList dd h3 u i {
    font-style: normal;
    color: #0ff;
    text-decoration: none
}

#myFeedback .contain .inboxList dd h3 b,
#myFeedback .contain .outboxList dd h3 b {
    font-weight: 400;
    color: #ccc;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 4rem;
    overflow: hidden;
    transition: all .4s
}

#myFeedback .contain .inboxList dd.expand h3 b,
#myFeedback .contain .outboxList dd.expand h3 b {
    max-height: unset;
    display: block
}

#myFeedback .contain .publish {
    min-width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    margin: 1rem 1rem 0 1rem;
    overflow: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

#myFeedback .contain .publish .subject {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    gap: .1rem;
    overflow: hidden
}

#myFeedback .contain .publish .subject li {
    flex: auto;
    padding: .5rem 1rem;
    background: #666;
    transition: all .4s;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center
}

#myFeedback .contain .publish .subject li.selected {
    background: #1e90ff
}

#myFeedback .contain .publish #title {
    font-size: 1.4rem;
    padding: 1rem;
    overflow: hidden;
    outline: 0;
    transition: all .4s;
    border: 0
}

#myFeedback .contain .publish #title[readonly] {
    background: #999
}

@keyframes required {
    0% {
        background: #fff
    }

    50% {
        background: #db7093
    }

    100% {
        background: #fff
    }
}

#myFeedback .contain .publish #title:required:invalid {
    animation: required .5s;
    animation-iteration-count: 3
}

#myFeedback .contain .publish #title:required:valid {
    background: #fff
}

#myFeedback .contain .publish #content {
    padding: 1rem;
    overflow: hidden;
    outline: 0;
    border: 0;
    min-height: 15rem;
    transition: all .4s;
    font: 1.4rem PingFangSC-Medium, 'PingFang SC', 'Microsoft YaHei UI', verdana, tahoma
}

#myFeedback .contain .publish #content:required:invalid {
    animation: required .5s;
    animation-iteration-count: 3
}

#myFeedback .contain .publish #content:required:valid {
    background: #fff
}

#myFeedback .contain .publish .btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .1rem
}

#myFeedback .contain .publish .btns .btn {
    width: 10rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gold;
    overflow: hidden;
    cursor: pointer;
    flex: 1;
    font-size: 1.6rem
}

#myFeedback .contain .publish .btns .btn.ufile {
    background: #ff8c00
}

#myFeedback .contain .publish .ufile {
    display: none
}

#myFeedback .contain .filelist {
    min-width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    margin: 2rem;
    overflow: auto
}

#myFeedback .contain .filelist dl {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: .1rem;
    position: relative
}

#myFeedback .contain .filelist dl dt {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 1fr;
    grid-gap: .1rem;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    right: 0
}

#myFeedback .contain .filelist dl dt b {
    background: #333;
    padding: .5rem;
    height: calc(100% - 1rem);
    width: calc(100% - 1rem);
    display: flex;
    align-items: center
}

#myFeedback .contain .filelist dl dd {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 1fr;
    grid-gap: .1rem
}

#myFeedback .contain .filelist dl dd b {
    font-weight: 400;
    height: 2rem;
    width: calc(100% - 1rem);
    display: flex;
    align-items: center;
    background: #666;
    padding: .5rem;
    word-break: break-word
}

#myFeedback .contain .filelist dl dd b[data-act=del] {
    cursor: pointer;
    color: #ff0;
    text-decoration: underline
}

#myFeedback .contain .more {
    height: 3rem;
    border-radius: 1rem;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0 0;
    cursor: pointer
}

#myFeedback .contain .more:before {
    content: '';
    width: 1rem;
    height: 1rem;
    display: block;
    background: url(images/arrow-0.png) no-repeat center/contain
}

#myFeedback .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: .1rem;
    height: 6rem;
    width: 100%;
    position: relative;
    padding: 0
}

.pc #myFeedback .tabs {
    order: 1;
    width: calc(100% - 0)
}

#myFeedback .tabs .tab {
    background: #a9a9a9;
    flex: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    cursor: pointer;
    text-transform: capitalize;
    transition: all .4s;
    -webkit-tap-highlight-color: transparent;
    padding: 0 1rem;
    position: relative
}

.pc #myFeedback .tabs .tab {
    width: 100%;
    max-height: 5rem
}

#myFeedback .tabs .tab.active {
    background: #f60
}

#myFeedback .tabs .tab:hover {
    filter: brightness(1.2)
}

.pc {
    font-size: 14px !important
}

.pc body {
    background: #292929;
    font-size: 14px !important
}

.pc #app {
    padding-bottom: 420px
}

.pc #app,
.pc #mask,
.pc #toast-mask,
.pc .winnerInfo {
    margin: 0 auto;
    width: 1400px;
    min-width: auto
}

.pc #mask .notify-image,
.pc #mask .notify-image .pop-notify {
    width: auto;
    max-width: 1000px
}

.pc #app::after {
    content: "";
    clear: both
}

.pc .tabs {
    padding: 0 15px;
    height: 80px
}

.pc .tabs .tab {
    flex: initial
}

.pc .tabs .logo-box {
    flex: 1
}

.pc .tabs .bookmark {
    display: flex
}

.pc .tabs .bookmark b {
    display: inline
}

.pc .expand {
    height: auto
}

.pc .user {
    position: fixed;
    width: 510px;
    top: 80px;
    left: 50%;
    margin-left: 190px;
    box-shadow: none
}

.pc .user .nick {
    justify-content: end;
    padding-right: 1rem
}

.pc footer {
    background: 0 0 !important;
    width: 800px;
    bottom: auto;
    margin-left: -400px;
    left: 50%;
    top: 15px;
    height: 50px;
    box-shadow: none
}

.pc footer .nav-item-active {
    border-radius: 5px
}

.pc .index-footer {
    margin-left: -686px;
    top: 72px;
    background: #292929 !important;
    padding-right: 90px
}

.pc .swiper .next,
.pc .swiper .prev {
    width: 4rem;
    height: 8rem;
    position: absolute;
    right: 0;
    top: calc(50% - 4rem);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem 0 0 2rem;
    cursor: pointer;
    background: rgba(0, 0, 0, .3) url(images/arrow-2.png) no-repeat center;
    transform: translateZ(0) translateX(100%);
    transition: all .4s
}

.pc .swiper .next:hover,
.pc .swiper .prev:hover {
    background: rgba(0, 0, 0, .7) url(images/arrow-2.png) no-repeat center
}

.pc .swiper .prev {
    right: unset;
    left: 0;
    transform: translateZ(0) rotate(180deg) translateX(100%)
}

.pc .swiper:hover .next {
    transform: translateZ(0) translateX(0)
}

.pc .swiper:hover .prev {
    transform: translateZ(0) translateX(0) rotate(180deg)
}

.pc #activity .navigator-bar,
.pc #service .navigator-bar,
.pc .mine-container {
    padding-top: 80px
}

.pc #deposit .container .bank-list .qris-item .amount-select li {
    width: 3.5rem;
    height: 1.7rem;
    min-height: 1.7rem
}

.pc #deposit .container .bank-list .qris-item .qris-info .qris-logo img {
    width: 11rem
}

.pc #deposit .container .bank-tabs .bank-tab {
    min-width: 60px
}

.pc .game-list .game-items .game-category {
    grid-template-columns: repeat(4, 1fr) !important;
    margin: 0 1rem 1rem 2rem
}

.pc #game .list {
    grid-template-columns: repeat(5, 1fr) !important;
    height: fit-content;
    gap: 2rem
}

.pc .game-list .game-category-current {
    gap: 2rem
}

.pc #activity .game-list .game-items .game-category {
    grid-template-columns: repeat(2, 1fr) !important
}

.pc .game-list .game-items .game-category.home-category {
    grid-template-columns: repeat(1, 1fr) !important
}

.pc #game .list.cmdSport-list,
.pc #game .list.sabaSport-list,
.pc #game .list.sboSport-list {
    grid-template-columns: repeat(3, 1fr) !important
}

.pc .game-list .game-items .home-tabs .tab {
    border: none;
    background: 0 0;
    box-shadow: none;
    width: 12rem;
    transition: all .4s
}

.pc #game .list .item p>img,
.pc .game-list .game-item p>img,
.pc .game-list .game-items .home-tabs .tab {
    transition: all .4s
}

.pc #game .list .item:hover p>img,
.pc .game-list .game-item:hover p>img,
.pc .game-list .game-items .home-tabs .tab:hover {
    transform: scale(1.1)
}

.pc #game .list .item.room-closed:hover p>img,
.pc .game-list .game-item.room-closed p>img {
    transform: scale(1)
}

.pc .game-list .game-items .home-banner .banner-link {
    width: 280px;
    height: 80px;
    right: 200px
}

.pc .game-list .game-items .game-item.sport {
    height: auto;
    padding-bottom: 42px
}

.pc #game .list .bgFish p>img:first-child,
.pc #game .list .jokerFish p>img:nth-child(2),
.pc #game .list .ppLv p>img:nth-child(2),
.pc #game .list .saLv p>img:nth-child(2) {
    position: relative
}

.pc #game .list .item {
    min-width: 217px
}

.pc #game .list.cmdSport-list .item,
.pc #game .list.sabaSport-list .item,
.pc #game .list.sboSport-list .item {
    width: 392px
}

.pc .game-list .game-items .home-tabs {
    grid-template-columns: repeat(4, 1fr);
    grid-column: 3 span;
    padding-bottom: 1rem
}

.pc .game-list .game-items .home-tabs {
    padding: 0;
    gap: 0;
    background: url("images/home-tab-bg.jpg") no-repeat center/cover;
    border-radius: 1rem;
    box-shadow: .2rem .4rem .6rem #0007;
    height: 15rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.pc .game-list .game-items .home-banklist {
    grid-column: 3 span;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 0
}

.pc .game-list .game-items .home-banklist dt {
    width: 103%;
    grid-column: 4 span
}

.pc .game-list .game-items .home-banklist dt .bank-switch {
    background-size: 20px 20px;
    right: 1rem
}

.pc .game-list .game-items .home-banklist.off {
    padding-bottom: 0
}

.pc .game-bank-rule .home-tabs {
    grid-template-columns: repeat(4, 1fr);
    grid-column: 3 span;
    padding-bottom: 1rem
}

.pc .game-bank-rule .home-banklist {
    grid-column: 3 span;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 0
}

.pc .game-bank-rule .home-banklist dt {
    width: 103%;
    grid-column: 4 span;
    cursor: pointer
}

.pc .game-bank-rule .home-banklist dt .bank-switch {
    background-size: 20px 20px;
    right: 1rem;
    cursor: pointer
}

.pc .game-bank-rule .home-banklist.word-list {
    grid-template-columns: repeat(1, 1fr)
}

.pc .game-bank-rule .home-banklist.off {
    padding-bottom: 0
}

.pc .game-bank-rule .home-banklist .bank-rule {
    font-size: 14px;
    line-height: 30px;
    height: 432px;
    margin-top: 50px;
    padding: 40px 30px 0
}

.pc .game-bank-rule .home-banklist .bank-rule::-webkit-scrollbar {
    display: block;
    width: 5px;
    background: rgba(255, 255, 255, .1)
}

.pc .game-bank-rule .home-banklist .bank-rule::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2)
}

.pc .game-bank-rule .home-banklist .bank-rule h3 {
    font: 16px;
    font-weight: 700;
    line-height: 38px
}

.pc .game-bank-rule .home-banklist .bank-rule a {
    color: #3a9ce8
}

.pc .livechat_button.bottom-button {
    display: none
}

.pc .mine-top .mine-statistics-container {
    bottom: 1.9rem;
    width: 87rem;
    left: calc((100% - 87rem)/ 2)
}

.mine-top .mine-statistics {
    width: 87rem
}

.pc .mine-top .mine-info .audit-word {
    position: absolute;
    left: 50%;
    margin-left: -30%;
    bottom: 46px;
    color: #f60;
    font-weight: 700
}

.pc #deposit .container .deposit-banklist {
    grid-template-columns: repeat(5, 1fr)
}

.pc #deposit .container .deposit-banklist dt {
    grid-column: 5 span
}

.pc #service .navigator-bar .service-navi-bar {
    background: 0 0
}

.pc .game-list .customer-items {
    margin-bottom: 70px
}

.pc .game-list .customer-items span {
    position: absolute;
    color: #fff;
    left: 50%;
    bottom: 36px;
    margin-left: -65px;
    transform: scale(1)
}

.pc .swiper,
.pc .swiper .swiper-container,
.pc .swiper .swiper-container .swiper-item {
    height: auto;
    min-height: auto
}

.pc #game .list .item,
.pc #myRecommend .tabs li,
.pc .game-list .game-items .game-item,
.pc .game-list .game-menu .game-menu-item,
.pc .game-list-box .game-menu .game-menu-item,
.pc .loginForm .close,
.pc .loginForm .login-btn,
.pc .navigator-bar .detail-navi-back,
.pc .navigator-bar .navi-back,
.pc .notice ul li,
.pc .register-step .btn,
.pc .register-step p b,
.pc .tabs .tab,
.pc .user .loginBtn,
.pc .user .logout-btn {
    cursor: pointer
}

.pc #game .list .item.room-closed,
.pc .game-list .game-items .game-item.room-closed {
    cursor: auto
}

.pc .loginForm {
    width: 1400px;
    margin: 0 auto
}

.pc footer .nav-item {
    flex-direction: row
}

.pc footer .nav-item h3 {
    min-height: auto
}

.pc #footer {
    display: block
}

.pc #footer .footer-inner .other .service a:after {
    content: 'Consult'
}

.pc .popUp .popUp-btns .forget:hover {
    color: #fff
}

.pc .popUp .popUp-container {
    width: 600px
}

.pc .game-list .game-menus {
    margin: 0 0 2rem 0
}

.pc .game-list-box {
    display: flex
}

.pc #game .game-list-box {
    position: relative;
    padding-top: 30px
}

.pc #game .game-list-box .searchKey {
    height: 35px;
    width: 300px
}

.pc .game-list-box .game-menus {
    margin: 0 0 7rem 0
}

.pc .game-list-box .game-menu {
    width: 6rem;
    min-width: 6rem;
    position: sticky;
    top: 7rem;
    left: 0;
    bottom: 7rem;
    overflow: hidden;
    border-radius: 0 1rem 1rem 0;
    border-top: .1rem #fff solid;
    border-right: .1rem #fff solid;
    border-bottom: .1rem #fff solid;
    background: linear-gradient(to right, #f4f6fa, #f5f7fa);
    box-shadow: .2rem .4rem .6rem 0 rgb(209 221 242 / 50%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch
}

.pc .game-list-box .game-menu p {
    display: block;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    width: calc(100% + .5rem);
    height: 6.8rem;
    border-radius: 0 1rem 1rem 0;
    background: linear-gradient(45deg, #4daaff, #9cd6ff);
    transition: all .4s
}

.pc .game-list-box .game-menu .game-menu-item {
    min-height: 6.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background: linear-gradient(0deg, #f4f6fa, #f5f7fa);
    box-shadow: 0 3px 12px 0 rgb(209 221 242 / 50%);
    transition: all .4s
}

.pc .game-list-box .game-menu .home b {
    background: url(images/home.svg) no-repeat center/contain
}

.pc .game-list-box .game-menu .game-menu-current {
    display: flex
}

.pc .game-list-box .game-menu .game-menu-item b {
    font-weight: 400;
    width: 4rem;
    height: 4rem;
    position: relative;
    z-index: 1;
    transition: all .4s;
    filter: grayscale(1)
}

.pc .game-list-box .game-menu .game-menu-current b {
    filter: unset;
    transform: translateZ(0) rotate(360deg)
}

.pc .game-list-box .game-menu .game-menu-item i {
    font-style: normal;
    display: block;
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
    font-size: 1rem;
    transition: all .4s;
    word-break: break-word;
    text-transform: capitalize;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.pc .game-list-box .game-menu .game-menu-current i {
    color: #fff
}

.pc .game-list .game-items .category-search {
    position: relative;
    padding-top: 50px
}

.pc .game-list .game-items .category-search .searchKey {
    position: absolute;
    top: 0;
    right: 0;
    height: 35px;
    background: #fff9;
    border: none;
    padding: 0 8px;
    border-radius: 5px;
    width: 300px
}

.pc .back-top {
    position: fixed;
    display: none;
    left: 8px;
    bottom: 16px;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, .4) url("images/arrow-1.png") no-repeat center;
    border-radius: 50%;
    z-index: 1;
    transform: rotate(90deg)
}

.pc .back-top.show-top {
    display: block
}

.pc .back-top:hover {
    background-color: rgba(0, 0, 0, .8)
}

.pc #myFeedback {
    gap: 2rem
}

.pc #myFeedback .navi {
    grid-column: 2 span
}

.pc #myFeedback .contain {
    order: 2
}

.pc #myFeedback .contain .inboxList,
.pc #myFeedback .contain .outboxList {
    min-width: 100%;
    max-height: calc(100% - 4rem);
    margin: 0;
    overflow: auto;
    padding: 0
}

.pc #myFeedback .tabs {
    order: 1;
    width: calc(100% - 0)
}

.pc #myFeedback .tabs .tab {
    width: 100%;
    max-height: 5rem
}

.pc .lottery-history-detail .popUp-container {
    width: 1000px
}