@charset "utf-8";

/* ===================== 页面基础 ===================== */
body{background-color: #e6ffff;}
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: 18%; width: 16.9%; line-height: 0;}
.ztzl-header .logo img {width: 30%;}
.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{position: absolute; display: block; max-height: 470px; margin: 0 auto; left: 2%;}


/* =====================  重大活动 ===================== */
.zdhd-area {
  position: relative;        /* ★ 改：absolute → relative，排在前言块下方 */
  margin: 40px auto 0;      /* ★ 修复：auto 0 → 40px auto 0（margin 简写先上下后左右，原写法左右是 0，不居中） */
  z-index: 10;
  width: calc(100%);  /* ★ 改：窄屏两侧各留 20px（原来是 100% 贴满屏幕） */
  max-width: 1400px;         /* ★ 新增：与 .container 的 1400px 对齐 */
  box-sizing: border-box;    /* ★ 新增：让左右各 20px 内边距算进宽度，避免再溢出 40px */
  height: auto;              /* ★ 改 367px → auto：两列内容总高远超 367px，固定会溢出 */
  display: flex;             /* ★ 新增：一行两列的基础（原来没开 flex，comm 上的 flex:0 0 全是死代码） */
  flex-wrap: wrap;           /* ★ 新增：标题一行、左右两列一行 */
  justify-content: space-between;  /* ★ 两端对齐：左列贴左、右列贴右 */
  gap: 20px;                 /* ★ 新增：行间距 / 列间距都是 20px */
}
.zdhd-area .zdhd-area-tit {
  flex: 0 0 100%;            /* ★ 新增：标题独占第一行，否则会被当成第 3 个 item 挤进两列里 */
  height: 67px;
  margin: 0 auto; 
  text-align: center;
}

.zdhd-area .zdhd-area-comm {
  flex: 0 0 calc((100% - 20px) / 2);  /* ★ 两列各占一半（间距由容器 gap:20px 提供，故只减 1 个 20px） */
  height: auto;              /* ★ 改 382px → auto：右侧 3 个 li 总高 396px，固定会溢出 */
  min-height: 382px;         /* 兜底，保证不至于太矮 */
  margin-top: 0;             /* ★ 改 100px → 0：标题已在 flex 第一行，行间距由 gap 提供 */
  box-sizing: border-box;             /* 若后续加 border/padding，宽度不会被撑破 */
}

.zdhd-area .zdhd-area-comm .news-slide {
  width: 670px;        /* ★ 改 680px → 100%：列宽实际是 670px，固定 680px 会溢出 10px */
  height: 382px;
}
.module-box {
  display:block;
}
.imgScale a img{
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition-duration: 4s;
  transition-duration: 4s;
  -webkit-transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.imgScale a:hover img{
  -moz-transform:scale3d(1.1, 1.1, 1);
  -ms-transform:scale3d(1.1, 1.1, 1);
  -o-transform:scale3d(1.1, 1.1, 1);
  -webkit-transform:scale3d(1.1, 1.1, 1);
  transform:scale3d(1.1, 1.1, 1);
}

/*owl-carousel*/
.owl-carousel{touch-action:none;}
.owl-carousel .owl-stage{position:relative;}
.owl-carousel .owl-stage-outer{position:relative; overflow:hidden;}  /* 关键：裁剪，为 stage 移动留出空间 */
.owl-carousel .owl-item{position:relative; min-height:1px; float:left;}  /* 关键：item 横向排列 */
.owl-carousel .item{display:block; width:100%; overflow:hidden;}

/* 图片新闻滚动 */
.tpxw{position:relative;}
.tpxw .owl-carousel img{height:378px;}
.tpxw .owl-carousel .item-name{position:absolute; right:0; bottom:0; left:0; z-index:9; padding:0 90px 0 10px; height:52px; line-height:52px; color:#fff; background-color:rgba(0,0,0,.3);}
.tpxw .owl-carousel .owl-nav>div{position:absolute; top:50%; margin-top:-45px; width:30px; height:55px; background-image:url(../images/slider_btn.png); background-repeat:no-repeat; background-color:rgba(0,0,0,.3); opacity:0;}
.tpxw .owl-carousel .owl-nav>div:hover{background-color:rgba(0,0,0,.5);}
.tpxw .owl-carousel .owl-nav .owl-prev{left:0;}
.tpxw .owl-carousel .owl-nav .owl-next{right:0; background-position:-30px 0;}
.tpxw .owl-carousel:hover .owl-nav>div{opacity:1;}

.tpxw .owl-dots{position:absolute; bottom:20px; right:5px; z-index:99;}
.tpxw .owl-dot{float:left; width:12px; height:12px; margin-right:8px; background-color:#d0d0d0; border-radius:50%;}
.tpxw .owl-dot.active{background-color:#c10d0c;}

.news-slide .tpxw .item-name{padding-right:10px; text-align:center;}
.news-slide .tpxw .owl-dots{display:block;}



.zdhd-area .zdhd-area-comm  li {
  width: 100%;        /* ★ 新增：每个 li 占满整行 → 3 个 li 自然排成三行一列 */
  float: none;        /* ★ 改 left → none：float 会让 li 横向并排，正是"三行一列"失效的原因 */
  height: auto;
  min-height: 112px;
  margin-bottom: 20px;  /* 行间距 */
  position: relative;   /* 作为 span 绝对定位的参照基准 */
  background: url(../images/zdhd-tit-bg.png) center center no-repeat;
}
.zdhd-area .zdhd-area-comm li:last-child {
  margin-bottom: 0;   /* ★ 最后一行不加间距，否则容器底部多出 20px 空隙 */
}


.zdhd-area .zdhd-area-comm  li .item-left {
  width: 17%;
  height: 100%;
  display: inline-block;
  margin-right: 3%;
  vertical-align: top;
  text-align: center;
}

.zdhd-area .zdhd-area-comm li .item-left .day {
  font-size: 50px;
  font-weight: bold;
  font-family: 'Arial';
  color: #316ABC;
  line-height: 79px;
}

.zdhd-area .zdhd-area-comm  li  .item-left .year-month {
  font-size: 14px;
  color: #bababa;
}

.zdhd-area .zdhd-area-comm  li  .item-right {
  display: inline-block;
  width: 78%;
  padding-top: 15px;
  vertical-align: top;
}

.zdhd-area .zdhd-area-comm  li  .item-right h5 {
  line-height: 30px;
  font-size: 20px;
  font-weight: 400;
  color: black;
}

.zdhd-area .zdhd-area-comm  li  .item-right p {
  line-height: 28px;
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  text-indent: 2em;
}

/***========================= 改革项目==========================***/
.ggxm-area {
  position: relative; z-index: 2; margin-top: 40px;
  height: auto;
  display: flex;                  /* 关键：开启 flex，子项上的 flex 属性才生效 */
  flex-wrap: wrap;                /* 窄屏时允许换行堆叠 */
  justify-content: space-between; /* 左右两列分别贴两边，两边对齐 */
  background-color: #fff;
}
.ggxm-area .ggxm-area-tit{
  flex: 0 0 100%;                 /* ★ 新增：标题独占第一行（标题宽度 = 容器宽，tabs 自然被挤到下一行） */
  height: 78px;
  text-align: center;             /* ★ 去掉 absolute：absolute 不占位，后面的 tabs 会压上来而不是排在下方 */
  background-color: #e6ffff;
}
.ggxm-area .ggxm-area-tabs {
  height: 54px;
  margin: 20px auto 0;            /* ★ 上间距 20px + 左右 auto 水平居中（原来写反成 auto 0，左右是 0 所以不居中） */
  display: flex;                  /* ★ 新增：让两个 li 横向排列 */
  align-items: center;            /* 垂直居中 */
  justify-content: center;        /* 按钮在容器内居中 */
  gap: 20px;                      /* ★ 新增：两个按钮之间的间距 */
  width: auto;                    /* ★ 改 38% → auto：宽度由按钮内容决定，配合 margin:auto 才能真正居中 */
}
.ggxm-area .ggxm-area-tabs li {
  height: 54px;
  width: auto;                    /* 按按钮图片原始宽度，不要用百分比撑满 */
  flex-shrink: 0;                 /* ★ 不被压缩，保持按钮原始宽度 */
  line-height: 0;                 /* ★ 消除图片底部基线空隙 */
  cursor: pointer;                /* ★ 新增：鼠标悬停显示手型，提示可点击 */
  opacity: .65;                   /* ★ 新增：未选中按钮半透明 */
  transition: opacity .3s;        /* ★ 新增：切换时平滑过渡 */
}
.ggxm-area .ggxm-area-tabs li.on {
  opacity: 1;                     /* ★ 新增：选中态完全不透明 */
}

.ggxm-area .ggxm-area-detail {
  flex: 0 0 100%;                 /* ★ 独占第三行 → 自动排在 tabs 下方 */
  height: auto;                   /* ★ 改固定 329px：内容多少不确定，固定会溢出 */
  min-height: 329px;              /* 保留设计稿高度作为下限 */
  margin-top: 40px;               /* 与上方 tabs 的间距（按需要调整） */
  box-sizing: border-box;         /* ★ 关键：让 padding 算进 100% 宽度，否则总宽变成 100%+20px 溢出 */
  padding-right: 60px;
  display: none;                  /* ★ 改 flex → none：默认隐藏，是否显示交给下面的 .on */
  align-items: flex-start;        /* 顶部对齐（想垂直居中改成 center） */
  justify-content: space-between; /* ★ 两边对齐：p 贴左、img 贴右 */
  gap: 40px;                      /* ★ 中间 40px（用 gap 比 margin 干净，不会出现负边距） */
}
.ggxm-area .ggxm-area-detail.on {
  display: flex;                  /* ★ 新增：只有带 .on 的面板才显示，并恢复左右布局 */
}

.ggxm-area .ggxm-area-detail .p-content {
  flex: 0 0 calc(55% - 20px);     /* ★ 55% 减去一半间距（40÷2），否则 60%+40%+40px 会超出容器换行 */
  min-width: 0;                   /* 防御：长文本不会把 flex-basis 顶掉 */
  line-height: 36px;
  font-size: 18px;
  color: #383838;
  padding:20px;
}
.ggxm-area .ggxm-area-detail .p-content p {                /* 防御：长文本不会把 flex-basis 顶掉 */
  line-height: 36px;
  height: auto;
  font-size: 18px;
  color: #383838;
  text-indent: 2em;
}

.ggxm-area .ggxm-area-detail img {
  flex: 0 0 calc(45% - 20px);     /* ★ 40% 同样减去一半间距 */
  min-width: 0;                   /* ★ 关键：img 是替换元素，min-width:auto 会解析成图片原图宽度并顶掉 flex-basis，导致换行 */
  max-width: calc(45% - 20px);    /* 兜底：任何情况下不允许超过 40% */
  height: auto;                   /* 按原比例缩放，不变形 */
  display: block;                 /* 消除行内图片底部约 4px 的基线空隙 */
  object-fit: cover;              /* 若之后给 img 设了固定高度，按此方式裁切填充 */
}

/***========================= 经验与城固 ==========================***/
.jyycg-area {
  position: relative; z-index: 2; margin-top: 40px;
  height: 600px;
  display: flex;                  /* 关键：开启 flex，子项上的 flex 属性才生效 */
  flex-wrap: wrap;                /* 窄屏时允许换行堆叠 */
  justify-content: space-between; /* 左右两列分别贴两边，两边对齐 */
}
.jyycg-area .jyycg-area-tit {
  flex: 0 0 100%;            /* ★ 新增：标题独占第一行，否则会被当成第 3 个 item 挤进两列里 */
  height: 78px;
  margin: 0 auto; 
  text-align: center;    
}
.jyycg-area .jyycg-img-area {
  flex: 0 0 100%;            /* ★ 关键：它自己是 .jyycg-area 的 flex item，必须占满整行，下面 li 的百分比才有正确参照 */
  height:248px;
  display: flex;             /* 开启 flex，3 个 li 才能横向排列 */
  flex-wrap: wrap;
  justify-content: space-between;  /* ★ 两端对齐：最左贴左、最右贴右 */
  gap: 20px;                 /* 行间距 / 列间距都是 20px */
}
.jyycg-area .jyycg-img-area li {
  flex: 0 0 calc((100% - 40px) / 3);  /* 3 列：容器宽减去 2 个 20px 间距后三等分 */
  height: 248px;
  box-sizing: border-box;    /* 若后续加 padding，不会撑破列宽 */
  overflow: hidden;          /* ★ 图片超出列宽时裁切，兜底防止撑破三列 */
}
.jyycg-area .jyycg-img-area li img {
  width: 100%;               /* ★ 关键：图片按列宽自适应（否则按原图尺寸显示，会撑破列宽、把三列挤成换行） */
  height: 100%;              /* 填满 li 的 248px */
  object-fit: cover;         /* 按原比例裁切填充，不被拉变形 */
  display: block;            /* 消除行内图片底部约 4px 的基线空隙 */
}
.jyycg-area .jyycg-content-area {
  flex: 0 0 100%;            /* ★ 补：文字区同样占满整行，否则它宽度按内容收缩，不会与上方图片区对齐 */
  height: 238px;
  background-color: #fff;
  padding: 40px;
  box-sizing: border-box;    /* 40px 内边距算进 100% 宽度，避免溢出 */
}
.jyycg-area .jyycg-content-area p {
  font-size: 18px;
  line-height: 36px;
  color: #383838;
  text-indent: 2em;
}
.jyycg-area .jyycg-content-area a {
  color: #005FCC;
}
.jyycg-area .jyycg-content-area a:hover {
  color: #005FCC;
}
.jyycg-area .jyycg-content-area span {
  position: relative; z-index: 2; 
  right: 0;
  bottom: 0;
  float: right;
}
/* ===================== 响应式 ===================== */
.container.width-1920 {
  width: 1920px;
  z-index: 999;
}

@media (max-width:1480px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .container,
  .container[class*="width-"] {
    width: 1170px;
  }

  /* ===== 1480 下改为"上下两行"：上一行轮播占满，下一行卡片三列 ===== */
  .zdhd-area .zdhd-area-comm {
    flex: 0 0 100%;                    /* ★ 覆盖桌面 50%：两个 comm 各占满一行 → 自动上下堆叠 */
    display: flex;                     /* ★ 内部也开 flex，子元素才能横向排列 */
    flex-wrap: wrap;
    justify-content: space-between;    /* ★ 新增：两端对齐，保证最后一个 li 贴住右边缘（避免百分比小数误差留缝） */
    gap: 20px;                         /* 行 / 列间距 */
    min-height: auto;                  /* 桌面 min-height:382px 在这行不适用，改由内容撑开 */
  }
  .zdhd-area .zdhd-area-comm .news-slide {
    flex: 0 0 100%;                    /* ★ 轮播独占整行（一行一列） */
    height: 382px;
  }
  .zdhd-area .zdhd-area-comm li {
    flex: 0 0 calc((100% - 40px)); /* ★ 补回 ÷3：减去 2 个 20px 间距后三等分 */
    width: auto;                       /* ★ 覆盖桌面 width:100%，否则每个 li 撑满整行 */
    float: none;
    margin-bottom: 0;                  /* 行间距交给 gap，避免重复计算 */
    height: auto;                      /* 列变窄后文字行数增加，固定 112px 会溢出 */
    min-height: 200px;
  }
  .zdhd-area .zdhd-area-comm li:last-child {
    margin-bottom: 0;
  }
  .ztzl-header .logo{position: absolute; top: 2.2%; left: 10%; width: 80%; line-height: 0;}
  .ztzl-header .logo img {width: 80%;}
  
  .zdhd-area {
    margin-top: 40px;          /* 与桌面一致：紧跟前言块下方 40px */
    min-height: 1200px;
  }
  .jyycg-area .jyycg-img-area {
    min-height: 1100px;
  }
  .jyycg-area .jyycg-img-area li {
    flex: 0 0 calc((100%));  /* 3 列：容器宽减去 2 个 20px 间距后三等分 */
    height: auto;
    box-sizing: border-box;    /* 若后续加 padding，不会撑破列宽 */
    overflow: hidden;          /* ★ 图片超出列宽时裁切，兜底防止撑破三列 */
  }
  
}

@media (max-width:1400px) {

  .container,
  .container[class*="width-"] {
    width: 970px;
  }
  
}

@media (max-width:992px) {

  .container,
  .container[class*="width-"] {
    width: 750px;
  }
  .zdhd-area {
    margin-top: 40px;          /* 与桌面一致：紧跟前言块下方 40px */
    min-height: 800px;
  }

  
}

@media (max-width:768px) {

  .container,
  .container[class*="width-"] {
    width: auto;
  }
  .ztzl-header .logo{position: absolute; top: 2.2%; left: 10%; width: 80%; line-height: 0;}
  .ztzl-header .logo img {width: 80%;}

  .zdhd-area {
    margin-top: 40px;          /* 与桌面一致：紧跟前言块下方 40px */
    min-height: 1200px;
  }

}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container {
  max-width: 1920px;
}