@import url('https://fonts.googleapis.com/css?family=Chakra+Petch');

.blind:after { display: none; }

#newslist li .border { margin: 0 0px 50px; }
#newslist li .border .photo { position: relative; }
#newslist li .border .photo a { display: block; background-repeat: no-repeat; background-position: 50% 50%; background-size: auto 110%; transition: all linear .3s; background-color: #dbdbdb; }
#newslist li .border .photo img { width: 100%; }
#newslist li .border .photo p { position: absolute; left: 0; top: 0; z-index: 1; background: rgba(0, 0, 0, 0.84); color: #fff; padding: 7px 20px; font-size: 15px; }
#newslist li .border .news-info a { display: block; overflow: hidden; padding: 15px; }
#newslist li .border .news-info .news-bottom { float: left; width: calc(100% - 40px); }
#newslist li .border .news-info .news-bottom p { font-family: 'Chakra Petch', sans-serif; font-size: 14px; color: #2a91c9; line-height: 120%; }
#newslist li .border .news-info .news-bottom h3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #2d2a2a; font-size: 17px; font-weight: normal; }
#newslist li .border .news-info .more { float: right; }
#newslist li .border .news-info .more p { display: block; width: 20px; position: relative; height: 44px; }
#newslist li .border .news-info .more p span { display: block; width: 15px; height: 2px; background: #222; position: absolute; transition: all linear .3s; }
#newslist li .border .news-info .more p span:nth-child(1) { transform: rotate(45deg) translate(10px, 3px); top: 5px; right: 10px; }
#newslist li .border .news-info .more p span:nth-child(2) { width: 0; right: 7px; top: 19px; }
#newslist li .border .news-info .more p span:nth-child(3) { transform: rotate(-45deg) translate(-10px, 17px); top: 5px; right: 10px; }

/**/
.main-article #describe { border: 1px solid #dbdbdb; padding: 50px; border-top: 0; }
.main-article.blind #describe { border: 0; }
#describe .newsTitle-set { font-size: 22px; padding: 0 15px 15px; border-bottom: 1px solid #dbdbdb; margin-bottom: 25px; }
#describe .article-info ul { background: #263d49; margin-bottom: 25px; }
#describe .article-info li { display: inline-block; vertical-align: top; color: #fff; font-size: 14px; width: calc((100% / 3) - 34px); padding: 5px 15px; margin-right: -4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#describe .article-info li:nth-child(1) { background: #0583c9; }
#describe .article-info li:nth-child(2) { background: #2a91c9; }
#describe .article-info li b { font-weight: normal; }
#describe .article-info li a { color: #fff; }

@media screen and (min-width: 1025px) {
	#newslist li .border:hover .news-info .more p span:nth-child(1) { right: 5px; }
	#newslist li .border:hover .news-info .more p span:nth-child(2) { right: 2px; width: 20px; }
	#newslist li .border:hover .news-info .more p span:nth-child(3) { right: 5px; }
	#newslist li .border:hover .photo a { background-size: auto 100%; }
	#newslist li { float: left; width: calc((100% / 3) - 35px); margin-right: 50px; }
	#newslist li:nth-child(3n) { margin-right: 0; }
}
@media screen and (max-width: 1024px) {
	#newslist li { float: left; width: calc((100% / 2) - 25px); margin-right: 50px; }
	#newslist li:nth-child(2n) { margin-right: 0; }
}
@media screen and (max-width: 768px) {
	#newslist li { width: calc((100% / 2) - 15px); margin-right: 30px; }
	#newslist li .border .news-info .news-bottom h3 { font-size: 15px; }
	#newslist li .border { margin: 0 0px 5px; }
	#describe .article-info li { width: calc(100% - 30px); margin: 0; font-size: 12px; padding: 2px 15px; }
	.main-article #describe { padding: 20px 10px; }
	#describe .newsTitle-set { margin-bottom: 5px; }
}
@media screen and (max-width: 480px) {
	#newslist li { width: calc((100% / 2) - 5px); margin-right: 10px; }
	#newslist li .border .news-info a { padding: 10px 0 15px; }
	#newslist li .border .photo p { padding: 5px 15px; font-size: 12px; }
	#newslist li .border .news-info .news-bottom { width: calc(100% - 25px); }
}