h2{
    position: relative;
    width: fit-content;
}
.about-con .about h2:after{
    content: "about us";
    font-size: var(--font80);
    text-transform: uppercase;
    color: var(--bg-gray);
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
h2 span{
    position: relative;
    z-index: 1;
}
.about-con .about{
    gap: var(--gap80);
}
.about-con .about .img{
    flex-shrink: 0;
    max-width: 50%;
    border-radius: 30px;
    overflow: hidden;
}
.about-con .about .dot{
    border-bottom: 1px dashed #575757;
}
.about-con .about ul{
    gap: 20px;
}
.about-con .about ul li span{
    font-size: clamp(32px,2.5vw,48px);
    color: #ff6800;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.about-con .about a{
    display: block;
    background: #f7f7f7;
    width: 220px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 25px;
    text-transform: uppercase;
    font-weight: bold;
    border: 1px solid #e8e8e8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;


}
.about-con .about a:before{
    content: "";
    background: url(../images/cube.png) no-repeat;
    width: 29px;
    height: 31px;
    display: block;
}
.products-con .h2-button ul{
    gap: 10px;
}
.products-con .h2-button .swiper-button-prev,.products-con .h2-button .swiper-button-next{
    position: static;
    border: 1px solid #dadada;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    color: #000000;
}
.products-con .h2-button .swiper-button-prev:after,.products-con .h2-button .swiper-button-next:after{
    display: none;
}
.products-con .products{
    max-width: 100%;
    overflow: hidden;
}

.products-con  h2:after{
content: "our products";
    font-size: var(--font80);
    text-transform: uppercase;
    color: var(--bg-gray);
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
}
.products-con  h2 span{
    position: relative;
    z-index: 1;
}
.products-con .h2-desc p{
    position: relative;
    z-index: 1;
}

/* 主大图轮播 */
.swiper {
  width: 100%;
  /* height: 300px; */
  margin-left: auto;
  margin-right: auto;
}

.mySwiper {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  background: var(--bg-gray);
  padding: 20px 30px;
  border-radius: 20px;
  position: relative;
  transition: all .5s ease;
}

.mySwiper .swiper-slide .product-title{
    font-size: 20px;
    font-weight: bold;
}
.mySwiper .swiper-slide .product-sub{
    color: #747474;
    font-size: 14px;
}
.mySwiper .swiper-slide .img-box{
    position: relative;
}
.mySwiper .swiper-slide .img-box:before{
    content: "";
    width: 233px;
    height: 233px;
    background: var(--bg-orange);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    visibility: hidden;
    transition: all 0.5s ease-in;
}
.mySwiper .swiper-slide .img-box a{
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
}
.mySwiper .swiper-slide:hover{
    border-radius: 50%;
}
.mySwiper .swiper-slide:hover .img-box:before{
    visibility: visible;
}
.mySwiper .swiper-slide .more-btn{
    background: #ffffff;
    position: absolute;
    bottom: 0;
    right: 0;
    width: fit-content;
    display: flex;
    justify-content: space-between;
    gap: var(--gap80);
    padding: 10px 30px;
    border-radius: 30px;
    z-index: 3;
}





.title-desc-more a{
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--bg-orange);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 30px;
}
.title-desc-more a:after{
    content: "";
    background: url(../images/plus.png) no-repeat;
    width: 33px;
    height: 33px;
    display: block;
    flex-shrink: 0;
}




/* 外层定位盒 */
.swiper-gallery-wrapper {
  position: relative;
  width: 100%;
  /* max-width: 1200px; 根据实际设计稿调整 */
  margin: 0 auto;
}

/* Swiper 核心配置：重点在 padding */
.mySwiper1 {
  width: 100%;
  padding: 20px 10%; /* 核心：左右 10% 的 padding 决定了露出两侧卡片的多少 */
  box-sizing: border-box;
  overflow: hidden;
}

/* 轮播单页样式 */
.mySwiper1 .swiper-slide {
  width: 80%; /* 核心：中间主卡片占满可用宽度的 80% */
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease; /* 过渡动画 */
}

/* 非活动卡片可以做稍微缩放或变暗处理（可选，完美匹配视觉） */
.mySwiper1 .swiper-slide-active {
  transform: scale(1);
}
.mySwiper1 .swiper-slide-next,.mySwiper1 .swiper-slide-prev {
  transform: scale(0.95); 
  opacity: 0.8; /* 让两侧卡片稍微变暗以凸显中间 */
}

/* 内部图文卡片布局 */
.card-content {
  display: flex;
  background: #fff;
}
.text-area {
  width: 40%;
  background: #7ca1c1; /* 对应图中的蓝色背景 */
  color: #fff;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-area div{
    margin: 20px 0 40px;
    display: -webkit-box;           /* 必须：将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical;   /* 必须：设置伸缩盒子的子元素排列方式为从上到下垂直排列 */
    -webkit-line-clamp: 3;          /* 核心：限制在一个块元素显示的文本的行数（这里设为 3 行） */
    overflow: hidden;               /* 必须：隐藏超出文本框的内容 */
    text-overflow: ellipsis;        /* 必须：当文本溢出时显示省略标记 (...) */
    
    /* 可选补充（防止英文或长数字不换行导致效果失效） */
    word-break: break-all;    
}
.text-area a{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 10px;
    width: fit-content;
    color: #1a1a1a;
    border-radius: 30px;
}
.text-area a:before{
    content: "";
    background: url(../images/arrow-right.png) no-repeat;
    width: 37px;
    height: 37px;
    display: block;
}
.img-area {
  width: 60%;
}
.img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 自定义左右导航按钮（橙色圆形按钮） */
.swiper-button-prev-custom,
.swiper-button-next-custom {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #ff6600; /* 橙色 */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}
.swiper-button-prev-custom { left: 20px; }
.swiper-button-next-custom { right: 20px; }

.expert-team-con{
    background: #f6fbff;
}
.expert-team-con p{
    margin-bottom: 0;
}
.expert-team-con a{
    display: flex;
    background: #ffffff;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.expert-team-con a:before{
    content: "";
    background: url(../images/click.png) no-repeat;
    width: 43px;
    height: 43px;
    display: block;
}
.expert-team-con .small{
    text-transform: uppercase;
    font-weight: bold;
}

.service-con{
    background: url(../images/factory-bg.jpg) no-repeat;
    background-size: cover;
    padding: clamp(30px,9.375vw,180px) 0;
    color: #ffffff;
}
.service-con li{
    text-align: center;
    flex: 1;
    padding: 0 20px;
}
.service-con li:not(:last-child){
    border-right: 1px solid #ffffff;
}
.service-con li:nth-child(1):before{
    content: "";
    background: url(../images/icon1.png) no-repeat;
    width: 41px;
    height: 38px;
    display: block;
    margin: 0 auto;
}
.service-con li:nth-child(2):before{
    content: "";
    background: url(../images/icon2.png) no-repeat;
    width: 42px;
    height: 37px;
    display: block;
    margin: 0 auto;
}
.service-con li:nth-child(3):before{
    content: "";
    background: url(../images/icon3.png) no-repeat;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto;
}
.service-con li:nth-child(4):before{
    content: "";
    background: url(../images/icon4.png) no-repeat;
    width: 35px;
    height: 39px;
    display: block;
    margin: 0 auto;
}
.service-con li span{
    margin: 10px 0;
    font-size: 18px;
    display: inline-block;
}

.news-con .news .title-menu ul{
    gap: 30px;
}
.news-con .news .news-list{
    gap: var(--gap80);
}
.news-con .news .news-list ul{
    border-top: 1px dashed #5a5a5a;
    flex: 1;
}
.news-con .news .news-list ul li{
    border-bottom: 1px dashed #5a5a5a;
   position: relative;
   
}
.news-con .news .news-list ul li:before{
    content: "";
    width: 0;
    height: 5px;
    background: var(--bg-orange);
    border-radius: 2.5px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
    transition: all .5s ease;
}
.news-con .news .news-list ul li:hover{
    border-color: var(--bg-orange);
}
.news-con .news .news-list ul li:hover:before{
    width: 110px;
}
.news-con .news .news-list ul li a{
 padding: 50px 30px;
  gap: var(--gap50);
}
.news-con .news .news-list ul li p{
    margin-bottom: 0;
}
.news-con .news .news-list ul li .date{
    text-align: center;
    color: #555555;
}
.news-con .news .news-list ul li .date span{
    font-size: 30px;
    font-weight: bold;
}
.news-con .news .news-list ul li .date p{

}
.news-con .news .news-list ul li .title-desc .title{
    font-size: 18px;
    font-weight: bold;
}
.news-con .news .news-list ul li .title-desc .desc{
    color: #999999;
     display: -webkit-box;
  -webkit-line-clamp: 2;          /* Limit to exactly 2 lines */
  -webkit-box-orient: vertical;  
  overflow: hidden;              /* Hide the rest */
  text-overflow: ellipsis;       /* Show the ... */
  word-break: break-all;         /* Prevent long English words/links from breaking the layout */
}
.news-con .news .news-list>a{
    max-width: 50%;
}





.partners-con{
    background: #f7f7f7;
    text-align: center;
}
.partners-con .partners h2{
    margin: 0 auto;
}
.partners-con .partners p{
    max-width: 860px;
    margin: 0 auto clamp(30px , 4.2vw, 80px);
    color: #353535;
}


/* 外层定位盒子 */
.logo-carousel-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px; /* 给左右留出足够的空间放箭头 */
  box-sizing: border-box;
}

/* Swiper 容器 */
.logoSwiper {
  width: 100%;
  height: 100px; /* 根据 Logo 的高度设计 */
  overflow: hidden;
}

/* 单个 Logo 滑块的样式 */
.logoSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  /* 可以在这里加一个浅色的边框或阴影来复刻图中的分割线感觉 */
  /* border-right: 1px solid #f0f0f0;  */
}

.logoSwiper .swiper-slide img {
  max-width: 85%;
  max-height: 70%;
  object-fit: contain; /* 确保 Logo 比例不失真 */
  filter: grayscale(0%); /* 如果需要灰色调可以改为 100%，鼠标悬停再变彩色 */
  transition: all 0.3s ease;
}

/* 自定义浅灰色左右导航箭头 */
.logo-button-prev,
.logo-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 32px;
  color: #ccc; /* 对应图中的浅灰色 */
  cursor: pointer;
  user-select: none;
  z-index: 10;
  transition: color 0.3s;
}
.logo-button-prev:hover,
.logo-button-next:hover {
  color: #666; /* 悬停时颜色变深 */
}
.logo-button-prev { left: 10px; }
.logo-button-next { right: 10px; }
@media(max-width:1080px){
    .text-area{
        padding: 15px;
    }
    .news-con .news .title-menu ul{
        gap: 15px;
    }
}
@media (max-width:871px){
    .card-content{
        flex-direction: column;
    }
    .text-area,.img-area{
        width: 100%;
    }
    .news-con .news .title-menu{
        flex-wrap: wrap;
        gap: 30px;
    }
}
@media (max-width:768px){
    .about-con .about{
        flex-direction: column;
    }
    .about-con .about .img{
        max-width: 100%;
    }
    .news-con .news .news-list{
        flex-direction: column;
    }
    .news-con .news .news-list>a{
        max-width: 100%;
    }
     .service-con ul{
        flex-wrap: wrap;
     }
    .service-con li{
        width: 50%;
        flex: none;
    }
    .service-con li:not(:last-child){
        border: none;
    }
    .expert-team-con .expert-team .title-desc-contact,.cases-con .cases .title-desc-more{
        flex-wrap: wrap;
        gap: 20px;
    }
    .mySwiper .swiper-slide{
        margin-right: 15px!important;
    }
}