.banner{
  width: 100%;
}

.banner .swiper-wrapper{
   width: 100%;
}

.banner.imgbox img{
  width: 100%;
}

.about{
  background: url(./image/aboutbg.png) no-repeat center;
  background-size: cover;
  padding: 100px 0;
}

.about .title{
  text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 20px;
}


.about .content{
  width: 70%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.625;
  margin-bottom: 60px;
}

.about .tab{
  display: flex;
  justify-content: space-between;
}

.about .tab .item{
  width: 24%;
  border-left: 5px solid #0068B6;
  padding: 18px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: all .5s;
      display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about .tab .item:hover{
  box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}




.about .tab .item .subtitle{
  color: #0068B6;
  font-weight: bold;
  margin-bottom: 16px;
  font-size: 20px;
}

.about .tab .item .info .label{
  color: #4B5563;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.about .tab .item .info .details{
  color: #374151;
  font-size: 16px;
  margin-bottom: 16px;
}

.about .tab .item .btn{
  background-color: #0068B6;
  padding: 12px 24px;
    text-align: center;
    margin-bottom: 12px;
    transition: all .5s;
    cursor: pointer;
    border-radius: 4px;
}

.about .tab .item .btn:hover{
  background-color: #22c55e;
}

.about .tab .item .btn a{
  color: #fff;
  font-weight: bold;
}

.product{
   padding: 100px 0;
}

.product .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.product .imgbox{
  border-bottom: 2px solid #0068B6;
  overflow: hidden;
}

.product .imgbox img{
   transition: transform 0.5s ease; /* 平滑过渡效果 */
  transform-origin: center; /* 缩放中心点 */
}

.product .list{
  display: flex;
  justify-content: space-between;
}

.product .list .item{
  width: 23%;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
  transition: all .5s;
}

.product .list .item:hover{
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.product .list .item:hover img{
transform: scale(1.06);
}

.product .subtitle{
   padding: 24px;

}

.swiper-container .swiper-wrapper{
    -webkit-transition-timing-function: linear; /*之前是ease-out*/
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

.product .subtitle a{
     color: #000;
  font-weight: bold;
  font-size: 18px;
}

.product .list .item:hover .subtitle a{
  color: #0068B6;
}


.portfolio{
    background: url(./image/portfolio.jpg) no-repeat center;
  background-size: cover;
  padding: 100px 0;
  position: relative;
}


.portfolio .shade{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
}

.portfolio .title{
    text-align: center;
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 48px;
  position: relative;
  z-index: 9;
}

.portfolio  .list{
    position: relative;
  z-index: 9;
  padding: 0 20%;
}

.portfolio  .list .item{
  margin-bottom: 24px;
  display: flex;
  align-items: center;

}

.portfolio  .list .item .wire{
  width: 12px;
  height: 12px;
    margin-right: 16px;
  border-radius: 50%;
  background-color: #0068B6;
  flex-shrink: 0;
}

.portfolio  .list .item  .text{
  font-size: 18px;
  color: #fff;
}

.portfolio  .list .item:hover .wire{
    background-color: #22c55e;
}

.our{
  padding: 100px 0;
}

.our .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.our .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.our .list .item{
  width: 49%;
  position: relative;
  transition: all .5s ease;
  margin-bottom: 24px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.our .list .item .shade{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.6);
  z-index: 9;
  opacity: .5;
     transition: all .3s ease;
}

.our .list .item .content{
   padding: 32px;
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 10;
}

.our .list .item .content .subtitle{
  border-left: 5px solid #0068B6;
  margin-bottom: 16px;
  font-size: 24px;
  padding-left: 16px;
  color: #fff;
  font-weight: bold;
  line-height: 1;
}



.our .list .item .content .info{
   opacity: 0;
   max-height: 0;
   transition: all .3s ease;
}

.our .list .item:hover .info{
  opacity: 1;
   max-height: 1000px;
}

.our .list .item .imgbox{
  overflow: hidden;
}

.our .list .item img{
     transition: all .3s ease;
     object-fit: cover;
    display: block;
}

.our .list .item:hover img{
     transform: scale(1.06);
}

.our .list .item .content .info p{
   color: #fff;
}

.our .list .item:hover .shade{
  opacity: 1;
}


.design{
  padding: 100px 0;
  background-color: #f9fafb;
  border-bottom: 1px solid #d9d9d9;
}

.design .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.design .content .tab{
  width: 40%;
     display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.design .content .tab .item{
  display: flex;
}


.design .content .tab .item  .iconbox{
  width: 64px;
  height: 64px;
  background-color: #0068B6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
  flex-shrink: 0;
  transition: all .3s ease;
  cursor: pointer;
}

.design .content .tab .item:hover .iconbox{
      background-color: #22c55e;
}

.design .content .tab .item  .iconbox span{
  font-size: 36px;
  color: #fff;
}

.design .content .tab .item .textBox .subtitle{
   color: #111827;
   font-size: 20px;
   margin-bottom: 12px;
   font-weight: bold;
}

.design .content .tab .item .textBox .text{
  font-size: 18px;
}

.design .content .imgbox{
   width: 60%;
   padding-left: 40px;
   display: flex;
    justify-content: center;
    align-items: center;
}

.design .content{
  display: flex;
}

.facility{
  padding: 100px 0;
}

.facility .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.facility .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.facility .list .item{
  width: 24%;
  position: relative;
  margin-bottom: 24px;
  border-radius: 4px;
  overflow: hidden;
}

.facility .list .item .imgbox{
  width: 100%;
    height: 0;
  padding-bottom: 75%;
  position: relative;
    overflow: hidden;
}
.facility .list .item .imgbox img{
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
    transition: all .5s ease;
    display: block;
}

.facility .list .item:hover .shade{
   opacity: 1;
}

.facility .list .item:hover  img{
       transform: scale(1.06);
}

.facility .list .item .shade{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-image: linear-gradient(to top, rgb(0 0 0 / .7) , transparent);
  transition: all .5s ease;
}

.facility .list .item .shade .text{
  font-size: 18px;
  padding: 16px;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
}


.certifications{
background: url(./image/certificationsbg.png) no-repeat center 64px;
  background-size: auto;
}


.certifications .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.certifications .imgbox{
  display: flex;
}



.certifications  .swiper-wrapper{
      display: flex !important;
    align-items: baseline !important;
}

.global{
  padding: 100px 0;
}

.global .title{
    text-align: center;
  font-size: 36px;
  color: #000;
  font-weight: bold;
  margin-bottom: 64px;
}

.global .list{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.global .list .item{
  width: 24%;
  position: relative;
  margin-bottom: 24px;
}

.global .list .item .imgbox{
  width: 100%;
    height: 0;
  padding-bottom: 75%;
  position: relative;
    overflow: hidden;
}
.global .list .item .imgbox img{
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 100%;
  object-fit: cover;
    transition: all .5s ease;
    display: block;
}

.global .list .item:hover .shade{
   opacity: 1;
}

.global .list .item:hover  img{
       transform: scale(1.06);
}

.global .list .item .shade{
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-image: linear-gradient(to top, rgb(0 104 182 / .9) , rgb(0 104 182 / .5) , transparent);
  transition: all .5s ease;
}

.global .list .item .shade .text{
  font-size: 18px;
  padding: 16px;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: 0;
  color: #fff;
}

.global .list .item .shade .wire{
  width: 48px;
  height: 4px;
  background-color: #22c55e;
  margin-top: 8px;
}

.contact{
      background: url(./image/contactbg.jpg) no-repeat center;
  background-size: cover;
  padding: 100px 0;
  position: relative;
}

.contact .title{
    text-align: center;
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 64px;
  z-index: 10;
  margin-bottom: 24px;
}

.contact .shade{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 104 182 / .85);
  z-index: 9;
}

.contact .wrap{
  position: relative;
  z-index: 10;
}

.contact .subtitle{
  font-size: 20px;
  margin-bottom: 40px;
      text-align: center;
        color: #fff;
}

.contact .btnbox{
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact .btnbox .btn{
   display: block;
   padding:16px 40px;
   background-color: #fff;
   font-size: 18px;
   color: #0068B6;
   transition: all .3s ease;
   font-weight: bold;
   border-radius: 4px;
}

.contact .btnbox .btn:hover{
  background-color: #22c55e;
  color: #fff;
}

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

}


@media only screen and (max-width:768px){
  .about{
    padding: 1rem 0;
  }

  .about .title{
   font-size: .48rem;
  }
  .about .content{
    width: 100%;
    font-size: .24rem;
    margin-bottom: .6rem;
  }

  .about .tab{
    flex-wrap: wrap;
  }

  .about .tab .item{
    width: 100%;
    margin-bottom: .2rem;
  }

  .about .tab .item .info .details{
      font-size: .24rem;
  }

  .about .tab .item .btn{
    padding: .12rem .24rem;
  }

  
 .product{
    padding: 1rem 0;
  }

  .product .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .product .list{
     flex-wrap: wrap;
  }

  .product .list .item{
    width: 48%;
    margin-bottom: .2rem;
  }

  .product .subtitle{
        padding: .24rem;
  }

  .product .subtitle a{
    font-size: .24rem;
    transition: all .3 ease;
  }
 
   .portfolio{
    padding: 1rem 0;
  }

  .portfolio .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .portfolio .list{
    padding:0;
  }

  .portfolio .list .item .text{
    font-size: .28rem;
  }

    .our{
    padding: 1rem 0;
  }

  .our .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .our .list .item{
    width: 100%;
  }

  .our .list .item .content .info{
    display: none;
  }

  .our .list .item .content{
    padding: .32rem;
  }

  .our .list .item .content .subtitle{
    font-size: .32rem;
    line-height: 1.5;
  }

  .design{
    padding: 1rem 0;
  }

  .design .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .design .content{
    flex-direction: column;
  }

  .design .content .tab{
        width: 100%;
  }

    .design .content .tab .item{
      margin-bottom: .2rem;
    }

  .design .content .tab .item .iconbox{
        width: .8rem;
        height: .8rem;
        margin-right: .24rem;
  }
  .design .content .tab .item .iconbox span{
    font-size: .36rem;
  }

  .design .content .tab .item .textBox .text{
    font-size: .28rem;
  }

  .design .content .tab .item .textBox .subtitle{
        margin-bottom: .12rem;
  }

  .design .content .imgbox{
        width: 100%;
    padding-left: 0;
    margin-top: .4rem;
  }

   .facility{
    padding: 1rem 0;
  }

  .facility .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .facility .list .item{
    width: 48%;
  }

  .facility .list .item .shade{
    opacity: 1;
  }

  .facility .list .item .shade .text{
    font-size: .28rem;
  }

  .facility .list .item .shade .text{
    padding: .16rem;
  }

  .certifications .title{
       font-size: .48rem;
  }

  .certifications {
    background-size: contain;
  }

   .certifications .swiperBox{
    margin-top: -30px;
   }

      .global{
    padding: 1rem 0;
  }

  .global .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .global .list .item{
    width: 48%;
  }
  .global .list .item .shade{
     opacity: 1;
  }
  .global .list .item .shade .text{
     font-size: .28rem;
  }

  
  .contact{
    padding: 1rem 0;
  }

  .contact .title{
   font-size: .48rem;
   margin-bottom: .6rem;
  }

  .contact .subtitle{
    font-size: .28rem;
    margin-bottom: .4rem;
  }

  .contact .btnbox .btn{
    padding: .16rem .4rem;
    font-size: .28rem;

  }





}