/* 栅格系统 */

.container {
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
    z-index: 2;
}

.row:after, .row-24:after, .row:before, .row-24:before {
    content: '';
    display: block;
    clear: both;
}

.col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-13, .col-14, .col-15, .col-16, .col-17, .col-18,
.col-19, .col-20, .col-21, .col-22, .col-23, .col-24 {
    position: relative;
    display: block;
    box-sizing: border-box;
    float: left;
}

.col-1, .col-10, .col-11, .col-12, .col-2, .col-3,
.col-4, .col-5, .col-6, .col-7, .col-8, .col-9,
.col-13, .col-14, .col-15, .col-16, .col-17,
.col-18, .col-19, .col-20, .col-21, .col-22,
.col-23, .col-24 {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
}

/* 默认12格 */

.col-1 {
    width: 8.33333333%;
}

.col-2 {
    width: 16.66666667%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333333%;
}

.col-5 {
    width: 41.66666667%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333333%;
}

.col-8 {
    width: 66.66666667%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333333%;
}

.col-11 {
    width: 91.66666667%;
}

.col-12 {
    width: 100%;
}

/* 启用24格 */

/* 1/24 */

.row-24 .col-1 {
    width: 4.166666666666667%;
}

/* 2/24 */

.row-24 .col-2 {
    width: 8.33333333%;
}

/* 3/24 */

.row-24 .col-3 {
    width: 12.5%;
}

/* 4/24 */

.row-24 .col-4 {
    width: 16.66666667%;
}

/* 5/24 */

.row-24 .col-5 {
    width: 20.83333333333333%;
}

/* 6/24 */

.row-24 .col-6 {
    width: 25%;
}

/* 7/24 */

.row-24 .col-7 {
    width: 29.16666666666667%;
}

/* 8/24 */

.row-24 .col-8 {
    width: 33.33333333%;
}

/* 9/24 */

.row-24 .col-9 {
    width: 37.5%;
}

/* 10/24 */

.row-24 .col-10 {
    width: 41.66666667%;
}

/* 11/24 */

.row-24 .col-11 {
    width: 45.83333333333333%;
}

/* 12/24 */

.row-24 .col-12 {
    width: 50%;
}

/* 13/24 */

.row-24 .col-13 {
    width: 54.16666666666667%;
}

/* 14/24 */

.row-24 .col-14 {
    width: 58.33333333%;
}

/* 15/24 */

.row-24 .col-15 {
    width: 62.5%;
}

/* 16/24 */

.row-24 .col-16 {
    width: 66.66666667%;
}

/* 17/24 */

.row-24 .col-17 {
    width: 70.83333333333333%;
}

/* 18/24 */

.row-24 .col-18 {
    width: 75%;
}

/* 19/24 */

.row-24 .col-19 {
    width: 79.16666666666667%;
}

/* 20/24 */

.row-24 .col-20 {
    width: 83.33333333%;
}

/* 21/24 */

.row-24 .col-21 {
    width: 87.5%;
}

/* 22/24 */

.row-24 .col-22 {
    width: 91.66666667%;
}

/* 23/24 */

.row-24 .col-23 {
    width: 95.83333333333333%;
}

/* 24/24 */

.row-24 .col-24 {
    width: 100%;
}

.col--offset1 {
    margin-left: 8.33333333%;
}

.col--offset2 {
    margin-left: 16.66666667%;
}

.col--offset3 {
    margin-left: 25%;
}

.col--offset4 {
    margin-left: 33.33333333%;
}

.col--offset5 {
    margin-left: 41.66666667%;
}

.col--offset6 {
    margin-left: 50%;
}

.col--offset7 {
    margin-left: 58.33333333%;
}

.col--offset8 {
    margin-left: 66.66666667%;
}

.col--offset9 {
    margin-left: 75%;
}

.col--offset10 {
    margin-left: 83.33333333%;
}

.col--offset11 {
    margin-left: 91.66666667%;
}

.col--offset12 {
    margin-left: 100%;
}

.col-space1 {
    margin: 1px;
}

.col-space1 > div {
    padding: 1px;
}

.col-space3 {
    margin: 3px;
}

.col-space3 > div {
    padding: 3px;
}

.col-space5 {
    margin: 5px;
}

.col-space5 > div {
    padding: 5px;
}

.col-space8 {
    margin: 8px;
}

.col-space8 > div {
    padding: 8px;
}

.col-space10 {
    margin: 10px;
}

.col-space10 > div {
    padding: 10px;
}

.col-space12 {
    margin: 12px;
}

.col-space12 > div {
    padding: 12px;
}

.col-space15 {
    margin: 15px;
}

.col-space15 > div {
    padding: 15px;
}

.col-space18 {
    margin: 18px;
}

.col-space18 > div {
    padding: 18px;
}

.col-space20 {
    margin: 20px;
}

.col-space20 > div {
    padding: 20px;
}

.col-space22 {
    margin: 22px;
}

.col-space22 > div {
    padding: 22px;
}

.col-space25 {
    margin: 25px;
}

.col-space25 > div {
    padding: 25px;
}

.col-space30 {
    margin: 30px;
}

.col-space30 > div {
    padding: 30px;
}

.col-space40 {
    margin: 40px;
}

.col-space40 > div {
    padding: 40px;
}

.col-space50 {
    margin: 50px;
}

.col-space50 > div {
    padding: 50px;
}

.col-space60 {
    margin: 60px;
}

.col-space60 > div {
    padding: 60px;
}