/* ====== 全局盒模型重置：让 padding/border 不再撑大元素 ====== */
.home-sec * {                      /* .home-sec 内部所有后代元素 */
    -webkit-box-sizing: border-box; /* 老 Safari / iOS */
    box-sizing: border-box;         /* 标准写法：width 包含 padding 和 border */
}
.home-sec {                        /* 模块自身也统一盒模型 */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ====== 版心：网站主流 1200px 居中 ====== */
.inner-width {
    width: 1200px;     /* 定宽 */
    margin: 0 auto;    /* 水平居中 */
}

/* ====== 模块自身再居中（与 .inner-width 配合可冗余，保险写法） ====== */
.home-sec { margin: 0 auto; }


/* ====== 通用标题/描述 ====== */
.home-sec-title {
    height: 42px;
    line-height: 42px;      /* 单行垂直居中 */
    color: #3B426B;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.home-sec-desc {
    margin-top: 20px;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    text-align: center;
    color: #3B426B;
}


/* 你原有轮播图样式（无修改） */
.top-banner { height: 560px; }
.top-banner .bannerItem { height: 560px!important; }
.top-banner .swiper-pagination-bullet { background: #fff; opacity: .2; width: 30px; height: 4px; border-radius: 0; margin: 0 10px; }
.top-banner .swiper-pagination-bullet-active { opacity: 1; }
.top-banner .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 20px; }

/* 你原有轮播图链接样式 */
a:hover {
    -webkit-transition: initial; /* 去掉 hover 时的过渡，避免颜色闪 */
    -o-transition: initial;
    transition: initial;
}
.swiper-container2 a {
    width: 100%;                 /* 撑满容器 */
    background-position: center !important; /* 背景图居中 */
}
.swiper-container2 a img {
    margin: 0 auto;              /* 图片自身居中 */
}                                  这是comon.css：/* 轮播相关样式 - 完整保留原始（2）中的关键高度定义 */
.top-banner {
    color: #fff;
    width: 100%;
    height: 480px;  /* 强制轮播区域高度为 480px */
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.top-banner .swiper-container {
    height: 100%;
}
.bannerItem {
    align-items: center;
    height: 480px  ;  /* 强制每屏轮播高度为 480px */
}
.top-banner .swiper-pagination-bullet {
    background: #fe9c7e;
    width: 12px;
    height: 4px;
    border-radius: 2px;
    margin: 0 8px;
    opacity: 1;
}
.top-banner .swiper-pagination-bullet-active {
    width: 18px;
    /* background: #fff; */
}
.bannerItem h2 {
    font-size: 30px;
    margin: 50px 20px 28px 0;
    font-weight: 500;
}
.bannerItem p {
    font-size: 18px;
    width: 500px;
    line-height: 36px;
    margin-bottom: 30px;
}
.top-banner .swiper-wrapper {
    margin-left: 40px;
}
.bannerItem img {
    margin-left: 100px;
}




/* 轮播下面卡片介绍区样式（最终版） */
.scenarios {
    height: 820px;              /* 设计稿定高 */
    background: url("/default/img/home/dbg1.png") no-repeat center center / cover;
    padding-top: 80px;            /* 去掉顶部留白 */
    position: relative;          /* 相对定位 */
}
.scenarios .scenarios-desc {
    position: relative;          
    margin-top: 50px;             /* 无多余间距 */
    width: 100%;
}
.scenarios .scenarios-desc .img {
    display: block;              /* 中心示意图 */
    margin: 0 auto;
}

/* 四卡片核心样式（高端大气版）- 修改为卡片统一固定宽度 */
.stats-cards {
    position: absolute;
    top: 560px;                  /* 位于轮播图下方 */
    left: 0;                     /* 左对齐 */
    right: 0;                    /* 右对齐 */
    margin: 0 auto;               /* 水平居中 */
    z-index: 999;                 /* 卡片置顶不被遮挡 */
    /* 关键修改1：删除固定 width: 1200px; 改为 fit-content 自适应卡片总宽度 */
    width: fit-content;
    display: flex;
    /* 关键修改2：justify-content 改为 center（可选，配合 fit-content 居中更稳定，也可保留 space-between） */
    justify-content: center;
    gap: 10px;                   /* 卡片间距贴合设计图 */
    padding: 0 15px;             /* 适配屏幕，避免贴边 */
    box-sizing: border-box;
    transition: transform 0.3s ease; /* 添加动态效果 */
}

.stats-cards:hover {
    transform: translateY(-5px); /* 鼠标悬停时卡片上移 */
}

.stats-card {
    background: #F0F8FF; /* 修复：补充闭合注释，修正原语法错误 */
    border: none;               /* 无边框 */
    border-radius: 10px;         /* 圆角 */
    box-shadow: 0 8px 30px rgba(30, 144, 255, 0.2); /* 自定义阴影 */
    padding: 20px;               /* 内边距 */
    /* 关键修改3：移除 flex: 1; 取消均分逻辑 */
    /* 关键修改4：添加固定宽度，实现所有卡片统一宽度（可自定义数值，示例为280px） */
    width: 200px;
    /* 可选：添加 min-width: 280px; 防止卡片被挤压变形 */
    min-width: 200px;
    text-align: center;
    box-sizing: border-box;
    height: 100px;              /* 自定义高度 */
    overflow: hidden;            /* 避免卡片内容溢出产生空白 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加动态效果 */
}

.stats-card:hover {
    transform: translateY(-8px); /* 鼠标悬停时卡片上移 */
    box-shadow: 0 10px 40px rgba(30, 144, 255, 0.7); /* 鼠标悬停时加深阴影 */
}

.stats-card .icon {
    display: block;              /* 显示图标 */
    font-size: 32px;             /* 图标大小 */
    color: #fff;                 /* 图标颜色（注：当前卡片背景 #F0F8FF，白色图标不可见，建议修改为 #00BFFF） */
    margin-bottom: 4px;          /* 图标与标题间距 */
}

.stats-card h3 {
    font-size: 18px;
    color: #00BFFF;              /* 腾讯云蓝文字 */
    margin: 0 0 8px 0;
    font-weight: 700;
}

.stats-card p {
    font-size: 14px;
    color: #fb6638;              /* 修正注释：原"白色文字"错误，实际为橙红色 */
    margin: 0;
    line-height: 1.4;
    opacity: 0.8;                /* 降低文字透明度 */
}











/* ====== 电商解决方案 ====== */
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 页面背景容器 - 全屏背景图 */
        /* 页面背景容器 - 全屏背景图（修改高度控制） */
        .page-bg {
            position: relative;
            width: 100%;
            /* 核心修改：把 min-height: 100vh 改成更合适的高度 */
            min-height: 500px; /* 原是 100vh（占满整个视口高度），可根据需求调小，比如 600px/500px */
            /* 也可以直接用 height: auto; 让背景高度自适应内容 */
            /* height: auto; */
            background: url('/default/img/home/dbg2.png') center/cover no-repeat;
            display: flex;
            align-items: center; /* 保持内容垂直居中 */
            justify-content: center;
            padding: 40px 20px;
        }

        /* 半透明内容区域容器 */
        .glass-container {
            width: 100%;
            max-width: 1200px;
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        /* 内容区域主布局 */
        .content-wrapper {
            display: flex;
            gap: 30px;
            min-height: 600px;
            position: relative;
        }

        /* 左侧导航栏 */
        .left-nav {
            width: 220px;
            flex-shrink: 0;
        }

        .left-nav ul {
            list-style: none;
        }

        .left-nav li {
            padding: 16px 20px;
            margin-bottom: 10px;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;
            color: #333;
            font-weight: 500;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .left-nav li:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateX(5px);
        }

        .left-nav li.active {
            background: #007bff;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }

        /* 中间内容区域 */
        .center-content {
            flex: 1;
            padding: 0 20px;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease-in-out;
        }

        .tab-content.active {
            display: block;
        }

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

        .tab-content h2 {
            font-size: 32px;
            color: #333;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .tab-content .description {
            font-size: 16px;
            line-height: 1.8;
            color: #666;
            margin-bottom: 30px;
            background: rgba(0, 0, 0, 0.03);
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid #007bff;
        }

        /* 功能图标网格 */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .feature-item {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 12px;
            padding: 25px 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
        }

        .feature-item:hover {
            transform: translateY(-8px) scale(1.03);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.9);
        }

        .feature-item:active {
            transform: translateY(-2px) scale(0.98);
        }

        .feature-item i {
            font-size: 36px;
            color: #007bff;
            margin-bottom: 12px;
            display: block;
            transition: transform 0.3s ease;
        }

        .feature-item:hover i {
            transform: scale(1.2);
        }

        .feature-item p {
            font-size: 14px;
            color: #555;
            font-weight: 500;
        }

        /* 查看详情按钮 */
        .action-btn {
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            color: #fff;
            border: none;
            padding: 14px 36px;
            font-size: 16px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .action-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
        }

        /* 右侧下载区域 */
        .right-download {
            width: 280px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 二维码网格容器 - 2×2排列 */
        .qrcode-grid {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 15px;
            padding: 15px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .qrcode-grid:hover {
            background: rgba(255, 255, 255, 0.9);
            transform: translateY(-5px);
        }

        /* 二维码单个模块 */
        .qrcode-item {
            text-align: center;
            padding: 12px;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .qrcode-item:hover {
            transform: scale(1.05);
        }

        .qrcode-item img {
            width: 100%;
            max-width: 100px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .qrcode-item p {
            margin-top: 8px;
            font-size: 12px;
            color: #555;
            font-weight: 500;
        }

        /* 下载按钮容器 - 水平排列 */
        .download-btn-group {
            display: flex;
            gap: 10px;
            width: 100%;
        }

        /* 下载按钮样式 - 优化渐变色和阴影 */
        .download-action-btn {
            /* 标准版按钮渐变 */
            background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
            color: #fff;
            border: none;
            padding: 16px 0;
            font-size: 16px;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            letter-spacing: 0.5px;
            flex: 1;
            text-align: center;
            /* 基础阴影 */
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.2);
        }

        .download-action-btn.secondary {
            /* 专业版按钮渐变 */
            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
            /* 基础阴影 */
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
        }

        .download-action-btn:hover {
            transform: translateY(-3px);
            /* 悬停增强阴影 */
            box-shadow: 0 8px 20px rgba(40, 167, 69, 0.5);
        }

        .download-action-btn.secondary:hover {
            /* 悬停增强阴影 */
            box-shadow: 0 8px 20px rgba(0, 123, 255, 0.5);
        }

        /* 新增：客服区域布局 */
        .customer-service-area {
            display: flex;
            gap: 10px;
            width: 100%;
            align-items: flex-start;
        }

        /* 客服微信二维码（红色框位置） */
        .service-qrcode {
            flex: 0 0 calc(50% - 5px);
            background: #ffffff;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        .service-qrcode img {
            width: 100%;
            max-width: 120px;
            height: auto;
            border-radius: 8px;
        }

        .service-qrcode p {
            margin-top: 8px;
            font-size: 12px;
            color: #333;
            font-weight: 500;
        }

        /* 咨询按钮组（绿色框位置）- 优化渐变色和阴影 */
        .service-btn-group {
            flex: 0 0 calc(50% - 5px);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .service-btn {
            /* 在线咨询按钮渐变 */
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: #fff;
            border: none;
            padding: 12px 0;
            font-size: 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            /* 基础阴影 */
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2);
        }

        .service-btn.email {
            /* 邮箱反馈按钮渐变 */
            background: linear-gradient(135deg, #fd7e14 0%, #e86704 100%);
            /* 基础阴影 */
            box-shadow: 0 4px 12px rgba(253, 126, 20, 0.2);
        }

        .service-btn:hover {
            transform: translateY(-2px);
            /* 悬停增强阴影 */
            box-shadow: 0 8px 20px rgba(23, 162, 184, 0.25);
        }

        .service-btn.email:hover {
            /* 悬停增强阴影 */
            box-shadow: 0 8px 20px rgba(253, 126, 20, 0.25);
        }

        .service-btn i {
            font-size: 14px;
        }

        /* PbootCMS 适配调整 */
        .glass-container {
            margin: 0 auto;
        }

        /* 响应式优化 */
        @media (max-width: 1200px) {
            .glass-container {
                max-width: 95%;
            }
        }








/* ====== 3多行业解决方案整区 ====== */
.business {
    padding-top: 86px;          /* 顶部留呼吸空间 */
    height: 720px;              /* 设计稿定高，保证背景比例 */
    position: relative;         /* 让背景图绝对定位参考 */
    overflow: hidden;           /* 裁掉超出的大背景 */
}

/* 超大背景图：居中 + 缩放 + 缓慢移动 */
.business-bg {
    position: absolute;
    z-index: 0;                 /* 最底层 */
    width: 100vw;               /* 视口宽度 */
    min-width: 1980px;          /* 2K 屏也不糊 */
    top: 50%;  left: 50%;
    -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
    -webkit-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;   /* 后期 JS 可控制视差 */
}

/* 内容升到上层，避免被背景遮挡 */
.business .inner-width { position: relative; z-index: 1; }
/* 标题改为白色，适应深色背景 */
.business .home-sec-title {
    color: #ffffff;
    height: 54px;  line-height: 54px;
}

/* ====== 标签栏 + 内容区容器 ====== */
.business-container { position: relative; margin-top: 56px; }

/* 标签栏：白字 + 彩虹下划线动画（替代原橙色下划线） */
.business-container .business-tabbar {
    display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .2);   /* 半透明分隔线 */
}

/* 单个标签：保留可调橙色边框配置，新增白色底色相关样式 */
.business-container .tab-item {
    height: 60px;  padding: 0 22px;
    position: relative;
    font-size: 16px;  color: #ffffff;  line-height: 60px;
    cursor: pointer;  font-weight: bold;
    white-space: nowrap;            /* 不换行 */
    /* 边框可调基础配置：可直接修改以下数值调整边框大小/粗细/高矮/长宽 */
    --border-width: 2px;            /* 边框粗细（可调） */
    --border-radius: 8px;           /* 边框圆角（高矮/圆角感，可调） */
    --border-padding-x: 4px;        /* 边框水平内边距（控制宽度，可调） */
    --border-padding-y: 4px;        /* 边框垂直内边距（控制高度，可调） */
    --border-color: #FB6638;        /* 边框主色：橙色（固定） */
    --bg-color: rgba(230, 247, 255, 0.4); /* 边框内底色：蓝白色（新增） */
    transition: color .2s ease;     /* 文字颜色过渡，避免切换突兀 */
}

/* 1. 彩虹条下划线：保留原有样式，选中时撑满宽度 */
.business-container .tab-item::before {
    content: '';
    position: absolute;  bottom: 0;  left: 0;
    height: 4px;  width: 0;
    /* 彩虹渐变背景：线性渐变实现多彩效果，支持浏览器兼容 */
    background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #33cc33, #0099ff, #9933ff, #ff00cc);
    background-size: 700% 100%;     /* 放大背景尺寸，支持动画滚动 */
    /* 彩虹滚动动画（可选，增强视觉效果） */
    -webkit-animation: rainbowScroll 3s linear infinite;
            animation: rainbowScroll 3s linear infinite;
    /* 保持原过渡动画，选中时撑满宽度 */
    -webkit-transition: width .2s ease;
         -o-transition: width .2s ease;
            transition: width .2s ease;
}

/* 彩虹滚动关键帧动画（可选，如需静态彩虹条可删除此部分） */
@-webkit-keyframes rainbowScroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}
@keyframes rainbowScroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

/* 2. 橙色边框 + 白色底色：整合在::after伪元素，默认隐藏 */
.business-container .tab-item::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--border-padding-y));
    left: calc(-1 * var(--border-padding-x));
    right: calc(-1 * var(--border-padding-x));
    bottom: 0;  /* 与下划线衔接，不重叠 */
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    border-bottom: none;  /* 底部不显示边框，避免与彩虹下划线冲突 */
    background-color: var(--bg-color);  /* 新增：填充白色底色 */
    opacity: 0;  /* 默认隐藏边框+底色 */
    visibility: hidden;   /* 辅助隐藏，避免占用交互区域 */
    z-index: -1;  /* 新增：底色置于文字下方，不遮挡文字 */
    /* 边框+底色过渡动画，切换时更顺滑 */
    -webkit-transition: all .2s ease;
         -o-transition: all .2s ease;
            transition: all .2s ease;
}

/* 3. 鼠标悬浮状态：显示边框+白色底色，文字改为橙色（提升对比度） */
.business-container .tab-item:hover::after {
    opacity: 1;  /* 显示边框+白色底色 */
    visibility: visible;  /* 激活显示区域 */
}
.business-container .tab-item:hover {
    color: var(--border-color);  /* 文字变橙色，与边框呼应，提升可读性 */
}

/* 4. 点击选中.active状态：保持边框+白色底色+彩虹条撑满，文字保持橙色 */
.business-container .tab-item.active::before {
    width: 100%;  /* 彩虹下划线撑满标签宽度 */
}
.business-container .tab-item.active::after {
    opacity: 1;  /* 持续显示边框+白色底色 */
    visibility: visible;  /* 持续激活显示区域 */
}
.business-container .tab-item.active {
    color: var(--border-color);  /* 保持文字橙色，与选中状态匹配 */
}

/* ====== 内容面板：默认隐藏 ====== */
.business-container .business-descbox {
    position: absolute;  left: 0;  top: 60px;   /* 贴在标签栏下方 */
    width: 1200px;       /* 与版心同宽 */
    opacity: 0;          /* 不可见 */
    padding-top: 60px;
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
           justify-content: space-between;
    -webkit-transition: opacity .8s ease;
         -o-transition: opacity .8s ease;
            transition: opacity .8s ease;
}
/* 当前激活的内容 */
.business-container .business-descbox.active {
    opacity: 1;  z-index: 1;   /* 升到最上 */
    padding-top: 60px;
}

/* 左侧文字区 */
.business-container .business-descbox-info .business-title {
    height: 48px;  line-height: 48px;
    font-size: 24px;  color: #ffffff;
    margin-bottom: 18px;
}
.business-container .business-descbox-info .business-desc {
    line-height: 30px;
    font-size: 16px;  color: #ffffff;
    width: 700px;
    margin-bottom: 22px;
}
/* 第一行加粗放大（批发/集团方案） */
.business-container .business-descbox-info .business-desc.wholesaler::first-line,
.business-container .business-descbox-info .business-desc.group::first-line {
    font-weight: bold;  font-size: 18px;
}
.business-container .business-descbox-info .business-desc.group { width: 760px; }

/* 特性图标列表 */
.business-container .business-feat {
    margin-top: 60px;
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;
}
.business-container .business-feat-item {
    margin-right: 30px;
    width: 115px;                    /* 固定宽度，保证间距一致 */
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
}
/* 图标盒子：正方形灰色圆角 */
.business-container .business-feat-item .business-feat-iconbox {
    width: 50px;  height: 50px;
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
}
.business-container .business-feat-item .business-feat-icon { display: block; }
/* 图标下方文字 */
.business-container .business-feat-item .business-feat-title {
    height: 26px;
    font-size: 14px;  line-height: 26px;
    color: #fff;
    text-align: center;
    margin-top: 32px;
    white-space: nowrap;
}

/* 右侧图片区：圆角 + 悬停放大 */
.business-container .business-descbox-img {
    width: 360px;  height: 290px;
    overflow: hidden;                     /* 裁掉放大溢出 */
    display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -ms-flex-pack: center;
           justify-content: center;
    border-radius: 10px;
}
.business-container .business-descbox-img .img {
    display: block;
    -webkit-transition: -webkit-transform .6s ease;
            transition: -webkit-transform .6s ease;
         -o-transition: transform .6s ease;
            transition: transform .6s ease;
            transition: transform .6s ease, -webkit-transform .6s ease;
}
.business-container .business-descbox-img .img:hover {
    -webkit-transform: scale(1.04);
        -ms-transform: scale(1.04);
            transform: scale(1.04);   /* 轻微放大 */
}


/* ====== 多终端区域：渐变背景 ====== */
.client {
    padding-top: 80px;
    height: 767px;
    position: relative;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(65.56%, #F2F7FF), to(#fff));
    background: -webkit-linear-gradient(top, #F2F7FF 65.56%, #fff 100%);
    background: -o-linear-gradient(top, #F2F7FF 65.56%, #fff 100%);
    background: linear-gradient(to bottom, #F2F7FF 65.56%, #fff 100%);
}
/* 超大背景图：居中定位 */
.client .client-bg {
    position: absolute;  z-index: 0;
    width: 100vw;  min-width: 1980px;
    top: 50%;  left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
/* 内容升到上层 */
.client .inner-width { position: relative; z-index: 1; }
/* 中心示意图：剧中留空 */
.client .client-img {
    display: block;
    margin: 80px auto 0;
}





/* 全局卡片区域样式重置 */
/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全局容器 - 包裹所有内容，承载全局背景图 */
.global-card-container {
    position: relative;
    width: 100%;
    min-height: 100vh; /* 至少占满视口高度，可根据需求调整 */
    padding: 60px 0; /* 上下内边距，避免卡片贴顶贴底 */
    overflow: hidden; /* 隐藏全局背景图溢出部分 */
}

/* 全局背景图 - 铺满整个全局容器，固定不跟随滚动（可选） */
.global-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://你的全局背景图默认路径.jpg'); /* 全局背景默认路径 */
    background-size: cover; /* 铺满容器，可能裁剪边缘 */
    background-position: center; /* 居中显示 */
    background-attachment: fixed; /* 固定背景，滚动页面不移动（如需跟随滚动可改为 scroll） */
    opacity: 0.08; /* 降低透明度，避免干扰卡片内容，可调整 */
    z-index: 0; /* 层级低于卡片，确保卡片悬浮在上 */
}

/* 卡片容器 - 一行4个，居中适配PbootCMS内容区，悬浮在全局背景之上 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 0 20px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative; /* 相对定位，提升层级 */
    z-index: 1; /* 高于全局背景图，确保卡片不被遮挡 */
}

/* 卡片基础样式 - 支持自定义高度，优化默认样式，快速响应 */
.card-item {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.2s linear; /* 快速响应，无卡顿 */
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    z-index: 1;
    /* 自定义卡片高度（核心）：固定最小高度，确保所有卡片高度统一整齐 */
    min-height: 320px; /* 可根据需求修改，例如 280px、350px */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内容垂直居中，适配不同高度 */
}

/* 卡片图标容器 - 支持自定义图片路径 */
.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    transition: background 0.15s linear, border-color 0.15s linear;
    overflow: hidden;
}

/* 自定义图标图片样式 - 适配圆形容器，保证不失真 */
.card-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: filter 0.15s linear;
}

/* 卡片标题 */
.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    transition: color 0.15s linear;
    position: relative;
    z-index: 2;
}

/* 卡片描述 */
.card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    transition: color 0.15s linear;
    position: relative;
    z-index: 2;
    flex: 1; /* 占满剩余空间，确保描述文字垂直分布均匀 */
}

/* 卡片统一背景图（懒加载，默认隐藏）- 所有卡片共用统一背景 */
.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.2s linear;
    z-index: 0;
    filter: brightness(0.9) blur(1px);
}

/* 悬停效果 - 全链路快速响应，无延迟卡顿 */
.card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.2);
}

.card-item:hover .card-bg {
    opacity: 0.18;
}

.card-item:hover .card-icon {
    background: #fff;
    border-color: #2563eb;
}

/* 自定义图标悬停变色（单色图标适用，彩色图标可删除） */
.card-item:hover .card-icon img {
    filter: invert(30%) sepia(90%) saturate(2000%) hue-rotate(210deg);
}

.card-item:hover .card-title,
.card-item:hover .card-desc {
    color: #2563eb;
}

/* 响应式适配 - 同步调整卡片高度和间距，保证移动端体验 */
@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    .card-item {
        min-height: 300px; /* 平板端适当降低卡片高度 */
    }
}

@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .card-item {
        min-height: 280px; /* 小平板/大屏手机端降低高度 */
    }
}

@media (max-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 15px;
    }
    .card-item {
        min-height: 260px; /* 手机端进一步降低高度，适配屏幕 */
    }
    .global-card-container {
        padding: 40px 0; /* 移动端减少上下内边距 */
    }
}





/* ================= 特色功能 ================= */
.feature {                                                   /* 选中 class="feature" 的大容器 */
    padding-top: 40px;                                       /* 顶部留 40px 内边距，让内容不贴导航 */
    height: 864px;                                           /* 区块写死高度，保证视觉稿一比一 */
    background: #ffffff;                                     /* 纯白底色，与周围区分 */
}                                                            /* feature 结束 */

.feature .feat-ls {                                          /* 选中 feature 内部的列表包裹层 */
    display: -webkit-box;                                    /* 老webkit语法：声明弹性盒 */
    display: -webkit-flex;                                   /* 老webkit语法：声明弹性盒 */
    display: -ms-flexbox;                                    /* IE10语法：声明弹性盒 */
    display: flex;                                           /* 标准语法：弹性盒，子元素横排 */
    -webkit-flex-wrap: wrap;                                 /* 老webkit：允许换行 */
    -ms-flex-wrap: wrap;                                     /* IE：允许换行 */
    flex-wrap: wrap;                                         /* 标准：允许换行，一行塞不下就折 */
    -webkit-box-pack: justify;                               /* 老webkit：两端对齐 */
    -webkit-justify-content: space-between;                  /* 老webkit：两端对齐 */
    -ms-flex-pack: justify;                                  /* IE：两端对齐 */
    justify-content: space-between;                          /* 标准：两端对齐，左右贴边 */
}                                                            /* feat-ls 结束 */

.feature .feat-ls:first-of-type {                            /* 选中 feature 里第一个 feat-ls */
    margin-top: 70px;                                        /* 让它离上方标题 70px，视觉留呼吸 */
}                                                            /* 第一个 feat-ls 结束 */

.feature .feat-item {                                        /* 单个功能卡片 */
    width: 240px;                                            /* 固定 240px 宽，一排约 4 个 */
    text-align: center;                                      /* 内部文字、图标全部水平居中 */
    margin-bottom: 50px;                                     /* 卡片底部留 50px，形成上下排间距 */
}                                                            /* feat-item 结束 */

.feature .feat-item .feat-icon {                             /* 图标外框 */
    width: 132px;                                            /* 固定画板宽，设计稿尺寸 */
    height: 160px;                                           /* 固定画板高，设计稿尺寸 */
    display: -webkit-box;                                    /* 老webkit：再次声明 flex 居中图标 */
    display: -webkit-flex;                                   /* 老webkit：再次声明 flex 居中图标 */
    display: -ms-flexbox;                                    /* IE：再次声明 flex 居中图标 */
    display: flex;                                           /* 标准：flex 居中 */
    -webkit-box-align: center;                               /* 老webkit：垂直居中 */
    -webkit-align-items: center;                             /* 老webkit：垂直居中 */
    -ms-flex-align: center;                                  /* IE：垂直居中 */
    align-items: center;                                     /* 标准：垂直居中 */
    -webkit-box-pack: center;                                /* 老webkit：水平居中 */
    -webkit-justify-content: center;                         /* 老webkit：水平居中 */
    -ms-flex-pack: center;                                   /* IE：水平居中 */
    justify-content: center;                                 /* 标准：水平居中 */
    margin: 0 auto;                                          /* 图标外框本身在卡片里水平居中 */
}                                                            /* feat-icon 结束 */

.feature .feat-item .feat-icon .feat-img {                   /* 真正的 img 标签 */
    display: block;                                          /* 去掉 inline 底部空白，更干净 */
}                                                            /* feat-img 结束 */

.feature .feat-item .feat-title {                            /* 功能标题 */
    line-height: 30px;                                       /* 行高 30px，垂直居中好看 */
    font-size: 20px;                                         /* 字号 20，突出 */
    color: #3B426B;                                          /* 深蓝灰色，品牌色 */
    margin-top: 30px;                                        /* 离上图标 30px，呼吸感 */
}                                                            /* feat-title 结束 */

.feature .feat-item .feat-desc {                             /* 功能描述 */
    line-height: 24px;                                       /* 行高 24，阅读舒适 */
    font-size: 14px;                                         /* 字号 14，辅助信息小一点 */
    color: #585E81;                                          /* 浅灰蓝，降低视觉重量 */
    margin-top: 10px;                                        /* 离标题 10px，紧凑但不挤 */
}                                                            /* feat-desc 结束 */




/* 附赠服务整体容器 - 深邃蓝背景+氛围优化 */
#fzfw {
    position: relative;
    padding: 80px 0;
    margin: 0 auto;
    background: #165DFF; /* 参考图主色调 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: none;
}

/* 背景渐变遮罩 - 增强层次感，不遮挡内容 */
#fzfw::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(22, 93, 255, 0.95), rgba(18, 78, 221, 0.95));
    z-index: 0;
}

/* 核心内容容器 - 限制1200px总宽度，居中 */
#fzfw .ceo-container {
    position: relative;
    z-index: 2;
    max-width: 1200px; /* 严格限制总宽度不超1200px */
    margin: 0 auto;
    padding: 0 20px;
}

/* 标题区域 - 大气简洁，匹配整体风格 */
.ceo-shop1-mktitle {
    text-align: center;
    margin-bottom: 60px;
}
.ceo-shop1-mktitle span {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.ceo-shop1-mktitle p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
}

/* 卡片容器 - 6列网格布局，间距优化 */
.ceo-shop1-servicebox {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.ceo-slider-items {
    gap: 20px !important; /* 舒适间距，不拥挤 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: 100%;
}

/* 单个卡片 - 核心美化样式 */
.box {
    position: relative;
    background: rgba(255, 255, 255, 0.98); /* 微透明白色，高级感 */
    border-radius: 12px; /* 圆润边角 */
    padding: 36px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 丝滑过渡 */
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
    border: 1px solid rgba(255,255,255,0.2); /* 细边框增强质感 */
}

/* 🌟 图标光晕核心特效 - 悬浮时扩散发光 */
.box::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 93, 255, 0.2) 0%, rgba(255,255,255,0) 70%);
    box-shadow: 0 0 30px rgba(22, 93, 255, 0.15);
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 0;
}
.box:hover::before {
    opacity: 1;
    width: 120px; /* 悬浮时光晕扩散 */
    height: 120px;
    box-shadow: 0 0 40px rgba(22, 93, 255, 0.3); /* 光晕增强 */
}

/* 卡片图标 - 精致化 */
.box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05)); /* 图标轻微投影 */
}
.box:hover img {
    transform: scale(1.05); /* 悬浮图标轻微放大 */
    filter: brightness(0) saturate(100%) invert(30%) sepia(90%) saturate(2000%) hue-rotate(210deg) drop-shadow(0 4px 8px rgba(22, 93, 255, 0.2)); /* 图标变色+增强投影 */
}

/* 卡片标题 - 美化 */
.box span {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #165DFF;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.box:hover span {
    color: #0E42D2; /* 悬浮标题加深 */
    letter-spacing: 0.5px; /* 轻微字距增加 */
}

/* 卡片描述 - 精致化 */
.box p {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}
.box:hover p {
    color: #333333; /* 悬浮描述提亮 */
}

/* 🌟 卡片悬浮整体美化效果 */
.box:hover {
    transform: translateY(-8px); /* 悬浮上浮 */
    background: #ffffff; /* 悬浮纯黑背景 */
    box-shadow: 0 15px 30px rgba(22, 93, 255, 0.12); /* 悬浮增强阴影 */
}

/* 响应式适配 - 保持1200px内适配，同时保留美化效果 */
@media (max-width: 1200px) {
    .ceo-slider-items {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ceo-shop1-mktitle span {
        font-size: 28px;
    }
    .box {
        padding: 30px 20px;
    }
    .box img {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {
    #fzfw {
        padding: 60px 0;
    }
    .ceo-slider-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ceo-shop1-mktitle {
        margin-bottom: 40px;
    }
    .ceo-shop1-mktitle span {
        font-size: 24px;
    }
    .ceo-shop1-mktitle p {
        font-size: 14px;
    }
    .box {
        padding: 26px 16px;
    }
    .box img {
        width: 60px;
        height: 60px;
    }
    .box span {
        font-size: 16px;
    }
    .box p {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .ceo-slider-items {
        gap: 16px !important;
        grid-template-columns: 1fr !important;
    }
    .box:hover {
        transform: translateY(-5px); /* 移动端上浮幅度减小 */
    }
}



/* =========================
   “查看更多”按钮（优化UI）
   ========================= */
/* 父级banner容器样式：实现全宽背景图效果 */
.banner-container {
    width: 100%; /* 强制全宽 */
    background-image: url('/default/img/home/dbg10.png'); /* 自定义背景图（替换为实际路径/URL） */
    background-size: cover; /* 背景图覆盖整个区域，不拉伸变形 */
    background-position: center center; /* 背景图水平+垂直居中 */
    background-repeat: no-repeat; /* 背景图不重复 */
    padding: 40px 0; /* 上下内边距，撑开背景区域高度（可自定义） */
    text-align: center; /* 让按钮水平居中 */
    box-sizing: border-box; /* 防止内边距撑破宽度，保证布局规整 */
}

/* 按钮默认样式：大气UI基础配置 */
#salesBtn {
    display: inline-block; /* 让按钮支持宽高、内边距等样式 */
    padding: 16px 48px; /* 增大内边距，按钮更饱满大气 */
    color: #ffffff; /* 按钮文字颜色 */
    background-color: rgba(0, 123, 255, 0.9); /* 加深按钮背景透明度，更醒目且不遮挡背景 */
    text-decoration: none; /* 去除链接下划线 */
    border-radius: 8px; /* 增大圆角，更具现代感、更大气 */
    font-size: 18px; /* 增大文字字号，提升视觉权重 */
    font-weight: 600; /* 文字加粗，更显大气醒目 */
    border: none; /* 去除默认边框 */
    cursor: pointer; /* 鼠标悬浮显示手型，提升交互提示 */
    transition: all 0.3s ease-in-out; /* 过渡动画，让悬浮效果更顺滑自然 */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3); /* 添加轻微阴影，增强立体感和大气质感 */
    position: relative; /* 为伪元素做准备，增强层次感 */
    overflow: hidden; /* 隐藏伪元素超出部分 */
}

/* 按钮流光伪元素：增强高级感和大气感（可选，删除不影响核心功能） */
#salesBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.8s ease-in-out;
}

/* 流光伪元素悬浮动画：鼠标移入时流光从左到右划过 */
#salesBtn:hover::after {
    left: 100%;
}

/* 按钮悬浮核心效果：红橙渐变+交互增强 */
#salesBtn:hover {
    background: linear-gradient(135deg, #ff4500, #ff8c00); /* 红橙渐变（深橙红→浅橙黄），视觉冲击强 */
    box-shadow: 0 6px 18px rgba(255, 69, 0, 0.4); /* 悬浮时加深阴影，增强立体感 */
    transform: translateY(-2px); /* 轻微上移，提升交互质感，更显精致 */
    color: #ffffff; /* 保持文字白色，确保可读性 */
}




/* ==========================================================
   服务 区域整体
   ========================================================== */
.service {
    height: 647px;              /* 固定高度，保证视觉比例 */
    padding-top: 80px;          /* 顶部留空，避开导航或标题 */
    position: relative;         /* 为内部绝对定位元素提供参照 */
    overflow: hidden;           /* 背景图放大时不会出界 */
}

/* 背景大图：绝对居中 + 视差动画 */
.service-bg {
    position: absolute;
    z-index: 0;                 /* 最底层 */
    width: 100vw;               /* 始终铺满视口宽度 */
    min-width: 1980px;          /* 防止大屏出现空白 */
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;   /* 后期可做轻微放大/缩小视差 */
}

/* 内容安全框：保证 1200px 居中，层级高于背景 */
.service .inner-width {
    position: relative;
    z-index: 1;
}

/* 区域标题（复用组件）强制白色 */
.service .inner-width .home-sec-title {
    color: #fff;
}

/* 服务卡片整体容器：固定尺寸，方便 JS 做滑动计算 */
.service-container {
    width: 1200px;
    height: 343px;
    position: relative;
}

/* 四条服务卡片的“轨道”：半透明底，flex 横向排列 */
.service-vessel {
    background: rgba(255, 255, 255, 0.15); /* 毛玻璃效果，透出背景图 */
    width: 1200px;
    height: 343px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 70px;           /* 与标题保持距离 */
}

/* 单个服务卡片：等宽 300px，垂直排列图标+标题+描述 */
.service-item {
    width: 300px;
    height: 343px;
    padding-top: 64px;          /* 上内边距，把内容往下压，视觉居中 */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* 图标外框：72px 正方形，保证图标不会拉伸 */
.service-iconbox {
    height: 72px;
    width: 72px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 6px;         /* 与标题保持小间距 */
}

.service-iconbox .service-icon {
    display: block;             /* 清除图片底部 3px 空隙 */
}

/* 标题：22px 白色字体，底部橙色 4px 横线装饰 */
.service-title {
    height: 60px;               /* 固定高度，保证对齐 */
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;         /* 用于伪元素绝对定位 */
    font-size: 22px;
    color: #fff;
}

/* 橙色下划线装饰：居中、距底 4px */
.service-title::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background: #fb6638;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -4px;
}

/* 描述文字：固定宽度 220px，自动换行居中 */
.service-desc {
    margin-top: 35px;           /* 与标题拉开距离 */
    line-height: 25px;
    font-size: 16px;
    color: #fff;
    width: 220px;
    text-align: center;
}