body{background: url(../images/banner.png) no-repeat top center #368BE8; background-size: 100% auto; }
.ruleBtn{width: 25px;position: fixed; z-index: 9; right: 0;top: 20%;}
.ruleBtn a{display: block; margin-bottom: 8px; }
.ruleBtn img{width: 100%;}
.banner{position: relative;line-height: 0; width: 100%; }
.bg{width: 100%;}
.backUp{position: fixed; line-height: 0; width: 45px; height: 45px; z-index: 99; bottom: 100px; right: 16px;}
.backUp img{width: 100%; height: 100%;}
.navBars{line-height: 0; margin-bottom: 16px; margin-top: -12px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
.navBars .item{width: calc(50% - 7px);}
.navBars .item img{width: 100%;}
.subNavBars{display: flex; align-items: center; justify-content: center; }
.subNavBars .item{width: 30%; margin: 0 2px; }
.subNavBars .item img{width: 100%;}
.subNavBars.s2 .item{width: 36%;}
.awardsbox{position: relative; line-height: 0; }
.awardsbox .bg{width: 100%;}
.awardsbox .left{position: absolute; width: 19.5%; top: 55%; line-height: 0; left: 3.2%; }
.awardsbox .right{position: absolute; width: 19.5%; top: 55%; line-height: 0; right: 3.2%; }
.awardsbox .left img,.awardsbox .right img{width: 100%;}
.awardsbox .btns{position: absolute; padding: 0 5%; top: 72.5%; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.awardsbox .btns button{line-height: 0; width: 31%; padding: 0; border: none; background: none; }
.awardsbox .btns button img{width: 100%;}
.awardsbox h4{position: absolute; width: 100%; height: 5%; margin: 0; color: #275B77; font-size: 12px; font-weight: 400; display: flex; align-items: center; justify-content: center; left: 0; bottom: 8%; background: url(../images/bg3.png) no-repeat center; background-size: auto 100%; }
.giftsbox{position: relative; line-height: 0;}
.giftsbox .bg{width: 100%;}
.giftsbox > h4{ position: absolute; width: 100%; left: 0; top: 18%; text-align: center; margin: 0; font-weight: 400; color: #478FCD; font-size: 12px; }
.giftsbox button{ left: 27%; top: 84%; position: absolute; width: 46%; background: none; padding: 0; border: none; line-height: 0; }
.giftsbox button img{width: 100%;}
.giftsbox .list{ position: absolute; left: 0; top: 22.5%; padding: 0 4%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.giftsbox .list .item{width: 25%;display: flex; align-items: center; flex-direction: column; }
.giftsbox .list .item .img{width: 80px;height: 80px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%; }
.giftsbox .list .item .img img{max-width: 80%; max-height: 80%; }
.giftsbox .list .item h4{ left: 0; font-size: 12px;color: #478FCD;height: 30px;overflow: hidden; line-height: 15px; text-align: center; margin: 0; font-weight: 400; }
/*.giftsbox .list .item h4 span{display: block;}*/
.giftsbox .list .item p{margin-top: 6px; line-height: 12px; font-size: 12px; text-align: center; color: #FA54A8; margin-bottom: 20px; }
.giftsbox h5{ width: 100%; height: 6.2%; position: absolute; left: 0; top: 73.1%; background: url(../images/bg4.png) no-repeat center; background-size: auto 100%; text-align: center; display: flex; align-items: center; justify-content: center; color: #478FCD; font-size: 12px; }
.giftsbox h5 span{color: #FA54A8;}
.syrank{background: #FEFFF3; margin-top: 45px; border-radius: 18px 18px 0px 0px;border: 5px solid #7AF3FE;}
.syrank .title{position: relative; text-align: center; margin: -45px auto 0; width: 60%; line-height: 0; }
.syrank .title img{width: 100%;}
.syrank h4{text-align: center; font-weight: 400; font-size: 11px; color: #478FCD; margin: 14px 0; }
.syrank header{width: 92%; position: relative; margin-left: 4%; text-align: center; font-size: 12px; color: #fff; display: flex; align-items: center; line-height: 28px; height: 28px;background: linear-gradient( 54deg, #2EC7F6 0%, #5FE5FF 100%);border-radius: 18px;}
.syrank header span:nth-child(1){flex: 1;}
.syrank header span:nth-child(2){flex: 2;}
.syrank header span:nth-child(3){flex: 2; padding-right: 6px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
.syrank header span img{width: 16px; height: 16px; margin-left: 12px; }
.syrank header .info{position: absolute; top: 32px; width: 177px; height: 81px; right: 0; }
.syrank header .info img{width: 100%; }
.syrank ul{padding: 9px 4%; margin: 0; list-style: none; margin-bottom: 80px; }
.syrank ul li{display: flex; align-items: center; padding: 13px 0; }
.syrank ul li .num{flex: 1;color: #478FCD; font-size: 14px; display: flex; align-items: center; justify-content: center;}
.syrank ul li .num img{width: 34px; height: 34px; }
.syrank ul li .user{flex: 2; display: flex; align-items: center; color: #478FCD; font-size: 14px;}
.syrank ul li .user .img{width: 46px;height: 46px; position: relative; margin-right: 16px; line-height: 0; border-radius: 50%; border: 1px solid #7AF3FE;}
.syrank ul li .user .img img{width: 100%; height: 100%; border-radius: 50%; } 
.syrank ul li .user .img .active{width: 16px; height: 16px; background: url(../images/icon5.png) no-repeat center; background-size: 100% 100%; position: absolute; right: 0; bottom: 0; }
.syrank ul li .coin{flex: 2; text-align: center; color: #478FCD; font-size: 14px; }
.syrank ul li:nth-last-child(1){position: fixed; left: 0; bottom: 0; padding: 12px 4% 26px; width: 100%; display: flex; align-items: center; background: url(../images/bg6.png) no-repeat center; background-size: 100% 100%; }
.syrank ul li:nth-last-child(1) .num,.syrank ul li:nth-last-child(1) .user,.syrank ul li:nth-last-child(1) .coin{color: #fff;}
.syrank ul li:nth-last-child(1) .user .img{border: 1px solid #fff;}
.yydrb{line-height: 0; position: relative; }
.yydrb .bg{width: 100%;}
.yydrb button{width: 80%; position: absolute; left: 10%; bottom: 5%; padding: 0; height: 36px; font-size: 12px; color: #478FCD; text-align: center; line-height: 36px; background: rgba(255,255,255,0.75);border-radius: 18px;border: 1px solid #7AF3FE;}
.yydrb h4{font-size: 12px;position: absolute; font-weight: 400; width: 100%; text-align: center; left: 0%; top: 30%;  color: #478FCD; margin: 0; line-height: 12px; }
.yydrb h4 span{color: #FF7E5B;}
.yydrb .list{position: absolute; left: 0%; top: 38%; width: 100%; box-sizing: border-box;  padding: 0 6%; display: flex; justify-content: space-between; }
.yydrb .list .item{}
.yydrb .list .item .img{ display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin: 0 auto 9px; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%; }
.yydrb .list .item .img img{max-width: 80%; max-height: 80%; }
.yydrb .list .item p{line-height: 14px; width: 110px; font-size: 11px; color: #478FCD; margin-bottom: 0; text-align: center; }
.shadow{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); z-index: 9;}
.recordList{position: fixed; line-height: 0; left: 0;bottom: 0;z-index: 10; width: 100%; }
.recordList .bg{width: 100%;}
.recordList .close{position: absolute;width: 24px;height: 24px;background: url(../images/close.png) no-repeat center; background-size: 100% 100%; right: 10px; top: 0; }
.recordList h4{position: absolute; margin: 0; left: 0; top: 19%; font-weight: 400; font-size: 12px; line-height: 12px;color: #478FCD; text-align: center; width: 100%; }
.recordList h4 span{color: #FA54A8;}
.recordList .content{position: absolute; width: 100%; top: 23%; padding: 0 4%; height: 78%; overflow-y: scroll; }
.recordList .content header{display: flex; padding: 0 16px; font-size: 11px; color: #fff; align-items: center; height: 32px;background: linear-gradient( #00C3FF 0%, #52E3FF 100%);border-radius: 6px;}
.recordList .content header span{flex: 1; text-align: center; }
.recordList .content header span:nth-child(1){text-align: left;}
.recordList .content header span:nth-child(3){flex: 2;text-align: right; }
.recordList ul{list-style: none; margin: 0; padding: 0; }
.recordList ul li{padding:12px 16px; margin-top: 8px;color: #fff; display: flex; align-items: center;background: linear-gradient( #00C3FF 0%, #52E3FF 100%);border-radius: 10px; }
.recordList ul li .time{text-align: left; flex: 1;line-height: 14px;font-size: 12px; }
.recordList ul li .count{text-align: center; flex: 1; font-size: 12px; }
.recordList ul li .list{flex: 2; overflow-x: scroll; }
.recordList ul li .list .scroll{scrollbar-width: none; -ms-overflow-style: none;display: flex; justify-content: end; }
.recordList ul li .list .scroll::-webkit-scrollbar,.recordList .content::-webkit-scrollbar,.awardsList .content .list::-webkit-scrollbar,.activeRule article::-webkit-scrollbar,.ranklist .content::-webkit-scrollbar,.getGifts .list::-webkit-scrollbar {display: none;}
.recordList ul li .list .item{width: 60px; text-align: center; margin-right: 5px; }
.recordList ul li .list .item .img{width: 45px; height: 45px; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%; }
.recordList ul li .list .item .img img{max-width: 90%; max-height: 90%; }
.recordList ul li .list .item p{margin-bottom: 0; margin-top: 5px; color: #fff; text-align: center; font-size: 10px; line-height: 10px; white-space: normal}
.awardsList{position: fixed; left: 50%; z-index: 10; width: 301px; margin-left: -150px; top: 15%; }
.awardsList .content{width: 301px; height: 465px; background: url(../images/bg7.png) no-repeat center; background-size: 100% 100%; }
.awardsList .content h4{text-align: center; font-size: 12px; color: #478FCD; font-weight: 400; padding-top: 88px; margin: 0 0  11px; }
.awardsList .content .list{display: flex; justify-content: center; flex-wrap: wrap; height: 342px; overflow-y: scroll; }
.awardsList .content .item{ width: 70px; margin: 0 8px; }
.awardsList .content .img{width: 70px; height: 70px; margin: 0 auto 4px; display: flex; align-items: center; justify-content: center; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%;}
.awardsList .content .img img{max-width: 90%; max-height: 90%; }
.awardsList .content p{margin-bottom: 10px; color: #488FCD; text-align: center; font-size: 12px; line-height: 15px; }
.awardsList button{width: 111px; height: 35px; display: block; margin: 15px auto 0; padding: 0; background: none; border: none; }
.awardsList button img{width: 100%;}
.awardsruleBox{position: fixed; width: 100%; left: 0; bottom: 0; z-index: 10; }
.awardsruleBox .navBars{padding: 0 6%; margin-bottom: 10px; }
.activeRule .bg{height: 18px; position: relative; background: linear-gradient( 180deg, #80EFFF 0%, #08CBF9 100%);box-shadow: 0px 5px 7px 0px rgba(67,195,223,0.78);border-radius: 17px 17px 0px 0px;}
.activeRule article{background: #FEFFF3; max-height: 480px; overflow-y: scroll; padding: 1px 5%; border-left: 5px solid #7AF3FE; border-right: 5px solid #7AF3FE;}
.activeRule article img{display: block;height: 28px;margin: 12px auto; }
.activeRule article p{line-height: 22px; font-size: 12px; color: #478FCD; }
.activeAwards .subNavBars{padding: 0 4%; margin-bottom: 5px; }
.ranklist .bg{height: 18px; position: relative; background: linear-gradient( 180deg, #80EFFF 0%, #08CBF9 100%);box-shadow: 0px 5px 7px 0px rgba(67,195,223,0.78);border-radius: 17px 17px 0px 0px;}
.ranklist .content{ max-height: 480px; padding-top: 18px; overflow-y: scroll; background: #FEFFF3; border-left: 5px solid #7AF3FE; border-right: 5px solid #7AF3FE;}
.ranklist section header{padding: 0px 0 12px; text-align: center; }
.ranklist section header img{height: 15px;}
.ranklist section .list{display: flex; justify-content: space-evenly; flex-wrap: wrap; }
.ranklist section .item{ width: 110px; margin: 0 0px; }
.ranklist section .img{width: 110px; height: 110px; margin: 0 auto 9px; display: flex; align-items: center; justify-content: center; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%;}
.ranklist section .img img{max-width: 90%; max-height: 90%; }
.ranklist section p{margin-bottom: 12px; color: #478FCD; text-align: center; font-size: 11px; line-height: 14px; }

.getGifts{width: 80%;position: fixed;z-index: 10;left: 10%; top: 15%; line-height: 0; }
.getGifts .fix{width: 100%; position: relative; }
.getGifts button{width: 111px; height: 35px; display: block; margin: 18px auto 0; padding: 0; background: none; border: none; }
.getGifts button img{width: 100%;}
.getGifts .list{ padding: 0 7%; max-height: 378px; overflow-y: scroll; display: flex; justify-content: space-evenly; flex-wrap: wrap; background: url(../images/bgm.png) repeat-y; background-size: 100% auto; }
.getGifts .item{ width: 75px; margin: 0 8px; }
.getGifts .img{width: 75px; height: 75px; margin: 0 auto 9px; display: flex; align-items: center; justify-content: center; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%;}
.getGifts .img img{max-width: 90%; max-height: 90%; }
.getGifts p{margin-bottom: 12px; color: #478FCD; text-align: center; font-size: 12px; line-height: 15px; }
[v-cloak] {display: none;}