@charset 'utf-8';

.news{padding: 50px 0;}
.news .list{width: 23.5%; float: left; margin: 0 2% 40px 0; border-radius: 10px; box-shadow: 0 0 5px 5px #f2f2f2; overflow: hidden;}
.news .list:nth-child(4n){margin-right: 0;}
.news .list .picture{overflow: hidden; display: grid; place-items: center;}
.news .list .picture img{width: 100%; max-width: 100%; max-height: 100%; transition: all 0.5s;}
.news .list:hover .picture img{transform: scale(1.1);}
.news .list .content{padding: 20px 20px 30px; background: #fff;}
.news .list .content::after{content: ''; display: table; clear: both;}
.news .list .title{overflow: hidden;}
.news .list .title a{font-size: 20px; height: 60px; line-height: 30px; color: #000; font-family: 'Avanti-Bold'; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.news .list .title a:hover{color: #117fca;}
.news .list .text{font-size: 16px;line-height: 24px; color: #606060; margin-top: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; text-overflow: ellipsis;}
.news .list .date{float: right; margin-top: 20px;}
.news .list .button{float: left; margin-top: 20px;}

@media (max-width:960px) {
	.news{padding: 10px 15px 30px;}
	.news .list{width: 100%; margin-right: 0; margin-top: 20px; border-radius: 10px; overflow: hidden;}
	.news .list .picture{height: 130px; overflow: hidden;}
	.news .list .content{padding: 10px; background: #fff;}
	.news .list .title a{font-size: 16px; height: auto; line-height: 26px;}
	.news .list .text{font-size: 14px; line-height: 22px; margin-top: 15px; -webkit-line-clamp: 5;}
	.news .list .date{margin-top: 15px;}
	.news .list .button{margin-top: 15px;}
}