.container {
  position: relative;
}

.top_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.top_bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}

.content {
  padding: 1.99rem 1.4rem 1.52rem 1.4rem;
}

.content .top {
  position: relative;
}

.content .top .title {
  display: flex;
  flex-direction: column;
}

.content .top .p_desc {
    color: rgba(141, 141, 141, 1);
}

.content .top .tabs {
  display: flex;
  align-items: center;
  gap: .48rem;
  margin: .6rem 0 .5rem 0;
}

.content .top .tab {
  color: rgba(79, 96, 109, 1);
  font-weight: 400;
  line-height: 1.29;
  /*font-family: 'H_Regular';*/
  font-family: 'Microsoft YaHei';

  border-radius: .37rem;
  padding: .08rem .26rem;
}

.content .top .tab.active {
  background: rgba(36, 145, 202, 1);
  color: rgba(255, 255, 255, 1);
}

.content .banner {
  width: 100%;
    position: relative;
}

.content .banner .banner_swiper {
  width: 100%;
  overflow: hidden;
}

.content .banner .swiper-pagination {
    position: absolute;
  left: 9.2rem;
  bottom: .67rem;
  display: flex;
  justify-content: start;
  padding-right: .6em;
  z-index: 100;
}

.content .banner .swiper-pagination .swiper-pagination-bullet {
    width: .35rem;
  height: .04rem;
  /*margin: 0 .1rem;*/
  background: rgba(217, 217, 217, 1);
  border-radius: 0;
  /* opacity: 1; */
  transition: all 1.5s ease;
}

.content .banner .swiper-pagination .swiper-pagination-bullet-active {
    background: rgba(36, 145, 202, 1);
}

.content .banner .item {
  display: flex;
  gap: .7rem;
  align-items: center;
  background: rgba(248, 248, 250, 1);
  border-radius: .2rem;
}

.content .banner .item .img_box {
  width: 8.5rem;
  height: 6.24rem;
  border-radius: .2rem;
  overflow: hidden;
  flex-shrink: 0;
}

.content .banner .item .img_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all .5s ease-in-out;
}

.content .banner .item .img_box img:hover {
  transform: scale(1.05);
}

.content .banner .item .item_info {
  display: flex;
  flex-direction: column;
  padding: 0 .9rem 0 0;
}

.content .banner .item .item_info .time {
  font-weight: 400;
  line-height: 1.7;
  font-family: 'Microsoft YaHei';
  margin-bottom: 0.1rem;
  color: rgba(102, 102, 102, 1);
}

.content .banner .item .item_info .title {
  font-weight: 600;
  line-height: 1.5;
  font-family: 'Microsoft YaHei';
  margin-bottom: .35rem;
  color: rgba(51, 51, 51, 1);
}

.content .banner .item .item_info .desc {
  font-weight: 400;
  line-height: 1.7;
  font-family: 'Microsoft YaHei';
  color: rgba(79, 96, 109, 1);
  margin: 0 0 .7rem 0;
  max-height: 1.5rem;
  overflow-y: auto;
}



.content .list {
  display: flex;
  flex-direction: column;
  /* gap: .81rem; */
  margin: 1.2rem 0 0 0;
  border-top: .01rem solid rgba(0, 0, 0, 0.21);
}

.content .list .item {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  padding: .81rem 0 .87rem .61rem;
  border-bottom: .01rem solid rgba(0, 0, 0, 0.21);
  position: relative;
  overflow: hidden;
  transition: all .5s ease-in-out;

}

.content .list .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all .5s ease-in-out;
  background: transparent;
}

.content .list .item:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(156deg, rgba(245, 252, 255, 0.94) 73.54%, rgba(89, 171, 213, 0.94) 139.44%), #FFF;
  z-index: -1;
}

.content .list .item:hover {
  /*transform: scaleY(1.05);*/
  box-shadow: 0 .04rem .3rem 0 rgba(35, 117, 223, 0.07);
  border-color: transparent;
  border-radius: .2rem;
}

.content .list .item .img_box {
  width: 5.406711rem;
  height: 3.605rem;
  border-radius: .2rem;
  overflow: hidden;
  flex-shrink: 0;
}

.content .list .item .img_box img {
  width: 100%;
  height: 100%;
  transition: all .5s ease-in-out;
  object-fit: cover;
}

.content .list .item:hover .img_box img {
  transform: scale(1.05);
}

.content .list .item .item_bg {
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9.095rem;
  height: 3.987rem;
}

.content .list .item:hover .item_bg {
  opacity: 1;
}

.content .list .item .item_info {
  display: flex;
  flex-direction: column;
  padding: 0 1.6rem 0 0;
  position: relative;
}

.content .list .item .item_info .time {
  font-weight: 400;
  line-height: 1.7;
  font-family: 'Microsoft YaHei';
  margin-bottom: 0.1rem;
  color: rgba(102, 102, 102, 1);
}

.content .list .item .item_info .title {
  font-weight: 600;
  line-height: 1.5;
  font-family: 'Microsoft YaHei';
  margin-bottom: .25rem;
  color: rgba(51, 51, 51, 1);
  
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content .list .item .item_info .desc {
  font-weight: 400;
  line-height: 1.7;
  font-family: 'Microsoft YaHei';
  color: rgba(79, 96, 109, 1);
  margin: 0 0 .53rem 0;
  
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content .pagination {
  margin-top: .9rem;
}


@media (max-width: 767px) {
    .content {
        padding: 30px 20px 60px 20px;
    }
    .content .top .tab {
        font-size: 14px;
    }
    .content .banner .item {
        flex-direction: column;
        gap: 30px;
    }
    .content .banner .item .img_box {
        width: 100%;
        height: 66vw;
    }
    .content .banner .item .item_info {
        padding: 0 20px 20px;
    }
    
    
    .content .banner .swiper-pagination {
        left: 70%;
        width: 100px;
    }
    .content .list {
        margin: 40px 0 0 0;
        padding: 40px 0 0 0;
        gap: 30px;
    }
    .content .list .item {
        flex-direction: column;
        padding: 0;
        gap: 30px;
        padding-bottom: 30px;
    }
    .content .list .item .img_box {
        width: 100%;
        height: 50vw;
    }
    .content .list .item .item_info {
        padding: 0 20px;
    }
    .content .list .item .item_info .time {
        font-size: 14px;
    }
    .content .list .item .item_info .title {
        font-size: 18px;
    }
    .content .list .item .item_info .desc {
        font-size: 14px;
    }
}