body{background: #000;}
.banner,.fixed{line-height: 0;}
.banner img{width: 100%;}
.navbar{line-height: 0; padding: 0 3px; }
.navbar .mui-col-xs-3{padding: 0 3px;}
.navbar img{width: 100%;}
.fixed{position: relative;}
.fixed img{width: 100%;}
.fixed .mui-row{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.fixed .mui-row .mui-col-xs-4{height: 100%;}
.indextitle{margin-top: 6px; position: relative; }
.indextitle .mui-row{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.indextitle .mui-col-xs-6{height: 100%;}
.times{overflow-x: scroll; margin-top: 12px; width: calc(100% - 16px); margin-left: 8px; }
.times::-webkit-scrollbar{width: 0; height: 0;}
.times .list{display: flex; align-items: center; }
.times span{width: 52px; height: 24px; margin-right: 6px; font-size: 12px; color: #FFBD9A; display: flex; align-items: center; justify-content: center; background: url(../images/bg10.png) no-repeat center; background-size: 100% 100%;  }
.times span.on{background: url(../images/bg7.png) no-repeat center; background-size: 100% 100%;}
.index_bg1{background: url(../images/bg6.png) no-repeat top center; background-size: 100% auto; }
.content{ position: relative; margin-top: 12px; padding: 30px 24px 80px; background: url(../images/bgt.png) no-repeat top center; background-size: 100% auto;}
.content .tit{height: 40px; margin: 10px 0; text-align: center; position: relative; }
.content .tit img{text-align: center; height: 100%;}
.content .tit .helpBtn{margin-left: auto; width: 20px; height: 20px; position: absolute; right: 8px; top: 10px; display: block; background: url(../images/icon2.png) no-repeat center; background-size: 100% 100%; }
.content .tit .helpBtn .text{position: absolute; font-size: 11px; padding-left: 18px; padding-top: 22px; text-align: left; line-height: 16px; color: #E8D7C8; top: 25px; right: -7px; width: 168px; height: 86px; background: url(../images/bg13.png) no-repeat center; background-size: 100% 100%; }
.process{display: flex; align-items: center; width: 85%; margin: 0 auto; }
.process .line{width: calc(100% - 60px); height: 24px; position: relative; background: url(../images/bg.png) no-repeat center; background-size: 100% 100%; }
.process .line .pro{position: absolute; height: 100%; left: 0; top: 0; background: url(../images/bg2.png) no-repeat left center; background-size: auto 100%; }
.process span{font-size: 11px; color: #FFE0BE; margin-left: auto; }
.indextip{ padding: 18px; margin-top: 12px; display: flex; align-items: center; background: url(../images/bg12.png) no-repeat center; background-size: 100% 100%;}
.indextip .left{width: 42%;}
.indextip .left img{height: 28px;}
.indextip .left p{font-size: 10px; color: #FFE0BE; line-height: 12px; }
.indextip .right{width: 58%;display: flex; justify-content: space-evenly;}
.indextip .right .item{display: flex; flex-direction: column; align-items: center; }
.indextip .right .img{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: url(../images/bg3.png) no-repeat center;  background-size: 100% 100%; }
.indextip .right .img img{max-width: 85%; max-height: 85%; }
.indextip .right p{margin-top: 8px; color: #FFE0BE; font-size: 11px; }

.ranktop{ position: relative; background: url(../images/bg11.png) no-repeat top center; padding: 11px 8px 26px; background-size: 100% 100%; margin-bottom: 18px; }
.ranktop .mui-col-xs-4{padding: 0 8px;}
.ranktop .mui-col-xs-4 .img{width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: url(../images/bg3.png) no-repeat center;  background-size: 100% 100%; }
.ranktop .mui-col-xs-4 .img img{max-width: 85%; max-height: 85%; }
.ranktop .mui-col-xs-4 p{margin-top: 10px; text-align: center; line-height: 14px; color: #FFE0BE; font-size: 11px;}
.ranktop h4{position: absolute; color: #FFE09F; font-size: 11px; text-align: center; line-height: 28px; background: url(../images/bg9.png) no-repeat top center; background-size: 100% 100%; height: 28px; width: 80%; left: 10%; bottom: -14px; }
.topusers{background: url(../images/bg8.png) no-repeat bottom center; background-size: 125% auto; padding-bottom: 40px; }
.topusers .img{width: 132px; height: 100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.topusers .one .img{width: 212px; height: 136px;background: url(../images/one.png) no-repeat top center; background-size: 100% 100%; }
.topusers .two .img{background: url(../images/two.png) no-repeat top center; background-size: 100% 100%;}
.topusers .three .img{background: url(../images/three.png) no-repeat top center; background-size: 100% 100%;}
.topusers .img img{border-radius: 50%; width: 64px; height: 64px; }
.topusers .one .img img{ width: 80px; height: 80px;}
.topusers h4{font-size: 12px; color: #FFE09F; text-align: center; }
.topusers p{color: #E8D7C8; margin-bottom: 6px; font-size: 12px; text-align: center; }
.topusers .flex{display: flex; align-items: center; justify-content: space-between; }

.indexlist{list-style: none; padding: 0; margin: -30px 0 30px; }
.indexlist li{padding: 12px 7px; border-bottom: 1px solid rgba(79, 63, 47, 0.64); position: relative; display: flex; align-items: center; }
.indexlist li .num{width: 34px; height: 34px; position: absolute; left: 7px; top: 25px; line-height: 30px; text-align: center; font-size: 15px; color: #000000; background: url(../images/icon3.png) repeat center; background-size: 100% 100%; }
.indexlist li .info{margin-left: 51px;}
.indexlist li h4{font-size: 14px; color: #FFE09F; margin-top: 0; margin-bottom: 6px; font-weight: 400; }
.indexlist li p{font-size: 12px; color: #E8D7C8; margin-bottom: 0; }
.indexlist li .img{width: 66px; height: 66px; position: relative; box-sizing: border-box; padding-left: 6px; padding-top: 6px; margin-left: auto;background: url(../images/bg5.png) no-repeat top center; background-size: 100% 100%; }
.indexlist li .img .user{width: 54px; height: 54px; border-radius: 50%; }
.indexlist li .img .tag{position: absolute; width: 17px; height: 17px; left: 50%; bottom: -4px; margin-left: -8px; }
/*.indexlist li:nth-last-child(1){position: fixed; padding: 12px 34px 30px 0px; width: 100%; left: 0; bottom: 0; background: url(../images/bg12.png) no-repeat center; background-size: 100% 100%;   }*/
/*.indexlist li:nth-last-child(1) .num{left: 30px;}*/
/*.indexlist li:nth-last-child(1) .info{margin-left: 80px;}*/

.indexlist li.ss{position: fixed; padding: 12px 34px 30px 0px; width: 100%; left: 0; bottom: 0; background: url(../images/bg12.png) no-repeat center; background-size: 100% 100%;   }
.indexlist li.ss .num{left: 30px;}
.indexlist li.ss .info{margin-left: 80px;}

.indexlist li .restag{width: 59px; height: 27px; right: 85px; top: 32px; position: absolute; }
.relative{position: relative;z-index: 2; }
.content::before{position: absolute; left: 0; top: 100px; content: ''; width: 100%;  height: calc(100% - 130px); background: url(../images/bgm.png) repeat center; background-size: 100% 100%; }
.content::after{position: absolute; left: 0; bottom: 0; content: ''; width: 100%;  height: 30px; background: url(../images/bgb.png) no-repeat bottom center; background-size: 100% auto; }

.rulebtn{position: fixed; right: 0; top: 15%; width: 67px; height: 24px; z-index: 9; }
.rulebtn img{width: 100%;}
.texth6{font-size: 11px; color: #FFE09F; text-align: center; margin-bottom: 6px; margin-top: -10px; }

.empty{text-align: center;}
.empty img{width: 66%;}
.empty img:nth-child(1){margin: 6px 0 30px;}

.shadow{position: fixed; background: rgba(0,0,0,0.6); z-index: 10; width: 100%; height: 100%; left: 0; top: 0; }
.alertBox{position: fixed; z-index: 11; width: 86%; left: 7%; top: 15%; }
.alertBox .bg{width: 100%;}
.alertBox .article{position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 74%; height: 54%; left: 13%; top: 36%; }
.alertBox .article p{font-size: 12px; color: #FFE0BE; line-height: 18px; }
.alertBox .article button{background: none; display: block; padding: 0; border: none; width: 42%; margin: 0 auto; }
.alertBox .article button img{width: 100%;}

.backUp{position: fixed; line-height: 0; width: 42px; height: 42px; z-index: 99; bottom: 100px; right: 16px;}
.backUp img{width: 100%; height: 100%;}

.awards{background: url(../images/rbg.png) no-repeat top center; background-size: 100% auto; }
.awards .atit1{position: relative;}
.awards .atit1 img{width: 100%;}
.awards .atit1 .mui-row{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.awards .atit1 .mui-row .mui-col-xs-6{height: 100%;}
.border{width: calc(100% - 10px); padding: 0 6px 6px; margin-left: 5px; border: 1px solid #776147;background: linear-gradient(180deg, #140806 0%, #100807 100%); }
.atit2{margin-top: -7px; position: relative; }
.atit2 img{width: 100%;}
.atit2 .mui-row{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.atit2 .mui-row .mui-col-xs-3{height: 100%;}
.atit3{padding: 0 35px; margin-top: 12px; position: relative; margin-left: -11px; margin-right: -11px; }
.atit3::before{position: absolute; height: 100%; width: 100%; left: 0px; top: 0; display: block; content: ''; background: url(../images/ricon.png) no-repeat center; background-size: 100% auto; }
.atit3 .mui-col-xs-4{padding: 0 4px;}
.atit3 .mui-col-xs-4 img{width: 100%;}
.atit4{text-align: center; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
.atit4 span{width: 76px;height: 27px; line-height: 24px; margin: 0 5px; display: block; font-size: 12px; color: #A86458; background: linear-gradient(180deg, #552620 0%, #1D110F 100%);border-radius: 13px;border: 1px solid #776147;}
.atit4 span.on{font-weight: bold; color: #FFE09F; }
.awards .list section{text-align: center; margin: 12px 0; }
.awards .list section header{height: 24px; font-size: 12px; color: #FFE09F; line-height: 24px; background: url(../images/rbg2.png) no-repeat center; background-size: 100% auto; }
.awards .list section h4{text-align: center; font-weight: 400; color: #FFE09F; font-size: 10px; margin: 8px 0 12px; }
.awards .list section .flex{display: flex; align-items: flex-start; justify-content: space-evenly; margin-bottom: 14px; flex-wrap: wrap;}
.awards .list section .flex .item{width: 26%;}
.awards .list section .img{line-height: 0; position: relative; }
.awards .list section .img .bg{width: 100%;}
.awards .list section .gift{position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; }
.awards .list section .gift img{max-width: 80%; max-height: 80%; }
.awards .list section p{text-align: center; margin-top: 10px; line-height: 14px; color: #FFE0BE; font-size: 11px; }
.border2{width: 100%; margin-top: -5px; padding-top: 1px; border: 1px solid #AB7B44; border-top: 0;background: linear-gradient(180deg, #140806 0%, #100807 100%); }

.rules article{padding: 18px;}
.rules .fiximg{width: 100%; margin: 6px 0; }
.rules article p{font-size: 13px; color: #FFE0BE; line-height: 16px; }
.rules article p span{color: #FFDC78;}
.rules article .subtit{height: 30px; display: block; margin: 14px auto 8px; }

.shtit{position: relative; margin: 15px auto 0; width: 72%; }
.shtit img{width: 100%;}
.shtit .mui-row{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.shtit .mui-row .mui-col-xs-4{height: 100%;}

.shgiftbox{padding: 0 10px 30px;}
.shgiftbox .text{text-align: center; margin: 10px 0; font-size: 11px; color: #FFE09F; }  
.shgiftbox .top{line-height: 0; position: relative; }
.shgiftbox .bg{width: 100%;}
.shgiftbox .con{position: absolute; display: flex; align-items: center; width: 100%; height: 100%; left: 0; top: 0; }
.shgiftbox .con img{height: 86%; margin-left: 1.5%; border-radius: 50%; }
.shgiftbox .con .text{text-align: left; padding-left: 20px; }
.shgiftbox .con h4{font-size: 14px; font-weight: 400; padding-bottom: 4px; line-height: 20px; color: #FFE09F; margin: 0; }
.shgiftbox .con p{margin-bottom: 0; line-height: 20px; font-size: 12px; color: #E8D7C8; }
.shgiftbox .con .helpbtn{position: absolute; width: 25px; height: 25px; right: 0; top: 0; background: url(../images/shicon.png) no-repeat center; background-size: 100% 100%; }
.shgiftbox section{position: relative; padding: 60px 0 20px; }
.shgiftbox section h4{font-weight: 400; margin-bottom: 8px; text-align: center; font-size: 11px; color: #FFE09F; }
.shgiftbox section .flex{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; }
.shgiftbox section .flex .item{width: 26%; margin-bottom: 12px; }
.shgiftbox section .img{line-height: 0; position: relative; }
.shgiftbox section .img .bg{width: 100%;}
.shgiftbox section .gift{position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; }
.shgiftbox section .gift img{max-width: 80%; max-height: 80%; }
.shgiftbox section p{margin-bottom: 0; margin-top: 10px; font-size: 11px; color: #FFE0BE; text-align: center; }
.shgiftbox section button{width: 124px;height: 26px; display: block; margin: 10px auto 0; border: 1px solid #A10D00; padding: 0; background: linear-gradient(180deg, #000000 0%, #000000 100%);box-shadow: inset 0px 0 12px 1px #A10D00;border-radius: 13px;font-size: 12px; color: #FFE09F; }
.shgiftbox section button.off{ color: #A17D65; box-shadow: none; background: #000000;border: 1px solid #472D23;}
.shgiftbox section button.ing{ color: #FFE09F; box-shadow: none; background:  linear-gradient(180deg, #552620 0%, #1D110F 100%);border: 1px solid #472D23;}
.shgiftbox section button img{width: 100%;}
.shgiftbox section.bg1{background: url(../images/sbg1.png) no-repeat center; background-size: 100% 100%; }
.shgiftbox section.bg2{background: url(../images/sbg2.png) no-repeat center; background-size: 100% 100%; }
.shgiftbox section.bg3{background: url(../images/sbg3.png) no-repeat center; background-size: 100% 100%; }
.shgiftbox section.bg4{background: url(../images/sbg4.png) no-repeat center; background-size: 100% 100%; }
.shgiftbox section.bg5{background: url(../images/sbg5.png) no-repeat center; background-size: 100% 100%; }

.getedGift{position: fixed; z-index: 11; width: 86%; left: 7%; top: 15%;  }
.getedGift .bg{width: 100%;}
.getedGift .con{position: absolute; overflow-y: scroll; width: 90%; height: 62%; left: 5%; top: 20%; }
.getedGift .con::-webkit-scrollbar{width: 0; height: 0;}
.getedGift .con h4{text-align: center; margin-bottom: 12px; color: #FFE09F; font-size: 11px; }
.getedGift .con .flex{display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-evenly; }
.getedGift .flex .item{width: 26%; margin-bottom: 12px; }
.getedGift .img{line-height: 0; position: relative; }
.getedGift .img .bg{width: 100%;}
.getedGift .gift{position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; }
.getedGift .gift img{max-width: 80%; max-height: 80%; }
.getedGift p{margin-bottom: 0; margin-top: 10px; font-size: 11px; color: #FFE0BE; text-align: center; }
.getedGift button{border: none; display: block; margin: 12px auto 0; background: none; width: 40%; }
.getedGift button img{width: 100%;}

.unenough{position: fixed; z-index: 11; width: 80%; left: 10%; top: 15%;  }
.unenough .bg{width: 100%;}
.unenough .con{position: absolute; display: flex; flex-direction: column; justify-content: space-between; width: 80%; height: 52%; left: 10%; top: 35%;}
.unenough .con p{font-size: 12px; line-height: 18px; color: #FFE0BE; }
.unenough .con .btns{display: flex; align-items: center; justify-content: space-between; height: 31%; }
.unenough .con .btns button{border: none; padding: 0px; height: 100%; background: none; }
.unenough .con .btns button img{height: 100%;}

.gameBox{padding: 20px 8px;}
.gameBox .top{position: relative;}
.gameBox .top .bg{width: 100%;}
.gameBox .top .con{width: 86%; left: 7%; top: 22%; position: absolute; }
.gameBox .top h4{font-weight: 400; font-size: 11px; line-height: 18px; text-align: center; color: #FFE09F; }
.gameBox .top .flex{display: flex; margin-top: 15px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.gameBox .top .flex .item{width: 28%; margin-bottom: 12px; }
.gameBox .top .img{line-height: 0; position: relative; }
.gameBox .top .img span{position: absolute; font-size: 11px; color: #000; text-align: center; line-height: 18px; width: 52px;height: 18px; left: 50%; margin-left: -26px; top: -9px; background: linear-gradient(360deg, #FFF7B1 0%, #FBA77B 18%, #F7DB8A 100%);box-shadow: inset 0px -1 0px 0px rgba(255,231,172,0.49), inset 0px -1 0px 0px rgba(255,255,255,0.5);border-radius: 9px; }
.gameBox .top .img .bg{width: 100%;}
.gameBox .top .gift{position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; }
.gameBox .top .gift img{max-width: 80%; max-height: 80%; }
.gameBox .top p{margin-bottom: 0; margin-top: 10px; font-size: 11px; color: #FFE0BE; text-align: center; }
.gameBox .top p span{display: inline-block; background: url(../images/icon.png) no-repeat left center; background-size: 12px 12px; padding-left: 15px; }

.game{position: relative;}
.game .bg{width: 100%;}
.game .awardBtn{width: 16%; right: 5%; top: 9%; position: absolute; }
.game .awardBtn img{width: 100%;}
.game .notice{width: 52%; text-align: center; position: absolute; left: 24%; top: 15.5%;  background: url(../images/gbg2.png) no-repeat center; background-size: 100% 100%;}
.game .notice .slideBox{  height: 30px; line-height: 30px; box-sizing: border-box; overflow: hidden; }
.game .notice .slideBox .bd,.game .notice .slideBox .bd ul,.game .notice .slideBox .bd ul li{height: 100%; padding: 0;margin: 0;}
.game .notice .slideBox .bd li{display: flex; justify-content: center; align-items: center; font-size: 11px; color: #FFE09F; }
.game .flex{position: absolute; flex-wrap: wrap; width: 66%; left: 17%; top: 22.5%; display: flex; justify-content: space-between; align-items: center; }
.game .flex .item{width: 30%; position: relative; margin-bottom: 3%; }
.game .flex .item.on{box-shadow: 0 0 5px rgba(255,255,255,0.5); background: rgba(255,255,255,0.5); border-radius: 10px; }
.game .flex .item .bg{width: 100%;}
.game .flex .item .img{width: 90%; height: 75%; display: flex; align-items: center; justify-content: center;  position: absolute; left: 5%; top: 10%; }
.game .flex .item .img span{position: absolute; right: 0px; top: -2px; padding: 0 6px; line-height: 12px; height: 12px;background: linear-gradient(360deg, #FFF7B1 0%, #FBA77B 18%, #F7DB8A 100%);box-shadow: inset 0px -1 0px 0px rgba(255,231,172,0.49), inset 0px -1 0px 0px rgba(255,255,255,0.5);border-radius: 9px; font-size: 10px; color: #000000; }
.game .flex .item .img img{max-width: 90%; max-height: 90%;}
.game .flex .item p{position: absolute; text-align: center; margin-bottom: 0; width: 100%; bottom: 3px; color: #FFE0BE; font-size: 10px; }
.game h4{position: absolute; font-size: 12px; padding: 0 15px; color: #FFE09F; background: url(../images/gbg3.png) no-repeat center; background-size: 100% 100%; left: 11.2%; bottom: 8.7%; width: 77.6%; height: 6%; display: flex; align-items: center; }
.game h4 button{margin-left: auto; width: 22%; margin-top: 4px; background: none; padding: 0; border: none; }
.game h4 button img{width: 100%;}
.game .btns{position: absolute; width: 76%; left: 12%; height: 8%; top: 71.2%; display: flex; align-items: center; justify-content: space-between; }
.game .btns button{border: none; padding: 0; background: none; width: 49%; height: 100%; }
.game .btns button img{width: 100%;}

.awardsBox{position: fixed; z-index: 11; left: 0; bottom: -5px; width: 100%; }
.awardsBox .bg{width: 100%;}
.awardsBox .con{position: absolute; padding: 58px 16px 0; width: 100%; height: 100%; left: 0; top: 0; }
.awardsBox .closebtn{right: 10px; top: 25px; width: 25px; height: 25px; position: absolute; }
.awardsBox h4{line-height: 18px; font-size: 11px; color: #FFE09F; font-weight: 400; }
.awardsBox .list{ border-radius: 12px 12px 0 0;  height: 92%; overflow-y: scroll; box-shadow: inset 0px 0 17px 5px #3D1717; border: 1px solid #78522D;}
.awardsBox .list header{display: flex; font-size: 11px; color: #FFE09F; padding-left: 18px; padding-right: 16px; height: 36px; line-height: 36px; border-bottom: 1px solid #78522D; align-items:center}
.awardsBox .list header span{flex: 1;}
.awardsBox .list header span:nth-last-child(1){flex: 2; text-align: center; }
.awardsBox .list ul {list-style: none; padding: 0; margin: 0; }
.awardsBox .list ul li{display: flex; font-size: 11px; color: #FFE09F; padding: 15px 16px 15px 18px; border-bottom: 1px solid #78522D; align-items:center}
.awardsBox .list ul li span{flex: 1;}
.awardsBox .list ul li .imgs{flex: 2; display: flex; justify-content: flex-end; }
.awardsBox .list ul li .img{width: 40px; height: 40px; margin-left: 8px; position: relative; display: flex; align-items: center; justify-content: center; background: url(../images/bg3.png) no-repeat center; background-size: 100% 100%; }
.awardsBox .list ul li .img img{max-width: 90%; max-height: 90%; }
.awardsBox .list ul li .img span{position: absolute; right: -6px; top: -6px; text-align: center; line-height: 12px; font-size: 11px; color: #000; width: 19px;height: 12px;background: linear-gradient(360deg, #FFF7B1 0%, #FBA77B 18%, #F7DB8A 100%);box-shadow: inset 0px -1 0px 0px rgba(255,231,172,0.49), inset 0px -1 0px 0px rgba(255,255,255,0.5);border-radius: 9px;}

.buystar{position: fixed; z-index: 11; left: 10%; top: 15%; width: 80%; }
.buystar .bg{width: 100%;}
.buystar .con{position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.buystar .con .closebtn{right: 10px; top: 25px; width: 25px; height: 25px; position: absolute; }
.buystar .con .img{width: 27%; height: 25.5%; margin: 65px auto 10px; display: flex;align-items: center; justify-content: center;  }
.buystar .con .img img{max-width: 100%; max-height: 100%; }
.buystar .con p{text-align: center; font-size: 12px; color: #FFE0BE; }
.buystar .con .nums{width: 56%; padding: 0 5px; display: flex; justify-content: space-between; align-items: center; height: 9.55%; background: url(../images/bbg2.png) no-repeat center; background-size: 100% 100%; margin: 0 auto; }
.buystar .con .nums img{height: 70%; }
.buystar .con .nums input{padding: 0; text-align: center; margin-bottom: 0; color: #FFE0BE; font-size: 12px; height: 100%; background: none; border: none; }
.buystar .con button{background: none; display: block; margin: 15px auto 0; border: none; padding: 0; width: 36%; }
.buystar .con button img{width: 100%;}
.buystar .con h4{position: absolute; left: 0; bottom: 6%; width: 100%; margin: 0 auto; padding: 0 22px; font-size: 12px; color: #896E50; display: flex; align-items: center; }
.buystar .con h4 img{margin-left: auto; height: 18px; }

.shengdan{background: #55bcf2;}
.banner{line-height: 0;}
.banner img{width: 100%;}
.timedown{ position: relative; line-height: 0; }
.timedown .bg{width: 100%;}
.timedown p{ position: absolute; margin-top: 5px; font-size: 13px; color: #fff; margin-bottom: 0; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}
.timedown p span{ margin: 0 5px; width: 34px;height: 27px;background: url(../images/sdbg6.png) no-repeat center; background-size: 100% 100%; font-size: 13px; color: #000000; text-align: center; line-height: 27px; }
.sdlist{background: url(../images/sdbg2.png) no-repeat center; background-size: 100% 100%;}

.backbtn{position: fixed; right: 0; top: 15%; width: 72px; height: 32px; z-index: 9; }
.backbtn img{width: 100%;}
.sdlist{padding: 0 6px 2px;}
.sdlist .bg{width: 100%;}
.sdlist section{margin-bottom: 24px; position: relative; }
.sdlist section > h4{margin: 0; top: 17%; font-size: 12px; color: #0471CB; font-weight: 400; position: absolute; left: 10%; }
.sdlist section .flex{position: absolute; width: 84%; left: 8%; top: 26%; display: flex; align-items:flex-start;justify-content: center;}
.sdlist section .flex .item{width: 23%; margin: 0 1%; }
.sdlist section .flex .item .img{position: relative;}
.sdlist section .flex .item .gift{position: absolute; display: flex; align-items: center; justify-content: center; left: 10%; top: 11%; width: 80%; height: 65%; }
.sdlist section .flex .item .gift img{max-width: 80%; max-height: 80%;}
.sdlist section .flex .item h4{font-size: 11px; line-height: 16px; text-align: center; color: #0471CB; margin: 0; font-weight: 400; }
.sdlist section button{position: absolute; left: 50%; margin-left: -48px; bottom: -18px; border: none; background: none; padding: 0; }
.sdlist section button img{height: 36px;}
.sdlist .box .flexscroll{position: absolute; overflow-x: scroll; width: 84%; left:8%; top: 28%; height: 60%; }
.sdlist .box .flex{ display: flex; align-items: center; justify-content: space-between;}
.sdlist .box .flex .item{width: 32%; margin-bottom: 12px; margin: 0; }
.sdlist .box .flex .item .img{position: relative;}
.sdlist .box .flex .item .gift{position: absolute; display: flex; align-items: center; justify-content: center; left: 10%; top: 11%; width: 80%; height: 65%; }
.sdlist .box .flex .item .gift img{max-width: 80%; max-height: 80%;}
.sdlist .box .flex .item p{margin-bottom: 0; text-align: center; font-size: 11px; color: #fff; position: absolute; left: 0; width: 100%; bottom: 7%; }
.sdlist .box .flex .item h4{font-size: 11px; text-align: center; color: #0471CB; margin: 0; font-weight: 400; }
.sdlist .box .flexscroll .flex{position: static;}

.sdgiftbox{width: calc(100% - 12px); position: fixed; z-index: 11; left: 6px; top: 20%; }
.sdgiftbox .bg{width: 100%;}
.sdgiftbox .flex{position: absolute; width: 84%; left: 8%; top: 34%; display: flex; align-items: center; justify-content: center }
.sdgiftbox .flex .item{width: 23%; margin: 0 1%; }
.sdgiftbox .flex .item .img{position: relative;}
.sdgiftbox .flex .item .gift{position: absolute; display: flex; align-items: center; justify-content: center; left: 10%; top: 11%; width: 80%; height: 65%; }
.sdgiftbox .flex .item .gift img{max-width: 80%; max-height: 80%;}
.sdgiftbox .flex .item h4{font-size: 11px; line-height: 16px; text-align: center; color: #0471CB; margin: 0; font-weight: 400; }
.sdgiftbox button{ display: block; width: 30%; margin: 6px auto; border: none; background: none; padding: 0; }
.sdgiftbox button img{width: 100%;}