/* ----- BANNER 区域 高度280px 主色#e60012----- */
.hero-banner {
    width: 100%;
    height: 280px;
    background: linear-gradient(107deg, #b3000e 0%, #e60012 40%, #cc0010 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 1;
}
.hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://picsum.photos/id/104/1920/280?grayscale');
    background-size: cover;
    background-position: center 30%;
    opacity: 0.18;
    mix-blend-mode: overlay;
    z-index: 0;
}
.hero-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 40%, rgba(230,0,18,0.3) 0%, rgba(0,0,0,0.2) 90%);
    z-index: 1;
}
.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 2rem;
}
.banner-content h1 {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, #FFFFFF, #FFD9DD);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 0.6rem;
}
.banner-content p {
    font-size: 1rem;
    opacity: 0.9;
    font-weight: 400;
}

/* 主内容容器 */
.page{ 
  max-width: 1300px;
  margin: 0 auto; 
}
.main-container {
  max-width: 1300px;
  margin: 0 auto; 
  padding: 5rem 0;
}

/* 大标题区 */
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #e60012;
    letter-spacing: -0.2px;
    border-bottom: 3px solid #e60012;
    display: inline-block;
    padding-bottom: 8px;
}
.section-header .sub {
    color: #5e5e5e;
    margin-top: 0.6rem;
    font-size: 0.9rem;
}

/* 功能按钮组 - 所有数据通过 data-* 属性承载，便于后台循环输出 */
.button-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 1rem;
    margin: 1.8rem 0 2.2rem;
}
.func-btn {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    padding: 0.7rem;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #2c2c2c;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.func-btn:hover {
    background: #ffe5e7;
    border-color: #e60012;
    transform: translateY(-2px);
}
.func-btn.active {
    background: #e60012;
    border-color: #e60012;
    color: white;
    box-shadow: 0 8px 16px -8px 1px solid #dddddd;
}

/* 图片切换区域 */
.dynamic-showcase {
    width: 1200px;
    background: #ffffff;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
    border: 1px solid #dddddd;
    transition: all 0.2s;
    margin: 0 auto;
}
.showcase-img {
    width: 100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;
    display: block;
    background: #f2f2f2;
}
.showcase-caption {
    padding: 1.2rem 2rem 1.8rem;
    background: white;
    border-top: 1px solid #ffe5e7;
}
.showcase-caption .showcase-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #e60012;
    margin-bottom: 0.3rem;
}
.showcase-caption .showcase-desc {
    color: #4a4a4a;
    font-size: 0.95rem;
    line-height: 1.5;
}
      /* 底图区域 + 标题（在底图上方） */
      .bottom-banner {
      position: relative;
      margin-top: 2rem;
      border-radius: 1.5rem;
      overflow: hidden;
      box-shadow: 0 10px 25px -8px rgba(0,0,0,0.1);
  }
  .bottom-banner-img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      display: block;
      filter: brightness(0.75);
      transition: transform 0.4s ease;
  }
  .bottom-banner:hover .bottom-banner-img {
      transform: scale(1.02);
  }
  .bottom-banner-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: linear-gradient(90deg, #e60012 0%, #cc0010 100%);
      padding: 0.9rem 1.5rem;
      text-align: center;
  }
  .bottom-banner-overlay h3 {
      font-size: 1.4rem;
      font-weight: 700;
      color: white;
      letter-spacing: 1px;
      margin: 0;
  }
  .bottom-banner-overlay p {
      font-size: 0.8rem;
      color: #ffdedf;
      margin-top: 0.2rem;
  }
/* 信任标识 */
.trust-badge {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 2rem 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid #f0e0e2;
}
.badge-item {
    font-size: 0.8rem;
    color: #e60012;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .dynamic-showcase {
        width: 100%;
    }
}

@media (max-width: 850px) {
    .main-container {
        padding: 1.2rem;
    }
    .button-grid {
        gap: 0.6rem;
    }
    .func-btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .showcase-img {
        height: 100%;
    }
    .showcase-caption .showcase-title {
        font-size: 1.3rem;
    }
    .hero-banner {
        height: 220px;
    }
    .banner-content h1 {
        font-size: 1.8rem;
    }
}
@media (max-width: 550px) {
    .func-btn {
        font-size: 0.7rem;
        padding: 0.4rem 0.9rem;
    }
}
 

        /* 独立容器 - 可直接嵌入任何页面 */
        .industry-solution {
          max-width: 1280px;
          margin: 0 auto;
          background: #ffffff;
          padding: 2rem 2rem 2.5rem;
          border-radius: 1.5rem;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      }

      /* 大标题样式 */
      .section-header {
          text-align: center;
          margin-bottom: 2rem;
      }
      .section-header h2 {
          font-size: 2rem;
          font-weight: 700;
          color: #e60012;
          letter-spacing: -0.2px;
          border-bottom: 3px solid #e60012;
          display: inline-block;
          padding-bottom: 8px;
      }
      .section-header .sub {
          color: #5e5e5e;
          margin-top: 0.6rem;
          font-size: 0.9rem;
      }

      /* 行业网格：一行4个，共2行，每个卡片有背景底图 */
      .industry-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1.5rem;
          margin: 2rem 0 2rem;
      }
      .industry-card {
          position: relative;
          border-radius: 1.2rem;
          padding: 2rem 0.8rem 1.5rem;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;
          overflow: hidden;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          min-height: 160px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      }
      /* 卡片上的半透明遮罩，保证文字清晰 */
      .industry-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 1.2rem;
          z-index: 1;
          transition: background 0.3s ease;
      }
      .industry-card:hover::before {
          background: rgba(0, 0, 0, 0.65);
      }
      .industry-card h4,
      .industry-card p {
          position: relative;
          z-index: 2;
          color: white;
      }
      .industry-card h4 {
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 0.5rem;
          letter-spacing: 1px;
      }
      .industry-card p {
          font-size: 0.8rem;
          opacity: 0.9;
      }
      .industry-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 16px 28px -12px rgba(230,0,18,0.3);
      }

      /* 每个卡片单独设置不同的背景底图（可根据行业特点配置） */
      .industry-card[data-industry="food"] {
          background-image: url('../xin_img/szh01.png');
      }
      .industry-card[data-industry="medicine"] {
          background-image: url('../xin_img/szh02.png');
      }
      .industry-card[data-industry="fresh"] {
          background-image: url('../xin_img/szh03.png');
      }
      .industry-card[data-industry="biotech"] {
          background-image: url('../xin_img/szh04.png');
      }
      .industry-card[data-industry="service"] {
          background-image: url('../xin_img/szh05.png');
      }
      .industry-card[data-industry="crossborder"] {
          background-image: url('../xin_img/szh06.png');
      }
      .industry-card[data-industry="medical"] {
          background-image: url('../xin_img/szh07.png');
      }
      .industry-card[data-industry="farming"] {
          background-image: url('../xin_img/szh08.png');
      }

      /* 底图区域 */
      .bottom-banner {
          position: relative;
          margin-top: 2rem;
          border-radius: 1.5rem;
          overflow: hidden;
          box-shadow: 0 10px 25px -8px rgba(0,0,0,0.1);
      }
      .bottom-banner-img {
          width: 100%;
          height: 200px;
          object-fit: cover;
          display: block;
          filter: brightness(0.75);
          transition: transform 0.4s ease;
      }
      .bottom-banner:hover .bottom-banner-img {
          transform: scale(1.02);
      }
      .bottom-banner-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          background: linear-gradient(90deg, #e60012 0%, #cc0010 100%);
          padding: 0.9rem 1.5rem;
          text-align: center;
      }
      .bottom-banner-overlay h3 {
          font-size: 1.3rem;
          font-weight: 700;
          color: white;
          letter-spacing: 1px;
          margin: 0;
      }
      .bottom-banner-overlay p {
          font-size: 0.75rem;
          color: #ffdedf;
          margin-top: 0.2rem;
      }

      /* 响应式布局 */
      @media (max-width: 1000px) {
          .industry-grid {
              gap: 1rem;
          }
      }
      @media (max-width: 850px) {
          .industry-solution {
              padding: 1.2rem;
          }
          .industry-grid {
              grid-template-columns: repeat(2, 1fr);
          }
          .bottom-banner-img {
              height: 160px;
          }
          .bottom-banner-overlay h3 {
              font-size: 1rem;
          }
      }
      @media (max-width: 550px) {
          .yy-right-block-fixed {
              display: none;
          }
          .industry-grid {
              grid-template-columns: 1fr;
              padding: 15px;
          }
          .section-header h2 {
              font-size: 1.5rem;
          }
      }