/* ============================================================
   都安纪检监察网 · 首页样式 home.css（v2 CMS 流式版）
   幻灯与图片新闻轮播见 js/carousel.js，Tab 选项卡见 js/tabs.js
   由设计稿固定画布改造：区块改流式纵排，行距/栏距按原像素保留
   ============================================================ */

/* ---------- 幻灯走马灯区（展示框 590×290 + 35px 半透明标题条） ---------- */
/* 幻灯图用 contain 完整显示：超宽横幅图上下留隙透出 band 渐变，不裁切两侧内容；
   上传 590×290（约 2:1）比例图时铺满无空隙 */
.band {
  position: relative;
  width: 100%; height: 425px;
  background: url("../assets/band-top-2.png") no-repeat;
  background-size: 100% 100%;
}
.carousel {
  width: 610px;
  height: 345px;
  overflow: hidden;
  display: inline-block;
  position: relative;
  border: 10px solid #ba1c1c;
}

.car-viewport {
  position: relative;
  width: 100%;
  height: 290px;
}

.car-slides {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.car-slides > li {
  float: left;
  width: 590px;
  height: 290px;
  position: relative;   /* 关键：让 .car-caption 相对于 li 定位 */
}

.car-slides img {
  display: block;
  width: 100%;
  height: 325px;
  object-fit: cover;
}

/* 底部标题条 */
.car-caption {
  position: absolute;
  left: 0;
  bottom: -35px;
  width: 100%;
  height: 35px;
  background: rgba(0, 0, 0, .65);
  z-index: 10;
}

.car-caption a {
  display: block;
  padding-left: 14px;
  color: #fff;
  font-size: 16px;
  line-height: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 圆点导航：相对于 .carousel 定位 */
.car-dots {
  position: absolute;
  right: 10px;
  bottom: 40px;   /* 在标题条上方 */
  height: 9px;
  z-index: 20;
}

.car-dots li {
  float: left;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  color: transparent;
  text-indent: -99px;
}

.car-dots li.on {
  background: #d6181f;
  border-color: #d6181f;
}
/* ---------- 重点头条（右侧，行距 34px） ---------- */
.headline {     
    display: inline-block;
    width: 589px;
    background: #ba1c1c;
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    height: 345px;
    vertical-align: top;
}
.headline h2 {
    display: inline-block;
    width: 545px;
    font-size: 24px;
    color: #fff;
    margin-top:10px;
}
.headline-rule {
    width: 545px;
    height: 3px;
    background: #fff;
    display: block;
    margin: 10px 0 20px
}
.headline li {
  position: relative;
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 15px;
}
.headline li:first-child { margin-top: 0; }
.headline li a {
  flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #fff; font-size: 18px; line-height: 18px;
}
.headline li a:hover { text-decoration: underline; }
.headline .date {
  flex: 0 0 auto; margin-left: 30px;
  color: #fbfbfb; font-size: 17px; line-height: 19px;
}

/* ---------- 新闻列表区（Tab + 列表 + 右侧公告/横幅） ---------- */
/* 原设计 Tab 栏叠于 band 背景图底部（页面 909 = band 内 399），负边距还原 */
.news {
  position: relative;
  display: flex;
  margin: 0 auto 35px;
  width: 1200px;
}
.news-main { flex: 1 1 auto; min-width: 0; padding-right: 15px; }
.news-side { flex: 0 0 337px; }
.tab-group {
    width: 680px;
}

/* Tab 选项卡（行高 46，项距 42，红色指示条由 js/tabs.js 随激活项平移） */
.tab-group + .tab-group { margin-top: 36px; }
.tabs { position: relative; height: 46px; }
.tabs ul { display: flex; gap: 42px; }
.tabs li { white-space: nowrap; width:112px; }
.tabs li a {
  display: block; white-space: nowrap;
  color: #ba1c1c; font-size: 28px; font-weight: bold; line-height: 28px;
}
.tabs li a:hover { text-decoration: none; }
.tab-rule { position: absolute; top: 39px; width: 103px; height: 5px; background: #ba1c1c; display: block; }

/* Tab 面板：默认仅显示 .active 面板（点击选项卡切换，见 js/tabs.js） */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.text-list { margin-top: 42px; padding-left: 24px; }
.text-list li { position: relative; margin-top: 31px; }
.text-list li:first-child { margin-top: 0; }
.text-list li a {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #222; font-size: 17.4px; line-height: 20px; width:800px;
}
.text-list li a:hover { color: #ba1c1c; }
.text-list li::before {
  content: ""; position: absolute; left: -19px; top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: #c9c9c9;
}
.edt {
    color: #888;
    float: right;
}

/* 通知公告（内容固定 3 条，卡内绝对定位保留） */
.notice {
  position: relative;
  width: 519px;
  height: 345px;
  background: #fff;
  border: 2px solid #bf3131;
  border-radius: 12px;
}

.notice h2 {
    position: absolute;
    left: 0;
    text-align: center;
    height: 40px;
    top: 13px;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    line-height: 24px;
    color: #ba1c1c;
    background: url(../assets/tz-bt-1.png) 6px -12px no-repeat;
}

/* 滚动区域容器 */
.notice-scroll .notice-box {
  position: absolute;
  left: 21px;
  top: 55px;
  width: 475px;
  height: 270px;  
  z-index: 2;/* 345 - 55 - 20 留点底边距 */
  overflow: hidden;
}

.notice-scroll .notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-scroll .notice-list li {
  height: 70px;        /* 每条公告占 90px，和原来两行文字+日期的空间匹配 */
  padding-bottom: 10px;
  display: flex;
}

.notice-scroll .notice-list li a {
  display: inline-block;
  width: 345px;
  color: #333;
  font-size: 16px;
  line-height: 28px;
  font-weight: 500;
  height: 56px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notice-scroll .notice-list li a:hover {
  color: #ba1c1c;
}

.notice-scroll .notice-list .date {
  display: inline-block;
  margin-top: 6px;
  color: #999;
  font-size: 16px;
  line-height: 16px;
  margin-left: auto;
}

/* 分隔线保持原位 */
.notice-rule {
  position: absolute;
  left: 28px;
  width: 462px;
  height: 1px;
  border-bottom: 1px dotted #bf3131;
  display: block;
  z-index: 1;
}
/* 右侧竖排横幅（9 张，间距 6px 近似原设计 4-9px） */
.banners { margin-bottom: 15px; }
.banners a { display: block; margin-bottom: 6px; }
.banners a:last-child { margin-bottom: 0; }
.banners img { display: block; width: 520px; height: 79px; }

/* ---------- 以案说纪说法 / 宣传教育（双栏，行距 45px） ---------- */
.topic {
  display: flex;
  margin: auto;
  width: 1200px;
}
.topic-left { position: relative; width: 50%; }
.topic-right { position: relative; width: 50%; }
.topic-bar { display: block; width: 650px; height: auto; }
.more {
  position: absolute; top: 31px; width: 62px; height: 22px; overflow: hidden;
  color: #666; font-size: 16px; line-height: 22px;
}
.more:hover {
    color: #ba1c1c;
}
.topic-left .more { right: 38px; }
.topic-right .more { right: 45px; }
.list-bar { margin-top: 21px; padding-left: 37px; }
.list-bar li { position: relative; margin-top: 26px; }
.list-bar li:first-child { margin-top: 0; }
.list-bar li a {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: #222; font-size: 16px; line-height: 19px; width: 516px;
}
.list-bar li a:hover { color: #ba1c1c; }
.list-bar li::before {
  content: ""; position: absolute; left: -18px; top: 6px;
  width: 5px; height: 5px; border-radius: 50%; background: #c9c9c9;
}

/* ---------- 图片新闻（strip 底图 + 标题 + 每页 4 张轮播） ---------- */
.picnews { margin-top: 57px; width: 100%;  background: url("../assets/strip-1.png") no-repeat; background-size:100% 100%; }
.strip { display: block; margin-left: 5px; width: 100%; height: auto; }
.picnews-head {
  position: absolute; left: 27.5px; top: 33px;
  width: 1145px; height: 44px;
}
.picnews-head .hline { position: absolute; top: 22px; height: 1px; background: #e0e0e0; }
.picnews-head .hline-l { left: 0; width: 491px; }
.picnews-head .hline-r { left: 637px; width: 508px; }
.picnews-head .dot { position: absolute; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: #1e84e9; }
.picnews-head .dot-l { left: 491px; }
.picnews-head .dot-r { left: 629px; }
.picnews-head .t {
  position: absolute; left: 507px; top: 0;
  font-size: 29.3px; font-weight: bold; line-height: 44px; color: #3c3c3c;
}
.picnews-head .t a {
    color: #3c3c3c;
}
.picbox {
    width: 1200px;
    margin: auto;
    position: relative;
    height: 341px;
}
/* 图片新闻轮播：每页 4 张 255×162、间距 25px（每 5 秒自动切换，见 js/carousel.js） */
.picnews-carousel { position: absolute; left: 52.5px; top: 115px; width: 1095px; height: 162px; }
.pic-viewport { width: 1095px; height: 162px; overflow: hidden; }
.pic-track { display: flex; gap: 25px; transition: transform .5s ease; }
.pic-page { display: flex; gap: 25px; flex: 0 0 1095px; margin: 0; padding: 0; }
.pic-page li { flex: 0 0 255px; }
.photo { display: block; }
.photo img { display: block; width: 255px; height: 162px; object-fit: cover; }

/* 轮播左右箭头（垂直居中于图片带，位于图片外侧） */
.pic-arrow {
  position: absolute; top: 63px;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(30, 132, 233, .8); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.pic-arrow:hover { background: #1e84e9; }
.pic-arrow:focus-visible { outline: 2px solid #1e84e9; outline-offset: 2px; }
.pic-arrow svg { width: 18px; height: 18px; display: block; }
.pic-prev { left: -48px; }
.pic-next { left: 1107px; }