/**
 * 关于我们页面样式表
 * 包含全局样式、导航栏、页面头部、公司简介、时间线图表、扎根实践、文化演绎等模块样式
 */

/* 字体定义 */
@font-face {
    font-family: 'SY-Regular';
    src: url('../font/SourceHanSansCN-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'SY-Bold';
    src: url('../font/SourceHanSansCN-Bold.otf') format('opentype');
}

/* ========== 全局样式配置 ========== */

/* CSS 变量定义 - 统一管理颜色和尺寸 */
:root {
    --primary-color: rgba(241, 135, 33, 1);    /* 主题橙色 */
    --text-primary: #333333;     /* 主要文字颜色 */
    --text-secondary: #666666;   /* 次要文字颜色 */
    --bg-light: #F6F8FA;         /* 浅色背景 */
    --max-width: 1440px;         /* 最大容器宽度 */
}

/* 全局字体和基础样式 */
body {
    font-family: "SY-Regular", "Source Han Sans CN", sans-serif; /* 中文字体栈 */
    line-height: 1.5;           /* 行高 */
    color: var(--text-primary); /* 文字颜色 */
    overflow-x: hidden;         /* 隐藏水平滚动条 */
    background: #FFFFFF;        /* 白色背景 */ 
}

/* 通用容器样式 */
.container {
    max-width: var(--max-width); /* 最大宽度 */
    margin: 0 auto;              /* 水平居中 */
    padding: 0 120px;            /* 左右内边距 */
}

/* ========== 顶部导航栏样式已移至 css/nav.css ========== */
/* ========== 页面头部样式 ========== */

/* 头部容器 */
.page-header {
    position: relative;  /* 相对定位 */
    height: 480px;       /* 固定高度 */
    overflow: hidden;    /* 隐藏溢出内容 */
    margin-top: 56px;
}
.header-text {
    font-size: 20px;
}
/* 头部背景图片 */
.header-bg {
    position: absolute;                                    /* 绝对定位 */
    top: 0;                                               /* 顶部对齐 */
    left: 0;                                              /* 左侧对齐 */
    width: 100%;                                          /* 全宽 */
    height: 480px; 
    background: url('../images/team.png') no-repeat center;                                         /* 全高 */
    background-size: cover;                               /* 覆盖整个容器 */
}

/* 头部内容区域 */
.header-content {
    position: relative;      /* 相对定位 */
    max-width: var(--max-width);
    margin: 0 auto;
    color: #FFFFFF;         /* 白色文字 */
    text-align: center;     /* 居中对齐 */
    margin-top: 60px;
}

/* 头部装饰线 */
.header-line {
    width: 40px;                /* 线条宽度 */
    height: 4px;                /* 线条高度 */
    background: #FFFFFF;        /* 白色背景 */
    margin: 0 auto;             /* 水平居中 */
    margin-bottom: 40px;        /* 下方边距 */
}


/* ========== 公司简介样式 ========== */

/* 公司简介容器 */
.company-intro {
    margin-top: 72px;
    background: #FFFFFF; /* 白色背景 */
}

/* 简介网格布局 */
.intro-grid {
    display: flex;                      /* 网格布局 */
    grid-template-columns: 1fr 1.2fr;   /* 左侧1份，右侧1.2份 */
    gap: 100px;                         /* 网格间距 */
    align-items: flex-start;            /* 顶部对齐 */
}

/* ========== 左侧图片区域 ========== */

.intro-image {
    position: relative;                          /* 相对定位 */
    overflow: hidden;                            /* 隐藏溢出 */
    height: 68px;
    width: 266px; 
    flex-shrink: 0;
    margin-right: 154px;                      /* 浅色背景 */
}

/* 简介图片样式 */
.intro-photo {
    width: 100%;                    /* 全宽 */
    height: auto;                   /* 自动高度 */
    display: block;                 /* 块级元素 */
    transition: transform 0.3s ease; /* 缩放动画 */
    border-radius: 16px;            /* 圆角 */
    object-fit: contain;            /* 保持原始比例 */
}


/* ========== 右侧内容区域 ========== */

.intro-content {
    display: flex;           /* 弹性布局 */
    flex-direction: column;  /* 垂直排列 */
    gap: 50px;               /* 元素间距 */
   
}

/* ========== 介绍文字样式 ========== */

.intro-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* 段落基础样式 */
.intro-text p {
    font-size: 16px;            /* 字体大小 */
    line-height: 2;           /* 行高 */
    color: #757575;             /* 文字颜色 */
    margin-bottom: 28px;        /* 下方边距 */
    text-align: justify;        /* 两端对齐 */
    font-weight: 400;           /* 字体粗细 */
    letter-spacing: 0.3px;      /* 字符间距 */
}

/* 第一段特殊样式 */
.intro-text p:first-child {
    color: #757575;      /* 深色文字 */
    font-weight: 500;    /* 稍粗字体 */
}

/* 最后一段特殊样式 */
.intro-text p:last-child {
    margin-bottom: 0;    /* 去除下边距 */
    font-weight: 500;    /* 稍粗字体 */
    color: #757575;      /* 深色文字 */
}

/* ========== 统计数据样式 ========== */

.stats-row {
    display: flex;                      /* 弹性布局 */
    justify-content: flex-start;        /* 左对齐 */
    gap: 80px;                          /* 元素间距 */
    margin: 40px 0 96px;                /* 顶部内边距 */
    position: relative;                 /* 相对定位 */
}

/* 单个统计项样式 */
.stat-item {
    text-align: left;    /* 左对齐 */
    position: relative;  /* 相对定位 */
}

/* 统计数字样式 */
.stat-number {
    font-size: 42px;                /* 大号字体 */
    font-weight: 700;               /* 粗体 */
    color: var(--primary-color);    /* 橙色 */
    margin-bottom: 12px;            /* 下方边距 */
    line-height: 1;                 /* 紧凑行高 */
}

/* 统计数字上标样式 */
.stat-number sup {
    font-size: 24px;    /* 上标字体大小 */
    top: -0.6em;        /* 上标位置 */
    font-weight: 600;   /* 字体粗细 */
}

/* 统计标签样式 */
.stat-label {
    font-size: 16px;     /* 字体大小 */
    color: #757575;      /* 灰色文字 */
    font-weight: 400;    /* 字体粗细 */
    line-height: 1.4;    /* 行高 */
    margin-top: 18px;
}

/* ========== 标语样式 ========== */

.slogan {
    margin-top: 30px;    /* 顶部边距 */
    text-align: left;    /* 左对齐 */
    position: relative;  /* 相对定位 */
}

/* 标语文字样式 */
.slogan p {
    font-size: 26px;                /* 字体大小 */
    color: var(--primary-color);    /* 橙色 */
    font-style: italic;             /* 斜体 */
    font-weight: 600;               /* 字体粗细 */
    letter-spacing: 1px;            /* 字符间距 */
}

/* ========== 响应式设计 - 大屏幕适配 ========== */

@media (max-width: 1200px) {
    /* 调整网格布局比例 */
    .intro-grid {
        gap: 80px;                           /* 减少间距 */
        grid-template-columns: 1fr 1.1fr;    /* 调整比例 */
    }

    /* 调整统计项间距 */
    .stats-row {
        gap: 60px; /* 减少间距 */
    }

    /* 调整文字大小 */
    .intro-text p {
        font-size: 17px;     /* 稍小字体 */
        line-height: 2.1;    /* 调整行高 */
    }

    /* 调整内容区域内边距 */
    .intro-content {
        padding-left: 10px; /* 减少左边距 */
    }
}

@media (max-width: 992px) {
    /* 平板设备适配 - 改为垂直布局 */
    .intro-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        gap: 60px;                  /* 调整间距 */
    }

    /* 图片容器居中 */
    .intro-image {
        max-width: 700px;   /* 最大宽度 */
        margin: 0 auto;     /* 水平居中 */
    }

    /* 重置内容区域样式 */
    .intro-content {
        padding-left: 0;    /* 去除左边距 */
        gap: 40px;          /* 减少间距 */
    }

    /* 统计项居中显示 */
    .stats-row {
        justify-content: center; /* 居中对齐 */
        gap: 50px;              /* 调整间距 */
    }
}

@media (max-width: 768px) {
    /* 手机设备适配 */
    .company-intro {
        padding: 80px 0; /* 减少上下内边距 */
    }

    /* 统计项垂直排列 */
    .stats-row {
        flex-direction: column; /* 垂直排列 */
        gap: 40px;             /* 调整间距 */
        align-items: center;   /* 居中对齐 */
        text-align: center;    /* 文字居中 */
    }

    /* 统计项居中 */
    .stat-item {
        text-align: center; /* 居中对齐 */
    }

    /* 调整文字样式 */
    .intro-text p {
        font-size: 16px;        /* 小号字体 */
        line-height: 1.9;       /* 调整行高 */
        margin-bottom: 24px;    /* 调整边距 */
    }

    /* 标语居中显示 */
    .slogan p {
        font-size: 22px;        /* 调整字体大小 */
        text-align: center;     /* 居中对齐 */
    }

    /* 调整内容区域间距 */
    .intro-content {
        gap: 35px; /* 减少间距 */
    }
}

/* ========== 数据统计区域（备用） ========== */

.statistics {
    padding: 60px 0;            /* 上下内边距 */
    background: var(--bg-light); /* 浅色背景 */
}

.statistics .container {
    display: flex;              /* 弹性布局 */
    justify-content: space-around; /* 均匀分布 */
    align-items: center;        /* 垂直居中 */
}

/* ========== 思想脉络/时间线样式 ========== */

.timeline {
    padding: 80px 0;            /* 上下内边距 */
    overflow: hidden;           /* 隐藏溢出内容 */
}

/* 时间线标题 */
.timeline h2 {
    font-size: 36px;            /* 大号字体 */
    font-weight: bold;          /* 粗体 */
    text-align: center;         /* 居中对齐 */
    margin-bottom: 80px;        /* 下方边距 */
    color: var(--text-primary); /* 主要文字颜色 */
}

/* 自定义时间线容器 - 贯穿全屏 */
.custom-timeline-container {
    position: relative;         /* 相对定位 */
    display: flex;              /* 弹性布局 */
    flex-direction: column;     /* 垂直排列 */
    align-items: center;        /* 居中对齐 */
    gap: 40px;                  /* 元素间距 */
    width: 100vw;               /* 视口全宽 */
    margin-left: calc(-50vw + 50%); /* 突破容器限制，居中对齐 */
}

/* Canvas画布样式 */
#timelineCanvas {
    max-width: 100%;            /* 最大宽度 */
    height: auto;               /* 自动高度 */
    cursor: pointer;            /* 鼠标手型 */
    border-radius: 8px;         /* 圆角 */
    background: transparent;    /* 透明背景 */
}

/* 时间线状态说明 */
.timeline-legend {
    display: flex;              /* 弹性布局 */
    gap: 40px;                  /* 元素间距 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
    margin-top: 20px;           /* 顶部边距 */
}

/* 状态说明项 */
.legend-item {
    display: flex;              /* 弹性布局 */
    align-items: center;        /* 垂直居中 */
    gap: 8px;                   /* 元素间距 */
    font-size: 14px;            /* 字体大小 */
    color: #666666;             /* 灰色文字 */
}

/* 状态说明圆点 */
.legend-dot {
    width: 25px;                /* 外圆直径 */
    height: 25px;               /* 外圆直径 */
    border-radius: 50%;         /* 圆形 */
    flex-shrink: 0;             /* 不收缩 */
    position: relative;         /* 相对定位，用于内圆 */
    border: 2px solid rgba(241, 135, 33, 1);  /* 外圆边框 */
    background: transparent;    /* 透明背景 */
}

/* 默认状态圆点内圆 */
.legend-dot.default::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;                /* 内圆直径 */
    height: 15px;               /* 内圆直径 */
    background: rgba(241, 135, 33, 1);        /* 橙色背景 */
    border-radius: 50%;         /* 圆形 */
}

/* 悬停状态圆点 */
.legend-dot.hover {
    background: transparent;    /* 保持透明背景 */
    width: 41px;                /* 最外层圆直径 */
    height: 41px;               /* 最外层圆直径 */
    border: 2px solid rgba(241, 135, 33, 1);  /* 最外层圆边框 */
    box-shadow: 0 0 0 4px rgba(241, 135, 33, 0.3); /* 橙色光晕 */
    position: relative;         /* 相对定位 */
}

/* 悬停状态第二层空心圆 */
.legend-dot.hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 31px;                /* 第二层圆直径 */
    height: 31px;               /* 第二层圆直径 */
    border: 2px solid rgba(241, 135, 33, 1);  /* 第二层圆边框 */
    border-radius: 50%;         /* 圆形 */
    background: transparent;    /* 透明背景 */
}

/* 悬停状态内圆 */
.legend-dot.hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19px;                /* 实心圆直径 */
    height: 19px;               /* 实心圆直径 */
    background: rgba(241, 135, 33, 1);        /* 橙色背景 */
    border-radius: 50%;         /* 圆形 */
    z-index: 2;                 /* 确保在最上层 */
}

/* Canvas 自定义时间线容器样式 */

/* ========== 时间线容器和项目样式（备用/兜底样式） ========== */

.timeline-container {
    position: relative;  /* 相对定位 */
    max-width: 1200px;   /* 最大宽度 */
    margin: 0 auto;      /* 水平居中 */
    padding: 0 20px;     /* 左右内边距 */
}

.timeline-items {
    position: relative;             /* 相对定位 */
    display: flex;                  /* 弹性布局 */
    justify-content: space-between; /* 均匀分布 */
    padding: 100px 0;               /* 上下内边距 */
}

.timeline-item {
    position: relative;             /* 相对定位 */
    width: calc(100% / 9);          /* 宽度为1/9 */
    display: flex;                  /* 弹性布局 */
    flex-direction: column;         /* 垂直排列 */
    align-items: center;            /* 居中对齐 */
}

.timeline-content {
    text-align: center;  /* 居中对齐 */
    width: 140px;        /* 固定宽度 */
    position: absolute;  /* 绝对定位 */
}

/* 时间线圆点样式 */
.timeline-dot {
    width: 12px;                                    /* 圆点宽度 */
    height: 12px;                                   /* 圆点高度 */
    background: var(--primary-color);               /* 橙色背景 */
    border: 2px solid #FFF;                         /* 白色边框 */
    border-radius: 50%;                             /* 圆形 */
    position: relative;                             /* 相对定位 */
    z-index: 2;                                     /* 层级 */
    box-shadow: 0 0 0 2px var(--primary-color);     /* 外围阴影 */
}

/* 创建虚线连接 */
.timeline-items::before {
    content: '';                    /* 空内容 */
    position: absolute;             /* 绝对定位 */
    top: 50%;                       /* 垂直居中 */
    left: 6px;                      /* 左侧位置 */
    right: 6px;                     /* 右侧位置 */
    height: 2px;                    /* 线条高度 */
    background: transparent;        /* 透明背景 */
    border-top: 2px dashed #E5E5E5; /* 虚线边框 */
    transform: translateY(-50%);    /* 垂直居中 */
}

/* 奇数项内容在上方 */
.timeline-item:nth-child(odd) .timeline-content {
    bottom: calc(100% + 20px); /* 位于圆点上方 */
}

/* 偶数项内容在下方 */
.timeline-item:nth-child(even) .timeline-content {
    top: calc(100% + 20px); /* 位于圆点下方 */
}

/* 时间线年份样式 */
.timeline-content .year {
    font-size: 18px;                /* 字体大小 */
    font-weight: bold;              /* 粗体 */
    color: var(--primary-color);    /* 橙色 */
    margin-bottom: 8px;             /* 下方边距 */
}

/* 时间线标题样式 */
.timeline-content .title {
    font-size: 14px;                /* 字体大小 */
    color: var(--text-secondary);   /* 次要文字颜色 */
    line-height: 1.5;               /* 行高 */
}

/* 添加垂直连接线 */
.timeline-item::before {
    content: '';                            /* 空内容 */
    position: absolute;                     /* 绝对定位 */
    width: 2px;                             /* 线条宽度 */
    height: 20px;                           /* 线条高度 */
    background: #E5E5E5;                    /* 灰色背景 */
    border-left: 2px dashed #E5E5E5;        /* 虚线边框 */
}

/* 奇数项连接线在上方 */
.timeline-item:nth-child(odd)::before {
    top: -20px; /* 上方位置 */
}

/* 偶数项连接线在下方 */
.timeline-item:nth-child(even)::before {
    bottom: -20px; /* 下方位置 */
}

/* 特殊标记样式 */
.timeline-item.has-mark::after {
    content: '直观';                    /* 默认标记内容 */
    position: absolute;                 /* 绝对定位 */
    color: var(--primary-color);        /* 橙色文字 */
    font-size: 12px;                    /* 小号字体 */
}

/* 第二个项目的特殊标记 */
.timeline-item:nth-child(2)::after {
    content: '取认';                    /* 标记内容 */
    top: -40px;                         /* 上方位置 */
    left: 50%;                          /* 左侧50%位置 */
    transform: translateX(-50%);        /* 水平居中 */
}

/* 第三个项目的特殊标记 */
.timeline-item:nth-child(3)::after {
    content: '直观';                    /* 标记内容 */
    top: -40px;                         /* 上方位置 */
    left: 50%;                          /* 左侧50%位置 */
    transform: translateX(-50%);        /* 水平居中 */
}

/* ========== 扎根实践样式 ========== */

.practice {
    padding: 80px 0;            /* 上下内边距 */
    background: #F8F9FA;        /* 浅灰色背景 */
}

/* 实践区域标题 */
.practice h2 {
    font-size: 36px;        /* 大号字体 */
    font-weight: bold;      /* 粗体 */
    text-align: center;     /* 居中对齐 */
    margin-bottom: 60px;    /* 下方边距 */
    color: #333333;         /* 深灰色 */
}

/* 实践卡片网格容器 */
.practice-cards-grid {
    display: grid;                      /* 网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 三列等宽 */
    gap: 40px;                          /* 列间距 */
    max-width: 1200px;                  /* 最大宽度 */
    margin: 0 auto;                     /* 水平居中 */
    justify-items: center;              /* 网格项居中对齐 */
}

/* 卡片列容器 */
.practice-column {
    display: flex;                  /* 弹性布局 */
    flex-direction: column;         /* 垂直排列 */
    gap: 24px;                      /* 卡片间距 */
    height: 724px;                  /* 固定列高 (72px * 2 + 24px + 628px - 72px) */
    width: 384px;                   /* 固定列宽 */
    align-items: center;            /* 水平居中对齐卡片 */
    justify-content: flex-start;    /* 垂直顶部对齐 */
}

/* 单个实践卡片样式 */
.practice-card {
    background: #FFFFFF;                        /* 白色背景 */
    border-radius: 12px;                        /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
    overflow: hidden;                           /* 隐藏溢出内容 */
    transition: all 0.3s ease;                 /* 过渡动画 */
    cursor: pointer;                            /* 鼠标手型 */
    border: 1px solid #E8E9EA;                 /* 浅灰色边框 */
    position: relative;                         /* 相对定位 */
    display: flex;                              /* 弹性布局 */
    flex-direction: column;                     /* 垂直排列 */
    width: 384px;                              /* 固定宽度 */
    height: 72px;                              /* 合并状态固定高度 */
}

/* 展开状态的卡片 */
.practice-card.expanded {
    height: 548px;                             /* 展开状态固定高度 */
    transition: height 0.3s ease;              /* 高度过渡动画 */
}

/* 卡片头部 */
.card-header {
    padding: 0 24px;                           /* 左右内边距，去除上下内边距 */
    background: #FFFFFF;                        /* 白色背景 */
    border-bottom: none;                       /* 去除底部边框 */
    display: flex;                              /* 弹性布局 */
    justify-content: space-between;             /* 两端对齐 */
    align-items: center;                        /* 垂直居中 */
    transition: background-color 0.3s ease;    /* 背景色过渡 */
    position: relative;                         /* 相对定位 */
    flex-shrink: 0;                            /* 不收缩 */
    height: 72px;                              /* 固定高度 */
    box-sizing: border-box;                    /* 包含内边距在内的盒模型 */
    width: 100%;                               /* 充满容器宽度 */
}

/* 展开状态的卡片头部 */
.practice-card.expanded .card-header {
    border-bottom: 1px solid transparent;          /* 恢复底部边框 */
}

/* 卡片标题样式 */
.card-header h3 {
    font-size: 16px;                           /* 调整字体大小适应72px高度 */
    font-weight: 600;                          /* 字体粗细 */
    color: #333333;                            /* 黑色文字 */
    margin: 0;                                 /* 去除默认边距 */
    line-height: 1.2;                         /* 紧凑行高 */
    text-align: left;                          /* 左对齐 */
    flex: 1;                                   /* 占据剩余空间 */
    display: flex;                             /* 弹性布局 */
    align-items: center;                       /* 垂直居中 */
    white-space: nowrap;                       /* 不换行 */
    overflow: hidden;                          /* 隐藏溢出 */
    text-overflow: ellipsis;                   /* 省略号 */
}

/* 展开状态的卡片标题调整 */
.practice-card.expanded .card-header h3 {
    font-size: 18px;                           /* 展开状态下字体稍大 */
    color: #2D3748;                            /* 展开状态下文字稍深 */
}

/* 卡片图标样式 */
.card-icon {
    font-size: 20px;                           /* 图标大小 */
    color: #f18721;                            /* 橙色图标 */
    transition: transform 0.3s ease;           /* 旋转过渡动画 */
    cursor: pointer;                           /* 鼠标手型 */
    display: flex;                             /* 弹性布局 */
    align-items: center;                       /* 垂直居中 */
    justify-content: center;                   /* 水平居中 */
    height: 24px;                             /* 固定高度 */
    text-align: center;                       /* 文本居中 */
}

/* 展开状态的卡片图标 */
.practice-card.expanded .card-icon {
    color: #f18721;                 /* 保持橙色 */
}

/* 卡片内容区域 */
.card-content {
    flex: 1;                                   /* 占据剩余空间 */
    overflow: hidden;                          /* 隐藏溢出内容 */
    opacity: 0;                                /* 初始透明 */
    height: 0;                                 /* 初始高度为0 */
    transition: opacity 0.3s ease, height 0.3s ease; /* 过渡动画 */
}

/* 展开状态的卡片内容 */
.practice-card.expanded .card-content {
    opacity: 1;                                /* 完全不透明 */
    height: auto;                              /* 自动高度 */
    max-height: 556px;                         /* 最大高度 (628px - 72px header) */
}

/* 内容内部容器 */
.content-inner {
    padding: 24px;                             /* 内边距 */
    height: 100%;                              /* 充满容器 */
    display: flex;                             /* 弹性布局 */
    flex-direction: column;                    /* 垂直排列 */
    gap: 16px;  
    padding-top: 6px;                               /* 元素间距 */
}

/* 卡片图片容器 */
.card-image {
    width: 100%;                    /* 全宽 */
    height: 180px;                  /* 固定高度 */
    overflow: hidden;               /* 隐藏溢出 */
    background: #F3F4F6;            /* 浅灰色背景 */
    position: relative;             /* 相对定位 */
    flex-shrink: 0;                 /* 不收缩 */
}

/* 卡片图片 */
.card-image img {
    width: 100%;                    /* 全宽 */
    height: 100%;                   /* 全高 */
    object-fit: cover;              /* 覆盖容器 */
    transition: transform 0.3s ease; /* 变换动画 */
}

/* 图片悬停效果已移除 */

/* 内容主体区域 */
.content-body {                /* 内边距 */
    flex: 1;                        /* 占据剩余空间 */
    
}

/* 内容头部 */
.content-header {
    color: #212121;                 /* 字体颜色 */
    font-weight: bold;              /* 粗体 */
    font-size: 16px;                /* 字号16px */
    line-height: 26px;              /* 行间距26px */
    text-align: left;               /* 左对齐 */
}

/* 内容头部段落 */
.content-header p {
    font-size: 16px;                /* 字号16px */
    font-weight: bold;              /* 粗体 */
    color: #212121;                 /* 字体颜色 */
    margin: 0;                      /* 去除边距 */
    line-height: 26px;              /* 行间距26px */
    text-align: left;               /* 左对齐 */
}

/* 年份标签样式 */
.year-tag {
    display: inline-block;          /* 内联块元素 */
    padding: 4px 12px;              /* 内边距 */
    background: #6B7280;            /* 灰色背景 */
    color: #FFFFFF;                 /* 白色文字 */
    border-radius: 12px;            /* 圆角 */
    font-size: 12px;                /* 字体大小 */
    font-weight: 500;               /* 字体粗细 */
    white-space: nowrap;            /* 不换行 */
    flex-shrink: 0;                 /* 不收缩 */
}

/* 橙色年份标签 */
.year-tag.orange {
    background: #FF6B35;            /* 橙色背景 */
}

/* 内容描述 */
.content-description {
    margin-top: 0px;                /* 与上面内容的距离0px */
    margin-bottom: 0px;             /* 下方边距 */
}

/* 创业前卡片特殊样式 - 实业智慧淬炼与描述文字间距 */
.practice-card[data-card="1"] .content-description {
    margin-top: 0px;               /* 上方边距0px */
}

/* 内容描述段落 */
.content-description p {
    font-size: 14px;                /* 字号14px */
    color: #757575;                 /* 字体颜色 */
    line-height: 22px;              /* 行间距22px */
    text-align: left;               /* 左对齐 */
    margin: 5px 0 0 0;             /* 上边距16px，其他边距为0 */
    padding: 0 0 0 0;
}

/* 内容描述段落中的span标签 */
.content-description p span {
    color: #f18721;                 /* 字体颜色 */
    font-size: 14px;                /* 字号14px */
    line-height: 22px;              /* 行间距22px */
    text-align: left;               /* 左对齐 */
    margin-right: 4px;
}



/* ========== 响应式设计适配 ========== */

/* 中等屏幕适配 (1200px以下) */
@media (max-width: 1200px) {
    .practice-cards-grid {
        padding: 0 20px;            /* 左右内边距 */
        gap: 20px;                  /* 减少间距 */
    }
    
    .practice-column {
        height: 700px;              /* 中等屏幕调整列高 */
    }
}

@media (max-width: 992px) {
    .practice-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    }
    
    .practice-column {
        height: auto;              /* 自适应高度 */
    }
    
    .practice-column:last-child {
        grid-column: 1 / -1;       /* 最后一列跨越所有列 */
        max-width: 400px;          /* 最大宽度 */
        margin: 0 auto;            /* 水平居中 */
    }
}

@media (max-width: 768px) {
    .practice-cards-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    .practice-column {
        height: auto;              /* 自适应高度 */
    }
    
    .practice-column:last-child {
        grid-column: auto;         /* 重置跨列 */
        max-width: none;           /* 重置最大宽度 */
    }
}

/* ========== 文化演绎样式 ========== */

.culture {
    padding: 0;    /* 上下内边距 */
    background: #FFFFFF; /* 白色背景 */
    padding-bottom: 100px; /* 增加与团队风采区域的距离 */
    margin-top: 80px;
}
.divider {
    height: 2px;
    background: #E5E5E5;
    margin: 64px 345px 0px 345px;
}
/* 文化区域标题 */
.culture h2 {
    font-size: 36px;        /* 大号字体 */
    font-weight: bold;      /* 粗体 */
    text-align: center;     /* 居中对齐 */
    margin-bottom: 80px;    /* 下方边距 */
}

/* 文化作品网格布局 */
.culture-grid {
    display: grid;                      /* 网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 四列等宽 */
    grid-template-rows: repeat(2, 1fr);    /* 两行等高 */
    gap: 20px;                          /* 网格间距 */
    max-width: 1200px;                  /* 最大宽度 */
    margin: 0 auto;                     /* 水平居中 */
}

/* 单个文化项目样式 */
.culture-item {
    display: flex;                      /* 弹性布局 */
    flex-direction: column;             /* 垂直排列 */
    justify-content: center;            /* 垂直居中 */
    align-items: center;                /* 水平居中 */
    padding: 16px 24px;                 /* 内边距 */
    border-radius: 8px;                 /* 圆角 */
    text-align: center;                 /* 居中对齐 */
    cursor: pointer;                    /* 鼠标手型 */
    transition: all 0.3s ease;         /* 过渡动画 */
    border: 2px solid transparent;      /* 透明边框 */
    min-height: 48px;                  /* 最小高度 */
    position: relative;                 /* 相对定位 */
}

/* 为可点击的文化项目添加更明显的提示 */
/* 悬停时显示点击提示图标 */
.culture-item[data-url]:hover::after {
    opacity: 1;                         /* 显示图标 */
}

/* 文化项目标题样式 */
.culture-item .title {
    font-size: 16px;                    /* 字体大小 */
    font-weight: 500;                   /* 字体粗细 */
    color: #333333;                     /* 深灰色 */
    line-height: 1.4;                   /* 行高 */
    transition: color 0.3s ease;       /* 颜色过渡 */
}

/* 文化项目年份样式 */
.culture-item .year {
    font-size: 14px;                    /* 字体大小 */
    color: #666666;                     /* 中灰色 */
    font-weight: 400;                   /* 字体粗细 */
    transition: color 0.3s ease;       /* 颜色过渡 */
}

/* 高亮项目（橙色背景） */
.culture-item.highlight {
    background: rgba(241, 135, 33, 0.1); /* 浅橙色背景 */
    border: 2px solid rgba(241, 135, 33, 0.3); /* 橙色边框 */
}

.culture-item.highlight .title {
    color: rgba(241, 135, 33, 1);       /* 橙色标题 */
}

.culture-item.highlight .year {
    color: rgba(241, 135, 33, 0.8);     /* 橙色年份 */
}

/* 文化项目悬停效果 */
.culture-item:hover {
    background: rgba(241, 135, 33, 0.1); /* 浅橙色背景 */
    transform: translateY(-2px);        /* 轻微上移 */
    /* box-shadow: 0 4px 12px rgba(241, 135, 33, 0.2); 橙色阴影 */
}

.culture-item:hover .title {
    color: rgba(241, 135, 33, 1);       /* 悬停时橙色标题 */
}

.culture-item:hover .year {
    color: rgba(241, 135, 33, 0.8);     /* 悬停时橙色年份 */
}

/* 高亮项目悬停效果增强 */
.culture-item.highlight:hover {
    background: rgba(241, 135, 33, 0.15); /* 更深的橙色背景 */
    border: 2px solid rgba(241, 135, 33, 0.8); /* 更深的橙色边框 */
    box-shadow: 0 6px 16px rgba(241, 135, 33, 0.3); /* 更深的阴影 */
}

/* ========== 全屏视频播放器样式 ========== */

/* 全屏遮罩层 */
.fullscreen-video-overlay {
    position: fixed;                    /* 固定定位 */
    top: 0;                            /* 顶部对齐 */
    left: 0;                           /* 左侧对齐 */
    width: 100%;                       /* 全宽 */
    height: 100%;                      /* 全高 */
    background: rgba(0, 0, 0, 0.95);   /* 半透明黑色背景 */
    z-index: 9999;                     /* 最高层级 */
    display: none;                     /* 初始隐藏 */
    justify-content: center;           /* 水平居中 */
    align-items: center;               /* 垂直居中 */
    animation: fadeIn 0.3s ease;       /* 淡入动画 */
}

/* 显示状态 */
.fullscreen-video-overlay.show {
    display: flex;                     /* 显示并使用弹性布局 */
}

/* 视频容器 */
.video-container {
    position: relative;                /* 相对定位 */
    width: 90%;                       /* 宽度90% */
    max-width: 1200px;                /* 最大宽度 */
    height: 90%;                      /* 高度90% */
    max-height: 80vh;                 /* 最大高度80%视口 */
    display: flex;                    /* 弹性布局 */
    justify-content: center;          /* 水平居中 */
    align-items: center;              /* 垂直居中 */
    background: #000;                 /* 黑色背景 */
    border-radius: 8px;               /* 圆角 */
    overflow: hidden;                 /* 隐藏溢出 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 阴影效果 */
}

/* 视频元素 */
.video-container video {
    width: 100%;                      /* 全宽 */
    height: 100%;                     /* 全高 */
    object-fit: contain;              /* 保持比例填充 */
    background: #000;                 /* 黑色背景 */
}

/* 关闭按钮 */
.close-video-btn {
    position: absolute;               /* 绝对定位 */
    top: 10px;                       /* 顶部10px */
    right: 15px;                     /* 右侧15px */
    background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    border: none;                    /* 无边框 */
    width: 40px;                     /* 宽度 */
    height: 40px;                    /* 高度 */
    border-radius: 50%;              /* 圆形 */
    font-size: 24px;                 /* 字体大小 */
    font-weight: bold;               /* 粗体 */
    color: #333;                     /* 深色文字 */
    cursor: pointer;                 /* 鼠标手型 */
    display: flex;                   /* 弹性布局 */
    justify-content: center;         /* 水平居中 */
    align-items: center;             /* 垂直居中 */
    transition: all 0.3s ease;      /* 过渡动画 */
    z-index: 10;                     /* 层级 */
}

/* 关闭按钮悬停效果 */
.close-video-btn:hover {
    background: rgba(255, 255, 255, 1); /* 完全不透明白色 */
    transform: scale(1.1);           /* 轻微放大 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 阴影 */
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;                  /* 从透明开始 */
        transform: scale(0.95);      /* 从略小开始 */
    }
    to {
        opacity: 1;                  /* 到完全不透明 */
        transform: scale(1);         /* 到正常大小 */
    }
}

/* ========== 响应式设计适配 ========== */

/* 中等屏幕适配 (1200px以下) */
@media (max-width: 1200px) {
    .culture-grid {
        gap: 15px;                      /* 减少间距 */
        max-width: 1000px;              /* 调整最大宽度 */
    }
    
    .culture-item {
        padding: 25px 15px;             /* 减少内边距 */
        min-height: 100px;              /* 减少最小高度 */
    }
    
    /* 视频播放器适配 */
    .video-container {
        width: 95%;                     /* 增加宽度占比 */
        height: 95%;                    /* 增加高度占比 */
    }
    
    .close-video-btn {
        width: 35px;                    /* 减小按钮尺寸 */
        height: 35px;                   /* 减小按钮尺寸 */
        font-size: 20px;                /* 减小字体 */
    }
}

/* 平板设备适配 (992px以下) */
@media (max-width: 992px) {
    .culture-grid {
        grid-template-columns: repeat(2, 1fr); /* 改为两列布局 */
        grid-template-rows: repeat(4, 1fr);    /* 四行 */
        gap: 12px;                             /* 进一步减少间距 */
    }
    
    /* 视频播放器适配 */
    .video-container {
        width: 95%;                            /* 增加宽度占比 */
        height: 85%;                           /* 调整高度占比 */
        max-height: 70vh;                      /* 最大高度70%视口 */
    }
}

/* 手机设备适配 (768px以下) */
@media (max-width: 768px) {
    .culture {
        padding: 60px 0;                /* 减少上下内边距 */
    }
    
    .culture h2 {
        font-size: 28px;                /* 减小标题字体 */
        margin-bottom: 40px;            /* 减少下边距 */
    }
    
    .culture-grid {
        grid-template-columns: 1fr;     /* 单列布局 */
        grid-template-rows: repeat(12, 1fr); /* 十二行 */
        gap: 10px;                      /* 最小间距 */
    }
    
    .culture-item {
        padding: 20px 15px;             /* 进一步减少内边距 */
        min-height: 80px;               /* 最小高度 */
    }
    
    .culture-item .title {
        font-size: 15px;                /* 减小字体 */
    }
    
    .culture-item .year {
        font-size: 13px;                /* 减小字体 */
    }
}

/* ========== 团队风采样式 ========== */

.team {
    padding: 80px 0;            /* 上下内边距 */
    /* background: var(--bg-light); 浅色背景 */
    background: url('../images/about-bottom-bg.png') no-repeat center; /* 背景图片 */
    background-size: cover; 
    height: 556px;  
}
.hezhao{
    padding: 80px 0;            /* 上下内边距 */
    /* background: var(--bg-light); 浅色背景 */
    background: url('../images/hezhao.png') no-repeat center; /* 背景图片 */
    background-size: cover; 
    height: 556px;  
}

/* 团队照片样式 */
.team-photo {
    width: 100%;                                /* 全宽 */
    border-radius: 12px;                        /* 圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* ========== 页脚导航样式 ========== */

.footer-nav-section {
    background: #FFFFFF;            /* 白色背景 */
    padding: 80px 0;                /* 上下内边距 */
    border-top: 1px solid #E5E5E5;  /* 顶部边框 */
    padding-top: 133px;
}

/* 页脚内容容器 */
.footer-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 120px;
    display: flex;                  /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    gap: 80px;                      /* 元素间距 */
    position: relative;
    
}

/* 页脚导航网格 */
.footer-nav {
    display: grid;                      /* 网格布局 */
    grid-template-columns: repeat(4, 1fr); /* 四列等宽 */
    gap: 80px;                          /* 网格间距 */
    flex: 1;                            /* 占据剩余空间 */
}

/* 导航组标题 */
.nav-group h3 {
    font-size: 14px;                /* 字体大小 */
    font-weight: 700;               /* 字体粗细 */
    color: var(--text-primary);     /* 主要文字颜色 */
    margin-bottom: 24px;            /* 下方边距 */
    
}

/* 子导航容器 */
.sub-nav {
    display: flex;          /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 16px;              /* 元素间距 */
    color: #757575;
    font-size: 12px;
}

/* 子导航链接 */
.sub-nav a {
    font-size: 14px;                /* 字体大小 */
    color: var(--text-secondary);   /* 次要文字颜色 */
    text-decoration: none;          /* 去除下划线 */
    transition: color 0.3s ease;    /* 颜色过渡动画 */
}

/* 子导航链接悬停效果 */
.sub-nav a:hover {
    color: var(--primary-color); /* 橙色高亮 */
}

/* ========== 二维码区域样式 ========== */

.qrcode-section {
    text-align: center; /* 居中对齐 */
}

/* 二维码图片 */
.qrcode-section img {
    width: 120px;       /* 固定宽度 */
    height: 120px;      /* 固定高度 */
    margin-bottom: 16px; /* 下方边距 */
}

/* 二维码说明文字 */
.qrcode-section p {
    font-size: 14px;                /* 字体大小 */
    color: var(--text-primary);     /* 主要文字颜色 */
}

/* ========== 页脚底部样式 ========== */

.footer-bottom {
    margin-top: 60px;               /* 顶部边距 */
    padding-top: 40px;              /* 顶部内边距 */
    /* border-top: 1px solid #E5E5E5;  顶部边框 */
}

/* 版权信息容器 */
.copyright {
    text-align: center; /* 居中对齐 */
}

/* 版权信息文字 */
.copyright p {
    font-size: 14px;    /* 字体大小 */
    color: #999999;     /* 浅灰色文字 */
    line-height: 1.8;   /* 行高 */
}

/* ========== 响应式设计 - 全局适配 ========== */

/* 大屏幕适配 (1440px以下) */
@media (max-width: 1440px) {
    .container,
    .header-content,
    .footer-content {
        padding: 0 80px; /* 减少左右内边距 */
    }
    /* 导航栏响应式样式已移至 css/nav.css */
    
}

/* 中等屏幕适配 (1200px以下) */
@media (max-width: 1200px) {
    /* 调整实践网格为两列 */
    .practice-grid {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    }

    /* 调整文化网格为两列 */
    .culture-grid {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        grid-template-rows: repeat(6, 1fr);    /* 六行 */
    }

    /* 减少页脚导航间距 */
    .footer-nav {
        gap: 40px; /* 减少间距 */
    }

    /* 调整时间线容器 */
    .timeline-container {
        padding: 0 40px; /* 减少左右内边距 */
    }
    
    /* 调整时间线内容宽度 */
    .timeline-content {
        width: 120px; /* 减少宽度 */
    }
    
    /* 调整时间线标题字体 */
    .timeline-content .title {
        font-size: 13px; /* 减小字体 */
    }
}

/* 平板设备适配 (992px以下) */
@media (max-width: 992px) {
    /* 调整时间线区域 */
    .timeline {
        padding: 60px 0; /* 减少上下内边距 */
    }
    
    /* 调整Canvas画布尺寸 */
    #timelineCanvas {
        width: 100%;
        max-width: 800px;
    }
    
    /* 调整状态说明 */
    .timeline-legend {
        gap: 20px;                  /* 减少间距 */
        flex-wrap: wrap;            /* 允许换行 */
    }

    /* 移动端时间线布局调整 */

    /* 时间线项目改为垂直布局 */
    .timeline-items {
        flex-direction: column;     /* 垂直排列 */
        padding: 20px 0;            /* 调整内边距 */
        gap: 40px;                  /* 元素间距 */
    }

    /* 时间线项目改为水平布局 */
    .timeline-item {
        width: 100%;                /* 全宽 */
        flex-direction: row;        /* 水平排列 */
        justify-content: flex-start; /* 左对齐 */
        gap: 20px;                  /* 元素间距 */
    }

    /* 调整时间线连接线为垂直 */
    .timeline-items::before {
        left: 6px;                          /* 左侧固定位置 */
        right: auto;                        /* 取消右侧定位 */
        top: 0;                             /* 顶部对齐 */
        bottom: 0;                          /* 底部对齐 */
        border-top: none;                   /* 取消顶部边框 */
        border-left: 2px dashed #E5E5E5;    /* 左侧虚线边框 */
        transform: none;                    /* 取消变换 */
    }

    /* 重置时间线内容位置 */
    .timeline-content {
        position: relative;         /* 相对定位 */
        text-align: left;           /* 左对齐 */
        top: auto !important;       /* 重置顶部位置 */
        bottom: auto !important;    /* 重置底部位置 */
        margin: 0 !important;       /* 重置边距 */
        width: auto;                /* 自动宽度 */
    }

    /* 隐藏时间线项目连接线 */
    .timeline-item::before {
        display: none; /* 隐藏 */
    }

    /* 隐藏时间线项目标记 */
    .timeline-item::after {
        display: none; /* 隐藏 */
    }
}

/* 手机设备适配 (768px以下) */
@media (max-width: 768px) {
    /* 导航栏响应式样式已移至 css/nav.css */

    /* 调整页面头部 */
    .page-header {
        height: 400px; /* 减少高度 */
    }

    /* 调整头部内容 */
    .header-content {
        padding: 140px 20px 0; /* 调整内边距 */
    }

    /* 调整头部文字 */
    .header-text {
    font-size: 20px;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.9);
    margin: 90px 0 72px 275px;
    }

    /* 调整通用容器 */
    .container {
        padding-top: 80px;
    }

    /* 调整统计区域 */
    .statistics .container {
        flex-direction: column; /* 垂直排列 */
        gap: 40px;              /* 元素间距 */
    }

    /* 文化网格改为单列 */
    .culture-grid {
        grid-template-columns: 1fr; /* 单列布局 */
        grid-template-rows: repeat(8, 1fr); /* 八行 */
    }
    
    /* 移动端视频播放器适配 */
    .video-container {
        width: 98%;                            /* 增加宽度占比 */
        height: 90%;                           /* 调整高度占比 */
        max-height: 60vh;                      /* 最大高度60%视口 */
    }
    
    .close-video-btn {
        width: 30px;                           /* 更小按钮尺寸 */
        height: 30px;                          /* 更小按钮尺寸 */
        font-size: 18px;                       /* 更小字体 */
        top: 5px;                              /* 调整位置 */
        right: 10px;                           /* 调整位置 */
    }

    /* 调整页脚 */
    .footer-content {
        padding: 0 20px;       /* 减少内边距 */
        flex-direction: column; /* 垂直排列 */
        gap: 40px;             /* 元素间距 */
    }

    /* 页脚导航改为两列 */
    .footer-nav {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
        gap: 32px;                             /* 调整间距 */
        border-top: 1px solid #E5E5E5;         /* 顶部边框 */
    }

    /* 调整页脚底部 */
    .footer-bottom {
        margin-top: 40px;   /* 减少顶部边距 */
        padding-top: 20px;  /* 减少顶部内边距 */
    }

    /* 调整时间线容器 */
    .timeline-container {
        padding: 0 20px; /* 减少左右内边距 */
    }
    
    /* 调整时间线内容年份 */
    .timeline-content .year {
        font-size: 16px; /* 调整字体大小 */
    }
    
    /* 调整时间线内容标题 */
    .timeline-content .title {
        font-size: 12px; /* 减小字体 */
    }

    /* 调整时间线标题 */
    .timeline h2 {
        font-size: 28px;        /* 减小字体 */
        margin-bottom: 40px;    /* 减少下边距 */
    }
    
    /* 调整Canvas画布尺寸 - 手机端 */
    #timelineCanvas {
        width: 100%;
        max-width: 100%;
        height: 400px;          /* 增加高度确保2025年文本可见 */
    }
    
    /* 调整状态说明 - 手机端 */
    .timeline-legend {
        gap: 15px;              /* 进一步减少间距 */
        margin-top: 15px;       /* 减少顶部边距 */
    }
    
    .legend-item {
        font-size: 12px;        /* 减小字体 */
    }
    
    /* 手机端时间线样式完成 */
}