@charset 'utf-8';

.news{padding: 50px 0;}
.news .list{margin: 30px 0; box-sizing: border-box; padding: 20px; box-shadow: 0 0 10px #eee; border-radius: 8px;}
.news .list::after{content: ''; display: table; clear: both;}
.news .list .picture{width: 240px; float: left; overflow: hidden; border-radius: 8px;}
.news .list .picture img{width: 100%; height: auto; transition: all 0.5s;}
.news .list:hover .picture img{transform: scale(1.1);}
.news .list .content{width: calc(100% - 280px); float: right;}
.news .list .title{font-size: 20px; line-height: 32px;}
.news .list .title a{font-weight: bold; color: #121212;}
.news .list:hover .title a{color: #bea064;}
.news .list .date{font-size: 12px; color: #666; margin-top: 10px;}
.news .list .text{font-size: 14px; color: #333; line-height: 22px; height: 88px; 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: 42px; padding: 0 20px; font-size: 14px; color: #444; border: solid #d6d6d6 1px; border-radius: 8px; transition: all 0.5s;}
.news .list:hover .button a{background: #bea064; border-color: #bea064; color: #fff;}

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