@charset "utf-8";
/* news/news.html 的 new-1 板块（100%复刻样式 + 避免冲突）
   说明：保留 Swiper 必需类名（swiper-container / swiper-wrapper / swiper-slide），
   其余业务类统一加 n1- 前缀；主色：#015198
*/

.n1 { padding-top: 70px; padding-bottom: 68px; background:#fff url(../images/p2_bg.jpg) no-repeat center center;background-size: cover;}

.n1 .clearfix:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }
.n1 .clearfix { display: block; }

.n1 .n1-wrap { max-width: 1620px; padding: 0 10px; box-sizing: border-box; margin: auto; }

.n1 .n1-left { float: left; width: 70.125%; }
.n1 .n1-right { float: right; width: 27.125%; }

.n1 .n1-title { float: left; font-size: 40px; font-weight: bold; color: #2F2F2F; display: flex; align-items: flex-end; }
.n1 .n1-ico { display: block; height: 34px; width: auto; margin-right: 10px; }
.n1 .n1-more { float: right; font-size: 21px; color: #828282; }
.n1 .n1-more span { padding-left: 5px; }
.n1 .n1-head { line-height: 40px; padding-bottom: 40px; }
.n1 .n1-more:hover { color: #015198; }

/* 左侧：轮播 + 列表 */
.n1 .n1-banner { float: left; width: 57.041%; }
.n1 #swiper2 { position: relative; overflow: hidden; }
.n1 #swiper2 .swiper-slide { display: block; position: relative; }

.n1 .n1-pic { overflow: hidden; position: relative; }
/* 轮播图比例：4:3（用占位撑高，避免分辨率变化导致比例失真） */
.n1 .n1-pic::before { content: ""; display: block; padding-top: 75%; }
.n1 .n1-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  display: block;
  transition: all 0.4s ease-in-out;
}
.n1 .swiper-slide:hover .n1-bg { transform: scale(1.05); }

.n1 .n1-caption {
  position: absolute;
  width: 100%;
  height: 78px;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  line-height: 78px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 30px;
  padding-right: 150px;
  /* 原模板是 background:url(bj-3.png)，这里用同风格渐变替代并锁定主色 */
  background: linear-gradient(90deg, rgba(1,81,152,.78), rgba(1,81,152,.18));
  transition: background .35s ease, opacity .35s ease, transform .35s ease;
  opacity: .92;
}
.n1 .swiper-slide:hover .n1-caption{
  opacity: 1;
  background: linear-gradient(90deg, rgba(1,81,152,.88), rgba(1,81,152,.22));
}

.n1 .n1-banner .swiper-pagination { bottom: 33px !important; width: auto !important; left: auto !important; right: 24px; }
.n1 .n1-banner .swiper-pagination-bullet { opacity: .5; margin: 0 6px !important; }
.n1 .n1-banner .swiper-pagination-bullet-active { background: #fff; opacity: 1; }

.n1 .n1-list { float: right; width: 40.998%; border-top: 2px solid #015198; }
.n1 .n1-item { border-bottom: 1px solid #DDDDDD; height: 95px; box-sizing: border-box; align-items: center; display: flex; }
.n1 .n1-time { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; color: #015198; padding-bottom: 10px; }
.n1 .n1-txt { font-size: 18px; color: #333333; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.n1 .n1-itemin { width: 100%; }
.n1 .n1-item:hover .n1-txt { color: #015198; }

/* 右侧：通知公告 */
.n1 .n1-notice { border-top: 2px solid #015198; padding-top: 7px; }
.n1 .n1-ntime { float: left; width: 88px; height: 99px; background: #F0F0F0; text-align: center; align-items: center; display: flex; }
.n1 .n1-ntm { width: 100%; font-family: Arial, sans-serif; color: #015198; }
.n1 .n1-small { text-transform: uppercase; font-size: 14px; font-weight: bold; padding-bottom: 8px; }
.n1 .n1-day { font-size: 32px; line-height: 1; }
.n1 .n1-ntxt { float: right; width: calc(100% - 88px); height: 94px; box-sizing: border-box; border: 1px solid #E5E5E5; border-left: 0; align-items: center; display: flex; padding: 0 25px; }
.n1 .n1-nitem { margin-top: 14px; display: block; }
.n1 .n1-ntxt div {
  font-size: 18px;
  font-weight: bold;
  line-height: 32px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 64px;
}
.n1 .n1-nitem:hover .n1-ntxt div { color: #015198; }

/* 动效：轻微上浮（与原模板观感一致） */
.n1 a { transition: all 0.35s ease; }
.n1 a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .n1 a, .n1 .n1-bg { transition: none; } }

/* 响应式（参考 news/css/media.css 的 max-width: 999px 规则） */
@media screen and (max-width: 999px) {
  .n1 { padding-top: 25px; padding-bottom: 25px; }
  .n1 .n1-left { width: 100%; }
  .n1 .n1-right { width: 100%; padding-top: 25px; }
  .n1 .n1-head { line-height: 1; }
  .n1 .n1-title { font-size: 25px; line-height: 1; align-items: flex-end; }
  .n1 .n1-ico { height: 22px; margin-right: 8px; align-self: flex-end; }
  .n1 .n1-more { font-size: 14px; }
  .n1 .n1-head { padding-bottom: 15px; }

  .n1 .n1-banner { width: 100%; }
  .n1 .n1-list { width: 100%; border-top: 2px solid #015198; margin-top: 14px; }

  /* 小分辨率下按 1920×818 比例自适应高度，避免固定 440px 造成变形 */
  /* 小屏：标题覆盖在图片底部 */
  .n1 .n1-caption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    line-height: 64px;
    font-size: 16px;
    padding: 0 14px;
    padding-right: 90px;
    white-space: nowrap;
    opacity: .92;
  }
  .n1 .n1-banner .swiper-pagination{
    bottom: 10px !important;
  }
}

