/* ==========================================================
   24 栅格系统（无前缀类：全屏生效）
   ========================================================== */
.col-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
.col-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
.col-3 { max-width: 12.5%; flex: 0 0 12.5%; }
.col-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
.col-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
.col-6 { max-width: 25%; flex: 0 0 25%; }
.col-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
.col-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
.col-9 { max-width: 37.5%; flex: 0 0 37.5%; }
.col-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
.col-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
.col-12 { max-width: 50%; flex: 0 0 50%; }
.col-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
.col-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
.col-15 { max-width: 62.5%; flex: 0 0 62.5%; }
.col-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
.col-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
.col-18 { max-width: 75%; flex: 0 0 75%; }
.col-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
.col-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
.col-21 { max-width: 87.5%; flex: 0 0 87.5%; }
.col-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
.col-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
.col-24 { max-width: 100%; flex: 0 0 100%; }

/* 基础偏移 */
.col-push-1 { margin-left: 4.1666666666%; }
.col-push-2 { margin-left: 8.3333333333%; }
.col-push-3 { margin-left: 12.5%; }
.col-push-4 { margin-left: 16.6666666666%; }
.col-push-5 { margin-left: 20.8333333333%; }
.col-push-6 { margin-left: 25%; }
.col-push-7 { margin-left: 29.1666666666%; }
.col-push-8 { margin-left: 33.3333333333%; }
.col-push-9 { margin-left: 37.5%; }
.col-push-10 { margin-left: 41.6666666666%; }
.col-push-11 { margin-left: 45.8333333333%; }
.col-push-12 { margin-left: 50%; }
.col-push-13 { margin-left: 54.1666666666%; }
.col-push-14 { margin-left: 58.3333333333%; }
.col-push-15 { margin-left: 62.5%; }
.col-push-16 { margin-left: 66.6666666666%; }
.col-push-17 { margin-left: 70.8333333333%; }
.col-push-18 { margin-left: 75%; }
.col-push-19 { margin-left: 79.1666666666%; }
.col-push-20 { margin-left: 83.3333333333%; }
.col-push-21 { margin-left: 87.5%; }
.col-push-22 { margin-left: 91.6666666666%; }
.col-push-23 { margin-left: 95.8333333333%; }

/* ==========================================================
   xs 断点（≤767px，手机）
   ========================================================== */
@media only screen and (max-width: 767px) {
    .col-xs-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
    .col-xs-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
    .col-xs-3 { max-width: 12.5%; flex: 0 0 12.5%; }
    .col-xs-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
    .col-xs-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
    .col-xs-6 { max-width: 25%; flex: 0 0 25%; }
    .col-xs-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
    .col-xs-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
    .col-xs-9 { max-width: 37.5%; flex: 0 0 37.5%; }
    .col-xs-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
    .col-xs-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
    .col-xs-12 { max-width: 50%; flex: 0 0 50%; }
    .col-xs-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
    .col-xs-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
    .col-xs-15 { max-width: 62.5%; flex: 0 0 62.5%; }
    .col-xs-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
    .col-xs-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
    .col-xs-18 { max-width: 75%; flex: 0 0 75%; }
    .col-xs-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
    .col-xs-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
    .col-xs-21 { max-width: 87.5%; flex: 0 0 87.5%; }
    .col-xs-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
    .col-xs-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
    .col-xs-24 { max-width: 100%; flex: 0 0 100%; }

    .col-xs-push-1 { margin-left: 4.1666666666%; }
    .col-xs-push-2 { margin-left: 8.3333333333%; }
    .col-xs-push-3 { margin-left: 12.5%; }
    .col-xs-push-4 { margin-left: 16.6666666666%; }
    .col-xs-push-5 { margin-left: 20.8333333333%; }
    .col-xs-push-6 { margin-left: 25%; }
    .col-xs-push-7 { margin-left: 29.1666666666%; }
    .col-xs-push-8 { margin-left: 33.3333333333%; }
    .col-xs-push-9 { margin-left: 37.5%; }
    .col-xs-push-10 { margin-left: 41.6666666666%; }
    .col-xs-push-11 { margin-left: 45.8333333333%; }
    .col-xs-push-12 { margin-left: 50%; }
}

/* ==========================================================
   sm 断点（768-991px，小平板）
   ========================================================== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .col-sm-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
    .col-sm-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
    .col-sm-3 { max-width: 12.5%; flex: 0 0 12.5%; }
    .col-sm-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
    .col-sm-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
    .col-sm-6 { max-width: 25%; flex: 0 0 25%; }
    .col-sm-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
    .col-sm-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
    .col-sm-9 { max-width: 37.5%; flex: 0 0 37.5%; }
    .col-sm-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
    .col-sm-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
    .col-sm-12 { max-width: 50%; flex: 0 0 50%; }
    .col-sm-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
    .col-sm-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
    .col-sm-15 { max-width: 62.5%; flex: 0 0 62.5%; }
    .col-sm-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
    .col-sm-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
    .col-sm-18 { max-width: 75%; flex: 0 0 75%; }
    .col-sm-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
    .col-sm-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
    .col-sm-21 { max-width: 87.5%; flex: 0 0 87.5%; }
    .col-sm-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
    .col-sm-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
    .col-sm-24 { max-width: 100%; flex: 0 0 100%; }

    .col-sm-push-1 { margin-left: 4.1666666666%; }
    .col-sm-push-2 { margin-left: 8.3333333333%; }
    .col-sm-push-3 { margin-left: 12.5%; }
    .col-sm-push-4 { margin-left: 16.6666666666%; }
    .col-sm-push-5 { margin-left: 20.8333333333%; }
    .col-sm-push-6 { margin-left: 25%; }
    .col-sm-push-7 { margin-left: 29.1666666666%; }
    .col-sm-push-8 { margin-left: 33.3333333333%; }
    .col-sm-push-9 { margin-left: 37.5%; }
    .col-sm-push-10 { margin-left: 41.6666666666%; }
    .col-sm-push-11 { margin-left: 45.8333333333%; }
    .col-sm-push-12 { margin-left: 50%; }
}

/* ==========================================================
   md 断点（992-1199px，大平板/小桌面）
   ========================================================== */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .col-md-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
    .col-md-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
    .col-md-3 { max-width: 12.5%; flex: 0 0 12.5%; }
    .col-md-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
    .col-md-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
    .col-md-6 { max-width: 25%; flex: 0 0 25%; }
    .col-md-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
    .col-md-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
    .col-md-9 { max-width: 37.5%; flex: 0 0 37.5%; }
    .col-md-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
    .col-md-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
    .col-md-12 { max-width: 50%; flex: 0 0 50%; }
    .col-md-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
    .col-md-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
    .col-md-15 { max-width: 62.5%; flex: 0 0 62.5%; }
    .col-md-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
    .col-md-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
    .col-md-18 { max-width: 75%; flex: 0 0 75%; }
    .col-md-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
    .col-md-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
    .col-md-21 { max-width: 87.5%; flex: 0 0 87.5%; }
    .col-md-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
    .col-md-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
    .col-md-24 { max-width: 100%; flex: 0 0 100%; }

    .col-md-push-1 { margin-left: 4.1666666666%; }
    .col-md-push-2 { margin-left: 8.3333333333%; }
    .col-md-push-3 { margin-left: 12.5%; }
    .col-md-push-4 { margin-left: 16.6666666666%; }
    .col-md-push-5 { margin-left: 20.8333333333%; }
    .col-md-push-6 { margin-left: 25%; }
    .col-md-push-7 { margin-left: 29.1666666666%; }
    .col-md-push-8 { margin-left: 33.3333333333%; }
    .col-md-push-9 { margin-left: 37.5%; }
    .col-md-push-10 { margin-left: 41.6666666666%; }
    .col-md-push-11 { margin-left: 45.8333333333%; }
    .col-md-push-12 { margin-left: 50%; }
}

/* ==========================================================
   lg 断点（1200-1919px，桌面）
   ========================================================== */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .col-lg-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
    .col-lg-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
    .col-lg-3 { max-width: 12.5%; flex: 0 0 12.5%; }
    .col-lg-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
    .col-lg-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
    .col-lg-6 { max-width: 25%; flex: 0 0 25%; }
    .col-lg-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
    .col-lg-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
    .col-lg-9 { max-width: 37.5%; flex: 0 0 37.5%; }
    .col-lg-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
    .col-lg-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
    .col-lg-12 { max-width: 50%; flex: 0 0 50%; }
    .col-lg-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
    .col-lg-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
    .col-lg-15 { max-width: 62.5%; flex: 0 0 62.5%; }
    .col-lg-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
    .col-lg-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
    .col-lg-18 { max-width: 75%; flex: 0 0 75%; }
    .col-lg-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
    .col-lg-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
    .col-lg-21 { max-width: 87.5%; flex: 0 0 87.5%; }
    .col-lg-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
    .col-lg-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
    .col-lg-24 { max-width: 100%; flex: 0 0 100%; }

    .col-lg-push-1 { margin-left: 4.1666666666%; }
    .col-lg-push-2 { margin-left: 8.3333333333%; }
    .col-lg-push-3 { margin-left: 12.5%; }
    .col-lg-push-4 { margin-left: 16.6666666666%; }
    .col-lg-push-5 { margin-left: 20.8333333333%; }
    .col-lg-push-6 { margin-left: 25%; }
    .col-lg-push-7 { margin-left: 29.1666666666%; }
    .col-lg-push-8 { margin-left: 33.3333333333%; }
    .col-lg-push-9 { margin-left: 37.5%; }
    .col-lg-push-10 { margin-left: 41.6666666666%; }
    .col-lg-push-11 { margin-left: 45.8333333333%; }
    .col-lg-push-12 { margin-left: 50%; }
}

/* ==========================================================
   xl 断点（≥1920px，大屏）
   ========================================================== */
@media only screen and (min-width: 1920px) {
    .col-xl-1 { max-width: 4.1666666666%; flex: 0 0 4.1666666666%; }
    .col-xl-2 { max-width: 8.3333333333%; flex: 0 0 8.3333333333%; }
    .col-xl-3 { max-width: 12.5%; flex: 0 0 12.5%; }
    .col-xl-4 { max-width: 16.6666666666%; flex: 0 0 16.6666666666%; }
    .col-xl-5 { max-width: 20.8333333333%; flex: 0 0 20.8333333333%; }
    .col-xl-6 { max-width: 25%; flex: 0 0 25%; }
    .col-xl-7 { max-width: 29.1666666666%; flex: 0 0 29.1666666666%; }
    .col-xl-8 { max-width: 33.3333333333%; flex: 0 0 33.3333333333%; }
    .col-xl-9 { max-width: 37.5%; flex: 0 0 37.5%; }
    .col-xl-10 { max-width: 41.6666666666%; flex: 0 0 41.6666666666%; }
    .col-xl-11 { max-width: 45.8333333333%; flex: 0 0 45.8333333333%; }
    .col-xl-12 { max-width: 50%; flex: 0 0 50%; }
    .col-xl-13 { max-width: 54.1666666666%; flex: 0 0 54.1666666666%; }
    .col-xl-14 { max-width: 58.3333333333%; flex: 0 0 58.3333333333%; }
    .col-xl-15 { max-width: 62.5%; flex: 0 0 62.5%; }
    .col-xl-16 { max-width: 66.6666666666%; flex: 0 0 66.6666666666%; }
    .col-xl-17 { max-width: 70.8333333333%; flex: 0 0 70.8333333333%; }
    .col-xl-18 { max-width: 75%; flex: 0 0 75%; }
    .col-xl-19 { max-width: 79.1666666666%; flex: 0 0 79.1666666666%; }
    .col-xl-20 { max-width: 83.3333333333%; flex: 0 0 83.3333333333%; }
    .col-xl-21 { max-width: 87.5%; flex: 0 0 87.5%; }
    .col-xl-22 { max-width: 91.6666666666%; flex: 0 0 91.6666666666%; }
    .col-xl-23 { max-width: 95.8333333333%; flex: 0 0 95.8333333333%; }
    .col-xl-24 { max-width: 100%; flex: 0 0 100%; }

    .col-xl-push-1 { margin-left: 4.1666666666%; }
    .col-xl-push-2 { margin-left: 8.3333333333%; }
    .col-xl-push-3 { margin-left: 12.5%; }
    .col-xl-push-4 { margin-left: 16.6666666666%; }
    .col-xl-push-5 { margin-left: 20.8333333333%; }
    .col-xl-push-6 { margin-left: 25%; }
    .col-xl-push-7 { margin-left: 29.1666666666%; }
    .col-xl-push-8 { margin-left: 33.3333333333%; }
    .col-xl-push-9 { margin-left: 37.5%; }
    .col-xl-push-10 { margin-left: 41.6666666666%; }
    .col-xl-push-11 { margin-left: 45.8333333333%; }
    .col-xl-push-12 { margin-left: 50%; }
}

/* ==========================================================
   响应式显隐类（hidden-*，配合栅格断点使用）
   ========================================================== */
@media only screen and (max-width: 767px) {
    .hidden-xs-only { display: none !important; }
}

@media only screen and (min-width: 768px) {
    .hidden-sm-and-up { display: none !important; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hidden-sm-only { display: none !important; }
}

@media only screen and (max-width: 991px) {
    .hidden-sm-and-down { display: none !important; }
}

@media only screen and (min-width: 992px) {
    .hidden-md-and-up { display: none !important; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .hidden-md-only { display: none !important; }
}

@media only screen and (max-width: 1199px) {
    .hidden-md-and-down { display: none !important; }
}

@media only screen and (min-width: 1200px) {
    .hidden-lg-and-up { display: none !important; }
}

@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    .hidden-lg-only { display: none !important; }
}

@media only screen and (max-width: 1919px) {
    .hidden-lg-and-down { display: none !important; }
}

@media only screen and (min-width: 1920px) {
    .hidden-xl-only { display: none !important; }
}