#newslist{}
#newslist ul{overflow:hidden}
#newslist li{float:left;width:calc(100% / 2)}
#newslist li .border{margin:10px;position:relative;overflow:hidden}
#newslist li .border .photo{}
#newslist li .border .photo a{display:block;background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#newslist li .border .photo a img{width:100%}
#newslist li .border .news-info{position:absolute;bottom:0;width:calc(100% - 40px);left:0;padding:30px 20px;background:linear-gradient(to top,hsl(0deg 0% 12% / 80%) 0%,rgb(125 232 188 / 0%) 100%);transition:all linear 0.3s}
#newslist li .border .news-info p{text-align:center;display:none}
#newslist li .border .news-info p b{display:inline-block;width:50px;height:50px;background:#fff;border-radius:50%;color:#333e51;line-height:45px;font-size:20px}
#newslist li .border .news-info h3{text-align:center;margin:20px 0 7px}
#newslist li .border .news-info h3 a{color:#fff;font-size:24px;text-shadow:0 0 5px #2e514d}
#newslist li .border .news-bottom{text-align:center;display:none}
#newslist li .border .news-bottom h4{text-align:center}
#newslist li .border .news-bottom h4 a{color:#eeba2b;font-size:16px}

@media screen and (min-width:1025px){
	#newslist li:hover .border .news-info{padding:30px 20px 60px}
}
@media screen and (max-width:640px){
	#newslist li .border .news-info p b{width:40px;height:40px;line-height:38px;font-size:15px}
	#newslist li .border .news-info h3 a{font-size:20px}
	#newslist li .border .news-bottom h4 a{font-size:14px}
	}@media screen and (max-width:480px){#newslist li{width:100%}
	#newslist li .border{margin:10px 20px}
}