.newsPage {
  background: #F7F7F7;
  padding: 0.65rem 0 1rem;
}

.newsList {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.newsList .item {
  height: 3.32rem;
  display: grid;
  grid-template-columns: 4.51rem 1fr;
  /*align-items: center;*/
  gap: 0.59rem;
  background: #fff;
  padding: 0.25rem;
  border: 0.01rem solid transparent;
  background-image: url('../images/new1.png');
  background-position: center right;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.newsList .item:hover {
  background-image: url('../images/new2.png');
  border-color: var(--orange);
  box-shadow: 0rem 0rem 0.35rem 0.01rem rgba(0, 0, 0, 0.1);
}

.newsList .imgBox {
  height: 2.78rem;
  background: #dfe4ec;
}

.newsList img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsList time {
  font-weight: 400;
  font-size: 0.16rem;
  color: #505050;
  margin-bottom: .34rem;
  display: block;
  margin-top: .29rem;
}

.newsList h2 {
  font-weight: 500;
  font-size: 0.24rem;
  color: #000000;
  margin-bottom: .1rem;
}

.newsList .item h2:hover {
  color: var(--blue);
}

.newsList p {
  font-weight: 400;
  font-size: 0.18rem;
  color: #505050;
  line-height: 0.3rem;
  margin-bottom: .56rem;
}

.newsList span {
  font-weight: 400;
  font-size: 0.16rem;
  color: #797979;
}

.newsList .item span:hover {
  color: var(--orange);
}

.newsDetail {
  background: #f6f6f6;
  padding: 0.55rem 0 1.31rem;
}

.detailLayout {
  display: grid;
  grid-template-columns: 1fr 2.94rem;
  gap: 0.46rem;
  align-items: flex-start;
}

.articleBox {
  background: #fff;
  border-radius: 0.5rem 0.5rem 0rem 0rem;
  padding: 0.45rem .4rem .57rem;
}

.articleBox h1 {
  text-align: center;
  font-weight: bold;
  font-size: 0.35rem;
  color: #000000;
  margin-bottom: 0.39rem;
}

.articleMeta {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  color: #999;
  font-weight: 400;
  font-size: 0.16rem;
  color: #727272;
  border-bottom: 0.01rem solid #e0e0e0;
  padding-bottom: 0.26rem;
  margin-bottom: 0.28rem;
}

.articleMeta span {
  display: flex;
  align-items: center;
  gap: .1rem;
}

.articleMeta img {
  width: .21rem;
  height: .21rem;
}

.articleBox p {
  font-weight: 400;
  font-size: 0.18rem;
  color: #000000;
  line-height: 0.35rem;
}

.articleBox article {
  padding-bottom: .4rem;
  border-bottom: 0.01rem solid #D8D8D8;
  margin-bottom: .28rem;
}

.articleBox .prev,
.articleBox .next {
  font-weight: 400;
  font-size: 0.16rem;
  color: #4B4B4B;
  line-height: 0.25rem;
}

.articleBox .prev span,
.articleBox .next span {
  font-size: 0.24rem;
}

.articleBox .prev:hover,
.articleBox .next:hover {
  color: var(--blue);
}

.sideNews {
  position: sticky;
  top: 1rem;
}

.sideNews h3 {
  font-weight: bold;
  font-size: 0.25rem;
  color: #000000;
  margin-bottom: 0.38rem;
}

.sideNews .item {
  margin-bottom: 0.5rem;
}

.sideNews .imgBox {
  height: 1.81rem;
  background: #dfe4ec;
  margin-bottom: 0.2rem;
}

.sideNews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sideNews time {
  font-weight: 400;
  font-size: 0.16rem;
  color: #A8A8A8;
  margin-bottom: .2rem;
  display: block;
}

.sideNews p {
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.25rem;
}

@media (max-width: 1024px) {
  .newsPage {
    padding: 0.42rem 0 0.72rem;
  }

  .newsList {
    gap: 0.32rem;
  }

  .newsList .item {
    height: auto;
    grid-template-columns: 1fr;
    gap: 0.24rem;
    padding: 0.24rem;
    background-size: cover;
  }

  .newsList .imgBox {
    height: 3.6rem;
  }

  .newsList time {
    font-size: 0.2rem;
    margin: 0 0 0.18rem;
  }

  .newsList h2 {
    font-size: 0.28rem;
    line-height: 0.4rem;
  }

  .newsList p,
  .newsList span {
    font-size: 0.2rem;
    line-height: 0.34rem;
  }

  .newsList p {
    margin-bottom: 0.24rem;
  }

  .newsDetail {
    padding: 0.42rem 0 0.72rem;
  }

  .detailLayout {
    grid-template-columns: 1fr;
    gap: 0.42rem;
  }

  .articleBox {
    border-radius: 0.16rem 0.16rem 0 0;
    padding: 0.36rem 0.24rem;
  }

  .articleBox h1 {
    font-size: 0.34rem;
    line-height: 0.48rem;
    margin-bottom: 0.24rem;
  }

  .articleMeta {
    flex-wrap: wrap;
    gap: 0.18rem 0.32rem;
    font-size: 0.2rem;
  }

  .articleBox p,
  .articleBox .prev,
  .articleBox .next,
  .sideNews p,
  .sideNews time {
    font-size: 0.24rem;
    line-height: 0.34rem;
  }

  .sideNews {
    position: static;
  }

  .sideNews h3 {
    font-size: 0.3rem;
    margin-bottom: 0.24rem;
  }

  .sideNews .item {
    margin-bottom: 0.3rem;
  }

  .sideNews .imgBox {
    height: 3.2rem;
  }
}

@media (max-width: 560px) {
  .newsList .imgBox,
  .sideNews .imgBox {
    height: 4.7rem;
  }
}