.subcenter{ width: 90%; margin: 0 auto; position: relative; padding: 30px 0; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ } .subcenter:after, .newclist:after{ content: ""; display: block; height: 0; clear: both; visibility: hidden; } .newclist{ width: 100%; position: relative; } .newclist li{ width: 100%; height: 245px; position: relative; padding: 0 0 0 425px; overflow: hidden; /* -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; */ margin-bottom: 30px; } .newclist li div.img{ position: absolute; left: 0; top: 0; width: 425px; height: 245px; overflow: hidden; } .newclist li div.img img{ display: block; width: 100%; min-height: 100%; overflow: hidden; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .newclist li div.word{ width: 90%; margin: 0 auto; padding: 30px 0; height: inherit; } .newclist li div.word h1{ font-size: 18px; color: #333333; font-weight: normal; width: 100%; padding: 0 5% 0 0; line-height: 1.5em; height: 1.5em; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; position: relative; -webkit-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; transition: all .3s ease-in-out 0s; } .newclist li div.word h1 i{ display: block; position: absolute; width: 10px; height: 19px; right: 0; top: 50%; margin-top: -9.5px; background-image: url(../images/a23.png); background-position: center; background-repeat: no-repeat; background-size: 10px 19px; -webkit-background-size: 10px 19px; } .newclist li div.word span{ display: block; font-size: 16px; color: #999999; margin: 15px 0 25px 0; } .newclist li div.word b{ display: inline-block; background: #cc0000; color: #fff; padding: 0 5px; margin: 0 0 0 10px; font-weight: normal; } .newclist li div.word p{ font-size: 16px; color: #666666; width: 100%; line-height: 2em; height: 4em; overflow : hidden; text-overflow: ellipsis; -o-text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .newclist li div.word em{ display: block; text-align: right; font-style: normal; color: #999; margin: 0.5em 0 0 0; font-size: 14px; } .newclist li:hover{ background: #f4f4f4; } .newclist li:hover div.word h1{ color: #bd2315; } .newclist li:hover div.img img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } /*pc*/ @media screen and (max-width: 960px){ .subcenter{ width: 96%; } .newclist li{ padding: 0 0 0 330px; height: 190px; } .newclist li div.img{ width: 330px; height: 190px; } .newclist li div.word{ padding: 20px 0 10px 0; } .newclist li div.word span{ margin: 10px 0 20px 0; } }