@charset "UTF-8";
/*body,html{ min-width: 1200px; overflow-x: hidden; }*/
*{ margin:0; padding:0; -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   -o-box-sizing: border-box;    -ms-box-sizing: border-box;
box-sizing: border-box;  }
body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{ margin:0; padding:0; color:#000; font-family:"Microsoft yahei"; }

body,p{ font-size:14px; border:none; color: #000;}
a{ font-size:14px; color:#000; text-decoration:none; border:none; padding:0; margin:0;}
table{border-collapse:collapse;}
img{ border:0; margin:0; padding:0;}
ul,li{ list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{ font-weight:normal; /*font-size:12px;*/ display:block;}
/*strong,b{ font-weight:normal;}*/
table,tr,td{ border-spacing:0;}
em,i,b{ font-style:normal;}
p{ line-height: 170%; color: #555;/* font-size: 14px;*/}
input{ border: none; background: none; }
figcaption{ display: block;}
input:focus{ outline: none; }
::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } 
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } 


.flex{ display: flex; justify-content:safe center;flex-wrap:wrap}

.flex-left{display:flex;justify-content:flex-start;flex-wrap:wrap}
.flex-right{display:flex;justify-content:flex-start;flex-wrap:wrap}
.flex-center{display:flex;justify-content:center;flex-wrap:wrap}
.flex-liangduan{display:flex;justify-content:space-between;flex-wrap:wrap}


.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}

.f{ float:left}
.r{ float:right}




/**/
.inner{ width:1400px; margin: 50px auto;}

@media screen and (max-width: 1680px)
 {
.inner{ width:1200px; margin: 80px auto;}
.inner_cp{ width:1300px; margin: 80px auto;}
 }
 
 @media screen and (max-width: 1440px)
 {
.inner{ width:1200px; margin: 60px auto;}
 }

@media screen and (max-width: 1024px)
 {
.inner{ width:98%; margin: 20px auto;}
 }
/**/
.inner_01{ height:auto;}
.about{ width:40%; height:426px; float:left;font-size:16px; }

.about h3{ height:120px; width:100%; font-size:30px; color:#00448a; line-height:120px;font-weight:600}
.about .contact{ height:auto; line-height:28px; width:100%;}
.about .inoc{ height:80px; width:100%; margin-top:50px}

.about .inoc ul{}
.about .inoc ul li{ float:left; width:33%!important; text-align:center}
.about .inoc ul li p{ margin-top:50px; line-height:28px; font-size:16px; display:block}

.inoc1{ background:url(../images/inoc1.jpg)no-repeat  top center }

.inoc2{ background:url(../images/inoc2.jpg)no-repeat  top center }

.inoc3{ background:url(../images/inoc3.jpg)no-repeat  top center }

.imgs{width:55%; height:426px; float:right;}	
.imgs ul{}
.imgs ul li{float:left; width:48%; margin:1%;}
.imgs ul li img{ width:100%}	

@media screen and (max-width: 1024px)
 {
.about{ width:100%; height:auto; float:none;
}
.about h3{ height:70px; width:100%; font-size:27px; color:#00448a; line-height:70px}
.imgs{width:100%; height:auto; float:none; margin-top:20px}	 
.about .inoc{ height:auto; width:100%; margin-top:30px} 

 }




/**/

.inner_title{ height:auto; margin:50px auto}
.inner_title h3{ height:120px; width:100%; font-size:38px; color:#00448a; line-height:120px; text-align:center; font-weight:600}
.inner_title h4{ width:100%; font-size:16px; color:#888888;  text-align:center; height:auto}

@media screen and (max-width: 1680px)
 {
.inner_title{ height:auto; margin:40px auto}
.inner_title h3{ height:100px; width:100%; font-size:36px; color:#00448a; line-height:100px; text-align:center; font-weight:600}
.inner_title h4{ width:100%; font-size:16px; color:#888888;  text-align:center; height:auto}
 }
 
 @media screen and (max-width: 1440px)
 {
.inner_title{ height:auto; margin:50px auto}
.inner_title h3{ height:80px; width:100%; font-size:32px; color:#00448a; line-height:80px; text-align:center; font-weight:600}
.inner_title h4{ width:100%; font-size:16px; color:#888888;  text-align:center; height:auto}
 }

@media screen and (max-width: 1024px)
 {
.inner_title{ height:auto; margin:20px auto}
.inner_title h3{ height:60px; width:100%; font-size:24px; color:#00448a; line-height:60px; text-align:center; font-weight:600}
.inner_title h4{ width:100%; font-size:16px; color:#888888;  text-align:center; height:auto}
 }
@media screen and (max-width: 768px){
	.inner_title h4{ width:100%; font-size:14px; color:#888888;  text-align:center; height:auto}
}

/**/


.index-seccp figure { position: relative;}

.index-seccp figure img{ display: block; max-width: 100%;}

.index-seccp .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.6s;}
.index-seccp .mask span{   display: flex; justify-content: center;
align-items: center; margin: 50% auto 10px auto; transition: all 0.6s; opacity: 0; transform: translateY(-30px); font-size: 18px; color:#fff }
.index-seccp .mask .p3{   text-transform: uppercase; width: 10%;transition: all 0.6s ; opacity: 0; transform: translateY(20px); border-bottom:1px solid #FFF; margin:0px auto}

.index-seccp .mask-bg{ position: absolute; top: 0%; right: 0; bottom: 0%; left: 0; background:rgba(0,0,0,0.5); z-index: -1;transition: all 1s ease-in-out; opacity: 0; height: 100%;}


.cp_list{ width:100%; height:auto}
.cp_list ul{}
.cp_list ul li{ width:19%; float:left; list-style:none}
.index-seccp .swiper-slide{ margin:0.5%}
.index-seccp .swiper-slide img{display: block; width: 100%;}
.index-seccp .swiper-slide:hover .mask-bg{ opacity: 1; height: 100%;}
.index-seccp .swiper-slide:hover .mask span{ opacity: 1; transform: none;}
.index-seccp .swiper-slide:hover .mask .p3{ opacity: 1; transform: none;}
.index-seccp .swiper-container{ padding-bottom: 100px;}




@media screen and (max-width: 1024px)
 {
.index-seccp{ display:none}
 }
 
 


/**/



.index-secpro .title img{ display: block; margin: 0 auto;}

.index-secpro .title h3{  font-size: 34px; text-align: center; padding-top: 20px; letter-spacing: 3px; color:#000}
.index-secpro{  position: relative;}
.index-secpro .tab-bd{ padding-top: 35px;}

.index-secpro figure { position: relative;}
.index-secpro figure .p1{ position: absolute; top: 50px; left:35px; color: #fff; width: 16px; font-size: 16px; transition: all 0.6s;}
.index-secpro figure .p1 i{ display: block; background: #fff; width: 1px; height: 70px; margin: 15px auto;}
.index-secpro figure img{ display: block; max-width: 100%;}
.index-secpro .p2{ background: #fff; color: #000; height: 50px; line-height: 50px; font-size: 20px; text-align: center; }

.index-secpro .mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: all 0.6s;}
.index-secpro .mask span{ background: #fff; height:70px; width:70px; background:rgba(9,72,143,0.8);  border-radius: 100%; display: flex; justify-content: center;
align-items: center; margin: 30% auto 10px auto; transition: all 0.6s; opacity: 0; transform: translateY(-30px);}
.index-secpro .mask span i{ border:2px solid #fff; color: #fff; font-size: 36px; font-family: arial; border-radius: 100%;  height: 40px; width: 40px;
display: flex; align-items: center; justify-content: center; transition: all 0.6s;}
.index-secpro .mask .p3{ font-family: arial; color: #fff; text-align: center; color: #fff; font-size: 20px; text-transform: uppercase; width: 100%;
transition: all 0.6s ; opacity: 0; transform: translateY(20px);}
.index-secpro .mask-bg{ position: absolute; top: 0%; right: 0; bottom: 0%; left: 0; background:rgba(0,0,0,0.5); z-index: -1;
transition: all 1s ease-in-out; opacity: 0; height: 100%;}


.product_list{ width:100%; height:auto}
.product_list ul{}
.product_list ul li{ width:24%; float:left}


.index-secpro .swiper-slide{ margin:7px 7px 27px 7px}

@media screen and (max-width: 1680px)
 {
	 .index-secpro .swiper-slide{ margin:7px 5px 27px 5px}
 }

.index-secpro .swiper-slide .p2{ background:rgba(9,72,143,1); color: #fff;}

.index-secpro .swiper-slide .p2 a{ color: #fff; }

.index-secpro .swiper-slide img{display: block; width: 100%; /*height:336px*/ height:auto}



.index-secpro .swiper-slide:hover .p1{ top: -5%; opacity: 0; }
.index-secpro .swiper-slide:hover .mask-bg{ opacity: 1; height: 100%;}
.index-secpro .swiper-slide:hover .mask span{ opacity: 1; transform: none;}
.index-secpro .swiper-slide:hover .mask .p3{ opacity: 1; transform: none;}
.index-secpro .swiper-container{ padding-bottom: 100px;}


.index-secpro .more{ width:130px; height:50px; background:#f08300; margin:1% 0; text-align:center; line-height:50px; margin:20px auto 0px}
.index-secpro .more a{ color:#FFF}


@media screen and (max-width: 1024px){
	
	
	.product_list ul li{ width:46%; float:left}
	
	.index-secpro .p2{ background: #fff; color: #000; height: 36px; line-height: 36px; font-size: 14px; text-align: center; }
	.index-secpro .more{ width:130px; height:36px; background:#f08300; margin:1% 0; text-align:center; line-height:36px; margin:20px auto 0px}
	}








/**/
.index-youshi{ height:auto; background:url(../images/ys_bg.jpg) no-repeat; padding-bottom:40px}

.index-youshi h3{ height:180px; width:100%; color:#00448a;  text-align:center; font-weight:600;  margin:0px auto;  }
.index-youshi h3 span{ font-size:48px; line-height:180px }
.index-youshi h3 font i{font-size:98px; color:#f69f00; display:block;line-height:180px;font-style:oblique  }
.ys{ background:#FFF; width:1400px; padding:40px;}

@media screen and (max-width: 1680px)
 {.ys{ background:#FFF; width:1300px; padding:40px;}}


.ys1{ height:auto; margin:0px auto 40px auto}	
.ys1 .left{  width:45%}
.ys1 .left .title{ margin-bottom:30px}
.ys1 .left .title .sz{ width:84px; height:84px;background:url(../images/sz.png) no-repeat; font-size:48px; text-align:center; line-height:84px; color:#FFF}
.ys1 .left .title .wz{ font-size:20px; color:#f69f00; padding-left:15px}
.ys1 .left .title .wz span{font-size:35px; color:#0068bf; line-height:50px; font-weight:600}

.ys1 .left .list{ height:auto;background:url(../images/ys_arr.png) no-repeat; padding-left:30px; line-height:23px; margin:20px 0 20px 84px}


.ys1 .right{width:55%; }

@media screen and (max-width: 1024px)
 {
 .index-youshi{ height:auto; background:url(../images/ys_bg.jpg) no-repeat; padding-bottom:20px}
.index-youshi h3{ height:100px; width:100%; color:#00448a;  text-align:center; font-weight:600;  margin:0px auto;  }
.index-youshi h3 span{ font-size:28px; line-height:100px }
.index-youshi h3 font i{font-size:48px; color:#f69f00; display:block;line-height:100px;font-style:oblique  }
	
.ys{ background:#FFF; width:100%; padding:0 }
.ys1{ height:auto; margin:0px auto 20px auto}	
.ys1 .left .title{ margin-bottom:30px; display:none}

.ys1 .left .list{ height:auto;background:url(../images/ys_arr.png) no-repeat; padding-left:30px; line-height:23px; margin:15px 0 15px 10px}
.ys1 .left{  width:100%}

.ys1 .right{width:100%; }
.ys1 .right img{ width:100%}

 }

/**/
.index-sec5{ width:1482px; margin:0px auto}


@media screen and (max-width: 1680px)
 {
.index-sec5{ width:1282px; margin:0px auto}
 }




.index-sec5 .title h3{ color: #000;}
.index-sec5 ul{}
.index-sec5 ul li{ width: 22%;  overflow: hidden; margin:0 15px }
.index-sec5 ul li figure{position: relative;}
.index-sec5 li .time{position: absolute; top:0; color: #fff; line-height:25px; width:70px; height:70px; background:#0092e5; text-align:center; font-size:16px; padding-top:4%}
.index-sec5 li .time span{ font-size:25px}

.index-sec5 ul li figure img{display: block;  max-width: none; transition: all 0.6s; width:100%;/*width:-webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transform: translate3d(-20px,0,0); transform: translate3d(-20px,0,0);*/}
.index-sec5 ul li:hover figure img{  -webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.index-sec5 li figcaption{ overflow: hidden; padding:20px 0 }

.index-sec5 li h5{ font-size: 14px; color: #000;letter-spacing: 2px; font-weight:600}

.index-sec5 li p{  color: #000; line-height: 30px; height: auto; overflow: hidden; margin:10px 0 }

/*.index-sec5 li .div1 b{ display: block; height: 1px; background: #aeaeae; width: 70%;}*/
.index-sec5 li .div1 { font-size: 14px; color: #0092e5; font-weight:600}
.index-sec5 li:hover figcaption{ }

.index-sec5 .more{ width:130px; height:50px; background:#f08300; margin:1% 0; text-align:center; line-height:50px; margin:20px auto 0px}
.index-sec5 .more a{ color:#FFF}


  @media screen and (max-width: 1024px){
 .index-sec5 li .time{position: absolute; top:0; color: #fff; line-height:25px; width:60px; height:60px; background:#0092e5; text-align:center; font-size:16px; padding-top:2%}
.index-sec5 li .time span{ font-size:18px}


	  .index-sec5{ width:98%; margin:0px auto}
	  .index-sec5 li figcaption{padding:20px 0}
	  .index-sec5 ul li{ width: 48%;  overflow: hidden; margin:0 1% }
	  .index-sec5 li p{  color: #000; line-height: 25px; height:auto; overflow: hidden; margin:10px 0 }
	  }
	  
	  /**/
.footer_bg{width:100%;background: #0092e5; margin-top:50px}
.footer{  width:1400px; padding:30px 0; margin:0 auto}

@media screen and (max-width: 1680px)
 {
.footer{  width:1200px; padding:30px 0; margin:0 auto}
 }


.footer .div1{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}
.footer .div1 p a{ color: #fff; font-size: 16px; display: inline-block; padding-left: 20px; transition: all 0.6s;}
.footer .div1 p a:hover{ transform: translateY(5px); color: #D08F2E;}
.footer .div2{ display: flex; justify-content: space-between;  padding-top: 30px;}
.footer .div2 .index_addr{ color:#FFFFFF; line-height:30px}
.footer .div2 p a{ color: #fff; font-size: 16px; display: inline-block; padding-right: 40px;transition: all 0.6s;}
.footer .div2 p a:hover{ transform: translateY(5px); color: #D08F2E;}
.footer .div2 p{ color: #535353; font-size: 14px; line-height: 36px; }
.footer .div2 .p2{ margin-top: 0px; }
.footer .div2 .code{ display: flex;}
.footer .div2 .code img{ width:100%; height:auto}
.footer .div2 .code p{ text-align: center; font-size: 14px; color: #fff;}
.footer .code div{ margin-left: 15px;}
.copyright{ text-align: center; font-size: 14px; color: #535353; background: #0092e5; padding: 20px 80px;  }

  @media screen and (max-width: 1024px){
	  .footer{  width:95%; padding:30px 0; margin:0 auto}
	  .footer .div1 p{ color: #535353; font-size: 14px; line-height: 36px; display:none!important;  }
	  .footer .div1 img{ width:90%;}
	  
	  }