@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0);}
header,nav,article,section,asider,footer{display:block;}
html{font-size:62.5%; font-family:'Helvetica Neue',HelveticaNeue,Helvetica,"Microsoft YaHei",Arial; -webkit-text-size-adjust:100%;	-ms-text-size-adjust:100%;}
body{min-width:320px; overflow-x:hidden;}
input::-webkit-input-placeholder{font-size: 1.3rem; color: #ddd;}
input,select{vertical-align:middle; font-family:"microsoft yahei",Arial;}
textarea{font-family:"microsoft yahei",Arial; padding:.5rem; resize:none;}
input[type="button"]:hover{opacity:0.8; cursor:pointer;}
/*清除safri浏览器默认的表单样式*/
input,button,textarea{ -webkit-appearance: none;}
input[type="radio"]{-webkit-appearance:radio;}
input[type="checkbox"]{-webkit-appearance:checkbox;}

table{ border-collapse:collapse;}
ul{ list-style:none;}
a img{vertical-align: bottom;}
a{text-decoration:none; color:#fff;}
a:focus,input:focus{outline:none;}
a:active,a:hover{outline:0; text-decoration:none;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}
b,i,em{font-style:normal;}
.cf:before,.cf:after{content:""; display:table;}
.cf2:after {content: ""; display:block; height:0; clear:both;}
.hide{display: none;}
.hidden{visibility: hidden;}
.clear{clear: both;}
/*===========结束公用样式============*/
body{background: #FF5272;}
.lottery_wrapper{position: relative; background: -webkit-linear-gradient(rgba(255,99,188,1),rgba(255,80,111,0.5) 57%,rgba(255,80,111,0) 87%)}
.bg_stars{position: absolute; left: 0; top: 0; width: 100%; z-index: 0;}
.bg_stars img,.lottery_brief img,footer img{width: 100%; height: auto; display: block;}
.headline{padding-top: 7rem;}
.headline img{width: 82.2%; margin: 0 auto; height: auto; display: block;}
.rule_link{position: absolute; right: 1rem; top: 2em; padding: 1rem; font-size: 1.3rem; color: #AA3358; z-index: 100;}
.lottery_wrapper>h3{text-align: center; font-size: 1.8rem; color: #fff;}
/*抽奖*/
.lottery_points{position: relative; margin: 1rem 0; padding:0 6%; z-index: 10;}
.lottery_points li{float: left; width: 31%; height: 8.6rem; margin: 1.6% 1.75%;}
.lottery_points li .in{width: 100%; max-width: 9rem; height: 8.6rem; margin: 0 auto; color: #000; border-radius: 12px; box-shadow: 5px 5px 5px rgba(0,0,0,0.2); background: #fff;
	display: -webkit-box; display: box; -webkit-box-pack:center; -webkit-box-align:center;}
.lottery_points li:nth-of-type(3n+1){margin-left: 0; clear: both;}
.lottery_points li:nth-of-type(3n){margin-right: 0;}
.lottery_points li span{font-size: 1.2rem; text-align: center; display: inline-block;}
.lottery_points li em{font-size: 2.6rem; font-weight: bold;}
.lottery_points li em.small{font-size: 1.8rem;}
.lottery_points li i{font-size: 1.4rem;}
.lottery_points li.lottery .in{background: #FCE303;}
.lottery_points li.lottery.active .in{position: relative; -webkit-animation:scaleSmall 0.58s linear 0s,fadeGrey linear 0.1s 1.3s forwards; animation:scaleSmall 0.58s linear 0s,fadeGrey linear 0.1s 1.3s forwards;}
.lottery_points li.lottery.active .in:before,.lottery_points li.lottery.active .in:after,.lottery_points li.lottery.active span:before,.lottery_points li.lottery.active span:after
{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 8.6rem; border-radius: 50%; background: #FCE303; display: block; z-index: -1;
	-webkit-transform-origin:center center; transform-origin:center center;
	-webkit-animation:spread 0.6s ease-in 0.6s forwards; animation:spread 0.6s ease-in 0.6s forwards;}
.lottery_points li.lottery.active .in:before{-webkit-animation-delay:0.6s; animation-delay:0.6s;}
.lottery_points li.lottery.active .in:after{-webkit-animation-delay:0.8s; animation-delay:0.8s;}
/*.lottery_points li.lottery.active span:before{-webkit-animation-delay:1s; animation-delay:1s;}*/
/*.lottery_points li.lottery.active span:before{-webkit-animation-delay:0.8s; animation-delay:0.8s;}*/
.lottery_points li.lottery-unit.active .in{background: #FCE303;}
.lottery_points li.lottery.grey .in{background: #ccc;}
/*积分排行榜*/
.lottery_brief{position: relative;}
.lottery_brief span{position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-size: 1.2rem; color: #8E244A;}
.ranking_list{padding-bottom: 1rem; background: #DCDCDC;}
.ranking{width: 80%; margin: 0 auto; max-height: 240px; overflow: hidden;}
.ranking_list .rank_tit {padding: 1rem; text-align: center;}
.ranking_list .rank_tit span,.lottery_record .title{padding: 0rem 2rem; height: 2.3rem; line-height: 2.3rem; font-size: 1.3rem; color: #fff; border-radius: 3rem; background: #FF5173; display: inline-block;}
.ranking li{width: 100%; padding-left: 10%; line-height: 2; font-size: 1.2rem; color: #666666; box-sizing: border-box;}
.ranking li em{padding-right: 4rem;}
.check_record{padding: 1rem 0; margin: 0 2rem; text-align: center; text-decoration: underline; font-size:1.2rem; color: #666666; display: block;}
.check_record:active,.check_record:hover{outline:0; text-decoration:underline;}

/*活动规则*/
.lottery_rule h3{padding: 1rem 0; text-align: center; font-size: 1.4rem; color: #666666;}
.lottery_rule,.lottery_record{padding: 1.5rem 2rem; border-radius: 12px; background: #fff;}
.lottery_rule ul{max-height: 300px; overflow: auto;}
.lottery_rule li{font-size: 1.3rem; color: #666;}
/*我的中奖记录*/
.lottery_record{text-align: center; padding: 1.5rem 1rem;}
.record_list{max-height: 260px; margin: 1rem 0; padding: 0 1rem; overflow: auto;}
/*.record_list::-webkit-scrollbar{background: #eee;}*/
.record_list li{height: 3rem; line-height: 3rem; font-size: 1.3rem; color: #808080; border-bottom: 1px solid #B3B3B3;}
.record_list li span{float: left;}
.record_list li span em{color: #FF5173;}
.record_list li i{float: right;}
/*弹出层*/
.bomb,.bomb_a,.bomb_b{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.7); z-index: 1000;}
.bomb_cont{position: absolute; left: 50%; top: 50%; width: 80%; max-width: 400px; height: auto;
	-webkit-transform:translate(-50%,-50%);}
.product_cont{position: relative; padding: 2.5rem 1rem 1rem; border-radius: 12px; background: #fff;}
.product_cont img{position: absolute; left: 10%; top: 0; width: 80%; -webkit-transform: translate(0,-100%); transform: translate(0,-100%); display: block;}
.product_cont h2,.product_cont h5{font-size: 2.5rem; text-align: center; color: #FF4E84;}
.product_cont h5{ padding-top:0.5rem; font-size: 1.2rem; color: #7F8080;}
.product_cont.c_02 h5{padding-bottom: 1rem;}
.guess_btn{text-align: center;}
.guess_btn a{padding: 0.5rem 1.5rem; margin: 1rem 0.5rem; font-size: 1.6rem; color: #fff; border-radius: 5rem; display: inline-block;
background: -webkit-gradient(linear,left top,right top,from(#ff649a),to(#ff4a80));
	background:-webkit-linear-gradient(left,#ff649a,#ff4a80);
	box-shadow: 0 7px 8px -2px rgba(255,100,154,0.4);}
.close{position: absolute; left: 50%; bottom: -5rem; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); width: 4rem; height: 4rem; background: url(https://huodongcdnws.fruitday.com/sale/guess1608/images/close_btn.png) no-repeat center; background-size: 2.8rem auto;}

/*按钮缩小*/
@-webkit-keyframes scaleSmall{
	0%{-webkit-transform: scale(1); transform: scale(1);}
	30%{-webkit-transform: scale(0.9); transform: scale(0.9);}
	100%{-webkit-transform: scale(1); transform: scale(1);}
}
@keyframes scaleSmall{
	0%{-webkit-transform: scale(1); transform: scale(1);}
	30%{-webkit-transform: scale(0.9); transform: scale(0.9);}
	100%{-webkit-transform: scale(1); transform: scale(1);}
}
/*水波扩散*/
@-webkit-keyframes spread{
	0%{ -webkit-transform:scale(1.2); transform:scale(1.2);opacity: 0.7;}
	100%{-webkit-transform:scale(3);opacity: 0;}
}
@keyframes spread{
	0%{ -webkit-transform:scale(1.2); transform:scale(1.2);opacity: 0.7;}
	100%{-webkit-transform:scale(3);opacity: 0;}
}
/*灰色按钮*/
@-webkit-keyframes fadeGrey{
	100%{background: #ccc;}
}
@keyframes fadeGrey{
	100%{background: #ccc;}
}

/*320*/
@media screen and (max-device-width:320px){
	.bomb_cont{width: 86%;}
	.lottery_rule li{font-size: 1.2rem;}
	.lottery_points li{height: 7.8rem;}
	.lottery_points li .in{height: 7.8rem;}
	.lottery_points li.lottery.active .in:before,.lottery_points li.lottery.active .in:after,.lottery_points li.lottery.active span:before,.lottery_points li.lottery.active span:after{height: 7.8rem;}
}
