* {
  margin: 0;
  padding: 0;
}


/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 3px;
  /* 设置滚动条的宽度 */
  background-color: #f9f9f9;
  /* 滚动条的背景色 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #f9f9f9;
  /* 轨道的背景色 */
  /* 轨道的圆角 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background-color: #ffffff;
  /* 滑块的背景色 */
  /
}


.header_nav_box {
  width: calc(90px + 10rem);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;

}

.container_box {
  width: calc(100vw - calc(90px + 10rem));
  float: right;
}

.banner_tel {
  width: 100%;
  height: calc(10px + 2rem);
  background: #1A1A19;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: calc(10px + 0.5rem);
  color: #DCDCDC;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(5px + 0.5rem);
}

.banner_tel img {
  width: calc(1px + 1rem);
}

.banner {
  width: 100%;
  height: 95vh;
  position: relative;
}

.banner .swiper {
  width: 100%;
  height: 100%;

}

.banner .swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner_text {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(4px + 1.3rem);
  padding-top: calc(1px + 10rem);
  padding-left: calc(31px + 5rem);
}

.banner_text p:nth-of-type(1) {
  font-family: OPPOSans-B;
  font-weight: normal;
  font-size: calc(14px + 2rem);
  color: #FFFFFF;
  width: calc(33px + 40rem);
}

.banner_text p:nth-of-type(2) {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: calc(6px + 1rem);
  color: #FFFFFF;
  opacity: 0.7;
}

.banner_text a {
  width: calc(60px + 5rem);
  line-height: calc(20px + 2rem);
  border: 1px solid #FFFFFF;
  opacity: 0.7;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #FFFFFF;
  text-align: center;
  margin-top: calc(4px + 2rem);
}

.scroll_down {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: calc(8px + 0.5rem);
  color: #FFFFFF;
  position: absolute;
  bottom: calc(13px + 3rem);
  left: 50%;
  transform: translate(-50%);
}

.white_line {
  width: 1px;
  height: calc(5px + 1.5rem);
  background: #E9E9E9;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 10;
  animation: animate1 1.6s infinite linear;
}

@keyframes animate1 {
  0% {
    height: calc(5px + 1.5rem);
  }

  50% {
    height: 0;
  }

  100% {
    height: calc(5px + 1.5rem);
  }
}

.black_line {
  width: 1px;
  height: calc(5px + 1.5rem);
  background: #000000;
  position: absolute;
  bottom: calc(-5px - 1.5rem);
  left: 49.968%;
  transform: translate(-50%);
  animation: animate2 1.8s infinite linear;
}


@keyframes animate2 {
  0% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-100%)
  }

  100% {
    transform: translateY(0)
  }
}












.Request {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #000000;
  text-align: center;
  margin-top: calc(20px + 4rem);
}

.Request_btn {
  width: calc(90px + 5rem);
  line-height: calc(6px + 2rem);
  background: #23B1AF;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #FFFFFF;
  text-align: center;
  margin: auto;
  margin-top: calc(10px + 1.5rem);
}

.product_box {
  width: 100%;
  background: #FAFAFA;
  padding: calc(8px + 4rem) 0;
  margin-top: calc(20px + 4rem);
}

.product {
  max-width: 1370px;
  width: 85%;
  margin: auto;
}

.product_sort_box {
  width: 100%;
  margin-top: calc(20px + 2rem);
  display: flex;
  justify-content: space-between;
}

.product_sort_box a {
  width: 48.1751%;
  height: calc(40px + 15rem);
}

.product_sort {
  width: 100%;
  height: 100%;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.06);
  background: url(../image/pro_bg.png) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.product_sort .pro_right_pic {
  width: 24%;
}

.product_sort .pro_right_pic img {
  width: 100%;
  transition: .5s;
}

.product_sort_box a:nth-of-type(2) .product_sort .pro_right_pic {
  width: 30%;
}

.product_sort_box a:nth-of-type(2) .product_sort .pro_right_pic img {
  width: 100%;
}

.pro_left_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(36px + 5rem);
}

.pro_left_text p {
  font-family: PingFang SC;
  font-weight: 800;
  font-size: calc(8px + 1rem);
  color: #000000;
}

.pro_left_text div {
  width: calc(90px + 5rem);
  line-height: calc(6px + 2rem);
  border: 1px solid #23B1AF;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #23B1AF;
  text-align: center;

}

.product_sort:hover .pro_left_text div {
  background-color: #23B1AF;
  color: #ffffff;
}

.product_sort:hover .pro_right_pic img {
  transform: scale(1.1);
}

.about_box {
  width: 100%;
  padding: calc(20px + 4rem) 0;
}

.about {
  max-width: 1370px;
  width: 85%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.about_left {
  width: 37.9562%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(0px + 0.5rem);
}

.about_left p:nth-of-type(1) {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: calc(8px + 0.5rem);
  color: #333333;
}

.about_left p:nth-of-type(2) {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #333333;
  line-height: calc(2px + 1.5rem);
  margin-top: calc(1px + 0.25rem);
  text-align: justify;
}

.about_left .about_more {
  width: calc(90px + 5rem);
  line-height: calc(6px + 2rem);
  border: 1px solid #23B1AF;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #23B1AF;
  text-align: center;
  margin-top: calc(1px + 1.5rem);

}

.about_left .about_more:hover {
  background-color: #23B1AF;
  color: #ffffff;
}

.about_pic {
  width: 56.9343%;
  height: calc(120px + 20rem);
}

.about_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why_box {
  width: 100%;
  background: url(../image/why_bg.png) no-repeat;
  background-size: 100% 100%;
  padding: calc(9px + 5rem) 0;
}

.why {
  max-width: 1370px;
  width: 85%;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;


}

.why_right {
  width: 64.4525%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: calc(3px + 3rem);

}

.whi_right_list {
  width: 44.7338%;
  cursor: pointer;
}
.whi_right_list:hover img{
  transform: rotateY(180deg);
}
.whi_right_list img {
  width: calc(20px + 2rem);
  height: calc(20px + 2rem);
  transition: .5s;
}

.whi_right_list p:nth-of-type(1) {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(4px + 1rem);
  color: #333333;
  margin-top: calc(5px + 0.5rem);
}

.whi_right_list p:nth-of-type(2) {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #666666;
  line-height: calc(10px + 1rem);
  margin-top: calc(5px + 0.5rem);
  text-align: justify;
}

.news_box {
  width: 100%;
  padding: calc(20px + 4rem) 0;
}

.news {
  max-width: 1370px;
  width: 85%;
  margin: auto;
}

.news_list_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: calc(5px + 2rem);
}

.news_list {
  width: 31.3868%;
  background: #FFFFFF;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}

.news_pic {
  width: 100%;
  height: calc(60px + 10rem);
  overflow: hidden;
}

.news_pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.news_list p {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(10px + 0.5rem);
  color: #454545;
  line-height: calc(10px + 1rem);
  padding-top: calc(10px + 0.5rem);
  padding-left: calc(10px + 0.5rem);
  padding-right: calc(10px + 0.5rem);
}

.news_list .news_more {
  width: calc(90px + 5rem);
  line-height: calc(6px + 2rem);
  border: 1px solid #23B1AF;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: calc(6px + 0.5rem);
  color: #23B1AF;
  text-align: center;
  margin-top: calc(1px + 1.5rem);
  margin-left: calc(10px + 0.5rem);
  margin-bottom: calc(10px + 1.5rem);
}

.news_list:hover .news_more {
  background-color: #23B1AF;
  color: #ffffff;
}

.news_list:hover .news_pic img {
  transform: scale(1.1);
}