.newsDetailPage {
  /* min-height: 21.14rem; */
  padding: 2.06rem 0 1.22rem;
  background: url('../images/news-bg.jpg') center top no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.newsDetailBreadcrumb {
  color: #fff;
  flex-wrap: wrap;
  gap: .04rem 0;
  line-height: 1.5;
}

.newsDetailLayout {
  display: grid;
  grid-template-columns: minmax(0, 11.01rem) 4.55rem;
  gap: .44rem;
  align-items: start;
  margin-top: .53rem;
}

.newsArticleHeader {
  padding-bottom: .36rem;
  border-bottom: .01rem solid rgba(255, 255, 255, .38);
}

.newsArticle,
.newsRecommend {
  min-width: 0;
}

.newsArticleHeader h1 {
  max-width: 10.65rem;
  color: #fff;
  font-size: clamp(20px, .36rem, 36px);
  font-weight: 700;
  line-height: 1.22;
}

.newsArticleMeta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .08rem .25rem;
  margin-top: .32rem;
}

.newsArticleMeta span,
.newsArticleMeta time,
.newsArticleMeta b {
  color: rgba(255, 255, 255, .86);
  font-size: clamp(12px, .12rem, 12px);
  font-weight: 400;
}
.newsArticleMeta span{
  display: flex;
  align-items: center;
  column-gap: 0.08rem;
}
.newsArticleMeta b {
  text-transform: uppercase;
}

.newsArticleBody {
  padding-top: .47rem;
}

.newsArticleBody p,
.newsArticleBody a {
  color: #fff;
  font-size: clamp(14px, .18rem, 18px);
  line-height: 1.55;
}

.newsArticleBody p {
  margin-bottom: .22rem;
}

.newsArticleBody a {
  display: inline;
  text-decoration: underline;
  text-underline-offset: .03rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.newsArticleBody figure {
  width: 9.09rem;
  max-width: 100%;
  margin: .42rem auto .42rem;
}

.newsArticleBody figure img {
  display: block;
  width: 100%;
  height: auto;
}

.newsPager {
  margin-top: .42rem;
  padding-top: .42rem;
  border-top: .01rem solid rgba(255, 255, 255, .38);
}

.newsPager a {
  color: #fff;
  font-size: clamp(12px, .16rem, 16px);
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color .25s ease;
}

.newsPager a:hover {
  color: #fff100;
}

.newsRecommend {
  min-height: 10.6rem;
  padding: .29rem .28rem .36rem;
  border-radius: .2rem;
  background: rgba(0, 0, 0, .5);
}

.newsRecommend h2 {
  color: #fff;
  font-size: clamp(22px, .3rem, 30px);
  font-weight: 700;
  line-height: 1.2;
}

.recommendLine {
  width: 0.6rem;
  height: .07rem;
  margin-top: .13rem;
  background: url('../images/recommendLine.svg') center center no-repeat;
  background-size: contain;
}



.recommendCard {
  margin-top: .33rem;
}

.recommendCard .imgBox {
  height: 2.88rem;
  border-radius: .08rem;
}

.recommendCard img {
  border-radius: inherit;
}

.recommendCard time {
  display: block;
  margin-top: .24rem;
  color: #fff;
  font-size: clamp(12px, .18rem, 18px);
}

.recommendCard h3 {
  margin-top: .16rem;
  color: #fff;
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 400;
  line-height: 1.35;
  transition: color .25s ease;
}

.recommendCard:hover h3 {
  color: #fff100;
}

@media (max-width: 768px) {
  .newsDetailPage {
    min-height: 0;
    padding: 1.4rem 0 .58rem;
  }

  .newsDetailLayout {
    grid-template-columns: 1fr;
    gap: .35rem;
    margin-top: .34rem;
  }

  .newsDetailBreadcrumb {
    align-items: flex-start;
  }

  .newsDetailBreadcrumb span:last-child {
    flex: 1 1 100%;
  }

  .newsArticleHeader {
    padding-bottom: .26rem;
  }

  .newsArticleMeta {
    margin-top: .2rem;
  }

  .newsArticleBody {
    padding-top: .3rem;
  }

  .newsArticleBody p {
    margin-bottom: .18rem;
  }

  .newsArticleBody figure {
    margin: .3rem auto;
  }

  .newsPager {
    margin-top: .3rem;
    padding-top: .3rem;
  }

  .newsRecommend {
    min-height: 0;
    padding: .24rem .18rem .28rem;
    border-radius: .12rem;
  }

  .recommendCard {
    margin-top: .26rem;
  }

  .recommendCard .imgBox {
    height: auto;
    aspect-ratio: 400 / 288;
  }
}