.loading{background: #fff; position: fixed; width: 100%; height: 100%; top:0; left: 0;  z-index: 999;}
.bg{background: url("../img/bg.jpg")center no-repeat;background-size: cover;}
.all{background: url("../img/all.jpg")center no-repeat;background-size: cover;}
.bg1{background: url("../img/bg1.jpg")center no-repeat;background-size: cover;}
.logo{width: 92%; margin: 0 auto; height: 6%}
.logo img{width: 39%;}
.btnBox{width: 23%; position: absolute; top:3%; right: -5px; z-index: 10}
.btnBox img{width: 100%;  margin-bottom: 7%;}
.one .slg{width: 100%; height: 36%;}
.one .slg img{width: 95%;}
.one .slg1{width: 100%; height: 30%; position: relative;}
.one .slg1 .img1{width: 95%;}
.one .slg1 .img2{position: absolute;top: -28%;right: 4%;width: 41%;}
.one .slg1 .img3{position: absolute;bottom: -28%;left: 45%;width: 14%;}
.one .slg2{width: 100%; height:20%;}
.one .slg2 .box{width: 75%; position: relative;}
.one .slg2 .box .img1{position: absolute;width: 20%;top: -29%;right: 4%; animation:shake2 1.5s linear infinite; transform-origin: 0 100%; }

@-webkit-keyframes shake2 { 0%,50%,100% {transform: rotate(0deg)scale(1) ;} 25% {transform: rotate(-5deg) scale(1.1);} 75% {transform: rotate(5deg)scale(1.1);} }


.one .slg3{width: 100%; height:8%;}
.one .slg3 img{width: 68%;}
.ruleAll{position: absolute; width: 100%; height: 100%; top:0;z-index: 10; display: none}
.ruleAll .ruleBox{width: 100%; height: 80%; margin-top: 2%; position: relative;}
.ruleAll .ruleBox .box{width: 95%; margin: 0 auto;  height: 94%; padding: 3% 0; overflow-y: auto; background: #fff; text-align: center; border-radius: 10px; }
.ruleAll .ruleBox .box img{width: 95%;  margin-left: -4%; }
.ruleAll .ruleBox .title{    position: absolute;width: 25%;top: -3%;right: 5%;}
.ruleAll .btn{width: 100%; text-align: center; margin-top: 5%; }
.ruleAll .btn img{width: 40%; }
.swiper-slide{overflow: hidden}

/*.myPrize{position: absolute; width: 100%; height: 100%; top:0;z-index: 10;  background: rgba(0,0,0,0.5); display: none}*/
.myPrize{position: absolute; width: 100%; height: 100%; top:0;z-index: 10; background: url("../img/1/prizeBg.jpg")center no-repeat; background-size: cover;display: none; overflow: hidden;}
.myPrize .myPrizeBox{width: 100%; height: 94%;}
.myPrize .myPrizeBox .box{ width: 100%; height: 90%; position: relative; margin-top: 15%; }
.myPrize .myPrizeBox .box .gift{position: absolute;width: 50%;top: -9%;right: -8%;}
.myPrize .myPrizeBg{position: relative; z-index: 3; pointer-events: none}
.myPrize .myPrizeBox .info{position: absolute;width: 100%;height: 93%;left: 0;top: 7%; z-index: 4;}
.myPrize .myPrizeBox .info .prizeImg{width: 75%; height: 40%; margin: 0 auto;}
.myPrize .myPrizeBox .info .ma{width: 80%; margin: 5% 0 0 10%;}
.myPrize .myPrizeBox .title {width: 65%; height: 7%; margin: 0 auto;}
.myPrize .myPrizeBox .title img{width: 55%; }

.myPrize .btn{width: 100%; text-align: center;  position: absolute; bottom:2%; }
.myPrize .btn img{width: 40%; }

.myPrize .t1{ width: 60%; margin: 0 auto;}
.myPrize .PrizeTypeTwo,.myPrize .PrizeTypeOne { height: 90%; display: none}

.myPrize .PrizeTypeTwo .prizeCode{ margin: -3% 0 0 10% !important;}
.myPrize .PrizeTypeTwo .prizeImg{width: 55% !important; height: 38% !important}
.myPrize .PrizeTypeTwo .prizeCodeBox span{font-size: .4rem;}
.myPrize .PrizeTypeTwo .ma{width: 70% !important; margin: 5% 0 0 15% !important}
.myPrize .PrizeTypeTwo .btn{ margin-top: 7% !important;}
.myPrize .PrizeTypeTwo .MaBox{width: 100%; height: 40%;}
.myPrize .PrizeTypeOne .MaBox{width: 100%; height: 23%;}
.myPrize .PrizeTypeTwo .info .prizeImg{ height: 35%!important;}


.myPrize .prizeCode{width: 80%; margin: 8% auto  }
.myPrize .prizeCode .prizeCodeBox{width: 100%; pointer-events: painted;  }
.myPrize .prizeCode .prizeCodeBox p{ color: #000; font-size: .4rem; font-weight: bold;}
.myPrize .prizeCode .prizeCodeBox span{ margin-left:3%; font-size: .40rem; letter-spacing: 1px; width: 50%; text-align: center; display: inline-block; background: #fff; border:1px solid #000; border-radius: 20px; }
.myPrize .prizeCode .prizeCodeBox a{ margin-left: 2%; background: #FF8E06;padding: 1% 2%;color: #fff;border-radius: 5px;font-size: .4rem;}
.select .selectBox{width: 90%; height: 75%; margin: 0 auto  ; overflow: hidden}
.select .selectBox .box{width: 100%; height: 90%;}
.select .footer{width: 100%; height: 29%; position: absolute; bottom: 0; max-width: 640px; z-index: 9;
    display: flex;align-items: flex-end;align-content: flex-end;flex-wrap: wrap;}
.select .footer .box{ width: 100%; height: 35%; position: relative; }
.select .footer .submitBox{width: 30%;position: absolute;top: -43%;right: 6.5%;}
.select .footer .submitBox img{width: 100%; }

.select .footer .btn{width: 100%; text-align: center; padding: 5% 0; background: rgba(92,158,255,0.5); display: none}

.select .footer .btn .img_box{width: 30%;  margin: 0 5%;position: relative;}
.select .footer .btn img{width: 100%;  }
.select .footer .tips{    width: 50%;
    position: absolute;
    top: -87%;
    right: -36%;
    transform: scale(.65);
    animation:shake3 1.5s linear infinite;
    transform-origin: 0 100%;
}
@-webkit-keyframes shake3 { 0%,50%,100% {transform: rotate(0deg)scale(0.6) ;} 25% {transform: rotate(-5deg) scale(0.6);} 75% {transform: rotate(5deg)scale(0.6);} }

.select .footer .tips span{position: absolute; width: 100%; height: 100%;    display: flex;align-items: center;justify-content: center;top:0;left: 0; font-size: .6rem; color: #fff;
 font-family: sb;
}

.select .footer .list{ width: 100%; margin: 0 auto; padding:2% 1.5%; height: 100%; background: #3E86FC; border: 4px solid #fff; border-top-left-radius: 25px;border-top-right-radius:25px; position: relative; z-index: 3; box-sizing: border-box;
    display: flex;align-content: center;justify-content: flex-start;align-items: center;}
.select .footer .list .item{ height: 70%;  width: 15.5%; display: flex;align-items: center; position: relative; margin: 0  0.5%  ; }
.select .footer .list .close{position: absolute;top: -15%;right: 0%;width: 22%;}
.selectBox .icon{position: absolute; transition: all 0.5s }
.selectBox .icon:hover{transform: scale(1.1);}
.selectBox .rightIcon{position: absolute;top: 50%;right: 7%;width: 17%; animation: right1 1s linear infinite; z-index: 2;}
.selectBox .leftIcon{position: absolute;top: 50%;right: 7%;width: 17%; animation: left1   1s linear infinite;z-index: 2; display: none;}

@-webkit-keyframes right1 { 0% {transform: translateX(0) ;} 100% {transform: translateX(30%) } }
@-webkit-keyframes left1 { 0% {transform: translateX(30%) ;} 100% {transform: translateX(0) } }


.select .footer .again{display: none;}

.selectBox .icon1{top:0; left:5%; width: 28%; }
.selectBox .icon2{top:0; left: 41%; width: 28%; }
.selectBox .icon3{top: 1%;right: 3%;width: 25%; }
.selectBox .icon4{top: 21%;left: 5%;width: 23%; }
.selectBox .icon5{top: 22%;left: 38%;width: 26%;}
.selectBox .icon6{    top: 22%;right: 2%;width: 26%;}
.selectBox .icon7{top: 45%;left: 4%;width: 29%;}
.selectBox .icon8{top: 45%;left: 38%;width: 33%;}
.selectBox .icon9{    top: 74%;left: 8%;width: 33%;}
.selectBox .icon10{top: 67%;left: 51%;width: 39%;}

.selectBox .icon11{top: 2%;left: 7%;width: 23%;}
.selectBox .icon12{top: 2%;left: 39%;width: 31%;}
.selectBox .icon13{top: 12%;right: 0%;width: 26%;}
.selectBox .icon14{top: 21%;left: 8%;width: 23%; }
.selectBox .icon15{top: 25%;left: 42%;width: 32%;}
.selectBox .icon16{top: 43%;left: 10%;width: 26%;}
.selectBox .icon17{top: 47%;left: 41%;width: 34%;}
.selectBox .icon18{top: 67%;left: 5%;width: 32%;}
.selectBox .icon19{top: 77%;left: 38%;width: 28%;}
.selectBox .icon20{top: 69%;right: 3%;width: 28%;}

.selectBox .icon21{top: 2%;left: 7%;width:28%;}
.selectBox .icon22{top: 2%;left: 48%;width: 30%;}
.selectBox .icon23{top: 18%;right: 2%;width: 27%;}
.selectBox .icon24{top: 26%;left: 5%;width: 28%;}
.selectBox .icon25{top: 27%;left: 41%;width: 23%;}
.selectBox .icon26{top: 45%;left: 9%;width: 27%;}
.selectBox .icon27{top: 45%;left: 37%;width: 30%;}
.selectBox .icon28{top: 60%;left: 1%;width: 30%;}
.selectBox .icon29{top: 73%;left: 32%;width: 30%;}
.selectBox .icon30{top: 72%;right: 4%;width: 28%;}

.selectEnd{position: absolute; top:0; width: 100%; height: 100%; max-width: 640px; z-index: 8; background: rgba(0,0,0,0.7); display: none}
.selectEnd .friendRankBtn{width: 45%; margin: 10% 0 0 5%;}
.selectEnd .friendRankBtn img{width: 100%; }
.selectEnd .selectEndBox{width: 80%; height: 60%; margin: 0 auto;}
.selectEnd .selectEndBox .box{width: 80%;  height: 80%; position: relative;overflow: hidden;}
.selectEnd .selectEndBox .t1,.selectEnd .selectEndBox .t2{width: 100%; }
.selectEnd .selectEndBox .t1{position: relative; z-index: 3;}
.selectEnd .selectEndBox img{vertical-align: middle; }
.selectEnd .selectEndBox .card{width:90%; position: relative; margin: -10% 0 0 5%;transform: translateY(-100%) }
.selectEnd .selectEndBox .card .info{position: absolute; top:0; width: 100%; height: 100%;}
.selectEnd .selectEndBox .card .userInfo{width: 30%; text-align: center; position: absolute; right: 3%; top:5%;}
.selectEnd .selectEndBox .card .userInfo img{width: 77%; border-radius: 100%;}
.selectEnd .selectEndBox .card .userInfo p{ font-size: .35rem; font-weight: bold;}
.selectEnd .cardAni{ animation: cardAni 1.5s linear forwards}
@-webkit-keyframes cardAni {
    0%{transform: translateY(-100%)}
    100%{transform: translateY(0)}
}


.creator{ z-index: -10 !important;}
.creator .userInfo{width: 30%; text-align: center; position: absolute; right:0; top:5%;}
.creator .userInfo img{width: 50%; border-radius: 100%;}
.creator .userInfo p{ font-size: .35rem; font-weight: bold;}
.creator .ma{width: 27%;text-align: center;position: absolute;right: 6%;bottom: 13%; background: #ffffff; padding: 1%; border-radius: 3px;}
.creator .ma img{width: 100%; }
.creator .ma canvas{width: 100%; }




.pubBox{width: 100%; height: 100%;position: absolute; top:0; max-width: 640px; z-index: 10; background: rgba(0,0,0,0.6); }
.pubBox .creatorBox{width: 100%; height: 92%;}
.pubBox .creatorBox .box{width: 100%; position: relative;}
.pubBox .creatorBox .box .info{position: absolute; width: 100%; height: 100%; top:0;}
.pubBox .creatorBox .close{position: absolute;
    top: -12%;right: 6%;width: 9%;}
.pubBox .creatorBox .close img{width: 100%;}
.pubBox .creatorBox .tips{position: absolute; width: 100%; bottom:-8%; text-align: center;}
.pubBox .creatorBox .tips img{width: 55%;}

.pubBox .creatorBox .btn{width: 100%;  text-align: center; position: absolute; bottom: 12%;display: flex;flex-direction: column;align-items: center;}
.pubBox .creatorBox .btn img{width: 42%; margin: 1% 0;}

.helpType .box{display: none}
.helpType .text{width: 70%; height: 30%; position: absolute;top:20%; left: 15%}
.helpType .text span{font-size: .45rem;  color:#000; font-family: sb; text-align: center;}


.rule .creatorBox .close{position: absolute;top:auto; bottom: -15% !important;right: 45%;width: 9%;}



.rule,.shareImg,.errBox,.friendList,.helpTips,.prizeRes,.helpType{display: none;}
.helpTips .uuName{    position: absolute;width: 100%;top: 17%;left: 16%;font-family: sb;font-size: .45rem;}

.prizeType{display: none;}
/*.prizeType_y{display: block !important;}*/


.prizeType .box{display: none;}
.shareImg{z-index: 11;}
.shareImg .creatorBox .close{position: absolute;top: -11%;right: -4%;width: 9%;}
.shareImg .creatorBox .close img{width: 100%;}
.friendList .creatorBox .btn{width: 100%; text-align: center; position: absolute; bottom: -30%;}
.friendList .creatorBox .btn img{width: 45%;}
.friendList .info .listBox{width: 90%; height: 70%; margin: 22% 0 0 5%; overflow-y: auto;}
.friendList .info .listBox .item{width: 94%;  margin: 1% 0 3% 3%; display: flex;align-items: center; border-bottom: 2px solid rgba(255,255,255,0.5); padding-bottom: 3%; }
.friendList .info .item span{display: inline-block; width: 33.33%; text-align: center; font-size: .35rem;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}



.prizeType .creatorBox .close{position: absolute;top:auto; bottom: -15% !important;right: 45%;width: 9%;}
.prizeType .creatorBox .close img{width: 100%;}
.prizeTypeImg{width: 70%; height: 45%; margin: 32% 0 0 15%}
.prizeTypeImg img{width: 100%;}

.prizeTypeMa{width: 70%; margin: 0 auto}
.prizeTypeMa img{width: 100%;}



.rule .creatorBox .box{width: 85%; margin: 0 auto}
.shareImg .creatorBox .box{width: 85%; margin: 0 auto}
.errBox .creatorBox .box{width: 85%; margin: 0 auto; text-align: center}
.friendList .creatorBox .box{width: 85%; margin: 0 auto}

.prizeRes .creatorBox .box{display: none}


.prizeRes .creatorBox .close{position: absolute;top:auto; bottom: -15% !important;right: 45%;width: 9%;}
.prizeRes .creatorBox .close img{width: 100%;}
.errBox .creatorBox .close{top:-12%;}



.game{width: 90%; margin: 0 auto; height: 82%;}
.game-header{width:100%}
.game-header img{width:100%}
.game-content{position:relative;width:100%}
.game-content img{width:100%}
.game-goods-wrap{position:absolute;margin:0 auto;top:37%;left:4%;right:0;bottom:0;width:54%;height:19%;overflow:hidden}
.game-goods-wrap:before{position:absolute;top:-1PX;right:0;bottom:1PX;left:-1PX;border-top-left-radius:.25rem;border-top-right-radius:.25rem;width:101%;height:100%;content:"";z-index:12}
.game-goods-wrap:after{position:absolute;top:1PX;right:0;bottom:-1PX;left:-1PX;width:101%;height:100%;z-index:12;content:"";border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}
.game-goods-list{height:100%;overflow:hidden}
.game-goods{position:absolute;width:32%;height:100%;z-index:10;overflow:hidden}
.game-goods:first-child{left:-32%;transform:translateX(100%);-ms-transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);-o-transform:translateX(100%)}
.game-goods:nth-child(2){left:50%;transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%)}
.game-goods:last-child{left:100%;transform:translateX(-100%);-ms-transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);-o-transform:translateX(-100%)}
.game-goods-box{height:56%;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;overflow:hidden}
.game-goods-ul{position:relative;top:0;font-size:0;z-index:10}
.game-goods-ul li{position:relative;width:100%}
.game-goods-ul li img{position:absolute;top:10%;left:17%;width:66%}


.game-btn {position: absolute;margin: 0 auto;left: 0;right: 0;top: 66%;width: 47%;height: 10%;}
.game-prize {position: absolute;top: 20%;right: 2%;width: 12%;height: 10%;}


.shareBox{width: 100%; height: 100%;}
.shareBox .slg{width: 100%; height: 33%;}
.shareBox .slg img{width: 95%;}
.shareBox .slg1{width: 100%; height:87%;}
.shareBox .slg1 img{width: 90%;}
.game-play{position: absolute;width: 52%;bottom: 13%;text-align: center;color: #fff;font-size: .4rem;left: 31%;}

.selectType{display: none;}
.selectType .box{display: none; width: 64%!important; }


.gameSlide .btn{width: 100%; text-align: center; margin-top: 5%; }
.gameSlide .btn img{width: 40%; }