/***
 @author ----- guoshengli
 @design ----- fuyuxiang
 @time   ----- 2015-12-29
***/
body,button,input,select,textarea{font:12px/1.5 Helvetica,\5FAE\8F6F\96C5\9ED1;outline:none;-webkit-font-smoothing:antialiased}
ul{list-style:none;}
em,i{font-style:normal;}
body{margin:0;background:#fff;color:#727171;word-wrap:break-word;overflow-x:hidden;}
ol,ul,input{margin:0;padding:0;}
dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;}
img{display:block;width:100%;border:0;vertical-align:middle;}
table{width:auto;border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;outline:none;color:#333;}
a,button,button:active,input{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/*icons*/
.logo_xl,.logo_jrq,.top h1,.top i{background:url(../img/spr.png) no-repeat;background-size:320px auto;display:block;line-height:9999em;overflow:hidden;position:absolute;}

/*layout*/
body{background:#5a439d;}
.wrap{background:#f6f6f6;width:320px;margin:0 auto;}
.top{height:314px;background:url(../img/top_bg.jpg) no-repeat top center;background-size:320px auto;position:relative;}

/*header*/
.logo_xl{background-position:0 0;width:68px;height:27px;left:83px;top:10px;}
.logo_jrq{background-position:-88px -5px;width:67px;height:16px;left:171px;top:15px;}
.top h1{background-position:0 -36px;width:310px;height:160px;left:5px;top:150px;z-index:5;}
.top .ico_hb1{background-position:-42px -207px;width:80px;height:91px;z-index:1;left:79px;top:100px;}
.top .ico_hb2{background-position:-187px -209px;width:66px;height:88px;z-index:2;left:110px;top:91px;}
.top .ico_hb3{background-position:-45px -326px;width:74px;height:105px;z-index:3;left:142px;top:91px;}
.top .ico_hb4{background-position:-168px -326px;width:89px;height:101px;z-index:1;left:155px;top:98px;}
.link_faq{display:block;width:120px;height:18px;font-size:12px;line-height:18px;text-align:center;color:#fff;position:absolute;left:100px;top:281px;z-index:6;}

/*main*/
.form_area{text-align:center;font-size:12px;color:#666;line-height:18px;margin-bottom:22px;}
.form_area .binding a{display: inline-block;width: 10em;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;vertical-align: middle;}
.form_area.log{padding:20px 0 15px;}
.form_area a{color:#00a0ff;}
.form_area .btn_reg,.form_area .btn_log{display:block;width:290px;height:40px;background:#f83e3f;color:#fff;font-size:16px;line-height:40px;border-radius:5px;margin:5px auto;}
.form_area .btn_log{width:216px;height:52px;line-height:52px;font-size:17px;margin:20px auto 10px;}
.rule_area{margin-bottom:14px;}
.tit_rule{color:#f83e3f;font-size:16px;display:block;width:290px;text-align:center;height:16px;line-height:16px;margin:0 auto 13px;position:relative;}
.tit_rule span{display:inline-block;background:#f6f6f6;width:5em;height:16px;position:relative;z-index:2;}
.tit_rule:after{display:block;content:"";width:100%;height:2px;background:#f83e3f;position:absolute;top:7px;left:0;z-index:1;}
.rule_area ul{display:block;background:#fff;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;padding:12px 25px 4px;}
.rule_area li{font-size:13px;color:#404040;line-height:20px;margin-bottom:8px;}
.rule_area a{color:#f83e3f;display:inline-block;margin-left:5px;}

/*footer*/
.footer{text-align:center;height:66px;line-height:66px;font-size:12px;color:#8b8b8b;}

/*pop*/
.grey_bg{background:#000;opacity:.8;position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;}
.act_pop{background:url(../img/pop_bg.png) no-repeat -18px -8px;background-size:320px 401px;width:284px;height:387px;position:fixed;z-index:999;left:50%;top:50%;margin:-193px 0 0 -142px;text-align:center;}
.act_pop .pop_hd{padding-top:80px;}
.act_pop .pop_hd h3{font-size:14px;color:#ffed2a;margin-bottom:16px;line-height:14px;}
.act_pop ul{width:246px;margin:0 auto;}
.act_pop li{margin-bottom:16px;height:40px;}
.act_pop span{display:block;float:left;width:50%;height:40px;line-height:40px;background:#fff;color:#980518;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.act_pop span.feature{line-height:15px;padding:5px 0;height:30px;}
.act_pop .fl_r{background:#fff092;}
.act_pop .btn_join{display:block;width:186px;height:38px;background:#ffea00;font-size:16px;color:#f83e3f;line-height:38px;border-radius:5px;margin:0 auto;}

/*animation*/

.top i{opacity:0;}
.ready .ico_hb1{-webkit-animation:show-1 .5s ease-in-out both;-webkit-transform-origin:bottom right;animation:show-1 .5s ease-in-out both;transform-origin:bottom right;}
.ready .ico_hb2{-webkit-animation:show-2 .4s .5s ease-in-out both;-webkit-transform-origin:bottom right;animation:show-2 .4s .5s ease-in-out both;transform-origin:bottom right;}
.ready .ico_hb3{-webkit-animation:show-2 .4s .8s ease-in-out both;-webkit-transform-origin:bottom right;animation:show-2 .4s .8s ease-in-out both;transform-origin:bottom right;}
.ready .ico_hb4{-webkit-animation:show-2 .4s 1.1s ease-in-out both;-webkit-transform-origin:bottom right;animation:show-2 .4s 1.1s ease-in-out both;transform-origin:bottom right;}
@-webkit-keyframes show-1{
	0%{-webkit-transform:translateY(70px);opacity:0;}
	100%{-webkit-transform:translateY(0px);opacity:1;}
}
@keyframes show-1{
	0%{transform:translateY(70px);opacity:0;}
	100%{transform:translateY(0px);opacity:1;}
}
@-webkit-keyframes show-2{
	0%{-webkit-transform:rotate(-25deg);opacity:0;}
	100%{-webkit-transform:rotate(0deg);opacity:1;}
}
@keyframes show-2{
	0%{transform:rotate(-25deg);opacity:0;}
	100%{transform:rotate(0deg);opacity:1;}
}

/* media */
@media only screen and (min-width:820px) and (max-width:1024px){
	.wrap{zoom:3.2;}
}
@media only screen and (min-width:769px) and (max-width:819px){
	.wrap{zoom:2.56;}
}
@media (max-width:768px){
	.wrap{zoom:2.4;}
}
@media (max-width:600px){
	.wrap{zoom:1.88;}
}
@media (max-width:500px){
	.wrap{zoom:1.56;}
}
@media only screen and (min-width:415px) and (max-width:480px){
	.wrap{zoom:1.5;}
}
@media only screen and (min-width:401px) and (max-width:414px){
	.wrap{zoom:1.2935;}
}
@media only screen and (min-width:385px) and (max-width:400px){
	.wrap{zoom:1.25;}
}
@media only screen and (min-width:393px) and (max-width:393px){
	.wrap{zoom:1.229;}
}
@media only screen and (min-width:376px) and (max-width:384px){
	.wrap{zoom:1.2;}
}
@media only screen and (min-width:361px) and (max-width:375px){
	.wrap{zoom:1.1718;}
}
@media only screen and (min-width:321px) and (max-width:360px){
	.wrap{zoom:1.125;}
}
@media (max-width:320px){
	.wrap{zoom:1;}
}