.list{width: 100%; background: #f9f9f9; padding: 30px 0 60px 0; font-size: 16px;}
.list-content{width: 1204px; margin: 0 auto; background: #fff; font-size: 0;}
.list-header{position: relative; margin-bottom: -60px; position: relative; top: -60px; z-index: 900; width: 1144x; font-size: 16px;}
.list-header-l{display: inline-block; line-height: 60px;}
.list-header-l a{display: inline-block; width: 130px; text-align: center; font-weight: bold; color: #333333;}
.list-hd-span{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; opacity: .6; z-index: -1;}
.position{width: 100%; line-height: 30px; font-size: 14px; text-align: center; color: #777; background: #f3f3f3;}
.position p{display: inline-block; padding: 0 10px 0 10px;}
.list-left{float: right;}
.lihd-content{width: 1200px; margin: 0 auto;}

.list-con{vertical-align: top;width: 319px; height: 390px; display: inline-block; margin-left: 30px; margin-top: 30px; padding: 30px; border: 1px solid #ddd; transition: all .5s ease;} 
.list-content a:nth-child(3n+ 1) .list-con{margin-left: 0;}
.list-con h3{font-size: 20px; color: #333;}
.list-con span{font-size: 14px; line-height: 40px; color: #666}
.list-con .message{display: block; font-size: 14px; overflow: hidden; padding-top: 20px; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 30px; color: #666666;}
.list-img{position: relative; width: 325px; height: 210px;}
.list-img img{position: absolute; width: 100%; height: 100%;}
.list-con:hover{background-color: #119977;}
.list-con:hover *{color: #fff;}
.list-con *{transition: all .5s ease;}