@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0; font-family:'微软雅黑','Arial';}
html,body {overflow-x:hidden; background: #f8f8f8;}
html{font-size:62.5%;}
ul li{list-style: none;}
a{text-decoration: none;color: #434343;-webkit-tap-highlight-color:rgba(0,0,0,0);}
em,i{font-style: normal;}
h1,h2,h3,h4,h5,h6{font-weight: normal; font-size: 100%;}
input,textarea{outline: none;}
.clearfix:after{display: block;clear: both;height: 0;visibility: hidden;font-size: 0;line-height: 0;content: "";}
.clearfix{zoom:1;}
.ell{overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
/*盒图宽高=content+border*/
.border-box{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.img-box img{display: block; width: 100%; height: auto;}

body{padding-top: 50px; font-size: 1.4rem;}
header{position:fixed; z-index: 100; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; background: #e2231a; color: #fff; text-align: center;  box-shadow: 0 1px 3px rgba(0,0,0,.3);}
header .go-back, header .right-btn{position: absolute; top: 0; display: block; width: 50px;height: 50px; text-indent: -9999px;}
header .go-back{left: 0; background: url(../images/go-back.png) no-repeat center center; background-size: 12px;}
header h3{font-size: 14px;}
header .right-btn{right: 0;}
header .right-btn .share-btn{display: block; width: 50px; height: 50px; background: url(../images/share-icon.png) no-repeat center center; background-size: 20px 20px;}
.show-rule{height: 30px; padding: 10px; text-align: right;}
.show-rule .rule-btn{display: inline-block; padding: 0 20px; background-color: #cda23c; line-height: 30px; font-size: 14px; color: #fff; border-radius: 15px; overflow-y: hidden;}
.show-rule .rule-btn i{display: inline-block; width: 16px; height: 16px; background: url(../images/rule-icon.png) no-repeat center center; background-size: 100%; vertical-align: middle; margin: -3px 5px 0 0;}
.lottery-banner{width: 80%; padding-left: 10px; margin: 0 auto;}
.lottery-time{text-align: center; line-height: 20px; font-size: 14px; color: #fff;}
.rotate-main{position: relative; margin: 20px auto; width: 260px; height: 260px;}
.rotate-main .pointer{position: absolute; z-index: 3; left: 50%; top: 50%; width: 70px; height: 80px; margin: -46px 0 0 -35px;}
.rotate-main .rotate-bg{position: relative; z-index: 2;}
.rotate-main .prize-tips-img{position: absolute; z-index: 1; bottom: 0; right: 5px; width: 60px; height: 48px;}
.rank-main{width: 80%; padding: 10px; margin: 30px auto; color: #fff; box-sizing:border-box; background-color: rgba(28,118,188,.7); border-radius: 5px;}
.rank-main h6{font-size: 1.4rem; line-height: 2rem; text-align: center;}
.rank-list{height: 120px; font-size: 1.2rem; overflow: hidden;}
.rank-list .swiper-wrapper{-webkit-transition: all .3s ease-in-out;}
.rank-list .swiper-wrapper .swiper-slide{width: 100%; height: 30px; line-height: 30px; overflow-y: hidden;}
.rank-list .swiper-wrapper .swiper-slide div{height: 30px; overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.rank-list .swiper-wrapper .swiper-slide .rank-name{float: left; width: 80px;}
.rank-list .swiper-wrapper .swiper-slide .rank-time{margin: 0 80px; text-align: center;}
.rank-list .swiper-wrapper .swiper-slide .rank-prize{float: right; width: 80px; text-align: right;}

.result-pop{position: fixed; z-index: 102; top: 150px; left: 50%; width: 250px; margin-left: -125px; padding: 30px 10px; box-sizing:border-box; background-color: #d4d4d4; border-radius: 6px; display: none;}
.result-pop.in{display: block;}
.result-pop .coin{position: absolute; display: block; width: 40px; height: 16px; background: url(../images/coin.png) no-repeat center center; background-size: cover; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition:all 1.3s ease-in-out; -moz-transition:all 1.3s ease-in-out; -ms-transition:all 1.3s ease-in-out; -o-transition:all 1.3s ease-in-out; transition:all 1.3s ease-in-out;}
.result-pop .coin:first-child{left: 15px; top: -15px; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:first-child{-webkit-animation:coin1 .2s .3s forwards ease-in-out;}
.result-pop .coin:nth-child(2){left: -15px; top: 55%; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:nth-child(2){-webkit-animation:coin2 .2s .3s forwards ease-in-out;}
.result-pop .coin:nth-child(3){left: -20px; bottom: -20px; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:nth-child(3){-webkit-animation:coin3 .2s .3s forwards ease-in-out;}
.result-pop .coin:nth-child(4){left: 20%; bottom: -30px; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:nth-child(4){-webkit-animation:coin4 .2s .3s forwards ease-in-out;}
.result-pop .coin:nth-child(5){right: -10px; bottom: -5px; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:nth-child(5){-webkit-animation:coin5 .2s .3s forwards ease-in-out;}
.result-pop .coin:nth-child(6){right: -35px; top: 50%; -webkit-transform: scale(0) rotate(0);}
.result-pop.in .coin:nth-child(6){-webkit-animation:coin6 .2s .3s forwards ease-in-out;}
.result-main h6, .result-main .result-txt{font-size: 1.4rem; line-height: 1.8rem; text-align: center; color: #916622;}
.result-main .result-txt p span{color: #f12945;}
.result-main .see-result{padding-top: 10px; text-align: center;}
.result-main .see-result a{display: inline-block; line-height: 30px; font-size: 1.4rem; padding: 0 20px; background-color: #fce12e; border: 1px solid #eda926; border-radius: 6px; color: #916622;}
.wap-mask{position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); display: none;}
.wap-mask.in{display: block;}
.lottery-rule{padding: 20px;}
.lottery-rule .rule-title{width: 50%; margin: 10px auto;}
.lottery-rule .rule-main{margin-top: 20px; padding-bottom: 10px; border-top: 1px dashed #fff; border-bottom: 1px dashed #fff; color: #fff; font-size: 1.4rem; line-height: 1.6rem;}
.lottery-rule .rule-main h6{margin-top: 15px; font-weight: 600;}
.lottery-rule .rule-main p{margin: 5px 0; text-align: justify;}
.coin-group{position: absolute; bottom: -10px; left: 0; right: 0;}
#login-lottery{padding-bottom: 50px;}
.weixin-share-pop{position: fixed; z-index: 102; right: 10px; top: 10px; width: 50%; display: none;}
.weixin-share-pop.in{display: block;}
.share-pop, .share-pop-bg{position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; left: 0; width: 100%; overflow-y: scroll; box-sizing:border-box; height: 100%; overflow: hidden; -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
.share-pop.in, .share-pop-bg.in{-webkit-transform:translateY(0); -moz-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0);}
.share-pop-main{background-color: #eee; font-size: 14px;}
.share-pop-head{position: relative; height: 50px; background-color: #e2231a; color: #fff; line-height: 50px;}
.share-pop-head h3{text-align: center;}
.share-pop-head .close-share{position: absolute; top: 0; padding: 0 15px; color: #fff; left: 0;}
.share-list li{padding: 15px 10px; margin-bottom: 10px; border-top: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; background-color: #fff;}
.share-list li:last-child{margin-bottom: 0;}
.share-list li a{display: block; width: 100%; height: 100%; font-size: 12px;}
.download-script{padding: 15px 0; margin: 0 20px;}
.download-script a{display: block; height: 30px; line-height: 30px; margin: 0 auto; padding: 5px 10px; text-align: center; border-radius: 30px; background-color: #fff; color: #000; border: 1px solid #d2d2d2;}
.download-script a i{display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-top: -3px; margin-right: 5px; background: url(../images/download-icon.png) no-repeat; background-size: 100%;}
.share-pop-bg{z-index: -1; background-color: rgba(0,0,0,.7);}
.result-txt p {text-align: center;}
.logo-lottery{position: fixed; right: 0; top: 50%; width: 20px; height: 60px; margin-top: -60px;}
.result-pop a.close-pop{position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 26px; background-color: rgba(0,0,0,.6); color: #fff; font-size: 18px; text-align: center; line-height: 26px;}
.remind{margin: 10px 30px; padding: 10px; background-color: rgba(28,118,188,.7); color: #fff; font-size: 12px; line-height: 16px; border-radius: 5px;}
.remind dt{margin-bottom: 5px;}

@-webkit-keyframes coin1 {
    0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(-30deg); 
    }
}
@-webkit-keyframes coin2 {
     0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(-20deg); 
    }
}
@-webkit-keyframes coin3 {
     0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(0); 
    }
}
@-webkit-keyframes coin4 {
     0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(15deg); 
    }
}
@-webkit-keyframes coin5 {
     0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(10deg); 
    }
}
@-webkit-keyframes coin6 {
     0% {
        -webkit-transform: scale(0) rotate(0); 
    }
    100% {
    	-webkit-transform: scale(1) rotate(70deg); 
    }
}

@media (min-width: 360px){
	.rotate-main{width: 300px; height: 300px;}
}
@media (min-width: 400px){
	.rotate-main{width: 340px; height: 340px;}
	.rotate-main .pointer{width: 80px; height: 90px; margin: -50px 0 0 -40px;}
}