/*css reset*/
html {
    font-family:sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	font-size:75%;
}

body {	
	width: 100%;
	font-size:1rem;/* 1*12px=12px */
    line-height: 1.666;
    color: #333333;
    -webkit-font-smoothing: antialiased;
	background: #198ede;
    overflow-x: hidden;
}

body,input,textarea {
    font-family: sans-serif;
}

header,footer,section,aside,article,nav,hgroup,figure,figcaption,body,h1,h2,h3,h4,h5,h6,ul,ol,li,form,p,dl,dt,dd,blockquote,legend,table,th,td,fieldset,menu,pre {
    margin: 0;
    padding: 0
}

table,th,td,img,fieldset {
    border: 0
}

time,mark,output,meter,address,cite,em,code,var,dfn,ins,i,th,caption {
    font-style: normal;
    text-decoration: none
}

h1,h2,h3,h4,h5,h6,th {
    font-size: 100%;
    font-weight: normal
}

input,select,button,textarea,table {
    margin: 0;
    font-family: inherit;
    font-size: 100%
}

abbr,acronym {
    border: 0;
    font-variant: normal
}

q:before,q:after {
    content: ""
}

ul,ol {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

th,caption {
    text-align: left
}

header,footer,section,aside,article,nav,hgroup,figure,figcaption {
    display: block
}

a {
    text-decoration: none;
    outline: none;
}

select, button, input, textarea:active, a:active, select:active, option:active, input:active, textarea:focus, a:focus, select:focus, option:focus, input:focus {
    outline: 0;
}

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*css reset end*/


header {
	background: #ededed; /* Old browsers */
	background: -moz-linear-gradient(top, #ededed 0%, #ffffff 25%, #ffffff 70%, #ededed 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ededed 0%,#ffffff 25%,#ffffff 70%,#ededed 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ededed 0%,#ffffff 25%,#ffffff 70%,#ededed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}

.header {
    width: 1000px;
    height: 75px;
    margin: 0px auto;
    position: relative;
}

.header .logo {
    float: left;
	margin: 15px 0 0 0;
}

.header .logo img{
    width: 200px;
}

.header .slogan {
	float:left;
    margin: 10px 0 0 20px;
}

.header .slogan img{
    width: 277px;
}

.header .service {
	float: right;
	display:inline-block;
	margin: 32px 0 0 0;
	font-size:1.25rem;
	border-radius:8px;
	background:#84b804;
	padding:3px 20px;
	border:2px solid #b7e24e;
	color:#fff;
	cursor: pointer;
}

.header .service:hover {
	background:#6b920b;
}

.bg-anim{
	height: 543px;
	overflow:hidden;
	position:relative;
}

.bg-anim-pic{ 
	max-width:1920px;
	width:101%;
	position:absolute;
	bottom:0;
	left:-.5%;
	animation:anim-run 1.5s ease-in-out infinite alternate;
	-webkit-animation:anim-run 1.5s ease-in-out infinite alternate;
}

.bg-anim-pic img{ 
	width:100%;
}
@-ms-keyframes anim-run {
	from {left:-1%;}
	to {left:-.5%;}
}
@-webkit-keyframes anim-run {
	from {left:-1%;}
	to {left:-.5%;}
}

.content {
    position: absolute;
	top:80px;
	left:50%;
	margin-left:-500px;
    width: 1000px;
    height: auto;
    /*margin: 0 auto;*/
}

.content p{
	font-size: 1.166rem;
	line-height:2.5rem;
}

.content .bd{
	position:relative;
	width:100%;
    padding: 20px 10px 0px 10px;
	overflow: hidden;
}

.content .banner {
	float:left;
	width:55%;
}

.content .banner img{
	width: 65%;
	margin-left:30px;
}

.loginForm {
	float:right;
	width: 45%;
	display:block;
}

.loginForm h5 {
	font-size:2rem;
	color:#fff;
	margin: 0 0 20px 0;
}

.loginBox{	
	width: 400px;
	font-size: 1.166rem;
	padding: 30px 20px 50px 20px;
	border-radius: 8px;
	background: rgba(255,255,255,0.2);
	overflow: hidden;
	margin-top: 80px;
}

.loginBox a.btn-login {
	width: 360px;
	height: 50px;
	line-height: 50px;
	border-radius: 5px;
	text-align: center;
	color: #fff;
	font-size: 18px;
	display: block;
background: #a8d128; /* Old browsers */
background: -moz-linear-gradient(top, #a8d128 1%, #4fb20e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #a8d128 1%,#4fb20e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #a8d128 1%,#4fb20e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8d128', endColorstr='#4fb20e',GradientType=0 ); /* IE6-9 */
	
}

.loginBox a.btn-login:hover {
background: #4fb20e; /* Old browsers */
background: -moz-linear-gradient(top, #4fb20e 33%, #a8d128 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #4fb20e 33%,#a8d128 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4fb20e 33%,#a8d128 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fb20e', endColorstr='#a8d128',GradientType=0 ); /* IE6-9 */
box-shadow:inset 0px 5px 5px rgba(20%,20%,20%,0.1);
}

.columinput{
	background: #fff;
	border-radius:5px;
	padding: 10px 15px;
	font-size: 16px;
	margin-bottom: 20px;
	border: none;
	width: 100%;
	line-height: 1.5;
	position: relative;
}

.fllow-wrap {
	position:relative;
	background: #f2f2f2;
	overflow: hidden;
}


.fllow-wrap ul {
	padding: 30px 0;
    width: 1000px;
    margin: 0 auto;
}

.fllow-wrap li {
	width:318px;
	border: 1px solid #d2d2d2;
	text-align: center;
	padding: 15px 40px;
	line-height: 2rem;
	float: left;
	display: inline-block;
	border-radius: 8px;
	margin-right: 15px;
}

.fllow-wrap li:hover {
	border: 2px solid #74b2dc;
	box-shadow:inset 5px 5px 5px rgba(20%,20%,20%,0.1);
}

.fllow-wrap li:last-child {
	margin-right:0;
}


.fllow-wrap .infoImage {
	width: 	130px;
    height: 130px;
	display:block;
	background: url(../img/flow_pics.png) no-repeat;
	background-size: 390px 130px;
	margin:0 auto 30px auto;
}

.fllow-wrap .infoImage1 {background-position: 0 0;}
.fllow-wrap .infoImage2 {background-position: -130px 0;}
.fllow-wrap .infoImage3 {background-position: -260px 0;}

.fllow-wrap li h5 { 
	font-size: 1.75rem;
	margin-bottom:10px;
}

.fllow-wrap li p {
	font-size:1.25rem;
}

.copyright {
	clear:both;
	width:100%;
    padding: 30px 0px;
	text-align: center;
	color:#777777;
	font-size: 1rem;
}

/* justin add*/
.state-error input {
	background: #fff0f0;
   	border-color: #A90329;
}

.loginBox section {
	margin-bottom: 15px;
   	position: relative;
}

.loginBox section input {
	margin-bottom:3px;
}

.loginBox .state-error+em {
    display: block;
    margin-top: 6px;
    padding: 0 1px;
    font-style: normal;
    font-size: 11px;
    line-height: 15px;
    color: #fd1d1d;
}
@media screen and (max-width:736px) {
	.header {
    	width: 100%;
    	height: 75px;
    	margin: 0;
    	position: relative;
	}
	.header .logo {
    	float: none;
		margin: 0;
		text-align: center;
	}
	.header .logo img {
		margin: 15px 0 0 15px;
	}
	.header .slogan {display:none;}
	.header .service {
		float: none;
		position:fixed;
		right:10px;
		bottom:10px;
		z-index:10;
		width:60px;
		height:60px;
		display:inline-block;
		font-size:1.25rem;
		line-height:1.5rem;
		border-radius:50%;
		padding:10px;
		text-align:center;
	}
	.bg-anim {display:none;}
	.content {
    	position:relative;
		top:0;
		left:0;
		margin-left:0;
    	width: 100%;
    }
	.content .banner {display:none;}
	.loginForm {
		float:none;
		width: 100%;
	}
	.loginBox{
		width: 100%;
		font-size: 1rem;
		padding: 20px;
		margin: 10px auto;
	}
	.loginBox a.btn-login {
		width: 100%;
	}
	.fllow-wrap {
		padding:30px 20px 10px 20px;
	}
	.fllow-wrap ul {
		padding: 0;
    	width: 100%;
    	margin: 0;
	}
	.fllow-wrap li{
		width: 100%;
		text-align: left;
		padding: 10px;
		line-height: 2rem;
		float: none;
		display: block;
		margin-bottom:20px;
		overflow:hidden;
	}
	.fllow-wrap li h5{
		padding: 0px;
		line-height: 1.5rem;
		margin:10px 0 5px 0;
	}
	.fllow-wrap li:hover {
		margin-top:-2px;
	}
	.fllow-wrap .infoImage {
		width: 	65px;
   		height: 65px;
		background-size: 195px 65px;
		float:left;
		margin:0 10px 0 0;
	}
	.fllow-wrap .infoImage1 {background-position: 0 0;}
	.fllow-wrap .infoImage2 {background-position: -65px 0;}
	.fllow-wrap .infoImage3 {background-position: -130px 0;}
	.copyright {
    	padding: 10px 0px;
	}
	

	
}