/* 全局样式 */
* {
    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: 600px;
    /* 你可以调整高度 */
    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: 30%;
    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;
        top: 40%;
    }

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

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

    .banner-content {
        gap: 6px;
    }

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

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

/* 顶部导航 */
.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.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; /* 减小字体大小 */
    }
}

/* 品牌数字化出海营销 */
.digital-marketing {
    /* 设置模块的外边距和内边距 */
    padding: 64px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.digital-marketing-header {
    /* 设置标题区域的布局 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 64px 0 0;
    width: 100%;
    max-width: 1200px;
}

.digital-marketing-title {
    /* 设置主标题的文字样式 */
    font-weight: 600;
    font-size: 40px;
    line-height: 1.4;
    color: #000000;
    margin: 0;
}

.digital-marketing-subtitle {
    /* 设置副标题的文字样式 */
    font-weight: 350;
    font-size: 24px;
    line-height: auto;
    color: #000000;
    margin: 0;
}

.service-cards {
    /* 设置服务卡片容器的布局 */
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
    max-width: 1200px;
}

.service-card {
    /* 设置单个服务卡片的样式 */
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 64px;
    padding: 32px;
    background: #F8FAFD;
    border-radius: 32px;
    height: 500px;
}

.service-image {
    /* 设置服务卡片图片区域的样式 */
    flex: 1;
    border-radius: 32px;
    overflow: hidden;
}

.service-image img {
    /* 设置图片的样式 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #D9D9D9;
}

.service-info {
    /* 设置服务信息区域的布局 */
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.service-icon {
    /* 设置服务图标的样式 */
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-icon img{
    /* 设置服务图标的样式 */
    width: 100%;
    height: 100%;
    
}

.service-content {
    /* 设置服务内容区域的布局 */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.service-title {
    /* 设置服务标题的文字样式 */
    font-family: 'PingFang SC';
    font-weight: 600;
    font-size: 32px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0;
}

.service-description {
    /* 设置服务描述的文字样式 */
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: 18px;
    line-height: 1.778;
    color: #666666;
    margin: 0;
}

/* 服务报名按钮样式 */
.service-signup-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    padding: 12px 0;
    background-color: #2DCCD3;
    border-radius: 100px;
    text-decoration: none;
    font-family: 'PingFang SC';
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #FFFFFF;
    transition: background-color 0.3s ease;
}

.service-link {
    /* 设置联系我们链接的文字样式 */
    font-family: 'PingFang SC';
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #2DCCD3;
    text-decoration: none;
    margin-top: auto;
}

/* 平板电脑适配 (1024px) */
@media screen and (max-width: 1024px) {
    .digital-marketing {
        /* 调整平板电脑下的内边距 */
        padding: 64px 48px;
    }

    .service-card {
        /* 调整服务卡片的高度和内边距 */
        height: auto;
        min-height: 400px;
        padding: 24px;
        gap: 32px;
    }
}

/* 手机屏幕适配 (768px) */
@media screen and (max-width: 768px) {
    .digital-marketing {
        padding: 24px 12px;
        gap: 12px;
    }

    .digital-marketing-header {
        padding: 12px 0 0;
        gap: 4px;
        text-align: center;
    }

    .digital-marketing-title {
        font-size: 24px;
    }

    .digital-marketing-subtitle {
        font-size: 16px;
    }

    .service-cards {
        gap: 32px;
    }

    .service-card {
        flex-direction: column;
        height: auto;
        gap: 32px;
        padding: 24px;
        align-items: center;
        text-align: center;
    }

    .service-image {
        width: 100%;
        height: 240px;
        border-radius: 16px;
    }

    .service-info {
        gap: 24px;
        align-items: center;
    }

    .service-icon {
        margin: 0 auto;
    }

    .service-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .card-service-title {
        font-size: 20px;
        text-align: center;
    }

    .service-description {
        font-size: 14px;
        text-align: center;
    }

    .service-link {
        width: 100%;
        text-align: center;
        font-size: 14px;
        margin-bottom: 12px;
    }
}

/* 六大服务轮播模块样式 */
.service-banner {
    padding: 64px 0;
    /* 上下内边距64px */
    width: 100%;
    /* 宽度100% */
}

.service-banner-container {
    max-width: 1200px;
    /* 最大宽度1200px */
    margin: 0 auto;
    /* 水平居中 */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    align-items: center;
    /* 水平居中对齐 */
    gap: 64px;
    /* 子元素间距64px */
}

/* 标题样式 */
.service-title {
    width: 100%;
    /* 宽度100% */
    text-align: center;
    /* 文字居中 */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 16px;
    /* 间距16px */
}

.card-service-title {
    width: 100%;
    /* 宽度100% */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 16px;
    /* 间距16px */
    font-weight: 600;
    /* 字体粗细 */
    font-size: 32px;
    /* 字体大小 */
    line-height: 1.4;
    /* 行高 */
    color: #1A1A1A;
    /* 文字颜色 */
    margin: 0;
    /* 外边距为0 */
}

.service-title h2 {
    font-weight: 600;
    /* 字体粗细 */
    font-size: 40px;
    /* 字体大小 */
    line-height: 1.4;
    /* 行高 */
    color: #1A1A1A;
    /* 文字颜色 */
    margin: 0;
    /* 外边距为0 */
}

.service-title p {
    /* 字体系列 */
    font-weight: 400;
    /* 字体粗细 */
    font-size: 24px;
    /* 字体大小 */
    line-height: auto;
    /* 行高 */
    color: #000000;
    /* 文字颜色 */
    margin: 0;
    /* 外边距为0 */
}

/* 轮播区域包装器，包含轮播容器和左右按钮 */
.service-carousel-wrapper {
    position: relative;
    /* 相对定位 */
    width: 100%;
    /* 宽度100% */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

/* 轮播容器样式 */
.service-carousel-container {
    position: relative;
    /* 相对定位 */
    width: 1200px;
    /* 固定宽度1200px */
    overflow: hidden;
    /* 溢出隐藏 */
}

/* 轮播内容样式 */
.service-carousel {
    display: flex;
    /* 弹性布局 */
    transition: transform 0.5s ease;
    /* 平滑过渡效果 */
    width: 100%;
    /* 宽度100% */
}

/* 服务卡片样式 */
.service-card {
    min-width: 100%;
    /* 最小宽度100%，使每个卡片占据整个容器 */
    display: flex;
    /* 弹性布局 */
    gap: 64px;
    /* 内部元素间距 */
    padding: 32px;
    /* 内边距 */
    background-color: #f7f7f7;
    /* 背景颜色 */
    border-radius: 32px;
    /* 圆角 */
    box-sizing: border-box;
    /* 盒模型计算方式 */
    height: auto;
    /* 固定高度 */
}

/* 服务卡片内容区域 */
.service-card-content {
    flex: 1;
    /* 弹性增长 */
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    justify-content: space-between;
    /* 两端对齐 */
}

/* 服务卡片顶部区域 */
.service-card-top {
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 32px;
    /* 间距32px */
}

/* 服务Logo样式 */
.service-logo {
    height: 48px;
    /* 高度48px */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
}

.service-logo img {
    height: 100%;
    /* 高度100% */
    width: auto;
    /* 宽度自适应 */
    object-fit: contain;
    /* 保持图片比例 */
}

/* 服务信息包装器 */
.service-info-wrapper {
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 16px;
    /* 间距16px */
}

/* 服务信息样式 */
.service-info {
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    justify-content: space-between;
    /* 两端对齐 */
    height: 100%;
    /* 占满高度 */
}

.service-info-content {
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直排列 */
    gap: 16px;
    /* 间距16px */
}

/* 服务名称样式 */
.service-name {
    font-family: 'PingFang SC', sans-serif;
    /* 字体系列 */
    font-weight: 600;
    /* 字体粗细 */
    font-size: 32px;
    /* 字体大小 */
    line-height: 1.4;
    /* 行高 */
    color: #1A1A1A;
    /* 文字颜色 */
    margin: 0;
    /* 外边距为0 */
}

/* 服务描述样式 */
.service-desc {
    font-family: 'PingFang SC', sans-serif;
    /* 字体系列 */
    font-weight: 400;
    /* 字体粗细 */
    font-size: 18px;
    /* 字体大小 */
    line-height: 1.78;
    /* 行高 */
    color: #666666;
    /* 文字颜色 */
    margin: 0;
    /* 外边距为0 */
}

/* 服务卡片底部区域 */
.service-card-bottom {
    margin-top: auto;
    /* 自动上边距，将按钮推到底部 */
}

/* 了解更多按钮样式 */
.service-more {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 8px;
    /* 间距8px */
    text-decoration: none;
    /* 移除下划线 */
    padding: 12px 48px;
    /* 内边距 */
    background-color: #2DCCD3;
    /* 背景颜色 */
    border-radius: 100px;
    /* 圆角 */
    width: fit-content;
    /* 宽度适应内容 */
}

.service-more span {
    font-family: 'PingFang SC', sans-serif;
    /* 字体系列 */
    font-weight: 600;
    /* 字体粗细 */
    font-size: 16px;
    /* 字体大小 */
    line-height: 1.4;
    /* 行高 */
    color: #FFFFFF;
    /* 文字颜色 */
}

/* 服务图片区域样式 */
.service-image {
    width: 600px;
    /* 固定宽度 */
    height: 100%;
    /* 高度100% */
    border-radius: 24px;
    /* 圆角 */
    overflow: hidden;
    /* 溢出隐藏 */
    background-color: #f0f0f0;
    /* 背景颜色，作为图片占位 */
}

.service-image img {
    width: 100%;
    /* 图片宽度100% */
    height: 100%;
    /* 图片高度100% */
    object-fit: cover;
    /* 填充模式 */
}

/* 轮播按钮样式 */
.service-carousel-btn {
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 垂直居中 */
    transform: translateY(-50%);
    /* 垂直居中微调 */
    width: 48px;
    /* 按钮宽度 */
    height: 48px;
    /* 按钮高度 */
    border-radius: 50%;
    /* 圆形按钮 */
    background-color: white;
    /* 背景色 */
    border: none;
    /* 无边框 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    cursor: pointer;
    /* 鼠标样式 */
    z-index: 10;
    /* 层级 */
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
    /* 阴影效果 */
    margin: 0;
    /* 移除外边距 */
}

/* 左侧按钮样式 */
.service-carousel-btn-left {
    left: -112px;
    /* 向左偏移(64px + 48px的按钮宽度一半) */
}

/* 右侧按钮样式 */
.service-carousel-btn-right {
    right: -112px;
    /* 向右偏移(64px + 48px的按钮宽度一半) */
}

/* 轮播指示器样式 */
.service-carousel-indicator {
    width: 384px;
    /* 宽度 */
    height: 4px;
    /* 高度 */
    position: relative;
    /* 相对定位 */
}

/* 指示器轨道样式 */
.indicator-track {
    width: 100%;
    /* 宽度100% */
    height: 100%;
    /* 高度100% */
    background-color: #EEEEEE;
    /* 背景颜色 */
    border-radius: 100px;
    /* 圆角 */
}

/* 指示器活动状态样式 */
.indicator-active {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    height: 100%;
    /* 高度100% */
    width: 16.666%;
    /* 宽度，6个卡片，每个占比16.666% */
    background-color: #2DCCD3;
    /* 活动状态颜色 */
    border-radius: 100px;
    /* 圆角 */
    transition: transform 0.5s ease;
    /* 平滑过渡效果 */
}

/* 平板端适配（屏幕宽度小于 1024px） */
@media (max-width: 1024px) {
    .service-banner-container {
        padding: 0 32px;
        /* 左右内边距 */
    }

    .service-carousel-container {
        width: 100%;
        /* 宽度100% */
    }

    .service-card {
        padding: 24px;
        /* 减小内边距 */
        gap: 32px;
        /* 减小间距 */
    }

    .service-image {
        width: 400px;
        /* 减小图片宽度 */
    }

    .service-carousel-btn-left {
        left: -24px;
        /* 调整按钮位置 */
    }

    .service-carousel-btn-right {
        right: -24px;
        /* 调整按钮位置 */
    }
}

/* 手机端适配（屏幕宽度小于 768px） */
@media (max-width: 768px) {
    .service-banner {
        padding: 12px 0;
        /* 减小上下内边距 */
    }

    .service-banner-container {
        padding: 0 12px;
        /* 减小左右内边距 */
        gap: 12px;
        /* 减小间距 */
    }

    .service-title h2 {
        font-size: 24px;
        /* 减小标题字号 */
    }

    .service-title p {
        font-size: 16px;
        /* 减小副标题字号 */
    }

    .service-info-content {
        gap: 8px;
    }

    .service-title {
        gap: 4px;
    }
    
    .service-signup-btn {
        width: 80px;
        padding: 12px 0;
        background-color: #2DCCD3;
        border-radius: 100px;
        text-decoration: none;
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 12px;
        line-height: 1.4;
        color: #FFFFFF;
    }

    .service-card {
        flex-direction: column !important;
        /* 改为垂直排列 */
        height: auto;
        /* 高度自适应 */
        padding: 12px;
        /* 减小内边距 */
        gap: 24px;
        /* 减小间距 */
        border-radius: 12px;
        font-size: 0;
    }

    .service-card .service-image {
        width: 100% !important;
        /* 图片宽度100% */
        height: 200px !important;
        /* 固定高度 */
        order: -1 !important;
        /* 图片置顶 */
        border-radius: 12px;
    }

    .service-card .service-card-content {
        width: 100% !important;
        order: 1 !important;
        /* 内容放在下方 */
    }

    .service-icon {
        width: 32px;
        height: 32px;
        display: none;
    }

    .card-service-title {
        font-size: 20px;
    }

    .service-card-content {
        gap: 8px;
        /* 减小间距 */
        flex: 0;
    }

    .service-name {
        font-size: 20px;
        /* 减小服务名称字号 */
    }

    .service-desc {
        font-size: 14px;
        /* 减小描述文字字号 */
    }

    .service-carousel-btn {
        display: none;
        /* 隐藏轮播按钮 */
    }

    .service-carousel-indicator {
        width: 100%;
        /* 宽度100% */
    }

    /* 在移动端显示顶部的报名按钮 */
    .service-info-wrapper .service-more {
        display: inline-flex;
        /* 显示按钮 */
        padding: 8px 24px;
        /* 减小内边距 */
    }

    .service-info-wrapper .service-more span {
        font-size: 14px;
        /* 减小字号 */
    }

    /* 隐藏底部的报名按钮 */
    .service-card-bottom {
        display: none;
        /* 隐藏底部按钮 */
    }
}

/* 成功案例轮播模块样式 */
.case-banner {
    /* 设置模块的基本布局 */
    width: 100%;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.case-banner-container {
    /* 容器最大宽度限制 */
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
}

.case-title {
    /* 标题区域样式 */
    text-align: center;
}

.case-title h2 {
    /* 主标题样式 */
    font-size: 40px;
    font-weight: 600;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 16px;
}

.case-title p {
    /* 副标题样式 */
    font-size: 24px;
    color: #000000;
    line-height: 1.4;
}

.case-carousel-wrapper {
    /* 轮播区域包装器 */
    position: relative;
    width: 100%;
    max-width: 1200px;
}

.case-carousel-container {
    /* 轮播容器样式 */
    overflow: hidden;
    border-radius: 32px;
}

.case-carousel {
    /* 轮播内容区域 */
    display: flex;
    transition: transform 0.5s ease;
}

.case-card-container-1 {
    /* 案例卡片样式 */
    min-width: 100%;
    height: 450px;
    padding: 32px;
    display: flex;
    gap: 64px;
    background: linear-gradient(135deg, #FFF3E9 0%, #FBEDE1 100%);
}

.case-card-container-2 {
    /* 案例卡片样式 */
    min-width: 100%;
    height: 450px;
    padding: 32px;
    display: flex;
    gap: 64px;
    background: linear-gradient(135deg, #FFF0FD 0%, #F1DFFF 100%);
}

.case-card-container-3 {
    /* 案例卡片样式 */
    min-width: 100%;
    height: 450px;
    padding: 32px;
    display: flex;
    gap: 64px;
    background: linear-gradient(135deg, #F1F1F1 0%, #FFFFFF 100%);
}

.case-card-container-4 {
    /* 案例卡片样式 */
    min-width: 100%;
    height: 450px;
    padding: 32px;
    display: flex;
    gap: 64px;
    background: linear-gradient(135deg, #E8E1EE 0%, #E1D3EE 100%);
}

.case-card-container-5 {
    /* 案例卡片样式 */
    min-width: 100%;
    height: 450px;
    padding: 32px;
    display: flex;
    gap: 64px;
    background: linear-gradient(135deg, #FFFBF7 0%, #FFF5DB 100%);
}

.case-card-content {
    /* 卡片内容区域 */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.case-card-top {
    /* 卡片上半部分 */
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.case-logo img {
    /* Logo图片样式 */
    height: 40px;
    width: auto;
}

.case-info {
    /* 案例信息样式 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-name {
    /* 案例名称样式 */
    font-size: 32px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.4;
}

.case-desc {
    /* 案例描述样式 */
    font-size: 18px;
    color: #666666;
    line-height: 1.8;
}

.case-data {
    /* 数据展示区域 */
    margin-top: 32px;
}

.case-data-title {
    /* 数据标题样式 */
    font-size: 16px;
    color: #1A1A1A;
    line-height: 1.4;
    margin-bottom: 4px;
}

.case-data-value {
    /* 数据值样式 */
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.case-data-value .number {
    /* 数字样式 */
    font-size: 48px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1;
}

.case-data-value .unit {
    /* 单位样式 */
    font-size: 24px;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 1.5;
}

.case-image {
    /* 案例图片样式 */
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
}

.case-image img {
    /* 图片样式 */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-carousel-btn {
    /* 轮播按钮基础样式 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
    z-index: 1;
}

.case-carousel-btn-left {
    /* 左按钮位置 */
    left: -112px;
}

.case-carousel-btn-right {
    /* 右按钮位置 */
    right: -112px;
}

.case-carousel-indicator {
    /* 轮播指示器样式 */
    width: 320px;  /* 修改为5个卡片的总宽度 (64px * 5) */
    height: 4px;
    position: relative;
}

.case-carousel-indicator .indicator-track {
    /* 指示器轨道 */
    width: 100%;
    height: 100%;
    background: #EEEEEE;
    border-radius: 100px;
}

.case-carousel-indicator .indicator-active {
    /* 指示器活动部分 */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 64px;  /* 修改为固定宽度64px */
    background: #2DCCD3;
    border-radius: 100px;
    transition: transform 0.5s ease;
}

/* 平板适配 (1024px) */
@media screen and (max-width: 1024px) {
    .case-banner-container {
        /* 调整容器内边距 */
        padding: 0 48px;
    }

    .case-carousel-btn {
        /* 调整按钮位置 */
        display: none;
    }

    .case-card {
        /* 调整卡片内边距 */
        padding: 24px;
        gap: 32px;
    }

    .case-name {
        /* 调整标题大小 */
        font-size: 28px;
    }

    .case-desc {
        /* 调整描述文字大小 */
        font-size: 16px;
    }
}

/* 手机适配 (768px) */
@media screen and (max-width: 768px) {
    .case-banner {
        /* 调整模块内边距 */
        padding: 32px 0;
    }

    .case-banner-container {
        /* 调整容器内边距 */
        padding: 0 12px;
        gap: 12px;
    }

    .case-title h2 {
        /* 调整标题大小 */
        font-size: 24px;
        margin-bottom: 4px;
    }
    
    .case-info {
        gap: 8px;
    }
    
    .case-card-top {
        gap: 24px;
    }

    .case-title p {
        /* 调整副标题大小 */
        font-size: 16px;
    }

    /* 修改轮播容器样式以支持触摸滑动 */
    .case-carousel-container {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        border-radius: 12px;
        padding: 0;
        margin: 0 -12px;
        width: calc(100% + 24px);
    }

    /* 隐藏滚动条但保持功能 */
    .case-carousel-container::-webkit-scrollbar {
        display: none;
    }

    /* 修改轮播内容样式 */
    .case-carousel {
        display: flex;
        transition: none;
        gap: 12px;
        padding: 0 12px;
    }

    /* 修改卡片容器样式 */
    .case-card-container-1,
    .case-card-container-2,
    .case-card-container-3,
    .case-card-container-4,
    .case-card-container-5 {
        flex: 0 0 100%;
        scroll-snap-align: center;
        flex-direction: column !important;
        padding: 12px;
        height: auto;
        gap: 24px;
        min-width: calc(100% - 24px);
        margin-right: 12px;
    }

    .case-card-content {
        order: 2 !important;
        /* 内容放在下方 */
        width: 100%;
    }

    .case-image {
        order: 1 !important;
        /* 图片放在上方 */
        width: 100%;
        height: 200px;
        border-radius: 12px;
    }
    
    .case-data {
        margin-top: 24px;
    }

    .case-card-content {
        /* 调整内容间距 */
        gap: 0px;
        margin-bottom: 24px;
    }

    .case-name {
        /* 调整标题大小 */
        font-size: 20px;
    }

    .case-desc {
        /* 调整描述文字大小 */
        font-size: 14px;
    }

    .case-data-value .number {
        /* 调整数字大小 */
        font-size: 36px;
    }

    .case-data-value .unit {
        /* 调整单位大小 */
        font-size: 18px;
    }

    /* 隐藏轮播按钮 */
    .case-carousel-btn {
        display: none;
    }

    /* 调整指示器样式 */
    .case-carousel-indicator {
        width: 60%;
        margin: 0 auto;
    }
}

/* 品牌展示部分样式 */
.brand-showcase {
    width: 100%; /* 设置宽度为100%，占满整个容器 */
    padding: 64px 0; /* 上下内边距64px，左右不设置 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 子元素水平居中对齐 */
    gap: 64px; /* 子元素之间的间距为64px */
    position: relative; /* 相对定位，作为子元素的定位参考 */
    overflow: hidden; /* 超出部分隐藏 */
}

.brand-showcase-header {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: center; /* 垂直居中对齐 */
    align-items: center; /* 水平居中对齐 */
    gap: 16px; /* 子元素之间的间距为16px */
    align-self: stretch; /* 拉伸以适应父容器宽度 */
}

.brand-showcase-title {
    font-family: 'PingFang SC'; /* 设置字体为PingFang SC */
    font-weight: 600; /* 字体粗细为600 */
    font-size: 32px; /* 字体大小为32px */
    line-height: 1.4; /* 行高为字体大小的1.4倍 */
    text-align: center; /* 文本居中对齐 */
    color: #000000; /* 文字颜色为深灰色 */
    margin: 0; /* 外边距为0 */
}

.brand-showcase-subtitle {
    font-family: 'PingFang SC'; /* 设置字体为PingFang SC */
    font-weight: 400; /* 字体粗细为400 */
    font-size: 18px; /* 字体大小为24px */
    line-height: 1.4; /* 行高为字体大小的1.4倍 */
    text-align: center; /* 文本居中对齐 */
    color: #000000; /* 文字颜色为灰色 */
    margin: 0; /* 外边距为0 */
}

.brand-showcase-content {
    width: 100%; /* 宽度为100% */
    position: relative; /* 相对定位 */
}

.brand-showcase-container {
    display: flex; /* 使用弹性布局 */
    gap: 32px; /* 子元素之间的间距为32px */
    overflow-x: auto; /* 水平方向可滚动 */
    position: relative; /* 相对定位 */
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE和Edge隐藏滚动条 */
    margin: 0 auto; /* 水平居中 */
    scroll-behavior: smooth; /* 平滑滚动 */
    scroll-snap-type: x mandatory; /* 添加滚动捕捉 */
    width: 100%; /* 宽度为100% */
    justify-content: center; /* 水平居中对齐 */
    padding: 10px 0; /* 上下内边距10px，左右不设置 */
}

.brand-showcase-container::-webkit-scrollbar {
    display: none; /* Chrome、Safari和Opera隐藏滚动条 */
}

.brand-showcase-card {
    flex: 0 0 auto; /* 不伸缩、不收缩、自动基准尺寸 */
    width: 240px; /* 宽度为240px */
    height: 360px; /* 高度为360px */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    gap: 32px; /* 子元素之间的间距为32px */
    background-color: #FBFBFB; /* 背景色为浅灰色 */
    border-radius: 12px; /* 圆角为12px */
    transition: none; /* 无过渡效果 */
    scroll-snap-align: start; /* 滚动捕捉对齐到开始位置 */
}

.brand-showcase-image {
    width: 100%; /* 宽度为100% */
    height: 160px; /* 高度为160px */
    overflow: hidden; /* 超出部分隐藏 */
}

.brand-showcase-image img {
    width: 100%; /* 图片宽度为100% */
    height: 100%; /* 图片高度为100% */
    object-fit: cover; /* 图片填充方式为覆盖 */
    border-radius: 12px 12px 0 0; /* 上方圆角为12px */
}

.brand-showcase-info {
    padding: 0 16px; /* 左右内边距16px，上下不设置 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 子元素垂直排列 */
    gap: 8px; /* 子元素之间的间距为8px */
}

.brand-showcase-name {
    font-family: 'PingFang SC'; /* 设置字体为PingFang SC */
    font-weight: 600; /* 字体粗细为600 */
    font-size: 16px; /* 字体大小为16px */
    line-height: 1.4; /* 行高为字体大小的1.4倍 */
    color: #1A1A1A; /* 文字颜色为深灰色 */
    margin: 0; /* 外边距为0 */
}

.brand-showcase-desc {
    font-family: 'PingFang SC'; /* 设置字体为PingFang SC */
    font-weight: 400; /* 字体粗细为400 */
    font-size: 12px; /* 字体大小为12px */
    line-height: 1.67; /* 行高为字体大小的1.67倍 */
    color: #666666; /* 文字颜色为灰色 */
    margin: 0; /* 外边距为0 */
    overflow: hidden; /* 超出部分隐藏 */
    display: -webkit-box; /* 使用webkit盒子模型 */
    -webkit-box-orient: vertical; /* 垂直方向排列 */
    max-height: calc(1.67em * 6); /* 最大高度为行高的6倍 */
}

.brand-showcase-mask-left,
.brand-showcase-mask-right {
    display: none; /* 默认隐藏遮罩 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    width: 120px; /* 宽度为120px */
    height: 100%; /* 高度为100% */
    pointer-events: none; /* 不接受鼠标事件 */
    z-index: 10; /* 层级为10 */
}

.brand-showcase-mask-left {
    left: 0; /* 左侧对齐 */
    background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0)); /* 从左到右的渐变 */
}

.brand-showcase-mask-right {
    right: 0; /* 右侧对齐 */
    background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0)); /* 从右到左的渐变 */
}

/* 平板电脑适配 */
@media (max-width: 1024px) {
    .brand-showcase {
        padding: 48px 0; /* 减小上下内边距 */
        gap: 48px; /* 减小子元素间距 */
    }

    .brand-showcase-title {
        font-size: 28px; /* 减小标题字体大小 */
    }

    .brand-showcase-subtitle {
        font-size: 20px; /* 减小副标题字体大小 */
    }

    .brand-showcase-card {
        width: 220px; /* 减小卡片宽度 */
        height: 340px; /* 减小卡片高度 */
    }
}

/* 手机适配 */
@media (max-width: 768px) {
    .brand-showcase {
        padding: 40px 12px; /* 进一步减小上下内边距 */
        gap: 12px; /* 进一步减小子元素间距 */
    }

    .brand-showcase-title {
        font-size: 24px; /* 进一步减小标题字体大小 */
    }

    .brand-showcase-header {
        gap: 4px;
    }

    .brand-showcase-subtitle {
        font-size: 16px; /* 进一步减小副标题字体大小 */
    }

    .brand-showcase-container {
        justify-content: flex-start; /* 左对齐 */
        padding: 10px 24px; /* 添加左右内边距 */
    }

    .brand-showcase-card {
        width: 200px; /* 进一步减小卡片宽度 */
        height: 320px; /* 进一步减小卡片高度 */
    }

    .brand-showcase-mask-left,
    .brand-showcase-mask-right {
        width: 60px; /* 减小遮罩宽度 */
    }
}

.service-signup-btn:hover {
    background-color: #29B8BE;
}

/* 移动端服务卡片布局调整 */
@media screen and (max-width: 768px) {
    .service-card {
        flex-direction: column !important;
    }
    
    .service-card:nth-child(even) {
        flex-direction: column !important;
    }
    
    .service-image {
        width: 100% !important;
        order: 1;
    }
    
    .service-info {
        width: 100% !important;
        order: 2;
    }
}

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