/* ==================== 2. 基础样式 (Base) ==================== */
/* IE9-11 兼容样式 - 不使用弹性盒布局 */
html {
  height: 100%;
}

body {
  min-height: 100vh;
  font-family: Times, Arial;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 不使用 flex，使用传统布局 */
}

/* ==================== 4. 全局布局 (Layout) ==================== */
/* 容器响应式设置 */
.container-fluid {
  width: 100%;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* 内容区域响应式宽度 */
.content {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  background-image: linear-gradient(rgba(255, 245, 187, 0.1), #fff6d9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19FFF5BB', endColorstr='#FFF6D9', GradientType=0);
}

/* ==================== 5. Header 样式 ==================== */
.wrapper {
  width: 100%;
  position: relative;
}

.header-bg {
  position: relative;
  width: 100%;
}

.header-bg img {
  width: 100%;
}

/* 默认显示：IE 浏览器显示 banner2，非 IE 显示 banner */
.header-bg .banner-normal {
  display: none; /* IE 浏览器默认隐藏 */
}

.header-bg .banner-ie {
  display: block; /* IE 浏览器默认显示 */
}

.header-title {
  position: absolute;
  top: 9%;
  left: 50%;
  width: 50%;
  height: auto;
  margin-left: -25%; /* 替代 transform: translateX(-50%) */
}

.header-title img {
  width: 100%;
}

.header-title-b {
  position: absolute;
  top: 27%;
  left: 50%;
  width: 60%;
  height: auto;
  margin-left: -30%; /* 替代 transform: translateX(-50%) */
}

.header-title-b img {
  width: 100%;
}

.header-hand-c {
  position: absolute;
  top: 32.5%;
  left: 70.5%;
  width: 22%;
  height: auto;
  margin-left: -11%; /* 替代 transform: translateX(-50%) */
}

.header-hand-c img {
  width: 100%;
}

/* IE 浏览器默认隐藏所有 hand-normal 类的元素 */
.header-title.hand-normal,
.header-title-b.hand-normal,
.header-hand-c.hand-normal,
.header-person-d.hand-normal {
  display: none !important;
}

/* ==================== 6. Footer 样式 ==================== */
.footer {
  width: 100%;
  height: auto;
  min-height: 10vh;
  background-color: #e18400; /* 直接使用颜色值，不使用 CSS 变量 */
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 5;
  text-align: center; /* 替代 flex 居中 */
  display: table; /* 使用 table 布局实现垂直居中 */
  width: 100%;
}

.footer .container-fluid {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.footer_logo {
  max-width: 350px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.footer p {
  text-align: center;
  color: #fff;
  font-size: 16px; /* 直接使用像素值 */
  line-height: 1.6;
}

/* 底部上滑图标容器 */
.scroll-to-top {
  position: fixed;
  bottom: 18rem;
  right: 5rem;
  z-index: 1000;
  cursor: pointer;
}

.icon-up {
  width: 50px;
  height: 50px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border-radius: 50%;
  display: block;
  filter: brightness(1);
}

.icon-up.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover .icon-up {
  filter: brightness(1.3) saturate(1.2);
}

/* ==================== 7. Content 区域样式 ==================== */
.content {
  position: absolute;
  top: 55%;
  padding: 0;
  z-index: 1;
}

/* 导航栏样式 - 使用 inline-block 替代 flex */
.content-nav {
  text-align: center; /* 替代 justify-content: center */
  width: 80%;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  background-color: #e18400;
  font-size: 0;
}

.content-nav > li {
  position: relative;
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.75rem; /* 替代 gap */
}

.content-nav > li a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.content-nav > li a span {
  color: #fff;
  display: block;
  font-size: 20px; /* 直接使用像素值 */
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

/* 悬停效果 */
.content-nav > li a:hover {
  text-decoration: underline;
  text-decoration-color: #fff;
}

.content-nav > li a:hover span {
  color: #fff;
}

/* 点击时的反馈效果 */
.content-nav > li a:active {
  transition: all 0.1s ease;
}

.content-body {
  width: 75%;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 2rem;
  /* 不使用 flex，使用 block 布局 */
}

.contentA,
.contentB,
.contentC,
.contentD {
  width: 100%;
  padding: 2rem 0;
  text-align: center; /* 让标题容器居中 */
}

.xiala {
  width: 100%;
  margin: 0 auto;
  display: none;
  background-color: transparent;
  transition: background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.xiala img {
  width: 100%;
  height: auto;
}

/* 激活状态：显示菜单时添加背景色 */
.xiala.active {
  background-color: #edbf6b;
}

/* 标题容器 - 使用 text-align 替代 flex */
.content-title-container {
  text-align: center;
  margin: 0 auto 1rem auto;
  width: auto;
  display: block; /* 改为 block，通过 margin: 0 auto 居中 */
}

.content-title {
  font-size: 36px; /* 直接使用像素值 */
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: block;
  width: auto;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  margin: 0;
}

.content-title:hover {
  color: #f2a501;
  font-size: 39.6px; /* 36px * 1.1 */
}

.content-line {
  position: relative;
  width: 20%;
  height: 4px;
  margin: 0.5rem auto 0;
  transition: all 0.5s ease;
  /* 使用 float 替代 flex */
  overflow: hidden;
}

.content-line::before {
  content: "";
  width: 49%;
  height: 4px;
  background-color: #f2a501;
  transition: all 0.5s ease;
  border-radius: 2px;
  float: left;
  display: block;
}

.content-line::after {
  content: "";
  width: 49%;
  height: 4px;
  background-color: #1665dc;
  transition: all 0.5s ease;
  border-radius: 2px;
  float: right;
  display: block;
}

.content-nav-wap {
  display: none;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: auto;
  margin: 0 auto;
  opacity: 0;
  z-index: 20;
  background-color: #edbf6b;
  overflow: hidden;
  a {
    text-decoration: none;
  }
  span {
    font-family: "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei";
    display: block;
    color: #fff;
    width: 100%;
    padding: 10px 0px;
    text-align: center;
  }
}

/* contentA布局 - IE浏览器：使用float实现水平布局 */
.contentA-body {
  margin: 2rem auto;
  width: 94.5%;
  overflow: hidden; /* 清除浮动 */
  padding-left: 2rem; /* 左侧间距 */
  padding-right: 2rem; /* 右侧间距 */
  box-sizing: border-box;
}

/* 左侧：使用float实现水平布局 */
.contentA-left {
  width: 48%; /* 左侧宽度 */
  float: left; /* 左浮动 */
  margin-right: 1.5%; /* 左右两侧之间的间距（使用百分比避免超出） */
  position: relative; /* 为绝对定位的文案提供定位上下文 */
}

.contentA-left-img {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  height: 0;
  padding-bottom: 80%; /* 保持图片比例 */
}

.contentA-left-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.contentA-left-content {
  position: absolute; /* 绝对定位，覆盖在图片上层 */
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%; /* 占据底部20%高度 */
  background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  padding: 0; /* 移除padding，让table布局更准确 */
  box-sizing: border-box;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  z-index: 2; /* 确保在图片上层 */
  /* 使用 table 实现垂直居中 */
  display: table;
  width: 100%;
  table-layout: fixed; /* 固定表格布局 */
}

/* a 标签样式，参与 table 布局 */
.contentA-left-content a {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
  padding: 0.75rem 1rem; /* 将padding移到a标签上 */
  height: 100%; /* 确保a标签填满容器高度 */
}

.contentA-left-content p {
  color: #fff;
  font-size: 20px; /* 直接使用像素值 */
  line-height: 1.4;
  margin: 0;
  text-align: center;
  display: block; /* 改为block，因为a已经是table-cell了 */
}

/* 右侧：使用float实现水平布局 */
.contentA-right {
  width: 50.5%; /* 右侧宽度，48% + 1.5%间距 + 50.5% = 100% */
  float: left; /* 左浮动 */
  background-color: #f8f9fa; /* 卡片背景色 */
  border-radius: 12px; /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); /* 阴影效果 */
  overflow: hidden; /* 清除内部浮动 */
  /* 确保高度与左侧图片一致 */
  /* 左侧图片高度 = 48% * 80% = 38.4%，右侧宽度 = 50.5% */
  /* 所以 padding-bottom = 38.4% / 50.5% ≈ 76.04% */
  height: 0;
  padding-bottom: 38%;
  position: relative;
}

.contentA-right > li {
  position: absolute;
  left: 0;
  right: 0;
  padding: 1.5rem;
  overflow: hidden; /* 清除浮动 */
  box-sizing: border-box;
  /* 使用伪元素创建有左右间距的分割线 */
}

.contentA-right > li:first-child {
  top: 0;
  height: 50%; /* 第一个li占据上半部分 */
}

.contentA-right > li:last-child {
  top: 50%; /* 第二个li从中间开始 */
  height: 50%; /* 第二个li占据下半部分 */
}

.contentA-right > li:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5%; /* 左边距，确保左右各留5%的间距 */
  width: 90%; /* 宽度为90%，左右各留5% */
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0; /* 移除margin */
}

/* 第一个li：图片在左，文字在右 */
.contentA-right > li:first-child .contentA-right-item-img {
  width: 50%; /* 图片宽度，留出间距 */
  float: left; /* 图片左浮动 */
  /* margin-right: 4%; 图片和文字之间的间距 */
  overflow: visible; /* 不裁剪图片 */
  border-radius: 8px;
  position: relative;
  background-color: red;
  padding: 0; /* 确保没有padding影响图片宽度 */
  margin: 0; /* 确保没有margin */
  box-sizing: border-box; /* 确保宽度计算正确 */
}

/* 包裹图片的a标签样式 */
.contentA-right > li:first-child .contentA-right-item-img a {
  display: block; /* 让a标签成为块级元素 */
  width: 100%; /* a标签宽度填满父容器 */
  height: 100%; /* a标签高度填满父容器 */
  padding: 0; /* 移除padding */
  margin: 0; /* 移除margin */
  box-sizing: border-box; /* 确保宽度计算正确 */
}

.contentA-right > li:first-child .contentA-right-item-img img {
  width: 100% !important; /* 宽度填满父容器（a标签）的100% */
  height: auto !important; /* 高度自适应，保持宽高比 */
  display: block !important; /* 必须设置为block，否则inline元素的width: 100%不会正确应用 */
  border-radius: 8px;
  max-width: 100% !important; /* 确保图片不会超出容器 */
  margin: 0 !important; /* 移除所有margin */
  padding: 0 !important; /* 移除所有padding */
  box-sizing: border-box !important; /* 确保宽度计算正确 */
  object-fit: none !important; /* 覆盖全局的object-fit: cover，让图片保持原始比例 */
}

.contentA-right > li:first-child a {
  width: 48%; /* 文字宽度 */
  float: left; /* 文字左浮动 */
  display: table; /* 使用table实现垂直居中 */
  height: 100%;
}

.contentA-right > li:first-child p {
  width: 50%;
  margin: 0;
  font-size: 20px; /* 直接使用像素值 */
  line-height: 1.6;
  color: #333;
  text-align: left; /* p标签左对齐 */
  display: table-cell;
  vertical-align: top;
}

/* 第二个li：文字在左，图片在右 */
.contentA-right > li:last-child a {
  width: 50%; /* 文字宽度，与图片各占50% */
  float: left; /* 文字左浮动 */
  /* margin-right: 4%; 文字和图片之间的间距 */
  display: table; /* 使用table实现垂直居中 */
  height: 100%;
  box-sizing: border-box; /* 确保宽度计算正确 */
}

.contentA-right > li:last-child p {
  width: 100%;
  margin: 0;
  font-size: 20px; /* 直接使用像素值 */
  line-height: 1.6;
  color: #333;
  text-align: left; /* p标签左对齐 */
  display: table-cell;
  vertical-align: top;
}

.contentA-right > li:last-child .contentA-right-item-img {
  width: 50%; /* 图片宽度，与第一个li保持一致 */
  float: left; /* 图片左浮动 */
  overflow: visible; /* 不裁剪图片 */
  border-radius: 8px;
  position: relative;
  padding: 0; /* 确保没有padding影响图片宽度 */
  margin: 0; /* 确保没有margin */
  box-sizing: border-box; /* 确保宽度计算正确 */
}

/* 包裹图片的a标签样式 */
.contentA-right > li:last-child .contentA-right-item-img a {
  display: block; /* 让a标签成为块级元素 */
  width: 100%; /* a标签宽度填满父容器 */
  height: 100%; /* a标签高度填满父容器 */
  padding: 0; /* 移除padding */
  margin: 0; /* 移除margin */
  box-sizing: border-box; /* 确保宽度计算正确 */
}

.contentA-right > li:last-child .contentA-right-item-img img {
  width: 100% !important; /* 宽度填满父容器（a标签）的100% */
  height: auto !important; /* 高度自适应，保持宽高比 */
  display: block !important; /* 必须设置为block，否则inline元素的width: 100%不会正确应用 */
  border-radius: 8px;
  max-width: 100% !important; /* 确保图片不会超出容器 */
  margin: 0 !important; /* 移除所有margin */
  padding: 0 !important; /* 移除所有padding */
  box-sizing: border-box !important; /* 确保宽度计算正确 */
  object-fit: none !important; /* 覆盖全局的object-fit: cover，让图片保持原始比例 */
}

/* contentB布局 - IE浏览器：禁用翻转效果，p标签覆盖在图片底部上层 */
.contentB-body {
  margin: 2rem auto;
  width: 94.5%;
  overflow: hidden; /* 清除浮动 */
  perspective: none; /* IE浏览器移除3D透视效果 */
}

.contentB-body > li {
  width: 32.33%; /* 三个卡片等宽，考虑间距 */
  margin-right: 1%;
  position: relative;
  height: 0;
  padding-bottom: 25%;
  perspective: none; /* IE浏览器移除3D透视效果 */
  cursor: pointer;
  float: left;
}

.contentB-body > li:last-child {
  margin-right: 0;
}

.contentB-body > li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
  transform: none; /* IE浏览器移除翻转 */
  transform-style: flat; /* IE浏览器移除3D变换 */
}

.contentB-body > li:hover a {
  transform: none; /* IE浏览器禁用悬停翻转 */
}

.contentB-body > li .contentB-item-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: visible; /* IE浏览器显示正面 */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.contentB-body > li .contentB-item-img img {
  width: 100%;
  height: 100%;
  display: block;
}

.contentB-body > li .contentB-item-content {
  position: absolute;
  top: auto; /* 覆盖默认的 top: 0 */
  bottom: 0; /* 定位在底部 */
  left: 0;
  right: 0;
  width: 100%;
  height: 20%; /* 占据底部20%高度 */
  background: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
  transform: none; /* IE浏览器移除翻转 */
  backface-visibility: visible; /* IE浏览器显示正面 */
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: none; /* 移除阴影 */
  z-index: 2; /* 确保在图片上层 */
  /* 使用 table-cell 实现垂直居中 */
  display: table;
  width: 100%;
}

.contentB-item-content > p {
  color: #fff;
  font-size: 20px; /* 直接使用像素值 */
  line-height: 1.6;
  margin: 0;
  text-align: left; /* 文字左对齐，参考移动端 */
  display: table-cell;
  vertical-align: middle;
  padding: 0;
}

/* contentC布局 - 使用 float 替代 flex */
.contentC-body {
  margin: 2rem auto;
  width: 94.5%;
  overflow: hidden; /* 清除浮动 */
}

.contentC-body > li {
  width: 32.33%; /* 三个卡片等宽 */
  margin-right: 1%;
  float: left;
  overflow: hidden;
}

.contentC-body > li:last-child {
  margin-right: 0;
}

.contentC-body > li .contentC-item-img {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  position: relative;
  overflow: hidden;
}

.contentC-body > li .contentC-item-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.contentC-body > li .contentC-item-content {
  background-color: #f6f6f6;
  padding: 1.5rem 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.contentC-body > li .contentC-item-content p {
  font-size: 20px; /* 直接使用像素值 */
  line-height: 1.5;
  margin: 0;
  padding-left: 1rem;
  color: #333;
  transition: color 0.3s ease, transform 0.3s ease;
}

.contentC-body > li:hover .contentC-item-content {
  background-color: #f2a501;
}

.contentC-body > li:hover .contentC-item-content p {
  color: #fff;
}

/* contentD布局 - 使用 float 替代 flex */
.contentD-body {
  margin: 2rem auto;
  width: 94.5%;
  overflow: hidden; /* 清除浮动 */
}

.contentD-body > li {
  width: 23.5%; /* 四个卡片等宽，考虑间距 */
  margin-right: 1%;
  float: left;
  overflow: hidden;
}

.contentD-body > li:last-child {
  margin-right: 0;
}

.contentD-body > li img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

@media (max-width: 767.98px) {
  .contentA-right > li:first-child p {
    font-size: 8px !important;
  }
  .contentA-right > li:last-child p {
    font-size: 8px !important;
  }

  /* 在较窄屏幕上，确保分割线水平居中 */
  .contentA-right > li:not(:last-child)::after {
    left: 5% !important;
    right: 5% !important;
    width: auto !important;
  }

  .contentB-body > li .contentB-item-content {
    padding: 0.5rem 0.5rem;
  }
  .contentB-item-content > p {
    font-size: 12px !important;
  }

  .contentC-body > li .contentC-item-content {
    padding: 0.5rem 0.5rem;
  }
  .contentC-body > li .contentC-item-content p {
    font-size: 12px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .contentA-right > li:first-child p {
    font-size: 10px !important;
  }
  .contentA-right > li:last-child p {
    font-size: 10px !important;
  }
  .contentB-body > li .contentB-item-content {
    padding: 0.5rem 0.5rem;
  }
  .contentB-item-content > p {
    font-size: 12px !important;
  }
  .contentC-body > li .contentC-item-content {
    padding: 0.5rem 0.5rem;
  }
  .contentC-body > li .contentC-item-content p {
    font-size: 14px !important;
  }
}