@charset "utf-8";

/*
 * 常用记录
 *		主色调 ：
 *
 *		z-index: topImg(10),wrap(20)
 
 *		多行省略 ： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 *		单行省略 ： white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 */

*{ outline:none;}
body{ font-size:12px; background:#fff; font-family:KaiTi;}
.body-viewFrame{ padding:0; background:url(../images/loading.gif) no-repeat center center; height:100%; overflow-y:hidden;}
body.body-gray{ background:#f1f1f1;}
body.body-white{ background:#fff;}
.main-width{ width:100%; max-width:1400px; margin:0 auto; position:relative;}
input[type="checkbox"],input[type="radio"]{ display:inline-block; vertical-align:middle; width:17px; height:17px; outline:none; margin:-3px 5px 0;}
.fa{ font-size:16px;}
.border-h{ width:100%; height:0; padding-top:1px; background:#ddd; margin:20px 0;}
img{ display:block;}




/*总布局*/
.topImg{ width:100%; position:relative; z-index:10;}
.wrap-bg{ position:absolute; width:100%; left:0; top:450px; z-index:5;}
.wrap{ position:relative; z-index:20; width:650px; margin:-50px auto 0; background:url(../../images/wrapbg.png) repeat-y center center; background-size:100%; padding:0 60px;}

/**
 *nav
 *组
 **/
.wrap .nav{text-align:center;}
.wrap .nav a{ display:block;float:left; width:130px; height:83px; line-height:112px; color:#fff; font-size:22px; background:url(../../images/nav-green.png) no-repeat center center; background-size:100%;}
.wrap .nav a:hover{ background-image:url(../../images/nav-green-hover.png); -webkit-transform:translateY(-10px);}
.wrap .nav a.active{ background-image:url(../../images/nav-yellow.png);color:#ff6102; font-weight:bold; }
@-webkit-keyframes navA{
	0%{-webkit-transform:translateY(-10px);}
	100%{-webkit-transform:translateY(0);}
}

/**
 *button-wrap
 *开始抽奖，中奖名单
 **/
.button-wrap{ padding:40px 0 0 0; text-align:center;}
.button-wrap a{ display:inline-block; margin:0 15px; width:170px; height:67px; line-height:70px; font-size:22px; color:#fff; background: no-repeat center center; background-size:100%; cursor:pointer;}
.button-wrap a.start{background-image:url(../../images/btn-red.jpg);}
.button-wrap a img{ vertical-align:middle; display:inline-block;}
.button-wrap a.active{background-image:url(../../images/btn-red-active.png);}
.button-wrap a.result{display:none;background-image:url(../../images/btn-green.jpg);}
/**
 *ul-progress 
 *进度条
 **/
.ul-progress{ list-style:none;padding:10px 0 0 0; width:560px; margin:0 auto;}
.ul-progress li{ margin:30px 0 0 0; position:relative;}
.ul-progress li .bg{ width:80%; margin:0 auto; display:block;}
.ul-progress li .title{ position:absolute; line-height:85px; text-align:center; font-size:30px; color:#fff; z-index:10; left:50%; top:60px; width:90px; margin-left:-45px;}
.ul-progress li .progress{ position:absolute; top:110px; left:50%; height:47px; width:350px; margin-left:-175px; background:#741404; border-radius:47px; overflow:hidden;}
.ul-progress li .progress img{ width:100%; position:relative; z-index:10;}
.ul-progress li .progress .in{ position:absolute; left:0; top:0; width:0; height:100%; background:#fcda3a; z-index:9;}
.ul-progress li .progress .num{ position:absolute; left:0; top:0; width:100%; height:100%; line-height:47px; text-align:center; color:#fff; z-index:20; font-size:24px; font-weight:bold;}


/*footer*/
.footer{ position:relative; margin:40px 0 0 0;  background:#4557ab; color:#fff; line-height:35px; font-size:20px; text-align:center; z-index:20;}
.footer img{ max-width:100%;}
.footer .content{width:700px; margin:0 auto; padding:50px 0 100px;}
.footer .copyright{ padding:40px 0; border-top:1px dashed #fff; font-size:18px; line-height:30px; margin:0 20px;}



/*中奖名单*/
.nameList{ display:none; position:absolute; top:0; left:0; right:0;z-index:1000; font-family:microsoft yahei;}
.cover{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:url(../../images/bg-50.png); z-index:999;}
.nameList .nameListWrap{ position:absolute; top:150px; width:470px; max-wdith:100%; left:50%; margin-left:-260px; background:#fcf0b3; border-radius:20px; border:2px solid #ff9000; padding:35px 20px 20px;}
.nameListWrap .close{ position:absolute; width:50px; right:-20px; top:-20px; cursor:pointer;}
.nameListWrap .close:hover{ opacity:.8;}
.nameListWrap .t{ position:absolute; width:180px; top:0; left:50%; margin:-24px 0 0 -90px;}
.nameListWrap .b{ font-size:14px; color:#333; padding:20px 0 15px; border-bottom:1px solid #ff9100; line-height:22px;}
.nameListWrap .b h3{ color:#ff9100; font-size:24px; padding-bottom:15px;}
.nameListWrap .b ul{ list-style:none;}
.nameListWrap .b ul li{ width:50%; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 0;}
.nameListWrap .b ul li span{ color:#777;}
.nameListWrap .b .page{ margin:10px 0 0; font-size:14px; color:#ff9100; text-align:right; cursor:pointer;}
.nameListWrap .b .page a{ padding:0 5px;}
.nameListWrap .b .page .current{ color:#999;}
.nameListWrap .b .page a:hover{ text-decoration:underline;}
.nameListWrap .nameList-bottom{ padding:20px 0 0; text-align:center;}
.nameListWrap .nameList-bottom .print{ -webkit-appearance:none; border:0;display:inline-block; width:150px; height:60px; line-height:65px; font-weight:bold; font-size:20px; cursor:pointer; background:url(../../images/btn-yellow.png) no-repeat center center; background-size:100%; color:#ff6102;}


/**/
.complete .ul-progress li .progress .in{ width:100%!important;}
.complete .start{display:none;}
.complete .button-wrap a.result{ display:inline-block;}

/*移动端适配*/
@media screen and (max-width:500px){
	.wrap{ width:95%; margin-top:-20px;}
	.wrap .nav a{ width:25%; font-size:1.2em; background-position:center center; line-height:100px;}
	
	.wrap-bg .topleft{ width:50px; right:auto; left:0; margin:0;}
	.wrap-bg .topright{ width:50px; left:auto; right:0; margin:0;}
	
	.button-wrap{ padding:0;}
	.button-wrap a{ width:120px; font-size:1.5em;}
	
	.ul-progress{ padding:0;}
	.ul-progress li h3{ line-height:45px; font-size:1.5em}
	.ul-progress li .progress{ width:70%; left:15%; margin:0; bottom:20px; top:auto; height:30px;}
	.ul-progress li .progress img{ display:none;}
	.ul-progress li .progress .num{ line-height:30px; font-size:1.2em}
	
	.nameList .nameListWrap{ width:80%; margin:0 10%; left:auto; right:auto; box-sizing:border-box;}
	.nameListWrap .t{ width:140px; margin-left:-70px;}
	.nameListWrap .close{ width:40px;}
	.nameListWrap .b{ padding-top:10px;}
	.nameListWrap .b h3{ font-size:1.2em;}
	.nameListWrap .b ul li{ width:100%;}
	.nameListWrap .nameList-bottom a{width:120px; font-size:1.5em;}
}