html{
    background: #050e20;
    /* height: 100%; */
}
.download{
    width: 100%;
    height: 1.12rem;
    background: url('../img/banner-feiyu.png') center no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .1rem 0 .25rem;
    box-sizing: border-box;
    z-index: 10;
}
.download .ad-close{
    width: .6rem;
    height: .6rem;
    /*background: rebeccapurple;*/
    border-radius: 50%;
    background-size: 100%;
}
.download .download-btn{
    width: 1.48rem;
    height: .48rem;
    line-height: .48rem;
    text-align: center;
    border-radius: .3rem;
    margin-top: .44rem;
    margin-right: .28rem;
}
.header{
    height: 1.1rem;
    padding: .2rem .15rem;
    box-sizing: border-box;
    z-index: 10;
    position: relative;
}
.header .logo{
    width: 1.63rem;
    height: .8rem;
}
.header .btn{
    font-size: .24rem;
}

.header .contact{
    width: 1.7rem;
    height: .6rem;
    line-height: .6rem;
    background-color: #247dcc;
    color: #ffffff;
    border-radius: .3rem;
}

.header .popup{
    width: 2.4rem;
    top: 1rem;
    right: .15rem;
    z-index: 10;
    border-radius: .1rem;
    overflow: hidden;
    display: none;
}
.header .popup.active{
    display: block;
}
.download-popup{
    width: 2.3rem;
    top: 1rem;
    right: .15rem;
    z-index: 10;
    border-radius: .1rem;
    overflow: hidden;
    z-index: 11;
    display: none;
}
.download-popup.active{
    display: block;
}
.download-popup .popup-item{
    height: .6rem;
    line-height: .6rem;
    background:#ffff;
    color: #333333;
    padding-left: .1rem;
}
.download-popup .android .icon{
    display: inline-block;
    width: .4rem;
    height: .4rem;
    background: url("../img/android.png");
    background-size: 100%;
}
.download-popup .ios .icon{
    display: inline-block;
    width: .4rem;
    height: .4rem;
    background: url("../img/ios.png");
    background-size: 100%;
}
.popup::after{
    content:"";
    top: -.1rem;
    right: .5rem;
    position: absolute;
    border-left: .1rem solid transparent;
    border-bottom: .1rem solid #23293a;
    border-right: .1rem solid transparent;
}

.popup .popup-item{
    height: .8rem;
    background:#23293a;
}
.popup .popup-item .pao,
.popup .popup-item .qq,
.popup .popup-item .telegram,
.popup .popup-item .flygram,
.popup .popup-item .fy,
.popup .popup-item .whatsapp,
.popup .popup-item .skype,
.popup .popup-item .wechat,
.popup .popup-item .safew,
.popup .popup-item .email{
    height: 100%;
    padding-left: .2rem;
    line-height: .8rem;
    font-size: .16rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.popup .popup-item .icon{
    width: .32rem;
    height: .32rem;
    display: inline-block;
    margin: 0 .15rem 0 .1rem;
    flex-shrink: 0;
}
.popup .popup-item span{
    vertical-align: middle;
    font-size: .16rem;
    white-space: nowrap;
}
.popup .popup-item a{
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    width: 100%;
}

.popup-item .line::after{
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 1.8rem;
    height: 1px;
    background: url('../img/line.png') ;
}
.popup-item .pao .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/pao-icon.png");
    background-size: 100%;
}
.popup-item .qq .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/qq.png");
    background-size: 100%;
}
.popup-item .telegram .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/telegram.png");
    background-size: 100%;
}
.popup-item .flygram .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/flygram.png");
    background-size: 100%;
}
.popup-item .fy .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/fy.png");
    background-size: 100%;
}
.popup-item .skype .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/skype.png");
    background-size: 100%;
}
.popup-item .wechat .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/wechat.png");
    background-size: 100%;
}
.popup-item .whatsapp .icon{
    width: .35rem;
    height: .35rem;
    background: url("../img/whatsapp.png") no-repeat;
    background-size: 100%;
}
.popup-item .safew .icon{
    width: .35rem;
    height: .35rem;
    background: url("../../img/common/sfw.png") no-repeat center;
    background-size: contain;
}
.popup-item .email .icon{
    width: .35rem;
    height: .35rem;
    background: url("../../img/common/email.png") no-repeat center;
    background-size: contain;
}

/* 二维码弹窗 */
.qr-popup{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.qr-popup.active{
    display: flex;
}
.qr-popup .qr-content{
    background: #1a1f2e;
    padding: .2rem;
    border-radius: .1rem;
    text-align: center;
}
.qr-popup .qr-content p{
    color: #fff;
    margin-bottom: .1rem;
    font-size: .16rem;
}
.qr-popup .qr-content img{
    width: 2rem;
    height: 2rem;
}

/* 底部导航 */
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: .8rem;
    background: #1a1f2e;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    border-top: 1px solid #2a3040;
    margin: 0;
    padding: 0;
}
.footer .item-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.footer .item-wrap img{
    width: .32rem;
    height: .32rem;
    margin-bottom: .06rem;
}
.footer .item-wrap span{
    font-size: .16rem;
    color: #8a8f9a;
}
.footer .item-wrap:active span{
    color: #fff;
}

.banner{
    background: #0c1527;
    width: 100%;
    height: 0;
    padding-bottom: 61.5%;
    overflow: hidden;
    box-sizing: border-box;
}
.banner .swiper-wrapper{
    width: 7.5rem;
    height: 4rem;
    box-sizing: border-box;
}
.banner .swiper-slide{
    width: 7.5rem;
    height: 4rem;
    display: block;
    flex-shrink: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}
.banner .swiper-pagination{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: .2rem;
}
.banner .swiper-pagination .swiper-pagination-bullet{
    width: .15rem;
    height: .1rem;
    background: #ffffff;
    margin: 0 .1rem;
    border-radius: .1rem;
    opacity: .5;
}
.banner .swiper-pagination .swiper-pagination-bullet-active{
    background: #979fff;
}
.banner .notice{
    margin: .25rem 0;
    padding: 0 .2rem;
    overflow: hidden;
    height: .32rem;
    line-height: .32rem;
}
.notice .float-wrap{
    height: .32rem;
    width: 100%;
    flex: 1;
    float: left;
    overflow: hidden;
}
.float-wrap .float-content{
    float: left;
    height: .32rem;
    margin-left: .5rem;
}
.float-wrap .float-content p{
    font-size: .24rem;
    float: left;
    margin-left: .5rem;
}
.notice .icon{
    width: .32rem;
    height: .32rem;
    background:url("../img/speaker.png");
    background-size: 100%;
    margin-right: .18rem;
}
.nav{
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 29.6%;
    font-size: .22rem;
}
.nav .aboutus-wrap{
    height: 2.22rem;
    padding: 0 .54rem;
}
.nav .aboutus{
    height: 1.42rem;

}
.nav .img-load{
    width: 1.14rem;
    height: 1.17rem;
}
.nav .aboutus:nth-child(1) .img-load{
    background: url("../img/aboutus1.png");
    background-size: 100%;
}
.nav .aboutus:nth-child(2) .img-load{
    background: url("../img/aboutus2.png");
    background-size: 100%;
}
.nav .aboutus:nth-child(3) .img-load{
    background: url("../img/aboutus3.png");
    background-size: 100%;
}
.nav .aboutus:nth-child(4) .img-load{
    background: url("../img/aboutus4.png");
    background-size: 100%;
}

.display{
    background: #0c1527;
    width: 100%;
    height: 0;
    padding-bottom: 75.6%;
    overflow: hidden;
    margin-bottom: 1.38rem;
}

.display .title .tab{
    text-align: center;
    font-size: .3rem;
    width: 2.5rem;
    height: .69rem;
    line-height: .69rem;
    background: #0e1228;
    border-top: .03rem solid #0e1228;
}
.display .title span.active{
    background: #141a3b;
    border-top: .03rem solid #ffd600;
}

.display .product,
.display .game,
.display .corporate{
    background: #141a3b;
    padding: .08rem .28rem .3rem .28rem;
    display: none;
}
.display .game::after,
.display .product::after,
.display .corporate::after{
    content: "";
    width: 21.5%;
}
.display .product.active,
.display .game.active,
.display .corporate.active{
    display: flex;
}
.display .item-wrap{
    margin-top: .24rem;
    flex: 0 0 25%;
}
.display .item-wrap .img-load img{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .3rem;
}




.game .item-wrap:nth-child(1) .img-load{
    background: url('../img/game1.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(2) .img-load{
    background: url('../img/game2.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(3) .img-load{
    background: url('../img/game3.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(4) .img-load{
    background: url('../img/game4.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(5) .img-load{
    background: url('../img/game5.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(6) .img-load{
    background: url('../img/game6.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(7) .img-load{
    background: url('../img/game7.png') center no-repeat;
    background-size: 100%;
}
.game .item-wrap:nth-child(8) .img-load{
    background: url('../img/game8.png') center no-repeat;
    background-size: 100%;
}
.display .item-wrap span{
    font-size: .20rem;
    line-height: .54rem;
}

.footer{
    height: 1.38rem;
    width: 100%;
    background: #060b21;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: .3rem 0 .26rem 0;
    box-sizing: border-box;
    z-index: 11;
}
.footer .item-wrap{
    width: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .22rem;
    justify-content: space-between;
}
.footer .item-wrap span{
    color: #064e8e;
}
.footer .item-wrap.active span{
    color: #fff;
}
.footer .item-wrap img{
    width: .5rem;
    height: .5rem;
}
.footer .home-btn img{
    width: 1.04rem;
    height: 1.04rem;
    margin-top: -.5rem;
}

.commission, .aboutus-page{
    position: fixed;
    /* padding: 4.15rem .35rem 0 .35rem; */
    box-sizing: border-box;
    top: 1.1rem;
    bottom: 1.38rem;
    overflow: scroll;
    z-index: 1;
    display: none;
    flex-direction: column;
}
.aboutus-page{
    padding-top: 1.05rem ;
    background: #03051a;
}
.aboutus-page.active{
    display: flex;
}
.aboutus-page img{
    width: 6.1rem;
    height: 2.25rem;
    margin-bottom: .2rem;
}
.aboutus-page .content{
    font-size: .24rem;
    color: #9ba1b7;
    line-height: .4rem;
}
.commission.active{
    display: block;
}
.commission .page-bg{
    width: 7.5rem;
    height: 57.71rem;
    background: url('../img/commission-bg.jpg');
    background-size: 100%;
}


.commission .inner-content .title,
.aboutus-page .inner-content .title{
    font-size: .44rem;
    font-weight: bold;
    line-height: .84rem;
    text-align: center;
    position: absolute;
    left: 50%;
    top: -.43rem;
    transform: translate(-50%, 0);
    width: 4.51rem;
    height: .84rem;
    background: url('../img/comission-title.png');
    background-size: 100%;
}
.commission .page-body,
.aboutus-page .page-body{
    background: #0d1228;
    width: 7.5rem;
    padding: 0 .35rem 0 .35rem;
    box-sizing: border-box;
}
.commission .inner-content,
.aboutus-page .inner-content{
    padding: .67rem .35rem .5rem .35rem;
    border: .02rem solid #006cd1;
    box-sizing: border-box;
    border-radius: .4rem;
    position: relative;
    margin-bottom: 1.2rem;
}
.commission .content{
    font-size: .24rem;
    line-height: .5rem;
    color: #cbd7f6;
}
.commission .content .settle{
    color: #72adef;
    margin-left: .25rem;
}
.commission .content .sub-title{
    font-size: .28rem;
    color: #fff;
}
.commission-bg{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: .1rem;
}
.commission-bg .wrap{
    width: 2.98rem;
    height: 1.48rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: .2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: .15rem 0;
    box-sizing: border-box;
    margin: .09rem 0;
}

.commission-bg .hot-icon{
    width: .68rem;
    height: .68rem;
    position: absolute;
    left: .22rem;
    top: .07rem;
}
.commission-bg .bg-icon{
    width: .88rem;
    height: .88rem;

}

.c-golden{
    color: #ffd600!important;
}
.commission-table{
    margin: 0.09rem 0 .56rem 0;
}
.commission-table p{
    background-color: rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    line-height: .6rem;
    margin: .02rem;
}
.commission-table p:first-child{
    background-color: rgba(255, 255, 255, 0.2);
}
.commission-table p span{
    width: 33.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: .22rem;
    line-height: 1;
    padding: .2rem 0;
    box-sizing: border-box;
}
.commission .rule .title{
    font-size: .42rem;
    color: #fff;
    width: 100%;
    text-align: center;
    margin-bottom: .45rem;
}
.commission .rule .content{
    margin-left: .3rem;
    padding: 0 .2rem;
}
.commission .rule .content p{
    color: #a7aab8;
    font-size: .22rem;
    text-indent: -.3rem;
    letter-spacing: .02rem;
}

.register{
    background: #0c1527;
    padding: 0 .35rem;
    position: fixed;
    top: 1.1rem;
    bottom: 1.38rem;
    overflow: scroll;
    z-index: 1;
    display: none;
}
.register.active{
    display: block;
}
.register-title{
    text-align: center;
    padding: 0 0 .35rem 0;
    color: #59648a;
    font-size: .32rem;
    font-weight: bold;
}
.register-title img{
    width: 6.8rem;
}
.register-body .platform{
    margin-bottom: .5rem;
}
.register-body .platform-wrap::after{
    content: "";
    width: 3.4rem;
}
.register-body .platform span, .register-body .info span{
    font-size: .26rem;
    margin-bottom: .5rem;
}

.register-body .platform input{
    width: 1.6rem;
    line-height: .6rem;
    height: .6rem;
    border-radius: .3rem;
    box-sizing: border-box;
    border: 0.5px solid #727881;
    background: transparent;
    color: #ffffff;
    margin: .14rem .1rem 0 0;
}
.register-body .platform input.selected{
    background: #0075d0;
    border: 0.5px solid #0075d0;
}
.register-body input{
    font-size: .23rem;
}
.register-body .info input{
    width: 6.8rem;
    height: .75rem;
    border-radius: .5rem;
    text-indent: .4rem;
    margin-top: .17rem;
    color: #a0a7ad;
    background: #0f192f;
    border: 1px solid rgba(255,255,255,0.1);
}
.register-body .info select{
    width: 6.6rem;
    height: .75rem;
    border-radius: .5rem;
    text-indent: .4rem;
    margin-top: .17rem;
    color: #a0a7ad;
    background: #0f192f;
    border: 1px solid rgba(255,255,255,0.1);
}
.register-body .info select option{
    background: #0f192f;
    color: #a0a7ad;
}
.agreement{
    font-size: .24rem;
}
.agreement input{
    width: .38rem;
    height: .38rem;
    vertical-align: middle;
}
.submit{
    margin: .48rem 0;
}
.submit button{
    font-size: .32rem;
    width: 3.2rem;
    border-radius: .5rem;
    height: .9rem;
}
.submit .onsubmit{
    background-color: #247dcc;
    color: #ffffff;
    margin-right: .1rem;
}
.submit .reset{
    background: transparent;
    border: 0.5px solid #1b76ce;
    color: #1b76ce;
}


.selection,
.promotion,
.support{
    position: fixed;
    bottom: 1.37rem;
    width: 100%;
    text-align: center;
    background: #060d20;
    color: #ffffff;
    display: none;
}
.selection.active,
.promotion.active,
.support.active{
    display: flex;
    flex-direction: column;
}
.selection .title,
.promotion .title,
.support .title{
    height: .95rem;
    line-height: .95rem;
    font-size: .3rem;
    background: #060d20;
    border-top: 0;
    border-bottom: .5px solid #0c3257;
}
.selection .login-selection{
    height: .78rem;
    line-height: .78rem;
    font-size: .24rem;
    border-top: .5px solid #1e2538;
}
.selection-wrapper{
    height: 3.174rem;
    overflow: hidden;
}

.promotion .promotion-content{
    display: flex;
    flex-wrap: wrap;
    font-size: .2rem;
    color: #ffffff;
    padding: .18rem 0 .2rem .32rem;
}
.promotion .promotion-item{
    width: 2.15rem;
    height: .6rem;
    line-height: .6rem;
    border: .5px solid #08509a;
    border-radius: .3rem;
    margin: 0 .16rem .1rem 0;
}



.support .support-content{
    display: flex;
    flex-wrap: wrap;
    font-size: .2rem;
    color: #ffffff;
    padding: .18rem 0 .2rem .32rem;
}
.support .support-item{
    width: 2.15rem;
    height: .6rem;
    line-height: .6rem;
    border: .5px solid #08509a;
    border-radius: .3rem;
    margin: 0 .16rem .1rem 0;
}

@media (min-width: 320px){html{font-size: 42.6667px;} }
@media (min-width: 360px){html{font-size: 48px;} }
@media (min-width: 375px){html{font-size: 50px;} }
@media (min-width: 384px){html{font-size: 51.2px;} }
@media (min-width: 414px){html{font-size: 55.2px;} }
@media (min-width: 448px){html{font-size: 59.7333px;} }
@media (min-width: 480px){html{font-size: 48px;} }
@media (min-width: 512px){html{font-size: 68.2667px;} }
@media (min-width: 544px){html{font-size: 72.5333px;} }
@media (min-width: 576px){html{font-size: 76.8px;} }
@media (min-width: 608px){html{font-size: 81.0667px;} }
@media (min-width: 640px){html{font-size: 85.3333px;} }
@media (min-width: 750px){html{font-size: 100px;} }