html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu {margin: 0;padding: 0;box-sizing: border-box;}
html,body,fieldset,img,iframe,abbr {border: 0}
li {list-style: none}
textarea {overflow: auto;resize: none}
a,button {cursor: pointer}
h1,h2,h3,h4,h5,h6,em,strong,b {font-weight: 700}
a,a:hover {text-decoration: none}
a{text-decoration: none}
input{-webkit-appearance: none;appearance: none}
* {outline: 0;-webkit-tap-highlight-color: transparent;-webkit-focus-ring-color: rgba(0,0,0,0)}
html{font-size: calc(100vw/7.5);}
body{font:.22rem / .3rem 'Microsoft Yahei',Arial;color: #010200;text-align: center;}
html,body{min-height: 100%;background: #03251a;}
table{border-collapse:collapse}
img{display: block;width: 100%;user-select: none;}
::-webkit-scrollbar {display:none;}
.tc{text-align: center;}
.app{
    width:7.5rem;
    margin:0 auto;
    background: #03251a;
}
.logo{
    display: block;
    width: 1.82rem;
    height: .53rem;
    background: url('../imgs/logo.png') no-repeat center / contain;
    margin: .2rem auto;
}
.cell,.bar{
    display:-webkit-box;
    display:-webkit-flex;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
    align-items:center
}
.bd{
    -webkit-box-flex:1;
    -webkit-flex:1;
    flex:1;
}
.top{
    position: absolute;
    top: .36rem; 
    left: 50%; 
    transform: translateX(-50%);
    z-index: 100;
}
.bar{    
    background: url('../imgs/bar.png') no-repeat center / cover;
    padding: 0 .22rem 0 .8rem;
    width: 7.1rem;
    height: .8rem;     
    color: #e0e5d3;
}
.coin{
    text-align: left;
    font-size: .24rem;
}
.btn-record,
.btn-rule{
    padding: .42rem .25rem 0;
    position: relative;
    font-size: .14rem;
    line-height: 1;
    background-repeat: no-repeat;
    background-size: .52rem .42rem;
    background-position: center top;
    cursor: pointer;
}
.btn-record::after,
.btn-rule::after{
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .02rem;
    height: .4rem;
    background: #427252;
}
.btn-record{
    background-image: url('../imgs/btn-record.png');
}
.btn-rule{
    background-image: url('../imgs/btn-rule.png');
}
.btn-login,.btn-logout{
    width: 1.13rem;
    height: .47rem;
    background: url('../imgs/btn-login-out.png') no-repeat center / cover;
    margin-left: .3rem;
    overflow: hidden;
    line-height: .48rem;
    color: #000;
    font-size: .24rem;
    text-shadow: 0 0 1px #ffffb1;
    cursor: pointer;
}
.btn-logout{
    display: none;
}
.user{
    color: #d9e6dc;
    padding: .1rem 0;
    text-align: right;
}
.main{
    min-height: 16.4rem;
}
.main .panel{
    display: none;
    background-position: center top;
    background-size: 7.5rem auto;
    background-repeat: no-repeat;
    position: relative;
}
.main .bet{
    height: 17.2rem;
    background-image: url('../imgs/bet-bg.jpg?v=1');    
}
.main .ranking{
    min-height: 15.7rem;
    height: 100vh;
    background-image: url('../imgs/ranking-bg.jpg?v=1');
}
.bet-wrap{
    padding: 4.62rem .26rem 0;
}
.notice{
    width: 6.9rem;
    height: .59rem;
    background: url('../imgs/notice.png') no-repeat center / contain;
    padding: 0 .4rem 0 1.6rem;
    margin-bottom: .47rem;
}
.scroll{
    width: 5rem;
    height: .59rem;
    overflow: hidden;
    position: relative;
}
.scroll li{
    width: 3rem;
    color: #e9edca;
    height: .6rem;
    line-height: .6rem;
    font-size: .22rem;
    width: auto;
}
.refresh{
    width: 1rem;
    height: 1rem;
    background: url('../imgs/refresh.png') no-repeat center / contain;
    position: fixed;
    left: .1rem;
    top: 5.2rem;
    font-size: 0;
    z-index: 100;
}
.title{
    background: url('../imgs/title.png') no-repeat left top / 6.9rem auto;
    font-size: 0;
    height: .38rem;
    margin: 0 auto;
}
.title.t2{
    background-position: 0 -.5rem;
    height: .47rem;
}

.card-wrap{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: .22rem;
    margin-bottom: .5rem;
}
.card{
    width: 3.43rem;
    height: 3.6rem;
    background: url('../imgs/card.png') no-repeat center / cover;
    text-align: center;
    position: relative;
}
.card.lock::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(0,0,0,.5);
    background-image: url('../imgs/lock.png');
    background-size: .64rem;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 20;
    border-radius: .2rem;

}
.card.lock .progress{
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: .1;
}
.picture{
    height: 1.82rem;
    position: relative;
}
.picture p{
    position: absolute;
    left: 0;
    right: 0;
    bottom:.02rem;
    font-size: .22rem;
    color: #1f8f60;
    font-weight: bold;
}
.picture .status{
    z-index: 2;
    position: absolute;
    left: .28rem;
    top: .24rem;
    width: .68rem;
    height: .44rem;
    text-align: center;
    font-size: .14rem;
    padding: .04rem 0;
    line-height: .18rem;
    border-radius: .06rem;
    background: #fbeab1;
    border: 1px solid #9d8853;
    color: #4b3200;
}
.picture .status span{
    display: block;
}
.progress{
    width: 2.8rem;
    height: .25rem;
    position: relative;
    margin: 0 auto;    
}
.progress .pt{
    position: absolute;
    left: 0;
    top: 0;
    line-height: .25rem;
    width: 100%;
    font-size: .14rem;
}
.prog-bar,.prog-cur{
    height: .25rem;
    background: url('../imgs/progress.png') no-repeat left top / 2.8rem auto;
}
.prog-cur{
    background-position: left bottom;
}
.invest{
    height: .3rem;
    font-size: .18rem;
    color: #717171;
}
.input{
    height: .4rem;
    border: 1px solid #025326;
    background-color: #fff;
    background-image: url('../imgs/zq.jpg');
    background-size: .25rem;
    background-position: 2.4rem center;
    background-repeat: no-repeat;
    border-radius: .1rem;
    margin: 0 .37rem 0 .3rem;
    padding: 0 .33rem;
}
.input input{
    border: none;
    outline: none;
    width: 100%;
    height: .4rem;
    line-height: .4rem;
    background: transparent;
    text-align: center;
    font-size: .22rem;
}
.btn-buy{
    width: 2.87rem;
    height: .51rem;
    background: url('../imgs/btn-buy.png') no-repeat center / cover;
    font-size: 0;
    margin: .06rem auto 0;
}



.top-three{
    height: 7.97rem;
    position: relative;
}
.top-three li{
    position: absolute;
    bottom: .66rem;
    height: 1rem;
    width: 1.98rem;
    text-align: center;
    font-size: .19rem;
    line-height: .28rem;
}
.top-three li p:last-child{
    font-size: .16rem;
    line-height: 1.2;
}
.top-three .name{
    font-weight: bold;
    line-height: .32rem;
}
.top-three li:nth-child(1){
    height: 1.38rem;
    width: 2.32rem;
    left: 2.62rem;
    font-size: .22rem;
    line-height: .32rem;
}
.top-three li:nth-child(1) .name{
    font-size: .26rem;
    line-height: .38rem;
}
.top-three li:nth-child(2){
    left: .38rem;
}
.top-three li:nth-child(3){
    right: .32rem;
}
.ranking-list{
    height: 4.02rem;
    margin: 0 .26rem;
    color: #efd8b7;
    overflow: hidden;
}
.ranking-list ul{
    margin: .08rem .12rem .08rem .34rem;
    padding-right: .32rem;
    height: 3.85rem;
    overflow-y: auto;
}
.ranking-list ul::-webkit-scrollbar {
    display: block;
	width: .16rem;
}
.ranking-list ul::-webkit-scrollbar-thumb {
	border-radius: .1rem;
    width: .12rem;
    border: .02rem solid #6a9f73;
	background: #4d8057;
}

.ranking-list li{
    height: .38rem;
    line-height: .38rem;
    display: flex;
    text-align: left;
    font-size: .2rem;
    position: relative;
    padding-right: .1rem;
}
.ranking-list li::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #225133 50%, #225133 50%, transparent);
}
.ranking-list li .index{
    min-width: 1.2rem;
    padding: 0 .15rem;
}
.ranking-list li.on{
    border: 1px solid #789f42;
    border-radius: .08rem;
    background: #627721;
    background: linear-gradient(to right, transparent, #617721 30%, #617721 70%, transparent);   
}
.ranking-list li.on::after{
    display: none;
}
.my{
    width: 7.1rem;
    height: .95rem;
    background: url('../imgs/my.png') no-repeat center / contain;
    margin: .24rem 0 0 .24rem;
}
.my .avatar{
    width: .56rem;
    height: .56rem;
    border-radius: .1rem;
    overflow: hidden;
    margin: 0 .14rem 0 .2rem;
    border: 1px solid #e5e2ab;
    box-shadow: 0 0 .1rem #073f23;
}
.my .bd{
    text-align: left;
    font-size: .2rem;
    color: #efd8b7;
    text-shadow: .02rem .02rem .1rem rgba(0,0,0,.8);
}
.my .bd span{
    display: inline-block;
    margin-right: .04rem;
}
.nav{
    position: fixed;
    bottom: .2rem;
    width: 6.76rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}
.nav-item{
    display: block;
    width: 3.24rem;
    height: .6rem;
    font-size: 0;
    background: url('../imgs/nav-item.png') no-repeat -999rem / 6.56rem 1.34rem;
}
.nav-item:nth-child(1){
    background-position: 0 0;
}
.nav-item:nth-child(2){
    background-position: 0 -.72rem;
}
.nav-item.cur{
    background-position-x: -3.33rem;
}
.gray{
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}


.twpop{
    z-index: 100;
    position: relative;
}

.twpop .twpop-main{
    width: 6.3rem;
    background: url('../imgs/pop-bg.jpg') no-repeat center / 6.3rem 100%;
    color: #14341f;
}
.twpop .twpop-main::after,
.twpop .twpop-main::before{
    content: '';
    position: absolute;
    left: 0;
    width: 6.3rem;
    background-repeat: no-repeat;
    background-size: 6.3rem auto;
}
.twpop .twpop-main::before{
    top: -.4rem;
    height: .48rem;
    background-image: url('../imgs/pop-pt.png');
}
.twpop .twpop-main::after{
    bottom: -.44rem;
    height: .5rem;
    background-image: url('../imgs/pop-pb.png');
}
.twpop .twpop-cont{
    padding:.3rem .3rem .2rem;
    min-height: 1.2rem;
    font-size: .36rem;
    font-weight: bold;
}
.twpop .twpop-title{
    border: none;
    padding: .1rem;
    font-size: .36rem;
    font-weight: bold;
} 
.twpop .twpop-close{
    top: -.14rem;
    right: .2rem;
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    border: 1px solid #fefff8;
    background:#152e1b url('../imgs/close.png') no-repeat center / .46rem;
}
.twpop .twpop-foot{
    margin-top: .2rem;
}
.twpop .twpop-btn{
    padding: .06rem .6rem;
    line-height: .56rem;    
    border: 1px solid #f0d890;
    color: #fffba8;
    font-size: .3rem;
    font-weight: bold;
    background: #203d27;
    background-image: linear-gradient(top,#204d2c,#172f1f);
    background-image: -webkit-linear-gradient(top,#204d2c,#172f1f);
}
.twpop-msg .twpop-main{
    border-radius: 10px;
}
.twpop-msg-text{
    line-height: 1.6;
}

.twpop .pop-rule,
.twpop .pop-record{
    width: 6.34rem;
    background: url('../imgs/pop-bg2.jpg') no-repeat center / 6.34rem 100%;
}
.twpop .pop-rule .twpop-close,
.twpop .pop-record .twpop-close{
    width: 1rem;
    height: 1rem;
    position: absolute;
    right: .2rem;
    top: -1rem;
    background-color: transparent;
    border: none;
}
.twpop .pop-rule::after,
.twpop .pop-rule::before,
.twpop .pop-record::after,
.twpop .pop-record::before{
    content: '';
    position: absolute;
    left: 0;
    width: 6.34rem;
    background-repeat: no-repeat;
    background-size: 6.34rem auto;
}
.twpop .pop-rule::before{
    top: -1.06rem;
    height: 1.06rem;
    background-image: url('../imgs/pop-rule-top.png');
}
.twpop .pop-record::before{
    top: -1.04rem;
    height: 1.04rem;
    background-image: url('../imgs/pop-record-top.png');
}
.twpop .pop-rule::after,
.twpop .pop-record::after{
    bottom: -.3rem;
    height: .62rem;
    background-image: url('../imgs/pop-pb2.png');
}
.twpop .pop-rule .twpop-cont{
    padding: .2rem .1rem .2rem .2rem;
    margin: .25rem .38rem;
    position: relative;
    z-index: 2;
    text-align: left;
    background: #fefaee;
    border: .02rem solid #d5cebe;
    border-radius: .16rem;
    font-weight: normal;
}
.twpop .pop-rule .twpop-diy-content,
.twpop .pop-record .twpop-diy-content{
    max-height: 8rem;
    overflow-y: auto;
}
.twpop .pop-rule .twpop-diy-content::-webkit-scrollbar,
.twpop .pop-record .twpop-diy-content::-webkit-scrollbar {
    display: block;
	width: .12rem;
}
.twpop .pop-rule .twpop-diy-content::-webkit-scrollbar-thumb,
.twpop .pop-record .twpop-diy-content::-webkit-scrollbar-thumb {
	border-radius: .1rem;
    width: .08rem;
    border: .02rem solid #fefff9;
	background: #a87d49;
}
.pop-record .twpop-cont{
    padding:.3rem;
    position: relative;
    z-index: 2;
    font-weight: normal;
}
.record-list li{
    background: #fffdfa;
    border: .02rem solid #d1c7b6;
    margin-bottom: .2rem;
    border-radius: .16rem;
    padding: .24rem;
    text-align: left;
    font-size: .22rem;
    color: #010903;
}
.record-list li.on{
    border-color: #bf9e7b;
    background: #fdf6d9;
    text-shadow: 0 0 .1rem #fefefc;
}
.record-list li p:last-child{
    margin-top: .04rem;
    color: #bb833a;
}
.record-list .date{
    color: #635a53;
    font-size: .18rem;
    margin-bottom: .04rem;
}
.record-list .win{
    color: #ae833f;
    padding-left: .38rem;
    background: url('../imgs/win.jpg') no-repeat left center / .26rem;
	display: flex;
    justify-content: space-between;
    line-height: .46rem;
}
.pop-record .more{
    width: 2.76rem;
    height: .22rem;
    font-size: 0;
    background: url('../imgs/more.jpg') no-repeat left center / cover;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.twpop-msg .twpop-main::after,.twpop-msg .twpop-main::before,.twpop-load .twpop-main::after,.twpop-load .twpop-main::before{
    display: none;
}
.rule{
    padding-right: .1rem;
    color: #010a03;
    font-size: .22rem;
    line-height: .3rem;
    text-align: justify;
}
.rule p{
    margin-bottom: .18rem;
    padding-left: .3rem;
    position: relative;
}
.rule p i{
    font-size: .22rem;
    color: #a87d49;
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
}
.issue .icon{
    display: block;
    width: .72rem;
    height: .72rem;
    background: url('../imgs/football.jpg') no-repeat center / contain;
    margin: 0 auto .14rem;
}
.issue span{
    display: inline-block;
    font-size: .36rem;
    color: #cba54e;
    text-shadow: 0 0 .1rem #fff18f;
}
.twpop .txt{
    padding: .1rem 0;
    font-size: .26rem;
    color: #635a53;
    font-weight: normal;
}
.result{
    color: #cba54e;
    text-shadow: 0 0 .1rem #fff18f;
}

.twpop .twpop-input,.twpop .twpop-select{
    height: .6rem;
    line-height: .6rem;
    font-size: .26rem;
    color: #14341f;
    padding: 0 .2rem;
}
.twpop .twpop-from-text{
    font-size: .22rem;
    font-weight: normal;
    line-height: 1.4;
    color: #999;
    margin-bottom: .2rem;
}