#news {
 float: left;
 width: 100%;
 padding: 40px 0;
}

.news_box,
.news_box * {
 -webkit-transition: 0.4s ease-in-out;
 -moz-transition: 0.4s ease-in-out;
 -o-transition: 0.4s ease-in-out;
 transition: 0.4s ease-in-out;
}

.news_box {
 position: relative;
 float: left;
 width: 23.5%;
 margin: 0 2% 2% 0;
 line-height: 1.2;
 overflow: hidden;
}

.news_box:nth-child(4n) {
 margin: 0 0 2% 0;
}

.news_box>a:nth-child(1) {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 font-size: 0;
 z-index: 5;
}

.news_box .image {
 position: relative;
 float: left;
 width: 100%;
 height: 200px;
 border-radius: 12px 12px 0 0;
 background-color: #ccc;
 overflow: hidden;
}

.news_box .image>a {
 display: flex;
 width: 100%;
 height: 100%;
}

.news_box .image a>img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .8s ease;
}

.news_box:hover .image>a img {
 transform: scale(1.10);
}

.news_box .box_bottom {
 display: flex;
 flex-direction: column;
 float: left;
 width: 100%;
 padding: 18px 22px;
 border: 2px solid #ccc;
 border-top: none;
 border-radius: 0 0 12px 12px;
 background-color: #fff;
}

.news_box .title {
 float: left;
 width: 100%;
 height: 53px;
 margin: 0 0 10px 0;
 overflow: hidden;
}

.news_box .title a,
.news_box .title a:link,
.news_box .title a:visited,
.news_box .title a:hover {
 font-weight: 900;
 font-size: 25px;
 font-style: italic;
 line-height: 1.05;
 color: #2c2c2c;
 text-transform: uppercase;
 text-decoration: none;
 transition: 0.2s ease-in-out;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}

.news_box .date {
 display: flex;
 align-items: center;
 float: left;
 width: 100%;
 font-size: 16px;
 line-height: 1.2;
 color: #333;
}

.news_box .date img {
 width: 16px;
 height: 16px;
 margin: -2px 6px 0 0;
}

.news_box .text {
 float: left;
 width: 100%;
 max-height: 39px;
 margin: 3px 0 0 0;
 font-size: 15px;
 line-height: 1.3;
 color: #333;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 transition: 0.2s ease-in-out;
 overflow: hidden;
}

.news_box .basic_btn {
 display: flex;
 justify-content: center;
 align-items: center;
 align-self: flex-end;
 float: left;
 padding: 9px 19px 9px 27px;
 margin: 10px 0 0 0;
 font-size: 16px;
 border: 2px solid #ccc;
 background-color: #fff;
}

.news_box:hover .basic_btn {
 border: 2px solid #d0dd3c;
 background-color: #d0dd3c;
}

.news_box .basic_btn img {
 width: 6px;
 height: 11px;
 margin: 0 0 0 9px;
}

@media screen and (max-width: 1200px) {
 #news {
  padding: 37px 0;
 }
 .news_box,
 .news_box:nth-child(4n) {
  width: 32%;
  margin: 0 2% 2% 0;
 }
 .news_box:nth-child(3n) {
  margin: 0 0 2% 0;
 }
 .news_box .basic_btn {
  padding: 8px 16px 8px 22px;
  margin: 10px 0 0 0;
  font-size: 16px;
 }
 .news_box .basic_btn img {
  width: 5px;
  height: 10px;
  margin: 0 0 0 7px;
 }
}

@media screen and (max-width: 1050px) {
 #news {
  padding: 34px 0;
 }
 .news_box .title {
  height: 51px;
 }
 .news_box .title a,
 .news_box .title a:link,
 .news_box .title a:visited,
 .news_box .title a:hover {
  font-size: 24px;
 }
}

@media screen and (max-width: 950px) {
 #news {
  padding: 30px 0;
 }
 .news_box .image {
  height: 180px;
 }
 .news_box .box_bottom {
  padding: 16px 20px;
 }
 .news_box .title {
  height: 49px;
 }
 .news_box .title a,
 .news_box .title a:link,
 .news_box .title a:visited,
 .news_box .title a:hover {
  font-size: 23px;
 }
 .news_box .basic_btn {
  padding: 7px 14px 7px 18px;
  margin: 8px 0 0 0;
  font-size: 15px;
 }
}

@media screen and (max-width: 850px) {
 .news_box,
 .news_box:nth-child(3n),
 .news_box:nth-child(4n) {
  width: 48.75%;
  margin: 0 2.5% 2.5% 0;
 }
 .news_box:nth-child(2n) {
  margin: 0 0 2.5% 0;
 }
}

@media screen and (max-width: 750px) {
 #news {
  padding: 27px 0;
 }
 .news_box .image {
  height: 160px;
 }
 .news_box .box_bottom {
  padding: 14px 18px;
 }
 .news_box .title {
  height: 46px;
 }
 .news_box .title a,
 .news_box .title a:link,
 .news_box .title a:visited,
 .news_box .title a:hover {
  font-size: 21px;
 }
 .news_box .basic_btn {
  padding: 5px 12px 6px 16px;
  margin: 8px 0 0 0;
  font-size: 14px;
 }
}

@media screen and (max-width: 650px) {
 #news {
  padding: 24px 0;
 }
 .news_box .image {
  height: 150px;
 }
 .news_box .box_bottom {
  padding: 12px 16px;
 }
 .news_box .title {
  height: 57px;
 }
 .news_box .title a,
 .news_box .title a:link,
 .news_box .title a:visited,
 .news_box .title a:hover {
  font-size: 18px;
  -webkit-line-clamp: 3;
 }
}

@media screen and (max-width: 500px) {
 #news {
  padding: 21px 0;
 }
 .news_box .image {
  height: 130px;
 }
 .news_box .box_bottom {
  padding: 12px 14px;
 }
 .news_box .title {
  height: 54px;
 }
 .news_box .title a,
 .news_box .title a:link,
 .news_box .title a:visited,
 .news_box .title a:hover {
  font-size: 17px;
  -webkit-line-clamp: 3;
 }
}

@media screen and (max-width: 350px) {
 .news_box,
 .news_box:nth-child(2n),
 .news_box:nth-child(3n),
 .news_box:nth-child(4n) {
  width: 100%;
  margin: 0 0 3% 0;
 }
}








.news .paginator_container {
 float: left;
 width: 100%;
}

.news .paginator_container.top {
 margin: 5px 0 18px 0;
}

.news .paginator_container.bottom {
 margin: 15px 0 10px 0;
}

.news .paginator {
 float: left;
 width: 100%;
}

.news .paginator .paginator_pages {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 float: left;
 width: 100%;
}

.news .paginator .bullet {
 display: inline-block;
 width: 12px;
 height: 12px;
 margin: 0 4px 8px 4px;
 border-radius: 13px;
 border: 2px solid #9DA62D;
 background: transparent;
 -webkit-transition: 0.2s ease-in-out;
 -moz-transition: 0.2s ease-in-out;
 -o-transition: 0.2s ease-in-out;
 transition: 0.2s ease-in-out;
}

.news .paginator .bullet.active {
 width: 36px;
 background: #9DA62D;
 opacity: 1;
}


@media screen and (max-width:750px) {
 .news .paginator_container.top {
  margin: 5px 0 5px 0;
 }
}








.news_date {
 display: flex;
 align-items: center;
 float: left;
 width: 100%;
 margin: 0 0 12px 0;
 line-height: 1.2;
}

.news_date img {
 width: 20px;
 height: 20px;
 margin: -2px 8px 0 0;
}