/* 头部容器样式 */
.header {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 15px;
  background-color: #ffffff; /* 红色背景 */
  border-bottom: 1px solid #e0e0e0;
  /* 圆角效果 */
  border-radius: 45px;
  /* 不占满屏幕，设置最大宽度和左右自动外边距实现居中 */
  max-width: 95%;
  margin: 0 auto; /* 水平居中 */
  /* 固定在顶部 */
  position: fixed; /* 固定定位 */
  top: 25px; /* 距离顶部10px，避免贴边 */
  left: 0;
  right: 0;
  z-index: 999; /* 确保在其他内容上方 */
}

/* Logo样式 - 适配手机屏幕 */
.logo {
  height: 40px; /* 手机端适当减小logo尺寸 */
  width: auto;
  object-fit: contain;
}

/* 导航菜单样式 - 确保文字从左到右排列 */
nav ul {
  display: flex;
  flex-direction: row; /* 明确设置水平方向排列 */
  list-style: none;

  overflow-x: auto; /* 当菜单过长时允许横向滚动 */
  padding-bottom: 5px; /* 避免滚动条遮挡内容 */
}

/* 隐藏横向滚动条但保留滚动功能 */
nav ul::-webkit-scrollbar {
  display: none;
}

nav ul li {
  flex-shrink: 0; /* 防止菜单项被压缩 */
}

nav ul li a {
  display: inline-block;
  padding: 2px 13px; /* 手机端减小点击区域 */
  text-decoration: none;
  color: #0066cc; /* 未点击时蓝色文字 */
  font-size: 12px; /* 手机端适当减小字体 */
  white-space: nowrap; /* 防止文字换行 */
  /* 圆角效果 */
  border-radius: 45px;
  transition: all 0.3s ease;
}

/* 激活状态样式（点击后） */
nav ul li.active a {
  background-color: #0066cc;
  color: #ffffff;
}

/* 鼠标悬停/触摸反馈效果 */
nav ul li:not(.active) a:hover,
nav ul li:not(.active) a:active {
  background-color: #f0f7ff;
}
.headerIMG img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
}
.header img{
  width: 28%;
}

/* 适配小屏幕手机（如 iPhone SE、老旧安卓） */
@media (max-width: 320px) {
  .header nav ul li a {
    font-size: 10px; /* 适度缩小字体 */
    padding: 6px 8px; /* 微调内边距 */
  }
}

/* 适配中等屏幕手机（如 iPhone 12、大部分安卓） */
@media (min-width: 321px) and (max-width: 414px) {
  .header nav ul li a {
    font-size: 10px; /* 适度缩小字体 */
    padding: 6px 8px; /* 微调内边距 */
  }
}

/* 额外优化：让导航在极窄屏幕下不挤压 */
@media (max-width: 280px) {

  .header nav ul li a {
    font-size: 12px; /* 进一步缩小字体 */
  }
}



.jiegou1 img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
}
.jiegou1 span {
  width: 88%; /* 图片宽度自适应容器 */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
  color: #262525;
  font-size: 14px;
  padding: 2px 4px; /* 手机端减小点击区域 */
  margin-left: 7%;
}
.jiegou1-tu2{
  width: 88%; /* 图片宽度自适应容器 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
  margin-left: 7%;
  margin-top: 4%;
  /* 关键：让图片处于上层 */
  position: relative; /* 或 absolute，根据布局选择 */
  z-index: 3; /* 层级高于下方的div */
}
.jiegou1-neirong2{

  width: 100%;
  height: 260px;
  background-color: #134b98;
  /* 关键：让背景div处于下层并向上移动，产生重叠 */
  position: relative;
  margin-top: -80px; /* 向上移动50px（数值越大，重叠越多） */
  z-index: 1; /* 层级低于图片 */

}
.jiegou1-neirong2 img{
  width: 100%;
  padding-top: 70px;
  z-index: 2; /* 层级低于图片 */
}

.jiegou2 img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
}
/* 基础样式重置 */
/* 轮播容器 - 相对定位用于箭头绝对定位 */
.carousel-container {
  height: 200px;
  position: relative;
  max-width: 1200px;

  padding: 0 15px;
}

/* 图片展示区 */
.carousel-wrapper {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}

/* 单张图片容器 - 宽度保持不变 */
.carousel-item {
  width: 33.3333%; /* 宽度不变，始终显示3张图 */
  padding: 0 8px;
  flex-shrink: 0;
}

/* 图片样式 - 拉高高度，宽度保持自适应 */
.carousel-img {
  width: 100%;
  height: 1240px; /* 图片高度增加（原为180px） */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  border-radius: 8px;
  display: block;
}

/* 图片底部标题 - 固定在图片最底部 */
.carousel-title {
  position: absolute;
  bottom: 0; /* 紧贴图片底部 */
  left: 0;    /* 从图片左侧开始 */
  right: 0;   /* 到图片右侧结束 */
  background-color: #134b98;
  color: white;
  text-align: center;
  padding: 4px 0; /* 适当增加内边距 */
  font-size: 6px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  /* 确保标题在图片上方 */
  z-index: 5;
  font-weight: normal; /* 取消字体加粗 */
  white-space: nowrap; /* 强制文字在一行显示 */
}

/* 图片容器 - 用于标题定位 */
.img-container {
  position: relative;
  height: 240px; /* 与图片高度一致 */
}

/* 箭头样式 - 半透明覆盖在图片上 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.carousel-arrow:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

.carousel-arrow svg {
  width: 20px;
  height: 20px;
  color: #333;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .carousel-item {
    width: 33.3333%;
    padding: 0 4px;
  }

  .carousel-img, .img-container {
    height: 140px; /* 手机端图片高度相应增加 */
  }

  .carousel-title {
    font-size: 8px;
    padding: 6px 0;
  }

  .carousel-arrow {
    margin-top: -25px;
    width: 32px;
    height: 32px;
  }
}
.jiegou3{
  position: relative;
  margin-top: -60px; /* 向上移动50px（数值越大，重叠越多） */
  height: 300px;
  width: 100%;

}
.jiegou3 img{
  width: 100%; /* 图片宽度自适应容器 */
  margin-top: -10px; /* 向上移动50px（数值越大，重叠越多） */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
}
.jiegou4{
  position: relative;

  height: 300px;
  width: 100%;

}
.jiegou4 img{
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 高度按比例自动计算，保持原图比例 */
  display: block; /* 去除图片底部的空白间隙 */
  object-fit: cover; /* 保持图片比例并覆盖容器，可能裁剪部分图片 */
  margin-top: -5%;
}






.index-sec4{
  padding: 16% 0 20%;
  position: relative;
  margin-top: -65%; /* 向上移动50px（数值越大，重叠越多） */
}

.index-sec4 .wp .imgbox img{
  width: 100%;
  height: 100%;
}
.index-sec4 .wp .imgbox{
  position: relative;
  height:300px;
  width: 100%;

}
.index-sec4 .wp .imgbox .boxone{
  float: left;           /* 左浮动 */
  height:70%;
  width: 43%;

  margin-left: 5%;
}
.index-sec4 .wp .imgbox .imgboxtwo{
  float: right;          /* 右浮动 */
  height:70%;
  width: 43%;

  margin-right: 5%;
}
.index-sec4 .wp .imgbox .imgboxtwo .boxtwo{
  height:47%;


}
.index-sec4 .wp .imgbox .imgboxtwo .boxthree{
  height:47%;

  margin-top: 7%;
  bottom: 0%;
}
.index-sec4 .wp .imgbox .imgboxthree{
  position: absolute;
  width: 90%;
  height: 28%;
  bottom: 0%;
  left: 5%;
}



/* 页脚整体：深色背景 + 紧凑内边距 */
#ft {
  position: relative;

  margin-top: -30px; /* 向上移动50px（数值越大，重叠越多） */
  background-color: #1F2A3E; /* 与目标一致的深蓝色 */
  color: #FFFFFF;            /* 白色文字 */
  padding: 16px;             /* 手机端紧凑内边距 */
  font-family: "Microsoft YaHei", sans-serif;
}

/* 核心容器：文字左 + 二维码右，垂直居中 */
.ft-infos {
  display: flex;                  /* Flex布局 */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center;            /* 垂直居中！关键属性 */
  flex-wrap: nowrap;              /* 强制不换行（手机端也保持一行） */
}

/* 左侧文字区：垂直排列 */
.ft-text {
  display: flex;
  flex-direction: column; /* 电话和联系信息垂直分布 */
}

/* 联系电话样式 */
.hot-line h4 {
  display: flex;
  align-items: center;    /* 图标与文字对齐 */
  font-size: 14px;
  margin: 0 0 8px;        /* 与号码间距 */
  font-weight: normal;    /* 取消加粗 */
}
.hot-line h4 img {
  width: 18px; height: 18px; /* 图标尺寸 */
  margin-right: 6px;         /* 图标间距 */
}
.hot-line h3 {
  font-size: 16px;
  margin: 0 0 12px;        /* 与下方联系信息间距 */
}

/* 联系信息样式 */
.contact-info h5 {
  font-size: 16px;
  margin: 0 0 8px;         /* 与内容间距 */
  font-weight: 600;        /* 标题轻微加粗 */
}
.contact-info p {
  font-size: 14px;
  margin: 0 0 6px;         /* 每行间距 */
  line-height: 1.4;        /* 紧凑行高 */
  color: #E0E0E0;          /* 浅灰文字更柔和 */
}

/* 右侧二维码区：与文字垂直居中，内部内容居中 */
.ft-qr {
  display: flex;
  flex-direction: column;  /* 二维码 + 文字垂直分布 */
  align-items: center;     /* 内部内容居中（相对于自身） */
}
.ft-qr img {
  width: 80px; height: 80px; /* 二维码尺寸（与目标一致） */
  border: 2px solid #FFFFFF; /* 白色细边框 */
  padding: 2px;             /* 边框内边距 */
  margin-bottom: 6px;       /* 与文字间距 */
}
.ft-qr p {
  font-size: 12px;         /* 文字大小（紧凑） */
  margin: 0;               /* 清除默认边距 */
}

/* 版权栏：底部分隔 */
.copyright {
  margin-top: 16px;        /* 与上部分间距 */
  padding-top: 12px;       /* 顶部内边距 */
  border-top: 1px solid #333; /* 灰色分割线 */
}
.copyright .wp {
  font-size: 12px;         /* 小字体 */
  text-align: center;      /* 居中显示 */
  color: #C0C0C0;          /* 浅灰文字更低调 */
}

/* 强制手机端保持一行（无需堆叠，目标图是一行） */

.ft-infos {
  flex-direction: row; /* 确保手机端也是左右分布 */
}


.jiegou5{
  position: relative;
  margin-top: -15%; /* 改用百分比，适配不同屏幕间距 */
  margin-left: 5%;
  width: 90%;
  height: 80vw; /* 基于屏幕宽度的高度，随手机尺寸变化 */
  border-radius: 3vw; /* 圆角随容器等比例缩放 */
  overflow: hidden; /* 关键：隐藏超出容器的内容 */
}

/* 图片容器优化 - 控制图片显示范围 */
.jg5img{
  height: 30vw; /* 图片容器高度随屏幕宽度变化 */
  width: 100%;
  position: relative;
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}

/* 图片核心优化 - 解决突出问题 */
.jg5img img{
  width: 120%; /* 适度放大图片保证覆盖 */
  height: auto; /* 保持图片比例 */
  position: absolute; /* 精准定位 */
  left: 50%; /* 水平居中基准点 */
  top: 35%; /* 垂直居中基准点 */
  transform: translate(-50%, -40%); /* 微调位置，修正偏移 */
  z-index: 100;
  object-fit: cover; /* 覆盖容器，避免留白 */
  max-height: 150%; /* 限制最大高度，防止过度拉伸 */
}

/* 列表容器样式 - 与图片区域衔接 */
.list-container {
  position: relative;
  list-style: none;
  z-index: 80;
  width: 95%;
  left: 0; /* 取消左侧偏移，避免错位 */
  top: -12%; /* 调整与图片的距离 */
  margin: 0 auto; /* 居中显示 */
  background-color: #efefef;
  padding: 1% 0;
  border-radius: 2.5vw;
}

/* 列表项样式 */
.list-item {
  position: relative;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 0; /* 取消左侧偏移 */
  margin: 0 auto 3%; /* 居中并增加间距 */
  border-radius: 2vw;
  padding: 3% 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

/* 列表项文字样式 */
.list-item p {
  font-size: 3vw;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #1349ab;
  width: 65%;
}

/* 按钮样式 */
.list-item button {
  background-color: #0066cc;
  color: #fff;
  border: none;
  border-radius: 1vw;
  padding: 2% 4%;
  font-size: 2.8vw;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 28%;
  white-space: nowrap;
}

.list-item button:active {
  opacity: 0.8;
}

/* 小屏手机适配 */
@media (max-width: 380px) {
  .jiegou5 {
    height: 90vw;
  }
  .jg5img {
    height: 35vw;
  }
  .list-item p {
    font-size: 3.2vw;
  }
  .index-sec4{
    padding: 1% 0 20%;
  }

}

/* 大屏手机适配 */
@media (min-width: 414px) {
  .jiegou5 {
    height: 90vw;
  }
  .jg5img {
    height: 28vw;
  }
  .list-container {
    top: -10%;
  }
  .index-sec4{
    padding: 20% 0 20%;
  }
  .jiegou5{
  margin-top: 1%;
  }
}

@media (max-width: 390px) {
  .jiegou4 img{
    margin-top: 2%;
    z-index: 1;
  }
}