#newsList ul {font-size: 0;margin-top: 80px;}
#newsList ul li {width: calc((100%/3) - 35px);display: inline-block;margin: 0 15px;position: relative;}
#newsList ul li a { position: absolute; width: 100%; height: 100%; z-index: 9; top: 0; left: 0;}
#newsList ul li .img { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; overflow: hidden; position: relative;}
#newsList ul li .img:before { content: ''; position: absolute; bottom: 40px; left: 0; background: #cbbc9d; width: 90px; height: 1px; z-index: 3;}
#newsList ul li .img:after { content: ''; position: absolute; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(202, 202, 202, 0) 24%, #000000 88%, #000000 100%); opacity: .75; top: 0; left: 0; width: 100%; height: 100%;}
#newsList ul li:hover .img:after { background: #232323; opacity: 1;}
#newsList ul li .img img { width: 100%;}
#newsList ul li .info  { position: absolute; bottom: 40px; padding: 40px;}
#newsList ul li .info p  {color: #fff;font-size: 14px;}
#newsList ul li .info p font {font-family: 'Rubik', sans-serif;color: #fff;vertical-align: baseline;margin-right: 10px;}
#newsList ul li .info h3  { margin-top: 10px; height: 110px; font-weight: bold; font-size: 24px; color: #fff; -webkit-line-clamp: 3; line-height: 150%; overflow: hidden; }
#newsList ul li .info article {
 transition: .3s ease;
 color: #cccccc;
 display: none;
 font-size: 14px;
 text-align: justify;
 overflow: hidden;
 height: 85px;
 margin-top: 10px;
 line-height: 200%;
}
#newsList ul li:hover .info article {
 display: block;
}

@media screen and (min-width:1281px) {
	#newsList ul li:hover .img a.photo img { background: rgba(32, 32, 32, .75); }
}
@media screen and (max-width:1024px) {
    #newsList ul li{width: calc(50% - 35px);margin: 15px;}
}
@media screen and (max-width:980px) {
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:500px) {
	#newsList ul li {width: calc(100% - 35px);}
}