/*手机端导航*/
.mobile-header{
  background-color:#fff;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999999;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.mobile-header-space{
	width: 100%;
	height: 60px;
}
.mobile-logo{float: left; margin:10px 15px; display: inline;}
.mobile-logo img{height:40px;width: auto;}
.mobile-header-icon{
  position: relative;
  width: 60px;
  height:60px;
  float: right;
  -webkit-transition: background 0.5s;
  -moz-transition: background 0.5s;
  -o-transition: background 0.5s;
  transition: background 0.5s;
  background-color: rgba(255,255,255,1);
  cursor: pointer;
}
.mobile-header-icon span{
  position: absolute;
  left: calc((100% - 25px) / 2);
  top: calc((100% - 1px) / 2);
  width: 25px;
  height: 3px;
  background-color:#000;
  border-radius: 3px;
}
.mobile-header-icon span:nth-child(1){
  transform: translateY(-8px) rotate(0deg);
}
.mobile-header-icon span:nth-child(2){
  transform: translateY(0) rotate(0deg);
}
.mobile-header-icon span:nth-child(3){
  transform: translateY(8px) rotate(0deg);
}


.mobile-header-icon-click span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clickfirst;
}       
.mobile-header-icon-click span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clicksecond;
}
.mobile-header-icon-click span:nth-child(3){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: clicksthird;
}
  


@keyframes clickfirst {
0% {
    transform: translateY(8px) rotate(0deg);
    
}

100% {
  transform: translateY(0) rotate(45deg);
}
}   

@keyframes clicksecond {
0% {
    transform: translateY(0) rotate(0deg);
    
}

100% {
  transform: translateX(-999em) rotate(0deg);
}
}  

@keyframes clicksthird{
0% {
    transform: translateY(-8px) rotate(0deg);
}

100% {
  transform: translateY(0) rotate(-45deg);
}
}   

.mobile-header-icon-out span:nth-child(1){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outfirst;
  }       
.mobile-header-icon-out span:nth-child(2){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outsecond;
  }
.mobile-header-icon-out span:nth-child(3){
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: outthird;
  }

@keyframes outfirst {
0% {
  transform: translateY(0) rotate(-45deg);
}

100% {
  transform: translateY(-8px) rotate(0deg);
}
}   


@keyframes outsecond {
0% {
  transform: translateY(0) rotate(45deg);
}

100% {
  transform: translateY(0) rotate(0deg);
}
}

@keyframes outthird {
0% {
  transform: translateY(0) rotate(45deg);
}

100% {
  transform: translateY(8px) rotate(0deg);
}
}

.mobile-nav{
  background-color: rgba(0,17,25,0.9);
  width: 100%;
  position: fixed;
  top: 60px;
  left: 0px;
  display: none;
  z-index: 999;
  bottom: 0px;
  overflow-y: auto;
}

.mobile-nav .lang-box{
  padding: 30px 10% 10px;
  display: flex;
  align-items: center;
  color:#aaa;
  font-size: 14px;
}
.mobile-nav .lang-box img{
  width: auto;
  height: 22px;
  margin-right: 5px;
}

.mobile-nav .lang-box a{
  font-size: 16px;
  line-height: 50px;
  text-decoration: none;
  color: #FFFFFF;
  transition: all 0.5s;
  font-size: 16px;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: ReturnToNormal;
  margin: 0 15px 0 5px;
  font-weight: bold;
}


.mobile-nav .lang-box a:hover,.mobile-nav .lang-box a.now{
  color: #118ac9;
  border-bottom: solid 1px rgba(255,255,255,0.2);
}


.mobile-ul{
  padding-bottom: 80px;
}
.mobile-ul li{
  padding: 0 10%;
}
.mobile-ul a{
  display: block;
  line-height: 50px;
  text-decoration: none;
  color: #FFFFFF;
  border-bottom: solid 1px rgba(255,255,255,0.3);
  transition: all 0.5s;
  font-size: 16px;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: ReturnToNormal;
}
.mobile-ul a:hover,.mobile-ul a.curr{
  color: #118ac9;
  border-bottom: solid 1px rgba(255,255,255,0.2);
}

.sub-list{
  padding: 20px 0;
}
.sub-list li a{
  border-bottom: 0;
  font-size: 14px;
  line-height: 40px;
}

@-webkit-keyframes ReturnToNormal {
100% {
  transform: translateX(0%) rotate(0deg);
}


}

@keyframes ReturnToNormal {
100% {
  transform: translateX(0%) rotate(0deg);
}
}

/* 1440px ~ 1281px */
@media (max-width: 1440px) {
    .header,.header-space{
        padding: 0 4%;
    }
  .w80{
    width: 1280px;
    padding: 0;
    margin: 0 auto;
  }
  .product-cat{
      padding: 90px 0 110px;
  }
  .about-section{
      padding: 110px 0;
  }
  .news-section{
      padding: 80px 0 20px;
  }
  .header .menu li{
      margin: 0 5px;
  }
  .about-section .left-box .title{
      font-size: 30px;
  }
  .table-box{
      height: 400px;
  }
  .footer .widget{
    padding-right: 30px;
  }
  .footer .top .right{
    width: 320px;
  }
  
}

/* 1081px ~ 1025px */
@media (max-width: 1281px) {
    .header,.header-space{
        padding: 0 4%;
    }
    .about-section .left-box .title{
      font-size: 28px;
  }
  .w80,.main{
    width: 1180px;
    padding: 0;
    margin: 0 auto;
  }
  .footer .widget{
    padding-right: 30px;
  }
  .footer .top .right{
    width: 320px;
  }
}


/* 1080px ~ 992px */
@media (max-width: 1081px) {
  .w80,.main{
    width: 92%;
    padding: 0;
    margin: 0 auto;
  }
  .header,.header-space{
    padding: 0 4%;
    height: 84px;
  }
  .header.fixed,.header-space.add{
    height: 68px;
  }
  .header .logo img{
    height: 50px;
  }
  .header.fixed .logo img{
    height: 40px;
  }
  .header .menu li{
    margin: 0 10px
  }
  .header .menu li a{
    padding: 0 10px;
    font-size: 15px;
  }
  .product-cat,.about-section,.news-section{
    padding: 50px 0 60px;
  }
  .product-cat .left-box .title{
    font-size: 21px;
  }
  .product-cat .left-box .introduce{
    font-size: 15px;
  }
  .product-cat .right-img{
    width: 500px;
  }
  .home-news{
    padding-bottom: 0;
  }
  .home-news li .thumbnail{
    width: 160px;
  }
  .home-news li .info{
    margin-left: 180px;
  }
  .home-news li .more{
    display: none;
  }
  .footer .widget{
    padding-right: 50px;
  }
  .footer .top .left{
    display: none;
  }
  .footer .top .right{
    width: 100%;
  }
  .new-pro-section .main{
    padding: 100px 0;
  }
  .about-section .left-box .title{
    font-size: 26px;
  }
  .section .title,.contact-con h1.title{
    font-size: 28px;
  }
  #newslist a img{
    width: 200px;
  }
  #newslist a .infobox span{
    font-size: 20px;
  }
  .links{
    display: none;
  }
  .h5{height:3px;width:100%;clear:both;}
  .h10{height:5px;width:100%;clear:both;}
  .h15{height:8px;width:100%;clear:both;}
  .h20{height:10px;width:100%;clear:both;}
  .h25{height:13px;width:100%;clear:both;}
  .h30{height:15px;width:100%;clear:both;}
  .h40{height:20px;width:100%;clear:both;}
  .h50{height:25px;width:100%;clear:both;}
  .h60{height:30px;width:100%;clear:both;}
  .h70{height:35px;width:100%;clear:both;}
  .h80{height:40px;width:100%;clear:both;}
  .h90{height:45px;width:100%;clear:both;}
  .h100{height:50px;width:100%;clear:both;}

}

/* 991px ~ 321px */
@media (max-width: 991px) {  
  .hide-body{
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  .banner .swiper-pagination{
    bottom: 10px !important;
  }
  
  .banner .swiper-pagination-bullet{
    width: 8px;
    height: 8px;
    margin: 0 4px !important;
  }

  .product-cat{
    padding: 40px 0;
  }
  .product-cat .main{
    flex-direction: column;
  }
  .product-cat .left-box{
    width: 100%;
  }
  .product-cat .left-box .title{
    line-height: 1.6;
  }
  .product-cat .left-box .introduce{
    font-size: 14px;
    padding-top: 30px;
  }

  .product-cat .right-img{
    width: 100%;
    margin-top: 20px;
  }
  .product-cat .right-img .item-one{
    width: 48%;
  }
  .solu-section{
    padding-top: 50px;
  }
  .solu-section .sub-desc{
    padding: 0 16px;
  }
  .solu-section .solu-box{
    margin-top: 40px;
  }
  .solu-box ul li,.solu-box ul li.on{
    width: 50%;
    height: 300px;
    background-position: center center !important;
    background-size: cover;
  }

  .solu-box ul li .item-con,.solu-box ul li.on .item-con{
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .solu-box ul li.on .item-con .tip{
    display: none;
  }
  .solu-box ul li .item-con .more{
    display: block;
  }
  .solu-box ul li.on .item-con .icon img{
    width: 56px;
    height: 56px;
  }
  .about-section .w80{
    flex-direction: column;
  }
  .about-section .left-box,.about-section .right-img{
    width: 100%;
  }
  .about-section .left-box .title{
    font-size: 28px;
    padding-bottom: 20px;
  }
  .number-list{
    margin-top: 30px;
  }
  .number-list .item-one{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .about-section .about-img{
    margin-top: 30px;
  }
  .new-pro-section{
    min-height: auto;
  }
  .new-pro-section .new-pro-title{
    font-size: 32px;
    width: 100%;
    text-align: center;
  }
  .new-pro-section .main{
    padding: 80px 0;
  }
  .home-news li{
    width: 50%;
  }
  .home-news li .thumbnail{
    width: 100%;
  }
  .home-news li .info{
    width: 100%;
    float: left;
    margin-left: 0;
    padding-right: 0;
  }
  .home-news li h3{
    font-size: 16px;
    margin-top: 5px;
  }
  .home-news li .text{
    height: 3.6em;
    overflow: hidden;
  }
  .home-news li h3{
    height: 50px;
    overflow: hidden;
  }
  .news-section{
    padding-bottom: 40px;
  }

  /* 内页 */
  .localtion{
    display: none;
  }
  .sub_banner{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
  }
  .sub_banner img{
    width: auto;
    height: 180px;
  }
  .sub_bar{
    height: auto;
  }
  .subMenu{
    width: 100%;
    padding: 0 0 0;
  }
  .subMenu li{
    line-height: 45px;
    margin-top: 10px;
    font-size: 15px;
    padding-right: 20px;
  }
  .subMenu li a{
    padding-bottom: 5px;
  }
  .subMenu li:last-child{
    padding-right: 0;
  }

  .sub_content .section{
    padding: 40px 0;
  }
  .section .title, .contact-con h1.title{
    font-size: 28px;
  }
  .section .con-box{
    padding: 30px 0;
  }
  .section .com_pic{
    width: 100%;
  }
  .section .con-box{
    flex-direction: column;
  }
  .section .com_text{
    padding-left: 0;
    margin-top: 30px;
  }
  .icon-list{
    flex-wrap: wrap; /* 允许换行 */
  }
  .icon-list .icon-item{
    width: 50%;
    flex: 1 0 50%; /* 每个项占据 50% 的宽度 */
    margin-bottom: 20px;
  }
  .icon-list .icon-item .item-text{
    margin-top: 10px;
    font-size: 14px;
  }

  .icon-list .icon-item .item-text em.number{
    font-size: 32px;
  }
  #certify{
    padding-top: 20px;
  }
  .sub_content .section.honor-s{
    padding: 40px 25px;
  }
  #certify .swiper-slide{
    width: 100%;
    height: auto;
    padding: 20px;
    margin:0 40px;
  }
  #certify .swiper-slide .pic{
    height: auto;
  }
  #certify .swiper-slide .text{
    height: auto;
    padding: 10px;
  }
  #certify .swiper-slide .text p{
    font-size: 14px;
  }
  #devSwiper{
    padding: 50px 0;
  }
  #devSwiper .swiper-slide .txt{
    font-size: 12px;
  }
  #devSwiper .swiper-slide:nth-child(2n) .txt{
    top:200px
  }
  .development .button-box{
    bottom: 40px;
    top: auto;
    right:50%;
    margin-right: -61px;
  }

  .fengcai-box img.bg{
    display: none;
  }
  .fengcai-box .about-staff-ul{
    position: static;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .fengcai-box{
    margin: 20px -10px 0;
    width: auto;
  }
  .about-staff-li{
    position: static;
    width: 50% !important;
    flex: 1 0 50%;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
  }
  .about-staff-li-cont{
    background-color: #fff;
    padding: 10px;
  }
  .about-staff-li-img{
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .about-staff-li-img img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  .about-staff-li-cont .std-text2{
    font-size: 12px;
    bottom: 10px;
    padding: 0 10px;
  }

  #newslist a{
    padding: 30px 0;
    position: relative;
  }
  #newslist a img{
    width: 120px;
  }
  #newslist a .infobox{
    width: auto;
    position: absolute;
    right: 140px;
    top:30px;
    left:0;
  }
  #newslist a .infobox span{
    font-size: 16px;
  }
  #newslist a .infobox em{
    font-size: 12px;
  }
  #newslist a .infobox p{
    display: none;
  }

  .ctt_con{
    padding: 30px 0;
    font-size: 14px;
  }
  .ctt_con img{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 15px auto;
  }
  .ctt_tit{
    font-size: 24px;
  }
  .product .pro-title{
    display: none;
  }
  .section.product{
    padding: 60px 0 30px;
  }
  .product-box .down-button{
    height: 40px;
    margin-top: -40px;
    font-size: 14px;
    padding: 0 15px;
  }
  .product-box .down-button img{
    width: 16px;
  }

  .filter-box .filter-item{
    width: 120px;
  }
  .filter-box .filter-item .f-title{
    padding: 0 10px;
    height: 40px;
  }
  .filter-item .f-con{
    padding: 10px;
  }
  .filter-box .filter-item .f-title span{
    font-size: 12px;
  }
  .filter-item .li-item span{
    font-size: 12px;
  }
  .filter-box .total{
    font-size: 12px;
  }
  .filter-item .f-con .clear-box, .filter-item .f-con .reset-box{
    font-size: 12px;
  }
  .filter-item .f-con .clear-box img, .filter-item .f-con .reset-box img{
    width: 13px;
  }
  .filter-item .slide-box .layui-slider-vertical{
    margin-left: 10px;
  }
  .filter-item .slide-box .max-input, .filter-item .slide-box .min-input{
    left: 35px;
  }
  .table-box{
    height: auto !important;
  }
  .filter-box-head,.table-box-body{
    width: 2400px;
  }
  .table-box .item-td{
    width: 120px;
    padding: 0 10px;
    height: auto;
    min-height: 40px;
  }
  .table-box .item-td .item-pad{
    font-size: 13px;
  }

  .application-list .item-one .text-box{
    width: 100%;
    float: none;
  }
  .application-list .item-one .pic-box{
    width: 100%;
    float: none;
    height: auto;
    margin-top: 30px;
  }
  .related-product .rd-one.on .related-pro{
    top: 100%;
  }
  .application-list .item-one .related-product{
    margin-top: 20px;
    padding-right: 0;
  }
  .application-list .item-one{
    margin-bottom: 50px;
  }
  .application-list .item-one .desc{
    padding-right: 0;
    height: auto;
    max-height: 600px;
    font-size: 15px;
  }
  .related-product .rd-one{
    width: 46%;
  }
  .related-product .rd-one .related-pro{
    left: 0;
    transform: translateX(0);
  }
  .related-product .rd-one:nth-child(2n) .related-pro{
    left: auto;
    right: 0;
  }
  .brc-con{
    font-size: 15px;
    line-height: 1.8;
    padding: 30px 0;
    min-height: 300px;
  }
  .brc-con p{
    margin-top: 10px;
  }

  .contact-us{
    padding: 30px 0;
  }
  .contact-us .gmap{
    float: none;
    width: 100%;
    display: none;
  }
  .contact-con{
    float: none;
    width: 100%;
  }
  .section .title, .contact-con h1.title{
    font-size: 26px;
  }
  h2.title{
    font-size: 32px !important;
  }
  .new-pro-section .new-pro-title{
    font-size: 28px;
  }
  .new-pro-section .import-title{
    font-size: 36px;
  }
  .backTop{
      width: 48px;
      height: 48px;
  }
  .backTop img{
      width: 20px;
      height: 20px;
  }
}

/* 320px ~ 0px */
@media (max-width: 320px) {  
  
}