/*
 * =========================================
 * 拓保官网 - 数字化订货系统 (orderGoods.css)
 * =========================================
 *
 * 描述: 订货系统产品介绍页专属样式。
 * 布局: 采用 Flexbox 和 Grid 实现的“一页一屏”交错布局。
 */

/* --- 1. Banner --- */
.banner20 {
    background-image: url(../images/second/banner20.png);
}
.header_box_cro {
    padding: 100px 0; 
    max-width: 650px; 
    margin: 0 auto;
}
.slogan_cross01,
.slogan_cross05 {
    text-align: center;
    color: #fff;
}
.slogan_cross01 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
}
.slogan_cross05 {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.9;
    
    width: 780px; 
    
    margin-left: auto;
    margin-right: auto;
    
    left: auto; 
    margin-top: 25px;
}


/* --- 2. 通用内容模块 --- */

/**
 * 基础区块 (Section)
 * 定义了“一页一屏”的基础容器
 */
.og-section {
    width: 100%;
    min-width: 1180px; /* 保持与旧站一致 */
    min-height: 600px; /* 保持旧的高度 */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 60px 0;
    
    display: flex; /* 垂直居中内部容器 */
    align-items: center;
    justify-content: center;
    box-sizing: border-box; 
}

/**
 * 内容容器 (Wrapper)
 * 默认使用 Flexbox 实现图文布局
 */
.og-content {
    width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px; /* 图文间距 */
}

/* 文本列 (左) 和 图片列 (右) */
.og-text-col {
    flex-basis: 510px; /* 匹配旧的文本宽度 */
    flex-shrink: 0;
}
.og-image-col {
    flex-grow: 1; /* 自动填充剩余空间 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.og-image-col img {
    max-width: 100%;
    height: auto;
    display: block;
}

/**
 * 交错布局
 * 奇数行: 文左, 图右 (默认)
 * 偶数行: 图左, 文右 (row-reverse)
 * (已排除 S6, S8, S10)
 */
.og-section:nth-child(even):not(#og-section-6):not(#og-section-8):not(#og-section-10) .og-content {
    flex-direction: row-reverse; 
}

/* --- 2.1 文本样式 (所有区块通用) --- */
.og-title {
    font-size: 26px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 600;
    color: #061F28;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
}
/* 标题下的渐变横线 */
.og-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 6px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.75) 0%, #0F759D 100%);
    border-radius: 1px;
}
.og-description {
    font-size: 14px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 24px;
    color: #394D54;
    max-width: 510px; 
}

/* 交错布局的文本对齐 (已排除 S6, S8, S10) */
.og-section:nth-child(even):not(#og-section-6):not(#og-section-8):not(#og-section-10) .og-title {
    text-align: right;
}
.og-section:nth-child(even):not(#og-section-6):not(#og-section-8):not(#og-section-10) .og-title::after {
    left: auto;
    right: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0%, #0F759D 100%);
}
.og-section:nth-child(even):not(#og-section-6):not(#og-section-8):not(#og-section-10) .og-description {
    text-align: right;
    margin-left: auto; 
}


/* --- 3. 特定区域背景图 --- */
#og-section-1 { background-image: url(../images/second/orderGoods_bg_01.png); }
#og-section-2 { background-image: url(../images/second/orderGoods_bg_02.png); }
#og-section-3 { background-image: url(../images/second/orderGoods_bg_03.png); }
#og-section-4 { background-image: url(../images/second/orderGoods_bg_04.png); }
#og-section-5 { background-image: url(../images/second/orderGoods_bg_05.png); }
#og-section-6 { background-image: url(../images/second/orderGoods_bg_06.png); }
#og-section-7 { background-image: url(../images/second/orderGoods_bg_07.png); }
#og-section-8 { background-image: url(../images/second/orderGoods_bg_08.png); }
#og-section-9 { background-image: url(../images/second/orderGoods_bg_09.png); }
#og-section-10 { background-image: url(../images/second/orderGoods_bg_10.png); }


/* --- 4. 特殊布局 (Section 4, 6, 8, 9, 10) --- */

/**
 * Section 4: 高效管理订单 (订单流程)
 * 布局: 图左文右
 * 左侧图片区内部: 上下结构
 */
#og-section-4 .og-content {
    flex-direction: row; /* 保持 图左 文右 */
}
#og-section-4 .og-text-col {
    text-align: left; 
    margin-left: auto; /* 确保文字在右侧 */
}
#og-section-4 .og-title::after {
    left: 0; 
    right: auto;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0.75) 0%, #0F759D 100%);
}
#og-section-4 .og-image-col {
    flex-direction: column; /* 内部上下结构 */
    gap: 20px; /* 减小流程图之间的垂直间距 */
    align-items: stretch; 
    flex-basis: 600px; /* 给左侧更多空间 */
    flex-grow: 0;
}
.og-flow-chart {
    width: 100%;
}

/* 流程图公共标题 */
.og-flow-subtitle {
    font-size: 22px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 600;
    line-height: 30px;
    color: #666;
    text-align: center;
    margin-bottom: 5px;
}
.og-flow-subtitle-en {
    font-size: 12px;
    font-family: "PingFang SC", sans-serif;
    line-height: 17px;
    color: #BEBEBE;
    letter-spacing: 10px;
    text-align: center;
    margin-bottom: 25px; /* 调整标题和流程图间距 */
}

/**
 * 流程图时间线容器
 * - 使用 Grid 布局
 * - align-items: start 确保所有项顶部对齐，保证图标在同一水平线。
 */
.og-timeline {
    display: grid;
    gap: 10px; 
    text-align: center;
    position: relative; 
    padding: 0; 
    align-items: start; /* 顶部对齐 */
}
.og-timeline-7 { grid-template-columns: repeat(7, 1fr); }
.og-timeline-4 { grid-template-columns: repeat(4, 1fr); }

/**
 * 流程图线条
 * - top: 7px; 是根据视觉效果微调的最终值。
 * - 目的是让线条穿过所有图标的视觉中心。
 */
.og-timeline::before {
    content: '';
    position: absolute;
    top: 7px; /* 垂直定位，确保与图标中心对齐 */
    left: 5%;
    width: 90%;
    height: 12px;
    background: linear-gradient(270deg, #FFE7DB 0%, #F76D2C 100%);
    border-radius: 8px;
    z-index: 1;
}

.og-timeline-item {
    z-index: 2; 
}
/* 流程图图标 */
.og-timeline-icon {
    width: 22px;
    height: 22px;
    background: rgba(253, 143, 91, 0.9);
    border-radius: 50%;
    margin: 0 auto 15px auto; /* 靠 align-items: start 对齐，并设置下方间距 */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.og-timeline-icon::after {
    content: '';
    width: 9px;
    height: 9px;
    background: rgba(255, 255, 255, 1);
    border-radius: 50%;
}
.og-timeline-title {
    font-size: 19px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 600;
    line-height: 26px;
    color: #FD8F5B;
    margin-bottom: 5px; 
    min-height: 26px; /* 确保对齐 */
}
.og-timeline-desc {
    font-size: 12px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: 18px;
    color: #333333;
}

/**
 * Section 6: 多重营销活动 (Hexagon)
 * 布局: 图左文右
 * 左侧图片区: 3-2 居中布局
 */
.og-hexagon-grid {
    flex-direction: column; /* 内部上下结构 */
    gap: 20px; /* 两行之间的间距 */
    align-items: center; /* 居中两行 */
}
.og-hexagon-row {
    display: flex;
    justify-content: center;
    gap: 40px; /* 图标间距 */
}
.og-hexagon-item {
    text-align: center;
    width: 163px; /* 固定宽度，方便对齐 */
    flex-shrink: 0;
}
.og-hexagon-item img {
    width: 163px; 
    height: 157px;
    object-fit: contain;
    margin-bottom: 15px;
}
/* 第二行的图标更小 */
.og-hexagon-row:last-child .og-hexagon-item img {
    width: 128px;
    height: 128px;
}
.og-hexagon-item p {
    font-size: 28px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: 40px;
    color: #333333;
}


/**
 * Section 8: 多板块企业宣传管理 (Quad Card)
 * 布局: 上下结构
 */
#og-section-8 .og-content {
    flex-direction: column; /* 上下结构 */
    gap: 30px; /* 减小文本和卡片之间的间距 */
    align-items: center; /* 确保标题和卡片组在垂直堆叠时居中 */
}
#og-section-8 .og-text-col {
    text-align: center;
    flex-basis: auto; /* 覆盖默认的 510px，使其宽度自适应 */
}
#og-section-8 .og-title::after {
    left: 50%;
    transform: translateX(-50%);
}
#og-section-8 .og-image-col {
    max-width: 1080px; /* 限制最大宽度，使其更紧凑 */
    flex-grow: 0; /* 覆盖默认的 flex-grow，使其宽度自适应 */
}
.og-quad-card {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px; /* 减小卡片间距 */
    text-align: center;
    background: rgba(255, 255, 255, 0.39);
    box-shadow: 0px 0px 12px rgba(253, 143, 91, 0.3);
    border-radius: 20px;
    padding: 30px; /* 减小内边距 */
    position: relative;
    margin: 0 auto; 
}
.og-quad-item {
    position: relative;
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 顶部对齐 */
    text-align: center;
}
.og-quad-item img {
    width: 100px; /* 调整图标大小 */
    height: 100px; /* 调整图标大小 */
    margin-bottom: 15px;
}
.og-quad-item-title {
    font-size: 20px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 540;
    line-height: 28px;
    color: #333333;
    margin-bottom: 10px;
}
.og-quad-item-desc {
    font-size: 14px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
}
/* 绘制分隔线 */
.og-quad-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -10px; /* 调整分隔线位置 */
    transform: translateY(-50%);
    width: 2px;
    height: 50px;
    border: 2px solid #D0D0D0;
}


/**
 * Section 9: 销售数据 (V-Timeline)
 * 布局: 文左图右
 * 右侧图片区: 1 个控件 (图) + 3 行文字
 */
#og-section-9 .og-text-col {
    text-align: left;
    margin-right: auto;
}
#og-section-9 .og-title::after {
    left: 0;
    transform: none;
}
#og-section-9 .og-image-col {
    display: flex;
    flex-direction: row; /* 水平布局 */
    align-items: stretch; /* 撑满高度 */
    gap: 40px; /* 线条和文本的间距 */
    padding: 20px 0;
}
.og-v-timeline-line img {
    width: 15px;
    height: 100%; /* 自动拉伸线条 */
    object-fit: contain; /* 保持比例 */
}
.og-v-timeline-content {
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* 均匀分布三行文字 */
    gap: 30px; 
}
.og-v-timeline-item h3 {
    font-size: 26px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 540;
    line-height: 37px;
    color: #061F28;
}
.og-v-timeline-item p {
    font-size: 20px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: 28px;
    color: #666666;
}


/**
 * Section 10: 总院周报报表 (Icon List)
 * 布局: 标题描述居中，图标列表采用“上三下二”的奥运五环排布。
 */
#og-section-10 .og-content {
    flex-direction: column; /* 上下结构 */
    align-items: center; /* 确保标题和图标列都居中，实现中心对称 */
    gap: 40px; 
    justify-content: flex-start; /* 确保内容整体居上 */
}
#og-section-10 .og-text-col {
    text-align: center; /* 标题和文本居中 */
    width: 100%;
    max-width: 800px;
    flex-basis: auto; /* 覆盖 510px */
}
#og-section-10 .og-title::after {
    left: 50%; /* 标题下划线居中 */
    transform: translateX(-50%);
}
#og-section-10 .og-description {
    text-align: center; /* 描述文本居中 */
    margin-left: auto;
    margin-right: auto;
}

/* “奥运五环”布局容器 */
#og-section-10 .og-image-col {
    width: 100%;
    max-width: 900px; /* 容器最大宽度 */
    margin: 0 auto;
    display: grid;
    
    /* * 采用 6 列网格 (repeat(6, 1fr))
     * "item1 item1 ..." (上 3 项各占 2 列)
     * ". item4 item4 ..." (下 2 项各占 2 列, 左右各留 1 列空白)
     */
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas: 
        "item1 item1 item2 item2 item3 item3"
        ". item4 item4 item5 item5 .";
        
    gap: 40px 20px; /* 行间距 和 列间距 */
    flex-grow: 0; /* 覆盖 flex-grow: 1 */
}

/* 列表项 (Grid Item) */
.og-icon-list-item {
    display: flex;
    flex-direction: column; /* 图标在上，文字在下 */
    align-items: center; /* 水平居中 */
    gap: 15px; /* 图标和文字块的间距 */
    z-index: 1; 
}
.og-icon-list-item img {
    width: 60px; /* 调整图标大小 */
    height: 60px;
    flex-shrink: 0; 
}

/* Grid 区域分配 */
#og-section-10 .og-image-col .og-icon-list-item:nth-child(1) { grid-area: item1; }
#og-section-10 .og-image-col .og-icon-list-item:nth-child(2) { grid-area: item2; }
#og-section-10 .og-image-col .og-icon-list-item:nth-child(3) { grid-area: item3; }
#og-section-10 .og-image-col .og-icon-list-item:nth-child(4) { grid-area: item4; }
#og-section-10 .og-image-col .og-icon-list-item:nth-child(5) { grid-area: item5; }

/* 文本样式 (匹配原始 HTML) */
.og-report-text {
    text-align: center;
}
.og-report-text h3 {
    font-size: 19px;
    font-family: "PingFang SC", sans-serif;
    line-height: 30px;
    color: #061F28;
    font-weight: 500;
}
/* 隐藏重复的描述 (由 .og-unified-description 替代) */
.og-report-text p {
    display: none; 
}

/* 统一的描述文本 */
.og-unified-description {
    text-align: center;
    font-size: 14px;
    font-family: "PingFang SC", sans-serif;
    font-weight: 400;
    line-height: 24px;
    color: #666666;
    margin-top: 10px; /* 与图标列表的间距 */
    width: 100%;
}