.case{padding: 0 0 60px 0;background-color: #f6f6f6;}
.case .page-nav .page-nav-ul li{width: 16.66%;}
.case .loc{width: 40%;}
.case .page-nav .page-nav-ul{width: 60%;}
.case .case-list{padding: 30px 0;flex-wrap: wrap;}
.case .case-list .item{width:23.5%;margin-right: 2%;margin-bottom: 2%}
.case .case-list .item:nth-child(4n){margin-right: 0;}
.case .case-list .item a{display: block;position: relative;}
.case .case-list .item a .img{width: 100%;overflow: hidden;height: 200px;position: relative;}
.case .case-list .item a .img img{width: 100%;}
.case .case-list .item a .img span{transition: all 0.5s;-webkit-transition: all 0.5s;position:absolute;left:-100px;top:0;width:0;height: 100%;background-color: rgba(0,0,0,0.5);font-size:18px;text-transform: uppercase;color: #fff;line-height: 25px;padding:80px 10px;text-align: center}
.case .case-list .item a .img span i{font-size: 3rem;margin-right: 10px;position: relative;top:4px;}
.case .case-list .item a:hover .img img{
    transition: 2s cubic-bezier(0.28, 0, 0.12, 1);
    -webkit-transform: scale3d(1.12, 1.12, 1);
    transform: scale3d(1.12, 1.12, 1)
}
.case .case-list .item a:hover .img span{width: 100%;left: 0;}
.case .case-list .item a .info{padding:20px;background-color: #fff;}
.case .case-list .item a .info h4{font-size: 20px;color: #666;margin-bottom: 5px;border-bottom: 1px solid #eee;padding-bottom: 5px;}
.case .case-list .item a .info p{font-size: 14px;color: #999;line-height: 25px;font-weight: 400;}
.case .case-list .item a .info p i{font-size: 2rem;color: #d71718;margin-right: 5px;}
.showcase{margin-top: 100px;background-color: #f6f6f6;}
.showcase .loc{width: 50%;line-height: 40px;}
.showcase .page-back{width: 50%;}
.showcase .sub-right h4{font-size:18px;font-weight: 500;color: #fff;background-color: #222;padding: 12px 20px;}
.showcase .sub-right i{font-size: 2.2rem;color: #d71718;}
.showcase .sub-right span{text-transform: uppercase;font-family: "DINPro-Regular";margin-left: 10px;font-weight: 500;}
.case-hot{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #fff;padding:20px;
}
.case-hot li{width: 46%;margin-right: 4%;}
.case-hot li:nth-child(2n){margin-right: 0;}
.case-hot li a{display: block;overflow: hidden;}
.case-hot li a img{width: 100%;}
.case-hot li a span{display: block;padding: 5px 0;font-size: 14px;color: #888;line-height: 22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.case-hot li a:hover span{color:#d71718; }
.case-hot li a:hover img{
    transition: 2s cubic-bezier(0.28, 0, 0.12, 1);
    -webkit-transform: scale3d(1.12, 1.12, 1);
    transform: scale3d(1.12, 1.12, 1)
}

@media (max-width: 1280px) {
    .case{padding: 0 0 50px 0;}
    .case .case-list{padding: 30px 0;}
    .case .case-list .item a .img img{width: 100%;}
    .case .case-more{width: 200px;line-height: 50px;font-size: 14px;}
}
@media (max-width: 992px) {
    .case{padding:0 0 10px 0;background-color: #fff;}
    .case .page-nav{flex-wrap: wrap;width: 100%;border: none;padding: 0;}
    .case .page-nav .page-nav-ul{flex-wrap: wrap;width: 100%;border-left: none;}
    .case .page-nav .page-nav-ul li{width: 33.33%;border-right: none;position: relative;margin-bottom:10px;}
    .case .page-nav .page-nav-ul li a{position: relative;}
    .case .page-nav .page-nav-ul li a:after{content: '';width: 1px;height: 22px;background-color: #ddd;position: absolute;right: 0;top:50%;margin-top: -11px;}
    .case .page-nav .page-nav-ul li:nth-child(3n) a:after{display: none;}
    .case .page-nav-ul li a.cur:after{display: none;}
    .case .loc{width: 100%;padding: 0;}
    .case .case-list{padding:20px 0 0 0;flex-wrap: wrap;}
    .case .case-list .item{width:49%;margin-right: 2%;margin-bottom: 2%;}
    .case .case-list .item:nth-child(2n){margin-right: 0;}
    .case .case-list .item a .img{height:auto;}
    .case .case-list .item a .img span{font-size:1.4rem;line-height:1.8rem;padding:50px 10px;}
    .case .case-list .item a .img span i{font-size: 2rem;top:2px;}
    .case .case-list .item a .info{padding:10px 0;}
    .case .case-list .item a .info h4{font-size: 1.4rem;font-weight: 500;}
    .case .case-list .item a .info p{font-size: 1.1rem;line-height:1.8rem;}
    .case .case-list .item a .info p i{font-size: 1.3rem;}
    .case .case-more{width:60%;line-height: 30px;font-size: 1.2rem;}
    .showcase{margin-top: 70px;}
    .showcase .loc{width: 60%;line-height: 40px;padding: 0;margin-bottom: 10px;order: 1;}
    .showcase .page-back{width: 40%;padding: 0; -webkit-justify-content: flex-end;justify-content: flex-end;order: 2}
    .showcase .sub-right h4{font-size:1.6rem;padding: 10px 20px;}
    .showcase .sub-right i{font-size: 2rem;}
    .case-hot{padding:15px;}
    .case-hot li{width: 48.5%;margin-right: 3%;}
    .case-hot li a span{font-size: 1.2rem;line-height: 2rem;padding: 5px 0;}
}