@charset "utf-8";

/* =================未分类 未定义================= */
/* =================未分类 未定义================= */
/* =================未分类 未定义================= */
.main-content{
    position: relative;
}

.sy_zb_box{
    margin-top: 40px;
}

/* ---------- 整体容器微调 ---------- */
.sy_zb_box_con {
  margin: 0 auto;
  max-width: 1600px;
  /* 在已有max-width居中的基础上，增加左右安全内边距 */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* 标题区域底部留白，与卡片群拉开距离 */
.sy_zb_box_con_h {
  margin: 3.5rem 0rem;
}
/* =================未分类 未定义================= */
/* =================未分类 未定义================= */
/* =================未分类 未定义================= */

/* ============================================ */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 开始    */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 开始    */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 开始    */
/* ============================================ */
/* ============================================ */
/*  Banner 轮播定制样式 (含三层文本及父容器)    */
/* ============================================ */

.sy_banner_cj_a {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-gray-100);
    user-select: none;
}

.sy_banner_cj_a_b { width: 100%; }

.sy_banner_cj_a_b_c {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* 电脑端默认宽高比 2:1 (基准) */
.sy_banner_cj_a_b_c_img {
    flex: 0 0 100%;
    width: 100%;
    position: relative;
    aspect-ratio: 2 / 1;
}

.sy_banner_cj_a_b_c_img_box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-gray-300);
    overflow: hidden;
}

.sy_banner_cj_a_b_c_img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
    background-color: var(--color-gray-300);
}

.sy_banner_cj_a_b_c_img_box img.img-load-error {
    opacity: 0 !important;
}

/* ----- 文字父容器：电脑端最大宽度1600px + 居中 ----- */
.banner-caption-wrapper {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    /* display: flex; */
    /* ★ 核心修改：水平垂直居中 ★ */
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    pointer-events: none;
    z-index: 5;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

/* 文字卡片 */
.banner-text-card {
    max-width: 50%;
    padding: 2rem 2.5rem;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border-left: 5px solid var(--color-primary);
    color: #fff;
    pointer-events: auto;
    transition: transform 0.2s;
}

/* 主标题 */
.banner-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    letter-spacing: 1px;
}

/* 副标题 */
.banner-sub-title {
    font-size: 1.6rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.banner-sub-title::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

/* 简要描述 */
.banner-desc {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 600px;
}

/* ========== 响应式：平板适配 (max-width: 1024px) ========== */
@media (max-width: 1024px) {
    .sy_banner_cj_a_b_c_img {
        aspect-ratio: 3 / 2;
    }

    .banner-caption-wrapper {
        padding: 2rem 2rem;
        /* 居中已继承，无需额外设置 */
    }

    .banner-text-card {
        max-width: 65%;
        padding: 1.75rem 2rem;
        border-radius: var(--radius-lg);
    }

    .banner-main-title {
        font-size: 2.2rem;
        margin-bottom: 0.6rem;
    }

    .banner-sub-title {
        font-size: 1.3rem;
        margin-bottom: 0.75rem;
    }

    .banner-desc {
        font-size: 1rem;
        max-width: 90%;
    }

    .banner-arrow {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 2rem;
    }
    .arrow-left { left: 1.2rem; }
    .arrow-right { right: 1.2rem; }

    .banner-dots {
        bottom: 1.2rem;
        gap: 0.65rem;
        padding: 0.4rem 0.8rem;
    }
    .banner-dot {
        width: 9px;
        height: 9px;
    }
    .banner-dot.active { width: 24px; }
}

/* ========== 响应式：手机适配 (max-width: 768px) ========== */
@media (max-width: 768px) {
    .sy_banner_cj_a_b_c_img {
        aspect-ratio: 1 / 2;
    }

    .banner-caption-wrapper {
        display: flex;
        padding: 1.5rem;
        /* ★ 手机端同样保持居中 ★ */
        align-items: center;      /* 原来为 flex-end，现改为 center 实现垂直居中 */
        justify-content: center;  /* 水平居中（与基础一致） */
    }

    .banner-text-card {
        max-width: 95%;
        width: 100%;
        padding: 1.25rem 1.5rem;
        border-radius: var(--radius-md);
        border-left-width: 4px;
    }

    .banner-main-title {
        font-size: 1.7rem;
        margin-bottom: 0.5rem;
    }

    .banner-sub-title {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
        gap: 0.5rem;
    }
    .banner-sub-title::before {
        width: 20px;
        height: 3px;
    }

    .banner-desc {
        font-size: 0.9rem;
        max-width: 100%;
    }

    .banner-arrow {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.8rem;
    }
    .arrow-left { left: 0.8rem; }
    .arrow-right { right: 0.8rem; }

    .banner-dots {
        bottom: 1rem;
        gap: 0.5rem;
        padding: 0.4rem 0.8rem;
    }
    .banner-dot {
        width: 8px;
        height: 8px;
    }
    .banner-dot.active { width: 22px; }
}

/* ----- 左右箭头 (通用样式保持不变) ----- */
.banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-800);
    font-size: 2.2rem;
    font-weight: 300;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    cursor: pointer;
    z-index: 20;
    border: 1px solid rgba(255,255,255,0.5);
}

.banner-arrow:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-lg);
    transform: translateY(-50%) scale(1.05);
}
.banner-arrow:active { transform: translateY(-50%) scale(0.98); background: var(--color-primary-active); }
.banner-arrow.disabled { opacity: 0.3; pointer-events: none; background: rgba(200,200,200,0.6); color: #666; box-shadow: none; }
.arrow-left { left: 1.5rem; }
.arrow-right { right: 1.5rem; }

/* 指示点 (通用样式保持不变) */
.banner-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 15;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 40px;
}
.banner-dot {
    width: 10px;
    height: 10px;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.banner-dot.active { background-color: var(--color-primary); width: 28px; border-color: white; box-shadow: 0 0 8px var(--color-primary); }
.banner-dot:hover { background-color: var(--color-primary-hover); }
/* ============================================ */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 结束    */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 结束    */
/*  首页 - Banner 轮播定制样式 (新增，满足细节排版) 结束    */
/* ============================================ */

/* ================== 首页 - 新闻模块专属样式（含图片容错强化）开始 ================== */
/* ================== 首页 - 新闻模块专属样式（含图片容错强化）开始 ================== */
/* ================== 首页 - 新闻模块专属样式（含图片容错强化）开始 ================== */

      
        /* ========== 1. 整体模块容器 & 科技感氛围 ========== */
        .sy_news_module {
            max-width: 1600px;
/*            margin: 2.5rem auto;
            padding: 0 2rem;*/
            font-family: var(--font-family, system-ui, -apple-system, 'Segoe UI', sans-serif);
        }

        /* 板块头部标题（品牌标识区域） */
        .sy_news_header {
            margin-bottom: 0.5rem;
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.8rem;
        }
        .sy_news_title_group {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .sy_news_badge {
            display: none!important;
            font-size: 0.85rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            color: var(--color-primary, #0454dc);
            background: rgba(4, 84, 220, 0.08);
            /* display: inline-block; */
            padding: 0.2rem 1rem;
            border-radius: 30px;          /* CSS3 圆角 */
            width: fit-content;
        }
        .sy_news_main_title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--color-gray-900, #111827);
            line-height: 1.2;
            letter-spacing: -0.02em;
        }
        .sy_news_main_title span {
            background: linear-gradient(135deg, #0454dc, #3b82f6); /* CSS3 渐变文本 */
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
        }
        .sy_news_more_link {
            display: none;
            font-size: 0.9rem;
            color: var(--color-primary, #0454dc);
            /* display: inline-flex; */
            align-items: center;
            gap: 0.3rem;
            border-bottom: 1px dashed var(--color-gray-300);
            transition: gap 0.2s ease;
        }
        .sy_news_more_link:hover {
            gap: 0.6rem;
            color: var(--color-primary-hover, #0347b8);
        }

        /* ========== 2. 双栏核心布局 (flex 左侧重点 + 右侧列表) ========== */
        .sy_news_grid {
            display: flex;
            flex-wrap: wrap;
            gap: 2.2rem;   /* 电脑端左右模块间距 */
        }

        /* 左侧重点新闻区块 (占据显著比例) */
        .sy_news_featured {
            flex: 1;
            min-width: 280px;
        }

        /* 右侧列表区块 (5篇文章) */
        .sy_news_list_wrapper {
            flex: 1;
            min-width: 260px;
            display: flex;
            flex-direction: column;
        }

        /* ----- 左侧重点新闻卡片 (现代科技大卡片) ----- */
        .sy_news_featured_card {
            background: var(--color-white, #ffffff);
            border-radius: 10px;                 /* CSS3 大圆角 */
            overflow: hidden;
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0,0,0,0.03);
            transition: transform 0.25s ease, box-shadow 0.3s ease; /* CSS3 过渡 */
            border: 1px solid var(--color-gray-200, #e5e7eb);
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .sy_news_featured_card:hover {
            transform: translateY(-4px);         /* CSS3 2D位移 */
            box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.12);
        }

        /* 重点新闻图片容器 16:9 比例 + 加载容错灰色背景 */
        .sy_news_featured_img {
            width: 100%;
            aspect-ratio: 16 / 9;                /* CSS3 宽高比 */
            background-color: var(--color-gray-200, #e5e7eb);
            overflow: hidden;
            position: relative;
        }
        .sy_news_featured_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;                  /* 图片填充，不变形 */
            display: block;
            transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }
        .sy_news_featured_card:hover .sy_news_featured_img img {
            transform: scale(1.03);
        }
        /* 图片加载失败提示 (伪元素+模糊滤镜) */
        .sy_news_featured_img.img-error::after {
            content: "⚠️ 图片加载失败";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(6px);         /* CSS3 背景模糊 */
            color: white;
            font-size: 0.85rem;
            padding: 0.2rem 1rem;
            border-radius: 60px;
            white-space: nowrap;
            z-index: 2;
        }
        .sy_news_featured_img.img-error img {
            opacity: 0.5;
        }

        /* 重点新闻文字内容区 */
        .sy_news_featured_content {
            padding: 1.8rem 2rem 1.8rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .sy_news_featured_title {
            font-size: 1.8rem;
            font-weight: 700;
            line-height: 1.3;
            color: var(--color-gray-900, #111827);
            margin-bottom: 0.8rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;              /* CSS3 多行省略 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .sy_news_featured_desc {
            font-size: 1rem;
            line-height: 1.55;
            color: var(--color-gray-600, #4b5563);
            margin-bottom: 1.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .sy_news_featured_meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.8rem;
            margin-top: auto;
            padding-top: 1rem;
            border-top: 1px solid var(--color-gray-200, #e5e7eb);
        }
        .sy_news_featured_time {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.9rem;
            color: var(--color-gray-500, #6b7280);
        }
        .sy_news_featured_more a {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
            color: var(--color-primary, #0454dc);
            background: transparent;
            padding: 0.3rem 0.9rem;
            border-radius: 40px;
            transition: all 0.2s ease;
            border: 1px solid transparent;
        }
        .sy_news_featured_more a::after {
            content: "→";
            transition: transform 0.2s ease;
        }
        .sy_news_featured_more a:hover {
            background: rgba(4, 84, 220, 0.08);
            gap: 0.8rem;
        }
        .sy_news_featured_more a:hover::after {
            transform: translateX(4px);          /* CSS3 位移动画 */
        }

        /* ========== 3. 右侧文章列表 (极简下边框风格，无卡片背景) ========== */
        .sy_news_list_item {
            display: flex;
            gap: 1rem;
            padding-bottom: 1.2rem;
            margin-bottom: 1.2rem;
            border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
            transition: all 0.2s;
            background: transparent;
        }
        .sy_news_list_item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        /* 右侧缩略图容器 */
        .sy_news_list_img {
            flex-shrink: 0;
            width: 110px;
            background-color: var(--color-gray-200, #e5e7eb);
            border-radius: 14px;               /* 图片圆角 */
            overflow: hidden;
            position: relative;
        }
        .sy_news_list_img img {
            width: 100%;
            height: auto;
            aspect-ratio: 4 / 3;
            object-fit: cover;
            display: block;
            transition: transform 0.25s ease;
        }
        .sy_news_list_item:hover .sy_news_list_img img {
            transform: scale(1.03);
        }
        /* 右侧图片加载失败提示 */
        .sy_news_list_img.img-error::after {
            content: "📷 失效";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);        /* CSS3 模糊 */
            color: white;
            font-size: 0.7rem;
            padding: 0.15rem 0.6rem;
            border-radius: 30px;
            white-space: nowrap;
            z-index: 2;
        }
        .sy_news_list_img.img-error img {
            opacity: 0.5;
        }

        /* 右侧文字内容区域 */
        .sy_news_list_content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .sy_news_list_inner {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .sy_news_list_title {
            font-size: 1rem;
            font-weight: 650;
            line-height: 1.4;
            color: var(--color-gray-900, #111827);
            margin-bottom: 0.4rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .sy_news_list_desc {
            font-size: 0.85rem;
            line-height: 1.45;
            color: var(--color-gray-600, #6b7280);
            margin-bottom: 0.6rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* 底部操作行：时间与查看详情水平排布 */
        .sy_news_list_foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: auto;
        }
        .sy_news_list_time {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.75rem;
            color: var(--color-gray-500, #9ca3af);
        }
        .sy_news_list_more a {
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            font-size: 0.75rem;
            font-weight: 500;
            color: var(--color-primary, #0454dc);
            background: transparent;
            padding: 0.2rem 0.5rem;
            border-radius: 30px;
            transition: all 0.2s;
        }
        .sy_news_list_more a::after {
            content: "→";
            transition: transform 0.2s ease;
        }
        .sy_news_list_more a:hover {
            background: rgba(4, 84, 220, 0.08);
            gap: 0.4rem;
        }
        .sy_news_list_more a:hover::after {
            transform: translateX(3px);
        }

        /* ========== 4. 响应式布局：平板适配 (max-width: 1024px) ========== */
        @media (max-width: 1024px) {
            .sy_news_module {
                
                margin: 2rem auto;
            }
            .sy_news_grid {
                gap: 1.8rem;               /* 平板缩小左右间距 */
            }
            .sy_news_featured_title {
                font-size: 1.6rem;         /* 平板适当缩小标题 */
            }
            .sy_news_featured_content {
                padding: 1.4rem 1.5rem;
            }
            .sy_news_list_img {
                width: 95px;               /* 平板右侧缩略图略微缩小 */
            }
            .sy_news_list_title {
                font-size: 0.95rem;
            }
            .sy_news_list_desc {
                font-size: 0.8rem;
            }
            .sy_news_main_title {
                font-size: 1.9rem;
            }
        }

        /* ========== 5. 响应式布局：手机适配 (max-width: 768px) ========== */
        @media (max-width: 768px) {
            .sy_news_module {
                
                margin: 1.5rem auto;
            }
            .sy_news_grid {
                flex-direction: column;    /* 手机端改为垂直单列 */
                gap: 2rem;
            }
            .sy_news_featured, .sy_news_list_wrapper {
                flex: 1 1 100%;
            }
            /* 左侧重点新闻手机端内边距缩小 */
            .sy_news_featured_content {
                padding: 1.2rem 1.2rem 1.4rem;
            }
            .sy_news_featured_title {
                font-size: 1.4rem;
                margin-bottom: 0.5rem;
            }
            .sy_news_featured_desc {
                font-size: 0.95rem;
                -webkit-line-clamp: 3;
            }
            .sy_news_featured_time {
                font-size: 0.85rem;
            }
            /* 右侧列表：每一个条目改为图片在上方、文字在下方（垂直布局） */
            .sy_news_list_item {
                flex-direction: column;
                gap: 0.8rem;
                padding-bottom: 1.2rem;
                margin-bottom: 1.2rem;
            }
            .sy_news_list_img {
                width: 100%;
                max-width: 100%;
                border-radius: 16px;
            }
            .sy_news_list_img img {
                aspect-ratio: 16 / 9;       /* 手机端图片采用横版比例，更协调 */
                width: 100%;
            }
            .sy_news_list_title {
                font-size: 1.05rem;
            }
            .sy_news_list_desc {
                font-size: 0.9rem;
            }
            .sy_news_list_time {
                font-size: 0.8rem;
            }
            .sy_news_list_more a {
                font-size: 0.8rem;
            }
            .sy_news_main_title {
                font-size: 1.6rem;
            }
            .sy_news_badge {
                font-size: 0.75rem;
            }
            /* 头部更多链接在手机端稍微调整 */
            .sy_news_more_link {
                font-size: 0.85rem;
            }

            .sy_zb_box_con_h{
                margin: 2rem 0rem;
            }
        }

        /* ========== 6. 极小屏深微调 (≤480px) ========== */
        @media (max-width: 480px) {
            .sy_news_featured_content {
                padding: 1rem 1rem 1.2rem;
            }
            .sy_news_featured_title {
                font-size: 1.25rem;
            }
            .sy_news_list_title {
                font-size: 1rem;
            }
            .sy_news_featured_meta {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.6rem;
            }
            .sy_news_list_foot {
                flex-wrap: wrap;
                gap: 0.4rem;
            }
            .sy_news_main_title {
                font-size: 1.4rem;
            }
        }

        /* ========== 7. 辅助样式 & 图标占位 & 无障碍 ========== */
        /* 小图标使用 emoji 占位，后期替换为阿里巴巴 iconfont 只需修改类名 */
        .icon-emoj {
            font-style: normal;
            display: inline-block;
        }
        .sy_news_featured_time i, 
        .sy_news_list_time i {
            margin-right: 0.2rem;
            font-size: 0.85rem;
        }
        /* 全局焦点可见性（无障碍） */
        :focus-visible {
            outline: 2px solid var(--color-primary, #0454dc);
            outline-offset: 2px;
            border-radius: 6px;
        }
        /* 图片加载错误标记（配合js的classList使用） */
        .img-error {
            /* 仅用作状态标记，具体样式由父级伪元素实现 */
        }


/* ================== 首页 - 新闻模块专属样式（含图片容错强化）结束 ================== */
/* ================== 首页 - 新闻模块专属样式（含图片容错强化）结束 ================== */
/* ================== 首页 - 新闻模块专属样式（含图片容错强化）结束 ================== */
/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 开始 ========== */
/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 开始 ========== */
/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 开始 ========== */

        /* 外层容器：控制整体布局和溢出 */
        .gymk_ydhk_cj_a {
            width: 100%;
            overflow: hidden;
            position: relative; /* 为箭头定位做准备 */
            padding: 1rem 0;
            max-width: 100%; /* 电脑端容器限制最大宽度，居中显示 */
            margin: 0 auto; /* 电脑端容器限制最大宽度，居中显示 */
        }

        .gymk_ydhk_cj_a_b {
            width: 100%;
        }

        .gymk_ydhk_cj_a_b_c {
            width: 100%;
            overflow: hidden; /* 隐藏超出部分 */
        }

        /* 轮播滚动容器：横向排列所有卡片 */
        .gymk_ydhk_cj_a_b_c_scroll {
            display: flex;
            flex-wrap: nowrap; /* 禁止换行 */
            transition: transform 0.3s ease; /* 滑动过渡动画 */
        }

        /* 卡片基础样式 */
        .gymk_ydhk_cj_a_b_c_box {
            flex: 0 0 auto; /* 固定宽度，不收缩不拉伸 */
            padding: 0.5rem; /* 卡片间距 */
            box-sizing: border-box;
            width: 33.333333%; /* 电脑端每次显示3个卡片 */
        }

        /* 卡片内部容器：美化样式 */
        .gymk_ydhk_cj_a_b_c_box a {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: var(--radius-lg); /* 复用重置样式的圆角变量 */
            box-shadow: var(--shadow-md); /* 复用重置样式的阴影变量 */
            overflow: hidden;
            transition: all var(--transition-normal); /* 复用过渡变量 */
            background-color: var(--color-white);
        }

        /* 卡片hover效果 */
        .gymk_ydhk_cj_a_b_c_box a:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-2px);
        }

        /* 图片容器：核心响应式尺寸控制 *//* 电脑端图片宽高比2:1，高度用rem计算 */
        .gymk_ydhk_cj_a_b_c_box_img {
            width: 100%;
            position: relative; /* 图片加载失败时的占位 */
            background-color: var(--color-gray-200); /* 图片加载失败背景色 */
            height: 20rem; /* 20rem = 320px，宽度100%，实现2:1 */
        }

        /* 图片样式：保证宽高比，防止塌陷 */
        .gymk_ydhk_cj_a_b_c_box_img img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片等比填充 */
        }

        /* 图片加载失败提示 */
        .gymk_ydhk_cj_a_b_c_box_img::after {
            content: "图片加载失败";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--color-gray-500);
            font-size: 0.875rem;
            display: none; /* 默认隐藏 */
        }

        /* 图片加载失败时显示提示 */
        .gymk_ydhk_cj_a_b_c_box_img img.error + ::after {
            display: block;
        }

        /* 卡片文字内容区 */
        .gymk_ydhk_cj_a_b_c_box_h1 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-gray-800);
            padding: 0.75rem 1rem 0.25rem;
            line-height: var(--line-height-tight);
        }

        .gymk_ydhk_cj_a_b_c_box_p {
            font-size: 0.875rem;
            color: var(--text-light);
            padding: 0 1rem 0.5rem;
            line-height: var(--line-height-normal);
        }

        .gymk_ydhk_cj_a_b_c_box_span {
            font-size: 0.75rem;
            color: var(--color-primary);
            padding: 0 1rem 1rem;
            display: block;
        }

        /* 左右切换箭头：PC端显示，移动端隐藏 */
        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid var(--border-light);
            display: flex;/* 显示箭头 */
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all var(--transition-fast);
        }

        .carousel-arrow:hover {
            background-color: var(--color-primary);
            color: var(--color-white);
            border-color: var(--color-primary);
        }

        .arrow-left {
            left: 1rem;
        }

        .arrow-right {
            right: 1rem;
        }


        /* 2. 平板 - 768px ~ 1023px */
        @media (max-width: 1024px) {
            /* 平板隐藏箭头（按需求归为移动端） */
            .carousel-arrow {
                display: none;
            }

            /* 平板每次显示2个卡片 */
            .gymk_ydhk_cj_a_b_c_box {
                width: 50%;
            }

            /* 平板图片宽高比过渡：1:1（可根据需求调整） */
            .gymk_ydhk_cj_a_b_c_box_img {
                height: 10rem; /* 10rem = 160px */
            }
        }

        /* ========== 响应式媒体查询 - 3个尺寸 ========== */
        /* 1. 移动端 (手机) - 最大宽度768px */
        @media (max-width: 768px) {
            /* 隐藏箭头 */
            .carousel-arrow {
                display: none;
            }

            /* 每次显示1个卡片 */
            .gymk_ydhk_cj_a_b_c_box {
                width: 100%;
            }

            /* 移动端图片宽高比1:2，高度用rem计算（基于1rem=16px） */
            .gymk_ydhk_cj_a_b_c_box_img {
                height: 16rem; /* 16rem = 256px，宽度100%，实现1:2 */
            }
        }

/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 结束 ========== */
/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 结束 ========== */
/* ========== 首页-解决方案 卡片轮播(移动滑块) 样式 结束 ========== */

/* =======首页-产品中心(子块) - 卡片展示区 开始 ======= */
/* =======首页-产品中心(子块) - 卡片展示区 开始 ======= */
/* =======首页-产品中心(子块) - 卡片展示区 开始 ======= */
/* ============================================
   卡片网格布局 —— 使用Grid，现代且稳定
   ============================================ */
.sy_zb_box_con_listbox {
  display: grid;
  /* 电脑端默认：一行四列，均等分 */
  grid-template-columns: repeat(4, 1fr);
  /* 列间隙与行间隙，保持呼吸感 */
  gap: 2rem;
  margin-top: 1.5rem;
}

/* ---------- 平板适配 (宽度 ≤ 1024px) ---------- */
@media (max-width: 1024px) {
  .sy_zb_box_con_listbox {
    /* 平板显示两列，避免内容过度挤压 */
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
  }
  
  /* 适当减小容器内边距，留出更多内容空间 */
  .sy_zb_box_con {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

/* ---------- 手机适配 (宽度 ≤ 768px) ---------- */
@media (max-width: 768px) {
  .sy_zb_box_con_listbox {
    /* 移动端单列排布，卡片宽度充足，阅读舒适 */
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .sy_zb_box_con {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 手机端卡片内部间距微调，更紧凑 */
  .sy_zb_box_con_listbox_li_a_box {
    padding: 1.2rem !important;
  }
  
  /* 手机端标题字号适当缩小 */
  .sy_zb_box_con_listbox_li_a_box_h {
    font-size: 1.35rem !important;
  }
}

/* ============================================
   单个卡片样式 (包含链接、内盒、悬停效果)
   ============================================ */

/* 卡片最外层链接 —— 块级，撑满网格，去除默认下划线 */
.sy_zb_box_con_listbox_li_a {
  display: block;
  height: 100%;               /* 保证所有卡片等高 */
  border-radius: var(--radius-lg);  /* 使用全局大圆角变量 */
  background-color: var(--color-white);
  /* 柔和边框 + 浅阴影，干净利落的卡片感 */
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  /* 过渡只针对阴影和边框颜色，无动画感但细腻 */
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
  color: var(--text-body);    /* 继承正文颜色 */
}

/* 卡片悬停：加深阴影，边框颜色微提亮，提升交互反馈 */
.sy_zb_box_con_listbox_li_a:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-300);
  /* 保证内部文字颜色不变，链接色已在全局定义，此处不重复 */
}

/* 卡片内部弹性容器 —— 纵向排列，内容撑开 */
.sy_zb_box_con_listbox_li_a_box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.8rem 1.5rem 1.8rem 1.5rem;  /* 上 左右 下 */
}

/* ----- 图片容器 (保证加载失败不塌陷，灰色背景提示) ----- */
.sy_zb_box_con_listbox_li_a_box_img {
  width: 100%;
  /* 固定宽高比 4:3，符合常规产品图比例，防止未加载时高度为0 */
  aspect-ratio: 4 / 3;
  /* 图片未加载或加载失败时显示浅灰色背景，起到占位与提示作用 */
  background-color: var(--color-gray-200);
  border-radius: var(--radius-md);
  /* 隐藏超出圆角的部分 */
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* 图片本身样式：填满容器，裁剪适应 */
.sy_zb_box_con_listbox_li_a_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 保证图片不变形，多余部分裁剪 */
  display: block;
  /* 图片加载中透明，背景色自然显示；加载失败背景色依然可见 */
}

/* ----- 卡片标题 (产品系列名称) ----- */
.sy_zb_box_con_listbox_li_a_box_h {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-gray-900);   /* 深色标题，突出 */
  margin-bottom: 0.6rem;
  /* 保证长单词换行 */
  word-break: break-word;
}

/* ----- 卡片描述文字 (简洁介绍) ----- */
.sy_zb_box_con_listbox_li_a_box_p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);       /* 次要文字颜色 */
  margin-bottom: 1.5rem;
  /* 利用flex:1将按钮推至底部，同时允许描述区域自动伸展 */
  flex: 1;
  word-break: break-word;
}

/* ----- “查看更多”按钮样式 (优雅边框，主题色交互) ----- */
.sy_zb_box_con_listbox_li_a_box_but {
  /* 内联弹性，方便加图标等扩展（目前仅文字） */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.8rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radius-md);
  
  /* 边框为主色调，背景透明，文字主色 —— 干净的企业风格 */
  background-color: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  
  /* 过渡效果，鼠标悬停时平滑变色 */
  transition: background-color var(--transition-fast), color var(--transition-fast);
  
  /* 按钮默认左对齐，且与上方内容保持距离（由margin-top: auto实现） */
  align-self: flex-start;
  margin-top: auto;
  
  /* 避免文字换行 */
  white-space: nowrap;
}

/* 按钮悬停：主题色填充，文字反白 */
.sy_zb_box_con_listbox_li_a_box_but:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* 保证按钮在移动端也能正常显示，不溢出 */
@media (max-width: 768px) {
  .sy_zb_box_con_listbox_li_a_box_but {
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
    white-space: normal;   /* 极窄屏允许换行 */
  }
}

/* ============================================
   细节优化 & 兼容处理
   ============================================ */

/* 去除内部多余href属性的影响（原HTML中div含href，重置样式已处理，但再次确保） */
.sy_zb_box_con_listbox_li_a_box[href] {
  /* 不做任何特殊处理，仅用于提醒：建议移除div上的href属性 */
}

/* 保证卡片内所有文字颜色继承，避免全局a样式意外覆盖 */
.sy_zb_box_con_listbox_li_a,
.sy_zb_box_con_listbox_li_a:visited,
.sy_zb_box_con_listbox_li_a:active {
  color: inherit;
}

/* 卡片内标题等元素不因链接悬停变色（保持设计一致性） */
.sy_zb_box_con_listbox_li_a:hover .sy_zb_box_con_listbox_li_a_box_h,
.sy_zb_box_con_listbox_li_a:hover .sy_zb_box_con_listbox_li_a_box_p {
  color: inherit; 
  /* 标题和描述在悬停时颜色不变，仅按钮和阴影变化，简洁专业 */
}

/* 图片加载失败时，父级背景已提供灰色，同时img的alt文本不破坏布局 */
.sy_zb_box_con_listbox_li_a_box_img img:after {
  /* 此伪元素可用于显示自定义错误信息，但非必须，背景色已足够 */
}

/* 如果希望卡片整体可点，已经用a包裹，确保手型 */
.sy_zb_box_con_listbox_li_a {
  cursor: pointer;
}

/* 针对极端小屏（<480px）进一步优化内边距 */
@media (max-width: 480px) {
  .sy_zb_box_con_listbox_li_a_box {
    padding: 1rem !important;
  }
  .sy_zb_box_con_listbox_li_a_box_h {
    font-size: 1.25rem !important;
  }
}
/* =======首页-产品中心(子块) - 卡片展示区 结束 ======= */
/* =======首页-产品中心(子块) - 卡片展示区 结束 ======= */
/* =======首页-产品中心(子块) - 卡片展示区 结束 ======= */

/* ==================== 首页 - 招聘板块样式 开始 ==================== */
/* ==================== 首页 - 招聘板块样式 开始 ==================== */
/* ---------- 板块容器：相对定位，作为绝对定位文字的参考 ---------- */
.sy_hr_box {
  width: 100%;
  /* background-color: var(--color-gray-100); 极浅灰背景，与图片加载前的占位色呼应 */
  padding-top: 80px;
}

.sy_hr_box_con {
  position: relative;      /* 关键：为内部绝对定位的文字盒子提供锚点 */
  width: 100%;
  height: 750px;           /* PC端固定高度，符合基本要求10 */
  overflow: hidden;        /* 确保任何溢出（如圆角）都被裁剪，保持整洁 */
  background-color: var(--color-gray-200); /* 后备背景，极浅灰 */
}

/* ---------- 图片容器：宽度100%占满，高度继承父级 ---------- */
.sy_hr_box_con_img {
  width: 100%;
  height: 100%;            /* 充满父容器，保证PC端750px高度 */
  background-color: #e2e8f0; /* 图片加载失败时显示的灰色背景（符合要求8） */
}

/* 图片自身样式：完全填充容器，并保持比例覆盖（不变形） */
.sy_hr_box_con_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 保证图片覆盖容器，不拉伸，裁剪多余部分 */
  background-color: #cbd5e1; /* 图片加载过程中的背景色，与父级略有区分，更友好 */
  /* 若图片加载失败，alt文本不会显示，但背景色会清晰提示用户 */
}

/* 图片遮罩层：通过伪元素添加半透明黑色遮罩，提升白色文字的可读性 */
.sy_hr_box_con_img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.25); /* 半透明遮罩，可根据图片亮度微调 */
  pointer-events: none;    /* 让点击穿透，不影响链接点击 */
  z-index: 1;              /* 位于图片上方，文字下方 */
}

/* ---------- 文字内容盒子：绝对定位，垂直水平居中 ---------- */
.sy_hr_box_con_wenzi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
  width: 90%;
  max-width: 800px;        /* 大屏幕限制最大宽度，避免文字过长 */
  text-align: center;
  color: #ffffff;          /* 白色文字，与深色遮罩形成对比 */
  z-index: 2;              /* 确保在遮罩层之上 */
  padding: 2rem 1.5rem;
  background-color: rgba(0, 0, 0, 0.2); /* 极浅黑色半透明背景，增强文字可读性（可选） */
  backdrop-filter: blur(2px); /* 轻微背景模糊，增加科技感与现代感，不影响可读性 */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 主标题：“加入我们” */
.sy_hr_box_con_wenzi_h {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  letter-spacing: 2px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* 文字阴影，增加层次 */
  color: #ffffff;
}

/* 描述文字 */
.sy_hr_box_con_wenzi_p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.95;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* 按钮容器 */
.sy_hr_box_con_wenzi_a {
  margin-top: 0.5rem;
}

/* “查看详情”链接按钮样式 */
.sy_hr_box_con_wenzi_a a {
  display: inline-block;
  padding: 0.85rem 2.8rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50px;          /* 胶囊按钮，现代感 */
  backdrop-filter: blur(4px);
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* 继承初始化中的a标签颜色重置，此处强制白色 */
}

/* 悬停效果：背景变白，文字变主题色 */
.sy_hr_box_con_wenzi_a a:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* 聚焦可见（无障碍） */
.sy_hr_box_con_wenzi_a a:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

/* ==================== 平板适配 (max-width: 1024px) ==================== */
@media (max-width: 1024px) {
  .sy_hr_box_con {
    height: 550px;          /* 平板高度适当降低，保持视觉舒适 */
  }

  .sy_hr_box_con_wenzi_h {
    font-size: 3rem;
  }

  .sy_hr_box_con_wenzi_p {
    font-size: 1.15rem;
  }

  .sy_hr_box_con_wenzi_a a {
    padding: 0.75rem 2.4rem;
    font-size: 1rem;
  }

  /* 遮罩可以稍微加深，因为平板可能户外使用 */
  .sy_hr_box_con_img::after {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

/* ==================== 手机适配 (max-width: 768px) ==================== */
@media (max-width: 768px) {
  .sy_hr_box_con {
    /* 手机端不再固定高度，由图片容器高度决定，文字依然绝对居中 */
    height: auto;
    min-height: 360px;      /* 保证最小高度，防止内容过矮 */
  }

  /* 图片容器在手机端设定固定高度，保证视觉效果，同时宽度100%占满 */
  .sy_hr_box_con_img {
    height: 380px;          /* 固定高度，可根据设计调整，满足要求9（宽度100%） */
  }

  /* 确保图片依然覆盖 */
  .sy_hr_box_con_img img {
    height: 100%;
    width: 100%;
  }

  /* 文字盒子调整内边距和宽度 */
  .sy_hr_box_con_wenzi {
    width: 90%;
    padding: 1.8rem 1rem;
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.25);
  }

  .sy_hr_box_con_wenzi_h {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .sy_hr_box_con_wenzi_p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }

  .sy_hr_box_con_wenzi_a a {
    padding: 0.7rem 2rem;
    font-size: 1rem;
  }

  /* 遮罩加深，保证文字对比度 */
  .sy_hr_box_con_img::after {
    background-color: rgba(0, 0, 0, 0.35);
  }
}

/* 小屏手机极致优化 (宽度小于480px) */
@media (max-width: 480px) {
  .sy_hr_box_con_img {
    /*height: 320px;*/
  }

  .sy_hr_box_con_wenzi_h {
    font-size: 2rem;
  }

  .sy_hr_box_con_wenzi_p {
    font-size: 0.95rem;
  }

  .sy_hr_box_con_wenzi_a a {
    padding: 0.6rem 1.8rem;
  }
}

/* 确保在极端情况下文字依然可读，背景半透明保持 */
/* ==================== 首页 - 招聘模块样式 结束 ==================== */
/* ==================== 首页 - 招聘模块样式 结束 ==================== */
/* ==================== 首页 - 招聘模块样式 结束 ==================== */