/* 企业文化页面样式 */

/* 企业文化内容样式 */
.culture-content {  /* 企业文化内容容器 */
    display: flex;  /* 使用flexbox布局 */
    justify-content: space-around;  /* 水平分布 */
    align-items: center;  /* 垂直居中 */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 40px;  /* 间距40px */
    margin-top: 40px;  /* 上边距40px */
}

/* 愿景项目样式 */
.vision-item {  /* 愿景项目 */
    text-align: center;  /* 文字居中对齐 */
    flex: 1;  /* 弹性增长 */
    min-width: 250px;  /* 最小宽度250px */
    padding: 30px 20px;  /* 内边距：上下30px，左右20px */
    background: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
    border-radius: 15px;  /* 圆角15px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* 过渡动画 */
}

.vision-item:hover {  /* 愿景项目悬停效果 */
    transform: translateY(-10px);  /* 向上移动10px */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);  /* 增强阴影效果 */
}

/* 愿景图标样式 */
.vision-icon {  /* 愿景图标容器 */
    width: 80px;  /* 宽度80px */
    height: 80px;  /* 高度80px */
    background: linear-gradient(135deg, #3498db, #2980b9);  /* 蓝色渐变背景 */
    border-radius: 50%;  /* 圆形 */
    display: flex;  /* 使用flexbox布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    margin: 0 auto 20px;  /* 水平居中，下边距20px */
}

.vision-icon i {  /* 愿景图标 */
    font-size: 2rem;  /* 图标大小2rem */
    color: white;  /* 图标颜色白色 */
}

/* 愿景项目标题样式 */
.vision-item h3 {  /* 愿景项目标题 */
    font-size: 2.5rem;  /* 字体大小2.5rem */
    font-weight: 600;  /* 字体粗细600 */
    color: #2c3e50;  /* 文字颜色深蓝灰色 */
    margin-bottom: 15px;  /* 下边距15px */
}

/* 愿景项目内容样式 */
.vision-item p {  /* 愿景项目内容 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    line-height: 1.6;  /* 行高1.6 */
}

/* 价值观网格样式 */
.values-grid {  /* 价值观网格容器 */
    display: grid;  /* 使用grid布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  /* 自适应列，最小宽度250px */
    gap: 30px;  /* 网格间距30px */
    margin-top: 40px;  /* 上边距40px */
}

/* 价值观卡片样式 */
.value-card {  /* 价值观卡片 */
    background: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
    border-radius: 15px;  /* 圆角15px */
    padding: 30px 20px;  /* 内边距：上下30px，左右20px */
    text-align: center;  /* 文字居中对齐 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* 过渡动画 */
}

.value-card:hover {  /* 价值观卡片悬停效果 */
    transform: translateY(-10px);  /* 向上移动10px */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);  /* 增强阴影效果 */
}

/* 价值观图标样式 */
.value-icon {  /* 价值观图标容器 */
    width: 70px;  /* 宽度70px */
    height: 70px;  /* 高度70px */
    background: linear-gradient(135deg, #e74c3c, #c0392b);  /* 红色渐变背景 */
    border-radius: 50%;  /* 圆形 */
    display: flex;  /* 使用flexbox布局 */
    align-items: center;  /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    margin: 0 auto 20px;  /* 水平居中，下边距20px */
}

.value-icon i {  /* 价值观图标 */
    font-size: 1.8rem;  /* 图标大小1.8rem */
    color: white;  <!-- 图标颜色白色 -->
}

/* 价值观卡片标题样式 */
.value-card h3 {  /* 价值观卡片标题 */
    font-size: 2.5rem;  /* 字体大小2.5rem */
    font-weight: 600;  /* 字体粗细600 */
    color: #2c3e50;  /* 文字颜色深蓝灰色 */
    margin-bottom: 15px;  /* 下边距15px */
}

/* 价值观卡片内容样式 */
.value-card p {  /* 价值观卡片内容 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    line-height: 1.6;  /* 行高1.6 */
}

/* 团队内容样式 */
.team-content {  /* 团队内容容器 */
    margin-top: 40px;  /* 上边距40px */
}

/* 团队统计样式 */
.team-stats {  /* 团队统计容器 */
    display: flex;  /* 使用flexbox布局 */
    justify-content: space-around;  /* 水平分布 */
    align-items: center;  /* 垂直居中 */
    margin-bottom: 40px;  /* 下边距40px */
    flex-wrap: wrap;  /* 允许换行 */
    gap: 30px;  /* 间距30px */
}

/* 统计项目样式 */
.stat-item {  /* 统计项目 */
    text-align: center;  /* 文字居中对齐 */
    background: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
    border-radius: 15px;  /* 圆角15px */
    padding: 30px 20px;  /* 内边距：上下30px，左右20px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    transition: transform 0.3s ease;  /* 过渡动画 */
    min-width: 150px;  /* 最小宽度150px */
}

.stat-item:hover {  /* 统计项目悬停效果 */
    transform: translateY(-5px);  /* 向上移动5px */
}

/* 统计数字样式 */
.stat-number {  /* 统计数字 */
    font-size: 3rem;  /* 字体大小3rem */
    font-weight: 700;  /* 字体粗细700 */
    color: #3498db;  /* 文字颜色蓝色 */
    margin-bottom: 10px;  /* 下边距10px */
}

/* 统计标签样式 */
.stat-label {  /* 统计标签 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    font-weight: 500;  /* 字体粗细500 */
}

/* 团队描述样式 */
.team-description {  /* 团队描述容器 */
    background: rgba(255, 255, 255, 0.9);  /* 半透明白色背景 */
    border-radius: 15px;  /* 圆角15px */
    padding: 30px;  /* 内边距30px */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    text-align: center;  /* 文字居中对齐 */
}

.team-description p {  /* 团队描述内容 */
    font-size: 1.2rem;  /* 字体大小1.2rem */
    color: #7f8c8d;  /* 文字颜色灰色 */
    line-height: 1.8;  /* 行高1.8 */
    margin: 0;  /* 外边距0 */
}

/* 响应式设计 */
@media (max-width: 768px) {  /* 平板和手机端样式 */
    .culture-content {  /* 企业文化内容容器 */
        flex-direction: column;  /* 垂直排列 */
        gap: 30px;  /* 间距30px */
    }
    
    .vision-item {  /* 愿景项目 */
        min-width: 100%;  /* 最小宽度100% */
        padding: 25px 15px;  /* 内边距：上下25px，左右15px */
    }
    
    .vision-item h3 {  /* 愿景项目标题 */
        font-size: 2rem;  /* 字体大小2rem */
    }
    
    .vision-item p {  /* 愿景项目内容 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
    
    .values-grid {  /* 价值观网格容器 */
        grid-template-columns: 1fr;  /* 单列布局 */
        gap: 20px;  /* 网格间距20px */
    }
    
    .value-card {  /* 价值观卡片 */
        padding: 25px 15px;  /* 内边距：上下25px，左右15px */
    }
    
    .value-card h3 {  /* 价值观卡片标题 */
        font-size: 2rem;  /* 字体大小2rem */
    }
    
    .value-card p {  /* 价值观卡片内容 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
    
    .team-stats {  /* 团队统计容器 */
        flex-direction: column;  /* 垂直排列 */
        gap: 20px;  /* 间距20px */
    }
    
    .stat-item {  /* 统计项目 */
        min-width: 200px;  /* 最小宽度200px */
        padding: 25px 15px;  /* 内边距：上下25px，左右15px */
    }
    
    .stat-number {  /* 统计数字 */
        font-size: 2.5rem;  /* 字体大小2.5rem */
    }
    
    .stat-label {  /* 统计标签 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
    
    .team-description {  /* 团队描述容器 */
        padding: 25px 20px;  /* 内边距：上下25px，左右20px */
    }
    
    .team-description p {  /* 团队描述内容 */
        font-size: 1.1rem;  /* 字体大小1.1rem */
    }
}

@media (max-width: 480px) {  /* 小屏幕手机端样式 */
    .vision-item {  /* 愿景项目 */
        padding: 20px 10px;  /* 内边距：上下20px，左右10px */
    }
    
    .vision-item h3 {  /* 愿景项目标题 */
        font-size: 1.8rem;  /* 字体大小1.8rem */
    }
    
    .vision-item p {  /* 愿景项目内容 */
        font-size: 1rem;  /* 字体大小1rem */
    }
    
    .value-card {  /* 价值观卡片 */
        padding: 20px 10px;  /* 内边距：上下20px，左右10px */
    }
    
    .value-card h3 {  /* 价值观卡片标题 */
        font-size: 1.8rem;  /* 字体大小1.8rem */
    }
    
    .value-card p {  /* 价值观卡片内容 */
        font-size: 1rem;  /* 字体大小1rem */
    }
    
    .stat-item {  /* 统计项目 */
        min-width: 150px;  /* 最小宽度150px */
        padding: 20px 10px;  /* 内边距：上下20px，左右10px */
    }
    
    .stat-number {  /* 统计数字 */
        font-size: 2rem;  /* 字体大小2rem */
    }
    
    .stat-label {  /* 统计标签 */
        font-size: 1rem;  /* 字体大小1rem */
    }
    
    .team-description {  /* 团队描述容器 */
        padding: 20px 15px;  /* 内边距：上下20px，左右15px */
    }
    
    .team-description p {  /* 团队描述内容 */
        font-size: 1rem;  /* 字体大小1rem */
    }
}

/* 动画效果 */
@keyframes fadeInUp {  /* 淡入向上动画 */
    from {  /* 动画开始状态 */
        opacity: 0;  /* 透明度0 */
        transform: translateY(30px);  /* 向下偏移30px */
    }
    to {  /* 动画结束状态 */
        opacity: 1;  /* 透明度1 */
        transform: translateY(0);  /* 回到原位置 */
    }
}

/* 元素进入动画 */
.vision-item, .value-card, .stat-item, .team-description {  /* 所有卡片元素 */
    animation: fadeInUp 0.8s ease-out;  /* 淡入向上动画，持续0.8秒 */
}

.vision-item:nth-child(1) { animation-delay: 0.1s; }  /* 第1个愿景项目延迟0.1秒 */
.vision-item:nth-child(2) { animation-delay: 0.2s; }  /* 第2个愿景项目延迟0.2秒 */
.vision-item:nth-child(3) { animation-delay: 0.3s; }  /* 第3个愿景项目延迟0.3秒 */

.value-card:nth-child(1) { animation-delay: 0.1s; }  /* 第1个价值观卡片延迟0.1秒 */
.value-card:nth-child(2) { animation-delay: 0.2s; }  /* 第2个价值观卡片延迟0.2秒 */
.value-card:nth-child(3) { animation-delay: 0.3s; }  /* 第3个价值观卡片延迟0.3秒 */
.value-card:nth-child(4) { animation-delay: 0.4s; }  /* 第4个价值观卡片延迟0.4秒 */

.stat-item:nth-child(1) { animation-delay: 0.1s; }  /* 第1个统计项目延迟0.1秒 */
.stat-item:nth-child(2) { animation-delay: 0.2s; }  /* 第2个统计项目延迟0.2秒 */
.stat-item:nth-child(3) { animation-delay: 0.3s; }  /* 第3个统计项目延迟0.3秒 */