* {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }



    :root {

      --side: 8%;

    }



    body {

      font-family: "Microsoft YaHei", Arial, sans-serif;

      background: #ffffff;

      color: #333;

      line-height: 1.7;

    }



    img {

      width: 100%;

      display: block;

      object-fit: cover;

    }



    .page {

      max-width: 1400px;

      margin: 0 auto;

      background: #fff;

    }



    /* ====== 顶部 HERO 核心重构 ====== */

    .hero {

      position: relative;

      width: 100%;

      height: 600px;

      background: #f4f4f4;

      overflow: hidden;

    }



    /* 底层背景图容器 */

    .hero-img-container {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      z-index: 1;

    }



    .hero-img-container a,

    .hero-img-container img {

      display: block;

      width: 100%;

      height: 100%;

      object-fit: cover;

    }



    /* 右侧悬浮定位容器 */

    .hero-right {

      position: absolute;

      right: var(--side);

      top: 50%;

      transform: translateY(-50%);

      width: 380px; /* 紧凑型精细宽度控制 */

      z-index: 2;

      display: flex;

      flex-direction: column;

      gap: 16px;

    }



    /* 主文字卡片 */

    .hero-content {

      background: rgba(255, 255, 255, 0.94);

      backdrop-filter: blur(18px);

      -webkit-backdrop-filter: blur(18px);

      padding: 30px 24px;

      border-left: 6px solid #d71920;

      border-radius: 4px;

      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

    }



    .hero-content h1 {

      margin: 0 0 14px;

      line-height: 1.25;

      font-weight: 800;

    }



    .hero-content h1 a {

      text-decoration: none;

      color: #000000;

    }



    .hero-content h1 span.brand-red {

      color: #e03e2d;

      font-size: 32px;

      display: block;

      margin-bottom: 4px;

    }



    .hero-content h1 span.title-main {

      font-size: 26px;

      color: #1a1a1a;

    }



    .hero-content p {

      font-size: 13px;

      line-height: 1.6;

      color: #444;

    }



    /* 互动行动按钮 */

    .hero-cta {

      background: #ffffff;

      padding: 14px 20px;

      border: 1px solid #e0e0e0;

      border-left: 6px solid #d71920;

      border-radius: 4px;

      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

      display: flex;

      align-items: center;

      justify-content: space-between;

      font-size: 15px;

      font-weight: 700;

      color: #d71920;

      text-decoration: none;

      width: 100%;

      cursor: pointer;

      transition: all 0.3s ease;

    }



    .hero-cta::after {

      content: "→";

      font-size: 18px;

      transition: transform 0.3s;

    }



    .hero-cta:hover {

      background: #d71920;

      color: #fff;

      border-color: #d71920;

    }



    .hero-cta:hover::after {

      transform: translateX(6px);

    }



    /* ====== 红色分隔带 ====== */

    .red-divider {

      background: #d71920;

      color: #fff;

      padding: 34px var(--side);

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 30px;

    }



    .red-divider h2 {

      font-size: 30px;

      font-weight: 700;

      letter-spacing: 1px;

      white-space: nowrap;

      flex-shrink: 0;

    }



    .red-divider h2 span {

      font-size: 60px;

    }



    .red-divider p {

      font-size: 16px;

      max-width: 580px;

      opacity: 0.95;

    }



    .red-divider a {

      text-decoration: none;

      color: #ffffff;

    }



    /* ====== 通用通栏板块 ====== */

    .section {

      padding: 80px var(--side);

      background: #fff;

    }



    .section-grid {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 58px;

      align-items: center;

    }



    .section-text .tag {

      display: inline-block;

      color: #d71920;

      font-weight: 700;

      font-size: 15px;

      margin-bottom: 12px;

      letter-spacing: 1px;

    }



    .section-text h2 {

      font-size: 34px;

      color: #222;

      margin-bottom: 22px;

      line-height: 1.3;

    }



    .section-text p {

      font-size: 16px;

      color: #555;

      margin-bottom: 18px;

    }



    .section-text ul {

      list-style: none;

      margin-top: 22px;

    }



    .section-text li {

      position: relative;

      padding-left: 24px;

      margin-bottom: 12px;

      font-size: 15px;

      color: #444;

    }



    .section-text li::before {

      content: "";

      position: absolute;

      left: 0;

      top: 10px;

      width: 8px;

      height: 8px;

      background: #d71920;

      border-radius: 50%;

    }



    .section-image {

      border-radius: 6px;

      overflow: hidden;

      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.14);

      background: #eee;

    }



    .section-image img {

      height: 380px;

      width: 100%;

      object-fit: cover;

    }



    /* 02 处理工艺流程卡片 */

    .process-flow {

      display: grid;

      grid-template-columns: repeat(5, 1fr);

      gap: 18px;

      margin-top: 40px;

    }



    .process-card {

      background: #fff;

      border: 1px solid #eee;

      padding: 28px 20px;

      text-align: center;

      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

    }



    .process-card .num {

      width: 42px;

      height: 42px;

      margin: 0 auto 16px;

      background: #d71920;

      color: #fff;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      font-weight: 700;

      font-size: 16px;

    }



    .process-card h3 {

      font-size: 16px;

      margin-bottom: 10px;

      color: #222;

      font-weight: 700;

    }



    .process-card p {

      font-size: 13px;

      color: #666;

      line-height: 1.5;

    }



    /* 04 应用场景卡片 */

    .applications {

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 24px;

      margin-top: 40px;

    }



    .app-card {

      background: #fff;

      border-radius: 4px;

      overflow: hidden;

      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);

      transition: 0.3s;

      display: flex;

      flex-direction: column;

    }



    .app-card:hover {

      transform: translateY(-6px);

    }



    .app-card img {

      height: 220px;

      width: 100%;

      object-fit: cover;

    }



    .app-card-content {

      padding: 24px;

      flex-grow: 1;

    }



    .app-card-content h3 {

      font-size: 18px;

      margin-bottom: 12px;

      color: #222;

      font-weight: 700;

    }



    .app-card-content p {

      font-size: 14px;

      color: #666;

      line-height: 1.6;

    }



    /* ====== 响应式移动端适配 ====== */

    @media (max-width: 1024px) {

      :root { --side: 5%; }



      .hero {

        height: 550px;

      }



      .hero-right {

        right: 4%;

        width: 350px;

      }



      .section-grid,

      .process-flow,

      .applications {

        grid-template-columns: 1fr 1fr;

      }

    }



    @media (max-width: 768px) {

      :root { --side: 6%; }



      /* 解绑绝对定位，防止内容遮挡图片，保证移动端可读性 */

      .hero {

        display: flex;

        flex-direction: column;

        height: auto;

      }



      .hero-img-container {

        position: relative;

        height: 320px;

      }



      .hero-right {

        position: relative;

        width: 100%;

        right: 0;

        top: 0;

        transform: none;

        padding: 32px var(--side);

      }



      .hero-content {

        background: #ffffff;

        padding: 0;

        border-radius: 0;

        box-shadow: none;

        border-left: none;

      }



      .hero-content h1 span.brand-red {

        font-size: 28px;

      }



      .hero-content h1 span.title-main {

        font-size: 22px;

      }



      .section {

        padding: 56px var(--side);

      }



      .section-grid,

      .process-flow,

      .applications {

        grid-template-columns: 1fr;

      }



      .red-divider {

        flex-direction: column;

        align-items: flex-start;

        padding: 28px var(--side);

        gap: 14px;

      }



      .red-divider h2 span {

        font-size: 42px;

      }



      .section-image img {

        height: 280px;

      }

    }