@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0; font-family:'微软雅黑','Arial';}
html,body {width: 100%; overflow-x:hidden;}
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{font-size: 1.2rem;}
header{position:fixed; z-index: 100; top: 0; left: 0; right: 0; height: 50px; line-height: 50px; background: #c3a988; 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;}

html, body{background: #c3a988; background: -webkit-gradient(linear, 0 0, 0 100%, from(#c3a988), to(#cdb79a));}
.rule-btn{position: absolute; top: 60px; left: 10px;}
.rule-btn a{display: block; padding: 0 20px; background-color: #f5e33b; border: 2px solid #b18854; color: #51341b; line-height: 24px; border-radius: 24px;}
#snow{position:fixed; top:0px; right: 0; bottom: 0; left:0px; z-index:1; pointer-events:none;}
.christmas-main{position: relative; z-index: 2; padding-top: 50px;}
.lottery-draws{position: relative; width: 256px; height: 256px; margin: 5px auto; padding: 5px; background-color: #fff; border-radius: 5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.lottery-draws .logo{position: absolute; width: 20px; right: -20px; top: 2px;}
.lottery-draws ul{text-align: center;}
.lottery-draws ul li{position: relative; width: 80px; height: 80px; margin: 1px; float: left; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.lottery-draws ul li .front, .lottery-draws ul li .back{background-color: #d2d1c0;}
.lottery-draws ul li:nth-child(odd) .front, .lottery-draws ul li:nth-child(odd) .back{background-color: #e8e7ca;}
.lottery-draws ul li .front, .lottery-draws ul li .back{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;}
.lottery-draws ul li.active .front, .lottery-draws ul li .back{-webkit-transform:rotateX(180deg); -moz-transform:rotateX(180deg); transform:rotateX(180deg);}
.lottery-draws ul li.active.on{z-index: 10; -webkit-transform: scale(1.4); -moz-transform: scale(1.4); transform: scale(1.4); box-shadow: 0 0 4px 2px rgba(0,0,0,.6);}
.lottery-draws ul li.active .back{-webkit-transform:rotateX(0); -moz-transform:rotateX(0); transform:rotateX(0);}
.lottery-draws ul li .front .wazi{width: 50px; height: 50px; margin: 15px; background-size: 100% 100%;}
.lottery-draws ul li:nth-child(1) .front .wazi{/*-webkit-animation: wazi-1 10s 1s ease-in-out infinite;*/background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(2) .front .wazi{/*-webkit-animation: wazi-2 10s .6s ease-in-out infinite;*/background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(3) .front .wazi{/*-webkit-animation: wazi-3 10s 1.2s ease-in-out infinite;*/background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(4) .front .wazi{/*-webkit-animation: wazi-4 10s .8s ease-in-out infinite;*/background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(5) .front .wazi{/*-webkit-animation: wazi-5 10s 1.3s ease-in-out infinite;*/background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(6) .front .wazi{/*-webkit-animation: wazi-4 10s .9s ease-in-out infinite;*/background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(7) .front .wazi{/*-webkit-animation: wazi-3 10s 1.2s ease-in-out infinite;*/background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(8) .front .wazi{/*-webkit-animation: wazi-2 10s .8s ease-in-out infinite;*/background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li:nth-child(9) .front .wazi{/*-webkit-animation: wazi-1 10s 1.5s ease-in-out infinite;*/background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
.lottery-draws ul li .back img{display: block; width: 100%; height: 100%;}

.rank{margin-top: 20px; padding: 5px 20px; background-color: rgba(255,255,255,.6); border-top-right-radius: 10px; border-top-left-radius: 10px; box-sizing:border-box;}
.rank h6{line-height: 30px; text-align: center; font-size: 14px; font-weight: 600; color: #51341b; letter-spacing: 4px;}
.rank-list{height: 168px; position: relative;}
.rank p span{overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.activity-mask{position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.6); display: none;}
.activity-pop{position: fixed; z-index: 102; left: 20px; right: 20px; top: 140px; padding: 10px; background-color: #fff; border-radius: 5px; box-sizing:border-box; display: none;}
.activity-pop .close-pop{position: absolute; z-index: 103; right: -16px; top: -16px; width: 30px; height: 30px; background: #f1275b url(../images/close.png) no-repeat center center; background-size: 40%; border-radius: 30px; border: 2px solid #fff;}
.activity-pop .border-top, .activity-pop .border-bottom{position: absolute; z-index: 102; left: 2px; right: 2px; height: 10px; border-radius: 10px; background: url(../images/border.jpg) repeat-x; background-size: auto 100%;}
.activity-pop .border-top.gray, .activity-pop .border-bottom.gray{background: url(../images/border-gray.jpg) repeat-x; background-size: auto 100%;}
.activity-pop .border-top{top: 0;}
.activity-pop .border-bottom{bottom: 0;}
.activity-pop .pop-cloud{position: absolute; z-index: -1; left: 0; right: 0; top: -10px;}
.activity-main{padding: 20px 0; overflow: hidden;}
.activity-main .login-tips{margin: 0 auto; text-align: center; line-height: 20px; font-size: 14px;}
.activity-main .login-tips span{font-size: 12px;}
.activity-main .login-btn{margin: 20px auto 0; width: 100px;}
.activity-main .login-btn a{display: block; width: 100%; color: #fff; text-align: center; line-height: 36px; background-color: #f1275b; font-size: 14px; border-radius: 18px;}
.r-coupons, .r-grand{display: none;}
.r-grand a{font-size: 14px; color: #f1275b;}
.share-msg{padding: 0 10px; color: #f1275b;}
.download-icon{display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: -3px 3px 0 0; background: url(../images/download-icon.png) no-repeat center center; background-size: cover;}
.rule-msg{min-height: 200px; max-height: 250px; overflow-y: scroll;}
.rule-msg h3{padding-bottom: 10px; margin-bottom: 10px; text-align: center; line-height: 20px; font-size: 16px; border-bottom: 1px dashed #f1275b;}
.rule-msg h6{line-height: 20px; font-size: 14px; margin: 10px 0;}
.rule-msg p{font-size: 12px; line-height: 16px; margin-bottom: 5px;}
.weixin-share-pop{position: fixed; z-index: 102; right: 20px; top: 10px; width: 50%; display: none;}
.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;}
.apple-discription .imgs{text-align: center; margin: 20px auto;}
.apple-discription .imgs img{display: inline-block; vertical-align: middle; margin: 0 5px;}
.send-danmu{position: relative; margin: 10px; overflow: hidden;}
.send-danmu input{display: block; width: 100%; padding: 5px; border: 0; line-height: 26px; background-color: #e2e2e2; border-radius: 5px; color: #818181; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,.4); font-size: 12px; box-sizing:border-box;}
.send-danmu a{display: block; width: 100%; margin-top: 5px; background-color: #f1275b; color: #fff; text-align: center; line-height: 36px; border-radius: 5px;}

.rank-list .swiper-wrapper{-webkit-transition: all .3s ease-in-out;}
.rank-list .swiper-wrapper .swiper-slide{width: 100%; height: 20px; line-height: 20px; overflow-y: hidden;}
.rank-list .swiper-wrapper .swiper-slide div{height: 20px; color: #51341b; overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
.rank-list .swiper-wrapper .swiper-slide .rank-name{float: left; width: 100px;}
.rank-list .swiper-wrapper .swiper-slide .rank-time{margin: 0 100px; text-align: center;}
.rank-list .swiper-wrapper .swiper-slide .rank-prize{float: right; width: 100px; text-align: right;}

@media (min-width: 360px){
    .lottery-draws{width: 298px; height: 298px;}
    .lottery-draws ul li{width: 94px; height: 94px;}
    .lottery-draws ul li .front .wazi{width: 60px; height: 60px; margin: 17px;}
}
@media (min-height: 500px){
    .rule-msg{max-height: 300px;}
}
@media (min-width: 400px){
    .lottery-draws{width: 346px; height: 346px;}
	.lottery-draws ul li{width: 110px; height: 110px;}
    .lottery-draws ul li .front .wazi{width: 70px; height: 70px; margin: 20px;}
}
@media (min-height: 600px){
    .rule-msg{max-height: 350px;}
}

@-webkit-keyframes wazi-1 { 
    0%, 100% {background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
    20% {background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
    40% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    60% {background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
    80% {background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
}
@-webkit-keyframes wazi-2 { 
    0%, 100% {background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
    20% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    40% {background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
    60% {background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
    80% {background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
}
@-webkit-keyframes wazi-3 { 
    0%, 100% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    20% {background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
    40% {background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
    60% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    80% {background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
}
@-webkit-keyframes wazi-4 { 
    0%, 100% {background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
    20% {background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
    40% {background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
    60% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    80% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
}
@-webkit-keyframes wazi-5 { 
    0%, 100% {background-image: url(../images/wazi-5.png); background-repeat: no-repeat; background-position: center center;}
    20% {background-image: url(../images/wazi-4.png); background-repeat: no-repeat; background-position: center center;}
    40% {background-image: url(../images/wazi-1.png); background-repeat: no-repeat; background-position: center center;}
    60% {background-image: url(../images/wazi-3.png); background-repeat: no-repeat; background-position: center center;}
    80% {background-image: url(../images/wazi-2.png); background-repeat: no-repeat; background-position: center center;}
}