body{background: #DEF9E2;}
.ruleBtn{position: fixed; font-size: 10px; line-height: 12px; text-align: center; box-sizing: border-box; padding: 8px 6px; color: #fff; background: rgba(0,0,0,0.4);border-radius: 6px 0px 0px 6px; z-index: 9; right: 0; top: 17%; width: 28px; }
.banner{line-height: 0;}
.banner img{width: 100%;}
.pad_15{padding: 0 15px 15px;}
.title{display: flex; align-items: center; justify-content: space-between; padding: 0 10px 12px;  }
.title .item{line-height: 0; width: 45%; }
.title .item img{width: 100%;}
.gamebox{position: relative; line-height: 0; }
.gamebox .bg{width: 100%;}
.gamebox .stepbtn{position: absolute; text-align: center; font-size: 10px;color: rgba(255,255,255,0.6); line-height: 13px; padding: 8px 6px; left: 16px; top: 16px; background: rgba(0,0,0,0.23); border-radius: 10px 10px 10px 10px; } 
.gamebox .stepbtn b{display: block; color: #fff; }
.gamebox .recordbtn{position: absolute;position: absolute; width: 44px; text-align: center; font-size: 10px; line-height: 13px; color: #DDFFEF; padding: 8px 12px; right: 16px; top: 16px; background: rgba(0,0,0,0.23); border-radius: 10px 10px 10px 10px; }
.gamebox .list{position: absolute; height: 60%; width: 100%; top: 22.6%; left: 0; }
.gamebox .list .item{width: 19.7%; position: absolute; }
.gamebox .list .item img{width: 100%;}
.gamebox .list .item:nth-child(1){left: 40%; top: 0; }
.gamebox .list .item:nth-child(2){right: 22.9%; top: 13%; }
.gamebox .list .item:nth-child(3){right: 6.1%; top: 29%; }
.gamebox .list .item:nth-child(4){right: 22.9%; top: 45%; }
.gamebox .list .item:nth-child(5){left: 40%; top: 62%; }
.gamebox .list .item:nth-child(6){left: 22.9%; top: 45%; }
.gamebox .list .item:nth-child(7){left: 6.1%; top: 29%; }
.gamebox .list .item:nth-child(8){left: 22.9%; top: 13%; }
.gamebox .btns{display: flex; align-items: center; bottom: 5.6%; padding: 0 16px; left: 0; width: 100%; justify-content: space-between; position: absolute; }
.gamebox .btns button{width: 33%; line-height: 0; background: none; padding: 0; border: none; outline: none; }
.gamebox .btns button img{width: 100%; }
.task{ margin-top: 16px; padding: 14px 16px 16px; border: 2px solid #FFFFFF;border-radius: 20px 20px 20px 20px;background: linear-gradient( 180deg, #F3FFF6 0%, #E7FFED 100%);}
.task header{text-align: center; margin-bottom: 16px; }
.task header img{width: 52.4%;}
.task ul{list-style: none; padding: 0; margin: 0; }
.task ul li{display: flex;background: #FFFFFF;border: 1px solid #E6F5EA;border-radius: 10px 10px 10px 10px; margin-top: 8px; align-items: center; padding: 12px; }
.task ul li img{width: 48px; height: 48px; }
.task ul li .text{padding-left: 6px; display: flex; flex-direction: column; justify-content: space-between; }
.task ul li h4{font-size: 12px; line-height: 14px; color: #1C2722; }
.task ul li p{font-size: 10px; margin-bottom: 0; color:rgba(28, 39, 34, 0.3); }
.task ul li button{margin-left: auto; padding: 0; font-size: 11px; color: rgba(41, 196, 123, 0.70); background: #fff; width: 54px;height: 28px;border-radius: 29px 29px 29px 29px;border: 1px solid rgba(41,196,123,0.2); }
.task ul li button.on{ color: #fff; background: linear-gradient( 180deg, #29C47B 0%, #009D6C 100%);}
.subtit{ padding: 3px 0 15px; display: flex; align-items: center; justify-content: center; }
.subtit .item{margin: 0 10px; font-size: 14px; color:#29C47B; text-align: center; line-height: 38px; width: 100px;height: 38px;border-radius: 20px;border: 1px solid rgba(41,196,123,0.4); }
.subtit .item.on{ color: #fff; background: linear-gradient( 180deg, #29C47B 0%, #009D6C 100%);}
.awardsbox{ padding: 14px 24px 24px; border: 2px solid #FFFFFF;border-radius: 20px 20px 20px 20px;background: linear-gradient( 180deg, #F3FFF6 0%, #E7FFED 100%);}
.awardsbox header{text-align: center;}
.awardsbox header img{width: 79%;}
.awardsbox h5{font-size: 11px; margin-top: 8px; margin-bottom: 16px; line-height: 13px; color: #29C47B; text-align: center; }
.awardsbox .list{display: flex; justify-content: space-between; }
.awardsbox .list .item{width: 88px;}
.awardsbox .list .item .img{width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: rgba(41,196,123,0.1);border-radius: 10px 10px 10px 10px; }
.awardsbox .list .item .img img{max-width: 100%; max-height: 100%; }
.awardsbox .list .item p{margin-top: 8px; font-size: 11px; margin-bottom: 15px; text-align: center;color: rgba(28, 39, 34, 0.70);}
.awardsbox button{width: 100%; height: 40px; background: none; font-size: 12px; color: #29C47B; border-radius: 29px 29px 29px 29px;border: 1px solid rgba(41,196,123,0.4);}
.rankbox{margin-top: 16px; padding: 22px 16px; border-radius: 20px 20px 0px 0px;border: 2px solid #FFFFFF;background: linear-gradient( 180deg, #F3FFF6 0%, #E7FFED 100%);}
.rankbox header{display: flex; margin-bottom: 12px; font-weight: bold; align-items: center; font-size: 13px; line-height: 15px; color: #1C2722; }
.rankbox header span:nth-child(1){flex: 1;}
.rankbox header span:nth-child(2){flex: 5;}
.rankbox header span:nth-child(3){flex: 2;text-align: right;}
.rankbox h5{font-size: 11px; color: #29C47B; line-height: 18px; text-align: center; }
.rankbox ul{list-style: none; padding: 0 0 35px; margin: 0; }
.rankbox ul li{padding: 8px 0; display: flex; align-items: center; }
.rankbox ul li .num{flex: 1; font-size: 12px; color: rgba(28, 39, 34, 0.60); }
.rankbox ul li .num img{width: 19px; height: 19px; }
.rankbox ul li .coin{flex:2; text-align: right; color: #29C47B; }
.rankbox ul li .user{ flex: 5; display: flex; align-items: center; font-size: 12px; color: #1C2722; }
.rankbox ul li .user img{width: 32px; height: 32px; margin-right: 6px;  border-radius: 50%; }
.rankbox ul li:nth-child(1) .user{color: #E87101;}
.rankbox ul li:nth-child(2) .user{color: #43819D;}
.rankbox ul li:nth-child(3) .user{color: #B6654E;}
.rankbox ul li:nth-last-child(1){border: 2px solid #FFFFFF; padding: 10px 31px 30px; border-radius: 20px 20px 0px 0px;background: linear-gradient( 180deg, #C2FCCB 0%, #DEF9E2 100%);position: fixed; width: 100%; left: 0; bottom: 0; }
.myAwards{position:fixed; display: flex; align-items: flex-end; justify-content: center; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); }
.myAwards .bg{width: 100%;}
.myAwards .box{position: relative; line-height: 0; }
.myAwards .box h4{position: absolute; font-weight: 400; top: 22%; margin-top: 0; margin-bottom: 0; left: 4%; display: flex;align-items: center; font-size: 12px; color: rgba(28, 39, 34, 0.80); }
.myAwards .box h4 span{font-size: 16px;color: #29C47B;padding-left: 4px; }
.myAwards .box h4 b{color: #1C2722; font-weight: 400;font-size: 16px; }
.myAwards .box header{ left: 4%; line-height: 12px; width: 92%; top: 30%; font-size: 12px; color: rgba(28, 39, 34, 0.60); position: absolute; display: flex; align-items: center; }
.myAwards .box header span{flex: 2; }
.myAwards .box header span:nth-child(2){flex: 1;}
.myAwards .box ul{position: absolute; top: 33%; height: 68%; overflow-y: scroll; left: 4%; width: 92%; list-style: none; padding: 0; margin: 0; }
.myAwards .box ul li{padding: 16px 0; display: flex; align-items: start; line-height: 14px; border-bottom: 1px solid rgba(28, 39, 34, 0.08); }
.myAwards .box ul li .time{font-size: 12px; flex: 2; color: rgba(28, 39, 34, 0.80); }
.myAwards .box ul li .count{font-size: 12px; flex: 1; font-weight: bold; color: rgba(28, 39, 34, 0.80); }
.myAwards .box ul li .con{flex: 2; font-size: 10px; height: 48px; overflow-y: scroll; color: #29C47B; flex-wrap: wrap; }
.myAwards .box ul li .con span{ height: 16px; display: inline-block; margin-right: 2px; margin-bottom: 5px; line-height: 16px; padding: 0 4px; background: rgba(41,196,123,0.1);border-radius: 3px 3px 3px 3px;}
.myAwards .closeBtn{position: absolute; width: 32px; height: 32px; right: 16px; top: -24px; }
.awardsRule{position:fixed; display: flex; align-items: flex-end; justify-content: center; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); }
.awardsRule .bg{width: 100%;}
.awardsRule .box{position: relative; line-height: 0; }
.awardsRule .closeBtn{position: absolute; width: 32px; height: 32px; right: 16px; top: -24px; }
.awardsRule .subtit{left: 0;top: 18%; width: 100%; position: absolute;  }
.awardsRule .awards{position: absolute; height: 72%; overflow-y: scroll; width: 100%; left: 0; top: 28%; }
.awardsRule .awards section{margin-bottom: 16px;}
.awardsRule .awards section header{text-align: center; margin-bottom: 16px; }
.awardsRule .awards section header img{width: 30%;}
.awardsRule .awards .list{ padding: 0 5%; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.awardsRule .awards .list .item{width: 88px; margin: 0 4%; height:150px}
.awardsRule .awards .list .item .img{width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: rgba(41,196,123,0.1);border-radius: 10px 10px 10px 10px; }
.awardsRule .awards .list .item .img img{max-width: 100%; max-height: 100%; }
.awardsRule .awards .list .item p{margin-top: 8px; font-size: 11px; height: 26px; line-height: 13px; margin-bottom: 8px; text-align: center;color: rgba(28, 39, 34, 0.70);}
.awardsRule .awards article{padding: 0 16px 16px;}
.awardsRule .awards article p{font-size: 13px; margin-bottom: 6px; line-height: 22px;color:rgba(28, 39, 34, 0.80);}
.congratulation{position:fixed; display: flex; align-items: center; justify-content: center; z-index: 10; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); }
.congratulation .bg{width: 100%;}
.congratulation .box{position: relative; width: 84%; line-height: 0; }
.congratulation .gift{text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; width: 100%; left: 0; top: 36%;  }
.congratulation .gift > p{margin-top: 5px; font-size: 11px; height: 26px; line-height: 13px; margin-bottom: 5px; text-align: center;color: rgba(28, 39, 34, 0.70);}
.congratulation .gift .img{width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: rgba(41,196,123,0.1);border-radius: 10px 10px 10px 10px;}
.congratulation .gift .img img{max-width: 100%; max-height: 100%; }
.congratulation .gift button{background: none; width: 32%; padding: 0; line-height: 0; border: none; }
.congratulation .gift button img{width: 100%;}
.congratulation .gift .list{ padding: 0 12%; height: 80%; margin-bottom: 12px; overflow-y: scroll; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.congratulation .gift .list .item{width: 66px; margin-bottom: 10px; }
.congratulation .gift .list .item .img{width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; background: rgba(41,196,123,0.1);border-radius: 10px 10px 10px 10px; }
.congratulation .gift .list .item .img img{max-width: 100%; max-height: 100%; }
.congratulation .gift .list .item p{margin-top: 8px; font-size: 11px; line-height: 13px; margin-bottom: 0px; text-align: center;color: rgba(28, 39, 34, 0.70);}
.congratulation .gift .list .item h6{color: #29C47B; line-height: 11px; text-align: center; }