header {
    z-index: 60
}

body {
    overflow: hidden
}

.pop-bg {
    z-index: 120
}

.pop-wrap {
    z-index: 129
}

.menu-mask {
    z-index: 115
}

.gotop {
    z-index: 84
}

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

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

.tips-display {
    z-index: 116
}

.loader-box,
.loading-mask {
    z-index: 129
}

.rotating-pop {
    z-index: 130
}

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

* {
    touch-action: pan-x pan-y
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior: none
    }

    *:not(input):not(textarea) {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none
    }
}

.loading-mask {
    position: fixed;
    display: flex;
    inset: 0;
    background-color: var(--content-bg);
    justify-content: center;
    align-items: center
}

.loading-mask .movie-box video {
    display: block;
    margin: auto;
    width: 21.3333333333vw;
    height: 21.3333333333vw
}

header {
    transition: all 0s
}

.wrap {
    display: block;
    position: inherit;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: cubic-bezier(.075, .82, .165, 1)
}

.tab.search-tab {
    z-index: 2
}

.language-select-area .language-area {
    margin: 0 .8vw
}

.player-vip-detailed-box .section-wrap {
    display: block;
    height: 100%;
    transition: all .3s ease;
    width: 100%
}

.footer {
    transition: .3s all
}

.footer.hide {
    opacity: 0
}

.register-content .verification .refresh.active {
    animation: refresh1 .5s linear
}

@keyframes refresh1 {
    0% {
        transform: translateY(-50%) rotate(0)
    }

    to {
        transform: translateY(-50%) rotate(1turn)
    }
}

.register-content .verification-wrap .refresh.active {
    animation: refresh .5s linear
}

@keyframes refresh {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.player-vip-detailed-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.player-vip-detailed-menu::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none
}

.player-vip-detailed-menu .btn-wrap {
    display: inline-flex
}

.player-vip-detailed-menu .btn-wrap .btn {
    min-width: 24vw
}

.login-info-box .error-message-box {
    flex: 1 0 60%
}

.login-info-box .forgetpassword-buttn {
    margin-top: 3px
}

.vip-content {
    height: 100vh
}

.btn-select.only:after {
    display: none
}

.popup-page-wrapper {
    display: block;
    position: relative;
    text-align: center;
    z-index: 110
}

.third-party-login.member-content.new-profile,
.third-party-login.member-content.new-login,
.third-party-login.verify-code {
    min-height: 100% !important
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Source Sans 3", sans-serif
}

img {
    display: block
}

html {
    font-size: .0925925926vh
}

@media (max-height: 600px) {
    html {
        font-size: .5555555556px
    }
}
a{
    text-decoration: none;
}
.flex {
    display: flex
}

.flex-column {
    display: flex;
    flex-direction: column
}

.align-items-center {
    align-items: center
}

.bg-main {
    height: 100vh;
    width: 100vw;
    background-image: url(../images/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed
}

.bg-main .bg-light {
    position: absolute;
    top: 100px;
    right: 0;
    width: 20vw
}

.rwd-wrapper {
    height: 100vh;
    /* width: 1700rem; */
    margin: 0 250rem;
    padding: 0 85rem;
    position: relative
}

.rwd-wrapper .bg-sub {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -10%;
    height: 100%;
    opacity: 0
}

.rwd-wrapper .player1 {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 17%;
    width: 100%;
    height: 90%;
    overflow: hidden
}

.rwd-wrapper .player1 .player1-img {
    height: 100%;
    position: absolute;
    top: 1%;
    right: 1%
}

.rwd-wrapper .player1 .ball1 {
    position: absolute;
    top: 50%;
    right: 21%;
    width: 60rem
} 
.rwd-wrapper .player1{
    opacity: 1; 
    transform: translate(14.7883px, 11.6347px);
}
.rwd-wrapper .footer-shadow1 {
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    width: 100vw
}

.rwd-wrapper .player2 {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: -1%;
    width: 100%;
    height: 90%;
    overflow: hidden
}

.rwd-wrapper .player2 .player2-img {
    position: absolute;
    z-index: 3;
    bottom: -1%;
    right: 0;
    height: 100%
}
.rwd-wrapper .player2{
    opacity: 1; 
    transform: translate(-14.7883px, -11.6347px);
}
.rwd-wrapper .footer-shadow2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 70vw
}

.rwd-wrapper .content-box {
    position: relative;
    z-index: 4;
    padding-top: 215rem;
    padding-bottom: 200rem
}

.rwd-wrapper .content-box .logo {
    width: 300px;
    margin-bottom: 60rem
}

.rwd-wrapper .content-box .title {
    color:#ff0767;
    font-size: 80rem;
    font-weight: 700;
}

.rwd-wrapper .content-box .logo-text {
    color: #008965;
    font-size: 75rem;
    font-weight: 700;
    margin-top: -10rem
}

.rwd-wrapper .content-box .content {
    color: #fff;
    font-size: 43rem;
    font-weight: 600;
    margin-bottom: 100rem
}

.rwd-wrapper .content-box .qrcode-flex-box {
    display: flex
}

.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box {
    box-shadow: 0 10rem 10rem #0000004d;
    background: linear-gradient(90deg, #A009EF 0%, #FF11A8 51%, #FF0452 100%); 
    border-radius: 8rem;
    display: flex;
    padding: 10rem 20rem;
    width: 200px;
    margin-right: 30rem
}
.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box:hover {
   background: #03b37f; 
} 
.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box .qrcode {
    margin-right: 24rem;
    height: 142rem;
    width: 142rem
}

.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box .device-box {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box .device-box .device-icon {
    width: 56rem;
    margin-bottom: 0rem
}

.rwd-wrapper .content-box .qrcode-flex-box .qrcode-box .device-box .text {
    color: #fff;
    font-size: 26rem;
    font-weight: 700
}

@media (max-height: 600px) {
    .rwd-wrapper {
        min-height: 600px;
       
    }
} 
@media (max-width:1024px) {
    .rwd-wrapper {
        height: 100vh;
        width: 100%;
        margin: 0 auto;
        padding: 0 85rem;
        position: relative;
    }
    .rwd-wrapper .bg-sub{
        display: none;
    }
    .rwd-wrapper .content-box{
        padding-top: 100rem;
    }
}
@media (max-width:992px) {
    .rwd-wrapper {
        height: 100vh;
        width: 100%;
        margin: 0 auto;
        padding: 0 85rem;
        position: relative;
    }
    .rwd-wrapper .bg-sub {
       display: none;
    }
}
@media (max-width:767px){
    * {
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
        font-family: "Source Sans 3", sans-serif
    } 
    .bg-main{
        background-position: 100% 50%;
    }
    .rwd-wrapper{
        width: 100%; 
        padding: 0 20rem;
    }
    .rwd-wrapper .bg-sub{
        right: 5%;
        display: none;
    }
    .bg-main .bg-light{
        top: 45%;
    }
    .rwd-wrapper .content-box{
        padding-top: 35rem;
        margin: 0 auto;
    }
    .rwd-wrapper .player1 .ball1{
        right: 60%; 
        top:56%
    }
    .rwd-wrapper .player1 {
        opacity: 1;
        transform: translate(14.7883px, 137.6347px);
    }
    .rwd-wrapper .player1 .player1-img{
        right: 0;
        left: 0;
    }
    .rwd-wrapper .player2 {
        opacity: 1;
        transform: translate(0.2117px, 137.6347px);
        right: 0;
    }
    .rwd-wrapper .content-box .title{
        text-align: center;
        font-size: 57rem;
    }
    .rwd-wrapper .content-box .content{
        text-align: center;
        font-size: 27rem;
    }
    .rwd-wrapper .content-box .logo{
        margin-bottom: 10rem;
        width: 220px;
    }
    .rwd-wrapper .footer-shadow1,.rwd-wrapper .footer-shadow2{
        display: none;
    }
    .rwd-wrapper .content-box .qrcode-flex-box {
        gap: 10px;
        position: fixed;
        bottom: 15px;
        margin: 0 15px;
        left: 0;
        right: 0;
    }
    .rwd-wrapper .player2{
        display: none;
    }
    .rwd-wrapper .player1{
        right: 5%;
    }
    .rwd-wrapper .content-box .qrcode-flex-box .qrcode-box{
        width: 100%;
        margin-right: 0;
    } 
}