.cpList{padding: 80px 0 20px;width: 1163px;margin: 0 auto}
.cpList a{width: 272px;height: 272px; margin: 0 0 25px 25px; display: block; overflow: hidden; float: left; position: relative;}
.cpList a:nth-child(4n+1){margin-left: 0}
.cpList a img{display: block;width: 100%;height:100%;-webkit-transition: transform .3s ease;-moz-transition: transform .3s ease;-o-transition: transform .3s ease;-ms-transition: transform .3s ease;
    transition: transform .3s ease;}
.cpList a div{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 96%;
    height: 33px;
    line-height: 33px;
    padding: 0 2%;
    background: rgba(0, 0, 0, 0.6);

}
.cpList a:hover{}
.cpList a:hover img {
    -webkit-transform: scale(1.1) !important;
    -moz-transform: scale(1.1) !important;
    -ms-transform: scale(1.1) !important;
    transform: scale(1.1) !important;
}
.cpList a div h5{font-size: 16px;font-weight: bold;color: #fff;text-align: center;}
.cpList a div p{margin: 0;
    max-height: 44px;
    font-size: 12px;
    color: #fff;
    text-align: left;
    line-height: 24px;
    overflow: hidden;
}

@media only screen and (max-width: 1024px) and (min-width: 320px) {
    .cpList{width: 94%;margin: 0 auto;padding: 20px 0;}
    .cpList a{width: 100%;margin: 0 0 0;height: auto;float: none}
    .cpList a div{position: static;height: 175px;background: none;color: #333;width: 46%;float: left;padding: 10px 2%}
    .cpList a img{height: 195px;transition:none;width: 50%;float: right}
    .cpList a:nth-child(even) img{float: left}
    .cpList a:nth-child(even) div{float: right}
    .cpList a div h5{color: #333;text-align: left;font-size: 18px;line-height: 26px;margin-bottom: 15px;}
    .cpList a div p{color: #333;max-height: 100%;font-size: 14px;line-height: 24px}
    .cpList a:hover img{transform:none}
    .cpList a:hover img {
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        transform: none !important;
    }
}