/* ==============================================
   全局基础样式（全站共用 · 不动结构 · 不动数据）
   严格匹配你的 index.php 类名
============================================== */

/* 全局重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background: #ffffff;
  color: #333333;
  line-height: 1.7;
  overflow-x: hidden;
}

/* 容器（你页面里的 .container） */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  max-width: 100%;
}

/* 图片 */
img {
  max-width: 100%;
  display: block;
}

/* 链接 */
a {
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

a:hover {
  color: #00a8ff;
}

/* 列表 */
ul, li {
  list-style: none;
}

/* 通用模块标题（你所有模块都用的 .section-title） */
.section-title {
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  color: #222;
}

/* 通用模块副标题（.section-subtitle） */
.section-subtitle {
  font-size: 15px;
  text-align: center;
  color: #888;
  margin-bottom: 50px;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================
   导航整体样式
============================ */

/* 导航最外层
作用：固定在顶部、全屏、背景色
修改：
background: #1b1b1b → 导航背景色
z-index:999 → 保证导航在最上层
*/
header {
  position: fixed;    /* 固定在页面顶部，滚动不消失 */
  top: 0;              /* 贴紧顶部 */
  left: 0;             /* 贴紧左侧 */
  width: 100%;         /* 宽度全屏 */
  background: #1b1b1b; /* 导航背景：深灰色 */
  z-index: 999;        /* 层级最高，不被其他内容挡住 */
}

/* 导航内容容器（中间版心）
作用：控制导航宽度、居中、内部布局
修改：
width:1200px → 导航整体宽度
height:80px → 导航高度
*/
.container.header-inner {
  width: 1200px;       /* 导航内容最大宽度 */
  height: 80px;        /* 导航高度 */
  margin: 0 auto;      /* 水平居中 */
  display: flex;        /* 弹性布局：logo和菜单左右分开 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between; /* logo左，菜单右 */
  padding: 0 20px;      /* 左右内边距 */
  box-sizing: border-box; /* 内边距不撑开宽度 */
}

/* ========== Logo 区域 ========== */

/* Logo 整体布局 */
.logo {
  display: flex;        /* 图片+文字横向排列 */
  align-items: center;  /* 垂直居中 */
  gap: 14px;            /* 图片和文字之间的距离 */
}

/* Logo 图片大小 */
.logo-img {
  height: 52px;         /* Logo图片高度 */
}

/* Logo 文字区域 */
.logo-text {
  display: flex;
  flex-direction: column; /* 文字上下排列 */
  align-items: flex-start;
}

/* 中文Logo大字 */
.logo-cn {
  font-size: 22px;      /* 文字大小 */
  font-weight: 900;     /* 加粗 */
  color: #fff;          /* 颜色：白色 */
  letter-spacing: 2px;  /* 字间距 */
  line-height: 1.2;     /* 行高 */
}

/* 英文Logo大字
修改：font-size → 英文logo大小，避免变形
*/
.logo-en {
  font-size: 18px;      /* 英文专用更小字号，不会撑大 */
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* Logo下方小字（拼音/英文） */
.logo-pinyin {
  font-size: 11px;      /* 小字大小 */
  font-weight: 300;     /* 细体 */
  color: #fff;
  opacity: 0.85;        /* 透明度 */
  letter-spacing: 1px;
  line-height: 1.2;
}

/* ============================
   导航整体样式
============================ */

/* 导航最外层
作用：固定在顶部、全屏、背景色
修改：
background: #1b1b1b → 导航背景色
z-index:999 → 保证导航在最上层
*/
header {
  position: fixed;    /* 固定在页面顶部，滚动不消失 */
  top: 0;              /* 贴紧顶部 */
  left: 0;             /* 贴紧左侧 */
  width: 100%;         /* 宽度全屏 */
  background: #1b1b1b; /* 导航背景：深灰色 */
  z-index: 999;        /* 层级最高，不被其他内容挡住 */
}

/* 导航内容容器（中间版心）
作用：控制导航宽度、居中、内部布局
修改：
width:1200px → 导航整体宽度
height:80px → 导航高度
*/
.container.header-inner {
  width: 1200px;       /* 导航内容最大宽度 */
  height: 80px;        /* 导航高度 */
  margin: 0 auto;      /* 水平居中 */
  display: flex;        /* 弹性布局：logo和菜单左右分开 */
  align-items: center;  /* 垂直居中 */
  justify-content: space-between; /* logo左，菜单右 */
  padding: 0 20px;      /* 左右内边距 */
  box-sizing: border-box; /* 内边距不撑开宽度 */
}

/* ========== Logo 区域 ========== */

/* Logo 整体布局 */
.logo {
  display: flex;        /* 图片+文字横向排列 */
  align-items: center;  /* 垂直居中 */
  gap: 14px;            /* 图片和文字之间的距离 */
}

/* Logo 图片大小
作用：控制Logo图片尺寸 + 不变形
修改：height:52px → 图片高度
新增：object-fit:contain 保证图片不变形
*/
.logo-img {
  height: 52px;         /* Logo图片高度 */
  width: auto;          /* 宽度自动，不变形 */
  object-fit: contain;  /* 图片不变形核心 */
}

/* 👇 新增：英文页面Logo图片单独控制（不变形）
作用：英文网站时，Logo图片保持比例不变形
*/
html:lang(en) .logo-img {
  height: 48px !important;  /* 英文页面可单独改图片高度 */
  width: auto !important;
  object-fit: contain !important;
}

/* Logo 文字区域 */
.logo-text {
  display: flex;
  flex-direction: column; /* 文字上下排列 */
  align-items: flex-start;
}

/* 中文Logo大字 */
.logo-cn {
  font-size: 22px;      /* 文字大小 */
  font-weight: 900;     /* 加粗 */
  color: #fff;          /* 颜色：白色 */
  letter-spacing: 2px;  /* 字间距 */
  line-height: 1.2;     /* 行高 */
}

/* 英文Logo大字
修改：font-size → 英文logo大小，避免变形
*/
.logo-en {
  font-size: 18px;      /* 英文专用更小字号，不会撑大 */
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.2;
}

/* Logo下方小字（拼音/英文） */
.logo-pinyin {
  font-size: 11px;      /* 小字大小 */
  font-weight: 300;     /* 细体 */
  color: #fff;
  opacity: 0.85;        /* 透明度 */
  letter-spacing: 1px;
  line-height: 1.2;
}

/* ========== 导航菜单 ========== */

/* 菜单列表容器 */
nav ul {
  display: flex;        /* 菜单横向排列 */
  height: 100%;         /* 高度占满导航 */
  margin: 0;            /* 清除默认外边距 */
  padding: 0;           /* 清除默认内边距 */
  list-style: none;     /* 去掉小圆点 */
}

/* 单个菜单项目 */
nav li {
  position: relative;   /* 为底部红线做定位准备 */
  height: 100%;         /* 高度占满 */
  display: flex;
  align-items: center;  /* 文字垂直居中 */
}

/* 菜单文字链接（默认样式）
修改：
padding:0 24px → 菜单项左右宽度
font-size:15px → 文字大小
color:#fff → 文字颜色
*/
nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 24px;        /* 菜单左右间距，决定宽度 */
  color: #fff;            /* 默认文字白色 */
  font-size: 15px;        /* 文字大小 */
  font-weight: 600;       /* 半粗 */
  text-decoration: none;  /* 去掉下划线 */
  transition: color 0.2s ease; /* hover变色过渡 */
  white-space: nowrap;    /* 强制不换行 → 英文不变形核心 */
}

/* 鼠标悬浮时：文字变红
修改：color:#ff0000 → 文字红色
*/
nav a:hover {
  color: #ff0000;
}

/* 鼠标悬浮时：底部红线
修改：height:3px → 红线粗细
background-color: → 红线颜色
*/
nav a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;             /* 贴在底部 */
  width: 100%;           /* 宽度和菜单一样 */
  height: 3px;           /* 红线高度 */
  background-color: #ff0000; /* 红色 */
}

/* ========== 👇 英文版导航专用（解决英文变形、拥挤） ========== */

/* 英文页面：导航文字更小、间距更合理 */
html:lang(en) nav a {
  font-size: 14px !important;   /* 英文菜单字号缩小 */
  padding: 0 20px !important;   /* 英文菜单宽度缩小 */
}

/* 英文页面：英文Logo文字大小 */
html:lang(en) .logo-en {
  font-size: 12px !important;
}

/* 英文页面：底部小字缩小 */
html:lang(en) .logo-pinyin {
  font-size: 10px !important;
}

/* ============================
   轮播图整体样式（英文标题生效 + 环形字母圆圈）
============================ */

/* 轮播最外层容器
作用：设置轮播的宽度、高度、背景色、定位
调整：
height: 700px   → 改数字可以调整轮播整体高度
margin-top:80px → 控制轮播距离顶部导航的距离
background: #ffffff → 背景颜色，纯白
*/
.banner {
  position: relative;         /* 相对定位，让内部元素可以绝对定位 */
  width: 100%;                /* 宽度100%，全屏 */
  height: 700px;              /* 轮播整体高度，数字越大越高 */
  margin: 80px auto 0;        /* 距离顶部导航80px，水平居中 */
  overflow: hidden;           /* 隐藏超出容器的内容（比如放大的图片） */
  background: #ffffff;        /* 背景颜色：纯白色 */
}

/* 每一张轮播图的容器
作用：控制单张轮播的显示与隐藏
*/
.banner .banner-inner {
  position: absolute;         /* 绝对定位，叠在同一位置 */
  top: 0;                     /* 顶部对齐 */
  left: 0;                    /* 左侧对齐 */
  width: 100%;                /* 宽度全屏 */
  height: 100%;               /* 高度铺满 */
  opacity: 0;                 /* 默认透明隐藏 */
  visibility: hidden;         /* 默认不可见 */
  transition: opacity 1s ease, visibility 1s ease; /* 淡入淡出过渡 */
}

/* 当前显示的轮播图
作用：让当前轮播显示出来 + 放大动画
*/
.banner .banner-inner.active {
  opacity: 1;                 /* 不透明，显示出来 */
  visibility: visible;        /* 可见 */
  animation: bannerZoom 6s linear forwards; /* 放大动画，6秒完成 */
}

/* 轮播放大动画
作用：让图片和文字慢慢放大
调整：
scale(1.08) → 1是原始大小，数字越大放大越多
*/
@keyframes bannerZoom {
  0% { transform: scale(1); }     /* 开始：正常大小 */
  100% { transform: scale(1.2); }/* 结束：放大1.08倍 */
}

/* 轮播图片容器
作用：让图片在容器里居中显示
*/
.banner .banner-image {
  width: 100%;                /* 宽度100% */
  height: 100%;               /* 高度100% */
  display: flex;              /* 弹性布局 */
  align-items: center;         /* 垂直居中 */
  justify-content: center;     /* 水平居中 */
}

/* 轮播图片
作用：控制图片大小、不拉伸、完整显示
*/
.banner .banner-image img {
  max-width: 100%;            /* 最大宽度100%，不超出容器 */
  max-height: 100%;           /* 最大高度100% */
  object-fit: contain;        /* 保持比例，不拉伸变形 */
}

/* 轮播文字内容区域
作用：控制文字的位置、居中方式
调整：
left:30% → 数字越小整体越往左，数字越大越往右
*/
.banner .banner-content {
  position: absolute;         /* 绝对定位 */
  top: 50%;                   /* 垂直居中 */
  left: 30%;                  /* 水平位置：30% 整体偏左 */
  transform: translate(-50%, -50%); /* 让自身居中校正 */
  text-align: center;         /* 文字居中 */
  color: #000;                /* 文字颜色：黑色 */
  z-index: 2;                 /* 层级，显示在图片上方 */
  width: 100%;                /* 宽度100% */
}

/* 主标题（中文）
作用：最大的标题文字
调整：
font-size:58px → 改数字调整文字大小
*/
.banner .banner-content .line1 {
  font-size: 58px !important; /* 主标题字号 */
  font-weight: 700;           /* 加粗 */
  margin-bottom: 14px;       /* 底部间距 */
}

/* 主标题（英文）
作用：英文标题单独缩小
调整：font-size:40px → 英文标题大小
*/
html:lang(en) .banner .banner-content .line1 {
  font-size: 35px !important;
}

/* 副标题（中文）
作用：第二行文字
*/
.banner .banner-content .line2 {
  font-size: 28px !important; /* 副标题字号 */
  margin-bottom: 24px;       /* 底部间距 */
}

/* 英文副标题（全局生效版）
作用：英文副标题单独控制大小
*/
html:lang(en) .banner .banner-content .line2 {
  font-size: 22px !important;
}

/* 按钮样式
作用：红色按钮文字、背景、大小
*/
.banner .banner-content .line3 {
  display: inline-block;      /* 行内块元素 */
  padding: 14px 34px;         /* 按钮内边距，上下14 左右34 */
  background: #ff3333;       /* 按钮背景：红色 */
  color: #fff;                /* 文字颜色：白色 */
  font-size: 18px;            /* 按钮文字大小 */
  border-radius: 4px;         /* 圆角 */
  margin-bottom: 12px;       /* 底部间距 */
}

/* 底部小字（中文）
*/
.banner .banner-content .line4 {
  font-size: 18px;            /* 小字字号 */
  opacity: 0.9;               /* 轻微透明 */
}

/* 底部小字（英文）
*/
.banner .banner-content .line4.banner-en {
  font-size: 16px !important; /* 英文小字更小 */
}

/* ============================
   轮播指示器（底部小圆点）
   调整：bottom:10px → 数字越大越往上，越小越往下
============================ */
.banner .banner-indicators {
  position: absolute;         /* 绝对定位 */
  bottom: 10px;               /* 距离底部10px，改数字上下移动 */
  left: 50%;                  /* 水平居中 */
  transform: translateX(-50%); /* 居中校正 */
  display: flex;              /* 横向排列 */
  gap: 10px;                  /* 点之间的间距 */
  z-index: 3;                 /* 层级 */
}

/* 单个小圆点默认样式 */
.banner .banner-indicators span {
  width: 12px;                /* 点的宽度 */
  height: 12px;               /* 点的高度 */
  border-radius: 50%;         /* 圆形 */
  background: #ccc;          /* 默认灰色 */
  cursor: pointer;           /* 鼠标移上去变手型 */
}

/* 当前选中的小圆点样式（红色） */
.banner .banner-indicators span.active {
  background: #ff3333;       /* 红色 */
}

/* ============================
   环形文字 + 鼠标图标 整体容器
   调整：bottom:50px → 控制圆圈整体上下移动
============================ */
.banner .banner-mouse-indicator {
  position: absolute;         /* 绝对定位 */
  bottom: 50px;               /* 距离底部50px，改数字上下移动 */
  left: 50%;                  /* 水平居中 */
  width: 110px;               /* 圆圈宽度 */
  height: 110px;              /* 圆圈高度 */
  transform: translateX(-50%); /* 居中校正 */
  z-index: 50;                /* 层级最高 */
  display: block !important;  /* 显示出来 */
}

/* 环形文字容器
作用：让文字整体旋转
调整：18s → 旋转一圈的时间
*/
.banner .banner-text-circle {
  position: absolute;         /* 绝对定位 */
  width: 100%;                /* 铺满父容器 */
  height: 100%;               /* 铺满父容器 */
  animation: circleRotate 18s linear infinite; /* 18秒旋转一圈，无限循环 */
}

/* 单个环形文字样式
调整：color: #000 → 文字颜色
font-size:10px → 字母大小
*/
.banner .banner-text-circle b {
  position: absolute;         /* 绝对定位 */
  top: 0;                     /* 顶部对齐 */
  left: 50%;                  /* 水平居中 */
  color: #ff0000;                /* 字母颜色：红色 */
  font-size: 10px;            /* 字母大小 */
  transform-origin: 0 55px;   /* 旋转中心点，半径55px */
  white-space: nowrap;       /* 不换行 */
}

/* 20个字母，每个旋转18度，围成一个完整圆圈 */
.banner .banner-text-circle b:nth-child(1)  { transform: rotate(0deg); }
.banner .banner-text-circle b:nth-child(2)  { transform: rotate(18deg); }
.banner .banner-text-circle b:nth-child(3)  { transform: rotate(36deg); }
.banner .banner-text-circle b:nth-child(4)  { transform: rotate(54deg); }
.banner .banner-text-circle b:nth-child(5)  { transform: rotate(72deg); }
.banner .banner-text-circle b:nth-child(6)  { transform: rotate(90deg); }
.banner .banner-text-circle b:nth-child(7)  { transform: rotate(108deg); }
.banner .banner-text-circle b:nth-child(8)  { transform: rotate(126deg); }
.banner .banner-text-circle b:nth-child(9)  { transform: rotate(144deg); }
.banner .banner-text-circle b:nth-child(10) { transform: rotate(162deg); }
.banner .banner-text-circle b:nth-child(11) { transform: rotate(180deg); }
.banner .banner-text-circle b:nth-child(12) { transform: rotate(198deg); }
.banner .banner-text-circle b:nth-child(13) { transform: rotate(216deg); }
.banner .banner-text-circle b:nth-child(14) { transform: rotate(234deg); }
.banner .banner-text-circle b:nth-child(15) { transform: rotate(252deg); }
.banner .banner-text-circle b:nth-child(16) { transform: rotate(270deg); }
.banner .banner-text-circle b:nth-child(17) { transform: rotate(288deg); }
.banner .banner-text-circle b:nth-child(18) { transform: rotate(306deg); }
.banner .banner-text-circle b:nth-child(19) { transform: rotate(324deg); }
.banner .banner-text-circle b:nth-child(20) { transform: rotate(342deg); }

/* 鼠标图标整体组
作用：让鼠标浮动
*/
.banner .mouse-group {
  position: absolute;         /* 绝对定位 */
  top: 50%;                   /* 垂直居中 */
  left: 50%;                  /* 水平居中 */
  transform: translate(-50%, -50%); /* 居中校正 */
  animation: mouseFloat 2.6s infinite ease-in-out; /* 浮动动画 */
  z-index: 3;                 /* 层级 */
}

/* 鼠标图标外形
*/
.banner .mouse-icon-center {
  position: relative;         /* 相对定位 */
  width: 18px;                /* 鼠标宽度 */
  height: 28px;               /* 鼠标高度 */
  background: #555555;        /* 鼠标颜色：灰色 */
  border-radius: 9px;         /* 圆角，变成鼠标形状 */
}

/* 鼠标中间竖线 */
.banner .mouse-icon-center::before {
  content: "";                /* 空内容 */
  position: absolute;         /* 绝对定位 */
  top: 7px;                   /* 距离顶部7px */
  left: 50%;                  /* 水平居中 */
  width: 1px;                 /* 线条宽度 */
  height: 8px;                /* 线条高度 */
  background: #fff;           /* 线条颜色：白色 */
  transform: translateX(-50%); /* 居中校正 */
}

/* 鼠标中间横线 */
.banner .mouse-icon-center::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 8px;
  height: 1px;
  background: #fff;
  transform: translateX(-50%);
}

/* 鼠标下方小箭头 */
.banner .mouse-arrow {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #555555;
}

/* 鼠标浮动动画：上下轻微移动 */
@keyframes mouseFloat {
  0%    { transform: translate(-50%, -50%) translateY(0); }
  50%   { transform: translate(-50%, -50%) translateY(-4px); }
  100%  { transform: translate(-50%, -50%) translateY(0); }
}

/* 环形文字旋转动画：360度旋转 */
@keyframes circleRotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

/* ============================
   服务流程区域 #advantages
   布局：3个卡片一行 | 深色卡片 | 隐藏图片
   交互：hover 文字变色 + 对勾反色 + 卡片晃动效果
   高度：固定 500px
   文本：英文超长自动截取，超出显示 ...
============================ */

/* 区域外层容器：控制整个板块的背景与上下间距 */
#advantages {
  width: 100%;
  padding: 80px 0;          /* 区域上下留白 */
  background: #f8f9fa;      /* 区域背景色：浅灰色 */
  box-sizing: border-box;
}

/* 内容容器：控制宽度居中，与全站保持一致 1200px */
#advantages .container {
  width: 1200px;
  margin: 0 auto;           /* 水平居中 */
  padding: 0 20px;          /* 左右留白，防止贴边 */
  box-sizing: border-box;
}

/* 主标题：服务流程 */
#advantages .section-title {
  font-size: 36px;          /* 标题字号 */
  font-weight: 700;         /* 加粗 */
  text-align: center;       /* 居中 */
  color: #1b1b1b;           /* 标题颜色：深灰 */
  margin-bottom: 12px;      /* 与副标题间距 */
  position: relative;
}

/* 主标题下方红色装饰线 */
#advantages .section-title::after {
  content: "";
  display: block;
  width: 60px;              /* 横线宽度 */
  height: 3px;              /* 横线粗细 */
  background: #ff0000;       /* 主题红色 */
  margin: 12px auto 0;      /* 居中 + 与标题间距 */
  border-radius: 3px;       /* 圆角更柔和 */
}

/* 副标题：描述文字 */
#advantages .section-subtitle {
  font-size: 16px;
  color: #666;              /* 浅灰色 */
  text-align: center;
  margin-bottom: 50px;      /* 与卡片区域间距 */
  line-height: 1.6;
}

/* 英文环境下标题自动缩小，防止溢出 */
html:lang(en) #advantages .section-title {
  font-size: 30px !important;
}
html:lang(en) #advantages .section-subtitle {
  font-size: 14px !important;
}

/* 卡片网格：弹性布局，实现 3 个一行自动排列 */
#advantages .advantages-grid {
  display: flex;
  flex-wrap: wrap;          /* 自动换行 */
  justify-content: space-between; /* 均匀分布 */
  gap: 30px;                /* 卡片之间的间距 */
}

/* ============================
   单个卡片核心样式
   固定高度 500px
============================ */
#advantages .advantage-card {
  width: calc(33.333% - 20px); /* 3 个卡片等分一行 */
  height: 500px;               /* 你要的固定高度 500px */
  background: #222;            /* 卡片背景：深灰色 */
  border-radius: 20px;         /* 卡片圆角 */
  padding: 30px;               /* 文字与卡片内边距 */
  text-align: center;          /* 文字居中 */
  box-sizing: border-box;
  transition: all 0.3s ease;    /* 基础过渡动画 */
  cursor: pointer;             /* 鼠标移上去变手型 */
  position: relative;          /* 用于定位底部对勾 */
}

/* 鼠标悬浮：卡片晃动动画 */
#advantages .advantage-card:hover {
  animation: cardShake 0.3s ease-in-out;
}

/* 卡片晃动关键帧：左右轻微摆动 */
@keyframes cardShake {
  0%  { transform: rotate(0deg); }
  25% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
  75% { transform: rotate(-1.5deg); }
  100%{ transform: rotate(0deg); }
}

/* 隐藏卡片内的图片/图标区域 */
#advantages .advantage-image {
  display: none !important;
}

/* 卡片内标题 */
#advantages .adv-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;              /* 默认白色 */
  margin: 0 0 16px;
}

/* ============================
   卡片描述文本：默认样式
============================ */
#advantages .adv-content {
  font-size: 16px;
  color: #ccc;              /* 默认浅灰色 */
  line-height: 1.7;
  margin: 0;
}

/* ============================
   🔥 英文环境：文本超出10行自动隐藏，末尾显示...
   最多显示 10 行，超出裁切
============================ */
html:lang(en) #advantages .adv-content {
  display: -webkit-box;
  -webkit-line-clamp: 10;    /* 最大显示行数：10行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;   /* 超出显示 ... */
  max-height: calc(1.7em * 10); /* 配合行高限制高度 */
}

/* ============================
   底部对勾默认样式：白底 + 红色√
============================ */
#advantages .advantage-card::after {
  content: "✓";
  position: absolute;
  bottom: 25px;             /* 距离卡片底部距离 */
  left: 50%;                /* 水平居中 */
  transform: translateX(-50%);
  width: 40px;              /* 对勾圆形大小 */
  height: 40px;
  background: #fff;         /* 默认白色背景 */
  color: #ff0000;           /* 默认红色对勾 */
  border-radius: 50%;       /* 圆形 */
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;/* 过渡动画 */
}

/* ============================
   鼠标悬浮时颜色变化
============================ */
#advantages .advantage-card:hover {
  background: #333;
}
#advantages .advantage-card:hover .adv-title {
  color: #ff0000;
}
#advantages .advantage-card:hover .adv-content {
  color: #fff;
}
#advantages .advantage-card:hover::after {
  background: #ff0000;
  color: #fff;
}

/* ============================
   移动端适配：手机上一行 1 个卡片
============================ */
@media (max-width: 768px) {
  #advantages .advantage-card {
    width: 100%;
    height: auto; /* 手机端高度自动 */
  }
}


/* ============================
   合作流程区域 #cooperationProcess
   风格：与 #advantages 服务流程完全统一
   布局：3个卡片一排 | 深色卡片 | 固定高度500px
   交互：hover晃动 + 文字变色 + 对勾反色
   文本：中英文都只显示 1 行，超出自动 ...
============================ */

/* 区域外层容器 */
#cooperationProcess {
  width: 100%;
  padding: 80px 0;          /* 区域上下间距，和服务流程统一 */
  background: #f8f9fa;      /* 背景色统一 */
  box-sizing: border-box;
}

/* 内容容器：宽度1200px 居中统一 */
#cooperationProcess .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 主标题样式 统一 */
#cooperationProcess .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}

/* 标题下方红色横线 统一 */
#cooperationProcess .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 0;
  border-radius: 3px;
}

/* 副标题样式 统一 */
#cooperationProcess .section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* 英文标题缩小 统一 */
html:lang(en) #cooperationProcess .section-title {
  font-size: 30px !important;
}
html:lang(en) #cooperationProcess .section-subtitle {
  font-size: 14px !important;
}

/* 卡片布局 3个一排 统一 */
#cooperationProcess .process-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}



/* ============================
   合作流程 #cooperationProcess → 最终完美版
   黑框固定 70×70 | 不变形 | 箭头居中
   中文：自动换行全显示
   英文：自动换行 + 超出显示 ...
============================ */

#cooperationProcess {
  width: 100%;
  padding: 80px 0;
  background: #f8f9fa;
  box-sizing: border-box;
}

#cooperationProcess .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 标题样式 */
#cooperationProcess h2 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}
#cooperationProcess h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 50px;
  border-radius: 3px;
}

/* 8个步骤强制一行 */
#cooperationProcess .process-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
}

/* 每一项布局 */
#cooperationProcess .process-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12.5%;
  text-align: center;
}

/* 红色圆圈数字居中铺满 */
#cooperationProcess .step-num {
  width: 36px;
  height: 36px;
  background: #ff0000;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  line-height: 1;
  padding: 0;
}

/* 隐藏图标 */
#cooperationProcess .process-item i {
  display: none !important;
}

/* ============================
   🔥 黑色框：固定 70×70，永远不变形
============================ */
#cooperationProcess .process-item p {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  min-height: 70px !important;
  max-width: 70px !important;
  max-height: 70px !important;

  background: #222;
  color: #fff;
  font-size: 13px;
  border-radius: 12px;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 中文：自动换行，全部显示 */
#cooperationProcess .process-item p {
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
}

/* ============================
   🔥 英文：自动换行 + 最多3行 + 超出显示 ...
============================ */
html:lang(en) #cooperationProcess .process-item p {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;   /* 英文最多显示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
  word-break: break-word;
}

/* ============================
   🔥 箭头：放在两个黑框正中间
============================ */
#cooperationProcess .process-arrow {
  font-size: 22px;
  color: #ff0000;
  font-weight: bold;
  align-self: center;
  margin: 0;
  padding: 0;
}



/* ============================
   服务项目模块 #services → 最终修复版
   核心修复：英文正常换行，超出卡片用...，不溢出
   风格统一 | 卡片固定高度 | 中英文显示规范
============================ */

#services {
  width: 100%;
  padding: 80px 0;
  background: #f8f9fa;
  box-sizing: border-box;
}

#services .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 标题样式与服务流程/合作流程完全统一 */
#services .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}
#services .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 50px;
  border-radius: 3px;
}

#services .section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* 服务项目网格布局：2行3列 */
#services .services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

/* 服务卡片：固定宽高，不变形，控制内容区域 */
#services .service-card {
  width: calc(33.333% - 20px);
  height: 380px;          /* 固定总高度 */
  background: #222;
  border-radius: 16px;
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;       /* 卡片整体溢出隐藏，防止内容撑出 */
}

/* 图片/Logo区域：固定大小，居中 */
#services .service-platform {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  position: relative;
  overflow: hidden;
}
#services .service-platform img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 了解更多悬浮文字 */
#services .service-more-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: 14px;
  color: #ff0000;
  opacity: 0;
  transition: all 0.3s ease;
}

/* 服务标题：固定高度，防止挤压 */
#services .service-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  min-height: 50px;      /* 固定标题高度，统一布局 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================
   🔥 核心修复：描述文本区域
   1. 中文：正常换行，完整显示
   2. 英文：自动换行，最多4行，超出显示...
   3. 固定内容高度，不撑出卡片
============================ */
#services .service-card p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
  margin: 0;
  /* 固定内容高度：380(总高) - 80(图) - 20(图间距) - 50(标题) - 12(标题间距) - 30*2(上下内边距) = 158px */
  height: 158px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 中文：正常换行，完整显示 */
#services .service-card p {
  white-space: normal;
  word-break: break-word;
}

/* 英文：自动换行，最多4行，超出显示... */
html:lang(en) #services .service-card p {
  display: -webkit-box;
  -webkit-line-clamp: 4;    /* 最多显示4行，可按需调整行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
}

/* ============================
   hover 效果：晃动 + 变色（与服务流程统一）
============================ */
#services .service-card:hover {
  animation: cardShake 0.3s ease-in-out;
  background: #333;
}
#services .service-card:hover h3 {
  color: #ff0000;
}
#services .service-card:hover p {
  color: #fff;
}
#services .service-card:hover .service-more-text {
  opacity: 1;
  bottom: 5px;
}

/* 底部咨询按钮 */
#services .service-cta {
  text-align: center;
  margin-top: 60px;
}
#services .service-btn {
  display: inline-block;
  padding: 14px 40px;
  background: #ff0000;
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
}
#services .service-btn:hover {
  background: #cc0000;
}


/* ============================
   成功案例 #cases · 最终滚动+hover晃动版
   容器高度拉高 · 图片完整显示 · 无限滚动
   鼠标悬停：晃动+放大效果（和服务卡片一致）
============================ */

#cases {
  width: 100%;
  padding: 80px 0;
  background: #f8f9fa;
  box-sizing: border-box;
}

#cases .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#cases .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}
#cases .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 50px;
  border-radius: 3px;
}

#cases .section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* 外层容器高度拉高 */
#cases .cases-slider-wrap {
  width: 100%;
  height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* 无限滚动 */
#cases .cases-slider {
  display: flex;
  width: max-content;
  gap: 20px;
  animation: caseSlide 22s linear infinite;
}
#cases .cases-slider-wrap:hover .cases-slider {
  animation-play-state: paused;
}
@keyframes caseSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 卡片 */
#cases .case-card {
  width: 380px;
  height: 500px;
  background: transparent;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

#cases .case-image {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
}

/* 图片完整显示 */
#cases .case-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #ffffff;
  transition: transform 0.3s ease;
}

/* 🔥 hover 晃动 + 放大效果（和服务卡片统一） */
#cases .case-card:hover {
  animation: cardShake 0.3s ease-in-out;
}
#cases .case-card:hover img {
  transform: scale(1.05);
}

/* 统一晃动动画 */
@keyframes cardShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
}

/* 隐藏所有文字 */
#cases .case-card h4,
#cases .case-card p {
  display: none !important;
}

/* 隐藏指示器 */
#cases .case-nav {
  display: none;
}

/* ============================
   关于我们 #about → 完全匹配你现有结构 · 左右结构 · 不改动index
============================ */

#about {
  width: 100%;
  padding: 80px 0;
  background: #f8f9fa;
  box-sizing: border-box;
}

#about .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 标题统一风格 */
#about .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}
#about .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 50px;
  border-radius: 3px;
}

#about .section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* 左右布局（你结构里的 about-content） */
#about .about-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 60px;
}

/* 左侧文字 */
#about .about-text {
  flex: 1;
}
#about .about-text h3 {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin-bottom: 20px;
}
#about .content-box {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  margin-bottom: 30px;
}
#about .btn-more {
  display: inline-block;
  padding: 12px 30px;
  background: #ff0000;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}
#about .btn-more:hover {
  background: #cc0000;
}

/* 右侧图片 */
#about .about-image {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
}
#about .about-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 0.3s ease;
}
#about .about-image:hover img {
  transform: scale(1.03);
}

/* 数据统计 */
#about .about-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
}
#about .stat-item {
  flex: 1;
  text-align: center;
  padding: 20px;
}
#about .stat-item .num {
  font-size: 32px;
  font-weight: 700;
  color: #ff0000;
  margin-bottom: 8px;
}
#about .stat-item .label {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

/* 英文适配 */
html:lang(en) #about .content-box {
  word-break: break-word;
  white-space: pre-line;
}
/* ============================================
   【最终定稿】英文手机 about
   固定文字宽度 + 自动换行 + 4行省略 + 图片不变形
============================================ */
html[lang="en"] #about .about-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 🔥 给文字一个固定宽度盒子（你要的效果） */
html[lang="en"] #about .about-text {
  display: block !important;
  width: 55% !important;   /* 固定文字宽度 */
  min-width: 55% !important;
  max-width: 55% !important;
  flex: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 🔥 文字 10行省略 + 自动换行 */
html[lang="en"] #about .content-box {
  display: -webkit-box !important;
  -webkit-line-clamp: 10 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  width: 100% !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  box-sizing: border-box !important;
}

/* 🔥 图片：固定正常大小，不被挤压 */
html[lang="en"] #about .about-image {
  display: block !important;
  width: 45% !important;   /* 图片占剩下宽度 */
  min-width: 45% !important;
  max-width: 45% !important;
  flex: none !important;
  margin-left: 20px !important;
  box-sizing: border-box !important;
}

html[lang="en"] #about .about-image img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px !important;
}


/* ============================
   我要开店 #open-shop · 表单模块
   风格全站统一 · 左右/居中排版 · 中英文适配
============================ */

#open-shop {
  width: 100%;
  padding: 80px 0;
  background: #ffffff;
  box-sizing: border-box;
}

#open-shop .container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#open-shop .section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  color: #1b1b1b;
  margin-bottom: 12px;
  position: relative;
}
#open-shop .section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #ff0000;
  margin: 12px auto 40px;
  border-radius: 3px;
}

#open-shop .section-subtitle {
  font-size: 16px;
  color: #666;
  text-align: center;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* 表单卡片 */
#open-shop .open-shop-inner {
  max-width: 800px;
  margin: 0 auto;
  background: #f8f9fa;
  padding: 50px 60px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* 表单行 */
#open-shop .form-row {
  display: flex;
  gap: 30px;
  margin-bottom: 25px;
}

#open-shop .form-group {
  flex: 1;
}
#open-shop .form-group label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
#open-shop .form-group .required {
  color: #ff0000;
}

/* 输入框样式 */
#open-shop input,
#open-shop textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s;
}
#open-shop input:focus,
#open-shop textarea:focus {
  border-color: #ff0000;
}

#open-shop textarea {
  min-height: 120px;
  resize: vertical;
}

/* 按钮 */
#open-shop .form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

#open-shop .btn-submit,
#open-shop .btn-reset {
  padding: 14px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}

#open-shop .btn-submit {
  background: #ff0000;
  color: #fff;
}
#open-shop .btn-submit:hover {
  background: #cc0000;
}

#open-shop .btn-reset {
  background: #999;
  color: #fff;
}
#open-shop .btn-reset:hover {
  background: #777;
}

/* 英文换行不撑开 */
html:lang(en) #open-shop {
  word-break: break-word;
}


/* ============================
   你的原有 Footer 样式 → 仅替换颜色匹配主站
   布局100%不变 → 颜色统一主站深蓝+红色
============================ */

footer {
  background: #0A1A2F; /* 主站深蓝 */
  padding: 50px 0 20px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #eee;
}

.footer-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.footer-left, .footer-right {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
}

.footer-left h3, .footer-right h3 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 25px;
  padding-left: 12px;
  border-left: 4px solid #E63946; /* 主站红色 */
  margin-top: 0;
  min-height: 30px;
}

.footer-qrcodes {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
  min-height: 150px;
}
.qrcode-item {
  text-align: center;
}
.qrcode, .qrcode-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  border: 1px solid #555;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #888;
}
.qrcode-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #ddd;
}

.footer-contact p {
  font-size: 14px;
  color: #ddd;
  margin: 10px 0;
  line-height: 1.6;
  display: flex;
  align-items: center;
  min-height: 24px;
}
.footer-contact i {
  color: #E63946; /* 主站红色 */
  margin-right: 10px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.advantage-qrcodes {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
  min-height: 150px;
}
.advantage-item-box {
  text-align: center;
}
.advantage-icon-box {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.advantage-icon-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.advantage-item-box p {
  font-size: 14px;
  color: #ddd;
  margin: 0;
}

.advantage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 15px;
}
.advantage-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #ddd;
  line-height: 1.6;
  min-height: 24px;
}
.advantage-icon {
  margin-right: 10px;
  font-size: 16px;
  color: #E63946; /* 主站红色 */
  width: 20px;
  text-align: center;
}

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid #444;
  text-align: center;
}
.footer-copyright p {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 10px;
}
.footer-links {
  font-size: 13px;
  color: #aaa;
}
.footer-links a {
  color: #aaa;
  margin: 0 8px;
  text-decoration: none;
}
.footer-links a:hover {
  color: #E63946; /* 主站红色 */
}