@charset 'utf-8';

.news{padding-bottom: 50px;}
.news .list{margin-bottom: 20px; border: solid #e5e5e5 1px; padding: 20px;}
.news .list::after{content: ''; display: table; clear: both;}
.news .list .picture{width: 230px; float: left; overflow: hidden;}
.news .list .picture img{width: 100%; height: auto; transition: all 0.5s;}
.news .list .picture:hover img{transform: scale(1.1);}
.news .list .content{width: calc(100% - 260px); float: right;}
.news .list .title{font-size: 18px; line-height: 28px;}
.news .list .title a{max-height: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.news .list .date{color: #666; margin-top: 10px;}
.news .list .text{font-size: 16px; line-height: 26px; color: #555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; margin-top: 10px;}
.news .list .button{margin-top: 20px;}
.news .list .button a{display: inline-block; line-height: 32px; padding: 0 20px; border: solid #353535 1px; border-radius: 6px; transition: all 0.5s;}
.news .list .button a:hover{background: #353535; color: #fff;}

@media (max-width:960px) {
	.news{padding: 0 10px 30px;}
	.news .list{padding: 10px;}
	.news .list .picture{width: 100%;}
	.news .list .content{width: 100%; margin-top: 20px;}
	.news .list .title{font-size: 16px; line-height: 24px;}
	.news .list .title a{height: 48px;}
	.news .list .text{font-size: 14px; margin-top: 10px; line-height: 24px;}
	.news .list .button{margin-top: 10px;}
	.news .list .button a{line-height: 28px; padding: 0 18px; font-size: 12px; border-radius: 5px;}
}