/*基本清零*/
a, abbr, acronym, address, applet, article, aside, audio,b, blockquote, big, body,center, canvas, caption, cite, code, command,datalist, dd, del, details, dfn, dl, div, dt, em, embed,fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html,i, iframe, img, ins,kbd, keygen,label, legend, li, meter,nav,object, ol, output,p, pre, progress,q, s, samp, section, small, span, source, strike, strong, sub, sup,table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var{
    margin: 0;
	padding: 0;
	font-style:normal; }
.clr:after{content:'';display:block;height:0;clear:both;}
.clr{*zoom:1;}
ul,li{
	list-style:none;}
img{ border:none;}
input,button,select,textarea{outline:none}
textarea{resize:none}
section .fr a{
	text-decoration:none;
}
a{
	text-decoration:none;}
a:hover{
	text-decoration:none;
-webkit-transition:  0.4s linear !important;
-moz-transition:  0.4s linear !important;
-o-transition:  0.4s linear !important;
transition:  0.4s linear !important; }

/* 设置HTML5元素为块 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;padding:0px; margin:0px; border:none;}

/* 超出隐藏 */
.overflow{ overflow:hidden;} 

/* 点击去除阴影 */
a,button,input,i{-webkit-tap-highlight-color:rgba(0,0,0,0); -moz-tap-highlight-color:rgba(0,0,0,0); -ms-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);}
a{cursor:pointer;
color:#333;
}       
		          
/* 基础样式 */
.fl{ float: left; }
.fr{ float: right;}
.db{ display:block;}
.w12{width:1200px;
margin:0 auto;}
div{
	background:none;}
/*开始*/
body{
	margin:0 auto;
	background:url(../images/registImg/bg.jpg) center top;
	font-size:14px;
	font-family:"微软雅黑", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#666;}
header{
	background:#fff;
	width:100%;
	height:auto;
	}
.logo{
	padding:20px auto 20px 20px;}
.logofr{
	margin-top:25px;
	padding-right: 20px;
color: #666;
line-height: 25px;
text-align: right;}
.logofr a{
	color:#666;}
.logofr a:hover{
	color:#007dcd;
	text-decoration:underline;}
.header{
	margin:0 auto;
	height:98px;
	}
.head_border{
	width:100%;
	background:url(../images/registImg/top.png) repeat-x;
	height:11px;}
.login{
	height:60px;
	line-height:60px;
	padding-right:10px;
	color:#333;}
.logbtn{
	color:#333;
width: 76px;
line-height: 40px;
margin-top: 8px;
height: 40px;
text-align: center;
border: solid 1px #333;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}	
a.logbtn:hover{
	color:#fff;
	border-color:#fff;}
.main{
	background:#FFF;
	padding:0;
	height:auto;}
.title{
	width:100%;
	text-align:center;
	height:60px;
	font-size:20px;
	line-height:60px;
	}
.title1{
	width:100%;
	color:#fff;
	background:#007dcd;}
.model{
	width:100%;
	text-align:center;
	height:40px;
	font-size:20px;
	line-height:40px;
	}
.model1{
	width:16%;
	color:#fff;
	background:#007dcd;
	margin-left: 42%;
	}
a.title1:hover{
	color:#cfecfe;}
a.title1:active{
	color:#fff;}
.title2{
	width:50%;
	color:#666;
	background:#f3f3f3;
	}
a.title2:hover{
	color:#007dcd;}
a.title2:active{
	color:#333;}
.tit2{
	width:100%;
	height:auto;}
.tit2 span{
	display:block;
	width:100%;
	height:20px;
	background:url(../images/registImg/arr.png) center top no-repeat;}
.titarr1{
	width:100%;
	height:auto;}
.titarr1 span{
	display:block;
	width:100%;
	height:20px;
	background:url(../images/registImg/arr1.png) center top no-repeat;}	
.step{
	height:146px;
	background:url(../images/registImg/1.jpg) center 55% no-repeat;}
.inputsec{
width: 840px;
margin: 0 auto;
background: #fff;
padding: 0 0 100px 360px;
}
.inputsec ul li .Code_div{
	color:#fff;
	width:72px;
	height:28px;
	text-align:center;
	background-color:#007DCD;
	margin:10px 12px 0 0;
	line-height:28px;
	font-size:12px;
	cursor: pointer;
}
.inputsec ul,.inputsec ul li{
	display:block;
	min-width:400px;}
.inputsec ul li{
	clear: both;
zoom: 1;
overflow: visible;
	height:54px;
	line-height:50px;
	color:#333;}
.inputsec ul li label{
	display:block;
	width:90px;
	text-align:right;}
.txt-m {
margin:10px 12px 0 0;
height: 28px;
line-height: 28px;
padding: 2px 3px;
padding-left: 15px;
border: 1px solid #dedede;
color: #666;
width: 292px;
font-size: 14px;}
.yzm{
	margin:10px 12px 0 0;
	height: 32px;
	line-height: 32px;
	border: 1px solid #dedede;
	width: 310px;}
.txt-y,.txt-j{
line-height: 28px;
height: 28px;
padding-top: 2px;
padding-left:15px;
color: #666;
width: 160px;
border:none;
font-size: 14px;}
.chg{display:block;
color:#007dcd;}
a.chg:hover{
	color:#249deb;}
a.chg:active{
	color:#333;}
.mt2{
	margin-top:2px;}
.mr2{
	margin-right:3px;}
.msg-normal{
	color:#777;}
.msg-error{
	color:#e82020;}
.msg-info{
	color:#e82020;}
.yzm2{
	background:#f5f5f5;
	margin:10px 12px 0 0;
	height: 32px;
	line-height: 32px;
	border: 1px solid #dedede;
	width: 200px;}
.txt-j{
	background:#f5f5f5;}
.send{
width: 96px;
height: 32px;
line-height: 32px;
text-align: center;
margin: 10px 0 0 0;
border: 1px #dedede solid;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}
a.send:hover{
	border: 1px #007dcd solid;
	color:#249deb;}
a.send:active{
	border: 1px #dedede solid;
	color:#333;}
.next{
	margin-top:8px;
	width:300px;
	height:42px;
	line-height:42px;
	text-align:center;
	color:#fff;
	font-size:16px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	background:#1ca521;}
a.next:hover{
	background:#27c42d;}
a.next:active{
	background:#19861d;}

/*注册成功*/
.success{
	margin:0 auto;
	width:426px;
	height:200px;
	padding-bottom:100px;
	}
.success  ul,.success ul li{
	display:block;
	width:426px;
	text-align:center;
	color:#333;}
.success  ul li{
	height:56px;
	line-height:56px;
	overflow: hidden;  
    text-overflow: ellipsis;  
    white-space: nowrap;  }
.suc1{
	background:url(../images/registImg/yes.png) 26% center no-repeat;
	font-size:20px;}
.success ul li em{
	color:#007dcd;
	}
.mr3{
	margin-right:10px;}
.suc2{
	width:300px !important;
	height:36px !important;
	padding:10px 63px;}
.mr4{
	margin-right:30px;
	_margin-right:15px;}
.success  ul li a{
	display:block;
	width:135px;
	line-height:36px;
	font-size:16px;
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
	color:#fff;
	background:#007dcd;}
.success  ul li a:hover{
	background:#2896dd;
	}
.success ul li a:active{
	background:#007dcd;
	}
#wrap{
		width:100%;
		height:400px;
		margin:50px 40px;
	}
	#top{
		width:100%;
		height:270px;
		border-bottom:1px solid #bbb;
		font-family:'Microsoft yahei';
	}
	#top p{
		margin-bottom:35px;
	}
	#top p font{

		font-size:16px;
		color:#000;
		margin-right:15px;
	}
	#top p span{
		font-size:14px;
		color:#666;
		border:1px solid #999;
		display:inline-block;
		padding:8px;
		cursor:pointer;
	}
	#top p span.on{
		border:2px solid #f60;
		padding:7px;
		background:url(../images/on.png) no-repeat right bottom;
	}
	#bottom{
		float:right;
		width:400;
		height:159px;
		padding-top:20px;
		font-family:'Microsoft yahei';
	}
	#bottom p font{
		color:#f60;
		font-size:20px;
		margin-right:20px;
	}
	#bottom p a{
		font-size:14px;
		color:blue;
	}
	#bottom p a i{
		margin:0 5px;
		color:#90c;
	}
	#bottom button{
		width:330px;
		height:50px;
		font-family:'Microsoft yahei';
		margin-top:20px;
		font-size:20px;
		background:#f60;
		color:#fff;
		border:none;
	    cursor: pointer;
		
	}
.add_chose{width:105px;}
.add_chose a{float:left;margin:5px 0 0 0;display:block;width:15px;height:15px;line-height:99em;overflow:hidden;background:url(../images/reduce-add.gif) no-repeat;}
.add_chose a.reduce{background-position:0 0;}
.add_chose a.reduce:hover{background-position:0 -16px;}
.add_chose a.add{background-position:-16px 0;}
.add_chose a.add:hover{background-position: -16px -16px;}
.add_chose .text{float:left;margin:0 5px;display:inline;border:solid 1px #ccc;padding:4px 3px 4px 8px;width:40px;line-height:18px;font-size:14px;color:#990000;font-weight:800;}

.module_mon{
	margin-top: 5px;
}
.module_shop{
	font-size:14px;
	right:50px;
	color:#666;
	border:1px solid #999;
	display:inline-block;
	padding:5px;
	text-align:center;
	cursor:pointer;
	margin-left: 7px;
}
.module_shop_div{
	font-size:14px;
	margin-right:50px;
	color:#666;
	border:1px solid #999;
	display:inline-block;
	padding:8px;
	text-align:center;
	cursor:pointer;
}



.icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: block;
  fill: rgba(51, 51, 51, 0.5);
  margin-right: 20px;
  -webkit-transition: all .2s ease-out;
		  transition: all .2s ease-out;
}

.icon.active {
  fill: #E74C3C;
}

.icon.big {
  width: 64px;
  height: 64px;
  fill: rgba(51, 51, 51, 0.5);
}
.bg{
	 display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 600px;background: rgba(0,0,0,0.5);  z-index:1001;
}
.bg1{
	height: 1000px;
}
.bg .bg_close{
	 position: absolute;
	 top: 0%; 
	 right: 0%;
	 width:32px;
	 height:32px;
	 z-index: 1002;
	 cursor: pointer;
}
.total{
	font-size: 25px;
	font-weight: bold;
}
#fourth button{
		width:330px;
		height:50px;
		font-family:'Microsoft yahei';
		margin-top:20px;
		font-size:20px;
		background:#f60;
		color:#fff;
		border:none;
		cursor: pointer;
		
	}
#wrapper {
  width: 900px;
  height:500px;
  position: absolute;
  z-index:1002;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
 
  -webkit-box-align: center;
  -webkit-align-items: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
	  -ms-flex-pack: left;
		  justify-content: left;
  overflow: hidden;
  
}

#left-side {
  height: 100%;
  width: 25%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
	  -ms-flex-pack: center;
		  justify-content: center;
}
#left-side ul li {
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  line-height: 34px;
  color: rgba(51, 51, 51, 0.5);
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
		  transition: all .2s ease-out;
}
#left-side ul li:hover {
  color: #333333;
  -webkit-transition: all .2s ease-out;
		  transition: all .2s ease-out;
}
#left-side ul li:hover > .icon {
  fill: #333;
}
#left-side ul li.active {
  color: #333333;
}
#left-side ul li.active:hover > .icon {
  fill: #E74C3C;
}

#border {
  height: 288px;
  width: 1px;
  background-color: rgba(51, 51, 51, 0.2);
}
#border #line.one {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 90px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.two {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 150px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}
#border #line.three {
  width: 5px;
  height: 54px;
  background-color: #E74C3C;
  margin-left: -2px;
  margin-top: 200px;
  -webkit-transition: all .4s ease-in-out;
		  transition: all .4s ease-in-out;
}

#right-side {
  height: 300px;
  width: 75%;
  overflow: hidden;
}
#right-side #first, #right-side #second, #right-side #third, #right-side #fourth {
  position: absolute;
  height: 300px;
  width: 75%;
  -webkit-transition: all .6s ease-in-out;
		  transition: all .6s ease-in-out;
  margin-top: -350px;
  opacity: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
	  -ms-flex-align: center;
		  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
	  -ms-flex-direction: column;
		  flex-direction: column;
}
#right-side #first h1, #right-side #second h1, #right-side #third h1, #right-side #fourth h1 {
  font-weight: 800;
  color: #333;
}
#right-side #first p, #right-side #second p, #right-side #third p, #right-side #fourth p {
  color: #333;
  font-weight: 500;
  padding-left: 30px;
  padding-right: 30px;
}
#right-side #first.active, #right-side #second.active, #right-side #third.active, #right-side #fourth.active {
  margin-top: 0px;
  opacity: 1;
  -webkit-transition: all .6s ease-in-out;
		  transition: all .6s ease-in-out;
}


/*悬浮*/
.tip {
     display: inline-block;
     position: relative;
     cursor:pointer;
 }

 .tip:before, .tip:after {
     opacity: 0; /*透明度为完全透明*/
     position: absolute;
     z-index: 1000; /*设为最上层*/
     /*鼠标放上元素上时的动画，鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置;
     0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
     transition: 0.3s ease;
     -webkit-transition: 0.3s ease;
     -moz-transition: 0.3s ease;
 }

 .tip:before {
     content: '';
     border: 6px solid transparent;
 }

 .tip:after {
     content: attr(data-tip); /*后去要提示的文本*/
     padding: 5px;
     white-space: nowrap; /*强制不换行*/
     background-color: #FF6600;
     color: #ffffff;
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
     border-radius: 20px;
 }

 .tip:hover:before, .tip:hover:after {
     opacity: 1; /*鼠标放上时透明度为完全显示*/
     z-index: 1000;
 }

 /*top*/
 .tip-top:before {
     bottom: 100%;
     left: 50%;
     border-top-color: #FF6600; /*小三角效果*/
     margin-left: -3px;
     margin-bottom: -12px;
 }

 .tip-top:after {
     bottom: 100%;
     left: 50%;
     margin-left: -6px;
 }

 .tip-top:hover:before {
     margin-bottom: -6px;
 }

 .tip-top:hover:after {
     margin-bottom: 6px;
 }
/*悬浮2*/
.tip2 {
     display: inline-block;
     position: relative;
     cursor:pointer;
 }

 .tip2:before, .tip2:after {
     opacity: 0; /*透明度为完全透明*/
     position: absolute;
     z-index: 1000; /*设为最上层*/
     /*鼠标放上元素上时的动画，鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置;
     0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始，然后变快，然后慢速结束的过渡效果*/
     transition: 0.3s ease;
     -webkit-transition: 0.3s ease;
     -moz-transition: 0.3s ease;
 }

 .tip2:before {
     content: '';
     border: 6px solid transparent;
 }

 .tip2:after {
     content: attr(data-tip); /*后去要提示的文本*/
     padding: 5px;
     white-space: nowrap; /*强制不换行*/
     background-color: #007DCD;
     color: #ffffff;
     -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
     border-radius: 20px;
 }

 .tip2:hover:before, .tip2:hover:after {
     opacity: 1; /*鼠标放上时透明度为完全显示*/
     z-index: 1000;
 }

 /*top*/
 .tip-top2:before {
     bottom: 100%;
     left: 50%;
     border-top-color: #007DCD; /*小三角效果*/
     margin-left: -3px;
     margin-bottom: -12px;
 }

 .tip-top2:after {
     bottom: 100%;
     left: 50%;
     margin-left: -6px;
 }

 .tip-top2:hover:before {
     margin-bottom: -6px;
 }

 .tip-top2:hover:after {
     margin-bottom: 6px;
 }