.index_swiper{

  width: 100%;

  height: 33.792rem;

  .swiper-slide{

    background-repeat: no-repeat;

    background-size: 100% 100%;

  }

    .button-next,

    .button-prev{

      position: absolute;

      top:calc(50% - 1.5rem) ;

      width: 2.917rem;

      height: 2.917rem;

      border-radius: 50%;

      background-color: #00000030;

      color: #fff;

      z-index: 10;

      transition: all .3s ease;

      &:hover{

        background-color: #fff;

        color: #000000;

      }

    }

    .button-next{

      right: 7.9rem;

    }

    .button-prev{

      left:  7.9rem;

    }

}

.search{

  margin-top: -2px;

	background-color: #0671b9;

  padding: 2.5rem;

  h4{

    font-family: HarmonyOS_Sans_SC;

    font-size: 1.25rem;

    font-weight: normal;

    font-stretch: normal;

    line-height: 1rem;

    letter-spacing: 0rem;

    text-align: center;

    color: #ffffff;

    margin: 0;

    padding-bottom: 1.25rem ;

  }

  form{

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    button{

      width: 5.875rem;

      height: 2.5rem;

      background-color: #b81c22;

      border-radius: 1.25rem;

      font-size: 0.667rem;

	    color: #ffffff;

    }

    input{

      width: 31.542rem;

      height: 2.5rem;

      background-color: #ffffff;

      border-radius: 1.25rem;

      padding: 0 1.25rem;

      box-sizing: border-box;

      border: solid 0.042rem #eeeeee;

      font-size: 0.667rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #666666;

    }

  }

}

.product_swiper{

  .swiper-slide{

    background-color: #fff;

    border: solid 0.042rem #e5e5e5;

    &:hover{

      background-color: #0671b9;

      .desc{

        p,

        h5{

          color: #fff;

        }

      }

    }

    .img-box{

      width: 100%;

      overflow: hidden;

      img{

        display:block;

        width: 100%;

        margin: 0;

      }

    }

    .desc{

      padding:2rem 1.4rem ;

      height: 4rem;

      transition: all .3s ease;

      h5{

        margin: 0;

        font-size: 1rem;

        line-height: 1rem;

        color: #000000;

        text-align: center;

        transition: all .3s ease;

      }

      p{

        font-size: 0.667rem;

           overflow: hidden;
    	text-overflow: ellipsis;

	display: -webkit-box;

    	-webkit-line-clamp: 3; /* 限制显示四行 */

    	-webkit-box-orient: vertical;

    	line-height: 1.5; /* 根据需要调整行高 */

        color: #666666;

        text-align: center;

        transition: all .3s ease;

      }

    }

  }

}

.why-grid{

  display: grid;

  grid-template-columns: repeat(4,1fr);

  gap: 0.583rem;

  .reason{

    text-align: center;

    background-color: #ffffff;

    padding:2.5rem 1.8rem;

    transition: all .3s ease;

    cursor: pointer;

    .iconfont{

      display: block;

      color: #0671b9;

      font-size: 2rem;

      margin: 1rem 0;

      transition: all .3s ease;

    }

    h3{

      padding: 1.25rem 0;

      margin: 0;

      font-size: 1rem;

      text-align: center;

      transition: all .3s ease;

      color: #010101;

    }

    p{

      margin: 0;

      font-size: 0.667rem;

      line-height: 1rem;

      color: #666666;

      transition: all .3s ease;

    }

    

    &:hover{

      background-color: #0671b9;

      .iconfont,

      h3,

      p{

        color: #fff;

      }

    }

  }

}

.about{

  .data{

    display: flex;

    align-items: center;

    .item{

      flex: 1;

      display: flex;

      align-items: center;

      flex-direction: column;

      justify-content: center;

      .num{

        font-size: 1.5rem;

        color: #0671b9;

      }

      .des{

        font-size: 0.667rem;

        line-height: 1rem;

        color: #333;

      }

    }

  }

  .video-des{

    margin-top: 2.25rem;

    border: solid 0.042rem #e5e5e5;

    border-top-right-radius: 2rem;

    border-bottom-left-radius: 2rem;

    overflow: hidden;

    display: flex;

    .img_box{

      flex: 1;

      position: relative;

      .iconfont{

        position: absolute;

        top: calc(50% - 1.6rem);

        left: calc(50% - 1.6rem);

        width: 3.2rem;

        height: 3.2rem;

        font-size: 1.2rem;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

 	z-index: 10;

        background-color: #ffffff65;

        &::before{

          display: flex;

          align-items: center;

          justify-content: center;

          background-color: #fff;

          width: 2.8rem;

          height:2.8rem;

          border-radius: 50%;

        }

      }

      video{

        height: 100%;

        width: 100%;

        object-fit: cover;

        display: block;

        transition: all 0.3s ease;

        background-color: #000000;

      }

    }

    .desc{

      flex: 1;

      padding: 2.5rem;

      h3{

        margin: 0;

        font-size: 1.25rem;

        line-height: 1rem;

        color: #000000;

      }

      p{

        margin:2rem 0;

        font-size: 0.667rem;

        font-weight: normal;

        font-stretch: normal;

        line-height: 1.25rem;

        letter-spacing: 0rem;

        color: #666666;

      }

      a{

          color: #fff;

          width: 5.875rem;

          height: 2.083rem;

          background-color: #b81c22;

          border-radius: 1.042rem;

          font-size: 0.667rem;

      }

      }

  }

}



.flows{

  display: flex;

  align-items: center;

  justify-content: space-between;

  .item{

    text-align: center;

    opacity: 0;

    transition:opacity .3s ease;

    flex-direction: column;
    align-items: center;
    display: flex;

    .icon{

      width: 4.583rem;

      height: 4.583rem;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      background-color: #0671b9;

      img{

        height: 1.667rem;

      }

    }

    p{

      font-size: 0.75rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #000000;

    }

  }

  .iconfont{

    color: #0671b9;

    display: block;

    padding-bottom: 2rem;

    transition:opacity .3s ease;

    opacity: 0;

  }

  &.lazy-loaded div:nth-child(1){

    opacity: 1;

    transition-delay: 0;

  }

  &.lazy-loaded div:nth-child(2){

    opacity: 1;

    transition-delay: 0.2s;

  }

  &.lazy-loaded div:nth-child(3){

    opacity: 1;

    transition-delay: 0.4s;

  }

  &.lazy-loaded div:nth-child(4){

    opacity: 1;

    transition-delay: 0.6s;

  }

  &.lazy-loaded div:nth-child(5){

    opacity: 1;

    transition-delay: 0.8s;

  }

  &.lazy-loaded div:nth-child(6){

    opacity: 1;

    transition-delay: 1s;

  }

  &.lazy-loaded div:nth-child(7){

    opacity: 1;

    transition-delay: 1.2s;

  }

  &.lazy-loaded div:nth-child(8){

    opacity: 1;

    transition-delay: 1.2s;

  }

  &.lazy-loaded div:nth-child(9){

    opacity: 1;

    transition-delay: 1.4s;

  }

  &.lazy-loaded div:nth-child(10){

    opacity: 1;

    transition-delay: 1.6s;

  }

  &.lazy-loaded div:nth-child(11){

    opacity: 1;

    transition-delay: 1.8s;

  }

}

.map{

  display: flex;

  justify-content: space-between;

  height: 28.333rem;

  .card{

    margin-top: 5rem;

    width: 12.917rem;

    border-radius: 0.417rem;

    background-color: #ffffff1c;

    border: solid 0.042rem #ffffff1c;

    padding: 1.5rem;

    h4{

      font-size: 1rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1rem;

      letter-spacing: 0rem;

      color: #ffffff;

      margin: 10px 0;

    }

    span{

      display: block;

          padding:0 1.5rem;

        margin-bottom: 0.5rem;

      height: 1.25rem;

      line-height: 1.25rem;

      text-align: center;

      background-color: #0671b9;

      border-radius: 0.604rem;

      font-size: 0.667rem;

      color: #fff;

    }

    p{

      font-size: 0.667rem;

      font-weight: normal;

      font-stretch: normal;

      line-height: 1.25rem;

      letter-spacing: 0rem;

      white-space: pre-line;

      color: #ffffff;

    }

  }

  .map-center{

    font-size: 0.75rem;

    line-height: 1rem;

    color: #e5e5e5;

    text-align: center;

    margin-top: -1rem;

    h3{

      font-size: 1.5rem;

      line-height: 1.5rem;

      padding-bottom: 1rem;

      color: #fff;

    }

  }

}





.new_swiper{

  .swiper-slide{

    background-color: #fff;

    border: solid 0.042rem #e5e5e5;

    &:hover{

      .img-box{

        img{

          transform: scale(1.03);

        }

      }

      .desc{

        h5{

          color: #0671b9;

        }

      }

    }

    .img-box{

      width: 100%;

      overflow: hidden;

      img{

        display:block;

        width: 100%;

        transition: transform .3s ease;

        margin: 0;

      }

    }

    .desc{

      padding:1.4rem ;

      transition: all .3s ease;

      h5{

        margin: 0;

        font-size: 0.833rem;

        line-height: 1.25rem;

        color: #000000;

        transition: all .3s ease;

      }

      p{

        font-size: 0.583rem;

        line-height: 1rem;

        color: #666666;

        transition: all .3s ease;

      }

      .bottom{

        display: flex;

        align-items: center;

        justify-content: space-between;

        font-size: 0.583rem;

        line-height: 1rem;

        color: #666666;

        padding-top: 1.5rem;

        margin-top: 1.5rem;

        border-top: 1px solid #eeeeee;

      }

    }

  }

}

.company{

  display: grid;

  grid-template-columns: repeat(6,1fr);

  gap: 0.667rem;

  >div{

	    border: solid 0.042rem #eeeeee;

      padding: .5rem;

      cursor: pointer;

      &:hover{

        img{

          transform: scale(1.06);

        }

      }

      img{

        transition:transform .3s ease;

        max-width: 100%;

      }

  }

}

.contact{

  .grid{

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 0.9rem;

    padding-bottom: 0.9rem;

  }

  input{

    height: 2.083rem;

    box-sizing: border-box;

    padding:  0 0.6rem;

    border: solid 0.042rem #ffffff73;

    font-size: 0.667rem;

    color: #ffffff;

    &::placeholder {

      font-size: 0.667rem;

      color: #ffffff;

    }

    &:focus,

    &:hover{

      outline: unset;

      border-color: #fff;

    }

  }

  button{

    display: block;

    margin: 2rem auto;

    width: 5.875rem;

	  height: 2.083rem;

    font-size: 0.667rem;

    color: #ffffff;

    border-radius: 1rem;

    background-color: #0671b9;

	  border-radius: 1.042rem;

  }

  textarea{

    width: 100%;

    display: block;

    padding: 0.6rem;

    box-sizing: border-box;

    border: solid 0.042rem #ffffff73;

    background-color: unset;

    min-height: 6.25rem;
	color:#fff;

    &::placeholder {

      font-size: 0.667rem;

      color: #ffffff;

    }

    &:focus,

    &:hover{

      outline: unset;

      border-color: #fff;

    }

  }

}



@media (max-width: 992px) {

  .flows{

    display: grid;

    text-align: center;

    grid-template-columns: repeat(6,1fr);

    gap: 1rem 2rem;

    .item {

      .icon{

        

        width: 3rem;

        height: 3rem;



      }

    }

    .iconfont{

      font-size: 1rem;

    }

  }

  .contact .grid{

    grid-template-columns: repeat(1,1fr);

  }

  .company{

    grid-template-columns: repeat(3,1fr);

  }

  .map{

    height: unset;

    gap: 1rem;

    .map-center{

      display: none;

    }

    .card{

      margin-top: 0;

      background-color: #0671b9ae;

      span{

        background-color: #fff;

        color: #0671b9;

      }

    }

  }

  .video-des{

    flex-direction: column;

  }

  .about .data{

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap:  2rem;

  }

  .why-grid{

    grid-template-columns: repeat(2,1fr);

  }

  .search form button{

    width: unset;

    padding: 0 1rem;

    white-space: nowrap;

  }

  .index_swiper{

    height: 13rem;

      .button-next,

      .button-prev{

        position: absolute;

        top:calc(50% - 1rem) ;

        width: 2rem;

        height: 2rem;

        border-radius: 50%;

        font-size: 1rem;

      }

      .button-next{

        right:1rem;

      }

      .button-prev{

        left:  1rem;

      }

  }

  .new_swiper,

  .product_swiper{

    border: 1px solid #eeeeee;

    .swiper-slide{

      border: unset;

    }

  }

}