.blogPageList{
  display: flex;
  flex-wrap: wrap;
}
.blogPageList .blogItem {
  position: relative;
  flex: 0 0 468px;
  width: 468px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.blogPageList .blogItem:nth-child(2n){
  margin-right: 0;
}
.blogItem .blogImg {
  margin-bottom: 20px;
}
.blogItem .blogContect {
  width: 100%;
}
.blogItem .blogImg img{
  width: 468px;
  height: 299px;
  object-fit: cover;
}
.blogItem .blogContect .blogTitle{
  line-height: 30px;
  font-size: 20px;
  font-weight: bold;
  color: var(--balckColor);
  margin-bottom: 8px;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.blogItem .blogContect .blogTitle a{
  color: var(--balckColor);
}
.blogItem .blogContect .blogTitle a:hover{
  color: var(--button);
}
.blogItem .blogContect .blogTime{
  font-size: 14px;
  font-weight: 400;
  color: #555555;
  line-height: 21px;
  margin-bottom: 14px;
}
.blogItem .blogContect .blogDesc{
  font-size: 14px;
  font-weight: 400;
  color: #555555;
  line-height: 21px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}
.blogItem .blogContect .blogBtn{
  font-size: 14px;
  font-weight: 500;
  color: var(--button);
  line-height: 17px;
  width: max-content;
}
.blogPagination {
  margin-bottom: 50px;
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .blogPageList .blogItem {
    position: relative;
    flex: 0 0 421px;
    width: 421px;
  }
  .blogItem .blogImg img{
    width: 421px;
    height: 269px;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .blogPageList .blogItem {
    position: relative;
    flex: 0 0 346px;
    width: 346px;
  }
  .blogItem .blogImg img{
    width: 346px;
    height: 233px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .blogPageList .blogItem {
    position: relative;
    flex: 0 0 365px;
    width: 365px;
  }
  .blogItem .blogImg img{
    width: 365px;
    height: 221px;
  }
}
@media (max-width: 767px) {
  .blogPageList .blogItem {
    position: relative;
    flex: 0 0 calc(100vw - 30px);
    width: calc(100vw - 30px);
    margin-right: 0;
  }
  .blogItem .blogImg img{
    width: calc(100vw - 30px);
    height: calc(63.93vw - 19.18px);
  }
}