.service{padding: 0 0 80px 0;}
.service .service-ul{}
.service .service-ul li{width: 200px;position: relative;overflow: hidden;}
.service .service-ul li a{display: block;}
.service .service-ul li a img{width:auto;max-width: 100%;}
.service .service-ul li a p{position: absolute;width: 100%;height: 50px;left: 0;top: 0;font-size: 18px;font-weight:500;color: #fff;padding: 30px;z-index:2;}
.service .service-ul li a p span{font-size: 14px;font-weight:500;color: #fff;display: block;padding-top: 5px;}
.service .service-ul li a:hover p{padding: 80px 30px;font-size: 20px;}
.service .service-ul 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);
}
.service .service-ul li a .bg{
    width: 100%;height: 100%;top: -200px;left: 0;background-color: rgba(0,0,0,0.4);
    position: absolute;
    z-index: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    opacity: 0;
    filter:alpha(opacity=0);
}
.service .service-ul li a .bg:hover{top:0;opacity: 1;filter:alpha(opacity=100);}
@media (max-width: 1280px) { }
@media (max-width: 992px) {
    .service{padding: 0 0 10px 0;background-color: #fff;}
    .service .service-ul{flex-wrap: wrap;}
    .service .service-ul li{width: 32%;margin-bottom: 2%;margin-right: 2%;}
    .service .service-ul li:nth-child(3n){margin-right: 0;}
    .service .service-ul li a img{width:100%;}
    .service .service-ul li a p{height: 50px;font-size: 1.6rem;padding:20px 10px;}
    .service .service-ul li a p span{font-size: 1.3rem;}
    .service .service-ul li a:hover p{padding: 40px 10px;font-size: 1.6rem;}
    .service .service-ul li a .bg{top: -100px;}

}