.menu-more {background-color:#424242; border-radius:5px;margin:10px;text-align:center;display:block;position:relative;}
.menu-more span,.menu-more i{color:#fafafa;}
.menu-more span{padding-bottom:5px;display:inline-block;}
.fa-white{color:#fafafa;}
.swiper-ad-index .swiper-slide{padding:7px;}
.swiper-ad .swiper-slide{padding:7px;}
.swiper-ad-index img{border-radius:7px;}
.swiper-ad img{border-radius:7px;}
.swiper-slide img{width:100%;}

.swiper-mulu{width:100%;}
.mulu-on{font-weight:550;line-height:35px; transition: transform .5s;-webkit-transform: scale(1.4); text-align:center;}
.mulu-off{font-size:15px;line-height:35px;transition: transform .5s;text-align:center;}
.big-title{font-size:16px;padding-left:7px;margin:5px 10px;font-weight:550;}
.sub-title{font-size:14px;color:#b8b8b8;text-align:right;padding-right:10px;}
.sub-title2{font-size:14px;color:#555;text-align:left;padding-left:10px;border-left:2px solid #555;margin-left:10px;line-height:14px;margin-top:5px;}
.add-product,.addspan{cursor:pointer;}
.p-menu {

	text-align:center;
	color:#222;
	font-size:12px;
	white-space:nowrap;
	padding:0;
	line-height:20px;
	overflow:hidden
}
.tab-icon{line-height:30px;padding:0;margin:0;}
.tool_add {
	width:50px;
	height:40px;
	display:inline-block;
	border-radius:5px;
	background:#f96c27;
	background:-webkit-linear-gradient(top,#f96c27 0,#fa7027 100%);
	background:-moz-linear-gradient(top,#f96c27 0,#fa7027 100%);
	background:-o-linear-gradient(top,#f96c27 0,#fa7027 100%);
	background:linear-gradient(to bottom,#f96c27 0,#fa7027 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#f96c27,endColorstr=#fa7027,GradientType=0);
	transform-origin:center!important;
	cursor:pointer;
	text-align:center
}
.tool_add .ui-icon-zengjia {
	font-size:36px;
	line-height:40px;
	transition:all .2s linear;
	transform-origin:center!important
}
.indexfoot i{line-height:26px;padding-top:5px;}
.indexfoot p{line-height:16px;padding-bottom:3px;}
.shell{height:36px;padding:7px 0 0px 3px;}
 .tuibg{display:inline-block;width:60px;height:30px;background:url('images/tui2.png') no-repeat center center;background-size:60px 30px;float:left;}
    .shell a{ display:block;/*这个属性是必须的*/
 font-size:12px;
 line-height:30px;
 height:30px;
 overflow: hidden;
 text-decoration:none;
 color:#222;;
 font-family:Arial;

 
 }
 .hongbao-open{background:url('images/hongbao-open.png') no-repeat center center;background-size:auto 100%;}
 .hongbao-off{background:url('images/hongbao.png') no-repeat center center;background-size:auto 100%;}
 .tui-type{display:inline-block;line-height:14px;padding:0px 3px;margin:7px 3px 7px 0;}
 .one-line{padding-left:10px;overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
word-break:break-word;
-webkit-line-clamp: 1;}
.one-line-name{
  display:block;
  text-align:center;
  color:#222;
 font-size: 13px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

}
.two-line-name{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

-webkit-box-orient: vertical;
} 

 .three-line-name{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height:20px;
color:#555;
-webkit-line-clamp: 3;
font-size:15px;
height:60px;
-webkit-box-orient: vertical;
box-orient:vertical;
} 
.three-line-name-small{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height:20px;
color:#555;
-webkit-line-clamp: 3;
font-size:13px;
height:60px;
-webkit-box-orient: vertical;
box-orient:vertical;
} 

.three-line-name-auto{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height:20px;
color:#555;
-webkit-line-clamp: 3;
font-size:15px;
max-height:60px;
-webkit-box-orient: vertical;
box-orient:vertical;
} 

.title-frame {
	font-size:16px;
	font-weight:550;
	
	padding-left:4px;
}
 .know-img {
	height:100px;
	min-width:100%;
	max-width:none;
	margin:0 -100%
}
.c_nick{line-height:30px;color:#fff;text-align:left;font-size:14px;font-weight:600;padding-right:60px;padding-left:10px;height:30px;}
.know_date{font-size:0.8em;color:#999;line-height:25px;}
.know-title,.order-title{font-size:17px;font-weight:500;line-height:25px;padding:5px 0;}
.order-option-title{font-size:14px;color:#666;}
.know-list-desc{margin-bottom:5px;text-indent:2px;}
.know-radius-left img,.know-radius-left>div {
	border-radius:5px 0 0 5px
}
.know-radius img,.know-radius>div {
	border-radius:5px;
}
.know-radius-right img,.know-radius-right>div {
	border-radius:0px 5px 5px 0px
}
.cart-top-img img {
	border:2px solid #fff;
	border-radius:5px;
}
.top-com-name{font-size:14px;font-weight:500;padding-left:5px;padding-right:20px;line-height:20px;padding-top:3px;}
 .in-cart-comment{position:absolute;bottom:3px;left:10px;font-style:italic;font-size:12px;}
.know_desc{padding:7px 0;color:#666;text-indent:2em;line-height:1.5em;font-size:17px;}
.know_img{padding:10px 0}
.know_img img{border-radius:2px;width:100%;}
.know-list-img img{min-height:75px;}
.know_step_text_title{text-align:left;font-weight:550;font-size:17px;line-height:2em;}
.know_step_desc{text-indent:2em;line-height:1.5em;font-size:17px;}
.know_step_desc h3{font-size:17px;font-weight:500;text-indent:0;line-height:30px;}
.img-cook img {
	display:block;
	max-width:100%;
	height:auto;
	border-radius:5px;
} 
.img-cook-outer{position:relative;background:#fff;box-shadow: 2px 2px 2px #e6e6e8 ;border-top:1px solid #efeff1;border-left:1px solid #efeff1;display:block;}
.author_name{padding-left:3px;}
.author_text{font-size:0.8em;color:#999;max-width:100px;overflow:hidden;text-overflow: ellipsis;

-webkit-box-orient: vertical;
-webkit-line-clamp: 1;height:22px;line-height:22px;}
.auth-img-small{width:25px!important;height:25px!important;border-radius:25px;border:2px solid #fff;}
.ui-badge-cart {
	position:absolute;
	right:-1em;
	top:-.2em;
	
}
.ui-badge-order {
	position:absolute;
	right:-.8em;
	top:-0.2em
}
.td_num {
	padding:7px 0;
	font-size:14px
}
.img-dark-border-2 img {
	border:2px solid #222;
}
.img-dark-border-1 img {
	border:1px solid #222;
}
 /**商品展示**/
 .col-products,.col-cooks{

  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
flex-wrap:wrap;
	
}
.col-products>.ui-grid-2{justify-content:center;margin-top:6px;} 
.col-data-div{position:relative;background:#fff;box-shadow: 2px 2px 2px #e6e6e8 ;border-top:1px solid #efeff1;border-left:1px solid #efeff1;padding-bottom:4px;display:block;border-radius:5px;}
.col-data-div2{border-top:1px solid #f6f7f9;border-left:1px solid #f6f7f9;border-radius:3px;}
.clo-data-div>a{display:block;width:100%;}
.col-img img{border-radius:5px 5px 0 0;}
.col-img2 img{width:90%;border-radius:3px;}
.col-name-div{padding:0 5px;	 

	-webkit-tap-highlight-color: rgba(255,255,255,0);
   margin-top:5px;
	
	text-align:left;
	display:block;
	font-size: 14px;
 
    line-height: 20px;
    margin-bottom:5px;
    color: #3d3d3d;	
       height:20px;
	overflow: hidden;
    overflow:hidden;
 
  
	} 
.col-sate-div{text-align:center; font-size:13px;position:relative;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	align-items:stretch;height:30px;}
  .col-price-div{position:relative;text-align:left;margin-left:7px;padding:4px 0;-webkit-tap-highlight-color: rgba(255,255,255,0);}
.ias-noneleft{clear:both;line-height:30px;flex-basis: 100%;color:#999;}
.ias-spinner,.ias-trigger{clear:both;padding:10px;flex-basis: 100%;line-height:25px;color:#666;}
.scroll-top {
	position:fixed;
	z-index:12;
	width:30px;
	height:30px;
	bottom:70px;
	right:35px;
	border:1px solid #ddd;
	display:none;
	opacity:.7;
	border-radius:3px;
	background:url('images/goto-top.png') no-repeat center center #e7e7e7;
	background-size:24px 24px
}

.top-title{font-size:17px;padding-left:5px;font-weight:400;;}
.ping-list-div{min-height:150px;position:relative;}
.col_num {
	padding:7px 0;
	font-size:14px
}
.col_num2 {
	padding:5px 0 20px 0;
	font-size:14px
}
.col_num3{padding:5px 0 14px 0;}
.col_text{padding:5px;}
.col_text2{padding:10px 5px 10px 5px;}

.previewdiv{text-align: center;
 
   width:100%;
height:100%;  
 }
.col_label_title{
color:#999;line-height:40px;	
	}
.col_label_value{
	line-height:30px;
	font-size:16px;font-weight:400;
	font-family:sans-serif
	
	}
.step_options{-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	flex-grow:1;
	-webkit-align-self:center;text-align:center;}
	
.ping-list-div{min-height:150px;position:relative;}
#ping-list-div{font-size:15px;}
.pinglun_view{padding:5px 10px 20px 5px}
.show_ping_text{padding-left:30px;}
.ping_reply_one{padding-left:30px;padding-top:10px;}
.pinglun_auth{padding-bottom:5px;}
.show_reply_text{padding-left:30px;}
.show_reply_time{padding-left:30px;padding-top:5px;color:#999;font-size:14px;}
.write_style{color:#333;}	
.cookname{font-size:16px;line-height:30px;font-weight:500;color:555;}
.detail-name{

	-webkit-tap-highlight-color: rgba(255,255,255,0);
	padding-bottom:7px;

	font-size: 16px;
	font-weight:500;
   margin-top:5px;
    line-height: 22px;
  
    color: #252525;	
	overflow: hidden;
    
    display: -webkit-box;
   
    -webkit-box-orient: vertical;
		
	
	
	
}
.cookdesc{text-indent:2em;line-height:20px;font-size:15px;color:#666;width:100%;overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
max-height:60px;

-webkit-box-orient: vertical;}	
.processdiv{background:#fff;padding:5px;margin:7px 5px;border-radius:5px;}
.progress-title{
		    font-size: 10px;
		    font-weight: 350;
		  
		    margin: 0 0 5px;
		}
		.progress{
		    height: 8px;
		    background: #fed086;
		    border-radius:8px;
		   
		   
		
		   
		    position: relative;
		}
		.progress .progress-bar{
		    border-radius: 8px;
		    height:100%;;
		 width:100%;
		    -webkit-animation: animate-positive 2s;
		    animation: animate-positive 2s;
		}
		@-webkit-keyframes animate-positive{
		    0% { width: 0; }
		}
		@keyframes animate-positive{
		    0% { width: 0; }
		}
.member_card{	padding:20px 20px 10px 20px;position:relative;}
com_desc_title{font-size:1.2em;font-weight:500;line-height:2em;}
.com_desc{text-indent:2em;line-height:20px;font-size:15px;color:#555;}
.com_desc_image img{width:100%;}
.wrap-menu{padding-top:5px;align-self:center!important;
	-webkit-align-self:center!important;
	text-align:center
	
}
.care-menu{padding:5px;}
.care-menu span{border:1px solid #dedede; box-sizing:border-box;border-radius:5px;padding:10px 2px;margin:5px 10px;display:block; cursor:pointer;}
.care-menu span:active{
	
	 background-color:#D9D9D9;
	}
.care_title{line-height:40px;padding-left:10px;font-size:16px;font-weight:500;}

.tate-title{font-size:17px;font-weight:500;}
.tate-title2{font-size:17px;font-weight:500;padding-top:7px;}
.tate-small-title{font-size:12px;font-weight:350;padding-bottom:5px;}
.step_title_img{line-height:30px;font-size:17px;font-weight:500;text-align:center;}
.step_title{line-height:30px;font-size:17px;font-weight:500;text-align:left;position:relative;}
.step_desc{text-align:left;line-height:1.4em;position:relative;font-size:15px;}
.sate_step{padding:3px 0;}
 .message_list_text{text-align:left;color:#999;font-size:0.9em;}
 .m-list-div{margin:5px 0;}
  .span-choose{display:block;border:1px solid #ddd;margin:5px 7px;line-height:32px;text-align:center;background:#e0e1e3;position:relative;border-radius:5px;cursor:pointer;}
 .myself{font-size:0.8em;color:#999;}
 .split_div{margin-bottom:5px;background:#fff;padding:5px 10px;}
 .cook_slide{background:#fff;}
.label_index{font-size:14px;font-weight:350;color:#aaa;}
.circle_index{font-weight:500;font-family:monospace;font-size:20px;border-radius:30px;line-height:24px;border:1px solid #666;width:26px;height:26px;text-align:center;color:#666;display:inline-block;}
.cook_desc{font-size:16px;color:#666;text-indent:2em;;padding:10px;}
.chart-minute{background:#aaa;color:#fff;font-size:9px;display:inline-block;padding:0 5px;text-align:center;}
.chart-logo-div{padding:5px;background:#f3f4f6;}
.message_logo{width:50px;height:50px; -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;}
 .div-search-item{line-height:35px;}
 .span-top{line-height:38px;text-align:center;}
 .banner_title{font-size:17px;font-weight:500;text-align:center;line-height:40px;}
 .card_choose{line-height:40px;border:1px solid #dedede;border-radius:5px;padding:7px 10px;text-align:center;font-weight:300;font-size:1.4em;cursor:pointer;background:#fff; font-family: arial;display:inline-block;}
.card_choose_on{border:1px solid #f96c27!important;color:#f96c27!important;}
.mybalance-large {
	border-radius:50%;
	font-size:30px;
	font-weight:500;

	display:inline-block;
	width:150px;
	height:150px;
	line-height:150px;
	text-align:center;
	border:5px solid #f96c27;
}

 .tip-div{
	position: relative;padding:5px 10px;
	margin-top:10px;margin-right:10px;
     box-shadow: 0px 0px 3px #535353;
     border-radius:5px;
     -webkit-border-radius:5px;
     background:#3e3e3e;
    color:#fafafa;
	}
.tip-div a{color:#fafafa;padding-left:10px;}
.ui-menu{
padding:0px 10px 0px 0px;  
height:40px; font-size:15px;line-height:40px; 


position:relative;  
}
.ui-menu:after{
  content:" ";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  height:1px;
  border-bottom:1px solid #3e3e3e;
  color:#a1a1a1;
  -webkit-transform-origin:0 100%;
          transform-origin:0 100%;
  -webkit-transform:scaleY(0.5);
          transform:scaleY(0.5);
  z-index:2;
}
.ui-menu:last-child:after{
  display:none;
}

.ui-menu-icon{text-align:center;width:40px;height:40px;}
.top-tip {
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid #3e3e3e;
	position:absolute;
	top:-10px;
	margin-left:-10px
}
.bottom-tip {
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid #3e3e3e;
	position:absolute;
	bottom:-10px;
	margin-left:-10px
}
.tip-center {
	left:50%
}
.tip-right {
	right:15px
}
.tip-left {
	left:10px
}
.top-tip:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid #3e3e3e;
	position:absolute;
	margin-left:-10px;
	z-index:-1;
	filter:blur(0px)
}
.bottom-tip:after {
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid #3e3e3e;
	position:absolute;
	margin-left:-10px;
	z-index:-1;
	filter:blur(3px)
}
.choose-list{background:#f3f4f6;display:block;}
.choose-list li{float:left;width:33.33333333%;text-align:center;text-align:center;cursor:pointer;}

.top-title{font-size:16px;letter-spacing:2px;font-weight:550;color:555;}
.process_bg_div{background:#cecece;border-radius:8px;height:12px;width:100%;position:relative;margin-bottom:5px}
.process_div_alert{display:inline-block;background:#df7070;position:absolute;left:0px;top:0px;height:12px;border-radius:8px 0 0 8px;}
.process_div_normal{display:inline-block;background:#65de69;position:absolute;left:0px;top:0px;height:12px;border-radius:8px 0 0 8px;}
.process_div_whole{display:inline-block;background:#65de69;position:absolute;left:0px;top:0px;height:12px;border-radius:8px;border:1px solid #007c03;}
.process_div_whole_over{display:inline-block;background:#00a04c;position:absolute;left:0px;top:-1px;height:12px;border-radius:8px;}
.process_div_whole_alert{display:inline-block;background:#df7070;position:absolute;left:0px;top:-1px;height:12px;border-radius:8px;}
.process_div_none{display:none;
	}
.process_num{position:absolute;left:0;top:0;text-align:center;width:100%;line-height:12px;font-size:11px;}	
	
.process_title{position:relative;font-size:11px;line-height:13px;height:13px;}
.process_title_left{display:inline-block;position:absolute;left:2px;top:0;}
.process_title_right{display:inline-block;position:absolute;right:2px;top:0;}







  .chart-left{text-align:left;margin-right:60px;}

  .chart-right{text-align:right;margin-left:60px;}

.chart-image{width:80%;}
.chart-image img{display:block;max-width:100%;height:auto;}
.chart-text {
	display:inline-block;
  position:relative;
  padding:10px;
  margin:1em 0 3em;
  border:1px solid #dedede;
  color:#333;
  background:#fff;
  line-height:1.4em;
  /* css3 */
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}
  .chart-right .chart-text{background:#76c661;border:1px solid #3b8c2b;text-align:left;}
/* Variant : for left positioned triangle
------------------------------------------ */

.chart-left .chart-text{
  margin-left:10px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.chart-right .chart-text{
  margin-right:10px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.chart-text:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.chart-text:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.chart-text.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.chart-text.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.chart-left .chart-text:before {
  top:7px; /* controls vertical position */
  bottom:auto;
  left:-10px; /* value = - border-left-width - border-right-width */
  border-width:10px 10px 10px 0;
  border-color:transparent #ddd;
}

/* creates the smaller  triangle */
.chart-left .chart-text:after {
  top:8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-9px; /* value = - border-left-width - border-right-width */
  border-width:9px 9px 9px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.chart-right .chart-text:before {
  top:7px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-10px; /* value = - border-left-width - border-right-width */
  border-width:10px 0 10px 10px;
  border-color:transparent #3b8c2b;
}

/* creates the smaller  triangle */
.chart-right .chart-text:after {
  top:8px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-9px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 9px;
  border-color:transparent #76c661;
}


@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale-pulse-out > div {
  background-color: #63b359;
  width: 4px;
  height: 20px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85);
          animation: line-scale-pulse-out 0.9s 0s infinite cubic-bezier(.85, .25, .37, .85); }
  .line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
    -webkit-animation-delay: 0.2s !important;
            animation-delay: 0.2s !important; }
  .line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    -webkit-animation-delay: 0.4s !important;
            animation-delay: 0.4s !important; }




/*游戏区域*/
.lottery {
    animation: changeBg .5s ease infinite;
    overflow: hidden;
    padding: 20px;
    width: 95%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
@keyframes changeBg {
0% {
background-image:url(../img/k1.png);
}
100% {
background-image:url(../img/k2.png);
}
}
.lottery .lottery-item {
    height: 340px;
    position: relative;
    margin-top: 10px;
    margin-left: 10px;
}
.lottery .lottery-item ul li {
    width: 33.33333333%;
    position: absolute;
    padding-right: 10px;
}
.lottery .lottery-item ul li:nth-child(2) {
    left: 33.33333333%;
}
.lottery .lottery-item ul li:nth-child(3) {
    left: 66.66666666%;
}
.lottery .lottery-item ul li:nth-child(4) {
    left: 66.66666666%;
    top: 110px;
}
.lottery .lottery-item ul li:nth-child(5) {
    left: 66.66666666%;
    top: 220px;
}
.lottery .lottery-item ul li:nth-child(6) {
    left: 33.33333333%;
    top: 220px;
}
.lottery .lottery-item ul li:nth-child(7) {
    left: 0;
    top: 220px;
}
.lottery .lottery-item ul li:nth-child(8) {
    left: 0;
    top: 110px;
}
.lottery .lottery-item ul li .box {
    height: 100px;
    position: relative;
    text-align: center;
    overflow: hidden;
    background: url(../img/bg2.png) no-repeat center;
    background-size: 100% 100%;
    padding:5px;
}
.lottery .lottery-item ul li .box img {
    display: block;
    height: 50px;
 max-width:100%;
	max-height:50px;
    margin: 0 auto;
    
    margin-top: 10px;
    margin-bottom: 5px;
}
.lottery .lottery-item ul li .box p {
    color: #708ABF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}
.lottery .lottery-item ul li.on .box {
    background: url(../img/bg1.png) no-repeat center;
    background-size: 100% 100%;
}
.lottery .lottery-item ul li.on .box p {
    color: #fff;
}
.lottery .lottery-item .lottery-start {
    position: absolute;
    left: 33.33333333%;
    width: 33.33333333%;
    top: 110px;
    padding-right: 10px;
}
.lottery .lottery-item .lottery-start .box {
    height: 100px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    background: url(../img/bg1.png) no-repeat center;
    background-size: 100% 100%;
}
.lottery .lottery-item .lottery-start .box p b {
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 15px;
    line-height: 30px;
    display: block;
}
.lottery .lottery-item .lottery-start .box:active {
    opacity: 0.7;
}
.lottery .lottery-item .lottery-start .box.gray {
    background: url(../img/bg3.png) no-repeat center;
    background-size: 100% 100%;
}
.lottery .lottery-item .lottery-start .box.gray p {
    color: #708ABF;
    font-weight: bold;
}
.lottery .lottery-item .lottery-start .box.gray p b {
     font-size: 20px!important;
    margin-top: 16px;
    margin-bottom: 15px;
    line-height: 30px;
    display: block;
    
}

/*中奖提示*/
#mask2 {
 
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
 
}
#mask2 .blin {
  width: 100%;
  height: 100%;
  background: no-repeat center / contain;
  background-image: url("images/gold.png");
  -o-animation: circle 10s linear infinite;
  -ms-animation: circle 10s linear infinite;
  -moz-animation: circle 10s linear infinite;
  -webkit-animation: circle 10s linear infinite;
  animation: circle 10s linear infinite;
}
@keyframes circle {
  0% {
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#mask2 .caidai {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: no-repeat center / contain;
  background-image: url("images/dianzhui.png");
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
#mask2 .winning {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 8rem;
  height: 6.8rem;
  margin: -3.46666667rem 0 0 -4rem;
  -o-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  -webkit-transform: scale(0.1);
  transform: scale(0.1);
}
#mask2 .reback {
  -o-animation: reback .5s linear forwards;
  -ms-animation: reback .5s linear forwards;
  -moz-animation: reback .5s linear forwards;
  -webkit-animation: reback .5s linear forwards;
  animation: reback .5s linear forwards;
}
@keyframes reback {
  100% {
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.winning .red-head {
  position: relative;
  top: -0.33333333rem;
  width: 100%;
  height: 4.46666667rem;
  background: no-repeat center / contain;
  background-image: url("images/top.png");
}
.winning .red-body {
  position: relative;
  top: -2.13333333rem;
  z-index: 2;
  width: 100%;
  height: 4.8rem;
  background: no-repeat center / contain;
  background-image: url("images/bottom.png");
}
.winning #card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin-left: -3.2rem;
  margin-top: -1.06666667rem;
  width: 80%;
  height: 4.26666667rem;
  background: no-repeat center / contain;
  background-image: url("images/redPack/middle.png");
  -o-transition: top .5s;
  -ms-transition: top .5s;
  -moz-transition: top .5s;
  -webkit-transition: top .5s;
  transition: top .5s;
}
#card .win {
  display: block;
  margin: 0.13333333rem auto;
  width: 92%;
  height: 3.86666667rem;
 line-height:1rem;

  background: no-repeat center / contain;
    background-size:auto 60%;
 
}
.winning .pull {
  -o-animation: card .5s linear forwards;
  -ms-animation: card .5s linear forwards;
  -moz-animation: card .5s linear forwards;
  -webkit-animation: card .5s linear forwards;
  animation: card .5s linear forwards;
}
@keyframes card {
  100% {
    margin-top: -3.2rem;
  }
}
.winning .btn {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 2;
  width: 4.85333333rem;
  height: 0.94666667rem;
  margin-left: -2.42666667rem;
 font-size:20px;
 text-align:center;
 color:#fde932;font-weight:bold;
}
#close {
  opacity: 0;
  position: absolute;
  right: 0rem;
  top: -1.06666667rem;
  z-index: 10;
  width: 30px;
  height: 30px;
   background: no-repeat center / contain;
  background-image: url("images/close.png");
  -o-animation: fadein .5s .5s linear forwards;
  -ms-animation: fadein .5s .5s linear forwards;
  -moz-animation: fadein .5s .5s linear forwards;
  -webkit-animation: fadein .5s .5s linear forwards;
  animation: fadein .5s .5s linear forwards;
}
@keyframes fadein {
  100% {
    opacity: 1;
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.nav-title{line-height:50px;}