@charset "utf-8";
    /*
    *Author's Brackets
    *Date 2016-12-07 14:34:27
    */
/* CSS Reset*/
a,hr{padding:0}a,button,input,select,textarea{margin:0}article,aside,details,figure,footer,header,hr,nav,section,summary{display:block}abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,details,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font-weight:400;vertical-align:baseline;background:0 0}input[type=checkbox],th{vertical-align:bottom}strong,th{font-weight:700}html{box-sizing:border-box;overflow-y:scroll}*,:after,:before{box-sizing:inherit}embed,img,object{max-width:100%}ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{font-size:100%;vertical-align:baseline;background:0 0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0;font:100%}td{font-weight:400;vertical-align:top}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type=radio]{vertical-align:text-bottom}.ie7 input[type=checkbox]{vertical-align:baseline}.ie6 input{vertical-align:text-bottom}input,select,textarea{font:99% sans-serif}small{font-size:85%}td,td img{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-.5em}sub{bottom:-.25em}code,kbd,pre,samp{font-family:monospace,sans-serif}.clickable,button,input[type=button],input[type=file],input[type=submit],label{cursor:pointer}button,input[type=button]{width:auto;overflow:visible}.ie7 img{-ms-interpolation-mode:bicubic}.clearfix:after,.clearfix:before{content:"\0020";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}
.fl {float: left;}
.fr {float: right;}
.w1200 {width: 1200px;margin:0 auto;}
a {text-decoration:none;border:none;}
/* CSS Reset end*/
/* common CSS */
input,button,select,textarea{outline:none}
textarea{resize:none}
body {font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;font-size:14px;}
.tn {
    -webkit-transition:all .3s linear;
    -o-transition:all .3s linear;
    transition:all .3s linear;
}
body {
    color:#333;
    overflow:hidden;
}
/******* hp heard *******/
.common-banner-box {
	width: 100%;
	height: 600px;
	background: url(../images/header_banner_01.jpg) no-repeat;
}
.common-banner {
	width: 1170px;
	margin: 0 auto;
}
.common-banner h3 {
	font-size: 36px;
	text-align: center;
	padding-top: 140px;
}
.common-banner span {
	display: block;
	text-align: center;
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 40px;
}
.common-banner p {
	text-align: center;
	font-size: 16px;
	width: 800px;
	margin: 0 auto;
	margin-bottom: 100px;
}
.common-banner .left {
	float: left;
	display: block;
	width: 240px;
	height: 60px;
	margin-left: 200px;
	font-size: 16px;
	line-height: 60px;
	text-align: center;
	background: #00c484;
	color: #fff;
	-webkit-border-radius: 5px; 
       -moz-border-radius: 5px; 
    	     border-radius:5px; 
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	   	    transition: all .3s linear;
}
.common-banner .right {
	float: right;
	display: block;
	width: 240px;
	height: 60px;
	margin-right: 200px;
	font-size: 16px;
	line-height: 60px;
	text-align: center;
	background: #2dc5f8;
	color: #fff;
	-webkit-border-radius: 5px; 
       -moz-border-radius: 5px; 
    	     border-radius:5px;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	   	    transition: all .3s linear;
}
.common-banner .left:hover {
	background: #00d18b;
}
.common-banner .right:hover {
	background: #2abbeb;
}
/******* hp heard end*******/
/********** hp way***********/
.hp-way-box {
	width: 100%;
	height: 550px;
	background: #f3f3f3;
}
.hp-way-box ul {
	width: 100%;
	height: 80px;
}
.hp-way-box ul li {
	float: left;
	width: 16.6666%;
	height: 80px;
	color: #fff;
}
.hp-way-box ul li a {
	display: block;
	width: 210px;
	margin: 0 auto;
	color: #fff;
}
.hp-way-box ul li .text {
	display: block;
	float: left;
	font-size: 16px;
	line-height: 80px;
}
.hp-way-box ul li .iconfont {
	display: block;
	float: left;
	font-size: 40px;
	line-height: 80px;
	margin-right: 20px;
}
.hp-way-box ul li:nth-child(1) {
	background: #00c484;
}
.hp-way-box ul li:nth-child(2) {
	background: #09c49b;
}
.hp-way-box ul li:nth-child(3) {
	background: #11c4b2;
}
.hp-way-box ul li:nth-child(4) {
	background: #1cc5cc;
}
.hp-way-box ul li:nth-child(5) {
	background: #24c5e0;
}
.hp-way-box ul li:nth-child(6) {
	background: #2bc5f4;
}
.hp-way-box .way-banner {
	width: 1170px;
	height: 400px;
	margin: 0 auto;
}
.hp-way-box .way-banner .way-text {
	float: left;
	margin-left: 100px;
}
.hp-way-box .way-banner h3 {
	font-size: 24px;
	margin-top: 110px;
	color: #051433;
}
.hp-way-box .way-banner span {
	display: block;
	font-size: 14px;
	text-transform: uppercase;
	margin-top: 10px;
	color: #999999;
}
.hp-way-box .way-banner p {
	font-size: 14px;
	line-height: 20px;
	width: 400px;
	margin-top: 30px;
	color: #999;
}
.hp-way-box .way-banner img {
	float: right;
	margin-right: 120px;
}
.hp-way-box .hp-way-contact {
	width: 100%;
	height: 70px;
	background: #2dc5f8;
}
.hp-way-box .hp-way-contact .contact-text {
	width: 1170px;
	margin: 0 auto;
}
.hp-way-box .hp-way-contact .contact-text p {
	float: left;
	margin-left: 70px;
	color: #fff;
	line-height: 70px;
	font-size: 16px;
}
.hp-way-box .hp-way-contact .contact-text a {
	float: right;
	width: 160px;
	height: 40px;
	color: #fff;
	margin-right: 10px;
	line-height: 38px;
	margin-top: 15px;
	text-align: center;
	border: 2px solid #fff;;
	-webkit-border-radius: 20px; 
       -moz-border-radius: 20px; 
    	    border-radius: 20px;  
   	font-size: 16px; 
   	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	   	    transition: all .3s linear;	   
}
.hp-way-box .hp-way-contact .contact-text a:hover {
	color: #2dc5f8;
	background: #fff;
} 
/********** hp way end***********/
/********** hp case ***********/
.hp-case-box {
	width: 100%;
	height: 660px;
}
.hp-case-box .case-box {
	width: 1170px;
	height: 660px;
	margin: 0 auto;
}
.hp-case-box .case-box .case-text {
	text-align: center;
}
.hp-case-box .case-box .case-text h3 {
	font-size: 24px;
	margin-top: 60px;
	color: #051433;
}
.hp-case-box .case-box .case-text span {
	display: block;
	font-size: 12px;
	margin-top: 10px;
	color: #999;
	text-transform: uppercase;
}
.hp-case-box .case-box .case-text p {
	display: block;
	width: 380px;
	font-size: 14px;
	color: #707070;
	margin: 0 auto;
	margin-top: 20px;
}
.hp-case-box .case-box .slideTxtBox {
	margin-top: 35px;
}
.hp-case-box .hd {
	width: 720px;
	height: 30px;
	margin: 0 auto;
}
.hp-case-box .hd li {
	display: block;
	float: left;
	margin-left: 150px;
}
.hp-case-box .hd a {
	display: block;
	float: left;
	width: 140px;
	height: 30px;
	font-size: 14px;
	line-height: 26px;
	text-align: center;
	color: #000;
	border: 2px solid #00c484;;
	-webkit-border-radius: 20px; 
       -moz-border-radius: 20px; 
    	    border-radius: 20px;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	   	    transition: all .3s linear;
}
.hp-case-box .hd a:hover {
	color: #fff;
	border-color: transparent;
	background: -webkit-linear-gradient(left, #00c484 , #2dc5f8);
       background: -moz-linear-gradient(right, #00c484, #2dc5f8);
        background: linear-gradient(to right, #00c484 , #2dc5f8);
         background: -o-linear-gradient(right, #00c484, #2dc5f8);
}
.hp-case-box .hd li:first-child {
	margin-left: 0;
}
.hp-case-box .bd {
	width: 1170px;
	height: 350px;
	margin-top: 35px;
	text-align: center;
}
.hp-case-box .bd .left {
	float: left;
	margin-left: 130px;
}
.hp-case-box .bd .left img {
	width: 400px;
	height: 300px;
}
.hp-case-box .bd .right {
	float: right;
	margin-right: 130px;
}
.hp-case-box .bd .right img {
	width: 400px;
	height: 300px;
}
.hp-case-box .bd .iconfont {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 38px;
	border: 1px solid #00c484;;
	-webkit-border-radius: 20px; 
       -moz-border-radius: 20px; 
    	    border-radius: 20px;
    text-align: center;
    margin-top: 130px;
    color: #00c484;
}
.hp-case-box .bd .progress {

}
.hp-case-box .bd .progress h3 {
	float: left;
	font-size: 18px;
	font-weight: bold;
	color: #707070;
	margin-top: 10px;
}
.hp-case-box .bd .progress h4 {
	font-family: helvetica;
	float: left;
	font-size: 36px;
	margin-left: 10px;
	color: #00c484;
}
.hp-case-box .bd .progress .progress-bar-box {
	float: right;
	height: 20px;
	width: 250px;
	border-bottom: 5px solid #dbdbdb;
	margin-top: 10px;
	position: relative;
}
.hp-case-box .bd .progress .progress-bar-box .lefe {
	display: block;
	float: left;
	font-size: 12px;
	color: #dbdbdb;
}
.hp-case-box .bd .progress .progress-bar-box .right {
	display: block;
	float: right;
	font-size: 12px;
	color: #dbdbdb;
	margin-right:0 ;
}
.hp-case-box .bd .progress .progress-bar-box .progress-bar {
	height: 5px;
	background: -webkit-linear-gradient(left, #00c484 , #2dc5f8);
       background: -moz-linear-gradient(right, #00c484, #2dc5f8);
        background: linear-gradient(to right, #00c484 , #2dc5f8);
         background: -o-linear-gradient(right, #00c484, #2dc5f8);	
    position: absolute;
    top: 15px;
    left: 0;
    position: relative;
}
.hp-case-box .bd .progress .progress-bar-box .progress-bar .label {
	width: 1px;
	height: 10px;
	background: #00c484;
	position: absolute;
	z-index:15;
	right: 0;
	top: -10px;
}
.hp-case-box .bd .progress .progress-bar-box .progress-bar .label div {
	width: 13px;
	height: 13px;
	border: 1px solid #00c484;;
	-webkit-border-radius: 6.5px; 
       -moz-border-radius: 6.5px; 
    	    border-radius: 6.5px;	
    position: absolute;
    top: -13px;
    left: -5.5px;
}
.hp-case-box .bd .case-01 .left .progress-bar {
	width: 160px;
}
.hp-case-box .bd .case-01 .right .progress-bar {
	width: 5px;
}
.hp-case-box .bd .case-02 .left .progress-bar {
	width: 165px;
}
.hp-case-box .bd .case-02 .right .progress-bar {
	width: 25px;
}
.hp-case-box .bd .case-03 .left .progress-bar {
	width: 170px;
}
.hp-case-box .bd .case-03 .right .progress-bar {
	width: 13px;
}
/********** hp case end ***********/
/********** hp service ***********/
.hp-service-box {
	width: 100%;
	height: 505px;
	background: #f4f7fe;
}
.hp-service-box .service-box {
	width: 1170px;
	text-align: center;
	margin: 0 auto;
}
.hp-service-box .service-text h3 {
	font-size: 24px;
	padding-top: 60px;
	color: #051433;
}
.hp-service-box .service-text span {
	display: block;
	font-size: 12px;
	margin-top: 5px;
	color: #999;
	text-transform: uppercase;
}
.hp-service-box .service-text p {
	display: block;
	width: 830px;
	font-size: 14px;
	color: #707070;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 40px;
}
.hp-service-box .service-box ul {
	width: 800px;
	margin: 0 auto;
}
.hp-service-box .service-box ul li {
	float: left;
	width: 200px;
	margin-left: 100px;
	margin-right: 0;
	text-align: center;
}
.hp-service-box .service-box ul li:first-child {
	margin-left: 0;
	text-align: center;
}
.hp-service-box .service-box ul li .icon-box {
	display: inline-block;
	width: 200px;
	height: 140px;
	line-height: 230px;
}
.hp-service-box .service-box ul li .icon {
	display: inline-block;
	font-size: 100px;
	-webkit-transition: all .3s linear;
	   -moz-transition: all .3s linear;
	    -ms-transition: all .3s linear;
	     -o-transition: all .3s linear;
	   	    transition: all .3s linear;
	border: 2px solid #fff;
	-webkit-border-radius: 46.5px; 
       -moz-border-radius: 46.5px; 
    	    border-radius: 46.5px;
}
.hp-service-box .service-box ul li .icon-box:hover .icon{
	width: 120px;
	height: 120px;
	-webkit-border-radius: 60px; 
       -moz-border-radius: 60px; 
    	    border-radius: 60px;	
}
.hp-service-box .service-box ul li h3 {
	font-size: 16px;
	color: #051433;
	margin-bottom: 10px;
}
.hp-service-box .service-box ul li p {
	font-size: 14px;
	color: #999;
}
/********** hp service end ***********/
/********** footer ***********/
.common-ft-box {
	width: 100%;
	height: 150px;
	background: #20222f;
}
.common-ft-box  .common-ft {
	width: 100%;
	height: 110px;
	border-bottom: 1px solid #313447;
}
.common-ft-box  .common-ft ul {
	width: 1170px;
	margin: 0 auto;
}
.common-ft-box  .common-ft .logo img {
	display: block;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	margin-top: 20px;
}
.common-ft-box  .common-ft ul li {
	float: left;
	width: 300px;
	height: 110px;
	text-align: center;
	padding: 32px 0;
	border-right: 1px solid #313447;
}
.common-ft-box  .common-ft .logo {
	width: 265px;
	border-left: 1px solid #313447;
	padding: 0;
}

.common-ft-box  .common-ft ul li div {
	display: inline-block;
	line-height: 46px;
	height: 46px;
}
.common-ft-box  .common-ft ul li p {
	margin-left: 60px;
	color: #fff;
}
.common-ft-box  .common-ft ul li span {
	float: left;
	width: 46px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	background: #313447;
	color: #fefeff;
	-webkit-border-radius: 23px; 
       -moz-border-radius: 23px; 
    	    border-radius: 23px;
}
.common-ft-box h4 {
	font-size: 12px;
	line-height: 40px;
	color: #fefeff;
	text-transform: uppercase;
	text-align: center;
}
/********** footer end ***********/
/********** aside **************/
.hp-aside {
	width: 150px;
	background: #fff;
	position: fixed;
	right: 0;
	top: 30%;
	-webkit-border-radius: 5px; 
       -moz-border-radius: 5px; 
    	    border-radius: 5px;
    text-align: center;
    -webkit-box-shadow: 3px 2px 15px #b4b4b4,3px 2px 15px #b4b4b4;
	   -moz-box-shadow: 3px 2px 15px #b4b4b4,3px 2px 15px #b4b4b4;
	        box-shadow: 3px 2px 15px #b4b4b4,3px 2px 15px #b4b4b4;
}
.hp-aside > a{
	display: block;
	margin-top: 20px;
	margin-bottom: 10px;
}
.hp-aside h3 {
	font-size: 16px;
	color: #051433;
	padding-bottom: 10px;
	border-bottom:1px solid #f3f3f3 ;
}
.hp-aside .phone {
	height: 55px;
	border-bottom:1px solid #f3f3f3 ;
}
.hp-aside .phone h4 {
	font-size: 14px;
	color: #051433;
	margin-top: 10px;

}
.hp-aside .phone p {
	font-size: 16px;
	font-weight: bold;
	color: #00c484;
	margin-bottom: 15px;
}
.hp-aside .iconfont {
	font-size: 30px;
	float: left;
	width: 75px;
	height: 70px;
	color: #051433;
	cursor: pointer;
	line-height: 70px;
}
.hp-aside .iconfont:last-child {
	border-left: 1px solid #f3f3f3 ;
}
.hp-aside .alert-code-img {
	display: none;
	width: 150px;
	height: 150px;
	padding: 5px;
	background: #fff;
	-webkit-border-radius: 5px; 
       -moz-border-radius: 5px; 
    	    border-radius: 5px;
   -webkit-box-shadow: 2px 3px 30px #999,2px 3px 30px #999;
	  -moz-box-shadow: 2px 3px 30px #999,2px 3px 30px #999;
	       box-shadow: 2px 3px 30px #999,2px 3px 30px #999;	
	position: absolute;
	top: 180px;
	left: -160px;
}
.hp-aside .alert-code-img img {
	display: block;
}