.newslist{}
.newslist .news-banner{padding:400px 120px 90px;box-sizing: border-box;background: url("../images/newslist.jpg") no-repeat center;background-size: cover}
.newslist .news-banner h4{font-size: 32px;color: #181818;font-weight: normal;}
.newslist .news-banner p{font-size: 14px;color: #555555;padding-top: 54px;}


.newslist .news-list-cont{padding:60px 120px;box-sizing: border-box}

.newslist .news-list li{float: left;width:32%;margin-right: 2%;margin-bottom: 60px;}
.newslist .news-list li:nth-child(3n){margin-right: 0}


.newslist .news-list .news-navs{height: 580px;background: url("../images/newsnavbg.jpg") no-repeat center;background-size: cover}
.newslist .news-list .news-navs dl{padding-top: 75px;padding-left: 65px;box-sizing: border-box}
.newslist .news-list .news-navs dl dd{padding:20px 0;}
.newslist .news-list .news-navs dl a{display: block;position: relative;padding-left: 20px;font-size: 22px;color: #fff;transition: .3s;}
.newslist .news-list .news-navs dl a:before{content: "";display: block;width: 7px;height: 7px;border-radius: 50%;border: 2px solid #ff3333;position: absolute;top:50%;left: 0;transform: translateY(-50%);opacity: 0;transition: .3s;}
.newslist .news-list .news-navs dl a:hover{color: #ff3333}
.newslist .news-list .news-navs dl a:hover:before{opacity: 1}
.newslist .news-list .news-navs dl a.act{color: #ff3333}
.newslist .news-list .news-navs dl a.act:before{opacity: 1}

.newslist .news-list li a{display: block}
.newslist .news-list-bg{overflow: hidden;position: relative}
.newslist .news-list-bg:after{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,.5);content: '';transition: transform .6s;transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-130%,0);}
.newslist .news-list li:hover .news-list-bg:after{transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,130%,0);}
.newslist .news-list-pic{background: url("../images/zxgg.jpg") no-repeat center;background-size: cover;height: 300px;transition: .6s;}
.newslist .news-list li:hover .news-list-pic{transform: scale(1.1)}
.newslist .news-list-info{padding:0 30px;box-sizing: border-box;border: 1px solid #eeeeee;}
.newslist .news-list-info h3{padding:30px 0;line-height: 30px;color: #888888;font-family: 'myfont';border-bottom: 1px solid #eeeeee;transition: .3s;}
.newslist .news-list-info h3 i{float: left;font-size: 24px;}
.newslist .news-list-info h3 span{float: right;font-size: 18px;}
.newslist .news-list-info div{padding:25px 0;}
.newslist .news-list-info div h1{font-size: 18px;color: #181818;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-bottom: 25px;transition: .3s;}
.newslist .news-list-info div p{font-size: 14px;color: #555555;line-height: 24px;height:48px;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;}
.newslist .news-list-info div span{display: block;text-align: right;font-size: 12px;color: #cccccc;font-weight: bold;font-family: 'myfont';margin-top: 25px;padding-right: 40px;line-height: 20px;position: relative;transition: .3s;}
.newslist .news-list-info div span i{position: absolute;height: 2px;width: 26px;background: #cccccc;right:5px;top:50%;transform: translateY(-50%);transition: .3s;}
.newslist .news-list-info div span i:after{content: "";width:0;height:0;border-width:5px 0 5px 5px;border-style:solid;border-color:transparent transparent transparent #cccccc;position: absolute;right:0;top:50%;transform: translateY(-50%);transition: .3s;}
.newslist .news-list li:hover .news-list-info h3{color: #181818}
.newslist .news-list li:hover .news-list-info div h1{color: #0052d9}
.newslist .news-list li:hover .news-list-info div span{color: #0052d9}
.newslist .news-list li:hover .news-list-info div span i{background: #0052d9}
.newslist .news-list li:hover .news-list-info div span i:after{border-color:transparent transparent transparent #0052d9;}

.casefenye{}
.casefenye a,.casefenye span{display: inline-block;padding:3px 10px;font-size: 14px;border: 1px solid #ccc;margin-right: 3px;transition: .3s;margin-bottom: 10px;}
.casefenye span{color: #fff;border-color: #0052d9;background: #0052d9}
.casefenye a:hover{color: #fff;border-color: #0052d9;background: #0052d9}

@media screen and (max-width: 1570px){
    .newslist .news-banner{  padding: 400px 90px 60px;}
    .newslist .news-list-cont{padding:60px 90px;}
    .newslist .news-list-pic{height: 240px;}
    .newslist .news-list .news-navs{height: 525px;}
}

@media screen and (max-width: 1400px){
    .newslist .news-banner{  padding: 400px 60px 40px;}
    .newslist .news-list-cont{padding:60px;}
}

@media screen and (max-width: 1270px){
    .newslist .news-list .news-navs{width: 100%;margin-right: 0;height: auto}
    .newslist .news-list .news-navs dl{padding:60px 40px 80px;}

    .newslist .news-list .news-navs dl dd{float: left;padding:10px 15px;}

    .newslist .news-list li{margin-right:0;width: 48%;}
    .newslist .news-list li:nth-child(2n+1){float: right}
}

@media screen and (max-width: 1023px){
    .newslist .news-list .news-navs dl a{font-size: 18px;}
    .newslist .news-list li{margin-bottom: 40px;}
    .newslist .news-list-pic{height: 200px;}
    .newslist .news-list-info{padding:0 20px;}
    .newslist .news-list-info div h1{padding-bottom: 15px;font-size: 16px;}
    .newslist .news-list-info h3{padding:15px 0;}
    .newslist .news-list-info div{padding:15px 0;}
    .newslist .news-list-info div span{margin-top: 15px;}

}
@media screen and (max-width: 767px){
    .newslist .news-banner{padding: 200px 20px 30px}
    .newslist .news-banner p{padding-top: 34px;}
    .newslist .news-list-cont{padding:40px 20px;}
    .newslist .news-list .news-navs dl{padding:40px 20px;}
    .newslist .news-list .news-navs dl dd{padding:5px 10px;}
    .newslist .news-list .news-navs dl a{font-size: 12px;}
    .newslist .news-list li{width: 100%;margin-bottom: 35px;}
}
.pager {text-align: center; margin: 20px 0;}
.pager ul {display: flex; flex-wrap: wrap; justify-content: center}
.pager ul li {display: inline-block;}
.pager ul li a {padding: 5px 15px; margin: 15px 5px; border: #dddddd solid 1px; display: inline-block;}
.pager ul li a:hover {border: #3ea8e2 solid 1px; color: #3ea8e2}
.pager ul .active a {border: #3ea8e2 solid 1px; display: inline-block; background-color: #2669ec; color: #fff;}
.pager ul a:not([href]):not([class]):hover {border: #dddddd solid 1px;}
.pager ul .active a:hover {color: #fff; border: #3ea8e2 solid 1px !important;}