/* 自定义字体（保留原配置，若无需可删除） */
@font-face {
  font-family: 'czy';
  src: url('images/czy.ttf') format('woff2'), 
       url('images/czy.ttf') format('woff1'),
       url('images/czy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html {
  font-size: 16px; /* 定义1rem = 16px */
}

body {
  font-family: "czy", sans-serif;
  background-color: #f5f5f5;
  overflow-x: hidden;
}
.fenye{
  width:48rem;
  text-align:center;
  display:block;
  padding-top:4rem;
}

/* 头部容器：作为 banner 的定位父级，可根据需要调整高度/背景 */
.header-container {
  position: relative;
  width: 100%;
  /* 若需要与原轮播高度匹配，可保留宽高比配置，否则可删除 */
  height: 11.45rem;
}

/* 顶部渐变 Banner 核心样式 */
.header-banner {
  width: 100%;
  height: 11.625rem; /* Banner 基础高度 */
  /* 从上往下渐变：#953e01 渐变至透明 */
  background: linear-gradient(to bottom, #953e01, transparent);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; /* 确保层级最高 */
  /* 文字防锯齿优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* banner 内部导航容器：固定宽度75rem，居中 */
.banner-nav {
  width: 75rem;
  display: flex;
  justify-content: space-between; /* logo 左，导航右 */
  align-items: center;
  gap: 2rem;
}

/* Logo 区域样式 */
.banner-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 13rem;
  flex-shrink: 0; /* 防止 Logo 被挤压 */
}

.logo-text {
  font-size: 2.9375rem;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: 3px; /* 中文字间距 */
  width: 100%;
}

.logo-en {
  font-size: 1rem;
  line-height: 1.2;
  width: 100%;
  white-space: nowrap; /* 防止英文换行 */
  opacity: 0.9;
  text-transform: uppercase; /* 英文大写 */
}

/* 导航链接容器 */
.nav-links {
  display: flex;
  gap: 2rem; /* 导航项间距 */
  justify-content: flex-end;
  flex-wrap: wrap; /* 小屏换行 */
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s;
  white-space: nowrap; /* 防止导航项换行 */
  border-bottom: 1px solid #fff; /* 白色下划线 */
  padding-bottom: 0.25rem; /* 下划线与文字间距 */
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff3cd;
  font-weight: bold;
  border-bottom-color: #fff3cd; /* 下划线颜色同步变化 */
}

/* 响应式适配：屏幕小于75rem（1200px）时 */
@media (max-width: 75rem) {
  .banner-nav {
    width: 100%; /* 导航容器占满宽度 */
    padding: 0 1rem; /* 防止贴边 */
  }
  .header-container{
    height: 7.45rem;
  }
}

/* 屏幕宽度 768px - 1199px（48rem - 74.9375rem）时 */
@media (min-width: 48rem) and (max-width: 74.9375rem) {
  .header-banner {
    height: 8rem; /* 减小 Banner 高度 */
    padding: 0 1rem;
  }

  /* 隐藏导航链接，Logo 居中 */
  .nav-links {
    display: none !important;
  }

  .banner-nav {
    justify-content: center;
  }

  .logo-text {
    font-size: 2.5rem; /* 缩小 Logo 文字 */
  }

  .logo-en {
    font-size: 0.875rem; /* 缩小英文文字 */
  }
}

/* 屏幕宽度 480px - 767px（30rem - 47.9375rem）时 */
@media (min-width: 30rem) and (max-width: 47.9375rem) {
  .header-banner {
    height: 8rem; /* 进一步减小 Banner 高度 */
    padding: 0 1rem;
  }

  .nav-links {
    display: none !important;
  }

  .banner-nav {
    justify-content: center;
  }

  .logo-text {
    font-size: 2rem; /* 进一步缩小 Logo 文字 */
  }

  .logo-en {
    font-size: 0.75rem; /* 进一步缩小英文文字 */
  }
}

/* 屏幕宽度小于480px（<29.9375rem）时 */
@media (max-width: 29.9375rem) {
  .header-container {
        height: 4.45rem;
  }
  .header-banner {
    height: 5rem; /* 最小 Banner 高度 */
    padding: 0 0.5rem;
  }

  .nav-links {
    display: none !important;
  }

  .banner-nav {
    justify-content: center;
  }

  .logo-text {
    font-size: 1.5rem; /* 最小 Logo 文字 */
  }

  .logo-en {
    font-size: 0.6rem; /* 最小英文文字 */
  }
}

/* ===================== listmain/listbox 原有样式 ===================== */
.listmain {
  background: url(images/listbg.png) no-repeat center top; /* 背景图 */
  background-size: cover;
  padding: 1rem 2rem; /* 上下内边距，左右留白 */
}
.listbox {
  max-width: 75rem; /* 最大宽度75rem */
  margin: 0 auto; /* 水平居中 */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列布局 */
  gap: 2rem; /* 图片/标题间距 */
  margin-top: 1.5rem; /* 与dqwz保持间距 */
}
/* 案例项样式 */
.case-item {
  text-align: center; /* 标题居中 */
}
.case-item img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto;
  border-radius: 0.5rem; /* 可选：图片圆角 */
  transition: transform 0.3s; /* 悬浮缩放效果 */
}
.case-item img:hover {
  transform: scale(1.02); /* 悬浮轻微放大 */
}
.case-item .case-title {
  font-size: 1.25rem;
  color: #333;
  margin-top: 1rem;
  text-decoration: none; /* 移除超链接默认下划线 */
  display: inline-block;
}
.case-item .case-title:hover {
  color: #953e01; /* 标题悬浮颜色（与Banner主色统一） */
}
/* 响应式：小屏改为1列布局 */
@media (max-width: 48rem) {
  .listbox {
    grid-template-columns: 1fr;
  }
}

/* ===================== 新增：dqwz 样式 ===================== */
.dqwz {
  font-size: 1rem; /* 字体大小1rem */
  color: #333333; /* 颜色#333333 */
  max-width: 75rem; /* 与listbox同宽 */
  margin: 0 auto; /* 水平居中 */
  margin-bottom: 0.5rem; /* 与listbox保持间距 */
}
.dqwz a {
  color: #333333; /* 链接颜色与文字一致 */
  text-decoration: none; /* 可选：移除链接下划线，可根据需求调整 */
}
.dqwz a:hover {
  color: #953e01; /* 链接悬浮颜色与Banner主色统一 */
  text-decoration: underline; /* 可选：悬浮显示下划线 */
}

/* 自适应隐藏dqwz：可根据需求调整临界值（此处以48rem/768px为例） */
@media (max-width: 48rem) {
  .dqwz {
    display: none; /* 小屏时隐藏 */
  }
}