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

#fp-nav ul li a span, .fp-slidesNav ul li a span { background: #fff;}


/*顶部导航*/
.header6{ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); z-index: 999; top:0; position:fixed;}
.header6 .logo img{ width: 190px; height: 156px;}
.header6 .logo{ width: 240px; transform:translateX(-50%); margin-left:0; z-index: 99;}
.header6 .nav li{ list-style: none; width: 138px;}
.header6 .nav{ width: 1360px; position: relative; background: #fff;}
.header6 .nav:after{ content: ""; clear: both; display: block;border-radius: 50%;width: 240px;height: 200px;background: #fff;overflow: hidden;box-shadow: 0 0 20px rgb(0 0 0 / 20%);position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);z-index:-1;}
.header6 .nav li:hover,.header6 .nav li.active{ border:none;}
.header6 .nav li:hover h6,.header6 .nav li:hover h5{ color: #DA0011;}
.header6 .nav li.active h6,.header6 .nav li.active h5{ color: #DA0011;}
.header6 .nav li a{ display:block; margin-top:28px;}
.header6 .nav li h5{ padding-top:0;}
.header6 .nav li h6{ font-size:14px; margin-top:4px;}
.header6 .nav li:nth-child(4){ margin-right: 290px;}
.header6 .tel{ position: absolute; top: 50%; right: -80px; transform:translateY(-50%);}
.header6 .tel .haoma{ font-weight:bold; line-height: 30px; font-size: 24px; color: #DA0011;}



/*轮播图*/
.cp2{ position: relative;}
.cp2 .swiper-slide img { height: 100vh;}
.cp2 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: 50px!important;}
.cp2 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left: 50px!important;}
.cp2 .swiper-pagination-bullet-active { opacity: 1; background: #fff; width:50px; }
.cp2 .swiper-pagination-bullet { width: 50px; border-radius: 10px;}



/*标题*/
.title{ float: left; margin-top: 10%;}
.title1{ margin-top: 27%;}
.title2{ margin-top: 27%;}
.title3{ margin-top: 7%;}
.title4{ margin-top: 9%;}

/*简介*/
.about{ width: 1360px;margin: 0 auto;margin-top: 6%;}
.about-right{ float: right;width: 74%;padding: 40px 50px;box-sizing: border-box;background:#fff url('/images/logo.png') no-repeat 97% 7%;}
.about-nr{ float: left;width: 53%;}
.about-nr h2{ font-size: 36px;line-height: 50px;color: #DA0011;font-weight: bold;}
.about-nr h3{ color: #fff;font-size: 18px;letter-spacing: 1px;background: #DA0011;line-height: 44px;padding: 0 20px;display: inline-block;margin: 20px 0 30px 0;}
.about-nr p{ line-height: 30px;text-indent: 2em;}
.about-tu{ float: right;margin-top: 8%; width: 42%;}


/*产品*/
.cp{ width: 1360px;margin: 0 auto;    margin-top: 6%;}
.chanpin{ float: right;width: 80%;}
.chanpin li{ float: left;width: 31%;margin-right: 3.5%;margin-bottom: 30px;}
.chanpin li:nth-child(3n){ margin-right:0;}
.chanpin li:nth-child(n+4){ margin-bottom: 0;}
.chanpin li p{ line-height: 42px;background: #FFFFFF;text-align: center;}
.chanpin li:hover p{ background: #DA0011; color: #fff;}
.chanpin li  img{ height: 224px;width: 100%;object-fit: cover;}

/*优势*/
.good8_ji{ width: 1360px;margin: 0 auto;}
.join8_good{ width: 80%; float: right;}
.join8_good li{ width:33.33%;}
.join8_good li a{ display:block; height:100vh;}
.join8_good li .bg8_good{ height:100%; background:none;}
.join8_good li:hover .bg8_good{ background: #fff;}
.join8_good li .jg{ padding-top:20%; box-sizing:border-box; margin: 100% 0 0;}
.join8_good li:hover .jg{ margin: 70% 0 0;}
.join8_good li .jg p{ width:120px; height:120px; margin:0 auto; background: #df061c; transform: rotate(45deg);}
.join8_good li .jg p span{ width:120px; height:120px; margin:0 auto; display: block; transform: rotate(-45deg); background:url(/images/icon-2.png) no-repeat; background-position: 0 center;}
.join8_good li:nth-child(2) .jg p span{ background-position: -120px center;}
.join8_good li:nth-child(3) .jg p span{ background-position: -240px center;}
.join8_good li .jg h4{ line-height: 37px;font-size: 26px;font-weight: normal;padding: 50px 0 40px 0;color: #fff;}
.join8_good li .jg h5{ height:0; transition:.6s; font-size:16px; line-height:30px; width:80%;  color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.join8_good li:hover .jg h4{ color:#DA0011;}
.join8_good li:hover .jg h5{ height:auto;}
.join8_good li .jg h6{ display: none;border: 1px solid #CECECE;line-height: 38px;width: 106px;padding-left: 15px;margin: 0 auto;box-sizing: border-box;margin-top: 30px;}
.join8_good li:hover .jg h6{ display: block;color: #333;}

/*新闻*/
.news_a{ height: 100%; width: 1360px; margin: 0 auto;}
.news_a li{ width:33.33%; float:left; padding:0 40px;transition: 0.5s; box-sizing:border-box; border-top-left-radius:18px; border-top-right-radius:18px;height: 100%;padding-top: 31%;}
.news_a li:hover{ background:#fff;}
.news_a li span{ display:block; color: #fff; }
.news_a li span.date{ font-size: 100px;line-height: 140px;}
.news_a li span.date1{ font-size:18px; line-height:25px;}
.news_a li h4{ font-size: 20px;line-height: 28px;color: #fff;position: relative;margin: 20px 0 30px 0;padding-bottom: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.news_a li h4:after{ content: ""; clear: both; display: block; height: 2px; width:30px; background:#DA0011; position:absolute; bottom:0;}
.news_a li p{ line-height: 30px;color: #fff;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.news_a li a:hover{ color:#333;}
.news_a ul{ float: right; width: 80%; height: 100%;}
.news_a li:hover span { color: #DA0011;}
.news_a li:hover h4,.news_a li:hover p{ color: #333;}


/*底部*/
.di{ width: 1360px;margin: 0 auto;margin-top: 5%;}
.lx li h2{ width:50px; height:50px;display: block; background:url(/images/lx.png) no-repeat;    float: left;margin: 4px 15px 0 0;}
.lx li:nth-child(2) h2{ background-position: -50px;}
.lx li:nth-child(3) h2{ background-position: -100px;}
.di-nr{ float: right;width: 74%;padding: 50px 50px 10px 50px;background: #fff;box-sizing: border-box;}
.lx li{ border-bottom: 1px solid rgb(0,0,0,0.1);padding-bottom: 30px;margin-bottom: 30px;float: left;width: 45%;}
.lx li:nth-child(even){ float: right;}
.lx li p{ line-height: 22px;}
.lx li p span{ font-size: 18px;line-height: 25px;margin-top: 10px;display: inline-block;font-weight: bold;}
.fr{ float: right;}
.map{ width: 100%;overflow: hidden;height: 180px;margin-bottom: 30px;}
.map iframe{ width: 100%; height: 180px;}


@media screen and (min-width:1440px) and (max-width:1680px){ 
  
  .header6 .tel{ right: -40px;}  
  .header6 .nav li{ width: 128px;}
  .header6 .nav li:nth-child(4){ margin-right: 270px;}
  .header6 .nav{ width: 90%;}  
  .header6 .nav:after{ bottom: -50px;}
  .logo img{ width: 100px!important;}
  
  .about,.good8_ji,.cp,.news_a,.di{ width: 90%;}
  .about-right{ padding: 30px;}
  .about-nr{ width: 55%;}
  .about-tu{ margin-top: 12%;}
  .about{ margin-top: 8%;}
  
  .join8_good li .jg { margin: 80% 0 0;}
  .join8_good li:hover .jg { margin: 60% 0 0;}
  .title2 { margin-top: 22%;}
  
  .cp{ margin-top: 9%;}
  .chanpin li{ width: 32%;margin-right: 2%;margin-bottom: 20px;}
  .chanpin li img{ height: 208px;}
  .news_a li{ padding-top: 24%;}
  .title1{ margin-top: 22%;}
  .di-nr{ padding: 30px 30px 10px 30px;}
  .lx li{ padding-bottom: 20px; margin-bottom: 20px; width: 47%;}
  .map{ height: 180px; margin-bottom: 20px;} 
  .di{ margin-top: 10%;}
  .title4{ margin-top: 7%;}
}
  
@media screen and (min-width:1360px) and (max-width:1439px){ 
  
  .header6 .tel{ right: -40px;}  
  .header6 .nav li{ width: 128px;}
  .header6 .nav li:nth-child(4){ margin-right: 190px;}
  .header6 .nav{ width: 90%;}
  .header6 .nav:after{ bottom: -50px;}
  .logo img{ width: 100px!important;}
  
  .about,.good8_ji,.cp,.news_a,.di{ width: 90%;}
  .about-right{ padding: 30px;}
  .about-nr{ width: 55%;}
  .about-tu{ margin-top: 12%;}
  .about{ margin-top: 8%;}
  
  .join8_good li .jg{ margin: 80% 0 0;}
  .join8_good li:hover .jg{ margin: 60% 0 0;}
  .title2{ margin-top: 22%;}

  .cp{ margin-top: 9%;}
  .chanpin li{ width: 32%; margin-right: 2%; margin-bottom: 20px;}
  .chanpin li img{ height: 208px;}
  .news_a li{ padding-top: 24%;}
  .title1{ margin-top: 22%;}
  .di-nr{ padding: 30px 30px 10px 30px;}
  .lx li{ padding-bottom: 20px; margin-bottom: 20px; width: 47%;}
  .map{ height: 180px; margin-bottom: 20px;} 
  .di{ margin-top: 10%;}
  .title4{ margin-top: 7%;}
}




