@charset "utf-8";
/* CSS Document */

html,h1{ width:100%; padding:0; margin:0; display:block;}
body{   padding:0; margin:0; display:block;}
body,textarea,input,select,option{font-size:12px;color:#333;font-family:"微软雅黑", "Microsoft YaHei","Verdana","Arial","Helvetica",sans-serif;}

body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,textarea,input,select,option,form{margin:0 auto;}
th,td,ul,ol,textarea,input,select,option{padding:0}
a{text-decoration:none;color:#333}
a,textarea,input{outline:none}
a:hover{text-decoration:none}
textarea{overflow:auto;resize:none}
table{border-collapse:collapse}
li{list-style:none}
a img{border:none}
body{background-color:#fff}
.fl{float:left}
.fr{float:right}
.q:after { content: '\20'; clear: both; display: block; }
.q{zoom:1}
.clear{clear:both;height:0;overflow:hidden}
.clears:before,.clears:after{content:'';display:table}
.clears:after{clear:both}
.clears{zoom:1}
.img img{display:block}
label,label input{vertical-align:middle}
.btn{cursor:pointer;border:none}
.rel{position:relative}
.abs{position:absolute}
body{background-color:#eeeeee;  min-width:320px; margin:0 auto; position:relative; }



.hide{ display: none; }
.show{ display: block; }
.box-sizing{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.center{display: box;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;}

.h-center{display: box;
    display: -webkit-box;
    display: -moz-box;
    box-pack:center;
    -webkit-box-pack: center;
    -moz-box-pack: center;}
.v-center{display: box;
    display: -webkit-box;
    display: -moz-box;
    box-align: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    }


.top_wrap{ width: 100%; padding-top:33.59375%; position: relative; overflow: hidden; }
.top_img{ height: 54%; width:86%; position: absolute; left: 7%; top:28% ; z-index: 1; overflow: hidden;  }
.top_img img{ width: 100%; height: 100%; }
.top_title{ height: 54%; width:86%; position: absolute; left: 7%; top:28% ; z-index: 2; overflow: hidden; text-align: center;
font-size: 24px; color: #fff; 
 }


.select_wrap{ width: 100%; padding-top:25.3125%; position: relative; overflow: hidden;  }
.select_box{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.select_wrap a{ width: 28%; height: 33.3%;  position: absolute; overflow: hidden; background: #aaaaaa;
color: #fff; font-size:12px ; 
 }
 .select_wrap a span{ color: #f00;  font-weight: bold;}
.select_wrap a.select_active{ background: #2ca298; }

.select_a1{ top: 0; left: 7%; }
.select_a2{ top: 0; left: 36%; }
.select_a3{ top: 0; right: 7%; }

.select_a4{ top: 39.5%; left: 7%; }
.select_a5{ top: 39.5%; left: 36%; }
.select_a6{ top: 39.5%; right:7%; }

.list_wrap{ width: 100%; padding-top:87%; position: relative;  }

.list_box{ border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
 background: #fff; position: absolute; top: 0; left: 7%; width: 86%; height: 98%;
box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
	
 }

 .border-radius{
 	border-radius: 0 0 6px 6px;
 	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	-o-border-radius: 0 0 6px 6px;
	-ms-border-radius: 0 0 6px 6px;
	
 }

.list_item{ height: 25%;  width: 100%; position: relative; margin: 0 auto;border-bottom:1px solid #dadada;   }
.list_input{ height: 100%; border: none; border: 0; left: 6%; margin: 0; width: 88%;  color: #a6a6a6; font-size: 14px;  
	position: absolute;top: 0;}
.list_img{ width:24.8% ; position: absolute; height: 100%; right:3%;  top:0;  }
.right_item img{ width: 100%; height: 100%; }


.form_btn_wrap{ width: 100%; padding-top:26.25%; position: relative; }
.form_btn{ height: 60%; border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px; position: absolute; top: 20%; background: #fff; left: 7%; width: 86%;box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc; font-size: 18px; color: #2ca298; }
 /*-moz-对应 Firefox, 
-webkit-对应 Safari and Chrome
 -o- for Opera
 -ms- for Internet Explorer*/

 .result_wrap{ width: 100%;  position: relative;   }
.result_box{  border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px; position: absolute; top: 0%; background: #fff; left: 7%; width: 86%;box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc; margin-bottom: 8%; padding-bottom: 4%; }
.result_img{ height: 50%; width: 94%; position: relative; margin: 0 auto; }
.result_img img{ width: 100%; height: 100%; }
.result_tips{ height: 22%; text-align: center;color: #ff6600; font-size: 12px; font-weight: bold; }
.result_code{ height: 22%; text-align: center;color: #2ca298; font-size: 12px; font-weight: bold; }


.list_wrap1{ width: 100%; padding-top:16.875%; position: relative;  }

.list_box1{ border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
 background: #fff; position: absolute; top: 0; left: 7%; width: 86%; height: 98%;
box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
	border-bottom:1px solid #dadada;
 }

.list_item1{ height: 100%;  width: 88%; position: relative; margin: 0 auto;   }
.list_input1{ height: 100%; border: none; border: 0; left: 0; margin: 0; width: 100%;  color: #a6a6a6; font-size: 14px;  position: absolute;top: 0;}
.list_img1{ width:19.23% ; position: absolute; height: 100%; right:0;  top:0;  }
.right_item1 img{ width: 100%; height: 100%; }


/*2个框*/
.list_wrap2{ width: 100%; padding-top:35%; position: relative;  }

.list_box2{ border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
 background: #fff; position: absolute; top: 0; left: 7%; width: 86%; height: 98%;
box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
	
 }



.list_item2{ height: 50%;  width: 100%; position: relative; margin: 0 auto;border-bottom:1px solid #dadada;   }
.list_input2{ height: 100%; border: none; border: 0; left: 6%; margin: 0; width: 88%;  color: #a6a6a6; font-size: 14px;  
	position: absolute;top: 0;}
.list_img2{ width:19.9% ; position: absolute; height: 100%; right:3%;  top:0;  }
.right_item2 img{ width: 100%; height: 100%; }

/*3个框*/

.list_wrap3{ width: 100%; padding-top:60%; position: relative;  }

.list_box3{ border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
 background: #fff; position: absolute; top: 0; left: 7%; width: 86%; height: 98%;
box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
	
 }



.list_item3{ height: 33%;  width: 100%; position: relative; margin: 0 auto;border-bottom:1px solid #dadada;   }
.list_input3{ height: 100%; border: none; border: 0; left: 6%; margin: 0; width: 88%;  color: #a6a6a6; font-size: 14px;  
	position: absolute;top: 0;}
.list_img3{ width:22.5% ; position: absolute; height: 100%; right:3%;  top:0;  }
.right_item3 img{ width: 100%; height: 100%; }



/*5个框*/

.list_wrap5{ width: 100%; padding-top:100%; position: relative;  }

.list_box5{ border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
 background: #fff; position: absolute; top: 0; left: 7%; width: 86%; height: 98%;
box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
	
 }



.list_item5{ height: 20%;  width: 100%; position: relative; margin: 0 auto;border-bottom:1px solid #dadada;   }
.list_input5{ height: 100%; border: none; border: 0; left: 6%; margin: 0; width: 88%;  color: #a6a6a6; font-size: 14px;  
	position: absolute;top: 0;}
.list_img5{ width:22.7% ; position: absolute; height: 100%; right:3%;  top:0;  }
.right_item5 img{ width: 100%; height: 100%; }


/*buy*/
.select_id_wrap{ padding-top: 8%; padding-bottom: 8%; width: 86%; margin:0 auto; }

.select_id_inner{ width: 100%;  background: #fff; }

 .border-radius-all{
 	border-radius:  6px;
 	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-o-border-radius: 6px;
	-ms-border-radius: 6px;
	
 }
 .box-shadow{
 	box-shadow: 0 5px 5px -4px #ccc;/*底部阴影*/
-moz-box-shadow: 0 5px 5px -4px #ccc;
	-webkit-box-shadow: 0 5px 5px -4px #ccc;
	-o-box-shadow: 0 5px 5px -4px #ccc;
	-ms-box-shadow: 0 5px 5px -4px #ccc;
 }
 .select_title_wrap{  width: 100%; padding-top: 12.8%; position: relative; border-bottom:1px solid #dadada; }
 .num_input{ height: 100%; border: none; border: 0; left: 3%; margin: 0; width:92%;  color: #a6a6a6; font-size: 14px;  
	position: absolute;top: 0; z-index: 1}
.num_img{width:12.8% ; position: absolute; height: 100%; right:3%;  top:0; z-index: 2;}	
.num_img img{ width: 100%; height: 100%; }


.num_ul{  }

.num_ul li{ height: 30px; line-height: 30px; font-size: 14px;color: #a6a6a6; text-align: center; border-bottom:1px solid #eaeaea; }
.num_ul li.li_active{ background:#2ca298; color: #fff; }

.money_wrap{ height: 40px; line-height: 40px; width: 86%; text-align: right; color: #f00; font-weight: bold; font-size: 14px; margin: 0 auto; display: none; }
.wechat_wrap{   width: 100%;    padding-top:15.625%; position: relative;}

.wechat_btn{ width: 86%;  height: 100%; overflow: hidden; position: absolute; left: 7%;  top: 0; }
.wechat_btn img{ width: 100%; height: 100%; }


.line-gap{ width: 100%; padding-top: 5%; position: relative; }


    .score_wraps{ padding-top: 20px; padding-bottom: 20px;
    width: 96%;
    margin: 0 auto;
    border-bottom: 1px solid #ddd;
    line-height: 20px;
    font-size: 14px;
    color: #757575;
    margin-bottom: 20px;
     }


.enter_wrap{ padding-top: 20px; padding-bottom: 20px; width: 96%; margin:0 auto; }

            .enter_wrap a{ width: 60%; height: 30px; line-height: 30px; text-align: center;
                background: #f00; color: #fff; display: block; border-radius: 30px;
                margin:0 auto;
            }
   

.xy_title{ height: 40px; line-height: 40px; text-align: center;font-size: 14px;
                background: #4e9ee2;
                width: 96%;
                margin:0 auto;border-radius: 40px;
                color: #fff;
             }            

body{background-color:#fff; margin:0 auto; position:relative; }
body, div, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding:0;margin:0; }
ul,li{ list-style: none;list-style-type:none;}
.page {display: none;position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;overflow: hidden;}
#datescroll div{float: left;margin-left: 10%;margin-top: 15px;padding-right: 22px;}
#datescroll_datetime div{float: left;margin-left: 10%;padding-right: 22px;}
#yearwrapper{position: absolute;left: 0;top:45px;bottom: 60px;width:80%;}
#monthwrapper{position: absolute;left: 26%;top:45px;bottom: 60px;width:80%;}
#daywrapper{position: absolute;left: 50%;top:45px;bottom: 60px;width:80%;}
#Hourwrapper{position: absolute;left: 0;top:195px;bottom: 68px;width:80%;}
#Minutewrapper{position: absolute;left: 26%;top:195px;bottom: 68px;width:80%;}
#Secondwrapper{position: absolute;left: 50%;top:195px;bottom: 68px;width:80%;}
#Hourwrapper ul li{color: #898989;font-size: 12px;}
#Minutewrapper ul li{color: #898989;font-size: 12px;}
#Secondwrapper ul li{color: #898989;font-size: 12px;}
#yearwrapper ul li{color: #898989;font-size: 12px;}
#monthwrapper ul li{color: #898989;font-size: 12px;}
#daywrapper ul li{color: #898989;font-size: 12px;}
#markyear{position:relative; margin-left: 76px;top:-2px;}
#markmonth{position:relative; margin-left: 40px;top:-2px;}
#markday{position:relative; margin-left: 42px;top:-2px;}
#markhour{position:relative; margin-left: 62px;top:-2px;}
#markminut{position:relative; margin-left: 58px;top:-2px;}
#marksecond{position:relative; margin-left: 68px;top:-2px;}
#dateheader{width: 100%;height: 50px;background: #79C12F;text-align: center;color: #fff;line-height: 50px;font-size: 20px;}
#setcancle ul{text-align: center;line-height: 30px; margin:1px auto;font-size: 20px;}
#setcancle ul li{border-radius:3px;float: left;width: 40%;height: 30px;list-style-type: none;font-family:'microsoft yahei';font-size:16px;}
#dateconfirm{position: absolute;background:#79C12F;left:20px;color:#fff;}
#datecancle{position: absolute;background:  #dcdddd;right:20px;width: 40%;color:#666;}
#dateshadow{display: none;position: absolute;width: 100%;height: 100%;top:0;left:0;background: #000; filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
#datePage{font-size: 22px; border-radius: 3px; position:absolute;top:110px;MARGIN-RIGHT: auto;vertical-align:middle;
MARGIN-LEFT: auto;width: 80%;;height: 240px;background: #FFFFFF;z-index:9999999;}
#datetitle{width: 100%;height:50px;background: #79C12F;text-align: center;color: #fff;line-height: 50px;font-size: 20px;font-family:'microsoft yahei';}
#datetitle h1{font-weight:normal;}
#datemark{font-size: 18px;left:5%;width: 90%;height: 20px;position:absolute;top:108px;background:#eee;border:1px solid #eee;}
#timemark{font-size: 18px;left:5%;width: 90%;height: 20px;position:absolute;top:242px;background:#eee;border:1px solid #eee;}
#datescroll{background: #F8F8F8;width:94%; margin:10px 3%;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}
#datescroll_datetime{display: none;background:#F8F8F8;width:94%; margin:10px 3%;margin-top: 10px;border: 1px solid #E0E0E0;border-radius: 4px;height: 120px;text-align: center;line-height: 40px;}
#yearwrapper ul,#monthwrapper ul,#daywrapper ul{width:40%;}
#Hourwrapper ul,#Minutewrapper ul,#Secondwrapper ul{width:40%;}
#dateFooter{width:100%;background: #fff;height: 50px;bottom: 0px;position: absolute;}