@charset "utf-8";

/* ===================== 页面基础 ===================== */
body{background-color: #fff;}
a{transition: color .3s; -webkit-transition: color .3s;}

/* ===================== 头部横幅 ===================== */
.ztzl-header {position: relative; z-index: 0; line-height: 0;}
.ztzl-header .header-bg{display: block; width: 100%; pointer-events: none;}
.ztzl-header .logo{position: absolute; top: 2.2%; left: 13%; width: 16.9%; line-height: 0;}
.ztzl-header .title{position: absolute; top: 100px; left: 0; right: 0; margin: 0 auto; max-width: 68.21%; line-height: 0;}
.ztzl-header .title img{display: block; max-height: 291px; margin: 0 auto;}


/* 专题主体块  onearea*/
.ztzl-main-middle-onearea {
  position: relative; z-index: 2; margin-top: -60px;
  display: flex; /* 关键：让 li 用 flex:1 自动等分三列 */
  gap: 20px;  
}

.ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea {
  /* 桌面端：3 列 (100% - 2×20) ÷ 3 */
  flex: 1 1 calc((100% - 40px) / 3);
  min-width:30%;              /* 容器宽度不足时，单个 li 被挤到下一行 */
  height: 522px;
  float: left;
  padding-top: 30px;
  border: 1px solid #FFD8C2;     /* 边框颜色 */
  border-radius: 12px;           /* 圆角大小，按设计稿调整 */
  box-sizing: border-box;        /* 关键：让 1px 边框算在 width 内，否则三列总宽超 100% 会挤掉一行 */
}


/* 平板端（≤1199px）：3 列 → 2 列 */
@media (max-width: 1199px) {
  .ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea {
    flex-basis: calc((100% - 20px) / 2);
    float: left;
    min-width: 0;                /* 解除最小宽度限制，让 2 列布局生效 */
  }
}

@media (max-width:992px){
  .ztzl-main-middle-onearea{margin-top: -60px;}
  }
/* 手机端（≤767px）：2 列 → 1 列 */  
@media (max-width:768px){
  .ztzl-main-middle-onearea{margin-top: -40px;}
  .ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea {
    flex-basis: 100%;
    float: left;
  }
  }
  @media (max-width:540px){
  .ztzl-main-middle-onearea{margin-top: -20px;}
  }

.ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea .title-area {
  width:260px;
  height: 60px;
  margin: auto;
  color: #ED4545;
  font-size: 36px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 10px solid #FFF0AD;     /* 边框颜色 */
}

.ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea li {
  width: 80%;
  height: 40px;
  margin: 0 auto 20px;                  /* 左右 auto，让 86% 的 li 在父容器中水平居中 */
  font-size: 18px;
  line-height: 24px;
  padding-left: 30px;
  padding-right: 10px;
  padding-top: 20px;
  float: none;                          /* 取消左浮动，避免贴左 */
  color: #383838;
  background: url(../images/tit_icon.png) no-repeat left center;
}

.ztzl-main-middle-onearea .ztzl-main-middle-onearea-commarea .gengduo-area {
  height:20px;
  width: auto;
  float:right;
  margin-right: 20px;
}
/* 专题主体块  twoarea*/
.ztzl-main-middle-twoarea {
  width: 100%;
  height: 170px;
  display: flex;               /* 关键：让子元素按 flex 排列，才能一行二列 */
  gap: 20px;                   /* 两个 li 之间的间距 */
}
.ztzl-main-middle-twoarea li {
  flex: 1 1 calc((100% - 20px) / 2);   /* 等分两列，扣掉 gap */
  min-width: 0;                /* 解除最小宽度限制，让 2 列布局生效 */
  height: 100%;                /* 高度继承父容器 */
}

/* 专题主体块  threearea*/
.ztzl-main-middle-threearea {
  width: 100%;
  height: 576px;
  padding-top: 30px;
  background-color: #fff;
  background: url(../images/threearea-bg.png) no-repeat center center;
}
.ztzl-main-middle-threearea .title-area {
  width:410px;
  height: 60px;
  margin: auto;
  color: #ED4545;
  font-size: 36px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  border-bottom: 10px solid #FFF0AD;     /* 边框颜色 */
  margin-bottom: 60px;
}


.ztzl-main-middle-threearea .tupxw {
  width:580px;
  height: 326px;
  float: left;
  margin-left: 60px;
  background: url(../images/tup-bg.png) no-repeat center center;
}
.ztzl-main-middle-threearea .tupxw img {
  width:580px;
  height: 326px;
  margin-left: -20px;
  margin-top: -30px;
}
.ztzl-main-middle-threearea .txtarea {
  width:638px;
  height: 326px;
  float: right;
  margin-right: 60px;
}

.ztzl-main-middle-threearea .txtarea .txtarea-title {
  width:98%;
  height: 80px;
  font-size: 26px;
  font-weight: bold;
  line-height: 30px;
  color:#383838;

}
.ztzl-main-middle-threearea .txtarea p {
  width:98%;
  height: 200px;
  font-size: 18px;
  color: #808080;
  line-height: 40px;

}
.ztzl-main-middle-threearea .txtarea img {
  float: left;
  width: 64px;
  height: 40px;
}

/* 专题主体块  fourarea*/
.ztzl-main-middle-fourarea {
  width: 100%;
  height: 810px;
  padding-top: 30px;
  background-color: #fff;
  background: url(../images/ditu-bg.png) no-repeat center center;
}
.ztzl-main-middle-fourarea .title-area {
  width:410px;
  height: 60px;
  margin: auto;
  color: #ED4545;
  font-size: 36px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  border-bottom: 10px solid #FFF0AD;     /* 边框颜色 */
  margin-bottom: 60px;
}

 /* 1. 外层容器：限制高度，开启滚动 */
 .ztzl-main-middle-fourarea .table-container {
  height: 640px; /* 设置你想要的高度 */
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto; /* 关键：内容超出高度时显示垂直滚动条 */
  border: 0px solid #ccc;
}

.ztzl-main-middle-fourarea table {
  width: 96%;
  border-collapse: collapse;
}

.ztzl-main-middle-fourarea th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

/* 2. 表头固定：使用 sticky 定位 */
.ztzl-main-middle-fourarea thead th {
  position: sticky;
  top: 0; /* 距离顶部 0px */
  background-color: #f2f2f2; /* 必须设置背景色，否则滚动时文字会重叠 */
  z-index: 1; /* 确保表头在内容之上 */
}


/* ===================== 响应式 ===================== */
@media (max-width:1280px){

}