/* 轮播图区域 */

.carousel .carousel-item {
  height: 800px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.carousel .carousel-item:nth-child(1) {
  background-image: url(../uploads/banner1.jpg);

}

.carousel .carousel-item:nth-child(2) {
  background-image: url(../uploads/banner2.jpg);

}

.carousel .carousel-item:nth-child(3) {
  background-image: url(../uploads/banner3.jpg);

}

@media (max-width: 992px) {
  .carousel .carousel-item {
    height: 600px;
    /* 等比缩小 */
  }
}

/* 大手机 */
@media (max-width: 768px) {
  .carousel .carousel-item {
    height: 400px;
  }
}

/* 小手机 */
@media (max-width: 576px) {
  .carousel .carousel-item {
    height: 300px;
  }
}


/* 现在是产品区域 */

.products-area {
  margin-top: 70px;
}

/* title公共样式 */
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/* 取消 h2 的字体大小设置，使用默认字体大小 */
.title h2,
.products-area .title h2 {
  font-size: 1.8rem!important;
}

.title a {
  font-size: 1rem;
  text-align: center;
  border-bottom: 0.1875rem solid #ffa800;
  height: 2.1875rem;
}

.title a:hover {
  color: #ffa800;
}

.content {

  text-align: center;
}

/* 如果视口宽度大于992 一行排四个  col-lg-3
如果视口宽度大于768 一行排两个 col-md-6
视口宽度大于576 一行排一个 col-sm-12
视口宽度小于576 一行排一个 col-12

*/

.content .row {
  row-gap: 30px; /* 使用 row-gap 在 flexbox 中设置行间距 */
}

.content .row > div {
  height: 440px;
  margin-bottom: 14px !important; /* 备用方案，只针对直接子元素 */
}

.content .row div a {
  /* 块级的宽度和父级一样大 */
  display: block;
 
  height: 440px;
  background-color: #fff;
}

.content .row div a .pic {
  height: 18.75rem;
  width: 100%; /* 确保容器宽度占满父元素 */
  overflow: hidden; /* 防止放大后的图片超出容器边缘 */
  position: relative; /* 为图片定位提供参考 */
  display: block; /* 确保块级显示 */
  margin-bottom: 0 !important; /* 确保内部 div 不受影响 */
}

.content .row div a .pic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */
  transform-origin: center center; /* 从中心放大 */
}

.content .row div a .text {
  text-align: center;
  height: 8.75rem;
  margin-bottom: 0 !important; /* 确保内部 div 不受影响 */
}

.content .row div a .text h4 {
  padding: 1.25rem 0.625rem 0.625rem;
  margin-bottom: 0.875rem;
  font-size: 1.25rem;
  line-height: 1.5;
  /* 两行省略 - 超过两行时第二行末尾显示省略号 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* 标准属性，提高兼容性 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  /* 固定高度为两行的高度 (line-height * 2) */
  height: 3rem; /* 1.5 * 2 = 3rem */
  max-height: 3rem;
}

.content .row div a .text span {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0 0.625rem;
  width: 8.625rem;
  height: 1.875rem;
  border-radius: 1.25rem;
  line-height: 1.875rem;
  font-size: 1.125rem;
  background-color: #ffa800;
}



.content .row div a:hover {
  /* 边框变为橙色 */
  /* box-shadow: 0 4px 12px hwb(36 0% 0% / 0.945); */
  /* 可选阴影效果 */
  transform: translateY(-2px);
  /* 轻微上浮效果 */
}

.content .row div a:hover .text {
  color: #333;
  background-color: #ffa800;
  /* 文字区域背景变为黄色 */
}

.content .row div a:hover .text span {
  background-color: white;
  /* span背景变为白色 */
  color: black;
  /* span文字变为黑色 */
  border: 1px solid #ddd;
  /* 可选边框 */
}

.content .row div a:hover .pic img {
  transform: scale(1.1);
  /* 图片放大效果 */

}




/* 公司介绍区域 */

.company {
  margin-top: 70px;
}

.company .row {
  align-items: center;
}

/* 左侧 */

.information .row .left img {
  width: 100%;
  height: auto;
  display: block;
  background-color: #001e42;
}




/* 右侧 */

.information .right {

  overflow-wrap: anywhere;
  word-break: break-word;
}





.information .right h2 {
  padding-top: 10px;
  margin-bottom: 10px;
  color: #ffa800;
  font-size: clamp(20px, 2.5vw, 32px);
}

.information .right p {
  font-size: 16px
}

/* 移除对 #special-text 的字号限制，避免覆盖 .right p */




.information .right .advantage {
  /* height: 80px; */
  padding: 12px 0;
  background-color: #036;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
  align-items: center;
  justify-content: space-evenly;





}

.information .right .advantage .advantage-text {
  margin-bottom: 10px;
  align-items: center;

}



.information .right .advantage .advantage-text .big {
  display: flex;
  height: 40px;
  justify-content: center;
}




.information .right .advantage .advantage-text .num {
  font-size: clamp(20px, 2.2vw, 30px);
}

.information .right .advantage .advantage-text .symbol {

  padding-bottom: 10px;

}

.information .right .advantage .advantage-text .big .m {
  margin-top: 18px;
  /* margin-left: -10px; */
  font-size: 15px;
}

.information .right .advantage .advantage-text .big .square {
  font-size: 7px;
  margin-top: 18px;

}



.information .right .advantage .advantage-text .small {
  height: 13px;
  font-size: clamp(10px, 1.2vw, 12px);
}

@media (max-width:1400px) {
  .information .right p {
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .information .right h2 {
    font-size: 25px;
  }

  .information .right p {
    font-size: 14px;
  }

  /* 保留断点用于布局调整，移除强制 p 字号，使用上面的 clamp 流式规则 */
}

/* 移除了各断点对图片固定高度的设置，以保持等比缩放 */




/* 公司工厂图区域 */

.factory {
  margin-top: 26px;

}

.pic-1 {
  aspect-ratio: 320 / 200;
  width: 100%;
  /* 重要：让pic-1占满col的宽度 */
  margin-bottom: 20px;
}

.pic-1 img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;

}



/* 证书区域 */
.certificate {
  margin-top: 50px;
}

.certificate .title {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}

.certificate .title h2 {
  text-align: center;
  margin-bottom: 20px;
}

.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
transition: 300ms;
transform: scale(0.8);
}
.swiper-slide-active,.swiper-slide-duplicate-active{
  transform: scale(1);
}






/* 分页器位置调整 */
.certificate .swiper-container {
  padding-bottom: 50px;
}

.certificate .swiper-pagination {
  bottom: 10px !important;
  top: auto !important;
} 






/* news区域  新闻区域 */


.news {
  margin-top: 70px;
  margin-bottom: 70px;
}

.news .title {

  margin-bottom: 20px;

}




/* title公共样式 */


.news-text {

  text-align: center;

}

/* 如果视口宽度大于992 一行排四个  col-lg-3
如果视口宽度大于768 一行排两个 col-md-6
视口宽度大于576 一行排一个 col-sm-12
视口宽度小于576 一行排一个 col-12

*/


.news-text .row div {
  height: 327px;

}

.news .row div a {

  /* 块级的宽度和父级一样大 */
  display: block;
  /* height: 273px; */

  background-color: #fff;
  border: 1px solid #ededed;
  transition: transform 0.1s ease;

}

.news .row div a .pic {
  height: 200px;
}

.news .row div a .pic img {
  width: 100%;
  object-fit: cover;
  display: block;
  /* object-fit: contain; */
}

.news .row div a .text {

  padding: 5px 5px;
  width: 100%;
  /* text-align: center; */
  height: 127px;
  text-align: left;
}

.news .row div a .text em {
  display: inline-block;
  margin-top: 10px;
  /* padding: 1.25rem 0.625rem 0.625rem; */

  /* height: 3.75rem; */
  font-size: 12px;
}

.news .row div a .text .text-Features {
  margin-top: 2px;
  height: 50px;
  /* overflow: hidden; */
  /* 隐藏超出内容 */

  font-size: 15px;

  /* 添加多行文字超出隐藏 */

  -webkit-line-clamp: 2;
  /* 限制显示2行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;

  text-overflow: ellipsis;
  overflow: hidden
}

.news .row div a .text span {
  display: inline-block;
  margin-top: 1px;
  padding: 0 0.625rem;

  border-radius: 1.25rem;
  line-height: 1.875rem;
  font-size: 12px;
  background-color: #001e42;
  color: #fff;
}


.news .row div a:hover {
  transform: scale(1.05);
  /* 放大5% */
  color: #001229;
}




