/* ============================================================
   都安纪检监察网 · 公共样式 common.css（v2 CMS 流式版）
   由设计稿（1788 固定画布 + 绝对定位）改造：
   - 头部/页脚内部固定像素定位保留（内容固定）
   - 列表/正文等动态区域改为流式，高度自适应
   四页共用：reset / 页面画布 / 头部(搜索+导航) / 内容白卡 /
   面包屑 / 页脚
   ============================================================ */

/* ---------- 基础重置 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", Arial, sans-serif;
  color: #333;
}
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p, figure, figcaption { margin: 0; }
i { font-style: normal; }
a { text-decoration: none; }
img { vertical-align: top; border: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0 0); white-space: nowrap; border: 0;
}
a:focus-visible { outline: 2px solid #1e84e9; outline-offset: 2px; }

/* ---------- 页面画布（宽度锁定 1788，高度自适应） ---------- */
#page {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* ---------- 头部（背景图含标题字、委员会名称、党徽国徽） ---------- */
.site-header {
  width: 100%; height: 375px;
  background: url("../assets/header-nav.png") no-repeat;
  background-size: cover;
  background-position: center center;
}

/* 站内搜索 */
.search {
  position: absolute;right: 0; top: 287px;
  width: 520px; height: 57px; display: flex;
}
.search input {
  flex: 1 1 auto; height: 57px; min-width: 0;
  border: 0; outline: 0; background: #fff;
  border-radius: 10px 0 0 10px;
  padding: 0 12px 4px 18px;
  font-family: inherit; font-size: 16.6px; color: #333;
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: #757575; }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search button {
  flex: 0 0 118px; width: 118px; height: 57px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 0; border-radius: 0 10px 10px 0;
  background: #c61f1f; color: #fff;
  font-family: inherit; font-size: 22.5px; cursor: pointer;
}
.search button svg { width: 24px; height: 24px; display: block; }

/* 主导航（CMS 化：11 项 flex 均布，替换设计稿逐项 left 定位） */
.main-nav { width: 1200px; height: 65px; margin: auto; text-align:center; }
.main-nav ul { display: table; justify-content: space-between; }
.main-nav li { white-space: nowrap; display: table-cell; width:110px; padding:0 10px; text-align:left;}
.main-nav li a {
  display: block; white-space: nowrap;
  color: #fff; font-size: 21px; line-height:65px;
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}
.main-nav li a:hover { text-decoration: underline; }

/* ---------- 主体过渡区（头部下方蓝→灰渐变，高度自适应） ---------- */
.page-body {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg,
    #2780e1 0, #2780e1 2px,
    #3488e2 38px,
    #4c95e4 78px,
    #74ace8 130px,
    #a7c7ed 198px,
    #ccdcef 262px,
    #e2eaf5 326px,
    #edf1f6 374px,
    #f3f4f5 440px,
    #f2f2f2 501px,
    #f2f2f2 100%);
}

/* ---------- 内容白卡（子页，高度由内容撑开） ---------- */
.card {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 60px;
  background: #fff;
}

/* ---------- 面包屑 ---------- */
.crumb { position: relative; height: 20px; font-size: 16px; line-height: 20px; }
.crumb .pin { position: absolute; left: 0; top: 0; }
.crumb .pin img { display: block; width: 17px; height: 20px; }
.crumb .txt { position: relative; padding-left: 33px; white-space: nowrap; color: #2c85e1; }
.crumb .txt a { color: #2c85e1; }
.crumb .txt a:hover { text-decoration: underline; }

/* ---------- 页脚（正常流式，内部固定像素定位保留） ---------- */
.site-footer { width: 100%; }
.footer-red {  width: 100%; background: #ba1c1c; }
.footer-box {
    position: relative;
    width: 1200px;
    height: 160px;
    margin: auto;
}
.flink { position: absolute; top: 39px; margin-left: -1px; color: #fff; font-size: 19px; line-height: 19px; white-space: nowrap; }
.flink:hover { text-decoration: underline; }
.tri {
    position: absolute;
    top: 46px;
    display: block;
    width: 0;
    height: 0;
    right: -20px;
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
    border-top: 8px solid #fff;
}
.icon-ph {
    width: 32px;
    margin: 0 10px;
}
.icon-xl {
    width: 35px;
    margin: 0 10px;
}
.about {
    display: flex;
    position: absolute;
    left: 49px;
    bottom: 15px;
}
.tel { color: #fff; font-size: 15.9px; line-height: 32px; }
.qr { position: absolute; top: 33px; display: block; }
.qr img { display: block; width: 106px; height: 105px; }

.footer-bottom {
  position: relative;
  width: 100%; height: 160px;
  background: #f0f0f0;
}
.cp1, .cp2 { position: absolute; top: 28px; color: #aaa; font-size: 16px; line-height: 16px; white-space: nowrap; }
.cp1 { left: 259px; }
.cp2 { left: 689px; }
.cp1 a, .cp2 a { color: #aaa; }
.cp1 a:hover, .cp2 a:hover { text-decoration: underline; }
.police { position: absolute; left: 1010px; top: 16px; display: block; }
.wangjing { position: absolute; left: 465px; top: 49px; display: block; }
.netpolice { position: absolute; left: 555px; top: 85px; color: #aaa; font-size: 15.7px; line-height: 16px; }

/* ---------- 分页器（子页通用：首页/上一页/页码/下一页/末页） ---------- */
.pager { margin: 66px 0 0; text-align: center; font-size: 0; white-space: nowrap; }
.pager li { display: inline-block; }
.pager a {
  display: inline-block; height: 28px; margin-right: 4px; padding: 0 4px;
  border: 1px solid #ebebeb; background: #fff; color: #333;
  font-size: 15px; line-height: 26px; text-align: center; vertical-align: top;
}
.pager span {
  display: inline-block; height: 28px; margin-right: 4px; padding: 0 4px;
  font-size: 15px; line-height: 26px; vertical-align: top; color: #999;
}
.pager .first, .pager .last { width: 46px; }
.pager .prev, .pager .next { width: 60px; }
.pager .num { min-width: 26px; }
.pager a:hover { border-color: #a91011; color: #a91011; }
.pager .on, .pager .on:hover,
.pager .cur, .pager .cur:hover,
.pager li.active a, .pager li.active a:hover { background: #a91011; border-color: #a91011; color: #fff; }

/* 下拉菜单 */
.footer-red .dropdown {
  position: absolute;
  top: 0;
}

.footer-red .dropdown .flink {
  cursor: pointer;
  position: relative;
  display: inline-block;
}

/*网格部分*/
.footer-red .dropdown .dropdown-content {
  position: absolute;
  top: 60px;
  left: 0;

  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;

  gap: 6px 10px;
  min-width: 160px;

  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 10;
  padding: 6px 8px;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;

  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

.footer-red .dropdown .dropdown-content a {
  display: block;
  padding: 6px 8px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.footer-red .dropdown .dropdown-content a:hover {
  background: #f5f5f5;
  color: #8c0000;
}

.footer-red .dropdown:hover .dropdown-content {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

/*关于我们st*/
.met-column-nav  {
    margin: 30px 0;
}
.sidebar-tile {
    text-align: center;
}
.met-column-nav-ul {
    display: inline-block;
}
.met-column-nav-ul li {
    background: #fff;
    border-radius: 4px;
    margin: 0 10px;
    display: inline-block;
}
.met-column-nav-ul li a {
    border: 1px solid #ddd;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    font-size: 17px;
    display: inline-block;
}
.met-column-nav-ul li:hover {
    background: #fbfbfb;
    transition: all 0.2s ease;
}
.met-column-nav-ul li .active {
    background: #1677ff;
    border-color: #1677ff;
    color: #fff;
    border: 0;
}
.met-show {
    padding: 30px 0;
}
/*关于我们ed*/
/*视频动态st*/
.card {
  width: 100%;
  max-width: 1200px;   /* 可根据你站点布局调整或去掉 */
  margin: 0 auto;
  box-sizing: border-box;
}

.video-player-wrap {
  width: 100%;
  margin: 50px 0 0;
}

.video-player-wrap video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  border-radius: 4px;
}
/*列表部分*/
.ph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 35px 0 0;
}

.ph-item {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.ph-item img {
  width: 100%;
  height: 187px;        /* 固定高度，和原图一致 */
  object-fit: cover;    /* 按比例裁切填满，不变形 */
  display: block;
}

.ph-item .cap {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 8px 0;
  font-size: 16px;
  color: #555;
  line-height: 1.4;
}
.ph-item .date {
  display: block;
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}
/*视频动态ed*/
/* ---------- 返回顶部（改固定定位，贴页面画布右侧） ---------- */
.backtop {
  position: fixed;
  right: max(20px, calc(50% - 792px));
  bottom: 150px;
  width: 62px; height: 62px; border-radius: 50%;
  background: #8ec4f3; color: #fff; text-align: center;
  font-size: 14px; line-height: 21px; padding-top: 11px;
  z-index: 99;
}
.backtop:hover { background: #6fb4ef; }