.indexD-kelin .index-kelin-tit{text-align:center;}
.indexD-kelin .index-kelin-tit h3{font-size:40px;line-height:1;color:#000;position:relative;display:inline-block;}
.indexD-kelin .index-kelin-tit h3::before{content:'';width:3px;height:28px;background:#fff;display:inline-block;margin-right:35px;}
.indexD-kelin .index-kelin-tit h3::after{content:'';width:3px;height:28px;background:#fff;display:inline-block;margin-left:35px;}

.indexD-kelin{padding:70px 0 55px;}
.indexD-kelin ul{
  margin:0 0 0;
  display:-webkit-flex;
  display:flex;
  -webkit-justify-content:space-between;
  justify-content:space-between;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  /* 添加间距容器 */
  gap: 10px; /* 使用gap属性添加盒子间距 */
}
.indexD-kelin ul li{
  width: calc(25% - 10px); /* 减去间距的一半 */
  margin:25px 0 0;
  position:relative;
  overflow:hidden;
  padding: 0;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  border-radius: 15px;
  background: #fff;
  transition: all 0.3s ease;
}
.indexD-kelin ul li .pic{
  display:block;
  width:100%;
  overflow:hidden;
  padding: 10px; /* 图片区域添加内边距 */
  box-sizing: border-box;
}
.indexD-kelin ul li .pic img{
  width:100%;
  display:block;
  transition:all 0.3s ease 0s;
  -webkit-transition:all 0.3s ease 0s;
  border-radius:10px; /* 减小圆角匹配新布局 */
}
.indexD-kelin ul li p{
  margin:10px 0 0;
  color:#333;
  font-size:20px;
  text-align:center;
  padding: 0 10px 15px; /* 文字区域添加内边距 */
}
.indexD-kelin ul li p a:hover{color:var(--link-color-hover);text-decoration:underline;}

/* 悬停效果 */
.indexD-kelin ul li:hover {
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  transform: translateY(-5px);
}
.indexD-kelin ul li:hover .pic img{
  transform:scale(1.05);
  -webkit-transform: scale(1.05);
}


@media screen and (max-width:991px) {
  .indexD-kelin .index-kelin-tit h3{font-size:30px;height:36px;line-height:36px;}
  .indexD-kelin .index-kelin-tit h3::before{width:2px;height:22px;margin-right:30px;}
  .indexD-kelin .index-kelin-tit h3::after{width:2px;height:22px;margin-left:30px;}

  .indexD-kelin{padding:30px 0;}
  .indexD-kelin ul{
    margin:30px 0 0;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    margin:0 -5px; /* 调整负边距 */
    gap: 10px; /* 保持间距 */
  }
  .indexD-kelin ul li{
    width: calc(33.333% - 10px); /* 减去间距 */
    margin:20px 0 0;
    padding:0;
    box-sizing:border-box;
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  }
  .indexD-kelin ul li:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  }
  .indexD-kelin ul li p{font-size:18px;}
}  

@media screen and (max-width:768px) {
  .indexD-kelin .index-kelin-tit h3{font-size:24px;height:30px;line-height:30px;}
  .indexD-kelin .index-kelin-tit h3::before{width:2px;height:18px;margin-right:30px;}
  .indexD-kelin .index-kelin-tit h3::after{width:2px;height:18px;margin-left:30px;}

  .indexD-kelin ul li{
    width: calc(50% - 10px); /* 减去间距 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  }
  .indexD-kelin ul li:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  }
}  


@media screen and (max-width: 1440px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 36px;}
}
@media screen and (max-width: 1281px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 34px;}
}
@media screen and (max-width: 1171px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 30px;}
}
@media screen and (max-width: 992px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 26px;}
}
@media screen and (max-width: 768px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 24px;}
}
@media screen and (max-width: 480px) {
  .indexD-kelin .index-kelin-tit h3 {font-size: 22px;}
  
  /* 在小屏幕上改为单列布局 */
  .indexD-kelin ul {
    flex-direction: column;
    gap: 15px;
  }
  .indexD-kelin ul li {
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
}