@charset "utf-8";
/*
 * @Description: 超级个体的AI五项修炼（/web/personnelTraining）专用样式
 *               承接 publicStyle.css 的「内页 banner 2.0」体系，做 banner 变体 + 页面区块
 * @fileName: aifive.css
 * @Date: 2026-09-23
 */

/* ============================================================
   1. 顶部 banner：复用 .pageBanner 基座 + 深蓝科技底图
   2026-09-28 改版：底图换成「深蓝渐变 + 白色线稿插画 + 发光地平线 + 暖色光轨」
   （风格照 static/web/images/fde_banner.jpg，主题换成超级个体 + AI 五项修炼）
   底图 = projectimg/aifive_banner.jpg，由 tools/gen_aifive_banner.py 生成
   ============================================================ */
.aifiveBanner {
    height: 330px;
    /* 底图未加载/加载失败时的兜底底色（深蓝） */
    background: #071c46;
}

/* 覆盖基座的装饰：压暗渐变（保证白字清晰）+ 底图。两层背景，逗号依次对应 */
.aifiveBanner .pageBanner_bg {
    background-image:
        linear-gradient(180deg,
            rgba(3, 16, 52, 0.74) 0%,
            rgba(3, 16, 52, 0.34) 26%,
            rgba(3, 16, 52, 0.34) 68%,
            rgba(3, 16, 52, 0.58) 100%),
        url(/projectimg/aifive_banner.jpg?v=20260928);
    background-size: 100% 100%, cover;
    /* 底图比例(5.83) 比 banner(4.85) 更宽 → cover 只按高度缩放、上下不裁，
       左右各裁掉一点空白；x 居中保证左右两侧的插画都还在 */
    background-position: center, center bottom;
    background-repeat: no-repeat, no-repeat;
}

.aifiveBanner .pageBanner_bg::before,
.aifiveBanner .pageBanner_bg::after {
    display: none;
}

/* 深底浅字：banner 内文字全部改白（基座里是深灰/品牌红，只在本页覆盖） */
.aifiveBanner .pageBanner_title {
    color: #ffffff;
}
.aifiveBanner .pageBanner_badge {
    color: rgba(255, 255, 255, 0.92);
}
.aifiveBanner .pageBanner_en {
    color: rgba(255, 255, 255, 0.72);
}
.aifiveBanner .pageBanner_line {
    background: rgba(255, 255, 255, 0.55);
}
/* slogan 保留品牌红胶囊 + 白字，在深蓝底上正好跳出来 */
.aifiveBanner .pageBanner_slogan {
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* banner 里的文字来自 publicStyle.css（全站共用），本页字号整体放大 15%（2026-09-28）。
   ⚠️ 必须**按断点分别给值**：publicStyle 的 ≤767 块里有专门的小号覆盖（title 26 / slogan 14 / en 11 / badge 12），
   而 `.aifiveBanner .xxx` 特异度比它们高，不加媒体查询会把移动端的小号覆盖顶掉。 */
@media (min-width: 768px) {
    .aifiveBanner .pageBanner_title {
        font-size: 53px; /* 46 → 53 */
    }
    .aifiveBanner .pageBanner_slogan {
        font-size: 21px; /* 18 → 21 */
    }
    .aifiveBanner .pageBanner_en {
        font-size: 17px; /* 15 → 17 */
    }
    .aifiveBanner .pageBanner_badge {
        font-size: 16px; /* 14 → 16 */
    }
}
@media (max-width: 767px) {
    .aifiveBanner .pageBanner_title {
        font-size: 30px; /* 26 → 30 */
    }
    .aifiveBanner .pageBanner_slogan {
        font-size: 16px; /* 14 → 16 */
    }
    .aifiveBanner .pageBanner_en {
        font-size: 13px; /* 11 → 13 */
    }
    .aifiveBanner .pageBanner_badge {
        font-size: 14px; /* 12 → 14 */
    }
}

/* 五级上升柱（原装饰）：2026-09-28 起被底图里画好的「五根发光光柱」取代。
   样式与 HTML 标记都保留，只是 display 关掉 —— 想恢复：把下面这行改回 flex 并去掉底图即可。 */
.aifiveBanner_bars {
    position: absolute;
    right: 5%;
    bottom: 0;
    top: 0;
    display: none;
    align-items: flex-end;
    gap: 14px;
    pointer-events: none;
}

.aifiveBanner_bars span {
    position: relative;
    display: block;
    width: 42px;
    border-radius: 10px 10px 0 0;
    background: rgba(197, 50, 46, 0.07);
    border: 1px solid rgba(197, 50, 46, 0.12);
    border-bottom: none;
}

.aifiveBanner_bars span::after {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: rgba(197, 50, 46, 0.28);
}

.aifiveBanner_bars span:nth-child(1) { height: 22%; }
.aifiveBanner_bars span:nth-child(2) { height: 34%; }
.aifiveBanner_bars span:nth-child(3) { height: 46%; }
.aifiveBanner_bars span:nth-child(4) { height: 58%; }
.aifiveBanner_bars span:nth-child(5) {
    height: 70%;
    background: rgba(197, 50, 46, 0.15);
    border-color: rgba(197, 50, 46, 0.22);
}
.aifiveBanner_bars span:nth-child(5)::after {
    background: #c5322e;
}

/* ============================================================
   2. 锚点导航条（页内跳转，随页面滚动，不吸顶）
   ============================================================ */
.aifiveNav {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e8e8ed;
}

.aifiveNav_inner {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
}

.aifiveNav_list {
    display: flex;
    align-items: center;
    gap: 4px;
}

.aifiveNav_list a {
    display: block;
    padding: 8px 18px;
    font-size: 17px;
    color: #424245;
    border-radius: 20px;
    transition: all .25s;
    white-space: nowrap;
}

.aifiveNav_list a:hover {
    color: #c5322e;
    background: #fdf3f2;
}

.aifiveNav_list a.active {
    color: #fff;
    background: #c5322e;
}

/* ============================================================
   3. 区块通用（全宽分区，内容由内层 .width1200 决定）
   ============================================================ */
.aifive_ch {
    background: #fff;
    padding: 56px 0;
    scroll-margin-top: 92px;
}

.aifive_ch_alt {
    background: #fafafa;
}

/* 区块头 */
.aifive_ch_head {
    margin-bottom: 34px;
}

/* ---- 总览区头部：两栏（左文案 + 右报名二维码），让用户进页面第一眼就能扫码报名 ----
   用修饰类而不是改 .aifive_ch_head 本身，因为「三天地图」区块也用同一个类，改基类会把
   它的 kicker/title/desc 变成 flex 横排。 */
.aifive_ch_head_withqr {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 36px;
}
.aifive_ch_head_l {
    flex: 1;
    min-width: 0;
}

/* 报名卡：白底卡片，二维码用与 fdeCourse 同一张助教微信码
   （左侧 4px 红描边已于 2026-09-28 按用户要求移除，原 padding 左侧 16px 同时改回 20px 保持左右对称） */
.aifive_signup {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0px 6px 22px 0px rgba(63, 72, 91, 0.10);
}
.aifive_signup_qr {
    flex: 0 0 auto;
    width: 116px;
    height: 116px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.aifive_signup_qr img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.aifive_signup_txt b {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #1c1c1e;
    margin-bottom: 6px;
}
.aifive_signup_txt i {
    display: block;
    font-style: normal;
    font-size: 15px;
    color: #86868b;
    line-height: 1.7;
    max-width: 132px;
}

/* 小标签（OVERVIEW / ROADMAP）：左侧红竖条已于 2026-09-28 移除，文字与下方标题左对齐 */
.aifive_kicker {
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #c5322e;
    line-height: 1.2;
    margin-bottom: 12px;
}

.aifive_ch_title {
    font-size: 37px;
    font-weight: 500;
    color: #1c1c1e;
    letter-spacing: 0.5px;
    line-height: 1.3;
    margin: 0 0 10px;
}

.aifive_ch_desc {
    font-size: 17px;
    color: #86868b;
    line-height: 1.75;
    margin: 0;
    max-width: 820px;
}

/* 小节标题（板块内用）：左侧红竖条已于 2026-09-28 移除 */
.aifive_sub_tit {
    font-size: 20px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.3;
    margin: 0 0 16px;
}

/* ============================================================
   4. 课程总览：事实条 / 核心亮点 / 进阶表格 / 认证与案例
   ============================================================ */
.aifive_facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.aifive_fact {
    flex: 1 1 240px;
    min-width: 0;
    background: #fafafa;
    border-radius: 14px;
    padding: 20px 22px;
    box-sizing: border-box;
}

.aifive_fact_lab {
    display: block;
    font-size: 14px;
    color: #86868b;
    letter-spacing: 1px;
}

.aifive_fact_val {
    display: block;
    font-size: 17px;
    font-weight: 500;
    color: #1c1c1e;
    line-height: 1.65;
    margin-top: 8px;
}

/* 核心亮点：两列自适应（左侧 4px 红描边已于 2026-09-28 移除） */
.aifive_highs {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.aifive_high {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid #ededf0;
    border-radius: 12px;
    padding: 18px 22px;
    box-sizing: border-box;
}

.aifive_high_no {
    flex: 0 0 auto;
    font-size: 23px;
    font-weight: 600;
    color: rgba(197, 50, 46, 0.32);
    line-height: 1.2;
}

.aifive_high_txt {
    font-size: 16px;
    color: #4a4a4f;
    line-height: 1.75;
    margin: 0;
}

.aifive_high_txt b {
    color: #1c1c1e;
    font-weight: 600;
}

/* 五级进阶总览表 */
.aifive_table_wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ededf0;
    border-radius: 14px;
    background: #fff;
}

.aifive_table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.aifive_table thead th {
    background: #fdf7f6;
    color: #c5322e;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    white-space: nowrap;
}

.aifive_table tbody td {
    font-size: 16px;
    color: #4a4a4f;
    line-height: 1.7;
    padding: 15px 18px;
    border-top: 1px solid #f2f2f5;
    vertical-align: top;
}

.aifive_table tbody tr:hover td {
    background: #fffbfa;
}

.aifive_table tbody td:first-child {
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
}

.aifive_table_tip {
    font-size: 15px;
    color: #a1a1a6;
    line-height: 1.7;
    margin: 12px 0 0;
}

/* 认证体系 / 标杆案例：两栏 */
.aifive_notes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
}

.aifive_note {
    flex: 1 1 420px;
    min-width: 0;
    background: #fafafa;
    border-radius: 14px;
    padding: 24px 26px;
    box-sizing: border-box;
}

.aifive_note_tit {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #c5322e;
    margin-bottom: 12px;
}

.aifive_note_txt {
    font-size: 16px;
    color: #4a4a4f;
    line-height: 1.85;
    margin: 0;
}

/* ============================================================
   5. 五项修炼详解：左「阶梯导轨」 + 右内容
   ============================================================ */
.aifive_sec {
    background: #fff;
    padding: 56px 0;
    scroll-margin-top: 92px;
}

.aifive_sec_alt {
    background: #fafafa;
}

.aifive_sec_row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.aifive_rail {
    flex: 0 0 172px;
    padding-top: 4px;
}

.aifive_rail_no {
    display: block;
    font-size: 62px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: rgba(197, 50, 46, 0.18);
}

.aifive_rail_en {
    display: block;
    font-size: 23px;
    font-weight: 600;
    color: #1c1c1e;
    letter-spacing: 1px;
    margin-top: 8px;
}

.aifive_rail_lv {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #c5322e;
    background: #fdf3f2;
    border: 1px solid rgba(197, 50, 46, 0.18);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
}

.aifive_body {
    flex: 1;
    min-width: 0;
}

.aifive_body_tit {
    font-size: 29px;
    font-weight: 500;
    color: #1c1c1e;
    line-height: 1.35;
    margin: 0;
}

.aifive_body_tit em {
    font-style: normal;
    color: #c5322e;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-left: 10px;
}

.aifive_body_lead {
    font-size: 17px;
    color: #6b6b70;
    line-height: 1.85;
    margin: 14px 0 0;
    max-width: 900px;
}

/* 核心能力 / 典型场景 */
.aifive_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 44px;
    margin-top: 26px;
}

.aifive_col {
    flex: 1 1 320px;
    min-width: 0;
}

/* 列标题：左侧红竖条已于 2026-09-28 移除（页面上共 15 处） */
.aifive_col_tit {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.2;
    margin-bottom: 14px;
}

.aifive_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aifive_list li {
    position: relative;
    font-size: 16px;
    color: #4a4a4f;
    line-height: 1.8;
    padding-left: 16px;
}

.aifive_list li + li {
    margin-top: 6px;
}

.aifive_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(197, 50, 46, 0.45);
}

/* 修炼要点：编号步骤，双列自适应 */
.aifive_steps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    margin-top: 14px;
}

.aifive_step {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.aifive_step_no {
    flex: 0 0 22px;
    height: 22px;
    margin-top: 3px;
    border-radius: 6px;
    background: #fdf3f2;
    color: #c5322e;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aifive_step_txt {
    font-size: 16px;
    color: #4a4a4f;
    line-height: 1.8;
}

/* 修炼产出 + 常见工具（左侧 3px 红描边已于 2026-09-28 移除，页面上共 5 处） */
.aifive_out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    margin-top: 28px;
    padding: 18px 22px;
    background: #fdf7f6;
    border-radius: 12px;
    box-sizing: border-box;
}

.aifive_out_lab {
    font-size: 15px;
    font-weight: 600;
    color: #c5322e;
    white-space: nowrap;
}

.aifive_out_txt {
    flex: 1 1 320px;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    color: #1c1c1e;
    line-height: 1.7;
}

.aifive_tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.aifive_tool {
    font-size: 14px;
    color: #5a5a60;
    background: #fff;
    border: 1px solid #ededf0;
    border-radius: 20px;
    padding: 4px 12px;
    white-space: nowrap;
}

/* ============================================================
   6. 三天修炼地图
   ============================================================ */
.aifive_map {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.aifive_map_item {
    flex: 1 1 190px;
    min-width: 0;
    background: #fff;
    border: 1px solid #ededf0;
    border-top: 3px solid #c5322e;
    border-radius: 12px;
    padding: 20px 22px;
    box-sizing: border-box;
}

.aifive_map_day {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c5322e;
}

.aifive_map_tit {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #1c1c1e;
    margin-top: 8px;
}

.aifive_map_desc {
    font-size: 15px;
    color: #86868b;
    line-height: 1.75;
    margin: 8px 0 0;
}

/* ============================================================
   7. 底部报名 CTA
   ============================================================ */
.aifive_cta {
    background: #fff;
    padding: 56px 0 64px;
}

.aifive_cta_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: #c5322e;
    border-radius: 18px;
    padding: 32px 40px;
    box-shadow: 0 12px 34px 0 rgba(197, 50, 46, 0.25);
    box-sizing: border-box;
}

.aifive_cta_tit {
    font-size: 25px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 8px;
}

.aifive_cta_desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.75;
    margin: 0;
}

.aifive_cta_r {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.aifive_cta_btn {
    display: inline-block;
    white-space: nowrap;
    font-size: 17px;
    font-weight: 500;
    color: #c5322e;
    background: #fff;
    border-radius: 10px;
    padding: 13px 34px;
    transition: all .3s;
}

.aifive_cta_btn:hover {
    color: #a02925;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.18);
}

.aifive_cta_tip {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   7.5 预约报名弹窗（扫码版）
   复用 publicStyle.css 的 .info_pop 外壳（440px 宽），内部只放二维码
   ============================================================ */
.aifive_qr_pop {
    padding: 4px 6px 0;
    text-align: center;
}

/* 二维码占位框：二维码图到位后把里面的 <span> 换成 <img> 即可 */
.aifive_qr_box {
    width: 180px;
    height: 180px;
    margin: 8px auto 0;
    border-radius: 12px;
    border: 1px dashed rgba(197, 50, 46, 0.45);
    background: #fdf7f6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color: #c98a86;
    box-sizing: border-box;
}

.aifive_qr_box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

/* 二维码已换成真图时加这个类：去掉虚线占位框与粉底，改白底 + 轻阴影 */
.aifive_qr_box_pic {
    border: 0;
    background: #fff;
    box-shadow: 0px 2px 14px 0px rgba(63, 72, 91, 0.12);
}

.aifive_qr_pop_tit {
    font-size: 17px;
    font-weight: 500;
    color: #1c1c1e;
    margin: 18px 0 0;
}

.aifive_qr_pop_tip {
    font-size: 15px;
    color: #86868b;
    line-height: 1.7;
    margin: 8px 0 0;
}

/* ============================================================
   8. 响应式
   ============================================================ */
@media (max-width: 1240px) {
    .aifiveNav_inner {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .aifiveNav_list {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    /* banner 装饰柱在中小屏收起，避免与居中标题打架 */
    .aifiveBanner_bars {
        display: none;
    }

    .aifiveBanner {
        height: 280px;
    }

    /* 总览区头部：两栏改上下堆叠，报名卡占满宽度（窄屏二维码与文案并排更好读） */
    .aifive_ch_head_withqr {
        flex-direction: column;
        gap: 20px;
    }
    .aifive_signup {
        width: 100%;
        box-sizing: border-box;
    }
    .aifive_signup_txt i {
        max-width: none;
    }

    .aifive_sec_row {
        flex-direction: column;
        gap: 18px;
    }

    .aifive_rail {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 14px;
        padding-top: 0;
    }

    .aifive_rail_no {
        font-size: 44px;
    }

    .aifive_rail_en {
        font-size: 21px;
        margin-top: 0;
    }

    .aifive_rail_lv {
        margin-top: 0;
    }

    .aifive_cta_box {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 26px;
    }

    .aifive_cta_r {
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .aifiveBanner {
        /* 原 180px。字号整体放大 15% 后（标题 30px、英文行会折两行）文字几乎顶满，
           底边只剩 2px，这里加高到 210px 让上下都留出余量 */
        height: 210px;
    }

    .aifive_ch,
    .aifive_sec,
    .aifive_cta {
        padding: 36px 0;
    }

    .aifive_ch_title {
        font-size: 26px;
    }

    .aifive_ch_desc,
    .aifive_body_lead {
        font-size: 16px;
    }

    .aifive_body_tit {
        font-size: 24px;
    }

    .aifive_body_tit em {
        display: block;
        margin-left: 0;
        margin-top: 6px;
        font-size: 16px;
    }

    .aifive_rail {
        flex-wrap: wrap;
        gap: 10px;
    }

    .aifive_rail_no {
        font-size: 37px;
    }

    .aifive_high,
    .aifive_note {
        padding: 18px 20px;
    }

    .aifive_out {
        padding: 16px 18px;
    }

    .aifive_high_no {
        font-size: 20px;
    }

    .aifive_cta_tit {
        font-size: 22px;
    }

    .aifive_cta_btn {
        padding: 12px 28px;
    }

    .aifive_qr_box {
        width: 156px;
        height: 156px;
    }

    /* 总览区报名卡：窄屏二维码略缩，文案吃掉剩余宽度 */
    .aifive_signup_qr {
        width: 104px;
        height: 104px;
    }
    .aifive_signup {
        padding: 14px 16px 14px 14px;
    }

    .aifive_qr_pop_tit {
        margin-top: 14px;
    }
}