#newslist { margin: 50px 0 20px; position: relative; z-index: 2; }
#newslist ul li { float: left; width: calc(100%/3); }
#newslist .border { margin: 18px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; }
#newslist .border .photo { width: 100%; }
#newslist .border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #e4dde1; position: relative; }
#newslist .border .photo a img { width: 100%; }
#newslist .border .photo .news-bottom { position: absolute; top: 0; left: 0; color: #fff; background: rgba(157, 157, 157, 0.76); width: 100%; height: 100%; transition: all linear .3s; opacity: 0; }
#newslist .border .photo .news-bottom .info, .news-date { position: absolute; width: 50px; left: calc(50% - 56px); top: calc(50% - 52px); border: 1px solid #fff; padding: 20px 30px; }
#newslist .border .photo .news-bottom .info p, .news-date p { text-align: center; font-family: 'Lusitana', serif; font-size: 15px; }
#newslist .border .photo .news-bottom .info p.year, .news-date p.year { font-size: 24px; }
#newslist .border .photo .news-bottom .info span, .news-date span { display: block; width: 30%; height: 1px; background: #fff; margin: 6px auto 10px; }
#newslist ul li .news-info { width: 100%; overflow: hidden; margin-top: 20px; }
#newslist .border .news-info h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; margin: 13px 0; float: right; width: calc(100% - 85px); }
#newslist .border .news-info h3 a { color: #4b4b4b; font-size: 18px; }
#newslist .border .news-info p { color: #727272; font-size: 15px; line-height: 20px; overflow: hidden; height: 40px; margin: 0 20px; width: calc(100% - 40px); }
#newslist .border .news-info p.describe { clear: both; padding-top: 10px; margin: 0; width: 100%; text-align: center; }
#newslist .news-date { position: initial; left: 0; top: 0; border: 0; padding: 0; float: left; width: 72px; }
#newslist .border .news-info .news-date p { height: 20px; margin: 0; width: auto; }
#newslist .news-date p.year { margin: 10px 20px; height: 18px; }
#newslist .news-date span { background: #c65a8e; width: 100%; }
.article-info { margin-bottom: 30px; }

@media screen and (min-width: 1025px) {
	#newslist .border .photo:hover .news-bottom { opacity: 1; }
	#newslist .border .photo .news-bottom .info { transition: linear all .3s; transform: scale(0.8); }
	#newslist .border .photo:hover .news-bottom .info { transform: scale(1); }
}
@media screen and (max-width: 1280px) {
	#newslist ul li { width: 50%; }
}
@media screen and (max-width: 640px) {
	#newslist .border { margin: 10px; }
	#newslist .news-date { width: 100%; overflow: hidden; }
	#newslist .border .news-info h3 { width: 100%; margin: 5px 0 0; }
	#newslist .border .news-info p.describe { padding: 0; text-align: left; }
	#newslist .border .news-info .news-date p { float: left; }
	#newslist ul li .news-info { margin-top: 10px; }
	#newslist .news-date span { width: 1px; height: 15px; margin: 2px 10px 0; float: left; }
	#newslist { margin: 0 0 20px; }
}