/*animate补充动画*/
@keyframes fadeInLeftSmall {
    from {
        opacity: 0;
        transform: translate3d(-10%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInLeftSmall {
    animation-name: fadeInLeftSmall;
}
@keyframes fadeInRightSmall {
    from {
        opacity: 0;
        transform: translate3d(10%, 0, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInRightSmall {
    animation-name: fadeInRightSmall;
}
@keyframes fadeInDownSmall {
    from {
        opacity: 0;
        transform: translate3d(0%, -10%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInDownSmall {
    animation-name: fadeInDownSmall;
}
@keyframes fadeOutDownSmall {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translate3d(0%, 10%, 0);
    }
}
.fadeOutDownSmall {
    animation-name: fadeOutDownSmall;
}
@keyframes fadeInUpSmall {
    from {
        opacity: 0;
        transform: translate3d(0%, 10%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.fadeInUpSmall {
    animation-name: fadeInUpSmall;
}

/* 栅格 */
.grid-box {
    font-size: 0;
    font-size: 12px
}
.grid-box .column {
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
    letter-spacing: 0;
}

.grid-box .column {
    width: 100%;
}
.grid-box.two>.column {
    width: 50%;
}
.grid-box.three>.column {
    width: 33.33333%;
}
.grid-box.four>.column {
    width: 25%;
}
.grid-box.five>.column {
    width: 20%;
}
.grid-box.six>.column {
    width: 16.6666667%;
}
.grid-box.seven>.column {
    width: 14.285714%;
}
.grid-box.eight>.column {
    width: 12.55%;
}
.grid-box.nine>.column {
    width: 11.11111111%;
}
.grid-box.ten>.column {
    width: 10%;
}
@media screen and (max-width:1000px){
    .grid-box.two>.column {
        width: 50%;
    }
    .grid-box.three>.column {
        width: 33.33333%;
    }
    .grid-box.four>.column {
        width: 33.33333%;
    }
    .grid-box.five>.column {
        width: 33.33333%;
    }
}
@media screen and (max-width:700px){
    .grid-box.two>.column {
        width: 50%;
    }
    .grid-box.three>.column {
        width: 50%;
    }
    .grid-box.four>.column {
        width: 50%;
    }
    .grid-box.five>.column {
        width: 50%;
    }
}
@media screen and (max-width:500px){
    .grid-box.two>.column {
        width: 100%;
    }
    .grid-box.three>.column {
        width: 100%;
    }
    .grid-box.four>.column {
        width: 100%;
    }
    .grid-box.five>.column {
        width: 100%;
    }
}