@charset "utf-8";

/* ==========================================================================
   国家管网集团贯彻落实党的二十届五中全会精神 · 专题页
   切图：大背景.jpg（1920×4690，含主视觉与各分区底纹）、栏目头、卡片底板
   布局：整页背景 + 文档流，正文区 1256px 居中，仅卡片内部做少量定位
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-width: 1256px;
  background: #fff url(../images/bg-page.jpg) no-repeat center top;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", Arial, sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color .3s;
  transition: color .3s;
}

ul,
li,
h1,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  border: 0;
}

.hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 1256px;
  margin: 0 auto;
}

/* ============================ 主视觉 ============================ */
.bannern {
  height: 962px;
}

.banner-inner {
  width: 1920px;
  margin: 0 auto;
  padding-top: 23px;
}

.bannern .logo {
  display: block;
  width: 179px;
  height: 51px;
  margin-left: 25px;
}

.bannern .logo img {
  width: 179px;
  height: 51px;
}

/* ============================ 公报卡片 ============================ */
.sec-gb {
  margin-top: -49px;
}

.gb-card {
  width: 1283px;
  height: 636px;
  margin-left: -25px;
  /* 左 27 / 右 24 / 上 44 对应卡面切图里图片区与右侧内嵌面板的边界 */
  padding: 44px 24px 0 27px;
  box-sizing: border-box;
  background: url(../images/card-gb.jpg) no-repeat center top;
  background-size: 100% 100%;
}

.gb-title {
  height: 31px;
  margin: 0 -24px 0 -27px;
  padding-left: 25px;
  overflow: hidden;
  font-size: 30px;
  line-height: 31px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #d40000;
  text-align: center;
  white-space: nowrap;
}

.gb-title a:hover {
  color: #a80000;
}

.gb-body {
  display: -webkit-box;
  display: flex;
  margin-top: 29px;
}

.gb-photo {
  width: 748px;
}

.gb-photo img {
  width: 748px;
  height: 432px;
  -o-object-fit: cover;
  object-fit: cover;
}

.gb-caption {
  height: 53px;
  margin-top: 0;
  padding: 0 24px;
  box-sizing: border-box;
  /* 红条已含在卡面切图里，这里只放文字 */
  font-size: 19px;
  line-height: 53px;
  letter-spacing: 1px;
  font-weight: 600;
  color: #fff4d8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gb-caption a:hover {
  color: #ffe9b0;
}

/* 列表：左侧与图片右边缘齐平，虚线通栏到右侧内边 */
.gb-list {
  width: 484px;
  margin-left: 0;
  margin-top: 16px;
}

.gb-list li {
  padding: 0 32px 15px;
  margin-bottom: 22px;
  border-bottom: 1px dashed #ffffff;
}

.gb-list li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.gb-list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 19px;
  line-height: 30px;
  color: #bc1414;
}

.gb-list a:hover {
  color: #8c0000;
}

/* ============================ 栏目头 ============================ */
.hd {
  position: relative;
}

.hd img {
  width: 1256px;
  height: 91px;
}

/* “更多+”已含在栏目头切图里，这里只留一个透明热区 */
.hd .more {
  position: absolute;
  right: 22px;
  top: 52px;
  width: 56px;
  height: 28px;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* ============================ 一图速览 ============================ */
.sec-yitu {
  margin-top: 133px;
}

.sec-yitu .hd img {
  height: 92px;
}

.yt-list {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  margin-top: 42px;
  padding: 0 28px;
}

.yt-card {
  display: block;
  width: 398px;
}

.yt-card img {
  width: 398px;
  height: 222px;
}

.yt-card p {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 69px;
  margin-top: -1px;
  /* padding: 0 15px; */
  background: no-repeat center top;
  background-size: 100% 100%;
  font-size: 18px;
  line-height: 19px;
  color: #6a5a4a;
  text-align: center;
}

.yt-card:nth-child(1) p {
  background-image: url(../images/yt-bar-1.png);
}

.yt-card:nth-child(2) p {
  background-image: url(../images/yt-bar-2.png);
}

.yt-card:nth-child(3) p {
  background-image: url(../images/yt-bar-3.png);
}

.yt-card:hover p {
  color: #bc1414;
}

/* ============================ 权威解读 ============================ */
.sec-quanwei {
  margin-top: 176px;
}

.qw-list {
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 62px;
  padding-left: 25px;
}

.qw-item {
  width: 582px;
  height: 256px;
  margin-bottom: 45px;
  padding: 38px 0 0 26px;
  box-sizing: border-box;
  background: url(../images/bg-qwitem.png) no-repeat left top;
}

.qw-item:nth-child(2n) {
  margin-left: 36px;
}

.qw-item:nth-child(3),
.qw-item:nth-child(4) {
  margin-bottom: 0;
}

.qw-item h4 {
  width: 529px;
  height: 48px;
  /* overflow: hidden; */
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #1f1f1f;
  display: flex;
  align-items: center;
}
.qw-item h4 a{
  line-height: 29px;
}
.qw-item h4 a:hover {
  color: #bc1414;
}

.qw-item p {
  width: 527px;
  height: 113px;
  overflow: hidden;
  margin-top: 22px;
  padding-left: 2px;
  font-size: 16px;
  line-height: 22.6px;
  color: #6c6b6b;
  text-align: justify;
}

/* ============================ 管网行动 ============================ */
.sec-xingdong {
  margin-top: 182px;
}

.xd-main {
  position: relative;
  width: 1221px;
  height: 555px;
  margin-top: 53px;
  margin-left: 19px;
  padding: 62px 0 0 36px;
  box-sizing: border-box;
  background: url(../images/bg-xingdong.png) no-repeat left top;
}

.xd-left {
  width: 509px;
}

/* 左侧文字也做成 swiper（淡入淡出），与右侧图片轮播联动 */
.msak-txt {
  width: 509px;
  height: 348px;
}

.msak-txt .swiper-slide {
  width: 509px;
  height: 348px;
}

.msak-txt h4 {
  height: 52px;
  overflow: hidden;
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: #cb0d0d;
  text-align: center;
}

.msak-txt p {
  height: 271px;
  overflow: hidden;
  margin-top: 25px;
  font-size: 17px;
  line-height: 27px;
  color: #403c35;
  text-align: justify;
  text-indent: 2em;
}

.msak-txt p a {
  color: #cb0d0d;
}

.xd-pager {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  margin-top: 19px;
  padding-right: 2px;
}

.xd-pager a {
  display: block;
  width: 47px;
  height: 24px;
  margin-left: 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 47px 24px;
  opacity: .95;
}

.xd-pager a.xd-prev {
  background-image: url(../images/xd-prev.png);
}

.xd-pager a.xd-next {
  background-image: url(../images/xd-next.png);
}

.xd-pager a:hover {
  opacity: .6;
}

/* 右侧轮播：Swiper（.swa > .swiper-container.msak > .swiper-wrapper > .swiper-slide） */
.swa {
  position: absolute;
  left: 603px;
  top: 30px;
  width: 585px;
  height: 425px;
  box-shadow: 0 8px 20px rgba(120, 60, 20, .18);
  border-radius: 4px;
}

.msak {
  width: 585px;
  height: 425px;
  border-radius: 4px;
  overflow: hidden;
}

.msak .swiper-slide {
  width: 585px;
  height: 425px;
  background: #fff;
}

.xd-item {
  position: relative;
  display: block;
  width: 585px;
  height: 385px;
}

.xd-item img {
  width: 585px;
  height: 385px;
}

/* 图片上的柔和红色遮罩，保证白色标题可读 */
.xd-item::after {
  content: ";
position: absolute;
  left: 0;
  top: 0;
  width: 585px;
  height: 385px;
  background: -webkit-linear-gradient(top, rgba(130, 10, 6, .08), rgba(130, 10, 6, .32));
  background: linear-gradient(180deg, rgba(130, 10, 6, .08) 0%, rgba(130, 10, 6, .32) 100%);
  pointer-events: none;
}

.xd-title {
  position: absolute;
  left: 0;
  top: 143px;
  width: 585px;
  font-size: 24px;
  line-height: 40px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(90, 0, 0, .45);
}

.msak .xd-cap {
  display: block;
  width: 585px;
  height: 48px;

  padding: 0 18px;
  box-sizing: border-box;
  background: url(../images/xd-bar.png) no-repeat center top;
  background-size: 585px 48px;
  font-size: 18px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 箭头沿用设计稿的小胶囊图标，覆盖 Swiper 默认按钮样式 */
.xd-pager .swiper-button-prev,
.xd-pager .swiper-button-next {
  position: static;
  width: 47px;
  height: 24px;
  margin: 0 0 0 20px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 47px 24px;
  opacity: .95;
}

.xd-pager .swiper-button-prev {
  background-image: url(../images/xd-prev.png);
}

.xd-pager .swiper-button-next {
  background-image: url(../images/xd-next.png);
}

.xd-pager .swiper-button-prev::after,
.xd-pager .swiper-button-next::after {
  content: none;
}

.xd-pager .swiper-button-prev:hover,
.xd-pager .swiper-button-next:hover {
  opacity: .6;
}

/* ============================ 贯彻落实 ============================ */
.sec-guanche {
  margin-top: 63px;
  padding-bottom: 118px;
}

.gc-panel {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
  align-items: flex-start;
  width: 1202px;
  height: 523px;
  margin-top: 22px;
  margin-left: 28px;
  padding: 47px 0 0 24px;
  box-sizing: border-box;
  background: url(../images/bg-guanche-panel.png) no-repeat left top;
}

.gc-panel .gc-col:first-child li:nth-child(even) {
  display: none;
}

.gc-panel .gc-col:last-child li:nth-child(odd) {
  display: none;
}

.gc-col {
  width: 542px;
}

.gc-col+.gc-col {
  margin-left: 71px;
}

.gc-col li {
  position: relative;
  height: 45px;
  padding-left: 19px;
  box-sizing: border-box;
  font-size: 20px;
  line-height: 22px;
  color: #444;
}

.gc-col li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  border-top: 1px dashed rgba(216, 140, 140, .85);
}

.gc-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9302c;
}

.gc-col a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gc-col a:hover {
  color: #bc1414;
}

/* ============================ 页脚 ============================ */
.footer {
  width: 100%;
  height: 175px;
  padding: 1px 0;
  background: #4d4d4d;
  /* margin-top: 8px; */
  /* font-family: 'SimSun'; */
}

.foot {
  width: 1120px;
  margin: 40px auto;
  overflow: hidden;
}

.foot .left {
  width: 275px;
  height: 97px;
  float: left;
  /* padding-top: 25px; */
  display: flex;
  align-items: center;
}

.foot .left div {
  margin-top: 20px;
}

.foot .right {
  /* width: 705px; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  float: left;
  text-align: center;
  /* margin-top: 25px; */
}

.foot .right .p1 {
  font-size: 14px;
  color: #cccccc;
  margin-left: 91px;
  margin-top: 24px;
}

.foot .right .p2 {

  margin-top: 14px;
}

.foot .right p {
  font-size: 14px;
  color: #cccccc;
  margin-left: 91px;
}

.foot .right .p1 span:nth-child(2) {
  margin-left: 15px;
}

.foot .right .p1 span:nth-child(3) {
  margin: 0 15px;
}

.foot .right .p1 span:nth-child(5) {
  margin-left: 15px;
}