/* 内容 */
.content {
  width: 100%;
}

.top_banner {
  width: 100%;
  height: 60vh;
  background: url(../images/banner/news_banner.webp) no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.top_banner .title {
  font-size: 42px;
  font-weight: 500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.top_banner .title .text {
  position: relative;
  font-weight: 400;
  font-size: 28px;
  margin-top: 10px;
}

.top_banner .title .text::after {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 30px;
  content: "";
  display: block;
  height: 3px;
  background: #fff;
  margin-top: 3px;
}

.news_top_title {
  width: 100%;
  height: 62px;
  background: #F5F7F9;
}

.content .news_top_title .title_text {
  font-weight: 400;
}

.content .news_top_title .title_text a {
  color: #999999;
}


/* 屏幕自适应 */
/* 大于1920的时候 底部导航栏 样式改变 */
@media screen and (min-width: 1920px) {
  .news_top_title .title_text {
    width: 90%;
    font-size: 20px;
  }

  .news_top_title .title_text {
    width: 90%;
    font-size: 20px;
  }
}

/* 大于1400的时候 小于1920px 样式改变 */
@media screen and (min-width: 1440px) and (max-width: 1920px) {
  .news_top_title .title_text {
    width: 80%;
    font-size: 18px;
  }
}

/* 小于1200的时候 顶部导航栏及body 样式固定 */
@media screen and (max-width: 1440px) {
  .news_top_title .title_text {
    width: 90%;
    font-size: 18px;
  }
}

/* 新闻列表 */
.paging_list .paging_img {
  overflow: hidden;
  width: 400px;
  height: 280px;
  margin-right: 20px;
}

.paging_list .paging_img img {
  width: 100%;
  height: 100%;
}

.paging_list li {
  display: flex;
  padding: 40px 20px;
  border-bottom: 1px solid #D7D7D7;
  overflow: hidden;
  cursor: pointer;
}

.paging_container {
  width: 80%;
  margin: 50px auto 0px;
}

.paging_container .box1 {
  flex: 1;
}

.paging_container .boxItem {
  padding: 0px 0px 0px 80px;
  flex: 1;
}

.paging_container .box1 h1 {
  font-size: 26px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 20px;
}

.paging_container .boxItem h1 {
  font-size: 24px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 20px;
}

.paging_container .text {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  /* 标准属性 */
  -webkit-box-orient: vertical;
  color: #999999;
}

.paging_container ul li:hover {
  background: rgba(50, 50, 50, 0.1);
}

.paging_container .time {
  font-size: 16px;
  margin-top: 12px;
  text-align: left;
  color: #7f7f7f;
}

.paging_btn {
  display: flex;
  justify-content: space-around;
}

.paging_btn span:hover {
  background-color: #143E89;
  color: #fff;
}

.paging_content {
  display: flex;
  justify-content: center;
  margin: 20px 50px 50px;
}

.paging_content span {
  width: 40px;
  height: 40px;
  color: #333;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: .5s;
  border: 1px solid #ccc;
  margin-right: 20px;
  border-radius: 2px;
}

.paging_content span:nth-last-child {
  border: 1px solid #ccc;
}

.paging_active {
  background-color: #143E89;
  color: #fff !important;
}

.paging_box {
  display: flex;
  justify-content: space-between;
}

.paging_box .paging_date {
  text-align: center;
  position: relative;
}

.paging_box .paging_date::after {
  position: absolute;
  top: 0;
  left: 100%;
  width: 30px;
  transform: translate(25px, 15px);
  content: "";
  display: block;
  height: 2px;
  background: #979797;
}

.paging_box .paging_date .title1 {
  font-weight: bold;
  font-size: 28px;
  color: #999999;
}
.paging_box .paging_date .title2 {
  padding: 0px 6px;
  font-size: 18px;
  color: #C6C6C6;
  border: 1px solid #D7D7D7;
  border-radius: 2px;
}

.paging_first,
.paging_last,
.paging_up,
.paging_down {
  width: 60px;
  height: 40px;
  line-height: 35px;
  color: #333;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
  margin-right: 20px;
  border-radius: 2px;
  font-size: 20px;
}

/* 详情 */
.paging_box .paging_down {
  margin-right: 0px;
}

.paging_last {
  border: 1px solid #ccc;
  margin-right: 10px;
}

.paging_first:hover,
.paging_last:hover,
.paging_up:hover,
.paging_down:hover {
  background-color: #143E89;
  color: #fff;
}

.paging_Btn p {
  color: red;
}

.paging_max {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #8b8b8b;
}

/* 注意!! 这个两个样式是一些效果必备的! */
.paging_none {
  display: none !important;
}

.paging_btn_none_block {
  display: block !important;
}



/* 新闻详情 */
.news_detail {
  width: 80%;
  margin: 0 auto 40px;
  padding: 0 10%;
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
    /* 开始时，元素在容器左侧外 */
  }

  to {
    transform: translateX(0);
    /* 结束时，元素滑入到容器内 */
  }
}

@keyframes opacityShow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.detail_info {
  animation: opacityShow 3s forwards;
  /* 动画名称，持续时间，填充模式 */
}

.news_detail .detail_info h1 {
  text-align: center;
  font-size: 36px;
  color: #333333;
  line-height: 60px;
  margin: 20px 0px 10px;
}

.news_detail .detail_info .date_time {
  text-align: center;
  border-bottom: 1px solid #D7D7D7;
  padding-bottom: 10px;
  margin: 10px 0px 40px;
}

.news_detail .detail_info .news_img {
  width: 100%;
  /* 图片宽度为100% */
  height: auto;
  /* 图片高度自动 */
  object-fit: contain;
  /* 图片按比例缩放，保持宽高比 */
  display: block;
  /* 图片作为块级元素显示 */
}

.news_detail .detail_info .news_img img {
  width: 100%;
  height: 100%;
}

.news_detail .detail_info .text {
  font-weight: 400;
  font-size: 20px;
  color: #666666;
  line-height: 32px;
  margin: 20px 0;
}