.solution {
    width: 100%;
    display: table;
    margin: 30px auto 10px auto
}

.solution a {
    text-decoration: none;
}

.solution li {
    float: left;
    width: 33.33%;
    padding: 0 1%;
    margin-bottom: 20px;
}

.solution li .img {
    width: 100%;
    overflow: hidden;
}

.solution li .img img {
    width: 100%;
    display: block;
}

.solution li .zi {
    padding: 2% 3%;
    background: #ffffff;
}

.solution li .zi span {
    color: #232323;
    font-size: 22px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.solution li .zi p {
    color: #565656;
    font-size: 14px;
    height: 48px;
    overflow: hidden;
    margin-bottom: 10px
}

.solution li .zi i {
    background: url(../images/ico-more.png) no-repeat;
    width: 28px;
    height: 16px;
    display: block;
}

.solution li:hover .img img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
}

.solution li:hover .zi {
    background: #999;
}

.solution li:hover span {
    color: #fff;
}

.solution li:hover p {
    color: #fff;
}

.solution li:hover .zi i {
    margin-left: 10%;
    background: url(../images/ico-more_h.png) no-repeat;
}

@media screen and (max-width: 1024px) {
    .solution li {
        width: 50%;
    }
}

@media screen and (max-width: 640px) {
    .solution li {
        width: 100%;
    }
    .solution li .zi span {
        overflow: auto;
        white-space: normal;
    }
    .solution li .zi p {
        overflow: auto;
        height: auto;
    }
}