/* 确保每个 swiper-slide 占容器的 1/3 宽度 */
.blog-swiper .swiper-slide {
    /* width: 33.333% !important; 强制每个 swiper-slide 占 1/3 宽度 */
    box-sizing: border-box; /* 确保宽度计算包含 padding 和 margin */
    padding: 10px; /* 给每个 swiper-slide 加上内边距，防止挤压 */
}

/* 让每个博客项占据 1/3 宽度 */
.blog-swiper .tp-blog-item {
    width: 100%; /* 确保每个项的宽度是 100% */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* 让每个 swiper 项目之间有适当的间隔 */
.blog-swiper .swiper-wrapper {
    display: flex;
    gap: 20px; /* 每个项目之间的间隔 */
    flex-wrap: nowrap; /* 保证不换行 */
}

.blog-swiper .tp-blog-item-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.blog-swiper .tp-blog-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 适应 Swiper 容器 */
.blog-swiper .news-swiper-container {
    width: 100%; /* 设置容器宽度为100% */
    padding: 20px 0; /* 为 news-swiper-container 添加适当的内边距 */
    overflow: hidden; /* 隐藏超出的内容 */
}

/* 控制 Swiper 的按钮样式 */
.blog-swiper .swiper-button-next,
.blog-swiper .swiper-button-prev {
    color: #000; /* 按钮颜色 */
}

/* 固定 头部 */
.tp-header-4-ptb {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999; /* 确保在其他元素之上 */
    background-color: snow;
  }


  /* index 页面svg*/
  /* 默认状态下的图标样式 */
.service-icon {
    transition: filter 0.3s ease;
  }
  
  /* 悬停状态下的图标样式 */
  .tp-service-item:hover .service-icon {
    filter: brightness(0) invert(1); /* 将图片变为白色 */
  }