/* 全局样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'PingFang SC';
}

body,
html {
    width: 100%;
    overflow-x: hidden;
    /* 防止水平滚动 */
}

/* Banner */
.banner {
    position: relative;
    width: 100%;
    height: 400px;
    /* 你可以调整高度 */
    overflow: hidden;
    text-align: center;
    margin: 0;
    /* 确保没有外边距 */
    padding: 0;
    /* 确保没有内边距 */
}

.banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 确保图片填充整个区域 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* 让图片置于背景 */
}

.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    width: 100%;
    /* 确保宽度占满父容器 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    align-items: center;
    /* 水平居中对齐子元素 */
    justify-content: center;
    /* 垂直居中对齐子元素 */
    z-index: 1;
    /* 确保文字在背景图之上 */
    gap: 12px;
}

.banner-title {
    font-size: 40px;
    font-weight: bold;
    max-width: 80%;
    margin: 0;
    padding: 0;
}

.banner-subtitle {
    font-size: 18px;
    max-width: 80%;
    margin: 0;
    padding: 0;
}

/* ================== Banner响应式优化 ================== */

/* 平板端（屏幕宽度小于 1024px） */
@media (max-width: 1024px) {
    .banner {
        height: 300px;
        /* 缩小高度 */
    }

    .banner-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 确保图片填充整个区域 */
        position: absolute;
        top: 0;
        left: 0;
    }

    .banner-title {
        font-size: 36px;
        /* 缩小标题 */
    }

    .banner-subtitle {
        font-size: 18px;
    }
}

/* 手机端（屏幕宽度小于 768px） */
@media (max-width: 768px) {
    .banner {
        height: 300px;
        /* 进一步缩小高度 */
    }

    .banner-title {
        font-size: 28px;
        /* 适配小屏 */
    }

    .banner-content {
        gap: 6px;
    }

    .banner-subtitle {
        font-size: 16px;
    }
}

/* 超小屏（屏幕宽度小于 480px） */
@media (max-width: 480px) {
    .banner {
        height: 300px;
        /* 适配小屏手机 */
    }

    .banner-content {
        gap: 6px;
    }

    .banner-title {
        font-size: 24px;
        /* 再次缩小标题 */
    }

    .banner-subtitle {
        font-size: 14px;
    }
}

/* 顶部导航 */
.header {
    width: 100%;
    /* 让头部占满整个屏幕宽度 */
    height: 70px;
    /* 头部高度固定为 70px */
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 让子元素水平居中 */
    align-items: center;
    /* 让子元素垂直居中 */
    position: fixed;
    /* 让头部固定在页面顶部 */
    top: 0;
    /* 让头部始终处于页面的最上方 */
    z-index: 1000;
    /* 提高层级，确保头部不会被其他内容遮挡 */
    padding: 0;
    /* 移除默认的内边距 */
    background: rgba(255, 255, 255, 0);
    /* 初始完全透明 */
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

.header-container {
    width: 100%;
    /* 让容器宽度占满整个父级（通常是 `.header`） */
    max-width: 1200px;
    /* 限制最大宽度为 1200px，避免超宽 */
    display: flex;
    /* 使用 Flexbox 进行布局 */
    justify-content: space-between;
    /* 让子元素均匀分布，两端对齐 */
    align-items: center;
    /* 让子元素垂直居中 */
    padding: 0px;
    margin: 0 auto;
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.5);
    /* 滚动后变成半透明白色 */
    backdrop-filter: blur(10px); 
    /* 模糊 10px */
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.1);
}


.hho-logo {
    height: 24px;
    /* 设置容器的高度为 24px */
}

.hho-logo img {
    height: 100%;
    /* 高度占满父容器 */
    width: auto;
    /* 宽度自适应，保持图片比例 */
}

.nav-links {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    gap: 64px;
    /* 子元素之间的间距为 64px */
}

.nav-item {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
    cursor: pointer;
    /* 鼠标悬停时显示为手型指针 */
    position: relative;
    /* 设置为相对定位 */
}

.nav-link {
    display: flex;
    align-items: center;
    color: #000000;
    gap: 4px;
    /* 图标和文字之间的间距 */
    white-space: nowrap;
    /* 禁止文字换行 */
    cursor: pointer;
    text-decoration: none !important;
    /* 强制去除下划线 */
}

.nav-item-text {
    font-weight: 500;
    font-size: 14px;
    line-height: auto;
    color: #000000;
}

.nav-item-icon {
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #FFFFFF;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    border-radius: 8px;
    z-index: 1;
}

.dropdown-item {
    color: #666666;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown-item:hover {
    color: #2DCCD3;
}

.nav-item:hover .dropdown-content {
    display: block;
}

/* ====================== 移动端菜单按钮 ====================== */
.menu-toggle {
    display: none; /* 默认隐藏，只在移动端显示 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    transition: all 0.3s ease; /* 添加过渡效果，使切换更平滑 */
    z-index: 1001; /* 确保菜单按钮在最上层 */
}

/* 按钮切换为激活状态时的样式 */
.menu-toggle.active {
    transform: rotate(180deg); /* 旋转动画效果 */
}

/* ====================== 移动端侧边栏菜单 ====================== */
.mobile-menu {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 44px; /* 从导航栏下方开始 */
    left: -100%; /* 默认隐藏在屏幕左侧外 */
    width: 100%; /* 宽度占满整个屏幕 */
    height: calc(100vh - 44px); /* 高度为视窗高度减去导航栏高度 */
    background-color: #FFFFFF; /* 背景色为白色 */
    box-shadow: 0 -0.5px 0px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    transition: left 0.3s ease; /* 添加平滑过渡效果 */
    z-index: 1000; /* 确保菜单在其他内容之上 */
    padding: 0; /* 上下内边距 */
    overflow-y: auto; /* 内容过多时可滚动 */
}

/* 激活时的样式 */
.mobile-menu.active {
    left: 0; /* 滑入屏幕 */
}

/* ====================== 菜单组样式 ====================== */
.menu-group {
    border-bottom: 1px solid #F5F5F5; /* 组之间的分隔线 */
}

/* 菜单组标题样式 */
.menu-group-header {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 24px 16px; /* 上下左右内边距 */
    font-size: 16px; /* 字体大小 */
    font-weight: 500; /* 字体粗细 */
    color: #000000; /* 文字颜色 */
    cursor: pointer; /* 鼠标手型 */
    font-family: 'PingFang SC', sans-serif; /* 字体 */
}

.menu-group-header a {
    color: #333333; /* 字体颜色 */
    text-decoration: none; /* 去除下划线 */
}

/* 无箭头的菜单组标题 */
.menu-group-header.no-arrow {
    padding: 24px 16px; /* 保持一致的内边距 */
}

/* 箭头图标默认样式 */
.arrow-icon {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* 添加平滑过渡效果 */
    transform-origin: center; /* 设置旋转中心点 */
}

/* 展开状态的箭头图标 */
.menu-group.active .arrow-icon {
    transform: rotate(180deg); /* 旋转箭头 */
}

/* 菜单组内容默认样式（折叠状态） */
.menu-group-content {
    max-height: 0; /* 初始高度为0 */
    overflow: hidden; /* 隐藏溢出内容 */
    transition: max-height 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); /* 平滑过渡效果 */
}

/* 激活状态的菜单组内容 */
.menu-group.active .menu-group-content {
    max-height: 500px; /* 足够大的高度以容纳内容 */
}

/* 菜单项样式 */
.menu-group-content a {
    display: block; /* 块级元素 */
    padding: 24px 32px; /* 左侧缩进，区分层级 */
    font-size: 14px; /* 字体大小 */
    color: #333333; /* 字体颜色 */
    text-decoration: none; /* 去除下划线 */
    border-top: 1px solid #F5F5F5; /* 顶部分隔线 */
    font-family: 'PingFang SC', sans-serif; /* 字体 */
    font-weight: 400; /* 正常字重 */
}

/* 当前选中的语言样式 */
.active-language {
    color: #2DCCD3 !important; /* 当前选中的语言文字颜色 */
    font-weight: 500 !important; /* 稍微加粗 */
}

/* 菜单项悬停效果 */
.menu-group-content a:hover {
    background-color: #F8F8F8; /* 悬停时的背景色 */
    color: #2DCCD3; /* 悬停时文字颜色变化 */
}


/* ================== 顶部导航 响应式优化 ================== */
/* 🌟 移动端适配（小于等于 1024px 时生效） */
@media (max-width: 1024px) {

    .header {
        height: 44px; /* 移动端导航栏高度 */
        background-color: #FFFFFF; /* 背景色为白色 */
        box-shadow: 0 0.5px 0px rgba(0, 0, 0, 0.1); /* 底部阴影线 */
    }
    /* ✅ 让 header 仅显示 LOGO 和 菜单按钮 */
    .header-container {
        justify-content: space-between; /* 左右对齐 */
        padding: 0 16px; /* 两侧留白增加至16px */
    }

    /* ✅ 隐藏桌面端导航菜单 */
    .nav-links {
        display: none;
    }

    /* ✅ 隐藏桌面端切换语言 */
    .nav-item {
        display: none;
    }

    .hho-logo {
        height: 20px; /* 设置容器的高度为 20px */
    }

    /* ✅ 显示菜单按钮 */
    .menu-toggle {
        display: flex; /* 让按钮可见 */
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center; /* 居中对齐图标 */
    }
    
    /* ✅ 移动端菜单项的布局与样式 */
    .mobile-menu {
        display: block; /* 显示为块级元素但默认在屏幕外 */
    }
    
    /* 添加下拉菜单组标题样式 */
    .mobile-menu-group {
        margin-top: 8px;
        margin-bottom: 4px;
        padding: 0 24px;
        font-size: 14px;
        color: #999999;
        font-weight: 500;
    }
}

/* ====================== 底部导航 ====================== */
.footer {
    width: 100%; /* 占满宽度 */
    background-color: #1F2329; /* 底部导航背景色为黑色 */
    padding: 64px 0 0 0; /* 上方内边距 */
}

/* 底部导航内容容器 */
.footer-container {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0; /* 两侧内边距 */
}

/* Logo和描述 */
.footer-top {
    width: 1200px;
    display: flex; /* 弹性布局 */
    margin-bottom: 64px; /* 底部外边距 */
    gap: 16px;
}

/* 底部Logo容器 */
.footer-logo {
    height: 24px; /* Logo高度 */
    width: 78px; /* Logo宽度 */
}

/* Logo图片容器 */
.footer-logo-img {
    display: flex; /* 弹性布局 */
    margin: 0 auto; /* 水平居中 */
    height: 100%; /* 高度100% */
    width: 100%; /* 宽度100% */
}

/* 公司简介文本 */
.footer-description {
    font-size: 14px; /* 字体大小 */
    color: #CCCCCC; /* 文字颜色 */
}

/* 导航区域（一行显示） */
.footer-nav {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 允许换行（在小屏幕上） */
    justify-content: space-between; /* 均匀分布 */
    margin-bottom: 64px; /* 底部外边距 */
}

/* 导航分组 */
.footer-nav-group {
    min-width: 120px; /* 最小宽度 */
}

/* 导航标题 */
.footer-nav-title {
    font-size: 16px; /* 字体大小 */
    font-weight: 400; /* 字体粗细 */
    color: #FFFFFF; /* 文字颜色 */
    margin-bottom: 32px; /* 底部外边距 */
}

/* 导航链接列表 */
.footer-nav-links {
    list-style: none; /* 去除列表样式 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 32px; /* 链接间距 */
}

/* 导航链接项 */
.footer-nav-links li {
    font-size: 14px; /* 字体大小 */
}

/* 导航链接 */
.footer-nav-links a {
    color: #CCCCCC; /* 文字颜色 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease; /* 颜色过渡效果 */
    font-weight: 400; /* 字体粗细 */
}

/* 导航链接悬停效果 */
.footer-nav-links a:hover {
    color: #2DCCD3; /* 悬停时文字颜色 */
}

/* 底部分割线 */
.footer-divider {
    width: 100%; /* 占满宽度 */
    height: 1px; /* 高度 */
    background-color: #666666; /* 分割线颜色 */
}

/* 底部版权区域 */
.footer-bottom {
    width: 100%; /* 占满宽度 */
    padding: 32px; /* 上下内边距 */
}

/* 底部版权容器 */
.footer-bottom-container {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding-top: 0; /* 两侧内边距 */
}

/* 版权文本 */
.copyright {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    max-width: 1200px; /* 最大宽度 */
}

.copyright p {
    font-size: 14px; /* 字体大小 */
    color: #999999; /* 文字颜色 */
    font-weight: 400; /* 字体粗细 */
}

/* ================== 底部导航 响应式优化 ================== */

/* 平板端（屏幕宽度小于 1024px） */
@media (max-width: 1024px) {
    .footer {
        padding-top: 48px; /* 减少上方内边距 */
    }
    
    .footer-top {
        margin-bottom: 48px; /* 减少底部外边距 */
    }
    
    .footer-nav {
        display: flex;
        flex-wrap: nowrap; /* 不换行 */
        margin-bottom: 48px; /* 减少底部外边距 */
    }
    
    /* 创建两个模块布局 */
    .footer-nav-group:nth-child(1),
    .footer-nav-group:nth-child(2) {
        width: 50%; /* 第一模块占一半 */
        padding: 24px;
    }
    
    .footer-nav-group:nth-child(3),
    .footer-nav-group:nth-child(4) {
        width: 50%; /* 第二模块占一半 */
        padding: 24px;
    }
    
    /* 自营品牌和HHO服务左右对齐 */
    .footer-nav-group:nth-child(1) {
        text-align: left;
    }
    
    .footer-nav-group:nth-child(2) {
        text-align: left;
    }
    
    /* 关于我们和联系我们左右对齐 */
    .footer-nav-group:nth-child(3) {
        text-align: left;
    }
    
    .footer-nav-group:nth-child(4) {
        text-align: left;
    }
    
    .footer-nav-title {
        margin-bottom: 24px; /* 减少标题底部外边距 */
    }
    
    .footer-nav-links {
        gap: 16px; /* 减少链接间距 */
    }
    
    .footer-bottom {
        width: 100%;
        padding: 16px;
    }

    .hho-footer-brand {
        padding: 24px 16px; /* 减少内边距 */
        align-items: center; /* 垂直居中 */
    }
    
    .hho-footer-brand-left {
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    
    .copyright {
        display: flex;
        align-items: center; /* 垂直居中 */
    }
}

/* 手机端（屏幕宽度小于 768px） */
@media (max-width: 768px) {
    .footer {
        padding-top: 32px; /* 进一步减少上方内边距 */
    }
    
    .footer-top {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
        gap: 16px; /* 元素间距 */
        margin-bottom: 32px; /* 减少底部外边距 */
    }
    
    .footer-nav {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        gap: 20px; /* 增加分组间距 */
        margin-bottom: 32px; /* 减少底部外边距 */
    }
    
    /* 适配手机端的两个模块布局 */
    .footer-nav-group:nth-child(1),
    .footer-nav-group:nth-child(2) {
        width: 45%; /* 宽度稍微调整 */
        padding: 12px;
    }
    
    .footer-nav-group:nth-child(3),
    .footer-nav-group:nth-child(4) {
        width: 45%; /* 宽度稍微调整 */
        padding: 12px;
    }
    
    .hho-footer-brand {
        display: flex;
        flex-direction: row; /* 保持水平排列 */
        align-items: center; /* 垂直居中 */
        padding: 16px; /* 减少内边距 */
    }
    
    .hho-footer-brand-left {
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    
    .hho-footer-contact {
        display: flex;
        align-items: center; /* 垂直居中 */
    }
    
    .copyright {
        display: flex;
        align-items: center; /* 垂直居中 */
        justify-content: space-between; /* 两端对齐 */
    }
}

/* 超小屏（屏幕宽度小于 480px） */
@media (max-width: 480px) {
    .footer-logo {
        height: 20px; /* 减小Logo高度 */
    }
    
    .footer-description p {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .footer-nav-title {
        font-size: 14px; /* 减小字体大小 */
        margin-bottom: 16px; /* 减少底部外边距 */
    }
    
    .footer-nav-links {
        gap: 16px; /* 进一步减少链接间距 */
    }
    
    .footer-nav-links a {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .copyright p {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .hho-footer-brand {
        flex-direction: column; /* 超小屏改为垂直排列 */
        align-items: center; /* 水平居中 */
        gap: 16px; /* 元素间距 */
    }
    
    .hho-footer-brand-left {
        display: flex;
        flex-direction: row; /* 保持水平排列 */
        align-items: center; /* 垂直居中 */
        justify-content: center; /* 水平居中 */
        width: 100%; /* 占满宽度 */
    }
    
    .hho-footer-slogan {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .hho-footer-contact {
        justify-content: center; /* 水平居中 */
        width: 100%; /* 占满宽度 */
    }
    
    .hho-footer-mail {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .copyright {
        flex-direction: column; /* 垂直排列 */
        align-items: center; /* 水平居中 */
        gap: 8px; /* 文本间距 */
        text-align: center; /* 文本居中 */
    }
}

/* 品牌区域容器 */
.hho-footer-brand {
    width: 100%; /* 占满宽度 */
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 32px 0; /* 上下和左右内边距 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

/* 品牌区域左侧容器 */
.hho-footer-brand-left {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* logo和文案间距为4px */
}

/* 底部Logo容器 */
.hho-footer-logo {
    height: 24px; /* 高度 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
}

/* Logo图片样式 */
.hho-footer-logo img {
    width: 78px; /* 宽度 */
    height: 24px; /* 高度 */
}

/* 品牌口号样式 */
.hho-footer-slogan {
    font-size: 14px;
    color: #CCCCCC;
    font-weight: 400;
}

/* 联系方式容器 */
.hho-footer-contact {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 邮箱图标容器 */
.hho-footer-mail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 邮箱文字样式 */
.hho-footer-mail {
    font-size: 14px;
    color: #CCCCCC;
    font-weight: 400;
}

/* ================== 底部导航 品牌区域响应式优化 ================== */

/* 平板端（屏幕宽度小于 1024px） */
@media (max-width: 1024px) {
    .hho-footer-brand {
        padding: 24px 16px; /* 减少内边距 */
    }
}

/* 手机端（屏幕宽度小于 768px） */
@media (max-width: 768px) {
    .hho-footer-brand {
        flex-direction: column; /* 垂直排列 */
        align-items: flex-start; /* 左对齐 */
        gap: 16px; /* 上下元素间距 */
        padding: 16px; /* 减少内边距 */
    }
    
    .hho-footer-contact {
        margin-top: 8px; /* 增加与上方元素的间距 */
    }
}

/* 超小屏（屏幕宽度小于 480px） */
@media (max-width: 480px) {
    .hho-footer-brand-left {
        flex-direction: column; /* 垂直排列 */
        gap: 8px; /* 增加间距 */
    }
    
    .hho-footer-slogan {
        font-size: 12px; /* 减小字体大小 */
    }
    
    .hho-footer-mail {
        font-size: 12px; /* 减小字体大小 */
    }
}

/* 主要内容区域样式 */
.main-content {
    width: 100%;
    /* 主内容区域宽度占满 */
}

/* 通用部分样式 */
.section-container {
    max-width: 1200px;
    /* 内容最大宽度1200px */
    margin: 0 auto;
    /* 居中对齐 */
    padding: 0;
    /* 移除内边距 */
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中对齐 */
    gap: 64px;
    /* 子元素间距64px */
}

.section-title {
    width: 100%;
    /* 标题宽度占满 */
    text-align: center;
    /* 文本居中 */
}

.section-title h2 {
    font-size: 32px;
    /* 标题字体大小32px */
    font-weight: 600;
    /* 字体粗细600 */
    color: #1A1A1A;
    /* 标题颜色 */
    line-height: 1.4;
    /* 行高1.4 */
}

/* 公司介绍部分样式 */
.company-intro {
    padding: 128px 0;
    /* 上下内边距128px */
    width: 100%;
    /* 宽度占满 */
}

.section-text {
    max-width: 100%;
    /* 文本最大宽度100% */
    text-align: center;
    /* 文本居中 */
}

.section-text p {
    font-size: 16px;
    /* 文本字体大小16px */
    font-weight: 400;
    /* 字体粗细400 */
    line-height: 1.75;
    /* 行高1.75 */
    color: #333333;
    /* 文本颜色 */
}

.company-image {
    width: 100%;
    /* 图片容器宽度占满 */
    height: auto;
    /* 高度自适应 */
    border-radius: 24px;
    /* 圆角24px */
    overflow: hidden;
    /* 溢出隐藏 */
}

.company-image img {
    width: 100%;
    /* 图片宽度占满 */
    height: auto;
    /* 高度自适应 */
    display: block;
    /* 块级显示 */
    border-radius: 24px;
    /* 圆角24px */
}

/* 响应式样式 */
@media (max-width: 1240px) {
    .section-container, .vision-box, .values-container, .year-progress, .year-selector {
        width: 100%;
        /* 在小屏幕上减小宽度 */
    }
    
    /* 公司图片响应式 */
    .company-image {
        width: 100%;
        /* 在中等屏幕上减小宽度 */
    }
}

@media (max-width: 768px) {
    .section-container {
        gap: 32px;
        /* 减小间距 */
    }
    
    .company-intro, .vision-mission, .values {
        padding: 64px 0;
        /* 减小内边距 */
    }
    
    .values-container {
        flex-direction: column;
        /* 垂直排列 */
    }
    
    .year-display {
        flex-direction: column;
        /* 垂直排列 */
    }
    
    .vision-box {
        height: auto;
        /* 高度自适应 */
        padding: 32px 16px;
        /* 添加内边距 */
        width: 100%;
    }
    
    /* 公司图片响应式 */
    .company-image {
        border-radius: 16px;
        /* 减小圆角 */
    }
    
    .company-image img {
        border-radius: 16px;
        /* 减小圆角 */
    }
}

@media (max-width: 480px) {
    .section-title h2 {
        font-size: 24px;
        /* 减小标题字体大小 */
    }
    
    .section-text p {
        font-size: 14px;
        /* 减小文本字体大小 */
    }
    
    .vision-content h3 {
        font-size: 20px;
        /* 减小标题字体大小 */
    }
    
    .vision-content p {
        font-size: 14px;
        /* 减小文本字体大小 */
    }
    
    .year-title {
        font-size: 40px;
        /* 减小年份字体大小 */
    }
    
    .year-option {
        font-size: 18px;
        /* 减小年份选项字体大小 */
    }
    
    /* 公司图片响应式 */
    .company-image {
        border-radius: 12px;
        /* 进一步减小圆角 */
    }
    
    .company-image img {
        border-radius: 12px;
        /* 进一步减小圆角 */
    }
}

/* 愿景及使命部分样式 */
.vision-mission {
    padding: 0 0 128px;
    /* 底部内边距128px */
    width: 100%;
    /* 宽度占满 */
}

.vision-box {
    width: 1200px;
    /* 宽度1200px */
    height: 400px;
    /* 高度400px */
    background-color: #f7f7f7;
    /* 背景色 */
    border-radius: 24px;
    /* 圆角24px */
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    gap: 64px;
    /* 子元素间距64px */
}

.vision-logo {
    display: flex;
    /* Flex布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    width: 202px;
    height: 63px;
}

.vision-logo img {
    display: block;
    /* 块级显示 */
    width: 202px;
    /* 图片宽度固定 */
    height: 63px;
    /* 图片高度固定 */
    object-fit: contain;
    /* 保持图片比例，确保完整显示 */
}

.vision-content {
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 16px;
    /* 子元素间距16px */
    width: 100%;
    /* 宽度占满 */
    text-align: center;
    /* 文本居中 */
}

.vision-content h3 {
    font-size: 28px;
    /* 标题字体大小28px */
    font-weight: 500;
    /* 字体粗细500 */
    color: #1A1A1A;
    /* 标题颜色 */
    line-height: 1.4;
    /* 行高1.4 */
}

.vision-content p {
    font-size: 18px;
    /* 文本字体大小18px */
    font-weight: 400;
    /* 字体粗细400 */
    color: #333333;
    /* 文本颜色 */
    line-height: 1.778;
    /* 行高1.778 */
}

/* 价值观部分样式 */
.values {
    padding: 0 0 128px;
    /* 底部内边距128px */
    width: 100%;
    /* 宽度占满 */
}

.values-container {
    display: flex;
    /* Flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
    gap: 33px;
    /* 卡片间距33px */
    width: 1200px;
    /* 宽度1200px */
}

.value-card {
    flex: 1;
    /* 平均分配空间 */
    background-color: #f7f7f7;
    /* 背景色 */
    border-radius: 24px;
    /* 圆角24px */
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    gap: 32px;
    /* 子元素间距32px */
    padding: 16px 16px 32px;
    /* 内边距 */
}

.value-image {
    width: 100%;
    /* 图片容器宽度占满 */
    height: auto;
    /* 高度自适应 */
}

.value-image img {
    width: 100%;
    /* 图片宽度占满 */
    height: auto;
    /* 高度自适应 */
    border-radius: 16px;
    /* 圆角16px */
    display: block;
    /* 块级显示 */
}

.value-text {
    width: 100%;
    /* 文本容器宽度占满 */
    text-align: center;
    /* 文本居中 */
}

.value-text h3 {
    font-size: 28px;
    /* 标题字体大小28px */
    font-weight: 500;
    /* 字体粗细500 */
    color: #1A1A1A;
    /* 标题颜色 */
    line-height: 1.4;
    /* 行高1.4 */
}

/* 响应式样式 */
@media (max-width: 1240px) {
    .section-container, .vision-box, .values-container, .year-progress, .year-selector {
        width: 90%;
        /* 在小屏幕上减小宽度 */
    }
    
    .vision-box {
        width: 100%;
        height: auto;
        /* 高度自适应 */
        padding: 60px 30px;
        /* 添加内边距代替固定高度 */
        gap: 40px;
        /* 减小间距 */  
    }
    
    .values-container {
        width: 100%;
        gap: 24px;
        /* 减小卡片间距 */
    }
    
    .value-card {
        padding: 16px 16px 24px;
        /* 减小内边距 */
        gap: 24px;
        /* 减小间距 */
    }
}

@media (max-width: 768px) {
    .section-container {
        gap: 32px;
        /* 减小间距 */
    }
    
    .company-intro, .vision-mission, .values {
        padding: 64px 0;
        /* 减小内边距 */
    }
    
    .vision-box {
        height: auto;
        /* 高度自适应 */
        padding: 40px 20px;
        /* 减小内边距 */
        gap: 32px;
        /* 减小间距 */
    }
    
    .vision-logo {
        width: 160px;
        /* 减小宽度 */
        height: 50px;
        /* 减小高度 */
    }
    
    .vision-logo img {
        width: 160px;
        /* 减小图片宽度 */
        height: 50px;
        /* 减小图片高度 */
    }
    
    .values-container {
        flex-direction: column;
        /* 垂直排列 */
        gap: 24px;
        /* 减小间距 */
    }
    
    .value-card {
        border-radius: 16px;
        /* 减小圆角 */
        padding: 14px 14px 24px;
        /* 减小内边距 */
        gap: 20px;
        /* 减小间距 */
    }
    
    .value-image img {
        border-radius: 12px;
        /* 减小圆角 */
    }
    
    .value-text h3 {
        font-size: 24px;
        /* 减小字体大小 */
    }
    
    .year-display {
        flex-direction: column;
        /* 垂直排列 */
    }
    
    /* 公司图片响应式 */
    .company-image {
        border-radius: 16px;
        /* 减小圆角 */
    }
    
    .company-image img {
        border-radius: 16px;
        /* 减小圆角 */
    }
}

@media (max-width: 480px) {
    .section-title h2 {
        font-size: 24px;
        /* 减小标题字体大小 */
    }
    
    .section-text p {
        font-size: 14px;
        /* 减小文本字体大小 */
    }
    
    .vision-box {
        width: 100%;
        padding: 30px 16px;
        /* 进一步减小内边距 */
        gap: 24px;
        /* 进一步减小间距 */
        border-radius: 16px;
        /* 减小圆角 */
    }
    
    .vision-logo {
        width: 120px;
        /* 进一步减小宽度 */
        height: 37px;
        /* 进一步减小高度 */
    }
    
    .vision-logo img {
        width: 120px;
        /* 进一步减小图片宽度 */
        height: 37px;
        /* 进一步减小图片高度 */
    }
    
    .vision-content h3 {
        font-size: 20px;
        /* 减小标题字体大小 */
    }
    
    .vision-content p {
        font-size: 14px;
        /* 减小文本字体大小 */
    }
    
    .value-card {
        border-radius: 12px;
        /* 进一步减小圆角 */
        padding: 12px 12px 20px;
        /* 进一步减小内边距 */
        gap: 16px;
        /* 进一步减小间距 */
    }
    
    .value-image img {
        border-radius: 8px;
        /* 进一步减小圆角 */
    }
    
    .value-text h3 {
        font-size: 18px;
        /* 进一步减小字体大小 */
    }
    
    .year-title {
        font-size: 40px;
        /* 减小年份字体大小 */
    }
    
    .year-option {
        font-size: 18px;
        /* 减小年份选项字体大小 */
    }
    
    /* 公司图片响应式 */
    .company-image {
        border-radius: 12px;
        /* 进一步减小圆角 */
    }
    
    .company-image img {
        border-radius: 12px;
        /* 进一步减小圆角 */
    }
}

/* 发展历程部分样式 */
.history {
    background-color: #f7f7f7;
    /* 背景色 */
    padding: 128px 0;
    /* 内边距128px */
    width: 100%;
    /* 宽度占满 */
}

.year-display {
    display: flex;
    /* Flex布局 */
    flex-direction: row;
    /* 水平排列 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    gap: 32px;
    /* 元素间距32px */
}

.year-title {
    font-size: 60px;
    /* 年份字体大小60px */
    font-weight: 600;
    /* 字体粗细600 */
    color: #1A1A1A;
    /* 文本颜色 */
    line-height: 1.4;
    /* 行高1.4 */
}

.year-events {
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 8px;
    /* 事件间距8px */
    justify-content: center;
    /* 垂直居中 */
}

.event-item {
    display: flex;
    /* Flex布局 */
    flex-direction: row;
    /* 水平排列 */
    align-items: center;
    /* 垂直居中 */
    gap: 16px;
    /* 元素间距16px */
}

.event-month {
    display: flex;
    /* Flex布局 */
    flex-direction: row;
    /* 水平排列 */
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* 元素间距12px */
}

.month-dot {
    width: 8px;
    /* 点的宽度8px */
    height: 8px;
    /* 点的高度8px */
    background-color: #CCCCCC;
    /* 点的颜色 */
    border-radius: 50%;
    /* 圆形 */
}

.month-number {
    font-size: 18px;
    /* 月份字体大小18px */
    font-weight: 600;
    /* 字体粗细600 */
    color: #333333;
    /* 文本颜色 */
    line-height: 1.778;
    /* 行高1.778 */
}

.event-description {
    font-size: 18px;
    /* 事件描述字体大小18px */
    font-weight: 400;
    /* 字体粗细400 */
    color: #1A1A1A;
    /* 文本颜色 */
    line-height: 1.778;
    /* 行高1.778 */
}

.year-navigation {
    display: flex;
    /* Flex布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 24px;
    /* 元素间距24px */
    margin-top: 64px;
    /* 上边距64px */
}

.year-progress {
    width: 1200px;
    /* 宽度1200px */
    height: 16px;
    /* 高度16px */
    position: relative;
    /* 相对定位 */
    display: flex;
    /* Flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中 */
    padding: 0 130px;
    /* 左右添加内边距，确保与下方年份对齐 */
}

.progress-line {
    position: absolute;
    /* 绝对定位 */
    width: calc(100% - 40px);
    /* 宽度减去内边距 */
    height: 2px;
    /* 高度2px */
    background-color: #EEEEEE;
    /* 线的颜色 */
    top: 7px;
    /* 顶部位置 */
    left: 20px;
    /* 左侧位置，与内边距对应 */
}

.progress-dot {
    width: 16px;
    /* 点的宽度16px */
    height: 16px;
    /* 点的高度16px */
    border-radius: 50%;
    /* 圆形 */
    background-color: #FFFFFF;
    /* 背景色 */
    border: 2px solid #CCCCCC;
    /* 边框 */
    z-index: 1;
    /* 层级 */
    cursor: pointer;
    /* 鼠标样式 */
    transition: border-color 0.3s;
    /* 过渡效果 */
    position: relative;
    /* 相对定位，便于对齐调整 */
}

.progress-dot.active {
    border-color: #2DCCD3;
    /* 活动状态边框颜色 */
}

.year-selector {
    display: flex;
    /* Flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
    width: 1200px;
    /* 宽度1200px */
    margin-top: 10px;
    /* 与进度条保持距离 */
    padding: 0 20px;
    /* 左右添加内边距，确保与上方圆点对齐 */
}

.year-option {
    font-size: 24px;
    /* 年份选项字体大小24px */
    font-weight: 600;
    /* 字体粗细600 */
    color: #666666;
    /* 文本颜色 */
    line-height: 1.4;
    /* 行高1.4 */
    cursor: pointer;
    /* 鼠标样式 */
    transition: color 0.3s;
    /* 过渡效果 */
    text-align: center;
    /* 文本居中 */
    flex: 1;
    /* 平均分配空间 */
    position: relative;
    /* 相对定位，便于对齐调整 */
    display: flex;
    /* Flex布局 */
    justify-content: center;
    /* 水平居中 */
}

.year-option.active {
    color: #2DCCD3;
    /* 活动状态文本颜色 */
}

/* 移动端时间线默认隐藏 */
.mobile-timeline {
    display: none;
}

/* 移动端发展历程样式 */
@media (max-width: 768px) {
    .history {
        padding: 64px 0;
        /* 减小内边距 */
    }
    
    /* 隐藏原有的年份导航 */
    .year-navigation {
        display: none;
    }
    
    /* 隐藏大屏幕的年份展示 */
    .year-display {
        display: none;
    }
    
    /* 显示移动端的时间线容器 */
    .mobile-timeline {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 16px;
        position: relative;
    }
    
    /* 垂直时间线 */
    .timeline-line {
        position: absolute;
        width: 2px;
        background-color: #EEEEEE;
        top: 40px;
        bottom: 0;
        left: 28px;
        z-index: 1;
    }
    
    /* 年份块容器 */
    .timeline-year-block {
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
        position: relative;
    }
    
    /* 移动端年份标题 */
    .timeline-year-title {
        font-size: 36px;
        font-weight: 600;
        color: #1A1A1A;
        margin-bottom: 24px;
        padding-left: 48px;
        position: relative;
    }
    
    /* 年份圆点 */
    .timeline-year-dot {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #FFFFFF;
        border: 2px solid #2DCCD3;
        left: 21px;
        top: 17px;
        z-index: 2;
    }
    
    /* 移动端事件列表 */
    .timeline-year-events {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-left: 48px;
    }
    
    /* 移动端事件项 */
    .timeline-event-item {
        display: flex;
        flex-direction: column;
        position: relative;
    }
    
    /* 事件月份行 */
    .timeline-event-month {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    
    /* 月份圆点 */
    .timeline-month-dot {
        width: 8px;
        height: 8px;
        background-color: #CCCCCC;
        border-radius: 50%;
    }
    
    /* 月份数字 */
    .timeline-month-number {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
    }
    
    /* 事件描述 */
    .timeline-event-description {
        font-size: 16px;
        color: #1A1A1A;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .timeline-year-title {
        font-size: 28px;
        /* 减小字体大小 */
    }
    
    .timeline-month-number {
        font-size: 14px;
        /* 减小字体大小 */
    }
    
    .timeline-event-description {
        font-size: 14px;
        /* 减小字体大小 */
    }
}

/* 联系我们部分 */
.contact-section {
    padding: 60px 0;
    background-color: #FFFFFF;
    width: 100%;
}

.contact-content {
    width: 100%;
}

.contact-container {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-card {
    background-color: #f7f7f7;
    border-radius: 16px;
    padding: 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-image {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact-image img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-title {
    text-align: center;
}

.contact-title h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 8px;
}

.contact-title p {
    font-size: 16px;
    color: #666666;
}

.contact-mail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mail-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-address {
    font-size: 18px;
    font-weight: 500;
    color: #1A1A1A;
}

.service-time {
    font-size: 14px;
    color: #999999;
}

/* 响应式调整 */
@media (max-width: 1240px) {
    .contact-container {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 40px 0;
    }
    
    .contact-container {
        flex-direction: column;
    }
    
    .contact-card {
        padding: 24px;
    }
    
    .contact-image img {
        width: 100px;
        height: 100px;
    }
    
    .contact-title h2 {
        font-size: 20px;
    }
    
    .mail-address {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .contact-section {
        padding: 32px 0;
    }
    
    .contact-card {
        padding: 20px;
    }
    
    .contact-image img {
        width: 80px;
        height: 80px;
    }
    
    .contact-title h2 {
        font-size: 18px;
    }
    
    .contact-title p {
        font-size: 14px;
    }
    
    .mail-address {
        font-size: 14px;
    }
    
    .service-time {
        font-size: 12px;
    }
}