html,body{height: 100%; overflow: hidden;}
body{ position: relative; font-family:'Microsoft YaHei', PingFang SC, 'Helvetica Neue', Arial, sans-serif;}
/*body{padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}*/
*{box-sizing: border-box; margin: 0; padding: 0;}
h1,h2,p{margin: 0;}
li{list-style: none;}
img{max-width: 100%;}
html{font-size:62.5%;}

.top-tip { text-align: center; color: #fff; background: #1877f2; position: absolute; top: 0px; width: 100%; height: 30px; line-height: 30px; font-size: 1.3rem; z-index:5;}

.main{max-width: 750px; height: 100%; margin: 0px auto 0 auto; overflow: hidden; position: relative; background: url("../img/body-bg.jpg") no-repeat; background-size:cover;}
.logo{width: 13rem; height: 12rem; margin: 20px; position: absolute; z-index: 2; top:0px;}
.banner{position: absolute; background: url("../img/banner.png") no-repeat center center;  background-size: contain	; width: 96%; height:74%; top: 50%; left: 50%; transform: translate(-50%,-56%); }
.bottom{position: absolute; bottom: 0px; width: 100%; background: rgba(52,62,75,0.9); overflow: hidden; z-index: 2;}
.bottom img {margin-right: 5px;}

.fb-login{min-height: 50px; padding: 4px!important;  background: #1877f2!important;}
.fb_reset{ text-align: center!important; }

.dialog{ position: absolute;  background: rgba(0,0,0,0.9); border-radius: 20px 20px 0 0; width: 100%; height: calc(100% - 100px); bottom: 0px; color: #fff; padding-top: 20px; padding-bottom: 10rem; z-index: 2;}
.dialog .title{display: flex; justify-content: center; align-items: center;  text-align: center; font-weight: 400; font-size: 1.6rem; color: #fff;}
.dialog .title img{margin: 0 10px; height: 1.4rem;}
.dialog .title img.right{transform: rotateY(180deg); margin-top: 2px;}
.close,.close-g{position: absolute; right: 24px; background: url("../img/close.png") no-repeat;  background-size:cover; justify-content: right; width: 12px; height: 12px; }
.close-g{background: url("../img/close-g.png") no-repeat;  background-size:cover; top: 30px; right: 30px;}

.avatar{float: left; width: 3.8rem; height: 3.8rem; background: #fff; padding: 3px; box-sizing: content-box; border-radius: 50%; border: 3px solid #9d4020; }
.avatar img{width:100%; height: 100%;  box-sizing: content-box; border-radius: 50%; }
.dialog .crown{width: 22px;}
.dialog .name{float: left; display: block; max-width: 130px; line-height: 48px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 5px;}

.dialog table{ width: calc(100% - 30px); height: 100%; margin: 15px auto 0 auto; border-collapse: collapse;}
.dialog tbody{ width: 100%; display: block; height: 90%; overflow-y:scroll;}
.dialog tr{width: 100%; display: table;}
.dialog th{background: rgba(205,160,76,0.3); font-weight: 400; font-size: 1.3rem; padding: 5px;}
.dialog td{padding: 8px 0;  font-size: 1.5rem; border-bottom: 1px dotted #595857;}
.dialog td:first-child{width: 50px;}
.num{display: block; background: #3c3733; border-radius: 50%; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #edf5fe; font-size: 12px;}

.board-list {display: none; position: absolute; bottom: 0;}
.board-list .show{display: block;}

.board-button ul{display: flex;  align-items: center; color: #bed0de; height: 4rem;}
.board-button li{display: flex; align-items: center; justify-content: center; padding: 12px 0 10px 0; text-align: center; flex: 1; font-size: 1.4rem;}
.board-button li i{ max-width: 1.8rem; max-height: 1.8rem; margin-right: 5px;}
.board-button li.active{background: rgba(0,0,0,0.4);}
.fb-like{position: absolute!important; top:10px!important; right:10px!important;}

.top40{top:40px!important;}

.bottom .tip{display: flex; justify-content: center; font-size: 1rem; color: #aeb0b4; padding: 4px;}
.bottom .tip img{width: 12px; height: 12px;}

.text-money{color: #f57500; text-align: right; padding-right: 20px!important;}
.text-buddy{color: #32b16c; text-align: right; padding-right: 20px!important;}

/*下载弹窗*/
.game-avatar{display: block; width: 9rem; height: 9rem;  border-radius: 50px; margin: 0 auto;}
.dialog-download{position: absolute; width: 32.25rem; height: 30.5rem; top: 50%; left: 50%; transform: translate(-50%, -50%); padding:35px 30px;
    background: url("../img/dialog-bg.png") no-repeat bottom; background-size: cover;z-index:4;}
.mask{width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.7); left: 0; top: 0; z-index: 3;}
.dialog-download h2{text-align: center; font-size: 2rem; color: #0e2848; line-height: 2.6rem; margin-top: 5px;}
.down-btn{position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);  font-size: 1.4rem; color: #bed2f8; text-align: center;}

.down-btn button{display: block; background: url("../img/download-btn.png") no-repeat; background-size: cover;
    width: 16.8rem; height: 5rem; margin:10px auto 18px auto; border-radius: 4px; border: none; box-shadow:0px 2px 5px #831320;}
.down-btn button:hover{opacity:0.9;}



.bottom .fb-login{text-align: center!important;}
.diglog-body{ position:absolute; width:100%; height:100%; top:0px; left:0px;}

.dialog-login {  position: absolute;  background: url(../img/d-login-body.png) no-repeat;  background-size: cover;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);  width: 100%;  height:100%; z-index: 4;}
.dialog-login .fb-login-btn{ position: absolute; bottom: 15px; width: 80%; text-align: center; left:50%; transform:translateX(-50%);}
.dialog-login #fb-root_login{ background:#1877f2; padding:4px; border-radius:5px;}
.dialog-login .close-g{background-size:cover; top: 21.5rem; right: 18px; }
.dialog-login-bg{position:absolute;  background: url(../img/d-login-bg.png) no-repeat;  background-size: 31rem; padding-top:18rem; left: 50%; top:40%; transform: translate(-50%,-44%); width:31rem; height:47rem; text-align:center; border-radius:0 0 15px 15px; }

.dialog-login p{ font-size:1.4rem; height: 1.6rem; color: #ccc; text-align: center; margin-top: 5px;}

.dialog-login .text{width:23rem; margin:4.4rem 0 0 0; text-align:center;}

.scroll-list{position: absolute;margin: 20px auto; height: 100px; right: 10px; top:80px; z-index: 2; overflow: hidden; }
.scroll-list .scrollup{ position: relative; color: #fff;  animation:scrollup 8s linear infinite normal;}
.withdraw-text{font-size: 14px; height: 35px; overflow: hidden; padding-top: 5px;}
.withdraw-text p{ background: rgba(0,0,0,0.5); white-space:nowrap; float: left; border-radius: 25px; padding: 3px 10px;}
.withdraw-text span{color: #f39800; font-weight: 700; margin-left: 5px;}

@keyframes scrollup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -560px, 0);
        transform: translate3d(0, -560px, 0);
    }

}



@media screen and (max-width:320px) {
    .dialog .name{max-width: 110px;}
}

@media screen and (max-height: 736px) {
    .dialog{ padding-bottom: 11rem;}
}
@media screen and (max-height: 667px) {
    .banner img{height: 60%;}
    .dialog{ padding-bottom: 12rem;}
}

.gogogo {
    animation: myfirst 0.3s;
    -moz-animation: myfirst 0.3s;	/* Firefox */
    -webkit-animation: myfirst 0.3s;	/* Safari 和 Chrome */
    -o-animation: myfirst 0.3s;	/* Opera */
}


@keyframes myfirst
{
    0%   {bottom: -600px}

    100%  {bottom: 0px}
}