.listProduct{
    width:100%;
    height: auto;overflow: hidden;
    margin: 30px auto;
}
.listProduct li{
    width:23%;float: left;
    margin:20px 1%;
    box-shadow: 0 0 10px #ccc;
    padding-bottom: 20px;
    transition: all 0.5s;
}
.listProduct li:hover{
    background-color: #f1f1f1;
}
.listProduct li:hover h3 span{
    background-color:#57b6f6;
}
.listProduct li div{
    width:100%;
    height: 300px;overflow: hidden;
    position: relative;
}
.listProduct li div img{
    width:100%;
    position: absolute;
    height: 300px;
    top:0;
    left: 0;
    transition: all 0.5s;
}
.listProduct li:hover div img{
    width:130%;
    height: 130%;
    top:-15%;
    left: -15%;
}
    .listProduct li h2{
        width:100%;
        height:50px;line-height:50px;
        overflow:hidden;
        text-align:center;
        font-size: 18px;
        font-family: 'Cabin';
        text-transform: uppercase;
    }
    .listProduct li h3{
        width:100%;
        line-height:25px;
        text-align:center;
    }
        .listProduct li h3 span {
            display:inline-block;
            padding: 0px 20px;
            background-color: #0066ab;
            color:#fff;
            transition:all 0.5s;
            font-size:12px;
        }
        .listProduct li h3 span:hover{
            background-color:#57b6f6;
        }


@media(max-width:768px){

    .listProduct li{
        width:46%;float: left;
        margin:20px 2%;
        box-shadow: 0 0 10px #ccc;
        padding-bottom: 20px;
        transition: all 0.5s;
    }
    .listProduct li div{
        width:100%;
        height: 150px;overflow: hidden;
        position: relative;
    }
    .listProduct li div img{
        width:100%;
        position: absolute;
        height: 150px;
        top:0;
        left: 0;
        transition: all 0.5s;
    }
        .listProduct li h2{
            font-size: 16px;
        }
    
}