/* =================================================================== 
 *
 *  Typerite 基础样式表
 *  模板版本 1.1.0
 *  03-15-2021
 *  ------------------------------------------------------------------
 *
 *  目录：
 *  # 导入 
 *  # 标准化
 *  # 基础/基础设置样式
 *      ## 媒体
 *      ## 排版重置 
 *      ## 链接
 *      ## 输入
 *  # 网格
 *      ## 中等屏幕设备
 *      ## 平板电脑
 *      ## 移动设备
 *      ## 小型移动设备
 *  # 块网格
 *      ## 块网格 - 中等屏幕设备
 *      ## 块网格 - 平板电脑
 *      ## 块网格 - 移动设备
 *      ## 块网格 - 小型移动设备
 *  # 其他
 *
 * =================================================================== */


/* ===================================================================
 * # 导入 
 *
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css?family=Heebo:300,400,500,600,700|Lora:400,400i,700,700i|IBM+Plex+Sans:300,400,400i,600,700,900");


 /* ==========================================================================
  * # 标准化
  * normalize.css v8.0.1 | MIT License |
  * github.com/necolas/normalize.css
  *
  * -------------------------------------------------------------------------- */
 
 /* ------------------------------------------------------------------- 
  * ## 文档
  * ------------------------------------------------------------------- */
 /* 1. 在所有浏览器中修正行高。
  * 2. 防止在iOS中方向改变后调整字体大小。*/
 html {
     line-height              : 1.15;
     /* 1 */
     -webkit-text-size-adjust : 100%;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## 章节
  * ------------------------------------------------------------------- */
 /* 在所有浏览器中删除外边距。 */
 body {
     margin : 0;
 }
 
 /* 在IE中一致地渲染`main`元素。 */
 main {
     display : block;
 }
 
 /* 在Chrome、Firefox和Safari中修正`h1`元素的字体大小和外边距。 */
 h1 {
     font-size : 2em;
     margin    : 0.67em 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 分组
  * ------------------------------------------------------------------- */
 /* 1. 在Firefox中添加正确的盒模型。
  * 2. 在Edge和IE中显示溢出。 */
 hr {
     box-sizing : content-box;
     /* 1 */
     height     : 0;
     /* 1 */
     overflow   : visible;
     /* 2 */
 }
 
 /* 1. 在所有浏览器中修正字体大小和边距的继承和缩放。
  * 2. 在所有浏览器中修正奇数的`em`字体大小。 */
 pre {
     font-family : monospace, monospace;
     /* 1 */
     font-size   : 1em;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## 文本级语义
  * ------------------------------------------------------------------- */
 /* 在IE 10中删除活动链接的灰色背景。 */
 a {
     background-color : transparent;
 }
 
 /* 1. 在Chrome 57-中修正底部边框。
  * 2. 在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。 */
 abbr[title] {
     border-bottom   : none;
     /* 1 */
     text-decoration : underline;
     /* 2 */
     text-decoration : underline dotted;
     /* 2 */
 }
 
 /* 在Chrome、Edge和Safari中添加正确的字体重量。 */
 b,
 strong {
     font-weight : bolder;
 }
 
 /* 1. 在所有浏览器中修正字体大小和边距的继承和缩放。
  * 2. 在所有浏览器中修正奇数的`em`字体大小。 */
 code,
 kbd,
 samp {
     font-family : monospace, monospace;
     /* 1 */
     font-size   : 1em;
     /* 2 */
 }
 
 /* 在所有浏览器中添加正确的字体大小。 */
 small {
     font-size : 80%;
 }
 
 /* 防止`sub`和`sup`元素影响所有浏览器中的行高。 */
 sub,
 sup {
     font-size      : 75%;
     line-height    : 0;
     position       : relative;
     vertical-align : baseline;
 }
 
 sub {
     bottom : -0.25em;
 }
 
 sup {
     top : -0.5em;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 嵌入内容
  * ------------------------------------------------------------------- */
 /* 在IE 10中删除链接内图像的边框。 */
 img {
     border-style : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 表单
  * ------------------------------------------------------------------- */
 /* 1. 在所有浏览器中更改字体样式。
  * 2. 在Firefox和Safari中删除边距。 */
 button,
 input,
 optgroup,
 select,
 textarea {
     font-family : inherit;
     /* 1 */
     font-size   : 100%;
     /* 1 */
     line-height : 1.15;
     /* 1 */
     margin      : 0;
     /* 2 */
 }
 
 /* 在IE中显示溢出。
  * 1. 在Edge中显示溢出。 */
 button,
 input {
     /* 1 */
     overflow : visible;
 }
 
 /* 在Edge、Firefox和IE中删除文本转换的继承。
  * 1. 在Firefox中删除文本转换的继承。 */
 button,
 select {
     /* 1 */
     text-transform : none;
 }
 
 /* 在iOS和Safari中修正可点击类型的样式。 */
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance : button;
 }
 
 /* 在Firefox中删除内部边框和内边距。 */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     border-style : none;
     padding      : 0;
 }
 
 /* 恢复前一条规则未设置的焦点样式。 */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline : 1px dotted ButtonText;
 }
 
 /* 在Firefox中修正内边距。 */
 fieldset {
     padding : 0.35em 0.75em 0.625em;
 }
 
 /* 1. 在Edge和IE中修正文本换行。
  * 2. 在IE中修正从`fieldset`元素继承的颜色。
  * 3. 在所有浏览器中删除内边距，以便开发人员在将`fieldset`元素归零时不会感到困惑。 */
 legend {
     box-sizing  : border-box;
     /* 1 */
     color       : inherit;
     /* 2 */
     display     : table;
     /* 1 */
     max-width   : 100%;
     /* 1 */
     padding     : 0;
     /* 3 */
     white-space : normal;
     /* 1 */
 }
 
 /* 在Chrome、Firefox和Opera中添加正确的垂直对齐。 */
 progress {
     vertical-align : baseline;
 }
 
 /* 在IE 10+中删除默认的垂直滚动条。 */
 textarea {
     overflow : auto;
 }
 
 /* 1. 在IE 10中添加正确的盒模型。
  * 2. 在IE 10中删除内边距。 */
 [type="checkbox"],
 [type="radio"] {
     box-sizing : border-box;
     /* 1 */
     padding    : 0;
     /* 2 */
 }
 
 /* 在Chrome中修正递增和递减按钮的光标样式。 */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height : auto;
 }
 
 /* 1. 在Chrome和Safari中修正奇数的外观。
  * 2. 在Safari中修正轮廓样式。 */
 [type="search"] {
     -webkit-appearance : textfield;
     /* 1 */
     outline-offset     : -2px;
     /* 2 */
 }
 
 /* 在Chrome和Safari的macOS上删除内部内边距。 */
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance : none;
 }
 
 /* 1. 在iOS和Safari中修正可点击类型的样式。
  * 2. 在Safari中更改字体属性为`inherit`。 */
 ::-webkit-file-upload-button {
     -webkit-appearance : button;
     /* 1 */
     font               : inherit;
     /* 2 */
 }
 
 /* ------------------------------------------------------------------- 
  * ## 交互
  * ------------------------------------------------------------------- */
 /* 在Edge、IE 10+和Firefox中添加正确的显示。 */
 details {
     display : block;
 }
 
 /* 在所有浏览器中添加正确的显示。 */
 summary {
     display : list-item;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 其他
  * ------------------------------------------------------------------- */
 /* 在IE 10+中添加正确的显示。 */
 template {
     display : none;
 }
 
 /* 在IE 10中添加正确的显示。 */
 [hidden] {
     display : none;
 }
 
 
 /* ===================================================================
  * # 基础/基础设置样式
  *
  * ------------------------------------------------------------------- */
 html {
     font-size  : 62.5%;
     box-sizing : border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing : inherit;
 }
 
 body {
     font-weight                : normal;
     line-height                : 1;
     word-wrap                  : break-word;
     -moz-font-smoothing        : grayscale;
     -moz-osx-font-smoothing    : grayscale;
     -webkit-font-smoothing     : antialiased;
     -webkit-overflow-scrolling : touch;
     -webkit-text-size-adjust   : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 媒体
  * ------------------------------------------------------------------- */
 svg,
 img,
 video embed,
 iframe,
 object {
     max-width : 100%;
     height    : auto;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 排版重置 
  * ------------------------------------------------------------------- */
 div,
 dl,
 dt,
 dd,
 ul,
 ol,
 li,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 pre,
 form,
 p,
 blockquote,
 th,
 td {
     margin  : 0;
     padding : 0;
 }
 
 p {
     font-size      : inherit;
     text-rendering : optimizeLegibility;
 }
 
 em,
 i {
     font-style  : italic;
     line-height : inherit;
 }
 
 strong,
 b {
     font-weight : bold;
     line-height : inherit;
 }
 
 small {
     font-size   : 60%;
     line-height : inherit;
 }
 
 ol,
 ul {
     list-style : none;
 }
 
 li {
     display : block;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 链接
  * ------------------------------------------------------------------- */
 a {
     text-decoration : none;
     line-height     : inherit;
 }
 
 a img {
     border : none;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 输入
  * ------------------------------------------------------------------- */
 fieldset {
     margin  : 0;
     padding : 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
     -webkit-appearance : none;
     -moz-appearance    : none;
     appearance         : none;
 }
 
 
 /* ===================================================================
  * # 网格 v2.0.1
  *
  *   -----------------------------------------------------------------
  * - 网格断点基于最大宽度媒体查询，
  *   意味着它们适用于该断点及其以下的所有断点。
  * - 没有指定宽度的网格列将自动布局为等宽列。
  * ------------------------------------------------------------------- */
 
 /* 行
  * ------------------------------------- */
 .row {
     width             : 89%;
     max-width         : 1200px;
     margin            : 0 auto;
     display           : -ms-flexbox;
     display           : -webkit-flex;
     display           : flex;
     -webkit-flex-flow : row wrap;
     -ms-flex-flow     : row wrap;
     flex-flow         : row wrap;
 }
 
 .row .row {
     width        : auto;
     max-width    : none;
     margin-left  : -20px;
     margin-right : -20px;
 }
 
 /* 列
  * -------------------------------------- */
 .column {
     -webkit-flex : 1 1 0%;
     -ms-flex     : 1 1 0%;
     flex         : 1 1 0%;
     padding      : 0 20px;
 }
 
 .collapse>.column,
 .column.collapse {
     padding : 0;
 }
 
 /* flex行容器实用程序类
  * ----------------------------------------- */
 .row.row-wrap {
     -webkit-flex-wrap : wrap;
     -ms-flex-wrap     : wrap;
     flex-wrap         : wrap;
 }
 
 .row.row-nowrap {
     -webkit-flex-wrap : nowrap;
     -ms-flex-wrap     : none;
     flex-wrap         : nowrap;
 }
 
 .row.row-top {
     -webkit-align-items : flex-start;
     -ms-flex-align      : start;
     align-items         : flex-start;
 }
 
 .row.row-bottom {
     -webkit-align-items : flex-end;
     -ms-flex-align      : end;
     align-items         : flex-end;
 }
 
 .row.row-center {
     -webkit-align-items : center;
     -ms-flex-align      : center;
     align-items         : center;
 }
 
 .row.row-stretch {
     -webkit-align-items : stretch;
     -ms-flex-align      : stretch;
     align-items         : stretch;
 }
 
 .row.row-baseline {
     -webkit-align-items : baseline;
     -ms-flex-align      : baseline;
     align-items         : baseline;
 }

 .row.full-width {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow-x: auto; /* 添加横向滚动条 */
}

.column {
    flex: 1;
    padding: 10px;
}

@media screen and (max-width: 768px) {
    .column {
        flex-basis: 100%;
    }
}

 /* flex项实用程序对齐类
  * ----------------------------------------- */
 .align-center {
     margin              : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-left {
     margin-right        : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-right {
     margin-left         : auto;
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-x-center {
     margin-right : auto;
     margin-left  : auto;
 }
 
 .align-x-left {
     margin-right : auto;
 }
 
 .align-x-right {
     margin-left : auto;
 }
 
 .align-y-center {
     -webkit-align-self  : center;
     -ms-flex-item-align : center;
     align-self          : center;
 }
 
 .align-y-top {
     -webkit-align-self  : flex-start;
     -ms-flex-item-align : start;
     align-self          : flex-start;
 }
 
 .align-y-bottom {
     -webkit-align-self  : flex-end;
     -ms-flex-item-align : end;
     align-self          : flex-end;
 }
 
 /* 大屏幕列宽度
  * -------------------------------------- */
 .large-1 {
     -webkit-flex : 0 0 8.33333%;
     -ms-flex     : 0 0 8.33333%;
     flex         : 0 0 8.33333%;
     max-width    : 8.33333%;
 }
 
 .large-2 {
     -webkit-flex : 0 0 16.66667%;
     -ms-flex     : 0 0 16.66667%;
     flex         : 0 0 16.66667%;
     max-width    : 16.66667%;
 }
 
 .large-3 {
     -webkit-flex : 0 0 25%;
     -ms-flex     : 0 0 25%;
     flex         : 0 0 25%;
     max-width    : 25%;
 }
 
 .large-4 {
     -webkit-flex : 0 0 33.33333%;
     -ms-flex     : 0 0 33.33333%;
     flex         : 0 0 33.33333%;
     max-width    : 33.33333%;
 }
 
 .large-5 {
     -webkit-flex : 0 0 41.66667%;
     -ms-flex     : 0 0 41.66667%;
     flex         : 0 0 41.66667%;
     max-width    : 41.66667%;
 }
 
 .large-6,
 .large-half {
     -webkit-flex : 0 0 50%;
     -ms-flex     : 0 0 50%;
     flex         : 0 0 50%;
     max-width    : 50%;
 }
 
 .large-7 {
     -webkit-flex : 0 0 58.33333%;
     -ms-flex     : 0 0 58.33333%;
     flex         : 0 0 58.33333%;
     max-width    : 58.33333%;
 }
 
 .large-8 {
     -webkit-flex : 0 0 66.66667%;
     -ms-flex     : 0 0 66.66667%;
     flex         : 0 0 66.66667%;
     max-width    : 66.66667%;
 }
 
 .large-9 {
     -webkit-flex : 0 0 75%;
     -ms-flex     : 0 0 75%;
     flex         : 0 0 75%;
     max-width    : 75%;
 }
 
 .large-10 {
     -webkit-flex : 0 0 83.33333%;
     -ms-flex     : 0 0 83.33333%;
     flex         : 0 0 83.33333%;
     max-width    : 83.33333%;
 }
 
 .large-11 {
     -webkit-flex : 0 0 91.66667%;
     -ms-flex     : 0 0 91.66667%;
     flex         : 0 0 91.66667%;
     max-width    : 91.66667%;
 }
 
 .large-12,
 .large-full {
     -webkit-flex : 0 0 100%;
     -ms-flex     : 0 0 100%;
     flex         : 0 0 100%;
     max-width    : 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 中等屏幕设备
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .row .row {
         margin-left  : -16px;
         margin-right : -16px;
     }
 
     .column {
         padding : 0 16px;
     }
 
     .medium-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .medium-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .medium-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .medium-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .medium-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .medium-6,
     .medium-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .medium-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .medium-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .medium-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .medium-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .medium-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .medium-12,
     .medium-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## 平板电脑
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .tab-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .tab-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .tab-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .tab-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .tab-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .tab-6,
     .tab-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .tab-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .tab-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .tab-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .tab-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .tab-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .tab-12,
     .tab-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 
     .hide-on-tablet {
         display : none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## 移动设备
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width         : 100%;
         padding-left  : 25px;
         padding-right : 25px;
     }
 
     .row .row {
         margin-left   : -10px;
         margin-right  : -10px;
         padding-left  : 0;
         padding-right : 0;
     }
 
     .column {
         padding : 0 10px;
     }
 
     .mob-1 {
         -webkit-flex : 0 0 8.33333%;
         -ms-flex     : 0 0 8.33333%;
         flex         : 0 0 8.33333%;
         max-width    : 8.33333%;
     }
 
     .mob-2 {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .mob-3 {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .mob-4 {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .mob-5 {
         -webkit-flex : 0 0 41.66667%;
         -ms-flex     : 0 0 41.66667%;
         flex         : 0 0 41.66667%;
         max-width    : 41.66667%;
     }
 
     .mob-6,
     .mob-half {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .mob-7 {
         -webkit-flex : 0 0 58.33333%;
         -ms-flex     : 0 0 58.33333%;
         flex         : 0 0 58.33333%;
         max-width    : 58.33333%;
     }
 
     .mob-8 {
         -webkit-flex : 0 0 66.66667%;
         -ms-flex     : 0 0 66.66667%;
         flex         : 0 0 66.66667%;
         max-width    : 66.66667%;
     }
 
     .mob-9 {
         -webkit-flex : 0 0 75%;
         -ms-flex     : 0 0 75%;
         flex         : 0 0 75%;
         max-width    : 75%;
     }
 
     .mob-10 {
         -webkit-flex : 0 0 83.33333%;
         -ms-flex     : 0 0 83.33333%;
         flex         : 0 0 83.33333%;
         max-width    : 83.33333%;
     }
 
     .mob-11 {
         -webkit-flex : 0 0 91.66667%;
         -ms-flex     : 0 0 91.66667%;
         flex         : 0 0 91.66667%;
         max-width    : 91.66667%;
     }
 
     .mob-12,
     .mob-full {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 
     .hide-on-mobile {
         display : none;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## 小型移动设备 <= 400px
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 400px) {
     .row {
         padding-left  : 22px;
         padding-right : 22px;
     }
 
     .row .row {
         margin-left  : 0;
         margin-right : 0;
     }
 
     .column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
         padding      : 0;
     }
 }
 
 
 /* ===================================================================
  * # 块网格
  *
  * -------------------------------------------------------------------
  * 在父/行级别定义等大小的列。
  * ------------------------------------------------------------------- */
 .block-large-1-8>.column {
     -webkit-flex : 0 0 12.5%;
     -ms-flex     : 0 0 12.5%;
     flex         : 0 0 12.5%;
     max-width    : 12.5%;
 }
 
 .block-large-1-6>.column {
     -webkit-flex : 0 0 16.66667%;
     -ms-flex     : 0 0 16.66667%;
     flex         : 0 0 16.66667%;
     max-width    : 16.66667%;
 }
 
 .block-large-1-5>.column {
     -webkit-flex : 0 0 20%;
     -ms-flex     : 0 0 20%;
     flex         : 0 0 20%;
     max-width    : 20%;
 }
 
 .block-large-1-4>.column {
     -webkit-flex : 0 0 25%;
     -ms-flex     : 0 0 25%;
     flex         : 0 0 25%;
     max-width    : 25%;
 }
 
 .block-large-1-3>.column {
     -webkit-flex : 0 0 33.33333%;
     -ms-flex     : 0 0 33.33333%;
     flex         : 0 0 33.33333%;
     max-width    : 33.33333%;
 }
 
 .block-large-1-2>.column {
     -webkit-flex : 0 0 50%;
     -ms-flex     : 0 0 50%;
     flex         : 0 0 50%;
     max-width    : 50%;
 }
 
 .block-large-full>.column {
     -webkit-flex : 0 0 100%;
     -ms-flex     : 0 0 100%;
     flex         : 0 0 100%;
     max-width    : 100%;
 }
 
 /* ------------------------------------------------------------------- 
  * ## 块网格 - 中等屏幕设备
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .block-medium-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-medium-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-medium-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-medium-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-medium-1-3>.column {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .block-medium-1-2>.column {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .block-medium-full>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## 块网格 - 平板电脑
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .block-tab-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-tab-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-tab-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-tab-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-tab-1-3>.column {
         -webkit-flex : 0 0 33.33333%;
         -ms-flex     : 0 0 33.33333%;
         flex         : 0 0 33.33333%;
         max-width    : 33.33333%;
     }
 
     .block-tab-1-2>.column {
         -webkit-flex : 0 0 50%;
         -ms-flex     : 0 0 50%;
         flex         : 0 0 50%;
         max-width    : 50%;
     }
 
     .block-tab-full>.column {
         -webkit-flex : 0 0 100%;
         -ms-flex     : 0 0 100%;
         flex         : 0 0 100%;
         max-width    : 100%;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## 块网格 - 移动设备
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .block-mob-1-8>.column {
         -webkit-flex : 0 0 12.5%;
         -ms-flex     : 0 0 12.5%;
         flex         : 0 0 12.5%;
         max-width    : 12.5%;
     }
 
     .block-mob-1-6>.column {
         -webkit-flex : 0 0 16.66667%;
         -ms-flex     : 0 0 16.66667%;
         flex         : 0 0 16.66667%;
         max-width    : 16.66667%;
     }
 
     .block-mob-1-5>.column {
         -webkit-flex : 0 0 20%;
         -ms-flex     : 0 0 20%;
         flex         : 0 0 20%;
         max-width    : 20%;
     }
 
     .block-mob-1-4>.column {
         -webkit-flex : 0 0 25%;
         -ms-flex     : 0 0 25%;
         flex         : 0 0 25%;
         max-width    : 25%;
     }
 
     .block-mob-1-3>.column {
        -webkit-flex : 0 0 33.33333%;
        -ms-flex     : 0 0 33.33333%;
        flex         : 0 0 33.33333%;
        max-width    : 33.33333%;
    }

    .block-mob-1-2>.column {
        -webkit-flex : 0 0 50%;
        -ms-flex     : 0 0 50%;
        flex         : 0 0 50%;
        max-width    : 50%;
    }

    .block-mob-full>.column {
        -webkit-flex : 0 0 100%;
        -ms-flex     : 0 0 100%;
        flex         : 0 0 100%;
        max-width    : 100%;
    }
}

/* ------------------------------------------------------------------- 
 * ## 块网格 - 小型移动设备 <= 400px
 * ------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
    .stack>.column {
        -webkit-flex : 0 0 100%;
        -ms-flex     : 0 0 100%;
        flex         : 0 0 100%;
        max-width    : 100%;
        width        : 100%;
        margin-left  : 0;
        margin-right : 0;
        padding      : 0;
    }
}


/* ===================================================================
 * # 其他
 *
 * ------------------------------------------------------------------- */
.group:after {
    content : "";
    display : table;
    clear   : both;
}

/* 其他辅助类
 * -------------------------------------- */
.is-hidden {
    display : none;
}

.is-invisible {
    visibility : hidden;
}

.antialiased {
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}

.overflow-hidden {
    overflow : hidden;
}

.remove-bottom {
    margin-bottom : 0;
}

.add-half-bottom {
    margin-bottom : 1.6rem !important;
}

.add-bottom {
    margin-bottom : 3.2rem !important;
}

.no-border {
    border : none;
}

.full-width {
    width : 100%;
}

.text-center {
    text-align : center;
}

.text-left {
    text-align : left;
}

.text-right {
    text-align : right;
}

.pull-left {
    float : left;
}

.pull-right {
    float : right;
}