.banner{
  width: 100%; height: 500px; background: url('../img/news/news_main.jpg') no-repeat center center; background-size: cover; box-sizing: border-box; display: flex; align-items: center;
}
.banner .page-container{
  padding-left: 100px; 
}
.banner h2{
  font-size: 60px; color: #fff; line-height: 1; font-weight: bold;
}
.banner p{
  font-size: 26px; color: #ABAAAA; line-height: 1; margin-top: 35px;
}

.new-container{
  width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap;
}
.news-item{
  width: 33.33333%; margin-bottom: 60px; box-sizing: border-box; padding: 0 30px;
}
.news-item-wrapper{
  background: #fff; box-shadow: 0 2px 10px rgba(150,150,150,.2); padding: 20px 10px;
}
.news-item h3{
  font-size: 24px; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: bold;
}
.news-item h3 a{
  color: #000;
}
.news-item a{
  text-decoration: none;
}
.news-img{
  width: 100%; height: 170px; position: relative; overflow: hidden; margin: 20px 0;
}
.news-img img{
  display: block; width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.news-item p{
  font-size: 12px; color: #000;
}
.news-item .author{
  line-height: 1;
}
.news-item .desc{
  line-height: 1.8; margin: 15px 0; min-height: 90px;
}
.news-item .news-btn{
  text-decoration: none; color: #000; display: block; box-sizing: border-box; background: #fff; border-radius: 4px; transition: 0.2s; border: 1px solid #2513d1; width: 100px; height: 34px; text-align: center; line-height: 34px; font-size: 12px;
}
.news-item .news-btn:hover{
  background: #2513d1; color: #fff;
}
.news-item ul{
  display: flex; align-items: center; margin-top: 20px;
}
.news-item ul li{
  margin-right: 20px; font-size: 12px; color: #000; line-height: 1; display: flex; align-items: center;
}
.news-item ul li:last-child{
  margin-right: 0;
}
.news-item ul li i{
  display: block; width: 16px; height: 16px; margin-right: 5px;
}
.news-item ul li .icon-news-date{
  background: url("../img/news/icon-clock.png") no-repeat left center/auto 100%;
}
.news-item ul li .icon-news-hot{
  background: url("../img/news/icon-views.png") no-repeat left center/auto 100%;
}
.news-item ul li .icon-news-share{
  background: url("../img/news/icon-share.png") no-repeat left center/auto 100%;
}

.pages{
  text-align: center;
}
.pages a,
.pages span{
  display: inline-block; min-width: 26px; height: 26px; line-height: 26px; color: #909090; border-radius: 3px; background: #ededed; margin: 0 6px; text-decoration: none; cursor: pointer; transition: 0.3s; font-size: 14px;
}
.pages .layui-laypage-curr{
  background: #2513d1; color: #fff;
}
.pages a:not(.layui-disabled):hover,
.pages span:hover{
  background: #2513d1; color: #fff;
}

@media (max-width: 1024px) {
  .banner{
    height: 350px;
  }
  .banner .page-container{
    padding-left: 30px;
  }
  .news-item{
    margin-bottom: 20px; padding: 0 10px;
  }
  .news-img{
    height: 124px;
  }
}
@media (max-width: 820px) {
  .news-item h3{
    font-size: 17px;
  }
  .news-item .news-btn{
    height: 30px; line-height: 30px;
  }
  .news-item ul{
    width: 100%; flex-wrap: wrap; margin-top: 15px;
  }
  .news-item ul li{
    width: 50%; margin: 0 0 10px;
  }
  .news-item ul li:nth-child(2){
    justify-content: flex-end;
  }
  .news-item ul li:last-child{
    margin-bottom: 0;
  }
  .news-item .desc{
    min-height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 10px 0;
  }
  .news-img{
    height: 100px;
    margin: 10px 0;
  }
}
@media (max-width: 767px) {
  .banner{
    height: 3.6rem;
  }
  .banner .page-container{
    padding-left: 2%;
  }
  .banner h2{
    font-size: .6rem;
  }
  .banner p{
    font-size: .3rem; margin-top: .5rem;
  }
  .news-item{
    width: 50%; margin-bottom: .2rem; padding: 0 .1rem;
  }
  .news-item-wrapper{
    padding: .2rem;
  }
  .news-item h3{
    font-size: .28rem;
  }
  .news-img{
    height: 1.35rem; margin: .2rem 0;
  }
  .news-item p{
    font-size: .24rem;
  }
  .news-item .desc{
    min-height: auto; margin: .2rem 0;
  }
  .news-item .news-btn{
    width: 1.8rem; height: .5rem; line-height: .5rem; font-size: .24rem;
  }
  .news-item ul{
    margin-top: .25rem; justify-content: space-between; flex-wrap: wrap;
  }
  .news-item ul li{
    margin-right: 0; font-size: .24rem; margin-bottom: .15rem;
  }
  .news-item ul li:nth-child(1){
    width: 70%;
  }
  .news-item ul li:nth-child(2){
    width: 30%;
  }
  .news-item ul li i{
    width: .22rem; height: .22rem; margin-right: 4px; font-size: 0;
  }
  .pages{
    margin-top: .3rem;
  }
  .pages>div{
    display: flex; justify-content: center;
  }
  .pages a, .pages span{
    min-width: .46rem; height: .46rem; line-height: .46rem; font-size: .24rem; margin: 0 .08rem;
  }
}
@media (max-width: 375px) {
  .news-item ul li:last-child{
    margin-bottom: 0;
  }
}