body{background: url(../images/banner.png) no-repeat top center #FF2158; background-size: 100% auto; }
.banner{line-height: 0;}
.banner img{width: 100%;}
.title{display: flex; align-items: center; justify-content: center; padding: 0 0 15px; }
.title .item{line-height: 0; width: 36.5%; margin: 0 2.3%; }
.title .item img{width: 100%;}
.content{padding: 0 10px 10px;}
.content .top{ padding: 5px 0 20px; background: url(../images/bg2.png) no-repeat center; background-size: 100% 100%; }
.content .top .user{ width: calc(100% - 18px); margin-left: 18px; display: flex; align-items: center; padding: 26px 16px 10px; box-sizing: border-box; background: url(../images/bg.png) no-repeat center; background-size: 100% 100%;}
.content .top .user .img{border: 2px solid #FFFBC5; margin-right: 14px; width: 44px; height: 44px; line-height: 0; border-radius: 50%; }
.content .top .user .img img{width: 100%; height: 100%; border-radius: 50%; }
.content .top .user .text{font-size: 12px; color: #FFFFFF; line-height: 18px; }
.content .top h4{font-size: 11px; line-height: 16px; color: #AB562D; text-align: center; font-weight: 400; margin-top: 15px; margin-bottom: 13px; }
.content .top .list{ padding: 0 14px; display: flex; align-items: center; justify-content: space-between; }
.content .top .list .item{width: 62px;}
.content .top .list .item .img{width: 62px;height: 62px; display: flex; align-items: center; justify-content: center; background: #FFFFFF;border-radius: 8px;border: 1px solid #FFDA99;}
.content .top .list .item .img img{max-width: 86%; max-height: 86%; }
.content .top .list .item p{width: 65px; height: 15px; color: #fff;  margin: -8px auto 6px; font-size: 10px; display: flex; align-items: center; justify-content: center; background: url(../images/bg4.png) no-repeat center; background-size: 100% 100%; }
.content .top .list .item h5{line-height: 14px; font-size: 10px; color: #AB562D; margin: 0; text-align: center; }
.peorank{width: 100%; padding: 15px 11px; box-sizing: border-box; margin: 10px auto;background: #FFF8F0;border-radius: 20px;}
.peorank header{position: relative; display: flex; align-items: center; color: #AB562D; font-size: 11px; margin: 0 auto; height: 26px; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%;}
.peorank header span{flex: 1.5; display: flex; align-items: center; justify-content: center; }
.peorank header span:nth-child(2){flex: 4;}
.peorank header span:nth-child(3){flex: 2;}
.peorank header span img{width: 12px; height: 12px; margin-left: 4px; }
.peorank header > img{position: absolute; z-index: 2; width: 281px; height: 66px; right: 12px; top: 26px; }
.peorank h4{font-size: 11px; font-weight: 400; line-height: 16px; color: #AB562D; margin: 10px 0 12px; text-align: center; }
.peorank ul{list-style: none; position: relative;  padding: 0; margin: 0; }
.peorank ul li{padding:7px 0; color: #AB562D; position: relative; display: flex; align-items: center; }
.peorank ul li .num{flex: 1.5; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.peorank ul li .num img{width: 34px; height: 34px; }
.peorank ul li .coin{flex: 2; text-align: center; font-size: 12px; color: #AB562D; }
.peorank ul li .user{flex: 4; display: flex; align-items: center; font-size: 12px; color: #AB562D; }
.peorank ul li .user .img{width: 40px;height: 40px; margin-right: 24px; border-radius: 50%; position: relative; border: 1px solid #E71414;;}
.peorank ul li .user .img img{width: 100%; height: 100%; border-radius: 50%; }
.fixbtn{position: fixed; right: 0; top: 15%; width: 24px; z-index: 9; }
.fixbtn img{width: 100%;}
.shadow{position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6); z-index: 10; } 
.awardsRule{position: fixed; width: 100%; height: 80%; left: 0; bottom: 0; z-index: 11; }
.ruletitle{display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.ruletitle .item{line-height: 0; width: 29.9%; margin: 0 3px; }
.ruletitle .item img{width: 100%;}
.awardsRule h4{text-align: center; line-height: 0; margin: 0 0 14px; }
.awardsRule h4 img{width: 43%;}
.awardsRule section{margin-bottom: 10px;}
.awardsRule .box{padding: 14px 10px; height: calc(100% - 42px); overflow-y: scroll; border-radius: 34px 34px 0 0; background: linear-gradient( 180deg, #FF8797 0%, #FF2757 4%, #FF4362 95%, #FF3E60 100%); }
.awardsRule .box section{ padding: 10px; box-shadow: inset 0px -6px 10px 5px #FFFFFF;border-radius: 24px;background: linear-gradient( 183deg, #FED1C2 0%, #FFF2E7 23%, #FFFBF1 59%, #FFFAF4 100%);}
.awardsRule .list{ display: flex; flex-wrap: wrap; justify-content: center; }
.awardsRule .list .item{width: 58px; margin: 0 11px; }
.awardsRule .list .img{width: 58px; height: 58px;border: 1px solid #FFDA99;border-radius: 4px;background: #FFFFFF; display: flex; align-items: center; justify-content: center;}
.awardsRule .list .img img{max-width: 85%; max-height: 85%; }
.awardsRule .list p{margin-top: 6px; margin-bottom: 13px; font-size: 10px; text-align: center; height: 28px; line-height: 14px; color: #AB562D; }
.awardsRule .rule{position: relative; padding: 10px 30px; box-shadow: inset 0px -6px 10px 5px #FFFFFF;border-radius: 24px;background: linear-gradient( 183deg, #FED1C2 0%, #FFF2E7 23%, #FFFBF1 59%, #FFFAF4 100%); }
.awardsRule .rule article{ line-height: 22px; font-size: 11px; color: #AB562D;}

.content .top .list .item button{border: none; display: block; background: none; padding: 0; width:76%; margin: 5px auto 0; line-height: 0; }
.content .top .list .item button img{width: 100%;}