@charset "utf-8";

*{ margin:0; padding:0}

HTML {OVERFLOW-X: hidden;}

body{ font-size:14px; font-family:"microsoft yahei",arial;color:#333;-webkit-font-smoothing: antialiased; }

a{color:#333;text-decoration:none; outline:none; /*transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-webkit-tap-highlight-color: rgba(0,0,0,0);　-webkit-tap-highlight-color: transparent;*/}

a:hover{color:#008AD0;}

img{ border:none;}

ol,ul,li{ list-style:none;}

h1,h2,h3,h4,h5,h6{font-weight:normal}

.clearfix{clear:both;zoom:1}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

table{border-collapse:collapse;}

input,textarea{font-family:"microsoft yahei"; font-size:12px; color:#666}

.wrap{ width:100%; max-width:1200px; margin:0 auto;}

.blue{ color:#008AD0;}



/*header*/

#header { line-height:95px;height:95px;display:block; z-index:999; position:fixed ; width:100%}

#header .wrap{ width:100%; max-width:1200px; margin:0 auto;}

#header .logo{ float:left; width:30%;max-width:233px;}

#header .logo img{width:100%; max-width:233px; height:auto; max-height:95px;}

#header .mobile-menu{ float:right; width:70%; max-width:600px}

#header .mobile-menu ul li{ float:left}

#header .mobile-menu ul li a{ float:left; display:block; padding:0 20px; font-size:16px; color:#fff;}

#header .mobile-menu ul li a:hover{ color:#008AD0;}





/*video-banner*/

#video-banner{width: 100%;z-index: 1;height: 920px; overflow:hidden;position: relative;overflow: hidden; z-index:9; }

@media screen and (max-width:1800px){

#video-banner{height: 860px;}

}

@media screen and (max-width:1700px){

#video-banner{height: 815px;}

}

@media screen and (max-width:1600px){

#video-banner{height: 765px;}

}

@media screen and (max-width:1440px){

#video-banner{height: 715px;}

}

@media screen and (max-width:1440px){

#video-banner{height: 670px;}

}

@media screen and (max-width:1300px){

#video-banner{height: 620px;}

}

@media screen and (max-width:1200px){

#video-banner{height: 575px;}

}

@media screen and (max-width:1100px){

#video-banner{height: 525px;}

}

@media screen and (max-width:1000px){

#video-banner{height: 475px;}

}

@media screen and (max-width:900px){

#video-banner{height: 430px;}

}

@media screen and (max-width:800px){

#video-banner{height: 380px;}

}

@media screen and (max-width:700px){

#video-banner{height: 335px;}

}





#video-banner >.bg {line-height: 0;background:url(../images/banner.jpg) #000 no-repeat center top; background-size:auto 100%;width:100%;height:100%;position:absolute;top:0;left:0;	}

#video-banner >.bg video{ width:100%;}

#video-src{max-width: none;height: auto;width: 100%;top: 50%;transform: translateY(-50%);position: relative;}





/*banner*/

#banner { height:920px;display:block; z-index:99; background:url(../images/bannerbg.png); margin-top:-920px;position: relative;overflow: hidden; z-index:99; }

#banner h1{ font-size:36px; text-align:center; color:#fff; line-height:60px; margin-top:400px}

#banner h3{ font-size:50px; height:430px; text-align:center; color:#fff;background:url(../images/jiantou.png) no-repeat center bottom;}

@media screen and (max-width:1600px){

#banner { height:860px;margin-top:-860px;}

#banner h1{ margin-top:360px}

#banner h3{ height:380px;}

}

@media screen and (max-width:1700px){

#banner { height:815px;margin-top:-815px;}

#banner h1{ margin-top:352px}

#banner h3{ height:372px;}

}

@media screen and (max-width:1600px){

#banner { height:765px;margin-top:-765px;}

#banner h1{ margin-top:327px}

#banner h3{ height:347px;}

}

@media screen and (max-width:1440px){

#banner { height:715px;margin-top:-715px;}

#banner h1{ margin-top:302px}

#banner h3{ height:322px;}

}

@media screen and (max-width:1440px){

#banner { height:670px;margin-top:-670px;}

#banner h1{ margin-top:280px}

#banner h3{ height:300px;}

}

@media screen and (max-width:1300px){

#banner { height:620px;margin-top:-620px;}

#banner h1{ margin-top:255px}

#banner h3{ height:275px;}

}

@media screen and (max-width:1200px){

#banner { height:575px;margin-top:-575px;}

#banner h1{ margin-top:232px}

#banner h3{ height:252px;}

}

@media screen and (max-width:1100px){

#banner { height:525px;margin-top:-525px;}

#banner h1{ margin-top:207px}

#banner h3{ height:227px;}

}

@media screen and (max-width:1000px){

#banner { height:475px;margin-top:-475px;}

#banner h1{ margin-top:182px}

#banner h3{ height:202px;}

}

@media screen and (max-width:900px){

#banner { height:430px;margin-top:-430px;}

#banner h1{ margin-top:160px}

#banner h3{ height:180px;}

}

@media screen and (max-width:800px){

#banner { height:380px;margin-top:-380px;}

#banner h1{ margin-top:135px}

#banner h3{ height:155px;}

}

@media screen and (max-width:700px){

#banner { height:335px;margin-top:-335px;}

#banner h1{ margin-top:112px}

#banner h3{ height:132px;}

}

/*about*/

#about { width:100%; margin:52px 0 62px 0;}

#about .wrap{ width:100%; max-width:1024px; margin:0 auto;}

#about .title h3{ font-size:36px; text-align:center; color:#000;  line-height:70px; width:150px; margin:0 auto 20px auto; border-bottom:solid 1px #000; font-weight:bold}

#about .intro p{ line-height:45px; font-size:24px; text-align:center; margin-bottom:65px;}



.solution li{ float:left; width:20%;text-align:center;}

.solution li a{ width:90%; max-width:110px; margin:0 auto; font-size:20px; line-height:56px; font-weight:bold;color:#000; display:block}

.solution li a span { width:110px; height:110px;  display:block; margin:0 auto;}

.solution li a:hover{ color:#008AD0;}



.solution li a .icon01{background:url(../images/icon01.png) no-repeat center center; background-size:100% auto}

.solution li a:hover .icon01{background:url(../images/icon001.png) no-repeat center center;}

.solution li a .icon02{background:url(../images/icon02.png) no-repeat center center;background-size:100% auto}

.solution li a:hover .icon02{background:url(../images/icon002.png) no-repeat center center;}

.solution li a .icon03{background:url(../images/icon03.png) no-repeat center center;background-size:100% auto}

.solution li a:hover .icon03{background:url(../images/icon003.png) no-repeat center center;}

.solution li a .icon04{background:url(../images/icon04.png) no-repeat center center;background-size:100% auto}

.solution li a:hover .icon04{background:url(../images/icon004.png) no-repeat center center;}

.solution li a .icon05{background:url(../images/icon05.png) no-repeat center center;}

.solution li a:hover .icon05{background:url(../images/icon005.png) no-repeat center center;}



/*product*/

#pro { width:100%; background:url(../images/probg.jpg) no-repeat center center; background-size:auto 100%;}

#pro .wrap{ width:100%; max-width:1600px; min-width:1400px margin:0 auto;}



@media screen and (max-width:1920px){

#pro .title{ padding-top:48px; color:#fff;}

#pro .categary{ float: left; width:16%; padding:0 2%;background:url(../images/castebg.png) repeat center center; text-align:right}

}



@media screen and (max-width:1440px){

#pro .title{ padding-top:26px; color:#fff;}

#pro .categary{ float: left; width:15%; padding:0 1%;background:url(../images/castebg.png) repeat center center; text-align:right}

}





#pro .title h3{ line-height:75px; font-size:36px; font-weight:bold; display:block}

#pro .title span { display: block; height:6px; width:36px; float:right; margin-bottom:18px; background-color:#fff;}

@media screen and (max-width:1920px){

#pro .title p{display:block;line-height:32px; font-size:24px; float:none; clear:both;}

#pro .intro{ padding:24px 0 28px 0;}

#pro .intro p{line-height:42px; font-size:18px; border-bottom:solid 1px #60A4C5;}

}



@media screen and (max-width:1440px){

#pro .title p{display:block;line-height:25px; font-size:20px; float:none; clear:both;}

#pro .intro{ padding:16px 0 28px 0;}

#pro .intro p{line-height:38px; font-size:16px; border-bottom:solid 1px #60A4C5;}

}





#pro .intro p a{ color:#fff; display:block}

#pro .intro p a:hover{color:#008AD0;}



@media screen and (max-width:1920px){

#pro .more{ width:95px; height:35px; margin:8px auto 36px auto;}

#pro .proxiang{ float: right; width:80%; padding-bottom:1px;padding-top:1px; color:#fff; text-align:center }

}



@media screen and (max-width:1440px){

#pro .more{ width:95px; height:35px; margin:4px auto 32px auto;}

#pro .proxiang{ float: right; width:83%; padding-bottom:1px;padding-top:1px; color:#fff; text-align:center }

}





#pro .more a{ width:100%; line-height:35px; background-color:#fff; color:#008AD0; font-size:14px; display:block; text-align:center}



#pro .proxiang .kuai{ float:left; width:50%}

#pro .proxiang .kuai02{ float:left; width:25%}



#pro .proxiang .kzuo{ float:left; width:50%}

@media screen and (max-width:1920px){

#pro .proxiang .kyou{ float:left; width:38%; padding:8% 6%; color:#fff;}

#pro .proxiang .kyou02{ float:none;  width:74%; padding:16% 10%;}

}

@media screen and (max-width:1440px){

#pro .proxiang .kyou{ float:left; width:38%; padding:5.5% 6%; color:#fff; }

#pro .proxiang .kyou02{ float:none;  width:74%; padding:11% 10%;}

}

#pro .proxiang img{ width:100%; height:auto; margin:0; padding:0; border:none; display:block}

#pro .proxiang .kzuo02{ float:none; width:100%}





#pro .proxiang .fy01{background:url(../images/jiantou01.png) no-repeat left center;}

#pro .proxiang .fy02{background:url(../images/jiantou02.png) no-repeat right center;}

#pro .proxiang .fy03{background:url(../images/jiantou03.png) no-repeat center top;}

#pro .proxiang .fy04{background:url(../images/jiantou04.png) no-repeat center bottom;}

@media screen and (max-width:1920px){

#pro .proxiang h3{ font-size:24px; line-height:53px; font-weight:bold;}

}

@media screen and (max-width:1440px){

#pro .proxiang h3{ font-size:20px; line-height:53px; font-weight:bold;}

}

#pro .proxiang h3 a{ color:#fff}

#pro .proxiang h3 a:hover{ color:#008AD0}

#pro .proxiang span { width:30px; height:2px; margin:0 auto; background-color:#fff; margin-bottom:20px; display: block}

#pro .proxiang p{ margin:0 auto; line-height:28px; font-size:14px;}

#pro .proxiang .more02{ margin:25px auto;width:124px; font-size:14px;height:38px; }

#pro .proxiang .more02 a{ width:122px; line-height:38px; display:block; border:solid 1px #fff; color:#fff}

#pro .proxiang .more02 a:hover{  border:solid 1px #008AD0; background-color:#008AD0}





/*news*/

#news { width:100%; margin:52px 0 62px 0;}

#news .title h3{ font-size:36px; text-align:center; color:#000;  line-height:70px; width:150px; margin:0 auto 20px auto; border-bottom:solid 1px #000; font-weight:bold}

#news .intro{ margin:25px 0;}

#news .intro .left{ float:left; width:62%;}

#news .intro .pic{ float:left; width:45%; margin-right:2%}

#news .intro .pic img{ width:100%; height:auto}

#news .intro .wenzi{ float:left; width:50%;}

#news .intro .wenzi h3{ font-size:18px; line-height:36px; font-weight:bold;}

#news .intro .wenzi h3 a{color:#008AD0;}

#news .intro .wenzi .time{ color:#008AD0; font-size:14px; line-height:36px; margin-bottom:10px}

#news .intro .wenzi p{ color:#666; line-height:28px;font-size:14px;  }

#news .intro .right{ float:right; width:38%;}



.newslist { clear:both; height:70px; overflow:hidden; margin-bottom:14px;}

.newslist .date{ padding:1%; width:18%; float:left;height:70px; background-color:#008AD0; color:#fff; text-align:center}

.newslist .date h3{ font-size:24px; line-height:38px}

.newslist .date p{ font-size:14px; line-height:18px}

.newslist .newsli{ width:76%; float:right}



#news .newsli h3{ font-size:16px;font-weight:bold;line-height:21px;height:22px;  overflow:hidden}

#news .newsli p{ font-size:14px; line-height:21px;height:42px; overflow:hidden; color:#666;}

.newslist a{ display:block;height:70px; overflow:hidden;}

.newslist a:hover{ background-color:#F9F9F9}





/*contact*/

#contact { width:100%; margin:32px 0  12px 0;background:url(../images/lianxibg.jpg) no-repeat center center; background-size:auto 100% ; padding:30px 0;}

#contact .title h3{ font-size:36px; text-align:center; color:#000;  line-height:70px; width:150px; margin:0 auto 20px auto; border-bottom:solid 1px #000; font-weight:bold}

#contact .intro{ margin:35px 0;}

#contact ul li{ float:left; width:25%; text-align:center; text-align:center; font-size:20px;}

#contact ul li a{ color:#1D2124; display:block;  padding-top:68px;}

#contact ul li a:hover{ color:#008AD0}



#contact ul .tel a{background:url(../images/lx01.png) no-repeat center top;}

#contact ul .tel a:hover{background:url(../images/lx001.png) no-repeat center top;}



#contact ul .mail a{ padding-top:68px;background:url(../images/lx02.png) no-repeat center top;}

#contact ul .mail a:hover{ background:url(../images/lx002.png) no-repeat center top;}



#contact ul .qq a{ padding-top:68px;background:url(../images/lx03.png) no-repeat center top;}

#contact ul .qq a:hover{ background:url(../images/lx003.png) no-repeat center top;}



#contact ul .add a{ padding-top:68px;background:url(../images/lx04.png) no-repeat center top;}

#contact ul .add a:hover{ background:url(../images/lx004.png) no-repeat center top;}



/*footer*/

#footer{ background-color:#373D41; padding:50px 0;  border-bottom:solid 1px #535C62; color:#fff}

#footer .kuai{ float:left; width:27%}

#footer .kuai02{ float:left; width:14%}

#footer .kuai img{width:100%; max-width:232px;}

#footer h3{ margin-bottom:15px; font-weight:bold;font-size:16px;}

#footer h3 a{ color:#fff;}

#footer p{ line-height:30px;font-size:16px;}

#footer p a{ color:#fff;}

#footer h3 a:hover{ color:#008AD0;}

#footer p a:hover{ color:#008AD0;}

#footer .kuai03{ float:right; width:17%;max-width:128px; text-align: center}

#footer .kuai03 img{width:100%; max-width:128px;}



#copyright{ background-color:#373D41; padding:16px 0; font-size:14px; font-weight:32px; color:#fff; text-align:center}

#copyright a{ color:#fff}



/*header02*/

#header02 { line-height:95px;height:95px;display:block; z-index:999; position:fixed ; width:100%; background-color:#fff;box-shadow:0 0 10px #ccc;}

#header02 .wrap{ width:100%; max-width:1200px; margin:0 auto;}

#header02 .logo{ float:left; width:30%;max-width:233px;}

#header02 .logo img{width:100%; max-width:233px; height:auto; max-height:95px;}

#header02 .mobile-menu{ float:right; width:70%; max-width:600px}

#header02 .mobile-menu ul li{ float:left}

#header02 .mobile-menu ul li a{ float:left; display:block; padding:0 20px; font-size:16px; color:#222;}

#header02 .mobile-menu ul li a:hover, #header02 .mobile-menu ul li .cur{ color:#008AD0;}



/*nbanner*/

@media screen and (max-width:1920px){

#nbanner { height:320px; padding-top:95px}

}

@media screen and (max-width:1600px){

#nbanner { height:260px; padding-top:95px}

}

@media screen and (max-width:1400px){

#nbanner { height:225px; padding-top:95px}

}

@media screen and (max-width:1200px){

#nbanner { height:200px; padding-top:95px}

}

@media screen and (max-width:999px){

#nbanner { height:160px; padding-top:75px}

}

@media screen and (max-width:768px){

#nbanner { height:100px; padding-top:75px}

}

/*nmain*/

#nmain { width:100%; margin:36px 0 115px 0;}

#nmain .wrap{ width:100%; max-width:1200px; margin:0 auto;}

#nmain .title h3{ font-size:36px; text-align:center; color:#000;  line-height:70px; width:150px; margin:0 auto; border-bottom:solid 1px #000; font-weight:bold}

#nmain .title p{ font-size:24px; text-align:center; color:#333;  line-height:90px;}



.jianjie{ font-size:16px; color:#333;  line-height:28px;}







#nmain02 .leibie{ float:left; width:26%; border-right:solid 10px #ddd; padding-bottom:70px}

#nmain02 .leibie .title{background:url(../images/protitle.jpg) #008AD0 no-repeat center center; padding:22px 0;}

#nmain02 .leibie .title h3{ margin-bottom:15px; margin-left:20px; color:#fff; font-size:24px; font-weight:bold}

#nmain02 .leibie .title span{ display:block; background-color:#fff; width:28px;margin-left:20px; height:3px; margin-bottom:10px}

#nmain02 .leibie .intro p{ line-height:52px; font-size:16px;}

#nmain02 .leibie .intro p a{background:url(../images/guide.jpg) no-repeat 93% center; padding-left:5%; border-bottom:solid 1px #ddd; display:block}

#nmain02 .leibie .intro p a:hover, #nmain02 .leibie .intro p .cur{background:url(../images/guide02.jpg) no-repeat 93% center; padding-left:5%;color:#fff; background-color:#008AD0;}

#nmain02 .intro{ margin-top:12px;}

#nmain02 .prolist{ float:right; width:70%; }

#nmain02 .prolist .title{padding:22px 0;}

#nmain02 .prolist .title h3{ margin-bottom:6px; font-size:24px; font-weight:bold}

#nmain02 .prolist .title p{  font-size:16px;}



#nmain02 .prolist .plist li{
	float:left;
	width:32%;
	margin-right:2%;
	margin-bottom:40px;
	line-height:30px;
	font-size:16px;
	
}

#nmain02 .prolist .plist li:nth-child(3n){margin-right:0%}
#nmain02 .prolist .plist li:nth-child(3n+1){ clear:both}


#nmain02 .prolist .plist li img{ width:98%; height:auto; border:solid 1px #ddd; margin-bottom:12px}





.nguide { width:100%; max-width:680px; margin:15px auto 40px auto;}

.nguide li { width:20%; float:left}

.nguide li a { display:block;width:90%; margin:0 5%; background-color:#ddd; font-size:18px; line-height:40px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; text-align:center;} 

.nguide li a:hover, .nguide li .cur{background-color:#008AD0; color:#fff}



#nmain .intro{ margin-top:44px;}

#nmain .skuai{ border: solid 1px #ddd; margin-bottom:30px}

#nmain .skuai .skzuo{ float:left; width:42%; padding:22px 4%;}

#nmain .skuai .skyou{ float:right; width:50%;}

#nmain .skuai img{ width:100%; height:auto; border:none; display:block; margin:0; padding:0}



#nmain .skuai .skzuo h3{ line-height:65px; font-size:24px; font-weight:bold; color:#008AD0}

#nmain .skuai .skzuo p{ color:#666; font-size:16px; line-height:30px}

#nmain .skuai .skzuo .mores{ width:120px; height:40px; text-align:center; margin-top:38px; }

#nmain .skuai .skzuo .mores a{ display:block; line-height:40px; color:#008AD0; border:solid 1px #008AD0;}

#nmain .skuai .skzuo .mores a:hover{color:#fff; border:solid 1px #008AD0; background-color:#008AD0}



#nmain .skuai:nth-child(2n) .skzuo{float:right;}

#nmain .skuai:nth-child(2n) .skyou{float:left;}



.solidetail { border-top: solid 1px #ddd; padding: 40px 0; line-height:30px; font-size:16px; min-height:400px}



.back{ width:116px; height:40px; margin:0 auto; line-height:40px;}

.back a{ color:#999999; font-size:16px; border: solid 1px #ddd; display:block; text-align:center; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; }

.back a:hover{color:#fff; border:solid 1px #008AD0; background-color:#008AD0; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px;}





.nguide02 { width:100%; max-width:280px; margin:15px auto 40px auto;}

.nguide02 li { width:50%; float:left}

.nguide02 li a { display:block;width:90%; margin:0 5%; background-color:#ddd; font-size:18px; line-height:40px; -webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; text-align:center;} 

.nguide02 li a:hover, .nguide02 li .cur{background-color:#008AD0; color:#fff}

.newsli{border-bottom:solid 1px #ddd;}

.newsli .npic{ float:left; width:28%; }

.newsli .npic img{ width:100%; height:auto; border:0; display:block }

.newsli .nwenzi{ float:right; width:68%;  }

.newsli .nwenzi h3{ line-height:50px; font-size:18px; height:50px; overflow:hidden}

.newsli .nwenzi p{ line-height:30px; height:90px; overflow:hidden; color:#666; font-size:14px; margin:15px 0 40px 0;}

.newsli .nwenzi .times {background:url(../images/tome.png) no-repeat left center; padding-left:35px ;margin:0;height:30px; overflow:hidden;}

#nmain .newsli a{ padding:24px 0; display:block;}

#nmain .newsli a:hover{background-color:#F5F5F5;}





#nmain .title02 h3{ font-size:24px; text-align:center; color:#000;  line-height:38px; padding:6px 0;font-weight:bold}

#nmain .title02 p{ font-size:14px; text-align:center; color:#333;  line-height:35px;}



.newsdetail { border-top: solid 1px #ddd; padding: 40px 0; line-height:30px; font-size:16px; min-height:400px;border-bottom: solid 1px #ddd; margin-bottom:30px }



.lianxi .lxleft{ float:left; width:48%; }

.lianxi .lxleft h3{ font-size:24px; line-height:60px; font-weight:bold}

.lianxi .lxleft p{ font-size:16px; line-height:36px;}

.lianxi .lxleft img{ border:solid 1px #ddd}

.lianxi .lxright{ float:right; width:50%; }



#dituContent{ height:500px}