/* 整体区块上下留白 */
    .cpzx_zb_box {
        padding: 40px 24px 60px 24px;
/*        background-color: var(--color-gray-50); /~ 极浅灰背景，凸显卡片层次 ~/*/
    }
    /* PC端容器尺寸 (复用您的设定) */
    .cpzx_zb_box_con {
        max-width: 1600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        /* padding: 0 24px;  增加左右内边距，让大屏不贴边 */
    }
    .cpzx_zb_box_con_h{
        margin-bottom: 2rem;
    }
    .cpzx_zb_box_con_h1 {
      margin-bottom: 1rem;
      text-align: center;
    }


/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 开始 ==================== */
/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 开始 ==================== */
/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 开始 ==================== */
    /* 外层容器：全屏宽，相对定位基准 */
    .cpzx_zb_banner {
      width: 100%;
      overflow: hidden;            /* 防止意外溢出 */
      position: relative;
      background-color: var(--color-gray-900); /* 最深底，极端情况备用 */
    }

    /* 内容承载盒：相对定位，用于文字绝对定位的锚点 */
    .cpzx_zb_banner_box {
      position: relative;
      width: 100%;
      line-height: 0;              /* 消除图片下方空隙 */
    }

    /* 图片容器：保证图片全宽、自适应高度，同时作为加载失败的背景层 */
    .cpzx_zb_banner_box_con_img {
      width: 100%;
      background-color: var(--color-gray-300); /* 图片加载失败/加载中显示灰色背景，框架不塌陷 */
    }

    /* 图片本身：宽度100%全屏，高度自适应（随屏幕缩放） */
    .cpzx_zb_banner_box_con_img img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: cover;           /* 确保图片覆盖区域，同时保持比例 (可选，但保持auto更自然) */
      /* 注：使用height:auto保证比例，背景色已保障框架不塌陷 */
    }

    /* 文字层 —— 绝对定位，max-width:1600px，居中且适配所有设备 */
    .cpzx_zb_banner_box_con_wenzi {
      position: absolute;
      /* 水平垂直居中（绝对定位经典方案） */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 90%;                  /* 默认留边距，小屏更舒适 */
      max-width: 1600px;           /* 满足最大宽度要求 */
      padding: 1.5rem 2rem;        /* 内边距增加呼吸感 */
      z-index: 5;                  /* 位于图片上方 */
      color: #ffffff;              /* 白色字体，配合深色图片更清晰 */
      text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); /* CSS3 文字阴影，提升可读性 */
      pointer-events: none;        /* 让点击穿透到图片（如果需要按钮可单独设置） */
      /* 内部文字默认左对齐，但整体盒子居中，符合企业风格 */
    }

    /* 内部文字元素重置边距，定制排版 */
    .cpzx_zb_banner_box_con_wenzi_h1 {
      font-size: clamp(2.2rem, 6vw, 4.5rem);  /* CSS3 响应式字体：最小2.2rem，理想6vw，最大4.5rem */
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 0.5rem;
      letter-spacing: -0.02em;
      color: #ffffff;
      text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
      animation: fadeInUp 0.8s ease-out;       /* 轻微入场动画，提升质感 */
    }

    .cpzx_zb_banner_box_con_wenzi_h2 {
      font-size: clamp(1.3rem, 3vw, 2.2rem);
      font-weight: 500;
      margin-bottom: 1rem;
      color: rgba(255, 255, 255, 0.95);
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      letter-spacing: 0.01em;
    }

    .cpzx_zb_banner_box_con_wenzi_p {
      font-size: clamp(1rem, 2vw, 1.3rem);
      line-height: 1.6;
      max-width: 700px;            /* 描述文字限制宽度，更易阅读 */
      color: rgba(255, 255, 255, 0.85);
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      margin-bottom: 0;
    }

    /* 简单淡入动画 (CSS3) */
    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 可选：为文字增加一个极简的装饰条 (呼应品牌色) */
    .cpzx_zb_banner_box_con_wenzi_h1::after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      background: var(--color-primary);
      margin-top: 0.75rem;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(4, 84, 220, 0.3);
    }

    /* ========== 平板适配 (max-width: 1024px) ========== */
    @media (max-width: 1024px) {
      .cpzx_zb_banner_box_con_wenzi {
        width: 92%;
        padding: 1.2rem 1.8rem;
      }
      .cpzx_zb_banner_box_con_wenzi_h1 {
        font-size: clamp(2rem, 7vw, 3.8rem);
      }
      .cpzx_zb_banner_box_con_wenzi_h2 {
        font-size: clamp(1.2rem, 3.5vw, 1.8rem);
      }
      .cpzx_zb_banner_box_con_wenzi_p {
        max-width: 600px;
        font-size: 1.1rem;
      }
      /* 装饰条宽度微调 */
      .cpzx_zb_banner_box_con_wenzi_h1::after {
        width: 70px;
      }
    }

    /* ========== 手机适配 (max-width: 768px) ========== */
    @media (max-width: 768px) {
      .cpzx_zb_banner_box_con_wenzi {
        width: 94%;
        padding: 1rem 1.2rem;
        /* 移动端文字垂直位置可稍作调整，避免太靠上 */
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: left;          /* 保持左对齐，阅读更自然 */
      }
      .cpzx_zb_banner_box_con_wenzi_h1 {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
        margin-bottom: 0.4rem;
      }
      .cpzx_zb_banner_box_con_wenzi_h1::after {
        width: 60px;
        height: 3px;
        margin-top: 0.5rem;
      }
      .cpzx_zb_banner_box_con_wenzi_h2 {
        font-size: clamp(1rem, 5vw, 1.4rem);
        margin-bottom: 0.75rem;
      }
      .cpzx_zb_banner_box_con_wenzi_p {
        font-size: 0.95rem;
        max-width: 100%;
        line-height: 1.5;
      }
      
      /* 若图片在手机端高度不足，背景色确保框架可见 */
      .cpzx_zb_banner_box_con_img {
        min-height: 220px;          /* 保证极小屏下仍有足够空间展示文字背景 */
      }
      .cpzx_zb_banner_box_con_img img {
        object-fit: cover;          /* 移动端图片可能比例不同，cover保持饱满 */
        height: 100%;              /* 配合父级min-height，图片也能填充 */
        min-height: 220px;
      }
    }

    /* 超小屏 (如<480px) 微调 */
    @media (max-width: 480px) {
      .cpzx_zb_banner_box_con_wenzi {
        padding: 0.8rem 1rem;
      }
      .cpzx_zb_banner_box_con_wenzi_h1 {
        font-size: 1.8rem;
      }
      .cpzx_zb_banner_box_con_wenzi_h2 {
        font-size: 1.1rem;
      }
      .cpzx_zb_banner_box_con_wenzi_p {
        font-size: 0.9rem;
      }
      .cpzx_zb_banner_box_con_img {
        min-height: 200px;
      }
    }

    /* 针对图片加载失败：背景灰色已设置，再额外增加一个伪元素提示（可选） */
    .cpzx_zb_banner_box_con_img img::after {
      /* 仅为增强体验，实际上图片加载失败时 alt 会显示，但背景色已保证框架 */
      content: '';
    }

    /* 确保文字在绝对定位下不会遮挡任何重要交互（此处无按钮，无需处理） */
    /* 另外可增加一个半透明遮罩层提升文字对比度（非必须，但可以更优雅） */
    .cpzx_zb_banner_box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 60%);
      /* 左侧稍加深，突出文字，右侧透明，不压暗主体 */
      z-index: 2;
      pointer-events: none;
    }

    /* 调整文字层级高于遮罩 */
    .cpzx_zb_banner_box_con_wenzi {
      z-index: 10;
    }

    /* 兼容性处理：部分老旧浏览器渐变回退 */
    .cpzx_zb_banner_box::before {
      background: rgba(0, 0, 0, 0.15); /* fallback */
      background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.02) 70%);
    }

    /* 如果希望图片加载失败时显示更友好的提示，但此处依靠背景色和alt属性 */
/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 结束 ==================== */
/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 结束 ==================== */
/* ==================== 产品中心 - Banner模块 样式 (电脑优先 · 响应式) 结束 ==================== */

/* =================以下为「产品分类选择」模块新增样式 开始================= */
/* =================以下为「产品分类选择」模块新增样式 开始================= */
/* =================以下为「产品分类选择」模块新增样式 开始================= */


    /* 电脑端容器：flex 换行，左对齐，子项宽度由内容决定 */
    .cpzx_zb_box_con_sel_box {
      display: flex;
      flex-wrap: wrap;
      /* justify-content: flex-start;    左对齐 */
      justify-content: center ;    /* 左对齐 */
      align-items: flex-start;
      gap: 3rem;                   /* 卡片之间的间距 */
      margin-bottom: 1rem;
    }

    /* 子项（卡片外层）—— 宽度自适应内容，无固定宽度 */
    .cpzx_zb_box_con_sel_box_list {
      flex: 0 0 auto;                /* 不拉伸不收缩，宽度根据内部内容决定 */
    }

    /* 卡片链接 —— 无边框无阴影无圆角，底部透明边框预留 */
    .cpzx_zb_box_con_sel_box_list_a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;

      /* background-color: var(--color-white); */
      border: none;
      border-bottom: 2px solid transparent;   /* 透明底部边框，用于悬停显示 */
      border-radius: 0;                       /* 无圆角 */
      
      /* padding: 1.2rem 1.8rem;                 左右padding稍宽，保证内容呼吸 */
      font-weight: 500;
      font-size: 1.1rem;
      color: var(--color-gray-800);
      
      transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      
      width: 100%;
      height: 100%;
      word-break: break-word;
      box-shadow: none;
      line-height: 1.4;
    }

    /* 图标样式 */
    .cpzx_zb_box_con_sel_box_list_a i {
      font-size: 3.5rem;
      width: 1.8rem;
      text-align: center;
      /* color: var(--color-primary); */
      transition: none;              /* 图标无需额外动画，保持干净 */
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* 悬停状态 & 激活状态（选中） */
    .cpzx_zb_box_con_sel_box_list_a:hover,
    .cpzx_zb_box_con_sel_box_list_a.active {
      border-bottom-color: var(--color-primary);  /* 底部主题色边框 */
      color: var(--color-primary);
      transform: translateY(-15px);                 /* 向上移动15px */
      border-bottom: 2px solid var(--color-primary);   /* 透明底部边框，用于悬停显示 */
    }

    /* 激活状态（选中） */
    .cpzx_zb_box_con_sel_box_list_a active {
      border-bottom-color: var(--color-primary);  /* 底部主题色边框 */
      color: var(--color-primary);
      transform: translateY(-15px);                 /* 向上移动15px */
      border-bottom: 2px solid var(--color-primary);   /* 透明底部边框，用于悬停显示 */
    }

    /* ========== 手机端适配：宽度 ≤ 768px，网格布局，每行3列 ========== */
    @media (max-width: 768px) {

      .tyys_h_ico_title_1 {
        font-size: 2rem;
        padding-left: 1.5rem;
      }
      .tyys_h_ico_title_1::before {
        height: 28px;
      }

      /* 手机端切换为 grid，实现 3列 自适应排列 */
      .cpzx_zb_box_con_sel_box {
        display: grid;
        grid-template-columns: repeat(3, auto);   /* 3列，每列宽度由内容决定 */
        justify-content: space-between;           /* 两端对齐，均匀分布 */
        gap: 1rem 0.5rem;                         /* 行间距1rem，列间距0.5rem */
      }

      /* 手机端子项宽度由网格自动分配，无需额外设置 */
      .cpzx_zb_box_con_sel_box_list {
        flex: unset;
        width: auto;
      }

      /* 手机端卡片内边距适当缩小 */
      .cpzx_zb_box_con_sel_box_list_a {
        padding: 1rem 0.25rem;
        font-size: 1rem;
      }

      .cpzx_zb_box_con_sel_box_list_a i {
        font-size: 2.5rem;
        width: 1.6rem;
      }
    }

    /* 极小屏微调 (≤480px)，保持3列，略微减小内边距 */
    @media (max-width: 480px) {
      .cpzx_zb_box_con_sel_box {
        gap: 0.8rem 0.3rem;
      }
      .cpzx_zb_box_con_sel_box_list_a {
        padding: 0.9rem 0.25rem;
        gap: 0.5rem;
      }
      .cpzx_zb_box_con_sel_box_list_a i {
        width: 1.5rem;
      }
    }

    /* 可选：增加一个“选中”状态的演示类（无JS时可手动添加active类测试效果） */
    /* 已在样式中定义 .active 效果，此处无需额外 */
/* =================以下为「产品分类选择」模块新增样式 结束================= */
/* =================以下为「产品分类选择」模块新增样式 结束================= */
/* =================以下为「产品分类选择」模块新增样式 结束================= */

/* ================= 产品中心 · 产品列表 开始 ================= */
/* ================= 产品中心 · 产品列表 开始 ================= */
/* ================= 产品中心 · 产品列表 开始 ================= */

        /* ----- 产品网格容器 —— 使用CSS Grid (CSS3特性) 实现响应式列数 ----- */
        .cpzx_zb_box_con_cplist {
            display: grid;                     /* CSS3: 网格布局 */
            grid-template-columns: repeat(4, 1fr); /* 电脑端默认每行4个，每个等宽 */
            gap: 28px;                         /* 卡片之间的间距 */
            margin-top: 10px;
            margin-bottom: 100px;
        }

        /* 卡片外层盒子 —— 负责背景、圆角、阴影，增强悬浮感 */
        .cpzx_zb_box_con_cplist_box {
            height: 100%;
            /* 让卡片内部的a链接填满整个卡片区域 */
            overflow: visible; /* AI修改：由 hidden 改为 visible。允许子卡片的圆角阴影向外正常扩散，根除四角被切成 90° 直角的漏洞 */
        }

/*        /~ 卡片链接 —— 块级，承载所有交互，背景白色，科技感微阴影 ~/
        .cpzx_zb_box_con_cplist_box_a {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: var(--color-white);
            border-radius: var(--radius-lg);   /~ 大圆角，现代风格 ~/
            box-shadow: var(--shadow-sm);      /~ CSS3: 轻微阴影 ~/
            transition: box-shadow var(--transition-normal), transform var(--transition-normal); /~ CSS3: 过渡动画 ~/
            overflow: hidden;                  /~ 保证圆角裁切图片放大内容 ~/
            color: var(--color-gray-800);
            /~ 保证链接内部文字继承颜色 ~/
        }*/

        /* 卡片链接 —— 块级，承载所有交互，背景白色，科技感微阴影 */
        .cpzx_zb_box_con_cplist_box_a {
            display: flex;
            flex-direction: column;
            height: 100%;
            background-color: var(--color-white);
            border-radius: var(--radius-md);   /* AI修改：改用新配置的 12px 大厂黄金圆角变量 */
            box-shadow: var(--shadow-base);    /* AI修改：改用新配置的大厂双层低空物理阴影，细腻防虚 */
            transition: box-shadow var(--transition-normal), transform var(--transition-normal); /* CSS3: 过渡动画 */
            overflow: hidden;                  /* 保证圆角裁切图片放大内容 */
            color: var(--color-gray-800);
            /* 保证链接内部文字继承颜色 */
        }

        /* 卡片悬停效果：阴影加深，轻微上浮 (提升交互感) */
        .cpzx_zb_box_con_cplist_box_a:hover {
            box-shadow: var(--shadow-lg);      /* CSS3: 更明显的大阴影 */
            transform: translateY(-4px);       /* CSS3: 2D平移，制造悬浮效果 */
            color: inherit;                    /* 防止文字变色 */
        }

        /* ----- 图片容器：严格1:1比例，使用aspect-ratio (CSS3新特性) ----- */
        .cpzx_cplist_box_img {
            width: 100%;
            aspect-ratio: 1 / 1;               /* CSS3: 宽高比固定为1:1，保证图片区域始终正方形 */
            background-color: var(--color-gray-200); /* 图片加载失败/占位时的灰色背景 */
            overflow: hidden;                  /* 配合图片放大效果，裁剪溢出部分 */
            position: relative;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 仅顶部圆角，与卡片一致 */
            padding: 4rem;
        }

        /* 图片本身样式：填充容器、保持比例、添加过渡 */
        .cpzx_cplist_box_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;                 /* CSS3: 图片保持比例覆盖容器，避免变形 */
            display: block;
            background-color: var(--color-gray-200); /* 图片未加载或加载失败时显示灰色，与容器背景叠加也无妨 */
            transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1); /* CSS3: 缓慢线性的放大过渡 (缓动曲线更自然) */
            will-change: transform;            /* CSS3: 优化性能，提前告知浏览器即将变化的属性 */
        }

        /* 悬停时图片均匀线性放大 (符合要求：缓慢且线性) */
        .cpzx_zb_box_con_cplist_box_a:hover .cpzx_cplist_box_img img {
            transform: scale(1.08);            /* CSS3: 放大1.08倍，视觉效果舒适 */
        }

        /* ----- 卡片文字内容区域 (内边距统一，层次分明) ----- */
        .cpzx_cplist_box_h1 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-gray-900);
            margin: 16px 16px 4px 16px;
            line-height: 1.3;
            /* 单行省略（产品名较长时） */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cpzx_cplist_box_h2 {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--color-primary);
            margin: 0 16px 8px 16px;
            letter-spacing: 0.3px;
        }

        .cpzx_cplist_box_p1,
        .cpzx_cplist_box_p2 {
            font-size: 0.875rem;
            color: var(--color-gray-600);
            margin: 0 16px 4px 16px;
            line-height: 1.5;
        }

        .cpzx_cplist_box_p2 {
            margin-bottom: 12px;
            color: var(--color-gray-500);
        }

        /* “查看详情”样式：突出主题色，右箭头 */
        .cpzx_cplist_box_more {
            margin: auto 16px 18px 16px;
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-gray-800);
            /* gap: 6px; */
            /* transition: gap var(--transition-fast), color var(--transition-fast); */
            /* width: fit-content; */
            /* border-bottom: 1.5px solid transparent; */
            text-align: right;
        }

        .cpzx_cplist_box_more i{
          margin-left: 1rem;
          font-weight: 200;
        }

        .cpzx_cplist_box_h1,
        .cpzx_cplist_box_h2,
        .cpzx_cplist_box_p1,
        .cpzx_cplist_box_p2,.cpzx_cplist_box_more {
        white-space: nowrap;      /* 强制文字在一行显示 */
        overflow: hidden;         /* 超出容器部分隐藏 */
        text-overflow: ellipsis;  /* 隐藏部分显示为省略号 (CSS3) */
        max-width: 100%;          /* 关键：限制最大宽度为父容器宽度 */
        }

        /* 悬停时箭头右移，增加下划线 */
        .cpzx_zb_box_con_cplist_box_a:hover .cpzx_cplist_box_more {
            gap: 12px;                         /* CSS3: 改变间距，箭头向右移动 */
            color: var(--color-primary-hover);
            border-bottom-color: var(--color-primary);
        }

        /* 针对卡片内部的flex布局微调：让more自动靠下 */
        .cpzx_zb_box_con_cplist_box_a {
            display: flex;
            flex-direction: column;
        }
        /* 让图片区域保持在顶部，文字自然排列，more通过margin-top:auto实现底部对齐？但更稳健：利用flex的margin */
        .cpzx_cplist_box_more {
            margin-top: auto;                  /* 保证即使内容高度不同，“查看详情”始终位于卡片底部附近 */
        }

        /* 标题区域 (增加板块标题，使用已有的伪元素样式，更符合企业官网) */
        .section-title-wrap {
            margin-bottom: 20px;
        }


        /* ========== 响应式：平板适配 (max-width: 1024px) ========== */
        @media (max-width: 1024px) {
            .cpzx_zb_box_con_cplist {
                grid-template-columns: repeat(2, 1fr); /* 平板每行2个 */
                gap: 20px;
            }
            .cpzx_zb_box_con {
                padding: 0 20px;
            }
            .cpzx_zb_box {
                padding: 30px 0 50px;
            }
        }


        /* 适配移动端时标题大小调整 */
        @media (max-width: 768px) {
            .tyys_h_ico_title_1 {
                font-size: 1.8rem;
            }
            .tyys_h_ico_title_1::before {
                height: 28px;
            }
        }

        /* ========== 响应式：手机适配 (max-width: 768px) ========== */
        @media (max-width: 768px) {

            .tyys_h_ico_title_2{
                font-size: 2rem;
            }
/*            .cpzx_zb_box_con_cplist {
                grid-template-columns: repeat(2, 1fr); /~ 手机每行2个 (符合要求) ~/
                gap: 16px;
            }*/

            /* 1. 强制手机端网格轨道具备收缩制动，不允许被文本撑开 */
                .cpzx_zb_box_con_cplist {
                    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 核心：用 minmax(0, 1fr) 替代 1fr */
                    gap: 12px; /* 适当调小手机端卡片间距，给卡片留出更多呼吸空间 */
                }
            .cpzx_zb_box_con {
                padding: 0 12px;
            }
            .cpzx_zb_box {
                padding: 24px 0 40px;
            }
            /* 手机端卡片内字体微调 */
            .cpzx_cplist_box_h1 {
                font-size: 1rem;
                margin: 12px 12px 2px 12px;
            }
            .cpzx_cplist_box_h2 {
                font-size: 0.8rem;
                margin: 0 12px 6px 12px;
            }
            .cpzx_cplist_box_p1,
            .cpzx_cplist_box_p2 {
                font-size: 0.75rem;
                margin-left: 12px;
                margin-right: 12px;
            }
            .cpzx_cplist_box_more {
                font-size: 0.85rem;
                margin-left: 12px;
                margin-right: 12px;
                margin-bottom: 14px;
            }

            .cpzx_cplist_box_img{
                padding: 1rem;
            }

            .cpzx_cplist_box_more i{
                font-size: 0.75rem;
            }
        }

        /* 极小屏（如宽度<400px）仍然保持2列，但可略微缩小间距 */
        @media (max-width: 480px) {
            .cpzx_zb_box_con_cplist {
                gap: 12px;
            }
        }

        /* 图片加载失败时，灰色背景已经存在，并且aspect-ratio确保框架不塌陷。
           同时img上设置了背景色，双重保障。 */
/* ================= 产品中心 · 产品列表 结束 ================= */
/* ================= 产品中心 · 产品列表 结束 ================= */
/* ================= 产品中心 · 产品列表 结束 ================= */


/* ================= 产品中心 · 翻页 开始 ================= */
/* ================= 产品中心 · 翻页 开始 ================= */
/* ================= 产品中心 · 翻页 开始 ================= */

/* 翻页样式公用 去resrt找 */

/* ================= 产品中心 · 获取支持 开始 ================= */
/* ================= 产品中心 · 获取支持 开始 ================= */
/* ================= 产品中心 · 获取支持 开始 ================= */

/* ---------- 以下为本次新增卡片美化样式（响应式 + Flex布局 + CSS3注释） ---------- */
        


        /* ----- 卡片网格容器：使用 flex + 负边距法（完美兼容，不依赖grid）----- */
        .cpzx_zb_box_con_hqzc {
            display: flex;
            flex-wrap: wrap;           /* 允许换行，实现响应式布局 */

        }

        /* 每个卡片的外层盒子，负责控制宽度占比和间隙 */
        .cpzx_zb_box_con_hqzc_box {
            width: 25%;                /* 电脑端默认一行4个 (4列) */
            padding: 16px;            /* 与负边距配合形成卡片之间的留白间隙 */
        }

        /* 卡片主体 (链接块) - 采用flex列布局，支持等高+底部对齐 */
        .cpzx_zb_box_con_hqzc_box_a {
            display: flex;
            flex-direction: column;    /* 纵向排列：图标行，描述，更多按钮 */
            height: 100%;             /* 继承父容器高度，保证同一行卡片等高 */
            background-color: var(--color-white);
            border-radius: var(--radius-lg);   /* CSS3 圆角特性，柔和边缘 */
            padding: 28px 20px 24px 20px;
            transition: all var(--transition-normal); /* CSS3 过渡动画，平滑变化 */
            box-shadow: var(--shadow-sm);          /* 轻微投影，层次感 */
            border: 1px solid var(--color-gray-100);
            position: relative;
            overflow: hidden;
        }

        /* 卡片悬停效果 - 提升阴影+上浮动效 */
        .cpzx_zb_box_con_hqzc_box_a:hover {
            transform: translateY(-6px);           /* CSS3 2D位移，产生上浮效果 */
            box-shadow: var(--shadow-lg);          /* 阴影加深，突出卡片 */
            border-color: var(--color-gray-200);
        }

        /* 卡片内图标+标题行 (flex水平对齐) */
        .cpzx_zb_box_con_hqzc_box_a_h1 {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-gray-900);
            margin-bottom: 16px;
            letter-spacing: -0.01em;
        }

        /* 图标样式美化 (兼容iconfont或emoji) */
        .cpzx_zb_box_con_hqzc_box_a_h1 .iconfont {
            font-size: 2rem;          /* 图标大小突出 */
            /* color: var(--color-primary); */
            color: #000;
            transition: transform var(--transition-fast);
            font-weight: 300;
        }

        /* 卡片悬停时图标轻微缩放（趣味交互）*/
        .cpzx_zb_box_con_hqzc_box_a:hover .iconfont {
            transform: scale(1.05);    /* CSS3 scale变换，增加动感 */
        }

        /* 描述文字样式 */
        .cpzx_zb_box_con_hqzc_box_a_p1 {
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--color-gray-600);
            margin-bottom: 24px;
            flex: 1;                   /* 占据剩余空间，将“查看更多”推到底部（与margin-top:auto 等效增强）*/
        }

        /* 更多链接样式 - 底部对齐 + 箭头动效 */
        .cpzx_zb_box_con_hqzc_box_a_more {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--color-primary);
            transition: gap var(--transition-fast), color var(--transition-fast);
            margin-top: auto;          /* 保证无论描述长短，更多按钮始终贴底，增强卡片一致性 */
            border-bottom: 1px dashed transparent;
            width: fit-content;
        }

        /* 利用伪元素添加右箭头 → (CSS3 伪元素内容) */
        .cpzx_zb_box_con_hqzc_box_a_more::after {
            content: "→";
            font-family: monospace;
            transition: transform var(--transition-fast);
            display: inline-block;
        }

        /* hover时箭头右移 + 颜色变深 */
        .cpzx_zb_box_con_hqzc_box_a:hover .cpzx_zb_box_con_hqzc_box_a_more {
            gap: 12px;
            color: var(--color-primary-hover);
        }
        .cpzx_zb_box_con_hqzc_box_a:hover .cpzx_zb_box_con_hqzc_box_a_more::after {
            transform: translateX(4px);    /* 箭头轻微右移 */
        }

        /* 焦点可见性（无障碍） */
        .cpzx_zb_box_con_hqzc_box_a:focus-visible {
            outline: 3px solid var(--color-primary);
            outline-offset: 2px;
            border-radius: var(--radius-lg);
        }

        /* ---------- 平板端响应式：宽度≤1024px，每行显示2个卡片 ---------- */
        @media (max-width: 1024px) {
            .cpzx_zb_box_con_hqzc_box {
                width: 50%;               /* 一行2个卡片 */
            }
            /* 平板端内边距微调 */

            .cpzx_zb_box_con_hqzc_box_a {
                padding: 24px 18px;
            }
            .cpzx_zb_box_con_hqzc_box_a_h1 {
                font-size: 1.35rem;
            }
        }

        /* ---------- 手机端响应式：宽度≤768px，每行显示1个卡片 ---------- */
        @media (max-width: 768px) {
            .cpzx_zb_box_con_hqzc_box {
                width: 100%;              /* 一行1个卡片，占据全宽 */
                padding: 0px;
            }

            .cpzx_zb_box_con_hqzc {

            }

            .cpzx_zb_box_con_hqzc_box_a {
                padding: 20px 16px;
            }
            .cpzx_zb_box_con_hqzc_box_a_h1 {
                font-size: 1.3rem;
                gap: 10px;
            }
            .cpzx_zb_box_con_hqzc_box_a_h1 .iconfont {
                font-size: 1.75rem;
            }
            .cpzx_zb_box_con_hqzc_box_a_p1 {
                font-size: 0.875rem;
                margin-bottom: 20px;
            }
        }

        /* 额外小优化：确保卡片内文字不会溢出，长单词自动断行 */
        .cpzx_zb_box_con_hqzc_box_a,
        .cpzx_zb_box_con_hqzc_box_a_h1,
        .cpzx_zb_box_con_hqzc_box_a_p1,
        .cpzx_zb_box_con_hqzc_box_a_more {
            word-break: break-word;
            overflow-wrap: break-word;
        }

        /* 板块标题额外修饰（保留已有样式，同时适配移动端） */
        .section-title-wrap {
            margin-bottom: 24px;
        }
        /* 针对手机标题字体微调 */
        @media (max-width: 768px) {
            .tyys_h_ico_title_1 {
                font-size: 1.5rem;
            }
            .tyys_h_ico_title_1::before {
                height: 28px;
            }
            .tyys_p_ico_title_1 {
                font-size: 0.85rem;
            }
        }
/* ================= 产品中心 · 获取支持 结束 ================= */
/* ================= 产品中心 · 获取支持 结束 ================= */
/* ================= 产品中心 · 获取支持 结束 ================= */

/* ================= 产品中心 · banner 开始 ================= */
/* ================= 产品中心 · banner 开始 ================= */
/* ================= 产品中心 · banner 开始 ================= */

        /* 全屏容器 */
        .css_img_banner_wrap {
            position: relative; 
            width: 100%; 
            height: 600px; /* PC默认大厂黄金高度 */
            
            /* 核心要求4：最大化兼容性弹性盒写法（兼容老旧手机浏览器及IE） */
            display: -webkit-box; /* CSS3旧版规范：WebKit内核（Safari、旧安卓） */
            display: -ms-flexbox;  /* CSS3过渡规范：IE10 */
            display: flex;         /* CSS3标准规范：现代主流浏览器 */
            
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column; /* 垂直轴向排列 */
            
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;    /* 垂直居中 */
            
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center; /* 水平居中 */
            
            overflow: hidden;
            background-color: rgb(160, 174, 192); /* 核心要求4：主题色底色绝对兜底 */
            
            /* CSS3：叠加深色径向渐变，使视觉向中心聚焦并压深四周，突出星空 */
            background-image: -webkit-radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
            background-image: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
        }

        /* 加强版星空层 */
        .css_img_starry_sky {
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%;
            /* CSS3: 使用多层复合背景绘制明暗交错的星点 */
            background-image: 
                radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent),
                radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.8) 100%, transparent),
                radial-gradient(1px 1px at 80% 40%, #fff 100%, transparent),
                radial-gradient(2.5px 2.5px at 10% 80%, rgba(255,255,255,0.6) 100%, transparent),
                radial-gradient(1.5px 1.5px at 90% 10%, #fff 100%, transparent);
            background-size: 300px 300px; /* 控制星点平铺密度 */
            
            /* CSS3: 蒙版技术，中心清晰，四周深邃（补充旧版前缀兼容） */
            -webkit-mask-image: -webkit-radial-gradient(circle at center, black 30%, transparent 90%);
            -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
            mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
            
            /* CSS3: 动画让星空产生微弱的明暗呼吸感 */
            -webkit-animation: css_img_star_blink 4s infinite alternate ease-in-out;
            animation: css_img_star_blink 4s infinite alternate ease-in-out;
        }

        /* 文字层 */
        .css_img_text_overlay {
            z-index: 999; 
            text-align: center; 
            color: #fff; 
            margin-bottom: 50px;
            padding: 0 20px; /* 增加物理安全边距，防止手机屏幕贴边 */
            -webkit-animation: css_img_fadeInUp 1.2s ease-out both;
            animation: css_img_fadeInUp 1.2s ease-out both;
        }
        .css_img_main_title { 
            font-size: 56px; 
            letter-spacing: 12px; /* 增加字间距，营造高端呼吸感 */
            font-weight: 600; 
            margin-bottom: 15px; 
            text-shadow: 0 5px 20px rgba(0,0,0,0.4); 
        }
        .css_img_sub_title { 
            font-size: 20px; 
            letter-spacing: 6px; 
            opacity: 0.9; 
            font-weight: 300; 
            line-height: 1.5;
        }

        /* 变压器生产流程盒 */
        .css_img_process_box { 
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex; 
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; 
            gap: 40px; 
            z-index: 100; 
            -webkit-animation: css_img_fadeInUp 1.2s ease-out 0.3s both; 
            animation: css_img_fadeInUp 1.2s ease-out 0.3s both; 
        }
        
        /* 矢量图标毛玻璃外框 */
        .css_img_vector_icon { 
            width: 95px; 
            height: 95px; 
            border: 1px solid rgba(255,255,255,0.5); 
            border-radius: 18px; 
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex; 
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; 
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center; 
            background: rgba(255,255,255,0.08);
            /* CSS3: 玻璃拟态毛玻璃效果 */
            -webkit-backdrop-filter: blur(10px); 
            backdrop-filter: blur(10px); 
        }
        
        /* 步骤1：铁芯组件 */
        .css_img_step_core::before { 
            content: ''; width: 40px; height: 50px; border: 2px solid #fff; 
            /* CSS3：重复线性渐变，制造层叠硅钢片视觉 */
            background: -webkit-repeating-linear-gradient(90deg, transparent, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 6px);
            background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255,255,255,0.2) 3px, rgba(255,255,255,0.2) 6px); 
        }
        
        /* 步骤2：线圈绕组组件 */
        .css_img_step_winding::before { 
            content: ''; width: 30px; height: 50px; border-radius: 15px; 
            /* CSS3：线性渐变模拟纯白金属圆柱光泽 */
            background: -webkit-linear-gradient(left, #99a 0%, #fff 50%, #99a 100%);
            background: linear-gradient(90deg, #99a 0%, #fff 50%, #99a 100%); 
        }
        
        /* 步骤3：成品总装组件 */
        .css_img_step_final::before { 
            content: ''; width: 45px; height: 45px; background: rgba(255,255,255,0.9); 
            /* CSS3：外阴影模拟多层散热片物理结构 */
            box-shadow: 8px 0 0 -2px rgba(255,255,255,0.5), -8px 0 0 -2px rgba(255,255,255,0.5); 
        }
        
        /* 能量流光线 */
        .css_img_line { width: 60px; height: 2px; background: rgba(255,255,255,0.2); position: relative; overflow: hidden; }
        .css_img_line::after { 
            content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 
            background: -webkit-linear-gradient(left, transparent, #fff, transparent);
            background: linear-gradient(90deg, transparent, #fff, transparent); 
            -webkit-animation: css_img_flow 2s infinite linear; 
            animation: css_img_flow 2s infinite linear; 
        }

        /* ==========================================
           核心要求1：响应式断点适配 - 平板端 (max-width: 1024px)
           ========================================== */
        @media (max-width: 1024px) { 
            .css_img_banner_wrap { 
                height: 500px; /* 柔和缩减整体高度 */
            } 
            .css_img_main_title { 
                font-size: 2.5rem; 
                letter-spacing: 10px;
            } 
            .css_img_sub_title {
                font-size: 18px;
                letter-spacing: 4px;
            }
            .css_img_process_box {
                gap: 25px; /* 缩小元素间距 */
            }
            .css_img_vector_icon {
                width: 85px;  /* 缩减图标视窗尺寸 */
                height: 85px;
            }
            .css_img_line {
                width: 45px;  /* 缩短流光线 */
            }
        }

        /* ==========================================
           核心修改点：响应式断点适配 - 手机端 (max-width: 768px)
           精准匹配 280px 极致矮版高度，重塑整套尺寸链
           ========================================== */
        @media (max-width: 768px) { 
            .css_img_banner_wrap { 
                height: 280px; /* 依照指令修改为 280px 紧凑高度 */
            } 
            .css_img_text_overlay {
                margin-bottom: 18px; /* 关键优化：大幅缩减间距，为下方图表腾出纵向安全空间 */
                padding: 0 15px;
            }
            .css_img_main_title { 
                font-size: 2.5rem; /* 优化：字号下调至 26px，完美契合矮屏比例 */
                letter-spacing: 5px; 
                margin-bottom: 6px;
            } 
            .css_img_sub_title {
                font-size: 12px; /* 优化：缩减至 12px 微型印刷级别，确保手机端绝对不爆行 */
                letter-spacing: 1.5px;
                line-height: 1.4;
            }
            
            /* 图标与连接线的比例级联精缩 */
            .css_img_process_box {
                gap: 12px; /* 缩减横向间距，适配小屏物理面宽 */
            }
            .css_img_vector_icon {
                width: 54px;  /* 关键优化：将外部毛玻璃框精缩至 54px，精致而紧凑 */
                height: 54px;
                border-radius: 10px; /* 减小圆角半径使其比例协调 */
            }
            .css_img_line {
                width: 22px;  /* 缩短流光线 */
            }
            
            /* 54px 视窗内部的变压器矢量图案等比缩小处理 */
            .css_img_step_core::before { 
                width: 22px; height: 28px; 
            }
            .css_img_step_winding::before { 
                width: 16px; height: 28px; border-radius: 8px; 
            }
            .css_img_step_final::before { 
                width: 26px; height: 26px; 
                /* 减小散热片投影位移与阴影浓度 */
                box-shadow: 5px 0 0 -1px rgba(255,255,255,0.5), -5px 0 0 -1px rgba(255,255,255,0.5); 
            }
        }

        /* CSS3动画关键帧：前缀全补全，保障低版本浏览器内核平滑渲染 */
        @-webkit-keyframes css_img_star_blink { from { opacity: 0.5; } to { opacity: 1; } }
        @keyframes css_img_star_blink { from { opacity: 0.5; } to { opacity: 1; } }
        
        @-webkit-keyframes css_img_flow { to { left: 100%; } }
        @keyframes css_img_flow { to { left: 100%; } }
        
        @-webkit-keyframes css_img_fadeInUp { 
            from { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 
            to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 
        }
        @keyframes css_img_fadeInUp { 
            from { opacity: 0; transform: translateY(20px); } 
            to { opacity: 1; transform: translateY(0); } 
        }


/* ================= 产品中心 · banner 结束 ================= */
/* ================= 产品中心 · banner 结束 ================= */
/* ================= 产品中心 · banner 结束 ================= */