*{ padding: 0px; margin: 0px; color: #333;font-family: "微软雅黑";}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clear{clear: both;} 
.content{width: 1400px;margin: 0px auto; position: relative; padding-top: 50px;}
.hread{position:relative; width:100%; top:0px; z-index:99999; background:#FFF;}
.hreader{width: 1400px; height: 97px; margin: 0px auto;}
.logo{float: left; line-height: 84px; position: relative;}
.logo a{display: block;}
.logo div{float: left;}
.logo span{font-size: 30px;font-weight: bold; display: inline-block;float: left; margin-left: 10px;}
.nav{float: right;}
.navbar-header {display: none;}
.layui-nav{background: #FFF;}
.layui-nav .layui-nav-item{line-height: 84px;}
.layui-nav .layui-nav-item > a{color: #333;font-size: 18px;font-weight: bold;}
 .layui-nav .layui-nav-more{display: none;}

.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{background-color: #276075;}
.layui-nav .layui-nav-item:hover> a{color: #276075;}
.layui-nav-child{z-index: 999999; top:84px;}
.lang{float: right; font-size: 14px;    margin-top: 27px;}
 .lang span {display:inline-block; margin-right: 20px;}
 .lang a{display: inline-block; margin-left: 8px;}
  .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
	  --swiper-theme-color: #FFF;
	  --swiper-pagination-color: #333;/* 两种都可以 */
    }

   .swiper1 .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;
	  height: 663px;
	 
    }
.swiper1 .swiper-button{background:rgba(0,0,0,0.5); padding: 5px 10px;}
.swiper1 .swiper-pagination-bullet{ width: 12px; height: 12px;}
.swiper1 .swiper-wrapper .swiper-slide:nth-of-type(1){background: url(../images/v1_14.jpg) center center no-repeat; background-size:cover;}
.swiper1 .swiper-wrapper .swiper-slide:nth-of-type(2){background: url(../images/v1_13.jpg) center center no-repeat; background-size: cover;}
.swiper1 .swiper-wrapper .swiper-slide:nth-of-type(3){background: url(../images/v1_15.jpg) center center no-repeat; background-size: cover;}
.ani {color: #FFFFFF;font-size: 48px;font-family: "arial, helvetica, sans-serif"; margin-bottom: 20px;}
.ani2{font-size: 72px;color: #FFFFFF;}

.index-about{background: url(../images/v1_about.jpg) center center no-repeat; background-size: cover; padding-top: 50px; height: 700px;}
.about-main{/*background: url(../images/v1_16.jpg) top right no-repeat;*/ }
.about-main h2{font-size: 36px; color: #276075; font-weight: bold; margin-bottom: 15px; padding-top: 45px;}
.about-main h3{ font-size: 36px;  font-weight: bold;}
.index-about-left{width: 620px; position: relative; z-index: 2; height: 450px; margin-bottom: 105px; }
.index-about-left .moer{ text-align: right; margin-bottom:15px;}
.index-about-left .moer a{color: #276075; font-size: 14px;border: 1px solid #276075;    border-radius: 25px;    padding: 10px 30px;}
.index-about-left .moer a:hover{ background: #276075; color: #fff;}


.about-main .left{float: left; width: 50%;}
.about-main .left h2{font-size: 36px; color: #276075; font-weight: bold; margin-bottom: 15px; padding-top: 45px;}
.about-main .left h3{ font-size: 36px;  font-weight: bold;}
.about-main .left .moer{ text-align: right; margin-bottom:15px;}
.about-main .left .moer a{color: #276075; font-size: 14px;border: 1px solid #276075;    border-radius: 25px;    padding: 10px 30px;}
.about-main .left .moer a:hover{ background: #276075; color: #fff;}
.about-main .right{float: right; width: 45%; padding-right: 15px; padding-top: 80px;}


.about-main .index-title{ font-size: 18px; margin-bottom: 15px;}
.about-main p{font-size: 14px; line-height: 28px;color: #666666;}
.wit{background: #FFFFFF; position: absolute; width: 90px; left: 580px; top: 80px; z-index: 1; height: 380px;}
.about-ul li{margin-right: 68px; text-align: center; float: left;}
.about-ul li:nth-child(4){ margin-right: 0px;}
.about-ul li a{display: block;width: 295px; height: 206px; color: #FFFFFF; background: url(../images/v1_20.jpg) center center no-repeat; background-size: cover; }
.about-ul li:hover a{background: url(../images/v1_22.jpg) center center no-repeat;background-size: cover; }
.index-about-img{ position: relative;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.index-about-img span{color: #FFFFFF; display: block; font-size: 18px; font-weight: bold; margin-top: 10px;}
 .about-left-img{display: none;}
.content2{ margin:0px auto;}
    .swiper2 {
      width: 100%;
      height: 1100px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper2 .swiper-slide {
      background-size: cover;
      background-position: center;
	 height: 600px;
    }

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

    .gallery-thumbs {
      height: 10%;
      box-sizing: border-box;
      padding:0;
    }
 .gallery-thumbs { overflow: inherit !important;}
    .gallery-thumbs .swiper-slide {
      height: 100%;
      opacity: 1;
	  position: relative;
	 height: 250px; 
 
	 
    }

    .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1;
	  background: #276075;
 
    }
	
.index-product{position: relative; top: 30%; left:5% }
.index-product h2{ font-size: 36px; color: #276075; font-weight: bold; margin-bottom: 25px;}
.index-product ul{width: 40%;}
.index-product ul li{float: left; list-style: inside disc; width: 30%; margin-bottom: 25px;}
.index-product ul li a{font-size: 18px;}
  .index-product ul li:hover a{color:#275F74;}
.index-product .moer{ background: #286176; padding: 10px 25px; border-radius: 25px; width: 110px; text-align: center;}
.index-product .moer:hover{background: #333;}
.index-product .moer a{color: #FFFFFF;}
 .thumbs-b{ text-align: center; cursor: pointer; font-size: 24px;position: relative;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }
 .thumbs-b   div{color: #333333; margin: 15px auto;}
 .thumbs-b span{display: block; width: 25px; height: 2px; background: #333333; text-align: center; margin: 0px auto;}
.swiper-slide-thumb-active .thumbs-b  div{color: #FFFFFF; }
 .swiper-slide-thumb-active .thumbs-b  span{background: #FFFFFF;}
 .thumbs-b  img{filter: brightness(20%) ;}
  .swiper-slide-thumb-active img{filter: brightness(100%) ;}
 .bg{background:#276075 ;position: absolute; height: 40px; width: 100%; top: -30px; z-index: 666; display:none;}
  .swiper-slide-thumb-active .bg{display: none;opacity:1;}
.content3{background: url(../images/v1_news.jpg) center center no-repeat; background-size: cover; height: 843px;}
.index-news{padding-top: 100px;}
.content3-left{float: left; width: 150px; margin-right: 70px;}
.content3-left h2{font-size: 36px; font-weight: bold; color: #276075; margin-bottom: 60px;}
.content3-left ul li{line-height: 40px; margin-bottom: 20px; font-size: 14px; cursor: pointer;}
.content3-left ul li span{ display: inline-block; vertical-align: middle; height: 1px; margin-right: 3px; width: 40px; background: #666666;}
.content3-left li.active{ background: #333333; border-radius: 25px; color: #FFF; text-align: center;}
.content3-left li.active span{display: none;}
.content3-left .moer{ color: #276075; font-size: 14px; text-align: center;}

.content3-right{float: left; width: 80%;  }
.d-left,.d-midd{ float: left; width:30%; margin-left: 20px; background: #FFFFFF; padding-bottom: 15px; height: 510px; overflow: hidden;}
.d-img{width: 100%; overflow: hidden; margin-bottom: 20px;}
.d-img img{width: 100%; transition:all 0.5s;}
.d-time{ margin-left: 15px;   }
.d-time>div{float: left;  font-size: 14px;}
.d-time >div b{ display: inline-block; font-size: 60px; font-weight: bold; color: #276075;}
.d-time >div div{ display: inline-block; margin-left: 10px;}
.d-time >div span{display: block;}
.d-time >div span:first-child{  margin-bottom: 10px;}
 

.d-time i{float: left; margin-left: 60px; margin-top: 40px; height: 1px; width: 50px; background: #276075;   }
.content3-right h2{margin-left: 15px; font-weight: bold; font-size: 18px; margin-top: 20px;}
.content3-right p{margin-left: 15px;color: #666666; margin-top: 15px;}
.content3-right .moer a{ display: block; margin-left: 15px; margin-top: 15px; color: #666666;}

 .d-midd{ padding: 0px 15px; padding-top:18px;}
  .d-midd h2{margin-top: 50px;}
 .d-midd >span{font-size: 60px; color: #276075; display: block;  margin: 30px auto; }
.d-midd >span img{width: 100%;}
 .d-midd p{ line-height: 24px;}
 .d-midd .moer a{ display: block; margin-left: 15px; margin-top: 15px; color: #276075;}
 
 .d-left:hover{ background:#efefef;}
 .d-left:hover .d-img img{ transform:scale(1.2)}
 .d-left:hover h2{ color:#276075;}
 
 .content3-right-d{display: none;}
 .show{ display: block;}
  .content3-right-d >.moer a{display: block; background: #276075; border-radius: 25px; color: #FFFFFF;  padding: 10px 20px; width: 100px; text-align: center; margin: 0px auto; margin-top: 50px;}
 
  .content3-right-d >.moer a:hover{ background: #333;}
 .content4{background: url(../images/v1_57.jpg) center center no-repeat;   background-size: cover;}
 .cont4{ position: relative;height: 329px;}
  .content4-b{ position: absolute; top: 25%; left: 15%;}
   .content4-c{ position: absolute; top: 25%; right: 15%;}
  .cont4 h2{ font-size: 34px; font-weight: bold; color: #FFFFFF;text-align: center;}
  .cont4 p{color: #FFFFFF; font-size: 14px; margin-top: 25px;}
  .cont4 a{display: block; padding: 15px 20px; border: 1px solid #FFFFFF; color: #FFF; text-align: center; margin-top: 25px; border-radius: 25px;}
  .cont4 a:hover{ background: #276075;}
  .index-job{ position: relative; margin: 40px auto; font-size: 18px; line-height: 50px;}
  .index-job a{display: inline-block; position: absolute; right: 0px; background: #276075; padding: 0px 30px;color: #FFFFFF; font-size: 20px;border-radius: 25px;}
  .index-job span{ font-size: 48px; color: #276075;}
  .index-job a:hover{background: #333;}
  
  .footer{background: url(../images/footerbg.jpg) center center no-repeat;  padding-top: 40px; }
  .foot-ul{ float: left; margin-right: 130px;}
  .foot-ul h2{color: #FFFFFF; font-size: 16px; font-weight: bold;}
  .fa-caret-down{color: #FFFFFF; margin-left: 5px;}
  .foot-ul ul{margin-top: 20px;}
  .foot-ul li a {color: #FFFFFF; font-size: 14px; line-height: 30px;}
  .footer-bottom{  color: #FFFFFF; text-align: center;  line-height: 60px;}
  .foot-wei{float: left; color: #FFFFFF;border-left: 1px solid #373757; padding-left: 40px; }
  .wei-img{float: left;}
  .wei-text{float: left; margin-left: 15px;  }
  .wei-text h2{color: #FFFFFF; font-size: 16px; margin-bottom: 15px;font-weight: bold;}
  .wei-text span{display: block; font-size: 14px; color: #FFFFFF;}
  .index-text{margin-top: 20px;}
  .index-text p{color: #FFFFFF; font-size: 14px; line-height: 35px;}
 
@media (max-width:1280px){
 	
	.hreader{width: 100%;}
	.logo{margin-left: 10px;}
	.logo span{display: none;}
	.search{margin-right: 10px;}
	.content{width: 96%;}
	.swiper1 .swiper-slide{height: 400px;}
	.ani{margin-left: 0px;font-size: 3vw;}
	.ani2{font-size: 5vw;}
	.index-about{  height: auto; padding-bottom: 2vw;}
	 .layui-nav .layui-nav-item a{padding: 0px 10px;}
	 .index-about-left{width: 48%; float:left;}
	 .wit{display: none;}
	 .about-main{background: inherit; padding: 2vw;}
	 .index-about-left{height: auto;margin-bottom:2vw;}
	 .about-left-img{display: block; margin: 20px auto;text-align: center; width:46%; float:right;}
	 .about-left-img img {width:100%;}
	 .about-ul li{width: 20%;}
	.about-ul li a{width: 100%;}
	.index-product{ left: 5%;}
	.content3-left{margin-right: 2vw; margin-left: 2vw;}
	.d-left, .d-midd{width: 29%;}
	.footer{/*padding: 2vw; padding-top: 6vw;*/}
	.foot-ul{margin-right: 4vw;}
	.foot-wei{padding-left: 6vw;}
	 .content2{ width:100%;}

}
@media (max-width:750px){
 	
	.about-main .left{width: 100%;}
	.about-main .right{width: 100%; padding-right: 0px; padding-top: 30px;}
	.content{width: 96%;}
	.lang{display: none;}
		.search,.nav {display: none !important;}
	.navbar-header{width: 40px;position: absolute; right: 20px; top: 40px;display: block;}
	 .navbar-toggle,.navbar-toggle::before, .navbar-toggle::after {
		 content: ""; 
	       width: 40px;
	       height: 3px;
	       border-radius: 3px;
	       position: absolute;
	       transition: transform 0.15s ease;
		   background-color: #5c5c5c;
		   width: 100%;
		   color: #5c5c5c;
		   border: 0;
	}
	.navbar-toggle{
		    transition-duration: 0.3s;
		    transition-timing-function: cubic-bezier(0.55,0.055,0.675,0.19);
	}
	 .navbar-toggle::before {
	       transform: translate3d(-50%,-.4125rem,0);
		transition: top 0.1s 0.34s ease-in,opacity 0.1s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19) ,background-color 0.15s ease;
	    top: -10px;
	
	}
	.navbar-toggle::after {
	    transform: translate3d(-50%,.4125rem,0);
		transition: bottom 0.1s 0.34s ease-in,transform 0.3s cubic-bezier(0.55,0.055,0.675,0.19) ,background-color 0.15s ease;
		bottom: -10px;
		
	}
	.is-active .navbar-toggle{height: 0;right: 10px;z-index: 99999;color: #FFF;}
	.is-active .navbar-toggle::before{
		top: 0;
		     transform: rotate(225deg);
		    transition: all 0.15s ease;
			background-color: #FFF;
	}
	.is-active .navbar-toggle::after{
		top: 0;
		     transform: rotate(-225deg);
		    transition: all 0.15s ease;
			background-color: #FFF;
	}

	.navbar-active{display: block !important; background: rgba(0,0,0,.9); width: 100%;top: 0px !important;z-index: 999;
	transition: all 0.15s ease;position: absolute;}
	.layui-nav{margin-top: 50px;background: none;}
	.layui-nav .layui-nav-item{display: block;z-index: 999;text-align: center; border-bottom:1px solid #276075}
	.layui-nav .layui-nav-item >a{color: #FFF; width:80%;}
	.layui-nav-child{position: inherit;top: 0; display: none;border:0px; background:inherit;}
	.layui-nav .layui-nav-child a{ color:#FFF;}
	.layui-nav .layui-nav-child a:hover{ background:#276075 ;}
	.layui-nav .layui-nav-child *:active,.layui-nav .layui-nav-child *:visited { background:#276075 !important ; color:#FFFFFF}
    .layui-nav .layui-nav-mored{ top:15%;}
	.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after{ border:0; background: inherit;}
	.layui-nav  a .layui-nav-more{display:none;}
     .layui-nav a .layui-nav-mored{ display:none;}
	.layui-nav .layui-nav-item:hover> a{ color:#FFF;}
	
	.index-about-left{width: 100%; float:left;}
	
	.about-left-img{ width:100%;}
	 .about-left-img img{width: 100%;}
	.anli-left{display: none;}
	.anli-right{float: inherit; width: 100%; margin: 0;}
	.about-ul li{margin-right: 6vw;}
	.index-product{background: rgba(255,255,253,0.5); width: 90%; margin: 0px auto; left: 0; padding: 3vw;}
	.gallery-thumbs .swiper-slide{height: 150px;}
	.content3-left{width: 100%; text-align: center;}
	.content3-left .moer{ display: none;}
	.content3-left ul li{display: inline-block; width: 40%;}
	.content3-right{width: 100%;}
	.index-news{padding-top: 6vw;}
	.foot-ul{display: none;}
	.foot-wei{border: 0;}
	.index-product ul{width:100%;}
	.footer{background: #1b1b3f;    padding-top: 40px;}
	.footer-bottom{line-height: 30px;}
}

@media (max-width:480px){
		.swiper1 .swiper-slide{height: 320px;}
.ani{font-size: 4vw;}
.ani2{font-size: 5vw;}
	 .index-product{width: 80%;}
	 .thumbs-b div{font-size: 3vw;}
	 .content3{height: auto; padding-bottom: 3vw;}
	 .content3-left h2{margin-bottom: 3vw;}
	 .content3-right{float: inherit;}
	 .d-left, .d-midd{width: 98%; height: inherit; float: inherit; margin-left: 0; padding: 0; margin-bottom: 3vw; padding-bottom: 3vw;}
	 .content3-right-d >.moer a{ margin-top: 3vw;}
	 .content4-b{left: 5%;}
	 .content4-c{right: 5%;}
	 .index-job{line-height: inherit;}
	 .index-job a{display: block; text-align: center; position: inherit; width: 100px; padding: 15px 20px; margin: 0px auto; margin-top: 5vw;}
	 .index-product ul{width:100%;}
	 .index-product ul li{width:40%;}
}

@media (max-width:380px){
		.index-product ul li{ width: 35%;}
		.about-ul li{width: 45%; margin-bottom: 5vw;}
		.about-ul li:nth-child(2n){margin-right: 0;}
		.cont4 h2{font-size: 5vw;}
		.cont4 p{font-size: 3vw;}
		.cont4 a{padding: 2vw 3vw;}
		.index-about{padding-top: 0;}
}