@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0;     box-sizing: border-box; }
html, body { width: 100%;     font-family: '微软雅黑'; font-size: 14px; }
img { border:none ;max-width:100%;     text-align-last: center;    vertical-align: middle; display: block;}
#map span{ overflow: inherit;  }
#map img{ max-width: none; }
a { color:#333;text-decoration:none; }
a:hover { color:#004181 ;text-decoration:none;}
ul { list-style:none;}
li{ list-style-type :none;}
.clear {clear:both;    float: none!important;    background: none;    width: 0 !important;    height: 0 !important;}
.clearfix  {clear:both;}
.w1200 { max-width:1550px; margin: 0 auto; width:94%;}
.span{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;    display: block;}
.p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.fl{float: left;}
address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: normal;
}
table
{
    border-collapse:collapse;
}
tr{    border: 1px solid black!important;}
td{    border: 1px solid black!important;}
.banner_sy .swiper-pagination-bullet:only-child{display: inline-block!important;}
  .banner_sy  .swiper-container {
      width: 100%;
      height: 100%;
    }

    .banner_sy .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.nav{z-index: 9999;    position: fixed;   transition: all .5s; overflow: hidden; background: #fff;width: 100%; top: 0; left:auto;}
.nav .logo{ width: 15%; padding: 20px 0; float: left;}
.nav .nav_ul{ float:right;     max-width: 75%; margin: 0 20px 0 0; }
.nav .nav_ul > li { float: left; position:  relative;  }
.nav .nav_ul > li > a{ line-height:100px; font-size: 16px; padding: 0 26px;  transition: all .5s; display: block;}
.nav .nav_ul > li > a:hover{ color: #004181; }
.nav .nav_ul > li a.en{ padding: 8px; background: #004181; display: block; line-height: normal;     margin: 31px 0; border-radius: 20px; color: #fff;}

.nav .nav_ul > li > a:after {    content: attr(data-title);    position: absolute;    top: 0;    left: 0;    transform: translateY(100%);    
  width: 100%;    height: 100%;    display: flex;    align-items: center;    justify-content: center;   color: #222; display: block;  transition: all .5s; padding: 0 26px; }
.nav .nav_ul > li:hover > a{  transform: translateY(-100%) ; transition: all .5s;  }
.nav .nav_ul > li:hover > a:after{ display: block; }
.nav .nav_ul > li::before{ content: "";    display: block; width: 0%; height: 2px; position: absolute; bottom: 0px; left: 50%; background: #004181; transform: translateX(-50%);     transition: all .5s ease; opacity: 0;  }
.nav .nav_ul > li.on::before{ content: "";    display: block;  width: 100%; opacity: 1;height: 2px; position: absolute; bottom: 0; left: 0; background: #004181;  z-index: 999  ;transform: translateX(0%);   }
.nav .nav_ul > li:hover::before{ width: 100%; opacity: 1 ; }


.nav_tel{    width: 20%;    margin-left: 2%;   max-width: 260px; float: right; background: url(../img/top_tel.png) no-repeat left center; padding: 0 0 0 50px; margin: 24px 0 0 20px; } 
.nav_tel span{    font-size: 14px;    color: #707070; }
.nav_tel h4{       color: #e80000;    font-size: 24px;    font-weight: normal;    letter-spacing: -3px;    white-space: nowrap; font-weight: 700;}

.nav .nav_ul h2{ color: #000;}
.nav .nav_ul .nav_cont{float:left; width: 74%;}
.nav .nav_ul > li > ul{ position: fixed; left: 0%; top: 100px; display: none; z-index: 999; transition: all .5s; border-top: 1px #efefef solid;  background: #fff; padding: 20px 0;}
.nav .nav_ul > li:hover > ul{ display: block; width:100%; background:url(../img/b2.jpg) no-repeat bottom center; }
.nav .nav_ul > li:hover > ul li { width:14%; margin: 30px 50px 0 0; float: left;}
.nav .nav_ul > li:hover > ul li:nth-child(5n){}
.nav .nav_ul > li:hover > ul li a{ width:100%;  display: inline; line-height: 48px; color: #000; font-size: 18px; position: relative; }
.nav .nav_ul > li:hover > ul li a:after{     content: "";    display: table; width: 20px; height: 1px; position: absolute; top: -10PX; left: 0px; background: #000;transition: all .5s; }
.nav .nav_ul > li:hover > ul li:hover a{ color: #004181; }
.nav .nav_ul > li:hover > ul li:hover a:after{     content: "";    display: table; width: 100%; height: 1px; position: absolute; top: -10PX; left: 0px; background: #000;  }
.nav .nav_ul > li > img{ padding: 30px 24px; cursor: pointer; filter: grayscale(100%) brightness(00%);}
.nav .nav_ul .nav_img{ float: right; overflow: hidden; }
.nav .nav_ul .nav_img img{ transition: all .5s;}
.nav .nav_ul .nav_img img:hover{ transform: scale(1.2); }

.banner {position: relative; margin: 100px 0 0; z-index: 1}
.banner h2{width: 300px;position: absolute;display: block;line-height: 36px;top:calc(50% - 18px);color: #fff;font-size: 32px;}
.banner h2:after{     content: "";    display: block; width: 70px; height: 3px; position: absolute; top: 60px; left: 0; background: #fff;     }

.banner_sy .w1200{position: absolute; height: 100%;     transform: translateY(30%); opacity: 0;}
.banner_sy h3{ position: absolute; top: 32% ;left: 0;     color: #fff;   padding-bottom: 10px;    font-size: 36px;    font-weight: bold}
.banner_sy h3:after{     content: "";    display: block; width: 6px; height: 40px; position: absolute; top: 10px; left: -30px; background: #005bac;     }
.banner_sy h4{ position: absolute; top: calc(32% + 60px) ;left: 0; overflow: hidden;    color: #fff;    font-size: 24px;   font-weight: 100;}
.banner_sy a{ position: absolute; top: calc(32% + 90px) ;left: 0;  display: inline-block;    font-size: 16px;    background-color: #004181;    padding: 10px 20px;    text-align: center;    color: #fff;    margin-top: 3rem;}

.banner_sy .swiper-slide-active .w1200{  transition: all 2s ease .5s;    transform: translateY(0);    opacity: 1;}


.black0{ position: relative; padding: 50px 0 0; }
.black0::before {    content: '';    position: absolute;    background: #004181;    height: 260px;    width: 100% ; transition: all .5s;    transform-origin: center;    transform: scale(1);    top: 0;    z-index: -1;}
.black0_tit{ }
.black0 p{ text-align:  center; }
.black0 p.p1{ font-size: 30px; font-weight: bold; color: #fff; line-height: 54px;}
.black0 p.p2{ font-size: 16px; color: #fff; line-height: 28px; }
.black0 ul{ padding: 60px 20px 50px; background: #fff; background-color: rgba(255, 255, 255, 1);    box-shadow: 0px 0px 5px 1px rgb(0 0 0 / 10%); margin: 50px 0 0;}
.black0 ul li{  float: left; border-left: 1px solid #ccc; padding: 0 0 0 40px; margin: 15px 0; margin: 0 0 0 0px;    width: 24.25%; position: relative; }
.black0 ul li h3{font-size: 40px;    color: #333;    line-height: 40px;    font-weight: bold;    display: inline-block;}
.black0 ul li i{font-size: 16px;    color: #004181;    text-align: right;    display: inline-block;    font-style: normal;}
.black0 ul li p{    color: #999;    font-size: 14px;    line-height: 30px; text-align: left;  }
.black0 ul li:after{     content: "";    display: block; width: 1px; height: 30px; position: absolute; top: 0px; left:-1PX; background: #004181;     }

.black1{ margin: 50px 0 0; background: #f5f5f5;}
.black1_tit{ position: relative;  border-bottom: 1px #eee solid; padding: 0 0 30px; background: #fff;}
.black1_tit h2{ font-size: 53px;    color: #f5f5f5;    font-weight: 700;    text-transform: uppercase; text-align: center;}
.black1_tit h1{ font-size: 40px;    line-height: 40px;    font-weight: normal;    position: relative;    margin-top: -22px;  text-align: center; font-weight: bold;}
.black1_tit:after{     content: "";    display: block; width: 80px; height: 5px; position: absolute; bottom: -3px; left: calc(50% - 40px); background: #004181;     }

.black1 .ul_fenlei{padding: 50px 0 30px; background: #fff;}
.black1 .ul_fenlei ul{ max-width: 1200px; margin: 0 auto; width: 94%; }
.black1 .ul_fenlei ul li{ width: calc((100% - 50px) / 6); float: left; margin: 0 10px 10px 0; background: #004181;border-radius: 8px; transition: all .5s;  }
.black1 .ul_fenlei ul li:nth-child(6n){margin: 0 0 10PX 0;}
.black1 .ul_fenlei ul li a{ display: block; line-height: 39px; text-align: center; color: #fff; }
.black1 .ul_fenlei ul li:hover{   background: #e80000; }


.black1 .w1200 ul{ margin: 50px 0;}
.black1 .w1200 ul li{ width: calc((100% - 60px) / 4 ); float: left; margin: 0 20px 30px 0; padding: 12px; background: #fff;}
.black1 .w1200 ul li:nth-child(4n){ margin:0 0 30px 0; }
.black1 .w1200 ul li img{ width: 100%;transition: all .5s; }
.black1 .w1200 ul li .ico{ overflow: hidden; }
.black1 .w1200 ul li p{ text-align: center; line-height: 36px; color: #666; }
.black1 .w1200 ul li:hover img{  transform: scale(1.2); }

.black1 .w1200 ul .gd{ width: 200px; margin: 20px auto 50px; display: table; background: #004181; text-align: center; color: #fff; line-height: 48px;transition: all .5s;  }
.black1 .w1200 ul .gd:hover{ letter-spacing: 8px; }
    

.black2{ padding: 88px 0 260px; position: relative;    }
.black2_tit{position: relative;}
.black2_tit h2{ font-size: 50px; color: #fff;}
.black2_tit h3{ font-size: 26px; color: #fff; line-height:52px;}
.black2_tit:after{     content: "";    display: block; width: 40px; height: 2px; position: absolute; bottom: -20px; left: 0; background: #fff;     }
.black2_cont{ color: #Fff; line-height: 24px; margin: 42px 0 40px;}
.black2 .gd{ padding: 0 45px 0 20px; line-height: 40px; color: #fff; border: 1px solid #5f6265; display: inline-block;  transition: all .5s; position: relative; z-index: 99}
.black2 .gd:hover{ border: 1px solid #004181;  z-index: 999;  background: #004181;}
/*.black2 .gd::before{  content: "";    display: inline-block; width: 0px; height: 100%; position: absolute; top: 0px; left: 0; background: #004181; z-index: 9 ; transition: all .5s;  }
.black2 .gd:hover::before{  content: "";    display: inline-block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0; background: #004181; z-index: 0 ;   }*/

.black2_list{ background: rgb(0 65 129 / 55%); position: absolute; bottom: 0;  width: 100%; }
.black2_list ul{}
.black2_list ul li{ width: calc((100% - 5px) / 4); float: left; border-left: 1px hsla(255,255%,255%,0.25) solid; padding: 40px 0 25px;}
.black2_list ul li:nth-child(4){border-right:  1px hsla(255,255%,255%,0.25) solid;}
.black2_list ul li img{ margin: 0 auto;  transition: all .5s;}
.black2_list ul li p{ text-align: center; color: #fff; font-size: 16px; line-height: 54px; }
.black2_list ul li:hover img{  transform: rotateY(180deg); }

.black3{ padding: 50px 0 ; background: #fff;}
.black3_tit{ position: relative;  padding: 0 0 30px;}
.black3_tit h2{ font-size: 53px;    color: #f5f5f5;    font-weight: 700;    text-transform: uppercase; text-align: center;}
.black3_tit h1{ font-size: 40px;    line-height: 40px;    font-weight: normal;    position: relative;    margin-top: -22px;  text-align: center; color: #333; font-weight: bold;}
.black3_tit p{ line-height: 64px; text-align: center; color: #999;}

.black3 .w1200{ overflow: hidden;}
.black3 .w1200 p{ line-height: 48px; text-align:  center;}

  .black4 { padding: 100px 0; }
  .black4  .swiper-container{
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }

   .black4 .swiper-slide {
      background-size: cover;
      background-position: center;
    background-repeat:no-repeat;  
    }

   .black4 .gallery-top {
      height: 100%;
      width: 100%;
    }

   .black4 .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    width:80%;
    }

   .black4 .gallery-thumbs .swiper-slide {
    opacity: 1;
      height: 70%;
    background-color: unset;
    position: relative;
    }
     .black4 .gallery-thumbs .swiper-slide:after{    
      content: "";    display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000;   opacity: 0.29;  }
   .black4 .gallery-thumbs .swiper-slide-thumb-active {
    border: 3px #fff solid;
      opacity: 1;
    filter:none;
    }
 .black4 .gallery-thumbs .swiper-slide-thumb-active:after {
  content: "";    display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000;   opacity: 0;  
}
.black4 .swiper-container-pointer-events{ margin-bottom: -90px}
.swiper-button-next{ background: url(../img/fr.jpg) no-repeat!important; width: 50px!important; height: 50px!important; top: 88%!important;}
.swiper-button-prev{ background: url(../img/fl.jpg) no-repeat!important; width: 50px!important; height: 50px!important; top: 88%!important;}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{content:""!important;}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{content:""!important;}



.black4_right{ float: right; width: 52%; height: 470px;} 

.black4_left{ float: left; width: 48%; padding: 50px 0 0 ; background-color: rgba(0, 0, 0, 0.6);    height: 470px; }
.black4_left h3{ font-size: 53px;   color: rgba(255,255,255,0.1);   font-weight: 700;    text-transform: uppercase; padding: 0px 60px 0;}
.black4_left h2{ font-size: 40px;    line-height: 40px;    font-weight: normal;    position: relative; color: #fff;   margin-top: -22px;  font-weight: 700;  padding: 0px 60px 0;}
.black4_left p{ font-size: 16px; color:rgba(255,255,255,0.6);padding: 0px 60px 0; margin: 30px 0; width: 80%; line-height: 32px;}

.black4_left .gd{ border:1px solid rgba(255,255,255,0.6); padding: 0 70px 0 40px; line-height: 40px; color: #fff; display: inline-block;  transition: all .5s; margin: 0 20px;}
.black4_left .gd:hover{   letter-spacing: 8px; }


.black5{ padding: 50px 0 ; background: #fff;}
.black5_tit{ position: relative;  padding: 0 0 30px;}
.black5_tit h2{ font-size: 53px;    color: #f5f5f5;    font-weight: 700;    text-transform: uppercase; text-align: center;}
.black5_tit h1{ font-size: 40px;    line-height: 40px;    font-weight: normal;    position: relative;    margin-top: -22px;  text-align: center; color: #333; font-weight: bold;}
.black5_tit p{ line-height: 64px; text-align: center; color: #999;}

.black5_left{ width: 48%; float: left; position: relative;  }
.black5_left img{  }
.black5_left span{ position: absolute; bottom: 0; ;left: 0; line-height: 48px; text-align: center;display: block; width: 100%; background: rgba(0, 0, 0, 0.6);  color: #fff;}

.black5_right{ float: right; width: 48%; }
.black5_right li{ display: flex; margin: 0 0 40px;}
.black5_right li:nth-child(4n){ margin: 0; }
.black5_right li .time{ padding: 0 30px 0 10px;  }
.black5_right li p.p1{    font-size: 30px;    color: #555;    text-align: center;}
.black5_right li p.p2{    font-size: 16px;    color: #555;    text-align: center;}
.black5_right li a{ padding: 10px 0 10px 25px; border-left: 1px solid #ddd; position: relative;}
.black5_right li a::after{     content: "";    display: block; width: 1px; height:0px; position: absolute; top: 0px; left: -1px; background: #004181; transition: all 1s;  z-index: 1; transition: all .5s;  }
.black5_right li a:hover::after{     content: "";    display: block; width: 1px; height:100%; position: absolute; top: 0px; left: -1px; background: #004181; transition: all 1s;  z-index: 1;  }
.black5_right li span{font-size: 16px;    overflow: hidden;    font-weight: bold;}
.black5_right li p.p3{font-size: 14px;    height: 46px;    line-height: 26px;    color: #999;    display: -webkit-box;    overflow: hidden;    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;    text-overflow: ellipsis;    margin-bottom: 28px; font-weight: normal; margin: 10px 0;}


.black6{ padding: 50px 0 ; background: #f5f5f5;}
.black6_tit{ position: relative;  padding: 0 0 30px;}
.black6_tit h2{ font-size: 53px;    color: #ececec;    font-weight: 700;    text-transform: uppercase; text-align: center;}
.black6_tit h1{ font-size: 40px;    line-height: 40px;    font-weight: normal;    position: relative;    margin-top: -22px;  text-align: center; color: #333; font-weight: bold;}
.black6_tit p{ line-height: 64px; text-align: center; color: #999;}

.black6 .w1200{ overflow: hidden;}
.black6 .w1200 p{ line-height: 48px; text-align:  center;}




.footer{ background: #004181; padding: 80px 0 50px; }
.footer_left { float: left; width: 60%; }
.footer_left .ss{ margin: 0 0 30px 0; }
.footer_left span{    font-size: 20px;    color: #fff;    display: inline-block;    font-weight: bold;    line-height: 36px;    margin:0 0 0 10px;}
.footer_left form{ padding: 0 24px 0 36px; background:url(../img/ss.png) no-repeat 5px center #fff; border-radius: 20px; display: inline-block; height: 32px; margin: -10px 0 0 0; }
.footer_left form .keyword{ width: 140px; line-height: 30px; border:none; }
.footer_left form button{ border:none;     line-height: 22px;    margin: 6px 0;    border-left: 1px #ccc solid;background:none; padding: 0 0 0 15px;}
.footer_left .foot_nav a{ padding: 0 50px 0 20px; line-height: 32px; display:  block; float: left ; color: #fff; border:1px solid rgba(255, 255, 255, 0.4); margin: 0 20px 0 0; background: url( ../img/b2.png) no-repeat right 15px center; 
  background-size: 15px; transition: all .5s;}
.footer_left .foot_nav a:hover{ color: #fff; border:1px solid #17878e; background: url( ../img/b2.png) no-repeat right 15px center #17878e; background-size: 15px;}
.font_a { margin: 30px 0;  }
.font_a a{ float: left;  margin: 0 16px 0 0; width: 30px; height: 30px; }

.footer_right{ width: 40%; float:right; }
.footer_right img { float: left; }
.footer_txt{ float: right;    width: 60%; }
.footer_txt h2{  color: #fff!important;  font-size: 24px; margin: 0 0 20px}
.footer_txt p{ line-height: 32px; font-size: 16px; color: #Fff; }

.foot{     border-top-color: rgba(255, 255, 255, .1);    border-top-style: solid;    border-top-width: 1px;background: #004181; padding: 20px 0;}
.foot p{ color: rgba(255, 255, 255, .5);  text-align: center;}

.link{ margin: 0 auto 20px; display: table;} 
.link a{ color: rgba(255, 255, 255, .5); margin: 0 10px; display: inline-block;}

.dq{ background: #eef2f5; padding: 30px 0; }
.dq .w1200 > a{ border-right: 1px solid #ccc; display: block; padding: 0 30px; float: left; font-size: 16px; position: relative;} 
.dq .w1200 > a.en{ color: #004181;}
.dq .w1200 > a::after{     content: "";    display: block; width: 0%; height: 0%; position: absolute; bottom: -30px; left: 50%; background: #004181;  transition: all .5s;   }
.dq .w1200 > a:hover::after{     content: "";    display: block; width: 80%; height:3px; position: absolute; bottom: -30px; left: 10%; background: #004181;    }
.dq .w1200 > a.en::after{     content: "";    display: block; width: 80%; height:3px; position: absolute; bottom: -30px; left: 10%; background: #004181;    }
.dq .wz{   float: right; font-size: 14px; background: url(../img/b4.png) no-repeat left center;  padding: 0 0 0 34px; background-size: 24px;  color: #555;}
.dq .wz a{ margin: 0 20px; color: #555;}

.page-status{display: none!important;}
.page{width:100%;text-align:center; padding:30px 0; clear: both;}
.page span,.page a{ display:inline-block; line-height: 24px; margin-right:5px;line-height:21px; text-align:center;color:#333;font-size:12px}
.page span{font-weight:bold;color:#fff;}
.page a{color:#333; border: 1px #ccc solid; border-radius: 10px; margin: 0 10px; padding: 3px 11px;}
.page a:hover{font-weight:bold;color:#004181;}
.page span.next,.page a.next{ width:51px; height:21px; }
.page span.next{color:#C4C4C4;font-weight:normal;}
.page a.page-num-current{background:#004181; color: #fff;}

.about{ background: #fff; padding: 40px 0 80px ;}
.about .w1200{ background: #fff;}
.about .w1200 .about_tit{ position: relative; }
.about .w1200 .about_tit h2{ margin: 20px auto 50px; font-size: 36px; font-weight: bold; position: relative; display: table; padding: 0 40px 34px; background: url(../img/img2.png) no-repeat center bottom  #fff;}
.about .w1200 .about_tit::before{ content: "";    display: block; width: 100%; height: 1px; position: absolute; top:calc(50% - 14px); left: 0; background: #ccc;    }


.about .about_right{ width: 45%; overflow: hidden; float:right; }
.about .about_right img{ transition: all .5s;  }
.about .about_right img:hover{ transform: scale(1.2);  }
.about .about_left{ width: 52%; float: left; padding: 10px; line-height: 26px;}

.about_cont2{ background:url(../img/b4.jpg) no-repeat; padding: 50px 0 50px 100px; }
.about_cont2 span{ line-height: 48px;color: #Fff!important;  }

.about_cont{ padding: 30px; width: calc(100% - 0px); background: #fff;} 

.about_list{ width: calc(100% - 0px); padding: 20px }
.about_list h3{ font-size: 24px; margin: 0 0 40px;  position: relative;}
.about_list h3::after{ content: ""; position: absolute;  width: 40px; height: 3px; background: #004181; bottom: -12px; left: 0; }
.about_list li{ width: calc((100% - 120px) / 5); float: left;  margin: 0 30px 30px 0; background: #f6f6f6; padding: 20px;}
.about_list li:nth-child(5n){ margin:  0 0px 30px 0;}
.about_list li .ioc{overflow: hidden; margin: 0 auto; }
.about_list li img{ width:100%; transition:all .5s;}
.about_list li p{ text-align: center; line-height: 36px ;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;  width: 100%; margin: 10px 0 0;}
.about_list li:hover img{ transform:scale(1.2); }
.about_list li:hover p{ background: #fff;}
.about_list .page{ margin: 20px 0 50px;}

.pro{ background: #f7f7f7; padding: 40px 0 80px ;}

.pro_left{ float: left; width: 20%;  }
.pro_left span{ padding: 20px 0 10px 20px; background: #004181; width: 100%; display: block; font-size: 20px; color: #fff; line-height: 32px;border-radius: 15px 15px 0 0;}
.pro_left em{ display: block; width: 100%; font-size: 14px; color: #fff; line-height: 32px;}
.pro_left li{ width: 100%; line-height: 60px; background: #fff; text-indent: 20px; position: relative;transition: all .5s; font-size: 16px; border-bottom: 1px #eee solid;}
.pro_left li:hover{color:#004181; }
.pro_left li:hover:after{     content: "";    display: block; width: 3px; height: 100%; position: absolute; top: 0; left: 0; background: #004181;     }
.pro_left li.on:after{     content: "";    display: block; width: 3px; height: 100%; position: absolute; top: 0; left: 0; background: #004181;     }



.pro_right{float:right; width: 78%;}
.pro_right ul{ background: #fff; padding: 30px 20px;}
.pro_right ul li{ float: left; width: calc((100% - 98px) / 4); margin: 0 30px 30px 0; }
.pro_right ul li:nth-child(4n){ margin: 0 0 30px 0;}
.pro_right ul li .ioc{ overflow: hidden;}
.pro_right ul li .name{ line-height: 48px; background: #fff; padding: 0 20px ;    border: 1px solid #f2f2f2;}
.pro_right ul li p{ border-bottom: 1px #ccc solid; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.pro_right ul li span{ display:block; text-align: left; width: 100%; background: url(../img/img3.png) no-repeat right center; transition:all .5s;}
.pro_right ul li img{transition: all .5s;}
.pro_right ul li:hover img{ transform:scale(1.2); }
.pro_right ul li:hover span{ display:block; text-align: left; width: 100%; background: url(../img/img4.png) no-repeat right center;}

.pro_right1{float:right; width: 78%;}

.pro_top{ background: #fff; padding: 50px;}
.pro_img{ width: 45%; float: left;}
    .slideBox{ width:100%; height:480px; overflow:hidden; position:relative; border:1px solid #ddd;  background: #fff;}
    .slideBox .hd{ height:60px; overflow:hidden; position:absolute; left:15%; bottom:10px; z-index:1; }
    .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
    .slideBox .hd ul li{ float:left; margin-right:5px;  width:60px; height:60px; text-align:center;border:#ccc 3px solid; }
    .slideBox .hd ul li.on{ border:#d61b20 3px solid; }
    .slideBox .hd ul li a{ display: block}
    .slideBox .bd{ position:relative;    width: 100%;    margin: 0 auto; z-index:0;   }
    .slideBox .bd li{ zoom:1; vertical-align:middle; }
    .slideBox .bd img{ width:100%; height:100%; display:block;  }
.pro_tit{ width: 50%; float: right;}
.pro_tit h2{ font-size: 20px;  }
.pro_tit .info{ margin: 30px 0; line-height: 32px; text-indent: 2em;}
.pro_tit .pro_tel{ padding: 0px 24px; background: #004181;display: inline-block; color: #fff; font-size: 16px; line-height: 42px;}

.pro_txt{ margin: 20px 0; background: #fff;}
.pro_txt_xq{ border-bottom: 1px #ccc solid;}
.pro_txt_xq h2{ background:#004181; padding: 15px 40px; display: table; color: #fff; font-size:18px;}
.pro_cont{ padding: 30px;}
.pro_cont span{ white-space:inherit; display: block;}
.sx{ margin: 80px 0 30px; border-bottom: 1px #ccc solid; line-height: 56px;}
.sx a.s{float: left;}
.sx a.x{float: right;}

.xgcp{background: #fff; margin: 20px 0 20px; border-top: 20px #f7f7f7 solid;}
.xgcp ul{padding: 20px; overflow: hidden;}
.xgcp ul li{ width: calc((100% - 90px) / 4); float: left;  margin: 0 30px 0px 0;}
.xgcp ul li:nth-child(4n){ margin:  0 0px 0px 0;}
.xgcp ul li p{ text-align: center; line-height: 42px; color: #fff; background: #4e4e4e;font-size: 16px; width: 100%; margin: 0 auto; }
.xgcp ul li:hover p{ background: #004181; }

.job_list{ padding: 50px;}
.job_list ul{ border-bottom: 1px solid #ccc; position: relative;}
.job_list ul li{float: left; line-height: 60px; font-size: 16px; text-indent: 10px;}
.job_list ul li.name{ width:25%;}
.job_list ul li.add{width: 20%;}
.job_list ul li.time{width: 20%;}
.job_list ul li.daiyu{width: 20%; color: #CB0003; font-weight: bold;}
.job_list ul li.gengduo{width: 15%; background: url(../img/plus.png) no-repeat right center; color: #666666; cursor: pointer;}
.job_list .job_cont{width: 100%;padding: 20px; border-top: 1px solid #ccc; display: none;}
.job_list .job_cont1{ }
.job_list .job_cont1 > p{ width: 25%; float: left; display: table; line-height: 32px;}
.job_list .job_cont2{ width: 100%; clear: both; padding: 20px 0 0; display: block;}


.contact{ background: #fff; padding: 40px 0 80px ;}
.contact .w1200{ background: #fff;}
.contact_left{ width: 40%; float: left;background:#004181;}
.contact_txt{ padding: 20px 40px 55px 20px;}
.contact_txt h2{  color:#fff; line-height: 56px; text-indent: 10px; font-size: 24px;     margin: 0 0 10px 40px;    border-bottom: 1px solid #ccc;}
.contact_txt span{ line-height: 48px; padding: 0 0 0 20px; display: block; margin: 0 0 0 30px; color: #Fff;}
.contact_txt span.add{ background: url( ../img/c4.png) no-repeat left center; background-size: 30px; }
.contact_txt span.tel1{  background: url( ../img/c3.png) no-repeat left center; background-size: 30px; }
.contact_txt span.tel2{ background: url( ../img/c2.png) no-repeat left center; background-size: 30px; }
.contact_txt span.fax{ background: url( ../img/c7.png) no-repeat left center; background-size: 30px;}
.contact_txt span.email{ background: url( ../img/c5.png) no-repeat left center; background-size: 30px;  }
.contact_txt span.www{  background: url( ../img/c6.png) no-repeat left center; background-size: 30px; }

.contact_right{ width: 60%; float: right;}

.contact_ly{ background: #f6f6f6; padding: 60px 0; margin: 40px 0 0}
.contact_ly h2{ font-size: 36px; font-weight: bold; position: relative; text-align: center; margin: 0 0 50px;}
.contact_ly h2 strong{ color:#004181;  }
.contact_ly h2:after{     content: "";    display: block; width: 80px; height: 3px; position: absolute; top: 66px; left: calc(50% - 40px); background: #004181;     }


.contact_ly textarea{ width: 100%; padding: 15px; font-size: 14px!important; border: #d2d2d2 1px solid;}

.contact_ly input{ margin: 20px 0 0; width: 48%; line-height: 36px; text-indent: 18px; font-size: 14px!important;border: #d2d2d2 1px solid;} 
.contact_ly input:nth-child(2n-1){ float:right}
.contact_ly input:nth-child(2n){ float:left}
.contact_ly input.ewm1{ width: 100%; }
.contact_ly .ewm{ position: relative;    float: right; width: 48%; }
.contact_ly .ewm input{ width: 100%;}
.contact_ly .ewm img{ position: absolute; top: 22px; right:2px;  height: 36px;}
.contact_ly button{ width: 100%; background: #333; margin: 20px 0 0; color: #fff; border: 0; line-height: 48px; cursor: pointer; font-size: 16px; transition:all .5s;}
.contact_ly button:hover{ background: #004181; }

.news{ background: #f7f7f7; padding: 40px 0 80px ; }
.news .news_list{ margin: 30px 0 0;}
.news .news_list li{ padding: 30px;     border-bottom: 1px solid #DDD;    margin-bottom: 20px; display: flex;}
.news .news_list li .time{ width: 100px; float: left;}
.news .news_list li .time span{ display: block;    color: #999;    font-size: 1.5rem;    font-weight: normal;    margin: 0px 0 30px;    transition: all .5s ease;width: 100%;}
.news .news_list li .time .img1{    border: 1px solid transparent;    transition: all .5s ease; display: table;}
.news .news_list li .time img{padding: 6px 11px;}
.news .news_list li:hover .time span{ color: #000; }
.news .news_list li:hover .time .img1{background: #004181;   }
.news .news_list li:hover .time img{filter: grayscale(100%) brightness(200%);  }

.news_txt{ padding: 0px 0 0px 50px; width:calc(100% - 310px); float: left; display: grid; position: relative; transition:all .5s;}
.news .news_list a{    display: contents;}
.news_txt p{ width: 95%; margin: 0 auto; transition:all .5s}
.news_txt p.p1{transition: 0.3s ease 0s;    color: #333;    font-size: 16px;    display: block;    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis; font-weight: bold;}
.news_txt p.p2{ transition: 0.3s ease 0s;    margin-top: 10px;    font-size: 14px;    line-height: 24px;    color: #666;  max-height: 65px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news_txt::after{  content: "";    display: block; width: 50px; height: 2px; position: absolute; top: 10px; left: 0; background: #ccc;  transition:all .5s; }

.news .news_list li .img2{ float: right; width: 160px; overflow: hidden;}
.news .news_list li .img2 img{ transition:all .5s;}
.news .news_list li:hover .img2 img{transform:scale(1.2); }

.news .news_list li:hover .news_txt{ padding: 0px 0 0px 90px; width:calc(100% - 350px);  }
.news .news_list li:hover .news_txt::after{  content: "";    display: block; width: 90px; height: 2px; position: absolute; top: 10px; left: 0; background: #ccc;   }

.news_list li .ioc{overflow: hidden; }
.news_list li .ioc img{ transition:all .5s}
.news_list li:hover .ioc img{  transform:scale(1.2);}

.news_conts{padding: 50px; background: #fff;}
.news_conts h2{ font-size: 22px; border-bottom: 1px solid #ccc; line-height: 56px; text-align: center; font-weight: normal;}
.news_t{ line-height: 36px;}
.news_t span{ margin: 0 42px 0 0; color: #595959}
.news_into{padding: 20px; line-height: 24px; background: #f2f2f2; color: #595959; margin: 30px 0;}
.news_cont{ padding: 20px;}


.m_head{display: none; }


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

  .nav .nav_ul{  float: right;}
  .nav .nav_tel{ display: none!important;}
  .nav .nav_ul > li > a{ padding: 0 15px;}
  .banner {
    position: relative;
    margin: 89px 0 0;
    z-index: 1;
}
}


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

  .w1200 { max-width:90%; margin: 0 auto; width:90%;}
  .top{ display: none;}
  .nav{ display: none;}
  .top span{ color: #fff; line-height: 40px; float: right; padding: 0 0 0 30px; }
  .top .top_span1{ background: url(../img/top1.png) no-repeat left center;   background-size: 24px; margin: 0 0 0 10px;}
  .top .top_span2{ background: url(../img/top2.png) no-repeat left center;   background-size: 20px; }
  
  .m_head{ display: block;    background: #fff;    padding: 20px 5%;  z-index: 999;    border-bottom: 1px solid #ababab; position: fixed; width: 100%; top: 0; }
  .m_head .logo { float:left; width: 70%;}
  .m_head .logo img { }
  .m_head .num1 { float: right;}
  .m_head .num1 img{ height: 20px; margin: 14px 0 0; }
  
  .m_nav{position: fixed; right:100%; top: 0; width: 100%; background: hsla(0,0%,0%,0.6); z-index: 99999;}
  .m_nav.on{position: absolute; right:0%; top: 0;}
  .m_nav .m_ul{ width: 80%; background:  hsla(0,0%,0%,0.8); float: right; position: relative;}
  .m_nav .m_ul li{border-bottom: 1px solid #232530;}
  .m_nav .m_ul li a{    display: block;    height: 45px;    color: #fff;    line-height: 45px;    padding-left: 5%;    font-size: 16px;}
  .m_nav .close{ position: absolute; top: 20px; left:20px;}
  .m_nav .close img{cursor: pointer;      display: block;    margin: 11px auto;    transition: all .2s;    cursor: pointer;    overflow: hidden; }
  
  .m_nav ul.m_ul > li ul.ul_too{ display: none; width: 80%; float: right;}
  .m_nav ul.m_ul > li ul.ul_too li{  }
  .m_nav ul.m_ul > li ul.ul_too li a{ }
  
  .m_nav ul.m_ul > li.gd{    background: url(../img/7_15.png) 95% 15px no-repeat;}
}


@media only screen and (max-width: 768px){
  .w1200 { max-width:90%; margin: 0 auto; width:90%;}
  .top{ display: none;}
  .nav{ display: none;}
  .top span{ color: #fff; line-height: 40px; float: right; padding: 0 0 0 30px; }
  .top .top_span1{ background: url(../img/top1.png) no-repeat left center;   background-size: 24px; margin: 0 0 0 10px;}
  .top .top_span2{ background: url(../img/top2.png) no-repeat left center;   background-size: 20px; }
  
  .m_head{ display: block;    background: #fff;    padding: 20px 5%;  z-index: 9999999;    border-bottom: 1px solid #ababab; }
  .m_head .logo { float:left; width: 50%;}
  .m_head .logo img { }
  .m_head .num1 { float: right;}
  .m_head .num1 img{ height: 20px; margin: 14px 0 0; }
  
  .m_nav{position: fixed; right:100%; top: 0; width: 100%; background: hsla(0,0%,0%,0.6); z-index: 9999999;}
  .m_nav.on{position: absolute; right:0%; top: 0;}
  .m_nav .m_ul{ width: 80%; background:  hsla(0,0%,0%,0.8); float: right; position: relative;}
  .m_nav .m_ul li{border-bottom: 1px solid #232530;}
  .m_nav .m_ul li a{    display: block;    height: 45px;    color: #fff;    line-height: 45px;    padding-left: 5%;    font-size: 16px;}
  .m_nav .close{ position: absolute; top: 20px; left:20px;}
  .m_nav .close img{cursor: pointer;      display: block;    margin: 11px auto;    transition: all .2s;    cursor: pointer;    overflow: hidden; }
  
  .m_nav ul.m_ul > li ul.ul_too{ display: none; width: 80%; float: right;}
  .m_nav ul.m_ul > li ul.ul_too li{  }
  .m_nav ul.m_ul > li ul.ul_too li a{ }
  
  .m_nav ul.m_ul > li.gd{    background: url(../img/7_15.png) 95% 15px no-repeat;}
  
  .banner_sy h3{ position: absolute; top: 32% ;left: 0;     color: #fff;   padding-bottom: 10px;    font-size:16px;    font-weight: bold}
  .banner_sy h3:after{     content: "";    display: block; width: 6px; height: 40px; position: absolute; top: 10px; left: -30px; background: #004181;    }
  .banner_sy h4{ position: absolute; top: calc(32% + 30px) ;left: 0; overflow: hidden;    color: #fff;    font-size: 14px;   font-weight: 100;}
  .banner_sy a{ position: absolute; top: calc(32% + 40px) ;left: 0;  display: none;    font-size: 12px;    background-color: #004181;    padding: 10px 20px;    text-align: center;    color: #fff;    margin-top: 3rem;}
  
  .banner h2{font-size: 24px;}
  .banner h2:after{top: 40px;}
  
  .black0 ul li{ width: 50%; margin: 20px 0; }

  .black1 .ul_fenlei ul li {    width: calc((100% - 10px) / 2);    float: left;    margin: 0 10px 10px 0;    background: #004181;    border-radius: 8px;    transition: all .5s;}
  .black1 .ul_fenlei ul li:nth-child(2n){margin: 0 0 10PX 0;}
  .black1 .ul_fenlei ul li:nth-child(2n - 1){margin: 0 10px 10PX 0;}

  .black1 .w1200 ul li{ width: calc((100% - 20px) / 2 ); float: left; margin: 0 20px 20px 0; padding: 12px; background: #fff;}
  .black1 .w1200 ul li:nth-child(2n){ margin:0 0 20px 0; }
  
  .black2{padding: 88px 0 450px;}
  .black2_list ul li{ width: calc((100% - 5px) / 2); float: left; border-left: 1px hsla(255,255%,255%,0.25) solid; padding: 40px 0 25px;}
  .black2_list ul li:nth-child(2n){border-right:  1px hsla(255,255%,255%,0.25) solid;}
  
.black3 ul li {      width: 100%;        background: #ededed;    float: left;    margin: 0 0 40px 0;    height: 450px;    position: relative;}
.black3 ul li .black3_t a{text-indent: 10px;  }
.black3 ul li .black3_t a::after{     content: "";    display: block; width: 100%; height:1px; position: absolute; bottom: 0px; left: 0px;  }
.black3 ul li .black3_t{ display: block; }
.black3 ul li .black3_tit span{ color: #fff; }
.black3 li::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s;
    background: rgba(0,0,0,.5);
    opacity: 1;
}

.black4_left{ width: 100%; }
.black4_right{ width: 100%; }
.black4_left p { padding: 0; margin: 30px auto; width: 90%;}
.black4_left h3{padding: 0px 20px 0;}
.black4_left h2{padding: 0px 20px 0;}
.black4_left{    height: 530px;}

.black5_left{ width: 100%; }
.black5_right{ width: 100%; margin: 20px 0; }

.footer_left { float: left; width: 100%; display: none;}
.footer_right{ width: 100%; float:right; margin: 20px 0;}
  
  .dq{ padding: 10px 0;}
  .dq .w1200{ padding: 10px 0;     background: #f1f1f1;}
  .dq .w1200 > a{ width: 100%; display: block; text-align: center; background: #f1f1f1; line-height: 42px; border-right: none;}
  .dq .wz{display: none!important;}
  .dq .w1200 > a::after{content:""!important;display: none; }
  .dq .w1200 > a.en::after{content:""!important;display: none; }
  
  .about_cont2{ padding: 50px 30px; text-align: center;}
  .about .about_left{ width: 100%; }
  .about .about_right{ width: 100%; padding: 100px 20px;}
  
  .about_list li{ width: calc((100% - 0px) / 1); float: left;  margin: 0 0px 30px 0;}
  .about_list li:nth-child(1n){ margin:  0 0px 30px 0;}
    
  .news .news_list li .img2{ display: none;}
  .news_txt {    padding: 0px 0 0px 00px;    width: calc(100% - 100px);}
  .news_txt::after{ display: none;}
  
  .news_list li{ padding: 20px; background: #fff; width: calc(100%); margin: 0 0px 30px 0; float: left;}
  .news_list li:nth-child(3n){ margin: 0 0px 30px 0; }
  .news_conts{padding: 10px; }
  .news_conts h2{line-height: 36px; padding: 10px 0;}
  .news_t span{ display:block ;}
  .sx{ margin: 80px 0 30px; border-bottom: 1px #ccc solid; line-height: 24px;}
  .sx a{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;    display: block; float: left!important; width: 90%; margin: 0 auto;display: block;}
  
  .pro_left{ width: 100%; }
  .pro_right{ width: 100%; margin: 50px 0 0; }
  .pro_right .pro_dq{ display: none;}
  
  .pro_right ul li{ float: left; width: calc((100% - 34px) / 2); margin: 0 30px 30px 0; }
  .pro_right ul li:nth-child(2n){ margin: 0 0 30px 0;}
  .pro_right ul li:nth-child(2n-1){ margin: 0 30px 30px 0;}
  
  .pro_right1{ width: 100%; margin: 50px 0 0; }
  .pro_right1 .pro_dq{ display: none;}
  
  .pro_top {    background: #fff;    padding:20px;}
  .pro_img{ width: 100%;}
  .pro_tit{ width: 100%; margin: 50px 00 0;}
  
  .job_list ul li{float: left; line-height: 60px; font-size: 16px; text-indent: 10px;}
  .job_list ul li.name{ width:35%;}
  .job_list ul li.add{width: 20%; display: none;}
  .job_list ul li.time{width: 45%;}
  .job_list ul li.daiyu{width: 20%; color: #CB0003; font-weight: bold;}
  .job_list ul li.gengduo{width: 15%; background: url(../img/plus.png) no-repeat right center; color: #666666; cursor: pointer; display: none}
  .job_list .job_cont1 > p{ width: 100%; float: left; display: table; line-height: 32px;}
  
  .contact_left{ width: 100%;  }
  .contact_right{ width: 100%;}
  .contact_txt {    padding: 20px 40px 55px 0px;}
  .footer{ display: none; }
  .foot a{ display: none;}
}