@media only screen and (max-width: 640px){
    .list .banner{height: 74px;}
}
.list .item li{padding: 20px;border-bottom: 1px solid #e9e9e9;}
.list .item li:hover{box-shadow: 0 2px 8px #eee;}
.list .item li .left {width: 200px;}
.list .item li .left img{width: 100%;height: 100%;}
.list .item li .right {margin-left: 20px;position: relative;}
.list .item li .right .title{line-height: 24px;font-size: 16px;}
.list .item li .right .time{color: #999;margin-top: 20px;}
.list .item li .right .btn{ position:absolute; right: 0; bottom: 0; transition: all .3s; padding: 0 12px; line-height: 30px; border: 1px solid #c5c5c5; color: #777; font-weight: 400; font-size: 14px;border-radius: 4px;}
.list .item li .right .btn:hover{color: #fff;background-color: #309bff;border-color: #309bff;}
@media screen and (max-width: 600px) {
    .list .item li{padding: 20px 10px;}
    .list .item li .left {width: 100%;height: 100%;}
    .list .item li .right {margin-top: 10px;margin-left: 0;}
    .list .item .flex{flex-wrap: wrap;}
}

.list .pager{padding: 30px 0;}
.list .pager li{margin: 0 4px;}
.list .pager li a{ transition: all .3s; text-align: center; border-radius: 4px; border: 1px solid #cad3de; padding: 6px 12px; font-size: 16px;display: block; }
.list .pager li a:hover, .list .pager li a.active{color: #fff;background-color: #309bff;border-color: #309bff;}
.list .pager li a:hover > i, .list .pager li a.active > i{color: #fff;}
@media screen and (max-width: 600px) {
    .list .pager li { margin: 0 2px; }
    .list .pager li a{ font-size: 14px; padding: 4px 10px; }
}