@charset 'utf-8';
/* ============================================================
   一级页面/css/news.css —— 新聞動態 页面样式（新闻中心-新聞動态）
   说明：
   1. 1rem = 100px（与 common.css 自适应换算一致）
   2. 兼容 IE11：Flexbox 均书写 -ms- 前缀；关键尺寸提供 px 兜底
   3. 禁止 CSS Grid
   ============================================================ */

/* ---------- 页面背景 ---------- */
.hh-page {
  /* background: #f5f2fb; */
  max-width: 19.2rem;
  margin: 0 auto;
}

/* ---------- 内容区 ---------- */
.hh-main {
  width: 1530px;
  width: 15.3rem;
  margin: 0 auto;
  padding-bottom: 10px;
  padding-bottom: 0.1rem;
}


/* ---------- 新闻列表 ---------- */
.hh-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
  padding: 0 0 30px 0;
  padding: 0 0 0.3rem 0;
  box-sizing: border-box;
  padding-bottom: 0;
}
.hh-news-item {
  position: relative;
  height: 232px;
  height: 2.32rem;
  box-sizing: border-box;
  border-bottom: 1px solid #D4D4D4;
}
.hh-news-item:hover{
  border-color: #6440c3;
}
.hh-news-item>a{
  display: block;
}
/* 相邻卡片间距 30px（设计稿：卡片高 232 + 间隙 30） */
.hh-news-item + .hh-news-item {
  margin-top: 30px;
  margin-top: 0.3rem;
}
/* 缩略图 */
.hh-news-thumb {
  float: left;
  width: 360px;
  width: 3.6rem;
  height: 201px;
  height: 2.01rem;
  overflow: hidden;
}
.hh-news-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease;
  -webkit-transition: -webkit-transform 0.5s ease;
  -ms-transition: -ms-transform 0.5s ease;
}
.hh-news-item .hh-news-thumb:hover img {
  transform: scale3d(1.05, 1.05, 1.05);
  -webkit-transform: scale3d(1.05, 1.05, 1.05);
  -ms-transform: scale3d(1.05, 1.05, 1.05);
}

/* 顶部视频区域 */
.article-topvideo {
  margin: 0.3rem auto 0;
  max-width: 100%;
  text-align: center;
}

.article-topvideo-inner {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  background: #000;
}

.article-topvideo-inner video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}

.article-topvideo-inner video.video-vertical {
  max-height: 80vh;
  max-width: 4.8rem;
}
/* 内容 */
.hh-news-body {
  position: relative;
  width: 1137px;
  width: 11.37rem;
  height: 201px;
  height: 2.01rem;
  box-sizing: border-box;
}
/* 标签 */
.hh-news-tag {
  position: absolute;
  left: 7px;
  left: 0.07rem;
  top: 0;
  min-width: 103px;
  min-width: 1.03rem;
  height: 30px;
  height: 0.3rem;
  border-radius: 4px;
  border-radius: 0.04rem;
  background: rgba(89, 43, 216, 0.1);
  /* IE11 兜底 */
  background: #f0ebfb;
  background: rgba(89, 43, 216, 0.1);
  text-align: center;
  line-height: 30px;
  line-height: 0.3rem;
  font-family: "Microsoft YaHei";
  font-size: 18px;
  font-size: 0.18rem;
  color: #6440c3;
  padding: 0 0.1rem;
}
/* 标题 */
.hh-news-title {
  position: absolute;
  left: 0;
  top: 47px;
  top: 0.47rem;
  width: 769px;
  width: 7.69rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "Microsoft YaHei";
  font-size: 20px;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #080707;
  text-decoration: none;
  letter-spacing: 0.09em;
}
.hh-news-item:hover .hh-news-title {
  color: #6440c3;
}
.hh-news-item:hover .hh-news-title {
  color: #6440c3;
}
/* 摘要 */
.hh-news-desc {
  position: absolute;
  top: 86px;
  top: 0.86rem;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Microsoft YaHei";
  font-size: 16px;
  font-size: 0.16rem;
  line-height: 167.25%;
  color: #666666;
  max-height: 80px;
  max-height: 0.8rem;
  letter-spacing: 0.09em;
}
/* 底部信息（来源日期 + 浏览量） */
.hh-news-meta {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 24px;
  height: 0.24rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.hh-news-meta .date {
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-size: 0.14rem;
  letter-spacing: 0.09em;
  color: #9e9e9e;
}
.hh-news-meta .views {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  font-family: "Microsoft YaHei";
  font-size: 14px;
  font-size: 0.14rem;
  letter-spacing: 0.09em;
  color: #9e9e9e;
}
.hh-news-meta .views::before {
  content: "";
  display: inline-block;
  background: url('../common/topbottom/list-icon2.png') no-repeat;
  background-size: auto 100%;
  width: 19px;
  width: 0.19rem;
  height: 16px;
  height: 0.16rem;
  margin-right: 8px;
  margin-right: 0.08rem;
}

/* ---------- 分页器 ---------- */
/* ---------- 响应式（平板/移动端 ≤768px） ---------- */
@media screen and (max-width: 768px) {
  .hh-main {
    width: 100%;
    padding: 0 0.2rem 0.1rem;
    box-sizing: border-box;
  }
  .hh-news-item {
    height: auto;
    padding: 0 0 0.3rem 0;
    height: auto;
  }
  .hh-news-tag{
    position: static;
    font-size: 0.26rem;
    display: inline-block;
    min-width: 1.5rem;
    line-height: 0.5rem;
    height: 0.5rem;
  }
  .hh-news-thumb {
    width: 100%;
    height: 3.1rem;
    margin-bottom: 0.2rem;
  }
  .hh-news-body {
    position: static;
    padding-left: 0;
    width: 100%;
    height: auto;
    margin-bottom: 0.3rem;
  }
  .hh-news-title {
    position: static;
    width: 100%;
    margin-top: 0.15rem;
    font-size: 0.26rem;
  }
  .hh-news-desc {
    position: static;
    width: 100%;
    font-size: 0.26rem;
    margin-top: 0.15rem;
  }
  .hh-news-meta {
    position: static;
    margin-top: 0.15rem;
    height: auto;
  }
  .hh-news-meta .date,.hh-news-meta .views{
    font-size: 0.26rem;
  }
  .hh-news-meta .views::before {
    width: 0.3rem;
    height: 0.26rem;
  }
}