.Web02-container {
  padding-top: 80px; /* 顶部内边距，通常用于为固定导航栏留出空间 */
  min-height: calc(100vh - 80px); /* 最小高度为视口高度减去80px，确保区域至少充满屏幕 */
  display: flex; /* 启用Flexbox布局 */
  justify-content: center; /* 水平居中子元素 */
  align-items: center; /* 垂直居中子元素 */
  padding: var(--section-padding); /* 使用变量设置内边距 */
  background: #f0f4f7;
}

/* 内容包裹层：最大 1200px 宽，左右自动留白，Flex 横向排列，图文之间 60px 间距 */
.web02-container {
  width: 100%; /* 宽度占满父容器 */
  max-width: 1500px; /* 最大宽度限制，防止在大屏幕上过宽 */
  display: flex; /* 启用Flexbox布局 */
  gap: var(--gap); /* 使用变量设置子元素之间的间隔 */
  align-items: center; /* 垂直居中对齐子元素 */
  padding: var(--card-padding); /* 使用变量设置内边距 */
  background: #ffffff; /* 白色背景 */
  border-radius: var(--radius); /* 使用变量设置圆角 */
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15); /* 添加阴影，营造深度感 */
  border: 1px solid rgba(0, 0, 0, 0.05); /* 添加一个非常浅的边框 */
}

.web02-left {
  flex: 0 0 66%;              /* 不放大、不缩小、基准 66% */
  border-radius: 12px;        /* 12px 圆角，柔和过渡 */
  overflow: hidden;           /* 把图片超出的部分裁掉，圆角才完整 */
  position: relative;         /* 添加相对定位 */
}
.web02-left img {
  width: 100%;                /* 图片宽度撑满父级 */
  height: auto;               /* 高度自动，保持原始比例 */
  display: block;             /* 去掉图片底部幽灵空白 */
  max-width: 100%;            /* 关键：防止图片超出容器宽度 */
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */
}

/* 添加放大保护：当用户放大页面时，图片会等比例缩小以适应容器 */
.web02-left img.scale-protection {
  transform-origin: center center; /* 缩放中心点为图片中心 */
  transform: scale(0.95);          /* 轻微缩小图片 */
}

.web02-right {
  flex: 1;                    /* 占满剩余空间 */
}
.web02-right h2 {
  font-size: 14px;            /* 小字，分类标签感 */
  color: #999;                /* 浅灰色，弱化视觉权重 */
  letter-spacing: 2px;        /* 字间距拉开，更有高级感 */
  margin-bottom: 8px;         /* 与下方主标题拉开一点点距离 */
}
.web02-right h3 {
  font-size: 32px;            /* 主标题大字，突出卖点 */
  line-height: 1.4;           /* 行高稍大，阅读更轻松 */
  margin-bottom: 20px;        /* 与正文段落保持距离 */
}
.web02-right p {
  font-size: 16px;            /* 正文字号 */
  line-height: 1.8;           /* 1.8 倍行高，中文阅读友好 */
  margin-bottom: 24px;        /* 与下方卖点列表隔开 */
}

/* 卖点列表：去掉默认小黑点，用红色小三角代替，更精致 */
.web02-selling-points {
  list-style: none;           /* 清除默认圆点 */
  margin-bottom: 32px;        /* 与按钮之间留空 */
}
.web02-selling-points li {
  position: relative;         /* 为了让伪元素绝对定位 */
  padding-left: 20px;         /* 给红色小三角留位置 */
  margin-bottom: 8px;         /* 每条卖点之间空隙 */
  font-size: 15px;            /* 比正文稍小，层次区分 */
}
.web02-selling-points li::before {
  content: "▸";               /* 红色小三角符号 */
  position: absolute;         /* 相对于 li 定位 */
  left: 0;                    /* 贴左 */
  color: #e60012;             /* 企业红，强调品牌色 */
}

/* "了解更多"按钮：放在 .web02-right 内部作为最后一个元素 */
.web02-more-btn {
  display: inline-block;      /* 既能设宽高又不会独占一行 */
  padding: 10px 28px;         /* 上下 10、左右 28，按钮看起来不挤 */
  background: #645f5f;        /* 品牌红 */
  color: #fff;                /* 白字，对比强烈 */
  border-radius: 4px;         /* 4px 小圆角，简洁利落 */
  text-decoration: none;      /* 去掉链接下划线 */
  transition: background 0.3s;/* 悬停变色过渡平滑 */
}
.web02-more-btn:hover {
  background: #c40010;        /* 悬停时深一点，增加交互反馈 */
}

/* ========== 移动端适配 ========== */

/* 媒体查询：当视口宽度小于等于768px时应用以下样式（移动端） */
@media (max-width: 768px) {
  .Web02-container {
    padding: 60px 20px; /* 调整内边距，顶部留出导航栏空间 */
    min-height: auto; /* 取消最小高度限制 */
    overflow: hidden; /* 防止溢出 */
  }
  
  .web02-container {
    flex-direction: column; /* 将Flex容器的主轴方向改为垂直（列） */
    padding: 30px; /* 调整内边距 */
    gap: 0; /* 重置间隔，我们手动控制 */
    text-align: center; /* 文字居中对齐 */
    overflow: hidden; /* 防止溢出 */
  }
  
  /* 关键：使用 order 属性改变Flex子项的显示顺序 */
  .web02-left {
    order: 2; /* 将图片的显示顺序设置为2（排在第二位，在文字下方） */
    flex: 0 0 auto; /* 重置flex属性：不伸缩，基础大小由内容决定 */
    width: 100%; /* 宽度占满父容器 */
    max-width: 100%; /* 最大宽度为100% */
    min-width: 0; /* 清除最小宽度限制，适应小屏幕 */
    margin-top: 30px; /* 与上方文字保持距离 */
    margin-bottom: 30px; /* 与下方按钮保持距离 */
    overflow: visible; /* 移动端取消裁剪，允许图片完整显示 */
  }
  
  .web02-left img {
    width: 100%; /* 宽度100% */
    max-width: 100%; /* 最大宽度100% */
    height: auto; /* 高度自动 */
    min-height: 250px; /* 调整图片最小高度 */
    max-height: 400px; /* 限制图片最大高度，防止过长 */
    object-fit: contain; /* 关键：保持图片完整显示，不裁剪 */
    border-radius: 8px; /* 为图片本身添加圆角 */
  }
  
  .web02-right {
    order: 1; /* 将文字内容的显示顺序设置为1（排在第一位，即最上方） */
    flex: 0 0 auto; /* 重置flex属性 */
    width: 100%; /* 宽度占满父容器 */
    max-width: 100%; /* 最大宽度为100% */
    min-width: 0; /* 清除最小宽度限制 */
    text-align: left; /* 移动端文字左对齐更易读 */
  }
  
  /* 关键：将按钮从 .web02-right 中分离出来，放在图片下方 */
  .web02-more-btn {
    order: 3; /* 按钮显示顺序为3，在图片下方 */
    width: 100%; /* 按钮全宽显示 */
    text-align: center; /* 按钮文字居中 */
    display: block; /* 改为块级元素 */
    margin-top: 0; /* 重置上边距 */
  }
  
  .web02-right h2 {
    font-size: 13px; /* 调整副标题字体大小 */
    text-align: center; /* 移动端居中对齐 */
    letter-spacing: 1px; /* 调整字符间距 */
  }
  
  .web02-right h3 {
    font-size: 1.8rem; /* 调整主标题字体大小 */
    line-height: 1.3; /* 调整标题行高 */
    text-align: center; /* 移动端居中对齐 */
  }
  
  .web02-right p {
    font-size: 1.2rem; /* 调整正文字体大小 */
    text-align: left; /* 正文左对齐 */
    line-height: 1.6; /* 调整行高 */
    margin-bottom: 20px; /* 减少下边距 */
  }
  
  .web02-selling-points {
    margin-bottom: 20px; /* 减少下边距 */
  }
  
  .web02-selling-points li {
    text-align: left; /* 列表项左对齐 */
    font-size: 14px; /* 调整卖点字体大小 */
  }
}

/* 平板设备 (宽度在769px到1024px之间) */
@media (min-width: 769px) and (max-width: 1024px) {
  .Web02-container {
    padding: 60px 30px; /* 调整内边距 */
    min-height: auto; /* 取消最小高度限制 */
    overflow: hidden; /* 防止溢出 */
  }
  
  .web02-container {
    flex-direction: column; /* 平板也改为垂直排列 */
    padding: 30px;
    gap: 0; /* 重置间隔 */
    text-align: center;
    overflow: hidden; /* 防止溢出 */
  }
  
  /* 保持文字(1) → 图片(2) → 按钮(3)的顺序 */
  .web02-left {
    order: 2; /* 图片在中间 */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: visible; /* 平板端取消裁剪 */
  }
  
  .web02-left img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 250px;
    max-height: 400px;
    object-fit: contain; /* 关键：保持图片完整显示 */
    border-radius: 8px; /* 为图片本身添加圆角 */
  }
  
  .web02-right {
    order: 1; /* 文字在最上面 */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-align: left; /* 平板端文字左对齐 */
  }
  
  /* 关键：按钮在图片下方 */
  .web02-more-btn {
    order: 3; /* 按钮在最下面 */
    width: auto; /* 平板按钮宽度自适应 */
    display: block; /* 块级显示 */
    margin: 0 auto; /* 水平居中 */
  }
  
  .web02-right h2 {
    font-size: 13px;
    text-align: center; /* 平板居中对齐 */
  }
  
  .web02-right h3 {
    font-size: 1.8rem;
    line-height: 1.3;
    text-align: center; /* 平板居中对齐 */
  }
  
  .web02-right p {
    font-size: 1.2rem;
    text-align: left; /* 正文左对齐 */
    margin-bottom: 20px;
  }
  
  .web02-selling-points {
    margin-bottom: 20px;
  }
  
  .web02-selling-points li {
    text-align: left;
    font-size: 14px;
  }
}

/* 小手机设备 (宽度小于等于480px) */
@media (max-width: 480px) {
  .Web02-container {
    padding: 15px; /* 进一步减少内边距 */
    padding-top: 50px; /* 调整顶部内边距 */
    overflow: hidden; /* 防止溢出 */
  }
  
  .web02-container {
    padding: 20px; /* 调整卡片内边距 */
    gap: 0; /* 重置间隔 */
    border-radius: 15px; /* 调整圆角半径 */
    overflow: hidden; /* 防止溢出 */
  }
  
  /* 调整顺序：文字(1) → 图片(2) → 按钮(3) */
  .web02-left {
    order: 2; /* 图片在中间 */
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: visible; /* 小屏幕取消裁剪 */
  }
  
  .web02-left img {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px; /* 进一步调整图片最小高度 */
    max-height: 300px; /* 进一步限制图片最大高度 */
    object-fit: contain; /* 关键：保持图片完整显示 */
    border-radius: 6px; /* 为图片本身添加圆角 */
  }
  
  .web02-right {
    order: 1; /* 文字在最上方 */
  }
  
  .web02-more-btn {
    order: 3; /* 按钮在最下方 */
    width: 100%; /* 小屏幕按钮全宽 */
    padding: 12px 24px; /* 调整按钮内边距 */
    font-size: 14px; /* 调整按钮文字大小 */
    display: block; /* 块级显示 */
  }
  
  .web02-right h2 {
    font-size: 12px; /* 进一步调整副标题字体大小 */
  }
  
  .web02-right h3 {
    font-size: 1.6rem; /* 进一步调整主标题字体大小 */
  }
  
  .web02-right p {
    font-size: 1.1rem; /* 进一步调整正文字体大小 */
    margin-bottom: 15px;
  }
  
  .web02-selling-points {
    margin-bottom: 15px;
  }
  
  .web02-selling-points li {
    font-size: 13px; /* 进一步调整卖点字体大小 */
  }
}

/* 浏览器放大保护（当视口宽度小于等于700px时） */
@media (max-width: 700px) {
  /* 确保在用户放大页面时，布局也能正常换行处理 */
  .web02-container {
    flex-wrap: wrap; /* 允许Flex子项换行 */
    overflow: hidden; /* 防止溢出 */
  }
  
  .web02-left {
    overflow: visible; /* 取消裁剪 */
  }
  
  .web02-left img {
    object-fit: contain; /* 关键：图片完整显示，不裁剪 */
    max-width: 100%; /* 防止图片超出容器 */
    transform: scale(0.95); /* 轻微缩小图片以适应容器 */
    transform-origin: center center; /* 缩放中心点 */
  }
}

/* 特别针对浏览器放大的额外保护 */
@media (max-width: 500px) {
  .web02-left img {
    transform: scale(0.9); /* 在更小的视口中进一步缩小图片 */
  }
}