body{background: #03060A;}
.backUp{position: fixed; line-height: 0; width: 42px; height: 44px; z-index: 99; bottom: 150px; right: 16px;}
.backUp img{width: 100%; height: 100%;}
.banner{line-height: 0;}
.banner img{width: 100%;}
.navbar{position: relative; margin-top: -10px; line-height: 0; }
.navbar img{width: 100%;}
.navbar .list{position: absolute; left: 0; top: 0; display: flex; align-items: center; width: 100%; height: 100%; }
.navbar .list .item{flex: 1; height: 100%; }
.steps{line-height: 0; position: relative; }
.steps img{width: 100%;}
.steps .list{position: absolute; left: 0; top: 0; display: flex; align-items: center; width: 100%; height: 100%; }
.steps .list .item{flex: 1; height: 100%; }
.task{padding: 24px 30px 28px; margin-bottom: 28px; position: relative; margin-top: 6px; background: url(../images/bg5.png) no-repeat center; background-size: 100% 100%; }
.task .tit{height: 22px; margin-bottom: 12px; line-height: 0; text-align: center; }
.task .tit img{height: 100%;}
.task h4{height: 32px; margin-bottom: 15px; padding: 0 14px; font-weight: 400; font-size: 12px; color: #D6C2A1; display: flex; align-items: center; background: linear-gradient( 180deg, #362C26 0%, #000000 100%);border-radius: 4px;border: 1px solid rgba(255, 255, 255, 0.1);}
.task h4 div{margin-left: auto;}
.task h4 span{color: #D52500;}
.task .list{ margin-left: -8px; margin-right: -8px; display: flex; align-items: flex-start; justify-content: center; }
.task .list .item{width: 25%; margin-bottom: 15px; }
.task .list .item .img{ margin: 0 auto 6px; display: flex; align-items: center;justify-content: center; width: 70px; height: 70px;background: #2B231B;border-radius: 4px; }
.task .list .item .img img{max-width: 80%; max-height: 80%; }
.task .list .item p{font-size: 10px; width: 70px; margin: 0 auto; line-height: 14px; color: #D6C2A1; text-align: center; }
.task h5{font-size: 10px; color: #92867B; line-height: 10px; text-align: center; margin-top: 0; margin-bottom: 0px; }
.task button{ position: absolute; left: 50%; margin-left: -51px; bottom: -15px; height: 30px; background: none; padding: 0; outline: none; border: none; line-height: 0; }
.task button img{height: 100%;}
.awards{margin-top: 22px;}
.awards.on{background: url(../images/bg11.png) no-repeat top center; background-size: 100% auto; }
.navbar2{position: relative; line-height: 0; width: 58%; margin: 0 auto 4px; }
.navbar2 img{width: 100%;}
.navbar2 .list{position: absolute; display: flex; align-items: center; width: 100%; height: 100%; left:0; top: 0; }
.navbar2 .list .item{flex: 1; height: 100%; }
.task2{background: url(../images/bg2.png) no-repeat center; background-size: 100% 100%;margin-top: 0;}
.task2 .list{margin-top: 10px;}
.people_con{ margin-top: 28px; background: url(../images/bgm.png) repeat-y center; background-size: 100% auto; }
.people_con .top{ background: url(../images/bgt.png) no-repeat top center; background-size: 100% auto; }
.people_con .top.bg{ position: relative; }
.people_con .top.bg::before{position: absolute; z-index: 0; background: url(../images/bg15.png) no-repeat top center; background-size: 100% auto; width: 100%; height: 200px; display: block; left: 0; top: 0; content: ''; }
.timesDown { position: relative; padding-top: 32px; font-size: 11px; color: #D6C2A1; padding-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.timesDown span{font-size: 12px; margin: 0 6px; color: #F8D996; width: 20px; height: 20px; background: url(../images/bg6.png) no-repeat center; background-size: 100% 100%; display: flex; align-items: center; justify-content: center; }
.people_con .rank{margin-bottom: 25px;}
.people_con .rank .one{}
.people_con .rank .one .img{width: 203px; height: 153px; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto 4px; }
.people_con .rank .one .img::before{position: absolute; width: 100%; height: 100%; content: ''; display: block; left: 0; top: 0; background: url(../images/icon.png) no-repeat center; background-size: 100% 100%; }
.people_con .rank .one .img img{width: 106px; height: 106px; border-radius: 50%; }
.people_con .rank .one h4{height: 20px; text-align: center; background: url(../images/bg7.png) no-repeat center; background-size: auto 100%; font-size: 11px; color: #D6C2A1; margin-top: 0; margin-bottom: 5px; line-height: 20px; font-weight: 400; }
.people_con .rank .one p{line-height: 11px; margin-bottom: 6px; text-align: center; color: #D6C2A1; font-size: 11px; }
.people_con .rank .one1 p{font-size: 12px; }
.people_con .rank .flex{display: flex; align-items: start; justify-content: center; }
.people_con .rank .flex .item{width: 150px; height: 209px; margin: 0 10px; background: url(../images/bg3.png) no-repeat top center; background-size: 100% 100%; }
.people_con .rank .flex .item:nth-child(2){background: url(../images/bg4.png) no-repeat top center; background-size: 100% 100%;}
.people_con .rank .flex .item .img{ margin: 42px auto 15px; width: 65px; height: 65px; border-radius: 50%; border: 1px solid #F9DE71; }
.people_con .rank .flex .item .img img{width: 100%;height: 100%;border-radius: 50%;}
.people_con .rank .flex .item h4{height: 20px; text-align: center; background: url(../images/bg8.png) no-repeat center; background-size: auto 100%; font-size: 11px; color: #D6C2A1; margin-top: 0; margin-bottom: 8px; line-height: 20px; font-weight: 400; }
.people_con .rank .flex .item p{line-height: 11px; margin-bottom: 0px; text-align: center; color: #D6C2A1; font-size: 11px;}
.people_con .rank .flex1 .item p{margin-bottom: 6px}
.people_con .list{padding: 0 22px; position: relative; }
.people_con .list .header{ text-align: center; margin-bottom: 5px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; }
.people_con .list .header span{flex: 2; position: relative; font-size: 11px; color: #D6C2A1; }
.people_con .list .header span:nth-child(2){flex: 4;}
.people_con .list .header span:nth-child(3){flex: 2; display: flex; align-items: center; justify-content: flex-end; }
.people_con .list .header span:nth-child(3).t{flex: 2;font-size: 8px;}
.people_con .list .header span:nth-child(4){flex: 3; display: flex; align-items: center; justify-content: flex-end; }
.people_con .list .header span .icon{width: 12px; height: 12px; margin-right: 10px; margin-left: 12px; }
.people_con .list .header span .info{position: absolute; width: 176px; height: 80px; right: 0; top: 24px; z-index: 1}
.people_con .list ul{list-style: none; padding: 0 0 120px; margin: 0; }
.people_con .list ul li{display: flex; align-items: center; padding: 12px 0; }
.people_con .list ul li .num{flex: 2; font-size: 12px; color: #D6C2A1; display: flex; align-items: center; justify-content: center; }
.people_con .list ul li .num img{width: 34px;height: 34px;}
.people_con .list ul li .user{flex: 4; display: flex; align-items: center; font-size: 12px; color: #D6C2A1;}
.people_con .list ul li .user .img{width: 44px;height: 44px; position: relative; margin-right: 24px; border-radius: 50%; line-height: 0; border: 1px solid #F8CB93;}
.people_con .list ul li .user .img img{width: 100%;height: 100%;border-radius: 50%;}
.people_con .list ul li .user .img span{position: absolute; width: 14px; height: 14px; right: 0; bottom: 0; background: url(../images/icon_play.png) no-repeat top center; background-size: 100% 100%; }
.people_con .list ul li .coin{flex: 2;font-size: 12px; text-align: center; color: #D6C2A1;}
.people_con .list ul li .coin3{flex: 2}
.people_con .list ul li .coin4{flex: 3}
.people_con .list ul li:nth-last-child(1){position: fixed; z-index: 3; background: url(../images/bg1.png) no-repeat center; background-size: 100% 100%; padding: 45px 22px 30px; width: 100%; box-sizing: border-box; left: 0; bottom: 0; }
.dates{overflow-x: scroll; margin: 14px 8px 8px; }
.dates::-webkit-scrollbar{display: none;}
.dates .list{display: flex; align-items: center; }
.dates .list span{width: 47px; height: 22px; display: flex; align-items: center; justify-content: center; margin-right: 4px; font-size: 11px; color: #E2D1BF; background: url(../images/bg9.png) no-repeat center; background-size: 100% 100%; }
.dates .list span.on{ color: #03060A; background: url(../images/bg10.png) no-repeat center; background-size: 100% 100%; }
.fiximg{line-height: 0; margin-top: 18px; padding: 0 13px; }
.fiximg img{width: 100%;}
.awards .rank2{margin-bottom: 18px; }
.awards .rank2 .one .img{width: 278px; height: 172px; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto 10px; }
.awards .rank2 .one .img::before{position: absolute; width: 100%; height: 100%; content: ''; display: block; left: 0; top: 0; background: url(../images/icon2.png) no-repeat center; background-size: 100% 100%; }
.awards .rank2 .one .img img{width: 86px; height: 86px; margin-top: 44px; border-radius: 50%; }
.awards .rank2 .one h4{height: 14px; text-align: center; background: url(../images/bg14.png) no-repeat center; background-size: auto 100%; font-size: 14px; color: #FFF0D7; margin-top: 0; margin-bottom: 8px; line-height: 14px; font-weight: 400; }
.awards .rank2 .one p{line-height: 12px; margin-bottom: 22px; text-align: center; color: #FFF0D7; font-size: 11px; }
.awards .rank2 .flex{display: flex; align-items: start; justify-content: center; }
.awards .rank2 .flex .item{width: 165px; height: 216px; margin: 0 10px; background: url(../images/bg13.png) no-repeat top center; background-size: 100% 100%; }
.awards .rank2 .flex .item:nth-child(2){background: url(../images/bg12.png) no-repeat top center; background-size: 100% 100%;}
.awards .rank2 .flex .item .img{ margin: 66px auto 15px; width: 65px; height: 65px; border-radius: 50%; border: 1px solid #F9DE71; }
.awards .rank2 .flex .item .img img{width: 100%;height: 100%;border-radius: 50%;}
.awards .rank2 .flex .item h4{height: 20px; text-align: center; background: url(../images/bg14.png) no-repeat center; background-size: auto 100%; font-size: 11px; color: #D6C2A1; margin-top: 0; margin-bottom: 8px; line-height: 20px; font-weight: 400; }
.awards .rank2 .flex .item p{line-height: 11px; margin-bottom: 0px; text-align: center; color: #D6C2A1; font-size: 11px;}
.people_con .top2{ background: url(../images/bg18.png) no-repeat top center; background-size: 100% auto; }
.people_con .top2 .rank .one .img::before{display: none;}
.people_con .top .rank3 .one{margin-bottom: 14px;}
.people_con .top .rank3 .one .img{height: auto; width: 48.5%; position: relative; }
.people_con .top .rank3 .one .img .bg{width: 100%; height: auto; border-radius: 0; position: relative; z-index: 2; }
.people_con .top .rank3 .one .img .tx{position: absolute; width: 60%; height: auto; top: 14%;}
.people_con .rank3 .one h4{background: none; color: #FFF0D7; margin-bottom: 8px; margin-top: 9px; height: auto; line-height: 11px; }
.people_con .rank3 .one1 h4{font-size:14px}
.people_con .rank3 .one p{margin-bottom: 0; color: #FFF0D7;}
.people_con .rank3 .one .text{ height: 54px; padding-top: 1px; background: url(../images/bg17.png) no-repeat center; background-size: auto 100%;} 
.people_con .rank3 .one1 .text{ height: 73px;}
.people_con .rank3 .flex .item{width: 150px; height: 232px; margin: 0 12px; background: url(../images/bg16.png) no-repeat top center; background-size: 100% 100%;}
.people_con .rank3 .flex .item:nth-child(2){background: url(../images/bg16.png) no-repeat top center; background-size: 100% 100%;}
.people_con .rank3 .flex .item .img{margin: 72px auto 18px;}
.title2{line-height: 0; text-align: center; margin-top: 16px; margin-bottom: 9px; }
.title2 img{height: 24px;}
.famliybox{ height: 100px; padding-top: 15px; box-sizing: border-box; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 16px; font-size: 10px; color: #D6C2A1; background: url(../images/bg19.png) no-repeat center; background-size: 100% 100%;}
.famliyContent{}
.famliyContent header{ margin-top: 6px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; height: 32px; }
.famliyContent header span{width: 23%; display: flex; align-items: center; justify-content: center; height: 100%;background: url(../images/bg23.png) no-repeat top center; background-size: 100% 100%; font-size: 11px; color: #D6C2A1; }
.famliyContent header span.on{ color: #6D1300; background: url(../images/bg20.png) no-repeat top center; background-size: 100% 100%;}
.famliyContent .famliy{background: url(../images/bgm2.png) repeat-y top center; background-size: 100% auto;}
.famliyContent .famliy .bgtop{background: url(../images/bgt2.png) no-repeat top center; background-size: 100% auto;}
.famliyContent .famliy .tit{ padding-top: 8px; text-align: center; }
.famliyContent .famliy .tit img{width: 26%;}
.famliyContent .famliy .header{ font-size: 11px; text-align: center; color: #D6C2A1; width: 90%; margin: 10px auto 6px; height: 24px;background: rgba(255, 255, 255, 0.07);border-radius: 12px;display: flex; align-items: center; }
.famliyContent .famliy .header span:nth-child(1){flex: 2;}
.famliyContent .famliy .header span:nth-child(2){flex: 6;}
.famliyContent .famliy .header span:nth-child(3){flex: 2.5;}
.famliyContent .famliy ul{list-style: none; padding: 40px 0 0; margin: 0;background: url(../images/bg22.png) no-repeat top center; background-size: 94% 188px; }
.famliyContent .famliy ul li{display: flex; align-items: center; padding: 12px 0; }
.famliyContent .famliy ul li:nth-child(3){margin-top: 16px;}
.famliyContent .famliy ul li .num{flex: 2; font-size: 12px; color: #D6C2A1; display: flex; align-items: center; justify-content: center; }
.famliyContent .famliy ul li .num img{width: 34px;height: 34px;}
.famliyContent .famliy ul li .user{flex: 4; display: flex; align-items: center; font-size: 12px; color: #D6C2A1;}
.famliyContent .famliy ul li .user .img{width: 44px;height: 44px; position: relative; margin-right: 24px; border-radius: 50%; line-height: 0; border: 1px solid #F8CB93;}
.famliyContent .famliy ul li .user .img img{width: 100%;height: 100%;border-radius: 50%;}
.famliyContent .famliy ul li .coin{flex: 2.5;font-size: 12px; text-align: center; color: #D6C2A1;}
.famliyContent .pkfamliy{ padding-bottom: 1px; background: url(../images/bgm2.png) repeat-y top center; background-size: 100% auto;}
.famliyContent .pkfamliy .bgtop{background: url(../images/bgt2.png) no-repeat top center; background-size: 100% auto;}
.famliyContent .pkfamliy .tit{ line-height: 0; padding-top: 7px; text-align: center; }
.famliyContent .pkfamliy .tit img{width: 36%;}
.famliyContent .pkfamliy .header{margin-top: 18px; margin-bottom: 14px; text-align: center; line-height: 0; }
.famliyContent .pkfamliy .header img{height: 22px;}
.famliyContent .pkfamliy ul{list-style: none; padding: 0px 22px 0; margin: 0;}
.famliyContent .pkfamliy ul li{margin-bottom: 20px; position: relative; display: flex; justify-content: space-between; padding: 15px 0; background: url(../images/bg21.png) no-repeat center; background-size: 100% 100%; }
.famliyContent .pkfamliy ul li .item{display: flex; width:35%; flex-direction: column; justify-content: center; align-items: center; }
.famliyContent .pkfamliy ul .img{ position: relative; width: 44px;height: 44px; border-radius: 50%; line-height: 0; border: 1px solid #F8CB93;}
.famliyContent .pkfamliy ul .img img{width: 100%;height: 100%;border-radius: 50%;}
.famliyContent .pkfamliy ul h4{ margin-top: 11px; margin-bottom: 9px; font-size: 12px; color: #D6C2A1; font-weight: 400; line-height: 12px; }
.famliyContent .pkfamliy ul p{ margin-top: 0px; margin-bottom: 0px; font-size: 12px; color: #D6C2A1; line-height: 12px; }
.famliyContent .pkfamliy ul .img span{position: absolute; width: 14px; height: 14px; right: 0; bottom: 0; background: url(../images/icon_play.png) no-repeat top center; background-size: 100% 100%; }
.famliyContent .pkfamliy .iconpk{width: 27px; height: 27px; position: absolute; top: 0; }
.famliyContent .pkfamliy ul li .item:nth-child(1) .iconpk{left: 0;}
.famliyContent .pkfamliy ul li .item:nth-child(2) .iconpk{right: 0;}
.famliyContent .pkfamliy .iconpk.win{background: url(../images/w.png) no-repeat center; background-size: 100% 100%; }
.famliyContent .pkfamliy .iconpk.fail{background: url(../images/f.png) no-repeat center; background-size: 100% 100%;}
.treasure{position: relative; line-height: 0; }
.treasure .bg{width: 100%;}
.treasure footer{ width: 90%; height: 6.6%; bottom: 1.8%; display: flex; align-items: center; justify-content: center; left: 5%; background: url(../images/bg25.png) no-repeat center; background-size: 100% 100%; font-size: 11px; color: #FDE8C9; position: absolute; }
.treasure footer span{margin-left: 30px;}
.treasure .topbtn{position: absolute; display: flex; justify-content: space-between; left: 0; top: 10.8%; padding: 0 6.6%; width: 100%; box-sizing: border-box; }
.treasure .topbtn img{width: 25%;}
.treasure .box{position: absolute; width: 49%; left: 25.5%; top: 21.7%; }
.treasure .box img{width: 100%; }
.treasure .box img.on{ animation: scale1 1s linear infinite;}
@keyframes scale1{
	0%{transform: scale(1)}
	50%{transform: scale(0.9)}
	100%{transform: scale(1)}
}
.treasure .btns{position: absolute; left: 0; top: 71%; display: flex; align-items: center; justify-content: center; width: 100%; }
.treasure .btns button{width: 40.5%; padding: 0; background: none; border: none; margin: 0 1%; }
.treasure .btns button img{width: 100%; display: block; }
.treasure .btns button p{text-align: center; margin-top: -5px; font-size: 12px; color: #A48977; }
.getTreasureBox{ display: flex; align-items: flex-end; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);z-index: 999999}
.getTreasureBox .box{line-height: 0; position: relative; width: 100%; }
.getTreasureBox .box .bg{width: 100%;}
.getTreasureBox .box .list{height: 88%; position: absolute; top: 12%; left: 0; width: 100%; overflow-y: scroll; padding: 0 16px; }
.getTreasureBox .box .list .item{display: flex; margin-bottom: 14px; background: url(../images/bg27.png) no-repeat center; background-size: 100% 100%; padding: 12px 12px 12px 10px; align-items: center; position: relative}
.getTreasureBox .box .list .item .img{ display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
.getTreasureBox .box .list .item .img img{max-width: 100%; max-height: 100%; }
.getTreasureBox .box .list .item .text{margin-left: 18px; padding-right: 14px; }
.getTreasureBox .box .list .item .text h4{font-size: 11px; font-weight: 400; line-height: 15px; color: #D6C2A1; margin-top: 0; margin-bottom: 8px; }
.getTreasureBox .box .list .item .text p{font-size: 11px; line-height: 12px; color: #D6C2A1; margin-bottom: 0; }
.getTreasureBox .box .list .item button{padding: 0; line-height: 0; border: none; background: none; width: 48px; position: absolute;right: 4px;}
.getTreasureBox .box .list .item button img{width: 100%;}
.getTreasureBox .shadow,.getAwardsBox .shadow,.getRecordBox .shadow,.congratulationsbox .shadow,.firstbox .shadow{position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.getAwardsBox { z-index: 99; display: flex; align-items: flex-end; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
.getAwardsBox .box{line-height: 0; position: relative; width: 100%; }
.getAwardsBox .box .bg{width: 100%;}
.getAwardsBox .box .list{height: 89%; position: absolute; top: 11%; left: 0; width: 100%; overflow-y: scroll; padding: 0 16px; }
.getAwardsBox .box h4{margin-top: 0; font-weight: 400; line-height: 16px; text-align: center; font-size: 11px; color: #D6C2A1; }
.getAwardsBox .box header{ height: 32px;background: url(../images/bg28.png) no-repeat center; background-size: 100% 100%; display: flex; align-items: center; font-size: 11px; color: #D6C2A1;  }
.getAwardsBox .box header span{flex: 1; padding-left: 14px; padding-right: 0; }
.getAwardsBox .box header span:nth-child(3){flex: 3; text-align: right; padding-left: 0; padding-right: 8px; }
.getAwardsBox .box .item{display: flex; font-size: 11px; line-height: 16px;color: #D6C2A1; margin-bottom: 10px; background: url(../images/bg27.png) no-repeat center; background-size: 100% 100%; padding: 10px 0px; align-items: center;}
.getAwardsBox .box .item .time{flex: 1; padding-left: 14px; padding-right: 0; }
.getAwardsBox .box .item .num{flex: 1; padding-left: 14px; padding-right: 0;}
.getAwardsBox .box .item .gifts{flex: 3; overflow-y: scroll; padding-left: 0; padding-right: 8px; }
.getAwardsBox .box .item .gifts .scroll{overflow-x: scroll; display: flex; align-items: center; }
.getAwardsBox .box .item .gifts .scroll::-webkit-scrollbar{display: none;}
.getAwardsBox .box .item .gifts .gift{width: 56px; margin-left: 6px; }
.getAwardsBox .box .item .gifts .gift .img{ margin: 0 auto 5px; width: 44px;height: 44px;background: #2B231B;border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.getAwardsBox .box .item .gifts .gift .img img{max-width: 80%; max-height: 80%; }
.getAwardsBox .box .item .gifts .gift p{margin-bottom: 0; font-size: 10px; color: #D6C2A1; line-height: 10px; }
.getRecordBox{display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
.getRecordBox .box{width: 351px; height: 401px; background: url(../images/bg26.png) no-repeat center; background-size: 100% 100%; }
.getRecordBox .box .list{ height: 78%; margin-top: 21%; overflow-y: scroll; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.getRecordBox .box .list::-webkit-scrollbar{display: none;}
.getRecordBox .box .list .item{width: 60px; margin: 0 11px 14px; }
.getRecordBox .box .list .img{ display: flex; align-items: center; justify-content: center; width: 60px;height: 60px;background: #2B231B;border-radius: 4px;}
.getRecordBox .box .list .img img{max-width: 80%; max-height: 80%; }
.getRecordBox .box .list p{ margin-bottom: 0; font-size: 10px; color: #D6C2A1; line-height: 14px; height: 28px; text-align: center; }
.getRecordBox button{padding: 0; display: block; margin: 35px auto 0; line-height: 0; border: none; background: none; width: 59px;}
.getRecordBox button img{width: 100%;}
.congratulationsbox{display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
.congratulationsbox .box{width: 351px; padding-top:76px; background: url(../images/bgt3.png) no-repeat top center; background-size: 100% auto;}
.congratulationsbox .box > img{width: 100%; margin-top: -14px; }
.congratulationsbox .box .list{ position: relative; background: url(../images/bgm3.png) repeat-y center; background-size: 100% auto;display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.congratulationsbox .box .list .item{width: 60px; margin: 0px 11px 14px; }
.congratulationsbox .box .list .img{ margin-bottom: 6px; display: flex; align-items: center; justify-content: center; width: 60px;height: 60px;background: #2B231B;border-radius: 4px;}
.congratulationsbox .box .list .img img{max-width: 80%; max-height: 80%; }
.congratulationsbox .box .list p{ margin-bottom: 0; font-size: 10px; color: #D6C2A1; line-height: 14px; height: 28px; text-align: center; }
.congratulationsbox button{padding: 0; margin-top: 16px; line-height: 0; border: none; background: none; width: 59px;}
.congratulationsbox button img{width: 100%;}
.firstbox{display: flex; flex-direction: column; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8);}
.firstbox .box{width: 346px; height:370px; position: relative; background: url(../images/img4.png) no-repeat center; background-size: 100% 100%;}
.firstbox .box h4{position: absolute; top: 52%; font-weight: 400; font-size: 14px; margin-top: 0; margin-bottom: 0; color: #FFD590; width: 100%; text-align: center; }
.firstbox .box .btns{position: absolute; left: 0; bottom: 20%; width: 100%;  display: flex; align-items: center; justify-content: center;}
.firstbox .box .btns button{padding: 0; line-height: 0; margin: 0 6px; border: none; background: none; width: 68px;}
.firstbox .box .btns button img{width: 100%;}
.navbar3{position: relative; line-height: 0; width: 58%; margin: 0 auto 4px; }
.navbar3 img{height: 26px;}
.navbar3 .list{display: flex; align-items: center; width: 100%; height: 100%; left:0; top: 0; justify-content:center}
.navbar3 .list .item{height: 100%; margin: 0 6px; }
.treasureAwards{padding: 0 12px;}
.treasureAwards .money{background: url(../images/gbg.png) no-repeat center; background-size: 100% 100%; font-size: 12px; height: 40px;  padding: 0 12px; color: #FDE8C9; display: flex; align-items: center;  }
.treasureAwards .money > img{width: 30px; height: 30px; margin-right: 8px; }
.treasureAwards .money button{padding: 0; margin-left: auto; line-height: 0; border: none; background: none; width: 68px;}
.treasureAwards .money button img{width: 100%;}
.treasureAwards section{margin-top: 12px; position: relative; margin-bottom: 18px; }
.treasureAwards section header{ padding-top: 28px; padding-bottom: 2px; text-align: center; background: url(../images/bgt4.png) no-repeat top center; background-size: 100% auto;}
.treasureAwards section header img{height: 20px;}
.treasureAwards section header p{line-height: 14px; font-size: 10px; color: #92867B;}
.treasureAwards section h4{margin-top: 0;  padding-top: 3px; padding-bottom: 12px; margin-bottom: 0; text-align: center; line-height: 14px; font-size: 10px; color: #92867B;background: url(../images/bgm4.png) repeat-y center; background-size: 100% auto; }
.treasureAwards section .list{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: url(../images/bgm4.png) repeat-y center; background-size: 100% auto;}
.treasureAwards section .list .item{width: 60px; margin: 0px 11px 14px; }
.treasureAwards section .list .img{ margin-bottom: 6px; display: flex; align-items: center; justify-content: center; width: 60px;height: 60px;background: #2B231B;border-radius: 4px;}
.treasureAwards section .list .img img{max-width: 80%; max-height: 80%; }
.treasureAwards section .list p{ margin-bottom: 0; font-size: 10px; color: #D6C2A1; line-height: 14px; text-align: center; }
.treasureAwards section .f{width: 100%; margin-top: -14px; }
.treasureAwards section button{padding: 0; position: absolute;bottom: -9px; left: 50%; margin-left: -46px; line-height: 0; border: none; background: none; width: 92px;}
.treasureAwards section button img{width: 100%;}
.fixbtns{position: fixed; right: 5px; top: 25%; z-index: 2; width: 35px; }
.fixbtns img,.fixbtns2 img{width: 100%; margin-bottom: 2px; }
.fixbtns2{position: fixed; right: 0px; top: 15%; z-index: 2; width: 70px; }
.awardsContent{ margin-top: 11px; padding-top: 1px; position: relative; background: url(../images/bgm5.png) repeat-y center; background-size: 100% auto; }
.awardsContent::before{content: ''; display: block; width: 100%; height: 120px; position: absolute; left: 0; top: -20px; background: url(../images/bgt5.png) no-repeat top center; background-size: 100% auto; }
.awardsContent .f{width: 100%;}
.awards-navbar{padding: 0 16px; position: relative; margin-top: -29px; }
.awards-navbar .atitle1{display: flex; margin-bottom: 13px; justify-content: center; align-items: center; }
.awards-navbar .atitle1 .item{width: 140px; margin: 0 4px; }
.awards-navbar .atitle1 .item img{width: 100%;}
.awards-navbar .atitle2{display: flex; margin-bottom: 15px; align-items: center; justify-content: space-between; }
.awards-navbar .atitle2 span{width: 65px; height: 30px; font-size: 11px; color:#D6C2A1; display: flex; align-items: center; justify-content: center; background: url(../images/abg1.png) no-repeat center; background-size: 100% 100%; }
.awards-navbar .atitle2 span.on{ color: #03060A; background: url(../images/abg1_on.png) no-repeat center; background-size: 100% 100%; }
.awards-navbar .atitle3{display: flex; margin-bottom: 15px; align-items: center; justify-content: center; }
.awards-navbar .atitle3 span{width: 56px; height: 20px; font-size: 11px; color:#D6C2A1; margin: 0 3px; display: flex; align-items: center; justify-content: center; background: url(../images/abg2.png) no-repeat center; background-size: 100% 100%; }
.awards-navbar .atitle3 span.on{ color: #03060A; background: url(../images/abg2_on.png) no-repeat center; background-size: 100% 100%; }
.awardsContent > .list{padding: 0 16px;}
.awardsContent > .list h4{margin-top: 0; font-weight: 400;  padding-top: 6px; padding-bottom: 12px; margin-bottom: 0; text-align: center; line-height: 14px; font-size: 10px; color: #D6C2A1;background: url(../images/bgm6.png) repeat-y center; background-size: 100% auto; }
.awardsContent > .list section{margin-bottom: 10px;}
.awardsContent > .list section header{ padding-top: 28px; padding-bottom: 2px; text-align: center; background: url(../images/bgt6.png) no-repeat top center; background-size: 100% auto;}
.awardsContent section header img{height: 20px;}
.awardsContent section .list{ display: flex; background: url(../images/bgm6.png) repeat-y center; background-size: 100% auto;flex-wrap: wrap; align-items: center; justify-content: center;align-items: flex-start}
.awardsContent section .list .item{width: 60px; margin: 0px 11px 14px; }
.awardsContent section .list .img{ margin-bottom: 6px; display: flex; align-items: center; justify-content: center; width: 60px;height: 60px;background: #2B231B;border-radius: 4px;}
.awardsContent section .list .img img{max-width: 80%; max-height: 80%; }
.awardsContent section .list p{ margin-bottom: 0; font-size: 10px; color: #D6C2A1; line-height: 14px; text-align: center; }
.awardsContent section .f{width: 100%; display: block; margin: 0 auto; }
.rulecontent{padding: 0 20px 1px; position: relative; }
.rulecontent p{font-size: 11px; margin-top: 8px; margin-bottom: 16px; color: #D6C2A1; line-height: 20px; }
.rulecontent h4{text-align: center; margin-bottom: 16px; }
.rulecontent h4 img{height: 20px;}
.rulecontent h5{line-height: 19px; text-align: center; font-size: 11px; color: #D6C2A1; background: url(../images/rbg.png) no-repeat center; background-size: auto 100%;}

.christmas{background: #1D110F;}
.christmas .banner{position: relative;}
.christmas .banner .cnavbar{width: 100%; box-sizing: border-box; padding: 0 1%; display: flex; align-items: center; position: absolute;left: 0; bottom: 0; }
.christmas .banner .cnavbar .item{flex: 1; padding: 0 0.5%; }
.christmas .banner .cnavbar .item img{width:100%;}
.christmas .timesDown{padding-top: 12px; padding-bottom: 0; color: #FFF0E0; margin-bottom: 5px; }
.cyxbd .bg{background: url(../images/sbgm1.png) repeat-y center; background-size: 100% auto;}
.cyxbd .rank{margin-bottom: 25px; padding-top: 50px; background: url(../images/sbgt1.png) no-repeat top center; background-size: 100% auto; }
.cyxbd .rank .one{}
.cyxbd .rank .one .img{width: 347px; height: 164px; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto 4px; }
.cyxbd .rank .one .img::before{position: absolute; width: 100%; height: 100%; content: ''; display: block; left: 0; top: 0; background: url(../images/sicon.png) no-repeat center; background-size: 100% 100%; }
.cyxbd .rank .one .img img{width: 106px; height: 106px; border-radius: 50%; }
.cyxbd .rank .one .text{background: url(../images/sbg4.png) no-repeat center; background-size: auto 100%;}
.cyxbd .rank .one h4{ padding-top: 10px; text-align: center; font-size: 14px; color: #FFF0E0; margin-top: 0; margin-bottom: 8px; line-height: 14px; font-weight: 400; }
.cyxbd .rank .one p{line-height: 12px; margin-bottom: 0px; padding-bottom: 10px; text-align: center; color: #FFF0E0; font-size: 12px; }
.cyxbd .rank .flex{display: flex; align-items: start; justify-content: center; }
.cyxbd .rank .flex .item{width: 150px; height: 209px; margin: 0 10px; background: url(../images/sbg2.png) no-repeat top center; background-size: 100% 100%; }
.cyxbd .rank .flex .item:nth-child(2){background: url(../images/sbg3.png) no-repeat top center; background-size: 100% 100%;}
.cyxbd .rank .flex .item .img{ margin: 42px auto 15px; width: 65px; height: 65px; border-radius: 50%; border: 1px solid #F9DE71; }
.cyxbd .rank .flex .item .img img{width: 100%;height: 100%;border-radius: 50%;}
.cyxbd .rank .flex .item h4{height: 20px; text-align: center; background: url(../images/bg8.png) no-repeat center; background-size: auto 100%; font-size: 11px; color: #FFF0E0; margin-top: 0; margin-bottom: 8px; line-height: 20px; font-weight: 400; }
.cyxbd .rank .flex .item p{line-height: 11px; margin-bottom: 0px; text-align: center; color: #FFF0E0; font-size: 11px;}
.cyxbd .list{padding: 0 22px; position: relative; }
.cyxbd .list .header{ text-align: center; margin-bottom: 5px; height: 24px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); display: flex; align-items: center; }
.cyxbd .list .header span{flex: 2; position: relative; font-size: 11px; color: #FFF0E0; }
.cyxbd .list .header span:nth-child(2){flex: 4;}
.cyxbd .list .header span:nth-child(3){flex: 2; display: flex; align-items: center; justify-content: flex-end; }
.cyxbd .list .header span .icon{width: 12px; height: 12px; margin-right: 10px; margin-left: 12px; }
.cyxbd .list .header span .info{position: absolute; width: 176px; height: 80px; right: 0; top: 24px; }
.cyxbd .list ul{list-style: none; padding: 0 0 120px; margin: 0; }
.cyxbd .list ul li{display: flex; align-items: center; padding: 12px 0; }
.cyxbd .list ul li .num{flex: 2; font-size: 12px; color: #FFF0E0; display: flex; align-items: center; justify-content: center; }
.cyxbd .list ul li .num img{width: 34px;height: 34px;}
.cyxbd .list ul li .user{flex: 4; display: flex; align-items: center; font-size: 12px; color: #FFF0E0;}
.cyxbd .list ul li .user .img{width: 44px;height: 44px; position: relative; margin-right: 24px; border-radius: 50%; line-height: 0; border: 1px solid #F8CB93;}
.cyxbd .list ul li .user .img img{width: 100%;height: 100%;border-radius: 50%;}
.cyxbd .list ul li .user .img span{position: absolute; width: 14px; height: 14px; right: 0; bottom: 0; background: url(../images/icon_play.png) no-repeat top center; background-size: 100% 100%; }
.cyxbd .list ul li .coin{flex: 2;font-size: 12px; text-align: center; color: #FFF0E0;}
.cyxbd .list ul li:nth-last-child(1){position: fixed; z-index: 3; background: url(../images/sbg.png) no-repeat center; background-size: 100% 100%; padding: 45px 22px 30px; width: 100%; box-sizing: border-box; left: 0; bottom: 0; }
.sdhl{margin-top: 12px;}
.sdhl section{line-height: 0; margin-bottom: 20px; position: relative; }
.sdhl .bg{width: 100%;}
.sdhl section h4{position: absolute; margin: 0; top: 22%; font-size: 10px; color: #F6CFA3; font-weight: 400; width: 100%; left:0; text-align: center; }
.sdhl section p{position: absolute; margin-bottom: 0; top: 48%; font-size: 10px; color: #9C1007; width: 100%; left:0; text-align: center;}
.sdhl section button{position: absolute; top: 53%; background: none; padding: 0; border: none; margin: 0; width: 100%; left:0; text-align: center;}
.sdhl section button img{width:38%}
.sdhl section ul{position: absolute; margin-bottom: 0; font-size: 12px; color: #FFF0E0; padding: 0; list-style: none; border: 1px solid #9B4E48; line-height: 42px; width: 86%; left:7%; top:23%; }
.sdhl section ul li{ display: flex; align-items: center; border-bottom: 1px solid #9B4E48;}
.sdhl section ul li:nth-last-child(1){border-bottom: none;}
.sdhl section ul li span{width: 96px; margin-right: 20px; box-sizing: border-box; line-height: 42px; padding-left: 25px;  border-right: 1px solid #9B4E48; }
.cyxjl section{ background: url(../images/sbg_one.png) no-repeat center; background-size: 100% 100%;}
.cyxjl section:nth-child(2){ background: url(../images/sbg_two.png) no-repeat center; background-size: 100% 100%;}
.cyxjl section:nth-child(3){ background: url(../images/sbg_three.png) no-repeat center; background-size: 100% 100%;}
.cyxjl section .list{ padding-top: 115px; padding-bottom: 35px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; align-items: flex-start}
.cyxjl section .list .item{width: 26%; margin: 0 1.5% 20px; }
.cyxjl section .list .item .box{position: relative; line-height: 0; }
.cyxjl section .list .item .box .bg{width: 100%;}
.cyxjl section .list .item .img{position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; }
.cyxjl section .list .item .img img{max-width: 50%; max-height: 45%; margin-top: 10%; }
.cyxjl section .list p{margin-bottom: 0; font-size: 11px; line-height: 16px; text-align: center; color: #FFF0E0; }
.sdgz .fix{width: 100%;  }
.sdgz article{ padding: 5px 7% 1px; margin-top: -4px; background: url(../images/sbgm2.png) repeat-y center; background-size: 100% auto;}
.sdgz article img{height: 20px; display: block; margin: 0 auto 15px; }
.sdgz article p{font-size: 11px; margin-bottom: 15px; line-height: 20px; color: #F6CFA3; }


[v-cloak] {display: none;}


.navbar3{width: 100%;text-align:center}
.dayAwards{padding: 0 12px;}
.dayAwards .money{background: url(../images/gbg.png) no-repeat center; background-size: 100% 100%; font-size: 12px; height: 40px;  padding: 0 12px; color: #FDE8C9; display: flex; align-items: center;  }
.dayAwards .money > img{width: 30px; height: 30px; margin-right: 8px; }
.dayAwards .money button{padding: 0; margin-left: auto; line-height: 0; border: none; background: none; width: 68px;}
.dayAwards .money button img{width: 100%;}
.dayAwards .dayTit{ margin-bottom: 18px; display: flex; align-items: center; justify-content: center; }
.dayAwards .dayTit span{font-size: 12px; margin: 0 20px; display: flex; align-items: center; justify-content: center; width: 65px; height: 30px; background: url(../images/abg1.png) no-repeat center; background-size: 100% 100%; color: #D6C2A1; }
.dayAwards .dayTit span.on{color: #03060A; background: url(../images/abg1_on.png) no-repeat center; background-size: 100% 100%; }
.dayAwards h5{font-size: 11px; margin-bottom: 12px; color: #92867B; margin-top: 8px; text-align: center; line-height: 16px; }
.dayAwards .gifts header{padding-top: 26px; position: relative; text-align: center; background: url(../images/bgt4.png) no-repeat top center; background-size: 100% auto;}
.dayAwards .gifts header > img {height: 22px; text-align: center;}
.dayAwards .gifts header a{position: absolute; right: 16px; top: 26px; }
.dayAwards .gifts header a img{width: 84px; height: 30px; }
.dayAwards .gifts .tit-area{margin-top: 0; font-weight: 400; color: #92867B; text-align: center; font-size: 10px; line-height: 14px; margin-bottom: 0;background: url(../images/bgm4.png) repeat-y center; background-size: 100% auto;}
.dayAwards .gifts .list{ padding: 20px 10% 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: url(../images/bgm4.png) repeat-y center; background-size: 100% auto;}
.dayAwards .gifts .list .item .img{width: 60px;height: 60px; display: flex; align-items:center; justify-content: center; margin: 0 12px; background: #2B231B;border-radius: 4px;}
.dayAwards .gifts .list .item .img img{max-width: 80%; max-height: 80%; }
.dayAwards .gifts .list .item h4{font-size: 10px; color: #D6C2A1; text-align: center; margin-top: 8px; margin-bottom: 0; line-height: 14px; }
.dayAwards .gifts .list .item p{font-size: 10px; color: #D6C2A1; text-align: center; margin-bottom: 16px; line-height: 14px;}
.dayAwards  .f{width: 100%; margin-top: -15px; }
.dayAwards .bg{ padding-top: 1px; position: relative; text-align: center; background: url(../images/bgm4.png) repeat-y center; background-size: 100% auto;}
.dayAwards .bg p{margin-bottom: 0; font-size: 12px; color: #D6C2A1; line-height: 17px; margin-bottom: 0; }
.dayAwards .bg p span{color: #FFFFFF;}
.dayAwards .bg button{border: none; padding: 0; background: none; width: 25%; display: block; margin: 4px auto 4px; }
.dayAwards .bg button img{width: 100%;}
.dayAwards section{margin-bottom: 12px;}
.dayAwardsBox{position: fixed; width: 100%; height: 100%; line-height: 0; display: flex; align-items: flex-end; justify-content: center; left: 0; top: 0; z-index: 10; background: rgba(0, 0, 0, 0.8); }
.dayAwardsBox .box{width: 100%; position: relative; }
.dayAwardsBox .box .bg{width: 100%;}
.dayAwardsBox .box p{font-size: 11px; color: #D6C2A1; position: absolute; text-align: center; left: 0; top: 12%; width: 100%; }
.dayAwardsBox .box header{position: absolute; font-size: 11px; color: #D6C2A1; width: 90%; left: 5%; top: 15%; height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 4%; background: url(../images/dbg2.png) no-repeat center; background-size: 100% 100%; }
.dayAwardsBox .box ul{position: absolute; height: 74%; overflow-y: scroll;font-size: 11px; padding: 0; margin: 0; color: #D6C2A1; width: 82%; left: 9%; top: 22%; }
.dayAwardsBox .box li{ border-bottom: 1px solid rgba(214,194,161,0.1); line-height: 17px; padding: 12px 0; font-size: 12px; color: #D6C2A1; display: flex; align-items: center; justify-content: space-between; }