/* ==========================================================================
   网格系统基础设置 (Grid System Base Setup)
   ========================================================================== */

/* 1. Box Sizing Reset: 统一容器和列的盒模型为 border-box */
.container,
.row [class*="col-"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* 2. 容器 (Container): 居中并设置基础左右内边距 */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* 3. 行 (Row): 通过负外边距抵消容器内边距，实现列的无缝对齐 */
.row {
    margin-right: -10px;
    margin-left: -10px;
}

/* 4. 列基础样式 (Column Base): 左浮动并设置基础左右内边距 */
.row [class*="col-"] {
    float: left;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

/* 5. 推/拉定位 (Push/Pull Positioning) */
.row [class*="-push-"],
.row [class*="-pull-"] {
    position: relative;
}

/* ==========================================================================
   移动设备网格 (Mobile Grid) - 默认 (< 768px)
   ========================================================================== */

/* 移动端列宽 (col-mb-X) */
.col-mb-1 { width: 8.33333%; }
.col-mb-2 { width: 16.66667%; }
.col-mb-3 { width: 25%; }
.col-mb-4 { width: 33.33333%; }
.col-mb-5 { width: 41.66667%; }
.col-mb-6 { width: 50%; }
.col-mb-7 { width: 58.33333%; }
.col-mb-8 { width: 66.66667%; }
.col-mb-9 { width: 75%; }
.col-mb-10 { width: 83.33333%; }
.col-mb-11 { width: 91.66667%; }
.col-mb-12 { width: 100%; }

/* ==========================================================================
   平板/小型桌面网格 (Tablet Grid) - @media (min-width: 768px)
   ========================================================================== */
@media(min-width:768px){

    /* 容器最大宽度 */
    .container {
        max-width: 728px;
    }

    /* 平板列宽 (col-tb-X) */
    .col-tb-1 { width: 8.33333%; }
    .col-tb-2 { width: 16.66667%; }
    .col-tb-3 { width: 25%; }
    .col-tb-4 { width: 33.33333%; }
    .col-tb-5 { width: 41.66667%; }
    .col-tb-6 { width: 50%; }
    .col-tb-7 { width: 58.33333%; }
    .col-tb-8 { width: 66.66667%; }
    .col-tb-9 { width: 75%; }
    .col-tb-10 { width: 83.33333%; }
    .col-tb-11 { width: 91.66667%; }
    .col-tb-12 { width: 100%; }

    /* 平板偏移 (col-tb-offset-X) */
    .col-tb-offset-0 { margin-left: 0; }
    .col-tb-offset-1 { margin-left: 8.33333%; }
    .col-tb-offset-2 { margin-left: 16.66667%; }
    .col-tb-offset-3 { margin-left: 25%; }
    .col-tb-offset-4 { margin-left: 33.33333%; }
    .col-tb-offset-5 { margin-left: 41.66667%; }
    .col-tb-offset-6 { margin-left: 50%; }
    .col-tb-offset-7 { margin-left: 58.33333%; }
    .col-tb-offset-8 { margin-left: 66.66667%; }
    .col-tb-offset-9 { margin-left: 75%; }
    .col-tb-offset-10 { margin-left: 83.33333%; }
    .col-tb-offset-11 { margin-left: 91.66667%; }
    .col-tb-offset-12 { margin-left: 100%; }

    /* 平板拉动 (col-tb-pull-X) */
    .col-tb-pull-0 { right: 0; }
    .col-tb-pull-1 { right: 8.33333%; }
    .col-tb-pull-2 { right: 16.66667%; }
    .col-tb-pull-3 { right: 25%; }
    .col-tb-pull-4 { right: 33.33333%; }
    .col-tb-pull-5 { right: 41.66667%; }
    .col-tb-pull-6 { right: 50%; }
    .col-tb-pull-7 { right: 58.33333%; }
    .col-tb-pull-8 { right: 66.66667%; }
    .col-tb-pull-9 { right: 75%; }
    .col-tb-pull-10 { right: 83.33333%; }
    .col-tb-pull-11 { right: 91.66667%; }
    .col-tb-pull-12 { right: 100%; }

    /* 平板推动 (col-tb-push-X) */
    .col-tb-push-0 { left: 0; }
    .col-tb-push-1 { left: 8.33333%; }
    .col-tb-push-2 { left: 16.66667%; }
    .col-tb-push-3 { left: 25%; }
    .col-tb-push-4 { left: 33.33333%; }
    .col-tb-push-5 { left: 41.66667%; }
    .col-tb-push-6 { left: 50%; }
    .col-tb-push-7 { left: 58.33333%; }
    .col-tb-push-8 { left: 66.66667%; }
    .col-tb-push-9 { left: 75%; }
    .col-tb-push-10 { left: 83.33333%; }
    .col-tb-push-11 { left: 91.66667%; }
    .col-tb-push-12 { left: 100%; }
}

/* ==========================================================================
   标准桌面网格 (Desktop Grid) - @media (min-width: 992px)
   ========================================================================== */
@media(min-width:992px){

    /* 容器最大宽度 */
    .container {
        max-width: 952px;
    }

    /* 标准列宽 (col-X) */
    .col-1 { width: 8.33333%; }
    .col-2 { width: 16.66667%; }
    .col-3 { width: 25%; }
    .col-4 { width: 33.33333%; }
    .col-5 { width: 41.66667%; }
    .col-6 { width: 50%; }
    .col-7 { width: 58.33333%; }
    .col-8 { width: 66.66667%; }
    .col-9 { width: 75%; }
    .col-10 { width: 83.33333%; }
    .col-11 { width: 91.66667%; }
    .col-12 { width: 100%; }

    /* 标准桌面偏移 (col-offset-X) */
    .col-offset-0 { margin-left: 0; }
    .col-offset-1 { margin-left: 8.33333%; }
    .col-offset-2 { margin-left: 16.66667%; }
    .col-offset-3 { margin-left: 25%; }
    .col-offset-4 { margin-left: 33.33333%; }
    .col-offset-5 { margin-left: 41.66667%; }
    .col-offset-6 { margin-left: 50%; }
    .col-offset-7 { margin-left: 58.33333%; }
    .col-offset-8 { margin-left: 66.66667%; }
    .col-offset-9 { margin-left: 75%; }
    .col-offset-10 { margin-left: 83.33333%; }
    .col-offset-11 { margin-left: 91.66667%; }
    .col-offset-12 { margin-left: 100%; }

    /* 标准桌面拉动 (col-pull-X) */
    .col-pull-0 { right: 0; }
    .col-pull-1 { right: 8.33333%; }
    .col-pull-2 { right: 16.66667%; }
    .col-pull-3 { right: 25%; }
    .col-pull-4 { right: 33.33333%; }
    .col-pull-5 { right: 41.66667%; }
    .col-pull-6 { right: 50%; }
    .col-pull-7 { right: 58.33333%; }
    .col-pull-8 { right: 66.66667%; }
    .col-pull-9 { right: 75%; }
    .col-pull-10 { right: 83.33333%; }
    .col-pull-11 { right: 91.66667%; }
    .col-pull-12 { right: 100%; }

    /* 标准桌面推动 (col-push-X) */
    .col-push-0 { left: 0; }
    .col-push-1 { left: 8.33333%; }
    .col-push-2 { left: 16.66667%; }
    .col-push-3 { left: 25%; }
    .col-push-4 { left: 33.33333%; }
    .col-push-5 { left: 41.66667%; }
    .col-push-6 { left: 50%; }
    .col-push-7 { left: 58.33333%; }
    .col-push-8 { left: 66.66667%; }
    .col-push-9 { left: 75%; }
    .col-push-10 { left: 83.33333%; }
    .col-push-11 { left: 91.66667%; }
    .col-push-12 { left: 100%; }
}

/* ==========================================================================
   宽屏桌面网格 (Wide Desktop Grid) - @media (min-width: 1200px)
   ========================================================================== */
@media(min-width:1200px){

    /* 容器最大宽度 */
    .container {
        max-width: 1160px;
    }

    /* 宽屏列宽 (col-wd-X) */
    .col-wd-1 { width: 8.33333%; }
    .col-wd-2 { width: 16.66667%; }
    .col-wd-3 { width: 25%; }
    .col-wd-4 { width: 33.33333%; }
    .col-wd-5 { width: 41.66667%; }
    .col-wd-6 { width: 50%; }
    .col-wd-7 { width: 58.33333%; }
    .col-wd-8 { width: 66.66667%; }
    .col-wd-9 { width: 75%; }
    .col-wd-10 { width: 83.33333%; }
    .col-wd-11 { width: 91.66667%; }
    .col-wd-12 { width: 100%; }

    /* 宽屏偏移 (col-wd-offset-X) */
    .col-wd-offset-0 { margin-left: 0; }
    .col-wd-offset-1 { margin-left: 8.33333%; }
    .col-wd-offset-2 { margin-left: 16.66667%; }
    .col-wd-offset-3 { margin-left: 25%; }
    .col-wd-offset-4 { margin-left: 33.33333%; }
    .col-wd-offset-5 { margin-left: 41.66667%; }
    .col-wd-offset-6 { margin-left: 50%; }
    .col-wd-offset-7 { margin-left: 58.33333%; }
    .col-wd-offset-8 { margin-left: 66.66667%; }
    .col-wd-offset-9 { margin-left: 75%; }
    .col-wd-offset-10 { margin-left: 83.33333%; }
    .col-wd-offset-11 { margin-left: 91.66667%; }
    .col-wd-offset-12 { margin-left: 100%; }

    /* 宽屏拉动 (col-wd-pull-X) */
    .col-wd-pull-0 { right: 0; }
    .col-wd-pull-1 { right: 8.33333%; }
    .col-wd-pull-2 { right: 16.66667%; }
    .col-wd-pull-3 { right: 25%; }
    .col-wd-pull-4 { right: 33.33333%; }
    .col-wd-pull-5 { right: 41.66667%; }
    .col-wd-pull-6 { right: 50%; }
    .col-wd-pull-7 { right: 58.33333%; }
    .col-wd-pull-8 { right: 66.66667%; }
    .col-wd-pull-9 { right: 75%; }
    .col-wd-pull-10 { right: 83.33333%; }
    .col-wd-pull-11 { right: 91.66667%; }
    .col-wd-pull-12 { right: 100%; }

    /* 宽屏推动 (col-wd-push-X) */
    .col-wd-push-0 { left: 0; }
    .col-wd-push-1 { left: 8.33333%; }
    .col-wd-push-2 { left: 16.66667%; }
    .col-wd-push-3 { left: 25%; }
    .col-wd-push-4 { left: 33.33333%; }
    .col-wd-push-5 { left: 41.66667%; }
    .col-wd-push-6 { left: 50%; }
    .col-wd-push-7 { left: 58.33333%; }
    .col-wd-push-8 { left: 66.66667%; }
    .col-wd-push-9 { left: 75%; }
    .col-wd-push-10 { left: 83.33333%; }
    .col-wd-push-11 { left: 91.66667%; }
    .col-wd-push-12 { left: 100%; }
}

/* ==========================================================================
   辅助类与工具类 (Utility Classes)
   ========================================================================== */

/* 响应式隐藏类 (Responsive Hidden) */
@media(max-width:767px){
    /* 移动端隐藏 (Hidden on Mobile) */
    .kit-hidden-mb { display: none; }
}
@media(max-width:991px){
    /* 平板端隐藏 (Hidden on Tablet) */
    .kit-hidden-tb { display: none; }
}
@media(max-width:1199px){
    /* 桌面端隐藏 (Hidden on Desktop) */
    .kit-hidden { display: none; }
}

/* 清除浮动 (Clearfix) */
.clearfix,
.row {
    zoom: 1; /* For IE 6/7 */
}
.clearfix:before,
.row:before,
.clearfix:after,
.row:after {
    content: " ";
    display: table;
}
.clearfix:after,
.row:after {
    clear: both;
}