/* 全局样式重置 */
* {  /* 选择所有元素 */
    margin: 0;  /* 清除外边距 */
    padding: 0;  /* 清除内边距 */
    box-sizing: border-box;  /* 设置盒模型为border-box */
}

body {  /* 页面主体样式 */
    font-family: 'Noto Sans SC', sans-serif;  /* 设置字体为思源黑体 */
    line-height: 1.6;  /* 设置行高 */
    color: #333;  /* 设置文字颜色为深灰色 */
    background-color: #fff;  /* 设置背景色为白色 */
    opacity: 0;  /* 初始透明度为0 */
    animation: fadeIn 1s ease forwards;  /* 添加淡入动画 */
    padding-top: 80px !important; /* 与导航栏高度一致，彻底消除空隙 */
}

.container {  /* 内容容器 */
    max-width: 1200px;  /* 最大宽度 */
    margin: 0 auto;  /* 水平居中 */
    padding: 4rem 2rem;  /* 内边距 */
}

/* 导航栏样式修正，确保始终在顶层且背景不透明 */
.navbar {
    width: 100%;  /* 设置宽度为100% */
    background: #fff;  /* 完全不透明白色背景 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */
    position: fixed;  /* 固定定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    z-index: 9999;  /* 保持顶层 */
}

.nav-container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: flex-start; /* 先让内容靠左，方便logo右移 */
    align-items: center;
    height: 80px;  /* 减小导航栏高度为80px */
}

.logo {
    height: 60px;  /* 减小logo高度为60px */
    margin-left: 100px; /* 向右移动100px */
}

.logo img {  /* logo图片样式 */
    height: 100%;
    width: auto;  /* 宽度自适应 */
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0 auto; /* 水平居中 */
    padding: 0;
    flex: 1;
    justify-content: center; /* 导航项居中 */
}

.nav-links li {
    margin-left: 60px; /* 增大按钮间距 */
}

.nav-links a {
    position: static; /* 取消相对定位 */
    text-decoration: none;
    color: #333;
    font-size: 1.2rem;  /* 设置导航栏字体大小为1.2rem */
    font-weight: 500;
    transition: color 0.3s;
}

@keyframes navBounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

/* 移除下划线动效相关样式 */
.nav-links a::after,
.nav-links a:hover::after,
.nav-links a.active::after {
    display: none !important;
}

.nav-links > li > a:hover,
.nav-links > li > a.active:hover {
    color: #007bff;
    animation: navBounce 0.5s;
}

.nav-links a.active {
    color: #333;
}

/* 下拉菜单样式 */
.dropdown {  /* 下拉菜单容器 */
    position: relative;  /* 相对定位 */
}

.dropdown-content {  /* 下拉菜单内容 */
    display: none;  /* 默认隐藏 */
    position: absolute;  /* 绝对定位 */
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 200px;  /* 最小宽度 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    z-index: 1001;
}

.dropdown:hover .dropdown-content {  /* 悬停时显示下拉菜单 */
    display: block;  /* 显示下拉菜单 */
}

.dropdown-content a {  /* 下拉菜单链接样式 */
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #1e50a2;
}

/* 响应式导航栏 */
@media (max-width: 992px) {
    .nav-container {
        height: 60px;
    }

    .logo {
        height: 40px;
    }

    .nav-links {
        display: none;
    }
}

/* 主内容区 */
main {
    margin-top: 0 !important; /* 移除main的顶部外边距，防止出现空隙 */
}

section {
    padding: 80px 0;  /* 设置上下内边距为80px */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .navbar {
        animation: none;  /* 移动端禁用动画 */
        transform: none;
    }
    
    body {
        animation: none;  /* 移动端禁用动画 */
        opacity: 1;
    }
    
    .hero-content h1,
    .company-intro,
    .service-image,
    .direction-item,
    .core-advantages,
    .history-image,
    .partner-logos {
        animation: none;  /* 移动端禁用动画 */
        opacity: 1;
        transform: none;
    }

    .navbar {
        height: auto;  /* 移动端下自动高度 */
    }

    .nav-container {
        flex-direction: column;  /* 改为垂直方向排列 */
        padding: 15px;  /* 调整内边距 */
    }

    .logo {
        position: static;  /* 取消绝对定位 */
        margin-bottom: 15px;  /* 设置底部外边距 */
    }

    .logo img {
        height: 50px;  /* 调整logo高度 */
    }

    .nav-links {
        margin-top: 15px;  /* 设置顶部外边距 */
        flex-wrap: wrap;  /* 允许换行 */
        justify-content: center;  /* 居中对齐 */
    }

    .nav-links li {
        margin: 5px 15px;  /* 调整列表项间距 */
    }
}

/* 主屏显示区修正，避免内容被导航栏遮挡 */
#banner {
    background-image: url('../image/shoupingbeijing.jpg');  /* 设置背景图片 */
    background-size: cover;  /* 背景图片覆盖整个区域 */
    background-position: center;  /* 背景图片居中 */
    height: 62vh;  /* 设置高度为视口高度的2/3 */
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐 */
    justify-content: center;  /* 水平居中对齐 */
    text-align: center;  /* 文字居中对齐 */
    color: white;  /* 文字颜色为白色 */
    margin-top: 0 !important; /* 移除主屏多余的顶部外边距 */
    position: relative;
    padding-top: 0; /* 移除主屏单独的 padding-top，避免重复空白 */
}

#banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);  /* 深色遮罩层 */
    z-index: 1;  /* 只在banner内容下方 */
    pointer-events: none;  /* 避免遮罩层影响交互 */
}

#banner .hero-content {
    position: relative;
    z-index: 2;  /* 确保内容在遮罩层上方 */
}

.hero-content {  /* 主屏内容容器 */
    max-width: 1000px;  /* 设置最大宽度 */
    padding: 0 20px;  /* 设置内边距 */
}

.hero-content h1 {
    font-size: 4rem;  /* 设置标题字体大小 */
    margin-bottom: 20px;  /* 设置底部外边距 */
    opacity: 0;  /* 初始透明度为0 */
    transform: translateY(30px);  /* 初始位置向下偏移 */
    animation: fadeInUp 1s ease forwards 0.5s;  /* 添加淡入上升动画，延迟0.5秒 */
}

.hero-content .subtitle {
    font-size: 1.5rem;  /* 设置副标题字体大小 */
    font-weight: 300;  /* 设置字体粗细 */
    line-height: 1.6;  /* 设置行高 */
    opacity: 0;  /* 初始透明度为0 */
    transform: translateY(30px);  /* 初始位置向下偏移 */
    animation: fadeInUp 1s ease forwards 0.8s;  /* 添加淡入上升动画，延迟0.8秒 */
}

/* 章节背景样式 */
.section-bg {  /* 章节背景类 */
    background-image: url('../image/beijing1.png');  /* 设置背景图片为beijing1.png */
    background-size: cover;  /* 背景图片覆盖整个区域 */
    background-position: center;  /* 背景图片居中 */
    background-repeat: no-repeat;  /* 背景图片不重复 */
    position: relative;  /* 相对定位 */
}

.section-bg::before {  /* 背景遮罩层 */
    content: '';  /* 伪元素内容 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: 0;  /* 左侧对齐 */
    right: 0;  /* 右侧对齐 */
    bottom: 0;  /* 底部对齐 */
    background-color: rgba(255, 255, 255, 0.9);  /* 更淡的白色遮罩，透明度从0.8调整到0.9 */
    z-index: 1;  /* 层级1 */
}

.section-bg .container {  /* 背景章节的内容容器 */
    position: relative;  /* 相对定位 */
    z-index: 2;  /* 层级2，确保内容在遮罩层之上 */
}

/* 各章节通用样式 */
section h2 {
    text-align: center;  /* 文字居中对齐 */
    margin-bottom: 40px;  /* 设置底部外边距 */
    font-size: 2.5rem;  /* 设置字体大小为2.5rem */
    color: #333;  /* 设置文字颜色 */
    position: relative;  /* 设置相对定位 */
}

section h2::after {
    content: '';  /* 添加伪元素内容 */
    position: absolute;  /* 设置绝对定位 */
    bottom: -10px;  /* 距离底部-10px */
    left: 50%;  /* 距离左侧50% */
    transform: translateX(-50%);  /* 水平居中 */
    width: 50px;  /* 设置宽度 */
    height: 3px;  /* 设置高度 */
    background-color: #007bff;  /* 设置背景颜色 */
}

/* 公司简介样式 */
.company-intro {  /* 公司简介区域 */
    background-color: #f9f9f9;  /* 设置背景颜色 */
    opacity: 0;  /* 初始透明度为0 */
    transform: translateY(30px);  /* 初始位置向下偏移 */
    animation: fadeInUp 1s ease forwards 1s;  /* 添加淡入上升动画，延迟1秒 */
}

.company-intro p {  /* 公司简介文字 */
    font-size: 1.5rem;  /* 设置字体大小 */
    line-height: 1.8;  /* 设置行高 */
    text-align: justify;  /* 文字两端对齐 */
}

/* 服务对象样式 */
.service-content {
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐 */
    gap: 20px;  /* 增加间距 */
    margin-top: 40px;  /* 设置顶部外边距 */
}

.service-list {
    flex: 1;  /* 占据剩余空间 */
}

.service-list ul {
    list-style: none;  /* 清除列表样式 */
    padding: 0;  /* 清除内边距 */
    margin: 0;  /* 清除外边距 */
}

.service-list li {
    font-size: 1.2rem;  /* 设置字体大小 */
    line-height: 2;  /* 设置行高 */
    color: #333;  /* 设置文字颜色 */
    padding: 12px 0;  /* 增加上下内边距 */
    position: relative;  /* 设置相对定位 */
    padding-left: 30px;  /* 设置左侧内边距 */
    opacity: 0;  /* 初始透明度为0 */
    transform: translateX(-20px);  /* 初始位置向左偏移 */
    transition: all 0.3s ease;  /* 添加过渡动画 */
    cursor: pointer;  /* 添加鼠标手型 */
}

/* 列表项动画延迟 */
.service-list li:nth-child(1) { animation: fadeInRight 0.8s ease forwards 0.2s; }
.service-list li:nth-child(2) { animation: fadeInRight 0.8s ease forwards 0.4s; }
.service-list li:nth-child(3) { animation: fadeInRight 0.8s ease forwards 0.6s; }
.service-list li:nth-child(4) { animation: fadeInRight 0.8s ease forwards 0.8s; }
.service-list li:nth-child(5) { animation: fadeInRight 0.8s ease forwards 1.0s; }
.service-list li:nth-child(6) { animation: fadeInRight 0.8s ease forwards 1.2s; }
.service-list li:nth-child(7) { animation: fadeInRight 0.8s ease forwards 1.4s; }
.service-list li:nth-child(8) { animation: fadeInRight 0.8s ease forwards 1.6s; }

/* 列表项悬停效果 */
.service-list li:hover {
    color: #007bff;  /* 悬停时文字变为蓝色 */
    transform: translateX(10px);  /* 悬停时向右移动 */
    background-color: rgba(0, 123, 255, 0.05);  /* 添加浅蓝色背景 */
    border-radius: 5px;  /* 添加圆角 */
}

.service-list li::before {
    content: '•';  /* 添加圆点 */
    color: #007bff;  /* 设置圆点颜色 */
    position: absolute;  /* 设置绝对定位 */
    left: 0;  /* 距离左侧0px */
    font-size: 1.5rem;  /* 设置圆点大小 */
    transition: transform 0.3s ease;  /* 添加过渡动画 */
}

.service-list li:hover::before {
    transform: scale(1.2);  /* 悬停时圆点放大 */
}

.service-image-container {  /* 服务图片容器 */
    flex: 1.5;  /* 增加图片容器占比 */
}

.service-image {
    width: 100%;
    max-width: 1200px;  /* 从900px增加到1200px */
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    opacity: 0;
    transform: translateX(20px);
    animation: fadeInLeft 0.8s ease forwards 1.8s;
}

.service-image:hover {
    transform: scale(1.02);  /* 鼠标悬停时放大1.02倍 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .service-content {
        flex-direction: column;  /* 改为垂直排列 */
        gap: 30px;  /* 减小间距 */
    }
    
    .service-list li {
        font-size: 1rem;  /* 减小字体大小 */
        padding-left: 25px;  /* 减小左侧内边距 */
    }
    
    .service-image {
        max-width: 100%;  /* 最大宽度100% */
    }
}

/* 业务方向样式 */
#direction {
    padding: 80px 0;  /* 设置上下内边距为80px */
    background-color:#f9f9f9;  /* 设置背景颜色为浅灰色 */
}

.direction-container {  /* 方向容器 */
    position: relative;  /* 设置相对定位 */
    min-height: 600px;  /* 设置最小高度为600px */
    margin-top: 40px;  /* 设置顶部外边距为40px */
    display: flex;  /* 使用弹性布局 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
    padding: 20px;  /* 设置内边距为20px */
}

/* 中心标志样式 */
.center-logo {  /* 中心logo容器 */
    position: absolute;  /* 设置绝对定位 */
    top: 50%;  /* 距离顶部50% */
    left: 50%;  /* 距离左侧50% */
    transform: translate(-50%, -50%);  /* 水平垂直居中 */
    z-index: 2;  /* 设置层级，确保显示在其他元素之上 */
}

.logo-circle {  /* logo圆形背景 */
    width: 190px;  /* 设置宽度为200px */
    height: 190px;  /* 设置高度为200px */
    background-color: #1e88e5;  /* 设置背景颜色为蓝色 */
    border-radius: 50%;  /* 设置圆形边框 */
    display: flex;  /* 使用弹性布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;  /* 垂直居中对齐 */
    color: white;  /* 设置文字颜色为白色 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);  /* 添加阴影效果 */
    animation: pulse 2s infinite;  /* 添加脉冲动画，持续2秒，无限循环 */
    padding: 20px;  /* 设置内边距为20px */
}

.center-logo-img {  /* 中心logo图片 */
    width: 150px;  /* 设置图片宽度为150px */
    height: 140px;  /* 设置图片高度为140px */
    object-fit: contain;  /* 保持图片比例，确保完整显示 */
}

/* 方向网格样式 */
.direction-grid {  /* 方向网格容器 */
    display: grid;  /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr);  /* 设置两列等宽布局 */
    gap: 30px;  /* 设置网格间距为30px */
    position: relative;  /* 设置相对定位 */
    z-index: 1;  /* 设置层级，确保在中心标志下方 */
    width: 1000px;  /* 增加整体宽度 */
}

.direction-item {
    background: white;  /* 设置背景颜色为白色 */
    padding: 30px;  /* 设置内边距为30px */
    border-radius: 10px;  /* 设置圆角为10px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  /* 添加阴影效果 */
    text-align: center;  /* 文字居中对齐 */
    transition: transform 0.3s ease;  /* 添加变换过渡动画 */
    opacity: 0;  /* 初始透明度为0 */
    animation: fadeIn 0.8s ease forwards;  /* 添加淡入动画 */
    display: flex;  /* 使用弹性布局 */
    flex-direction: column;  /* 垂直排列 */
    justify-content: center;  /* 垂直居中 */
    align-items: center;  /* 水平居中 */
    width: 100%;  /* 宽度100% */
    height: 200px;  /* 设置固定高度 */
}

.direction-item:nth-child(1) { animation-delay: 0.2s; }  /* 第一个项目延迟0.2秒 */
.direction-item:nth-child(2) { animation-delay: 0.4s; }  /* 第二个项目延迟0.4秒 */
.direction-item:nth-child(3) { animation-delay: 0.6s; }  /* 第三个项目延迟0.6秒 */
.direction-item:nth-child(4) { animation-delay: 0.8s; }  /* 第四个项目延迟0.8秒 */

.direction-item:hover {
    transform: translateY(-10px);  /* 鼠标悬停时向上移动10px */
}

.direction-icon {
    width: 80px;  /* 设置图标容器宽度为80px */
    height: 80px;  /* 设置图标容器高度为80px */
    background-color: #1e88e5;  /* 设置背景颜色为蓝色 */
    border-radius: 50%;  /* 设置圆形边框 */
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐 */
    justify-content: center;  /* 水平居中对齐 */
    margin-bottom: 20px;  /* 设置底部外边距 */
}

.direction-icon i {
    font-size: 36px;  /* 设置图标大小为36px */
    color: white;  /* 设置图标颜色为白色 */
}

.direction-item h3 {
    font-size: 16px;  /* 设置字体大小为18px */
    color: #333;  /* 设置文字颜色为深灰色 */
    line-height: 1.4;  /* 设置行高为1.4倍 */
    margin: 0;  /* 清除外边距 */
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);  /* 初始缩放比例为1 */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);  /* 初始阴影效果 */
    }
    50% {
        transform: scale(1.05);  /* 中间状态放大1.05倍 */
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);  /* 中间状态阴影加深 */
    }
    100% {
        transform: scale(1);  /* 恢复初始缩放比例 */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);  /* 恢复初始阴影效果 */
    }
}

/* 响应式设计 */
@media (max-width: 1100px) {
    .direction-grid {
        width: 90%;  /* 中等屏幕下宽度90% */
        max-width: 900px;  /* 设置最大宽度 */
    }
}

@media (max-width: 768px) {
    .direction-grid {
        width: 100%;  /* 移动端下宽度100% */
    }
    
    .direction-item {
        height: auto;  /* 移动端下高度自适应 */
        min-height: 180px;  /* 设置最小高度 */
    }
}

/* 核心优势样式 */
.core-advantages {
    background-color: white;  /* 设置背景颜色 */
    transform: translateY(30px);  /* 初始位置向下偏移 */
    animation: fadeInUp 1s ease forwards 1.4s;  /* 添加淡入上升动画，延迟1.4秒 */
}

.advantage-image {
    width: 100%;
    max-width: 1200px;  /* 从800px增加到1000px */
    display: block;
    margin: 30px auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 发展历程样式 */
.history-image {
    width: 100%;
    max-width: 1200px;  /* 从1000px增加到1200px */
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease forwards 1.6s;
}

/* 合作伙伴样式 */
.partners {
    padding: 80px 0;  /* 设置上下内边距为80px */
    background-color: #f9f9f9;  /* 设置背景颜色为浅灰色 */
}

.partners p {
    text-align: center;  /* 文字居中对齐 */
    max-width: 800px;  /* 设置最大宽度 */
    margin: 0 auto 40px;  /* 设置外边距，上下40px，左右自动居中 */
    font-size: 1.1rem;  /* 设置字体大小 */
    line-height: 1.6;  /* 设置行高 */
    color: #666;  /* 设置文字颜色 */
}

.partner-logos {
    display: grid;  /* 使用网格布局 */
    grid-template-columns: repeat(5, 1fr);  /* 设置5列等宽布局 */
    gap: 20px;  /* 设置网格间距 */
    margin-top: 40px;  /* 设置顶部外边距 */
    padding: 0 20px;  /* 设置左右内边距 */
}

.partner-logo {
    background-color: white;  /* 设置背景颜色为白色 */
    padding: 15px;  /* 设置内边距 */
    border-radius: 8px;  /* 设置圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);  /* 添加阴影效果 */
    display: flex;  /* 使用弹性布局 */
    align-items: center;  /* 垂直居中对齐 */
    justify-content: center;  /* 水平居中对齐 */
    height: 130px;  /* 设置固定高度 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* 添加过渡动画 */
}

.partner-logo:hover {
    transform: translateY(-5px);  /* 鼠标悬停时向上移动 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  /* 鼠标悬停时加深阴影 */
}

.partner-logo img {
    max-width: 90%;  /* 设置图片最大宽度 */
    max-height: 90%;  /* 设置图片最大高度 */
    object-fit: contain;  /* 保持图片比例 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .partner-logos {
        grid-template-columns: repeat(4, 1fr);  /* 中等屏幕下改为4列 */
    }
}

@media (max-width: 992px) {
    .partner-logos {
        grid-template-columns: repeat(3, 1fr);  /* 平板屏幕下改为3列 */
    }
}

@media (max-width: 768px) {
    .partner-logos {
        grid-template-columns: repeat(2, 1fr);  /* 移动端下改为2列 */
        gap: 15px;  /* 减小间距 */
    }
    
    .partner-logo {
        height: 80px;  /* 减小高度 */
        padding: 10px;  /* 减小内边距 */
    }
}

/* 页脚样式 */
footer {
    background-color: #333;  /* 设置背景颜色 */
    color: white;  /* 设置文字颜色 */
    padding: 60px 0 20px;  /* 设置内边距 */
    text-align: center; /* 页脚内容居中 */
}

.footer-content {
    display: grid;  /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  /* 自动适应列数，每列最小300px */
    gap: 40px;  /* 设置网格间距 */
}

.contact-info h3 {
    margin-bottom: 20px;  /* 设置底部外边距 */
    font-size: 1.5rem;  /* 设置字体大小 */
}

.contact-info p {
    margin-bottom: 10px;  /* 设置底部外边距 */
}

.contact-info a {
    color: #fff;  /* 设置链接颜色 */
    text-decoration: none;  /* 清除下划线 */
    transition: color 0.3s ease;  /* 添加颜色过渡动画 */
}

.contact-info a:hover {
    color: #007bff;  /* 鼠标悬停时变为蓝色 */
}

.company-info {
    text-align: center;  /* 文字居中对齐 */
    align-self: center;  /* 在交叉轴方向居中 */
}

/* 页脚居中辅助样式 */
.footer-content {
    justify-items: center;  /* 网格项居中 */
    text-align: center;  /* 文本居中 */
}

.footer-bottom {
    text-align: center;  /* 版权行居中 */
    margin-top: 20px;  /* 与上方内容留白 */
}

.footer-bottom a {
    color: white;  /* 设置链接颜色为白色，与底部导航栏颜色一致 */
    text-decoration: none;  /* 清除下划线 */
    transition: color 0.3s ease;  /* 添加颜色过渡动画 */
}

.footer-bottom a:hover {
    color: #ccc;  /* 鼠标悬停时变为浅灰色 */
}

/* 页脚社交链接样式 */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.social-link {
    color: white;  /* 设置社交链接颜色为白色，与底部导航栏颜色一致 */
    text-decoration: none;  /* 清除下划线 */
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;  /* 添加颜色过渡动画 */
}

.social-link:hover {
    color: #ccc;  /* 鼠标悬停时变为浅灰色 */
}

/* 页脚区块标题样式 */
.footer-section h3 {
    color: white;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

/* 页脚联系信息样式 */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-item {
    color: white;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contact-item i {
    color: white;
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 关于我们页面样式 */
.about-page {
    margin-top: 80px;
}

.about-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/about-hero.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.about-hero h1 {
    font-size: 3rem;
    margin: 0;
}

.company-profile {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.profile-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.profile-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.team-intro {
    padding: 80px 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.team-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-item:hover {
    transform: translateY(-5px);
}

.team-item h3 {
    color: #007bff;
    margin-bottom: 15px;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 40px auto 0;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #007bff;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-content {
    position: relative;
    width: 45%;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 20px;
    height: 20px;
    background-color: #007bff;
    border-radius: 50%;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    left: -30px;
}

.timeline-item:nth-child(even) .timeline-content::before {
    right: -30px;
}

@media (max-width: 768px) {
    .profile-content {
        grid-template-columns: 1fr;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 60px !important;
    }

    .timeline-content::before {
        left: -30px !important;
    }
}

/* 科技服务页面样式 */
.services-page {
    margin-top: 80px;
}

.services-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../image/services-hero.jpg');
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.services-hero h1 {
    font-size: 3rem;
    margin: 0;
}

.services-intro {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item i {
    font-size: 2.5rem;
    color: #007bff;
    margin-bottom: 20px;
}

.service-item h3 {
    color: #333;
    margin-bottom: 15px;
}

.service-process {
    padding: 80px 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.step {
    text-align: center;
    position: relative;
}

.step-number {
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.2rem;
    font-weight: bold;
}

.case-studies {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.case-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.case-item:hover {
    transform: translateY(-5px);
}

.case-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.case-content {
    padding: 20px;
}

.case-content h3 {
    color: #333;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .services-hero h1 {
        font-size: 2.5rem;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;  /* 移动端下调整标题字体大小 */
    }
    
    .hero-content .subtitle {
        font-size: 1.2rem;  /* 移动端下调整副标题字体大小 */
    }
}

/* 通用动画样式 */
.section {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}