.picture {
    font-size: 0;
    margin: 0 -10px;}

.picture > li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    padding: 0 10px;}

.picture .img-zoom {
    margin: 30px 0 0;
    padding: 12px;
    background: #fff;
    overflow: visible;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;}

.picture .img-frame {
    padding: 65% 0 0;}

.picture .title {
    font-size: 16px;
    font-weight: 400;
    line-height: 46px;
    color: #333;
    text-align: center;}

.picture .title i {
    width: 12px;
    height: 12px;
    padding: 3px;
    margin: 0 10px;
    border-radius: 50%;
    background: #cdd7e8;}

.picture .title i::after {
    display: block;
    content: "";
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #06358a;
    border-radius: 50%;}
@media screen and (max-width: 1025px) {
.picture { margin: 0 -7px;}
.picture > li { width: 33.33%; padding: 0 7px;}
}
@media screen and (max-width: 600px) {
.picture { margin: 0 -5px;}
.picture > li { width: 50%; padding: 0 5px;}
.picture .img-zoom { margin: 16px 0 0; padding: 8px;}
}