@charset "UTF-8";
      /**
* mui.css
*
v1.0.0  (2020.5.27) *****************************************************************************
*
v1.0.1  (2020.5.30) *****************************************************************************
* w-(sm-/md-/lg-/xl-)5,10,25,50,75,100,auto(%)
* border-bottom-only 
* 表单相关：
*    去掉form-bar 修改input框和label的定位方式
*    label-inline option-inline改为 inline 
*    去掉 form 中的fieldset legend form-section 等元素和样式
*    去掉 form-(sm-/md-/lg-/xl-) expand(扩张版)/contract(紧缩版)
*    label.required
*    
v1.0.2  (2020.6.12) *****************************************************************************
* 侧边导航
*
v1.0.8  (2020.10.23) ****************************************************************************
* 输入框 边框radius 5->2 focus 去除阴影 label行高
* 增加 border-left/right/top-only
* 增加 cursor
* 增加 zindex-
* 增加 opacity
* 增加 right/left/top/bottom-0/10/20/30/40/50
* form-label line-height设置
* 文本溢出 .text-overflow-ellipsis(省略号)/normal
* 
1. html,body
2. header
3. content
         基本元素：
            a.背景 bg-
               颜色 bg-
                  primary secondary success info warning danger 
                  blue--light--dark gray--light--dark green--dark cyan yellow red--light orange purple pink
                  light dark white black transparent
               位置 bg-(position-)
                  top-left top-center/top top-right center-left/left center-center/center center-right/right bottom-left bottom-center/bottom bottom-right
               尺寸 bg-(size-)cover contain x-100 y-100 100
               重复 bg-repeat(-x/y/no)

            b.字体 text-
               系列 font-family-
                     MicrosoftYaHei TimesNewRoman
               对齐 text-(sm-/md-/lg-/xl-)
                     justify left right center
               颜色 text-
                     primary secondary success info warning danger 
                     blue--light gray--light--dark green--dark cyan yellow red orange purple pink muted
                     light dark white black
               大小 text-
                  xs=0.75rem sm=0.875rem md=1rem lg=25rem xl=2rem
                  1=0.75rem 2=0.875rem 3=1rem 4=1.25rem 5=1.5rem 6=2rem 7=2.5rem 8=3rem 9=4rem 10=5rem
                  12px/14px/16px/18px/20px/24px/28px/32px/36px
                  vw-1/2/3/4/5/6/7/8/9/10
               粗细 font-weight- /bold
                  light/300 normal/400 500 600 bold/700 lighter bolder
               大小写 text-
                  lowercase/uppercase/capitalize
               下划线 text-underline/underline
               斜体 text-italic/italic
               换行 text-
                  wrap nowrap truncate break hide
               格式化 text-decoration-none/text-reset
               文本溢出 text-overflow-ellipsis(省略号)/normal
               缩进 text-indent-(n)1/2/3/4/5
            c.margin与padding
               m-mb-ml-mt-mr-mx-my-
               p-pb-pl-pt-pr-px-py-
               (sm/md/lg/xl-)
               负数为n
               0,1=0.25rem,2=0.5rem,3=1rem,4=1.5rem,5=3rem,n1..5,auto
            d.宽高
               w-sm/md/lg/xl-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100/auto(%)
               w-1400/1300/1200/1100/
                  1000/950/900/850/800/750/700/650/600/550/500/450/400/350/300/250/200/
                  190/180/170/160/150/140/130/120/110/100/
                  90/85/80/75/70/65/60/55/50/45/40/35/30/25/20/15/10/5(px)
               w-3-1/2
               w-6-1/5
               w-7-1/2/3/4/5/6
            vw-sm/md/lg/xl-5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100
               
               h-sm/md/lg/xl-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100/auto(%)
               h-sm/md/lg/xl-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100vw
               h-sm(30px)-md(45px)-lg(50px)-xl(60px) （height 和line-height定制）
               h-1000/950/900/850/800/750/700/650/600/550/500/450/400/350/300/250/200/
                  190/180/170/160/150/140/130/120/110/100/
                  90/85/80/75/70/65/60/55/50/45/40/35/30/25/20/15/10/5(px)
            vh-5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100

               mw-100/mh-100/min-vw-100/min-vh-100
            e.边框 border-
               border border-top border-right border-bottom border-bottom-only border-left 
               border-0 border-top-0 border-right-0 border-bottom-0 border-left-0
               颜色 border-primary secondary success info warning danger light dark white transparent green-dark
               粗细 border-1px/2px/3px/4px/5px/6px/7px/8px/9px/10px
               风格 border-dotted dashed solid double groove ridge inset outset
               圆角 rounded-sm(0.2rem) -lg(0.3rem) -circle(50%) -pill(50rem) -0
                     rounded/rounded-top-left/rounded-top-right/rounded-bottom-left/rounded-bottom-right
                     /rounded-top/rounded-right/rounded-bottom/rounded-left(0.25rem)

            f.阴影 elevation-0/1/2/3/4/5
            g.隐藏与显示 d-
               visible invisible hide(d-none) show(d-block)
               d-(sm-/md-/lg-/xl-)-none/inline/inline-block/block/table/table-row/table-cell/flex/inline-flex
            h.溢出 overflow(-x/-y)-auto/hidden/visible/scroll 
               scrollbar-none(去掉滚动条) scrollbar-gray(定制灰色滚动条)
            i.定位 position-
               position-static/relative/absolute/fixed/sticky
               fixed-top/bottom
               absolute-right/left/top/bottom
               right/left/top/bottom/rw-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100
            j.浮动 float-(sm-/md-/lg-/xl-) left/right/none clear
            k.栅格
               .row
               .col-(sm-/md-/lg-/xl)-1/2/3...12/auto
               .order-(sm-/md-/lg-/xl)-1/2/3...12/first/last
               .offset-(sm-/md-/lg-/xl)-1/2/3...11
            l.弹性布局 flex(d-flex)
               .flex- row 水平左起/column 水平右起/row-reverse 垂直上起/column-reverse垂直下起(flex-direction 
               .flex- wrap/nowrap/wrap-reverse 换行且第一行在下方(flex-wrap 换行方式)
               .justify-content- start/end/center/between 两端对齐/around 两侧间隔相等(主轴main对齐方式)
               .align-items- start/end/center/baseline/stretch 未设高度时占满容器(交叉轴cross对齐方式)
               .align-content- start/end/center/between/around/stretch (多根轴线的对齐方式)
               .flex-grow- 0/1 (项目放大比例)
               .flex-shrink- 0/1 (项目缩小比例)
               .align-self- auto/start/end/center/baseline/stretch (单个项目对齐方式 默认auto继承父元素)
               .flex-fill
            m.分隔线 .divider .divider-vertical
            .divider-1px/2px/3px/4px/5px/6px/7px/8px/9px/10px
            n.光标 cursor .cursor-pointer/text
            o.层级 zindex- 010/09/08/07/06/05/04/03/02/01/0/1/2/3/4/5/6/7/8/9/10/99/999/9999/99999/999999
            p.透明度 opacity-0/10/20/30/40/50/60/70/80/90/100
         q.ul列表 
            .list-style-none
            .list-style
            .list-style-type-disc/circle/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha
         r.grid布局
            .grid-container 
            (.grid-2/2r/3/3r/4/6/6r/9/12/12r/16/20/a/b/c/d/e/f)
            (.grid-col-1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/1-2/2-1/1-2-1/1-3/3-1/1-3-1)
            (.grid-row-1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/1-2/2-1/1-2-1/1-3/3-1/1-3-1)
                  ->.grid-item
            .grid-container  (.grid-a/b/c/d/e/f)
                  ->.grid-item-area
            row-gap-/column-gap-/gap- 0/1/2/3/4/5(px)

      扩展元素：
            a.M-D导航
            .wrapper
               .md-sidebar
                  .md-header
                  .md-wrapper
               .md-content
                  .md-header
                  .md-wrapper
      
            b.表单元素 form
               .input-group (.inline .prepend/append-icon .icon-date/password/envelope-after)
                     输入元素：
                        .form-input
                           type=text/search/number/tel/email/password/date/datetime/month
                           .timer
                        .form-textarea
                        .form-select
                           .select/.searchableSelect
                        .option-group (.inline )
                           .form-option
                                 .form-radio/.form-checkbox
                                 .option-label
                        .form-upload
                           .form-file
                     按钮：
                        .icon-scan
                        .btn-scan(可点击)
                        .btn-camera(可点击)
                        .form-button
                     标签：
                        .form-label(.required 前置*)
               .placeholder 非表单元素 实现placeholder效果

            c.表格 table
               .table
               .table-sm
               .table-bordered
               .table-borderless
               .table-striped
               .table-hover
               .table-primary/secondary/success/info/warning/danger/light/dark
               .table-active
                     .thead-dark
                     .thead-light
               .table-dark
               .table-responsive(-sm-md-lg-xl)

            d.按钮 btn
               .btn
               .btn-primary/secondary/success/info/warning/danger/light/dark
               .btn-outline-primary/secondary/success/info/warning/danger/light/dark
               .btn-link
               .btn-lg/sm
               .btn-block

            e.徽章 badge  .badge-pill .badge-primary/secondary/success/info/warning/danger/light/dark
            
            f.收缩卡片 card
               .card
               .card-header
                  .card-title
                  .card-tools
               .card-body
               .card-footer

            g.盒子 box

            h.信息框 info-box 

            i.进度条 progress 

            j.下拉菜单 dropdown

         k.面包屑 breadcrumb 

         l.下拉toogle菜单 dropdown-menu

         m.tab 选项卡

         n.模态框 

         o.kpi-box

*/
      
         :root {
            /*常规*/
            /* --primary: #007bff; */
            --primary: #6c757d;
            /*3c8dbc*/
            --blue: #007bff;
            --blue-light: #3c8dbc;
            --blue-dark: #343a4e;
            --secondary: #6c757d;
            --gray: #6c757d;
            --gray-light: #a3a3a3;
            --gray-light2: #d2d6de;
            /* 卡片 border默认颜色*/
            --gray-light3: #dee2e6;
            /* border默认颜色*/
            --gray-light4: #DBDBDB;
            /*ccc*/
            --gray-dark: #595959;
            --gray-dark2: #212529;
            /* 默认字体颜色*/
            --gray-dark3: #1F2D3D;
            /* 浅色背景字体默认颜色*/
            --success: #28a745;
            /*#00a65a;*/
            --green: #28a745;
            --green-dark: #009688;
            --green-dark2: #4B8F5B;
            --info: #17a2b8;
            /*#00c0ef;*/
            --cyan: #17a2b8;
            --warning: #ffc107;
            /*#f39c12;*/
            --yellow: #ffc107;
            --yellow-light: #EDD544;
            --danger: #dc3545;
            /*#f56954;*/
            --red: #dc3545;
            --red-light: #f56954;
            --orange: #fd7e14;
            --purple: #6f42c1;
            --pink: #e83e8c;
            --ivory: #F9F5F1;
            /* --light: #f8f9fa; */
            --light: #f5f5f5;
            --dark: #343a40;
            --white: #fff;
            --black: #000;
            --transparent: transparent;
            --disabled: 0.65;
            --muted: #6c757d;
            /*--rosered: #FF365D;
--gray: #e9e9e9;

*/
            --breakpoint-xs: 0;
            --breakpoint-sm: 576px;
            --breakpoint-md: 768px;
            --breakpoint-lg: 992px;
            --breakpoint-xl: 1200px;
            --font-family-microsoft-yahei: "Microsoft YaHei";
            --font-family-times-new-roman: "Times New Roman";
            --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      }
      /*common*/
      
      *,
      *::before,
      *::after {
            box-sizing: border-box;
            /* 默认content-box */
      }
      
      * {
            margin: 0;
            padding: 0;
      }
      
      p {
            margin: 0;
            padding: 0;
      }
      
      html,
      body {
            height: 100%;
            /*overflow: hidden;*/
            -webkit-tap-highlight-color: transparent;
      }
      
      html {
            -webkit-text-size-adjust: 100%;
      }
      
      body {
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
            /*"Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
            font-size: 1rem;
            font-weight: 400;
            color: var(--gray-dark2);
            background-color: var(--white);
            line-height: 1.5;
            text-align: left;
      }
      
      img {
            vertical-align: middle;
            border-style: none;
      }
      
      .img-circle {
            border-radius: 50%;
      }
      
      .img-fluid {
            max-width: 100%;
            height: auto;
      }
      
      iframe {
            width: 100%;
            height: 100%;
            border: 0;
      }
      
      a {
            color: var(--secondary);
            /*var(--primary)*/
            text-decoration: none;
            background-color: transparent;
            cursor: pointer
      }
      
      .hover-show {
            visibility: hidden;
      }
      
      .hover-trigger:hover .hover-show {
            visibility: visible;
      }
      /** a.背景 bg-
* 
*/
      /** 背景颜色 bg-
   * primary secondary success info warning danger 
   * blue--light gray--light--dark green--dark cyan yellow red orange purple pink ivory 
   * light dark white black transparent
   */
      /*bg-primary*/
      
      .bg-primary {
            background-color: var(--primary) !important;
      }
      
      a.bg-primary:hover,
      a.bg-primary:focus,
      button.bg-primary:hover,
      button.bg-primary:focus {
            background-color: #0062cc !important;
      }
      
      .bg-primary,
      .bg-primary>a {
            color: var(--white) !important;
      }
      
      .bg-primary.btn:hover {
            border-color: #0062cc;
            color: #ececec;
      }
      
      .bg-primary.btn:not(:disabled):not(.disabled):active,
      .bg-primary.btn:not(:disabled):not(.disabled).active,
      .bg-primary.btn:active,
      .bg-primary.btn.active {
            background-color: #0062cc !important;
            border-color: #005cbf;
            color: var(--white);
      }
      /*bg-secondary*/
      
      .bg-secondary {
            background-color: var(--secondary) !important;
      }
      
      a.bg-secondary:hover,
      a.bg-secondary:focus,
      button.bg-secondary:hover,
      button.bg-secondary:focus {
            background-color: #545b62 !important;
      }
      
      .bg-secondary,
      .bg-secondary>a {
            color: var(--white) !important;
      }
      
      .bg-secondary.btn:hover {
            border-color: #545b62;
            color: #ececec;
      }
      
      .bg-secondary.btn:not(:disabled):not(.disabled):active,
      .bg-secondary.btn:not(:disabled):not(.disabled).active,
      .bg-secondary.btn:active,
      .bg-secondary.btn.active {
            background-color: #545b62 !important;
            border-color: #4e555b;
            color: var(--white);
      }
      /*bg-success*/
      
      .bg-success {
            background-color: var(--success) !important;
      }
      
      a.bg-success:hover,
      a.bg-success:focus,
      button.bg-success:hover,
      button.bg-success:focus {
            background-color: #1e7e34 !important;
      }
      
      .bg-success,
      .bg-success>a {
            color: var(--white) !important;
      }
      
      .bg-success.btn:hover {
            border-color: #1e7e34;
            color: #ececec;
      }
      
      .bg-success.btn:not(:disabled):not(.disabled):active,
      .bg-success.btn:not(:disabled):not(.disabled).active,
      .bg-success.btn:active,
      .bg-success.btn.active {
            background-color: #1e7e34 !important;
            border-color: #1c7430;
            color: var(--white);
      }
      /*bg-info*/
      
      .bg-info {
            background-color: var(--info) !important;
      }
      
      a.bg-info:hover,
      a.bg-info:focus,
      button.bg-info:hover,
      button.bg-info:focus {
            background-color: #117a8b !important;
      }
      
      .bg-info,
      .bg-info>a {
            color: var(--white) !important;
      }
      
      .bg-info.btn:hover {
            border-color: #117a8b;
            color: #ececec;
      }
      
      .bg-info.btn:not(:disabled):not(.disabled):active,
      .bg-info.btn:not(:disabled):not(.disabled).active,
      .bg-info.btn:active,
      .bg-info.btn.active {
            background-color: #117a8b !important;
            border-color: #10707f;
            color: var(--white);
      }
      /*bg-warning*/
      
      .bg-warning {
            background-color: var(--warning) !important;
      }
      
      a.bg-warning:hover,
      a.bg-warning:focus,
      button.bg-warning:hover,
      button.bg-warning:focus {
            background-color: #d39e00 !important;
      }
      
      .bg-warning,
      .bg-warning>a {
            color: var(--gray-dark3) !important;
      }
      
      .bg-warning.btn:hover {
            border-color: #d39e00;
            color: #121a24;
      }
      
      .bg-warning.btn:not(:disabled):not(.disabled):active,
      .bg-warning.btn:not(:disabled):not(.disabled).active,
      .bg-warning.btn:active,
      .bg-warning.btn.active {
            background-color: #d39e00 !important;
            border-color: #c69500;
            color: var(--gray-dark3);
      }
      /*bg-danger*/
      
      .bg-danger {
            background-color: var(--danger) !important;
      }
      
      a.bg-danger:hover,
      a.bg-danger:focus,
      button.bg-danger:hover,
      button.bg-danger:focus {
            background-color: #bd2130 !important;
      }
      
      .bg-danger,
      .bg-danger>a {
            color: var(--white) !important;
      }
      
      .bg-danger.btn:hover {
            border-color: #bd2130;
            color: #ececec;
      }
      
      .bg-danger.btn:not(:disabled):not(.disabled):active,
      .bg-danger.btn:not(:disabled):not(.disabled).active,
      .bg-danger.btn:active,
      .bg-danger.btn.active {
            background-color: #bd2130 !important;
            border-color: #b21f2d;
            color: var(--white);
      }
      /*bg-blue*/
      
      .bg-blue {
            background-color: var(--bg-blue) !important;
      }
      
      .bg-blue,
      .bg-blue>a {
            color: var(--white) !important;
      }
      
      .bg-blue.btn:hover {
            border-color: #0062cc;
            color: #ececec;
      }
      
      .bg-blue.btn:not(:disabled):not(.disabled):active,
      .bg-blue.btn:not(:disabled):not(.disabled).active,
      .bg-blue.btn:active,
      .bg-blue.btn.active {
            background-color: #0062cc !important;
            border-color: #005cbf;
            color: var(--white);
      }
      /*bg-blue-light*/
      
      .bg-blue-light {
            background-color: var(--blue-light) !important;
      }
      
      .bg-blue-light,
      .bg-blue-light>a {
            color: var(--white) !important;
      }
      
      .bg-blue-light.btn:hover {
            border-color: #307095;
            color: #ececec;
      }
      
      .bg-blue-light.btn:not(:disabled):not(.disabled):active,
      .bg-blue-light.btn:not(:disabled):not(.disabled).active,
      .bg-blue-light.btn:active,
      .bg-blue-light.btn.active {
            background-color: #307095 !important;
            border-color: #2d698c;
            color: var(--white);
      }
      /*bg-blue-dark*/
      
      .bg-blue-dark {
            background-color: var(--blue-dark) !important;
      }
      
      .bg-blue-dark,
      .bg-blue-dark>a {
            color: var(--white) !important;
      }
      /*bg-gray*/
      
      .bg-gray {
            background-color: var(--gray) !important;
      }
      
      .bg-gray,
      .bg-gray>a {
            color: var(--white) !important;
      }
      
      .bg-gray.btn:hover {
            border-color: #545b62;
            color: #ececec;
      }
      
      .bg-gray.btn:not(:disabled):not(.disabled):active,
      .bg-gray.btn:not(:disabled):not(.disabled).active,
      .bg-gray.btn:active,
      .bg-gray.btn.active {
            background-color: #545b62 !important;
            border-color: #4e555b;
            color: var(--white);
      }
      /*bg-gray-light*/
      
      .bg-gray-light {
            background-color: var(--gray-light) !important;
      }
      
      .bg-gray-light,
      .bg-gray-light>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-gray-light2*/
      
      .bg-gray-light2 {
            background-color: var(--gray-light2) !important;
      }
      
      .bg-gray-light2,
      .bg-gray-light2>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-gray-light3*/
      
      .bg-gray-light3 {
            background-color: var(--gray-light3) !important;
      }
      
      .bg-gray-light3,
      .bg-gray-light3>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-gray-light4*/
      
      .bg-gray-light4 {
            background-color: var(--gray-light4) !important;
      }
      
      .bg-gray-light4,
      .bg-gray-light4>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-gray-dark*/
      
      .bg-gray-dark {
            background-color: var(--gray-dark) !important;
      }
      
      .bg-gray-dark,
      .bg-gray-dark>a {
            color: var(--white) !important;
      }
      
      .bg-gray-dark.btn:hover {
            border-color: #1d2124;
            color: #ececec;
      }
      
      .bg-gray-dark.btn:not(:disabled):not(.disabled):active,
      .bg-gray-dark.btn:not(:disabled):not(.disabled).active,
      .bg-gray-dark.btn:active,
      .bg-gray-dark.btn.active {
            background-color: #1d2124 !important;
            border-color: #171a1d;
            color: var(--white);
      }
      /*bg-gray-dark3*/
      
      .bg-gray-dark3 {
            background-color: var(--gray-dark3) !important;
      }
      
      .bg-gray-dark3,
      .bg-gray-dark3>a {
            color: var(--white) !important;
      }
      /*bg-gray-dark2*/
      
      .bg-gray-dark2 {
            background-color: var(--gray-dark2) !important;
      }
      
      .bg-gray-dark2,
      .bg-gray-dark2>a {
            color: var(--white) !important;
      }
      /*bg-green*/
      
      .bg-green {
            background-color: var(--green) !important;
      }
      
      .bg-green,
      .bg-green>a {
            color: var(--white) !important;
      }
      
      .bg-green.btn:hover {
            border-color: #1e7e34;
            color: #ececec;
      }
      
      .bg-green.btn:not(:disabled):not(.disabled):active,
      .bg-green.btn:not(:disabled):not(.disabled).active,
      .bg-green.btn:active,
      .bg-green.btn.active {
            background-color: #1e7e34 !important;
            border-color: #1c7430;
            color: var(--white);
      }
      /*bg-green-dark*/
      
      .bg-green-dark {
            background-color: var(--green-dark) !important;
      }
      
      .bg-green-dark,
      .bg-green-dark>a {
            color: var(--white) !important;
      }
      /*bg-green-dark2*/
      
      .bg-green-dark2 {
            background-color: var(--green-dark2) !important;
      }
      
      .bg-green-dark2,
      .bg-green-dark2>a {
            color: var(--white) !important;
      }
      /*bg-cyan*/
      
      .bg-cyan {
            background-color: var(--cyan) !important;
      }
      
      .bg-cyan,
      .bg-cyan>a {
            color: var(--white) !important;
      }
      
      .bg-cyan.btn:hover {
            border-color: #117a8b;
            color: #ececec;
      }
      
      .bg-cyan.btn:not(:disabled):not(.disabled):active,
      .bg-cyan.btn:not(:disabled):not(.disabled).active,
      .bg-cyan.btn:active,
      .bg-cyan.btn.active {
            background-color: #117a8b !important;
            border-color: #10707f;
            color: var(--white);
      }
      /*bg-yellow*/
      
      .bg-yellow {
            background-color: var(--yellow) !important;
      }
      
      .bg-yellow,
      .bg-yellow>a {
            color: var(--gray-dark3) !important;
      }
      
      .bg-yellow.btn:hover {
            border-color: #d39e00;
            color: #121a24;
      }
      
      .bg-yellow.btn:not(:disabled):not(.disabled):active,
      .bg-yellow.btn:not(:disabled):not(.disabled).active,
      .bg-yellow.btn:active,
      .bg-yellow.btn.active {
            background-color: #d39e00 !important;
            border-color: #c69500;
            color: var(--gray-dark3);
      }
      /*bg-yellow-light*/
      
      .bg-yellow-light {
            background-color: var(--yellow-light) !important;
      }
      
      .bg-yellow-light,
      .bg-yellow-light>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-red*/
      
      .bg-red {
            background-color: var(--red) !important;
      }
      
      .bg-red,
      .bg-red>a {
            color: var(--white) !important;
      }
      
      .bg-red.btn:hover {
            border-color: #bd2130;
            color: #ececec;
      }
      
      .bg-red.btn:not(:disabled):not(.disabled):active,
      .bg-red.btn:not(:disabled):not(.disabled).active,
      .bg-red.btn:active,
      .bg-red.btn.active {
            background-color: #bd2130 !important;
            border-color: #b21f2d;
            color: var(--white);
      }
      /*bg-red-light*/
      
      .bg-red-light {
            background-color: var(--red-light);
      }
      
      .bg-red-light,
      .bg-red-light>a {
            color: var(--white) !important;
      }
      /*bg-orange*/
      
      .bg-orange {
            background-color: var(--orange) !important;
      }
      
      .bg-orange,
      .bg-orange>a {
            color: var(--gray-dark3) !important;
      }
      
      .bg-orange.btn:hover {
            border-color: #dc6502;
            color: #121a24;
      }
      
      .bg-orange.btn:not(:disabled):not(.disabled):active,
      .bg-orange.btn:not(:disabled):not(.disabled).active,
      .bg-orange.btn:active,
      .bg-orange.btn.active {
            background-color: #dc6502 !important;
            border-color: #cf5f02;
            color: var(--white);
      }
      /*bg-purple*/
      
      .bg-purple {
            background-color: var(--purple) !important;
      }
      
      .bg-purple,
      .bg-purple>a {
            color: var(--white) !important;
      }
      
      .bg-purple.btn:hover {
            border-color: #59339d;
            color: #ececec;
      }
      
      .bg-purple.btn:not(:disabled):not(.disabled):active,
      .bg-purple.btn:not(:disabled):not(.disabled).active,
      .bg-purple.btn:active,
      .bg-purple.btn.active {
            background-color: #59339d !important;
            border-color: #533093;
            color: var(--white);
      }
      /*bg-pink*/
      
      .bg-pink {
            background-color: var(--pink) !important;
      }
      
      .bg-pink,
      .bg-pink>a {
            color: var(--white) !important;
      }
      
      .bg-pink.btn:hover {
            border-color: #d91a72;
            color: #ececec;
      }
      
      .bg-pink.btn:not(:disabled):not(.disabled):active,
      .bg-pink.btn:not(:disabled):not(.disabled).active,
      .bg-pink.btn:active,
      .bg-pink.btn.active {
            background-color: #d91a72 !important;
            border-color: #ce196c;
            color: var(--white);
      }
      /*bg-ivory*/
      
      .bg-ivory {
            background-color: var(--ivory) !important;
      }
      
      .bg-ivory,
      .bg-ivory>a {
            color: var(--gray-dark3) !important;
      }
      /*bg-light*/
      
      .bg-light {
            background-color: var(--light) !important;
      }
      
      a.bg-light:hover,
      a.bg-light:focus,
      button.bg-light:hover,
      button.bg-light:focus {
            background-color: #dae0e5 !important;
      }
      
      .bg-light,
      .bg-light>a {
            color: var(--gray-dark3) !important;
      }
      
      .bg-light.btn:hover {
            border-color: #dae0e5;
            color: #121a24;
      }
      
      .bg-light.btn:not(:disabled):not(.disabled):active,
      .bg-light.btn:not(:disabled):not(.disabled).active,
      .bg-light.btn:active,
      .bg-light.btn.active {
            background-color: #dae0e5 !important;
            border-color: #d3d9df;
            color: var(--gray-dark3);
      }
      /*bg-dark*/
      
      .bg-dark {
            background-color: var(--dark) !important;
      }
      
      a.bg-dark:hover,
      a.bg-dark:focus,
      button.bg-dark:hover,
      button.bg-dark:focus {
            background-color: #1d2124 !important;
      }
      
      .bg-dark,
      .bg-dark>a {
            color: var(--white) !important;
      }
      
      .bg-dark.btn:hover {
            border-color: #1d2124;
            color: #ececec;
      }
      
      .bg-dark.btn:not(:disabled):not(.disabled):active,
      .bg-dark.btn:not(:disabled):not(.disabled).active,
      .bg-dark.btn:active,
      .bg-dark.btn.active {
            background-color: #1d2124 !important;
            border-color: #171a1d;
            color: var(--white);
      }
      /*bg-white*/
      
      .bg-white {
            background-color: var(--white) !important;
      }
      
      .bg-white,
      .bg-white>a {
            color: var(--gray-dark3) !important;
      }
      
      .bg-white.btn:hover {
            border-color: #e6e6e6;
            color: #121a24;
      }
      
      .bg-white.btn:not(:disabled):not(.disabled):active,
      .bg-white.btn:not(:disabled):not(.disabled).active,
      .bg-white.btn:active,
      .bg-white.btn.active {
            background-color: #e6e6e6 !important;
            border-color: #dfdfdf;
            color: var(--gray-dark3);
      }
      /*bg-black*/
      
      .bg-black {
            background-color: var(--black);
      }
      
      .bg-black,
      .bg-black>a {
            color: var(--white) !important;
      }
      /*bg-transparent*/
      
      .bg-transparent {
            background-color: transparent !important;
      }
      
      .bg-transparent,
      .bg-transparent>a {
            color: var(--gray-dark3) !important;
      }
      /*disabled*/
      
      [class^=bg-].disabled {
            opacity: .65;
      }
      /** 背景定位 bg-(position-)
   * top-left
   * top-center/top
   * top-right
   * center-left/left
   * center-center/center
   * center-right/right
   * bottom-left
   * bottom-center/bottom
   * bottom-right
   */
      
      .bg-position-top-left,
      .bg-top-left {
            background-position: top left;
      }
      
      .bg-position-top-center,
      .bg-position-top,
      .bg-top-center,
      .bg-top {
            background-position: top center;
      }
      
      .bg-position-top-right,
      .bg-top-right {
            background-position: top right;
      }
      
      .bg-position-center-left,
      .bg-position-left,
      .bg-center-left,
      .bg-left {
            background-position: center left;
      }
      
      .bg-position-center-center,
      .bg-position-center,
      .bg-center-center,
      .bg-center {
            background-position: center center;
      }
      
      .bg-position-center-right,
      .bg-position-right,
      .bg-center-right,
      .bg-right {
            background-position: center right;
      }
      
      .bg-position-bottom-left,
      .bg-bottom-left {
            background-position: bottom left;
      }
      
      .bg-position-bottom-center,
      .bg-position-bottom,
      .bg-bottom-center,
      .bg-bottom {
            background-position: bottom center;
      }
      
      .bg-position-bottom-right,
      .bg-bottom-right {
            background-position: bottom right;
      }
      /** 背景尺寸 bg-(size-)
   * cover
   * contain
   * x-100
   * y-100
   * 100
   */
      
      .bg-size-cover,
      .bg-cover {
            background-size: cover;
      }
      
      .bg-size-contain,
      .bg-contain {
            background-size: contain;
      }
      
      .bg-size-x-100,
      .bg-x-100 {
            background-size: 100% auto;
      }
      
      .bg-size-y-100,
      .bg-y-100 {
            background-size: auto 100%;
      }
      
      .bg-size-100,
      .bg-100 {
            background-size: 100% 100%;
      }
      /** 背景重复 bg-repeat(x/y/no)
   */
      
      .bg-repeat {
            background-repeat: repeat;
      }
      
      .bg-repeat-x {
            background-repeat: repeat-x;
      }
      
      .bg-repeat-y {
            background-repeat: repeat-y;
      }
      
      .bg-repeat-no {
            background-repeat: no-repeat;
      }
      /** 背景是否固定 bg-attachment
   */
      
      .bg-attachment-scroll {
            background-attachment: scroll;
      }
      
      .bg-attachment-fixed {
            background-attachment: fixed;
      }
      
      .bg-attachment-local {
            background-attachment: local;
      }
      
      .bg-attachment-initial {
            background-attachment: initial;
      }
      /** b.字体
*
*/
      /** 字体系列 font-family-
   * MicrosoftYaHei
   */
      
      .font-family-microsoft-yahei,
      .text-microsoft-yahei {
            font-family: var(--font-family-microsoft-yahei) !important;
      }
      
      .font-family-times-new-roman,
      .text-times-new-roman {
            font-family: var(--font-family-times-new-roman) !important;
      }
      
      .font-family-sans-serif,
      .text-sans-serif {
            font-family: var(--font-family-sans-serif) !important;
      }
      
      .font-family-monospace,
      .text-monospace {
            font-family: var(--font-family-monospace) !important;
      }
      /** 字体对齐 text-(sm-/md-/lg-/xl-)
   * justify left right center
   */
      
      .text-justify {
            text-align: justify !important;
            text-align-last: justify !important;
      }
      
      .text-left {
            text-align: left !important;
      }
      
      .text-right {
            text-align: right !important;
      }
      
      .text-center {
            text-align: center !important;
      }
      
      .vertical-align-baseline {
            vertical-align: baseline;
      }
      
      .vertical-align-top {
            vertical-align: top;
      }
      
      .vertical-align-middle {
            vertical-align: middle;
      }
      
      .vertical-align-bottom {
            vertical-align: bottom;
      }
      
      @media (min-width: 576px) {
            .text-sm-left {
               text-align: left !important;
            }
            .text-sm-right {
               text-align: right !important;
            }
            .text-sm-center {
               text-align: center !important;
            }
      }
      
      @media (min-width: 768px) {
            .text-md-left {
               text-align: left !important;
            }
            .text-md-right {
               text-align: right !important;
            }
            .text-md-center {
               text-align: center !important;
            }
      }
      
      @media (min-width: 992px) {
            .text-lg-left {
               text-align: left !important;
            }
            .text-lg-right {
               text-align: right !important;
            }
            .text-lg-center {
               text-align: center !important;
            }
      }
      
      @media (min-width: 1200px) {
            .text-xl-left {
               text-align: left !important;
            }
            .text-xl-right {
               text-align: right !important;
            }
            .text-xl-center {
               text-align: center !important;
            }
      }
      /** 字体颜色 text-
   * primary secondary success info warning danger 
   * blue--light gray--light--dark green--dark cyan yellow red orange purple pink 
   * light dark white black
   */
      /*text-primary*/
      
      .text-primary {
            color: var(--primary) !important;
      }
      
      a.text-primary:hover,
      a.text-primary:focus {
            color: #0056b3 !important;
      }
      /*text-secondary*/
      
      .text-secondary {
            color: var(--secondary) !important;
      }
      
      a.text-secondary:hover,
      a.text-secondary:focus {
            color: #494f54 !important;
      }
      /*text-success*/
      
      .text-success {
            color: var(--success) !important;
      }
      
      a.text-success:hover,
      a.text-success:focus {
            color: #19692c !important;
      }
      /*text-info*/
      
      .text-info {
            color: var(--info) !important;
      }
      
      a.text-info:hover,
      a.text-info:focus {
            color: #0f6674 !important;
      }
      /*text-warning*/
      
      .text-warning {
            color: var(--warning) !important;
      }
      
      a.text-warning:hover,
      a.text-warning:focus {
            color: #ba8b00 !important;
      }
      /*text-danger*/
      
      .text-danger {
            color: var(--danger) !important;
      }
      
      a.text-danger:hover,
      a.text-danger:focus {
            color: #a71d2a !important;
      }
      /*text-blue*/
      
      .text-blue {
            color: var(--primary) !important;
      }
      /*text-blue-light*/
      
      .text-blue-light {
            color: var(--blue-light) !important;
      }
      /*text-blue-dark*/
      
      .text-blue-dark {
            color: var(--blue-dark) !important;
      }
      /*text-gray*/
      
      .text-gray {
            color: var(--gray) !important;
      }
      /*text-gray-light*/
      
      .text-gray-light {
            color: var(--gray-light) !important;
      }
      /*text-gray-light2*/
      
      .text-gray-light2 {
            color: var(--gray-light2) !important;
      }
      /*text-gray-light3*/
      
      .text-gray-light3 {
            color: var(--gray-light3) !important;
      }
      /*text-gray-light4*/
      
      .text-gray-light4 {
            color: var(--gray-light4) !important;
      }
      /*text-gray-dark*/
      
      .text-gray-dark {
            color: var(--gray-dark) !important;
      }
      /*text-gray-dark2*/
      
      .text-gray-dark2 {
            color: var(--gray-dark2) !important;
      }
      /*text-gray-dark3*/
      
      .text-gray-dark3 {
            color: var(--gray-dark3) !important;
      }
      /*text-green*/
      
      .text-green {
            color: var(--green) !important;
      }
      /*text-green-dark*/
      
      .text-green-dark {
            color: var(--green-dark) !important;
      }
      /*text-green-dark2*/
      
      .text-green-dark2 {
            color: var(--green-dark2) !important;
      }
      /*text-cyan*/
      
      .text-cyan {
            color: var(--cyan) !important;
      }
      /*text-yellow*/
      
      .text-yellow {
            color: var(--yellow) !important;
      }
      /*text-yellow-light*/
      
      .text-yellow {
            color: var(--yellow-light) !important;
      }
      /*text-red*/
      
      .text-red {
            color: var(--red) !important;
      }
      /*text-red-light*/
      
      .text-red-light {
            color: var(--red-light) !important;
      }
      /*text-orange*/
      
      .text-orange {
            color: var(--orange) !important;
      }
      /*text-purple*/
      
      .text-purple {
            color: var(--purple) !important;
      }
      /*text-pink*/
      
      .text-pink {
            color: var(--pink) !important;
      }
      /*text-ivory*/
      
      .text-ivory {
            color: var(--ivory) !important;
      }
      /*text-muted */
      
      .text-muted {
            color: var(--muted) !important;
      }
      /*text-dark*/
      
      .text-dark {
            color: var(--dark) !important;
      }
      
      a.text-dark:hover,
      a.text-dark:focus {
            color: #121416 !important;
      }
      /*text-black*/
      
      .text-black {
            color: var(--black) !important;
      }
      /*text-light*/
      
      .text-light {
            color: var(--light) !important;
      }
      
      a.text-light:hover,
      a.text-light:focus {
            color: #cbd3da !important;
      }
      /*text-white*/
      
      .text-white {
            color: var(--white) !important;
      }
      /** 字体大小 text-
   *  xs=0.75rem sm=0.875rem md=1rem lg=25rem xl=2rem
   *  1=0.75rem 2=0.875rem 3=1rem 4=1.25rem 5=1.5rem 6=2rem 7=2.5rem 8=3rem 9=4rem 10=5rem
   *  12px/14px/16px/18px/20px/24px/28px/32px/36px
   *  vw-1/2/3/4/5/6/7/8/9/10
   */
      
      .text-xs {
            font-size: 0.75rem !important;
      }
      
      .text-sm {
            font-size: 0.875rem !important;
      }
      
      .text-md {
            font-size: 1rem !important;
      }
      
      .text-lg {
            font-size: 1.25rem !important;
      }
      
      .text-xl {
            font-size: 2rem !important;
      }
      
      .text-1 {
            font-size: 0.75rem !important;
      }
      
      .text-2 {
            font-size: 0.875rem !important;
      }
      
      .text-3 {
            font-size: 1rem !important;
      }
      
      .text-4 {
            font-size: 1.25rem !important;
      }
      
      .text-5 {
            font-size: 1.5rem !important;
      }
      
      .text-6 {
            font-size: 2rem !important;
      }
      
      .text-7 {
            font-size: 2.5rem !important;
      }
      
      .text-8 {
            font-size: 3rem !important;
      }
      
      .text-9 {
            font-size: 3.5rem !important;
      }
      
      .text-10 {
            font-size: 4rem !important;
      }
      
      .text-12px {
            font-size: 12px !important;
      }
      
      .text-14px {
            font-size: 14px !important;
      }
      
      .text-16px {
            font-size: 16px !important;
      }
      
      .text-18px {
            font-size: 18px !important;
      }
      
      .text-20px {
            font-size: 20px !important;
      }
      
      .text-24px {
            font-size: 24px !important;
      }
      
      .text-28px {
            font-size: 28px !important;
      }
      
      .text-32px {
            font-size: 32px !important;
      }
      
      .text-36px {
            font-size: 36px !important;
      }
      
      .text-vw-1 {
            font-size: 3vw !important;
      }
      
      .text-vw-2 {
            font-size: 3.3vw !important;
      }
      
      .text-vw-3 {
            font-size: 3.7vw !important;
      }
      
      .text-vw-4 {
            font-size: 4.2vw !important;
      }
      
      .text-vw-5 {
            font-size: 4.8vw !important;
      }
      
      .text-vw-6 {
            font-size: 5.5vw !important;
      }
      
      .text-vw-7 {
            font-size: 6.3vw !important;
      }
      
      .text-vw-8 {
            font-size: 7.2vw !important;
      }
      
      .text-vw-9 {
            font-size: 8.2vw !important;
      }
      
      .text-vw-10 {
            font-size: 9.5vw !important;
      }
      
      @media (min-width: 576px) {
            .text-vw-1 {
               font-size: 0.9vw !important;
            }
            .text-vw-2 {
               font-size: 0.935vw !important;
            }
            .text-vw-3 {
               font-size: 1.15vw !important;
            }
            .text-vw-4 {
               font-size: 1.5vw !important;
            }
            .text-vw-5 {
               font-size: 1.8vw !important;
            }
            .text-vw-6 {
               font-size: 2.35vw !important;
            }
            .text-vw-7 {
               font-size: 2.95vw !important;
            }
            .text-vw-8 {
               font-size: 3.5vw !important;
            }
            .text-vw-9 {
               font-size: 4.1vw !important;
            }
            .text-vw-10 {
               font-size: 4.7vw !important;
            }
      }
      /** 字体粗细 font-weight- /bold
      * light/300,normal/400,500,600,bold/700/lighter/bolder
      */
      
      .font-weight-light,
      .font-weight-300 {
            font-weight: 300 !important;
      }
      
      .font-weight-normal,
      .font-weight-400 {
            font-weight: 400 !important;
      }
      
      .font-weight-500 {
            font-weight: 500 !important;
      }
      
      .font-weight-600 {
            font-weight: 600 !important;
      }
      
      .bold,
      .font-weight-bold,
      .font-weight-700 {
            font-weight: 700 !important;
      }
      
      .font-weight-lighter {
            font-weight: lighter !important;
      }
      
      .font-weight-bolder {
            font-weight: bolder !important;
      }
      /** 字体大小写 text-
   *  lowercase/uppercase/capitalize
   */
      
      .text-lowercase {
            text-transform: lowercase !important;
      }
      
      .text-uppercase {
            text-transform: uppercase !important;
      }
      
      .text-capitalize {
            text-transform: capitalize !important;
      }
      /*  斜体 text-italic/italic */
      
      .text-italic,
      .italic {
            font-style: italic !important;
      }
      /*  下划线 text-underline/underline */
      
      .text-underline,
      .underline {
            text-decoration: underline !important;
      }
      /* 字体换行 text-
   * wrap nowrap truncate break hide
   */
      
      .text-wrap {
            white-space: normal !important;
      }
      
      .text-nowrap {
            white-space: nowrap !important;
      }
      
      .text-truncate {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
      }
      
      .text-break {
            /*单词内换行*/
            word-break: break-word !important;
            overflow-wrap: break-word !important;
      }
      
      .text-hide {
            font: 0/0 a;
            color: transparent;
            text-shadow: none;
            background-color: transparent;
            border: 0;
      }
      /*  字体格式化 text-decoration-none/text-reset */
      
      .text-decoration-none {
            text-decoration: none !important;
      }
      
      .text-reset {
            color: inherit !important;
      }
      /* 文本溢出 .text-overflow-ellipsis(省略号)/normal*/
      
      .text-overflow-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
      }
      
      .text-overflow-normal {
            text-overflow: normal;
      }
      /* 文本缩进 text-indent-(n)1/2/3/4/5*/
      
      .text-indent-1 {
            text-indent: 0.25rem;
      }
      
      .text-indent-2 {
            text-indent: 0.5rem;
      }
      
      .text-indent-3 {
            text-indent: 1rem;
      }
      
      .text-indent-4 {
            text-indent: 1.5rem;
      }
      
      .text-indent-5 {
            text-indent: 3rem;
      }
      
      .text-indent-n1 {
            text-indent: -0.25rem;
      }
      
      .text-indent-n2 {
            text-indent: -0.5rem;
      }
      
      .text-indent-n3 {
            text-indent: -1rem;
      }
      
      .text-indent-n4 {
            text-indent: -1.5rem;
      }
      
      .text-indent-n5 {
            text-indent: -3rem;
      }
      /** c.margin与padding
* m-mb-ml-mt-mr-mx-my-
* p-pb-pl-pt-pr-px-py-
* 负数为n
* 0,1=0.25rem,2=0.5rem,3=1rem,4=1.5rem,5=3rem,n1..5,auto
*/
      
      .m-0 {
            margin: 0 !important;
      }
      
      .mt-0,
      .my-0 {
            margin-top: 0 !important;
      }
      
      .mr-0,
      .mx-0 {
            margin-right: 0 !important;
      }
      
      .mb-0,
      .my-0 {
            margin-bottom: 0 !important;
      }
      
      .ml-0,
      .mx-0 {
            margin-left: 0 !important;
      }
      
      .m-1 {
            margin: 0.25rem !important;
      }
      
      .mt-1,
      .my-1 {
            margin-top: 0.25rem !important;
      }
      
      .mr-1,
      .mx-1 {
            margin-right: 0.25rem !important;
      }
      
      .mb-1,
      .my-1 {
            margin-bottom: 0.25rem !important;
      }
      
      .ml-1,
      .mx-1 {
            margin-left: 0.25rem !important;
      }
      
      .m-2 {
            margin: 0.5rem !important;
      }
      
      .mt-2,
      .my-2 {
            margin-top: 0.5rem !important;
      }
      
      .mr-2,
      .mx-2 {
            margin-right: 0.5rem !important;
      }
      
      .mb-2,
      .my-2 {
            margin-bottom: 0.5rem !important;
      }
      
      .ml-2,
      .mx-2 {
            margin-left: 0.5rem !important;
      }
      
      .m-3 {
            margin: 1rem !important;
      }
      
      .mt-3,
      .my-3 {
            margin-top: 1rem !important;
      }
      
      .mr-3,
      .mx-3 {
            margin-right: 1rem !important;
      }
      
      .mb-3,
      .my-3 {
            margin-bottom: 1rem !important;
      }
      
      .ml-3,
      .mx-3 {
            margin-left: 1rem !important;
      }
      
      .m-4 {
            margin: 1.5rem !important;
      }
      
      .mt-4,
      .my-4 {
            margin-top: 1.5rem !important;
      }
      
      .mr-4,
      .mx-4 {
            margin-right: 1.5rem !important;
      }
      
      .mb-4,
      .my-4 {
            margin-bottom: 1.5rem !important;
      }
      
      .ml-4,
      .mx-4 {
            margin-left: 1.5rem !important;
      }
      
      .m-5 {
            margin: 3rem !important;
      }
      
      .mt-5,
      .my-5 {
            margin-top: 3rem !important;
      }
      
      .mr-5,
      .mx-5 {
            margin-right: 3rem !important;
      }
      
      .mb-5,
      .my-5 {
            margin-bottom: 3rem !important;
      }
      
      .ml-5,
      .mx-5 {
            margin-left: 3rem !important;
      }
      
      .m-6 {
            margin: 4rem !important;
      }
      
      .mt-6,
      .my-6 {
            margin-top: 4rem !important;
      }
      
      .mr-6,
      .mx-6 {
            margin-right: 4rem !important;
      }
      
      .mb-6,
      .my-6 {
            margin-bottom: 4rem !important;
      }
      
      .ml-6,
      .mx-6 {
            margin-left: 4rem !important;
      }
      
      .m-7 {
            margin: 5rem !important;
      }
      
      .mt-7,
      .my-7 {
            margin-top: 5rem !important;
      }
      
      .mr-7,
      .mx-7 {
            margin-right: 5rem !important;
      }
      
      .mb-7,
      .my-7 {
            margin-bottom: 5rem !important;
      }
      
      .ml-7,
      .mx-7 {
            margin-left: 5rem !important;
      }
      
      .m-8 {
            margin: 6rem !important;
      }
      
      .mt-8,
      .my-8 {
            margin-top: 6rem !important;
      }
      
      .mr-8,
      .mx-8 {
            margin-right: 6rem !important;
      }
      
      .mb-8,
      .my-8 {
            margin-bottom: 6rem !important;
      }
      
      .ml-8,
      .mx-8 {
            margin-left: 6rem !important;
      }
      
      .m-9 {
            margin: 8rem !important;
      }
      
      .mt-9,
      .my-9 {
            margin-top: 8rem !important;
      }
      
      .mr-9,
      .mx-9 {
            margin-right: 8rem !important;
      }
      
      .mb-9,
      .my-9 {
            margin-bottom: 8rem !important;
      }
      
      .ml-9,
      .mx-9 {
            margin-left: 8rem !important;
      }
      
      .m-10 {
            margin: 10rem !important;
      }
      
      .mt-10,
      .my-10 {
            margin-top: 10rem !important;
      }
      
      .mr-10,
      .mx-10 {
            margin-right: 10rem !important;
      }
      
      .mb-10,
      .my-10 {
            margin-bottom: 10rem !important;
      }
      
      .ml-10,
      .mx-10 {
            margin-left: 10rem !important;
      }
      
      .p-0 {
            padding: 0 !important;
      }
      
      .pt-0,
      .py-0 {
            padding-top: 0 !important;
      }
      
      .pr-0,
      .px-0 {
            padding-right: 0 !important;
      }
      
      .pb-0,
      .py-0 {
            padding-bottom: 0 !important;
      }
      
      .pl-0,
      .px-0 {
            padding-left: 0 !important;
      }
      
      .p-1 {
            padding: 0.25rem !important;
      }
      
      .pt-1,
      .py-1 {
            padding-top: 0.25rem !important;
      }
      
      .pr-1,
      .px-1 {
            padding-right: 0.25rem !important;
      }
      
      .pb-1,
      .py-1 {
            padding-bottom: 0.25rem !important;
      }
      
      .pl-1,
      .px-1 {
            padding-left: 0.25rem !important;
      }
      
      .p-2 {
            padding: 0.5rem !important;
      }
      
      .pt-2,
      .py-2 {
            padding-top: 0.5rem !important;
      }
      
      .pr-2,
      .px-2 {
            padding-right: 0.5rem !important;
      }
      
      .pb-2,
      .py-2 {
            padding-bottom: 0.5rem !important;
      }
      
      .pl-2,
      .px-2 {
            padding-left: 0.5rem !important;
      }
      
      .p-3 {
            padding: 1rem !important;
      }
      
      .pt-3,
      .py-3 {
            padding-top: 1rem !important;
      }
      
      .pr-3,
      .px-3 {
            padding-right: 1rem !important;
      }
      
      .pb-3,
      .py-3 {
            padding-bottom: 1rem !important;
      }
      
      .pl-3,
      .px-3 {
            padding-left: 1rem !important;
      }
      
      .p-4 {
            padding: 1.5rem !important;
      }
      
      .pt-4,
      .py-4 {
            padding-top: 1.5rem !important;
      }
      
      .pr-4,
      .px-4 {
            padding-right: 1.5rem !important;
      }
      
      .pb-4,
      .py-4 {
            padding-bottom: 1.5rem !important;
      }
      
      .pl-4,
      .px-4 {
            padding-left: 1.5rem !important;
      }
      
      .p-5 {
            padding: 3rem !important;
      }
      
      .pt-5,
      .py-5 {
            padding-top: 3rem !important;
      }
      
      .pr-5,
      .px-5 {
            padding-right: 3rem !important;
      }
      
      .pb-5,
      .py-5 {
            padding-bottom: 3rem !important;
      }
      
      .pl-5,
      .px-5 {
            padding-left: 3rem !important;
      }
      
      .p-6 {
            padding: 4rem !important;
      }
      
      .pt-6,
      .py-6 {
            padding-top: 4rem !important;
      }
      
      .pr-6,
      .px-6 {
            padding-right: 4rem !important;
      }
      
      .pb-6,
      .py-6 {
            padding-bottom: 4rem !important;
      }
      
      .pl-6,
      .px-6 {
            padding-left: 4rem !important;
      }
      
      .p-7 {
            padding: 5rem !important;
      }
      
      .pt-7,
      .py-7 {
            padding-top: 5rem !important;
      }
      
      .pr-7,
      .px-7 {
            padding-right: 5rem !important;
      }
      
      .pb-7,
      .py-7 {
            padding-bottom: 5rem !important;
      }
      
      .pl-7,
      .px-7 {
            padding-left: 5rem !important;
      }
      
      .p-8 {
            padding: 6rem !important;
      }
      
      .pt-8,
      .py-8 {
            padding-top: 6rem !important;
      }
      
      .pr-8,
      .px-8 {
            padding-right: 6rem !important;
      }
      
      .pb-8,
      .py-8 {
            padding-bottom: 6rem !important;
      }
      
      .pl-8,
      .px-8 {
            padding-left: 6rem !important;
      }
      
      .p-9 {
            padding: 8rem !important;
      }
      
      .pt-9,
      .py-9 {
            padding-top: 8rem !important;
      }
      
      .pr-9,
      .px-9 {
            padding-right: 8rem !important;
      }
      
      .pb-9,
      .py-9 {
            padding-bottom: 8rem !important;
      }
      
      .pl-9,
      .px-9 {
            padding-left: 8rem !important;
      }
      
      .p-10 {
            padding: 10rem !important;
      }
      
      .pt-10,
      .py-10 {
            padding-top: 10rem !important;
      }
      
      .pr-10,
      .px-10 {
            padding-right: 10rem !important;
      }
      
      .pb-10,
      .py-10 {
            padding-bottom: 10rem !important;
      }
      
      .pl-10,
      .px-10 {
            padding-left: 10rem !important;
      }
      
      .m-n1 {
            margin: -0.25rem !important;
      }
      
      .mt-n1,
      .my-n1 {
            margin-top: -0.25rem !important;
      }
      
      .mr-n1,
      .mx-n1 {
            margin-right: -0.25rem !important;
      }
      
      .mb-n1,
      .my-n1 {
            margin-bottom: -0.25rem !important;
      }
      
      .ml-n1,
      .mx-n1 {
            margin-left: -0.25rem !important;
      }
      
      .m-n2 {
            margin: -0.5rem !important;
      }
      
      .mt-n2,
      .my-n2 {
            margin-top: -0.5rem !important;
      }
      
      .mr-n2,
      .mx-n2 {
            margin-right: -0.5rem !important;
      }
      
      .mb-n2,
      .my-n2 {
            margin-bottom: -0.5rem !important;
      }
      
      .ml-n2,
      .mx-n2 {
            margin-left: -0.5rem !important;
      }
      
      .m-n3 {
            margin: -1rem !important;
      }
      
      .mt-n3,
      .my-n3 {
            margin-top: -1rem !important;
      }
      
      .mr-n3,
      .mx-n3 {
            margin-right: -1rem !important;
      }
      
      .mb-n3,
      .my-n3 {
            margin-bottom: -1rem !important;
      }
      
      .ml-n3,
      .mx-n3 {
            margin-left: -1rem !important;
      }
      
      .m-n4 {
            margin: -1.5rem !important;
      }
      
      .mt-n4,
      .my-n4 {
            margin-top: -1.5rem !important;
      }
      
      .mr-n4,
      .mx-n4 {
            margin-right: -1.5rem !important;
      }
      
      .mb-n4,
      .my-n4 {
            margin-bottom: -1.5rem !important;
      }
      
      .ml-n4,
      .mx-n4 {
            margin-left: -1.5rem !important;
      }
      
      .m-n5 {
            margin: -3rem !important;
      }
      
      .mt-n5,
      .my-n5 {
            margin-top: -3rem !important;
      }
      
      .mr-n5,
      .mx-n5 {
            margin-right: -3rem !important;
      }
      
      .mb-n5,
      .my-n5 {
            margin-bottom: -3rem !important;
      }
      
      .ml-n5,
      .mx-n5 {
            margin-left: -3rem !important;
      }
      
      .m-auto {
            margin: auto !important;
      }
      
      .mt-auto,
      .my-auto {
            margin-top: auto !important;
      }
      
      .mr-auto,
      .mx-auto {
            margin-right: auto !important;
      }
      
      .mb-auto,
      .my-auto {
            margin-bottom: auto !important;
      }
      
      .ml-auto,
      .mx-auto {
            margin-left: auto !important;
      }
      
      @media (min-width: 576px) {
            .m-sm-0 {
               margin: 0 !important;
            }
            .mt-sm-0,
            .my-sm-0 {
               margin-top: 0 !important;
            }
            .mr-sm-0,
            .mx-sm-0 {
               margin-right: 0 !important;
            }
            .mb-sm-0,
            .my-sm-0 {
               margin-bottom: 0 !important;
            }
            .ml-sm-0,
            .mx-sm-0 {
               margin-left: 0 !important;
            }
            .m-sm-1 {
               margin: 0.25rem !important;
            }
            .mt-sm-1,
            .my-sm-1 {
               margin-top: 0.25rem !important;
            }
            .mr-sm-1,
            .mx-sm-1 {
               margin-right: 0.25rem !important;
            }
            .mb-sm-1,
            .my-sm-1 {
               margin-bottom: 0.25rem !important;
            }
            .ml-sm-1,
            .mx-sm-1 {
               margin-left: 0.25rem !important;
            }
            .m-sm-2 {
               margin: 0.5rem !important;
            }
            .mt-sm-2,
            .my-sm-2 {
               margin-top: 0.5rem !important;
            }
            .mr-sm-2,
            .mx-sm-2 {
               margin-right: 0.5rem !important;
            }
            .mb-sm-2,
            .my-sm-2 {
               margin-bottom: 0.5rem !important;
            }
            .ml-sm-2,
            .mx-sm-2 {
               margin-left: 0.5rem !important;
            }
            .m-sm-3 {
               margin: 1rem !important;
            }
            .mt-sm-3,
            .my-sm-3 {
               margin-top: 1rem !important;
            }
            .mr-sm-3,
            .mx-sm-3 {
               margin-right: 1rem !important;
            }
            .mb-sm-3,
            .my-sm-3 {
               margin-bottom: 1rem !important;
            }
            .ml-sm-3,
            .mx-sm-3 {
               margin-left: 1rem !important;
            }
            .m-sm-4 {
               margin: 1.5rem !important;
            }
            .mt-sm-4,
            .my-sm-4 {
               margin-top: 1.5rem !important;
            }
            .mr-sm-4,
            .mx-sm-4 {
               margin-right: 1.5rem !important;
            }
            .mb-sm-4,
            .my-sm-4 {
               margin-bottom: 1.5rem !important;
            }
            .ml-sm-4,
            .mx-sm-4 {
               margin-left: 1.5rem !important;
            }
            .m-sm-5 {
               margin: 3rem !important;
            }
            .mt-sm-5,
            .my-sm-5 {
               margin-top: 3rem !important;
            }
            .mr-sm-5,
            .mx-sm-5 {
               margin-right: 3rem !important;
            }
            .mb-sm-5,
            .my-sm-5 {
               margin-bottom: 3rem !important;
            }
            .ml-sm-5,
            .mx-sm-5 {
               margin-left: 3rem !important;
            }
            .p-sm-0 {
               padding: 0 !important;
            }
            .pt-sm-0,
            .py-sm-0 {
               padding-top: 0 !important;
            }
            .pr-sm-0,
            .px-sm-0 {
               padding-right: 0 !important;
            }
            .pb-sm-0,
            .py-sm-0 {
               padding-bottom: 0 !important;
            }
            .pl-sm-0,
            .px-sm-0 {
               padding-left: 0 !important;
            }
            .p-sm-1 {
               padding: 0.25rem !important;
            }
            .pt-sm-1,
            .py-sm-1 {
               padding-top: 0.25rem !important;
            }
            .pr-sm-1,
            .px-sm-1 {
               padding-right: 0.25rem !important;
            }
            .pb-sm-1,
            .py-sm-1 {
               padding-bottom: 0.25rem !important;
            }
            .pl-sm-1,
            .px-sm-1 {
               padding-left: 0.25rem !important;
            }
            .p-sm-2 {
               padding: 0.5rem !important;
            }
            .pt-sm-2,
            .py-sm-2 {
               padding-top: 0.5rem !important;
            }
            .pr-sm-2,
            .px-sm-2 {
               padding-right: 0.5rem !important;
            }
            .pb-sm-2,
            .py-sm-2 {
               padding-bottom: 0.5rem !important;
            }
            .pl-sm-2,
            .px-sm-2 {
               padding-left: 0.5rem !important;
            }
            .p-sm-3 {
               padding: 1rem !important;
            }
            .pt-sm-3,
            .py-sm-3 {
               padding-top: 1rem !important;
            }
            .pr-sm-3,
            .px-sm-3 {
               padding-right: 1rem !important;
            }
            .pb-sm-3,
            .py-sm-3 {
               padding-bottom: 1rem !important;
            }
            .pl-sm-3,
            .px-sm-3 {
               padding-left: 1rem !important;
            }
            .p-sm-4 {
               padding: 1.5rem !important;
            }
            .pt-sm-4,
            .py-sm-4 {
               padding-top: 1.5rem !important;
            }
            .pr-sm-4,
            .px-sm-4 {
               padding-right: 1.5rem !important;
            }
            .pb-sm-4,
            .py-sm-4 {
               padding-bottom: 1.5rem !important;
            }
            .pl-sm-4,
            .px-sm-4 {
               padding-left: 1.5rem !important;
            }
            .p-sm-5 {
               padding: 3rem !important;
            }
            .pt-sm-5,
            .py-sm-5 {
               padding-top: 3rem !important;
            }
            .pr-sm-5,
            .px-sm-5 {
               padding-right: 3rem !important;
            }
            .pb-sm-5,
            .py-sm-5 {
               padding-bottom: 3rem !important;
            }
            .pl-sm-5,
            .px-sm-5 {
               padding-left: 3rem !important;
            }
            .m-sm-n1 {
               margin: -0.25rem !important;
            }
            .mt-sm-n1,
            .my-sm-n1 {
               margin-top: -0.25rem !important;
            }
            .mr-sm-n1,
            .mx-sm-n1 {
               margin-right: -0.25rem !important;
            }
            .mb-sm-n1,
            .my-sm-n1 {
               margin-bottom: -0.25rem !important;
            }
            .ml-sm-n1,
            .mx-sm-n1 {
               margin-left: -0.25rem !important;
            }
            .m-sm-n2 {
               margin: -0.5rem !important;
            }
            .mt-sm-n2,
            .my-sm-n2 {
               margin-top: -0.5rem !important;
            }
            .mr-sm-n2,
            .mx-sm-n2 {
               margin-right: -0.5rem !important;
            }
            .mb-sm-n2,
            .my-sm-n2 {
               margin-bottom: -0.5rem !important;
            }
            .ml-sm-n2,
            .mx-sm-n2 {
               margin-left: -0.5rem !important;
            }
            .m-sm-n3 {
               margin: -1rem !important;
            }
            .mt-sm-n3,
            .my-sm-n3 {
               margin-top: -1rem !important;
            }
            .mr-sm-n3,
            .mx-sm-n3 {
               margin-right: -1rem !important;
            }
            .mb-sm-n3,
            .my-sm-n3 {
               margin-bottom: -1rem !important;
            }
            .ml-sm-n3,
            .mx-sm-n3 {
               margin-left: -1rem !important;
            }
            .m-sm-n4 {
               margin: -1.5rem !important;
            }
            .mt-sm-n4,
            .my-sm-n4 {
               margin-top: -1.5rem !important;
            }
            .mr-sm-n4,
            .mx-sm-n4 {
               margin-right: -1.5rem !important;
            }
            .mb-sm-n4,
            .my-sm-n4 {
               margin-bottom: -1.5rem !important;
            }
            .ml-sm-n4,
            .mx-sm-n4 {
               margin-left: -1.5rem !important;
            }
            .m-sm-n5 {
               margin: -3rem !important;
            }
            .mt-sm-n5,
            .my-sm-n5 {
               margin-top: -3rem !important;
            }
            .mr-sm-n5,
            .mx-sm-n5 {
               margin-right: -3rem !important;
            }
            .mb-sm-n5,
            .my-sm-n5 {
               margin-bottom: -3rem !important;
            }
            .ml-sm-n5,
            .mx-sm-n5 {
               margin-left: -3rem !important;
            }
            .m-sm-auto {
               margin: auto !important;
            }
            .mt-sm-auto,
            .my-sm-auto {
               margin-top: auto !important;
            }
            .mr-sm-auto,
            .mx-sm-auto {
               margin-right: auto !important;
            }
            .mb-sm-auto,
            .my-sm-auto {
               margin-bottom: auto !important;
            }
            .ml-sm-auto,
            .mx-sm-auto {
               margin-left: auto !important;
            }
      }
      
      @media (min-width: 768px) {
            .m-md-0 {
               margin: 0 !important;
            }
            .mt-md-0,
            .my-md-0 {
               margin-top: 0 !important;
            }
            .mr-md-0,
            .mx-md-0 {
               margin-right: 0 !important;
            }
            .mb-md-0,
            .my-md-0 {
               margin-bottom: 0 !important;
            }
            .ml-md-0,
            .mx-md-0 {
               margin-left: 0 !important;
            }
            .m-md-1 {
               margin: 0.25rem !important;
            }
            .mt-md-1,
            .my-md-1 {
               margin-top: 0.25rem !important;
            }
            .mr-md-1,
            .mx-md-1 {
               margin-right: 0.25rem !important;
            }
            .mb-md-1,
            .my-md-1 {
               margin-bottom: 0.25rem !important;
            }
            .ml-md-1,
            .mx-md-1 {
               margin-left: 0.25rem !important;
            }
            .m-md-2 {
               margin: 0.5rem !important;
            }
            .mt-md-2,
            .my-md-2 {
               margin-top: 0.5rem !important;
            }
            .mr-md-2,
            .mx-md-2 {
               margin-right: 0.5rem !important;
            }
            .mb-md-2,
            .my-md-2 {
               margin-bottom: 0.5rem !important;
            }
            .ml-md-2,
            .mx-md-2 {
               margin-left: 0.5rem !important;
            }
            .m-md-3 {
               margin: 1rem !important;
            }
            .mt-md-3,
            .my-md-3 {
               margin-top: 1rem !important;
            }
            .mr-md-3,
            .mx-md-3 {
               margin-right: 1rem !important;
            }
            .mb-md-3,
            .my-md-3 {
               margin-bottom: 1rem !important;
            }
            .ml-md-3,
            .mx-md-3 {
               margin-left: 1rem !important;
            }
            .m-md-4 {
               margin: 1.5rem !important;
            }
            .mt-md-4,
            .my-md-4 {
               margin-top: 1.5rem !important;
            }
            .mr-md-4,
            .mx-md-4 {
               margin-right: 1.5rem !important;
            }
            .mb-md-4,
            .my-md-4 {
               margin-bottom: 1.5rem !important;
            }
            .ml-md-4,
            .mx-md-4 {
               margin-left: 1.5rem !important;
            }
            .m-md-5 {
               margin: 3rem !important;
            }
            .mt-md-5,
            .my-md-5 {
               margin-top: 3rem !important;
            }
            .mr-md-5,
            .mx-md-5 {
               margin-right: 3rem !important;
            }
            .mb-md-5,
            .my-md-5 {
               margin-bottom: 3rem !important;
            }
            .ml-md-5,
            .mx-md-5 {
               margin-left: 3rem !important;
            }
            .p-md-0 {
               padding: 0 !important;
            }
            .pt-md-0,
            .py-md-0 {
               padding-top: 0 !important;
            }
            .pr-md-0,
            .px-md-0 {
               padding-right: 0 !important;
            }
            .pb-md-0,
            .py-md-0 {
               padding-bottom: 0 !important;
            }
            .pl-md-0,
            .px-md-0 {
               padding-left: 0 !important;
            }
            .p-md-1 {
               padding: 0.25rem !important;
            }
            .pt-md-1,
            .py-md-1 {
               padding-top: 0.25rem !important;
            }
            .pr-md-1,
            .px-md-1 {
               padding-right: 0.25rem !important;
            }
            .pb-md-1,
            .py-md-1 {
               padding-bottom: 0.25rem !important;
            }
            .pl-md-1,
            .px-md-1 {
               padding-left: 0.25rem !important;
            }
            .p-md-2 {
               padding: 0.5rem !important;
            }
            .pt-md-2,
            .py-md-2 {
               padding-top: 0.5rem !important;
            }
            .pr-md-2,
            .px-md-2 {
               padding-right: 0.5rem !important;
            }
            .pb-md-2,
            .py-md-2 {
               padding-bottom: 0.5rem !important;
            }
            .pl-md-2,
            .px-md-2 {
               padding-left: 0.5rem !important;
            }
            .p-md-3 {
               padding: 1rem !important;
            }
            .pt-md-3,
            .py-md-3 {
               padding-top: 1rem !important;
            }
            .pr-md-3,
            .px-md-3 {
               padding-right: 1rem !important;
            }
            .pb-md-3,
            .py-md-3 {
               padding-bottom: 1rem !important;
            }
            .pl-md-3,
            .px-md-3 {
               padding-left: 1rem !important;
            }
            .p-md-4 {
               padding: 1.5rem !important;
            }
            .pt-md-4,
            .py-md-4 {
               padding-top: 1.5rem !important;
            }
            .pr-md-4,
            .px-md-4 {
               padding-right: 1.5rem !important;
            }
            .pb-md-4,
            .py-md-4 {
               padding-bottom: 1.5rem !important;
            }
            .pl-md-4,
            .px-md-4 {
               padding-left: 1.5rem !important;
            }
            .p-md-5 {
               padding: 3rem !important;
            }
            .pt-md-5,
            .py-md-5 {
               padding-top: 3rem !important;
            }
            .pr-md-5,
            .px-md-5 {
               padding-right: 3rem !important;
            }
            .pb-md-5,
            .py-md-5 {
               padding-bottom: 3rem !important;
            }
            .pl-md-5,
            .px-md-5 {
               padding-left: 3rem !important;
            }
            .m-md-n1 {
               margin: -0.25rem !important;
            }
            .mt-md-n1,
            .my-md-n1 {
               margin-top: -0.25rem !important;
            }
            .mr-md-n1,
            .mx-md-n1 {
               margin-right: -0.25rem !important;
            }
            .mb-md-n1,
            .my-md-n1 {
               margin-bottom: -0.25rem !important;
            }
            .ml-md-n1,
            .mx-md-n1 {
               margin-left: -0.25rem !important;
            }
            .m-md-n2 {
               margin: -0.5rem !important;
            }
            .mt-md-n2,
            .my-md-n2 {
               margin-top: -0.5rem !important;
            }
            .mr-md-n2,
            .mx-md-n2 {
               margin-right: -0.5rem !important;
            }
            .mb-md-n2,
            .my-md-n2 {
               margin-bottom: -0.5rem !important;
            }
            .ml-md-n2,
            .mx-md-n2 {
               margin-left: -0.5rem !important;
            }
            .m-md-n3 {
               margin: -1rem !important;
            }
            .mt-md-n3,
            .my-md-n3 {
               margin-top: -1rem !important;
            }
            .mr-md-n3,
            .mx-md-n3 {
               margin-right: -1rem !important;
            }
            .mb-md-n3,
            .my-md-n3 {
               margin-bottom: -1rem !important;
            }
            .ml-md-n3,
            .mx-md-n3 {
               margin-left: -1rem !important;
            }
            .m-md-n4 {
               margin: -1.5rem !important;
            }
            .mt-md-n4,
            .my-md-n4 {
               margin-top: -1.5rem !important;
            }
            .mr-md-n4,
            .mx-md-n4 {
               margin-right: -1.5rem !important;
            }
            .mb-md-n4,
            .my-md-n4 {
               margin-bottom: -1.5rem !important;
            }
            .ml-md-n4,
            .mx-md-n4 {
               margin-left: -1.5rem !important;
            }
            .m-md-n5 {
               margin: -3rem !important;
            }
            .mt-md-n5,
            .my-md-n5 {
               margin-top: -3rem !important;
            }
            .mr-md-n5,
            .mx-md-n5 {
               margin-right: -3rem !important;
            }
            .mb-md-n5,
            .my-md-n5 {
               margin-bottom: -3rem !important;
            }
            .ml-md-n5,
            .mx-md-n5 {
               margin-left: -3rem !important;
            }
            .m-md-auto {
               margin: auto !important;
            }
            .mt-md-auto,
            .my-md-auto {
               margin-top: auto !important;
            }
            .mr-md-auto,
            .mx-md-auto {
               margin-right: auto !important;
            }
            .mb-md-auto,
            .my-md-auto {
               margin-bottom: auto !important;
            }
            .ml-md-auto,
            .mx-md-auto {
               margin-left: auto !important;
            }
      }
      
      @media (min-width: 992px) {
            .m-lg-0 {
               margin: 0 !important;
            }
            .mt-lg-0,
            .my-lg-0 {
               margin-top: 0 !important;
            }
            .mr-lg-0,
            .mx-lg-0 {
               margin-right: 0 !important;
            }
            .mb-lg-0,
            .my-lg-0 {
               margin-bottom: 0 !important;
            }
            .ml-lg-0,
            .mx-lg-0 {
               margin-left: 0 !important;
            }
            .m-lg-1 {
               margin: 0.25rem !important;
            }
            .mt-lg-1,
            .my-lg-1 {
               margin-top: 0.25rem !important;
            }
            .mr-lg-1,
            .mx-lg-1 {
               margin-right: 0.25rem !important;
            }
            .mb-lg-1,
            .my-lg-1 {
               margin-bottom: 0.25rem !important;
            }
            .ml-lg-1,
            .mx-lg-1 {
               margin-left: 0.25rem !important;
            }
            .m-lg-2 {
               margin: 0.5rem !important;
            }
            .mt-lg-2,
            .my-lg-2 {
               margin-top: 0.5rem !important;
            }
            .mr-lg-2,
            .mx-lg-2 {
               margin-right: 0.5rem !important;
            }
            .mb-lg-2,
            .my-lg-2 {
               margin-bottom: 0.5rem !important;
            }
            .ml-lg-2,
            .mx-lg-2 {
               margin-left: 0.5rem !important;
            }
            .m-lg-3 {
               margin: 1rem !important;
            }
            .mt-lg-3,
            .my-lg-3 {
               margin-top: 1rem !important;
            }
            .mr-lg-3,
            .mx-lg-3 {
               margin-right: 1rem !important;
            }
            .mb-lg-3,
            .my-lg-3 {
               margin-bottom: 1rem !important;
            }
            .ml-lg-3,
            .mx-lg-3 {
               margin-left: 1rem !important;
            }
            .m-lg-4 {
               margin: 1.5rem !important;
            }
            .mt-lg-4,
            .my-lg-4 {
               margin-top: 1.5rem !important;
            }
            .mr-lg-4,
            .mx-lg-4 {
               margin-right: 1.5rem !important;
            }
            .mb-lg-4,
            .my-lg-4 {
               margin-bottom: 1.5rem !important;
            }
            .ml-lg-4,
            .mx-lg-4 {
               margin-left: 1.5rem !important;
            }
            .m-lg-5 {
               margin: 3rem !important;
            }
            .mt-lg-5,
            .my-lg-5 {
               margin-top: 3rem !important;
            }
            .mr-lg-5,
            .mx-lg-5 {
               margin-right: 3rem !important;
            }
            .mb-lg-5,
            .my-lg-5 {
               margin-bottom: 3rem !important;
            }
            .ml-lg-5,
            .mx-lg-5 {
               margin-left: 3rem !important;
            }
            .p-lg-0 {
               padding: 0 !important;
            }
            .pt-lg-0,
            .py-lg-0 {
               padding-top: 0 !important;
            }
            .pr-lg-0,
            .px-lg-0 {
               padding-right: 0 !important;
            }
            .pb-lg-0,
            .py-lg-0 {
               padding-bottom: 0 !important;
            }
            .pl-lg-0,
            .px-lg-0 {
               padding-left: 0 !important;
            }
            .p-lg-1 {
               padding: 0.25rem !important;
            }
            .pt-lg-1,
            .py-lg-1 {
               padding-top: 0.25rem !important;
            }
            .pr-lg-1,
            .px-lg-1 {
               padding-right: 0.25rem !important;
            }
            .pb-lg-1,
            .py-lg-1 {
               padding-bottom: 0.25rem !important;
            }
            .pl-lg-1,
            .px-lg-1 {
               padding-left: 0.25rem !important;
            }
            .p-lg-2 {
               padding: 0.5rem !important;
            }
            .pt-lg-2,
            .py-lg-2 {
               padding-top: 0.5rem !important;
            }
            .pr-lg-2,
            .px-lg-2 {
               padding-right: 0.5rem !important;
            }
            .pb-lg-2,
            .py-lg-2 {
               padding-bottom: 0.5rem !important;
            }
            .pl-lg-2,
            .px-lg-2 {
               padding-left: 0.5rem !important;
            }
            .p-lg-3 {
               padding: 1rem !important;
            }
            .pt-lg-3,
            .py-lg-3 {
               padding-top: 1rem !important;
            }
            .pr-lg-3,
            .px-lg-3 {
               padding-right: 1rem !important;
            }
            .pb-lg-3,
            .py-lg-3 {
               padding-bottom: 1rem !important;
            }
            .pl-lg-3,
            .px-lg-3 {
               padding-left: 1rem !important;
            }
            .p-lg-4 {
               padding: 1.5rem !important;
            }
            .pt-lg-4,
            .py-lg-4 {
               padding-top: 1.5rem !important;
            }
            .pr-lg-4,
            .px-lg-4 {
               padding-right: 1.5rem !important;
            }
            .pb-lg-4,
            .py-lg-4 {
               padding-bottom: 1.5rem !important;
            }
            .pl-lg-4,
            .px-lg-4 {
               padding-left: 1.5rem !important;
            }
            .p-lg-5 {
               padding: 3rem !important;
            }
            .pt-lg-5,
            .py-lg-5 {
               padding-top: 3rem !important;
            }
            .pr-lg-5,
            .px-lg-5 {
               padding-right: 3rem !important;
            }
            .pb-lg-5,
            .py-lg-5 {
               padding-bottom: 3rem !important;
            }
            .pl-lg-5,
            .px-lg-5 {
               padding-left: 3rem !important;
            }
            .m-lg-n1 {
               margin: -0.25rem !important;
            }
            .mt-lg-n1,
            .my-lg-n1 {
               margin-top: -0.25rem !important;
            }
            .mr-lg-n1,
            .mx-lg-n1 {
               margin-right: -0.25rem !important;
            }
            .mb-lg-n1,
            .my-lg-n1 {
               margin-bottom: -0.25rem !important;
            }
            .ml-lg-n1,
            .mx-lg-n1 {
               margin-left: -0.25rem !important;
            }
            .m-lg-n2 {
               margin: -0.5rem !important;
            }
            .mt-lg-n2,
            .my-lg-n2 {
               margin-top: -0.5rem !important;
            }
            .mr-lg-n2,
            .mx-lg-n2 {
               margin-right: -0.5rem !important;
            }
            .mb-lg-n2,
            .my-lg-n2 {
               margin-bottom: -0.5rem !important;
            }
            .ml-lg-n2,
            .mx-lg-n2 {
               margin-left: -0.5rem !important;
            }
            .m-lg-n3 {
               margin: -1rem !important;
            }
            .mt-lg-n3,
            .my-lg-n3 {
               margin-top: -1rem !important;
            }
            .mr-lg-n3,
            .mx-lg-n3 {
               margin-right: -1rem !important;
            }
            .mb-lg-n3,
            .my-lg-n3 {
               margin-bottom: -1rem !important;
            }
            .ml-lg-n3,
            .mx-lg-n3 {
               margin-left: -1rem !important;
            }
            .m-lg-n4 {
               margin: -1.5rem !important;
            }
            .mt-lg-n4,
            .my-lg-n4 {
               margin-top: -1.5rem !important;
            }
            .mr-lg-n4,
            .mx-lg-n4 {
               margin-right: -1.5rem !important;
            }
            .mb-lg-n4,
            .my-lg-n4 {
               margin-bottom: -1.5rem !important;
            }
            .ml-lg-n4,
            .mx-lg-n4 {
               margin-left: -1.5rem !important;
            }
            .m-lg-n5 {
               margin: -3rem !important;
            }
            .mt-lg-n5,
            .my-lg-n5 {
               margin-top: -3rem !important;
            }
            .mr-lg-n5,
            .mx-lg-n5 {
               margin-right: -3rem !important;
            }
            .mb-lg-n5,
            .my-lg-n5 {
               margin-bottom: -3rem !important;
            }
            .ml-lg-n5,
            .mx-lg-n5 {
               margin-left: -3rem !important;
            }
            .m-lg-auto {
               margin: auto !important;
            }
            .mt-lg-auto,
            .my-lg-auto {
               margin-top: auto !important;
            }
            .mr-lg-auto,
            .mx-lg-auto {
               margin-right: auto !important;
            }
            .mb-lg-auto,
            .my-lg-auto {
               margin-bottom: auto !important;
            }
            .ml-lg-auto,
            .mx-lg-auto {
               margin-left: auto !important;
            }
      }
      
      @media (min-width: 1200px) {
            .m-xl-0 {
               margin: 0 !important;
            }
            .mt-xl-0,
            .my-xl-0 {
               margin-top: 0 !important;
            }
            .mr-xl-0,
            .mx-xl-0 {
               margin-right: 0 !important;
            }
            .mb-xl-0,
            .my-xl-0 {
               margin-bottom: 0 !important;
            }
            .ml-xl-0,
            .mx-xl-0 {
               margin-left: 0 !important;
            }
            .m-xl-1 {
               margin: 0.25rem !important;
            }
            .mt-xl-1,
            .my-xl-1 {
               margin-top: 0.25rem !important;
            }
            .mr-xl-1,
            .mx-xl-1 {
               margin-right: 0.25rem !important;
            }
            .mb-xl-1,
            .my-xl-1 {
               margin-bottom: 0.25rem !important;
            }
            .ml-xl-1,
            .mx-xl-1 {
               margin-left: 0.25rem !important;
            }
            .m-xl-2 {
               margin: 0.5rem !important;
            }
            .mt-xl-2,
            .my-xl-2 {
               margin-top: 0.5rem !important;
            }
            .mr-xl-2,
            .mx-xl-2 {
               margin-right: 0.5rem !important;
            }
            .mb-xl-2,
            .my-xl-2 {
               margin-bottom: 0.5rem !important;
            }
            .ml-xl-2,
            .mx-xl-2 {
               margin-left: 0.5rem !important;
            }
            .m-xl-3 {
               margin: 1rem !important;
            }
            .mt-xl-3,
            .my-xl-3 {
               margin-top: 1rem !important;
            }
            .mr-xl-3,
            .mx-xl-3 {
               margin-right: 1rem !important;
            }
            .mb-xl-3,
            .my-xl-3 {
               margin-bottom: 1rem !important;
            }
            .ml-xl-3,
            .mx-xl-3 {
               margin-left: 1rem !important;
            }
            .m-xl-4 {
               margin: 1.5rem !important;
            }
            .mt-xl-4,
            .my-xl-4 {
               margin-top: 1.5rem !important;
            }
            .mr-xl-4,
            .mx-xl-4 {
               margin-right: 1.5rem !important;
            }
            .mb-xl-4,
            .my-xl-4 {
               margin-bottom: 1.5rem !important;
            }
            .ml-xl-4,
            .mx-xl-4 {
               margin-left: 1.5rem !important;
            }
            .m-xl-5 {
               margin: 3rem !important;
            }
            .mt-xl-5,
            .my-xl-5 {
               margin-top: 3rem !important;
            }
            .mr-xl-5,
            .mx-xl-5 {
               margin-right: 3rem !important;
            }
            .mb-xl-5,
            .my-xl-5 {
               margin-bottom: 3rem !important;
            }
            .ml-xl-5,
            .mx-xl-5 {
               margin-left: 3rem !important;
            }
            .p-xl-0 {
               padding: 0 !important;
            }
            .pt-xl-0,
            .py-xl-0 {
               padding-top: 0 !important;
            }
            .pr-xl-0,
            .px-xl-0 {
               padding-right: 0 !important;
            }
            .pb-xl-0,
            .py-xl-0 {
               padding-bottom: 0 !important;
            }
            .pl-xl-0,
            .px-xl-0 {
               padding-left: 0 !important;
            }
            .p-xl-1 {
               padding: 0.25rem !important;
            }
            .pt-xl-1,
            .py-xl-1 {
               padding-top: 0.25rem !important;
            }
            .pr-xl-1,
            .px-xl-1 {
               padding-right: 0.25rem !important;
            }
            .pb-xl-1,
            .py-xl-1 {
               padding-bottom: 0.25rem !important;
            }
            .pl-xl-1,
            .px-xl-1 {
               padding-left: 0.25rem !important;
            }
            .p-xl-2 {
               padding: 0.5rem !important;
            }
            .pt-xl-2,
            .py-xl-2 {
               padding-top: 0.5rem !important;
            }
            .pr-xl-2,
            .px-xl-2 {
               padding-right: 0.5rem !important;
            }
            .pb-xl-2,
            .py-xl-2 {
               padding-bottom: 0.5rem !important;
            }
            .pl-xl-2,
            .px-xl-2 {
               padding-left: 0.5rem !important;
            }
            .p-xl-3 {
               padding: 1rem !important;
            }
            .pt-xl-3,
            .py-xl-3 {
               padding-top: 1rem !important;
            }
            .pr-xl-3,
            .px-xl-3 {
               padding-right: 1rem !important;
            }
            .pb-xl-3,
            .py-xl-3 {
               padding-bottom: 1rem !important;
            }
            .pl-xl-3,
            .px-xl-3 {
               padding-left: 1rem !important;
            }
            .p-xl-4 {
               padding: 1.5rem !important;
            }
            .pt-xl-4,
            .py-xl-4 {
               padding-top: 1.5rem !important;
            }
            .pr-xl-4,
            .px-xl-4 {
               padding-right: 1.5rem !important;
            }
            .pb-xl-4,
            .py-xl-4 {
               padding-bottom: 1.5rem !important;
            }
            .pl-xl-4,
            .px-xl-4 {
               padding-left: 1.5rem !important;
            }
            .p-xl-5 {
               padding: 3rem !important;
            }
            .pt-xl-5,
            .py-xl-5 {
               padding-top: 3rem !important;
            }
            .pr-xl-5,
            .px-xl-5 {
               padding-right: 3rem !important;
            }
            .pb-xl-5,
            .py-xl-5 {
               padding-bottom: 3rem !important;
            }
            .pl-xl-5,
            .px-xl-5 {
               padding-left: 3rem !important;
            }
            .m-xl-n1 {
               margin: -0.25rem !important;
            }
            .mt-xl-n1,
            .my-xl-n1 {
               margin-top: -0.25rem !important;
            }
            .mr-xl-n1,
            .mx-xl-n1 {
               margin-right: -0.25rem !important;
            }
            .mb-xl-n1,
            .my-xl-n1 {
               margin-bottom: -0.25rem !important;
            }
            .ml-xl-n1,
            .mx-xl-n1 {
               margin-left: -0.25rem !important;
            }
            .m-xl-n2 {
               margin: -0.5rem !important;
            }
            .mt-xl-n2,
            .my-xl-n2 {
               margin-top: -0.5rem !important;
            }
            .mr-xl-n2,
            .mx-xl-n2 {
               margin-right: -0.5rem !important;
            }
            .mb-xl-n2,
            .my-xl-n2 {
               margin-bottom: -0.5rem !important;
            }
            .ml-xl-n2,
            .mx-xl-n2 {
               margin-left: -0.5rem !important;
            }
            .m-xl-n3 {
               margin: -1rem !important;
            }
            .mt-xl-n3,
            .my-xl-n3 {
               margin-top: -1rem !important;
            }
            .mr-xl-n3,
            .mx-xl-n3 {
               margin-right: -1rem !important;
            }
            .mb-xl-n3,
            .my-xl-n3 {
               margin-bottom: -1rem !important;
            }
            .ml-xl-n3,
            .mx-xl-n3 {
               margin-left: -1rem !important;
            }
            .m-xl-n4 {
               margin: -1.5rem !important;
            }
            .mt-xl-n4,
            .my-xl-n4 {
               margin-top: -1.5rem !important;
            }
            .mr-xl-n4,
            .mx-xl-n4 {
               margin-right: -1.5rem !important;
            }
            .mb-xl-n4,
            .my-xl-n4 {
               margin-bottom: -1.5rem !important;
            }
            .ml-xl-n4,
            .mx-xl-n4 {
               margin-left: -1.5rem !important;
            }
            .m-xl-n5 {
               margin: -3rem !important;
            }
            .mt-xl-n5,
            .my-xl-n5 {
               margin-top: -3rem !important;
            }
            .mr-xl-n5,
            .mx-xl-n5 {
               margin-right: -3rem !important;
            }
            .mb-xl-n5,
            .my-xl-n5 {
               margin-bottom: -3rem !important;
            }
            .ml-xl-n5,
            .mx-xl-n5 {
               margin-left: -3rem !important;
            }
            .m-xl-auto {
               margin: auto !important;
            }
            .mt-xl-auto,
            .my-xl-auto {
               margin-top: auto !important;
            }
            .mr-xl-auto,
            .mx-xl-auto {
               margin-right: auto !important;
            }
            .mb-xl-auto,
            .my-xl-auto {
               margin-bottom: auto !important;
            }
            .ml-xl-auto,
            .mx-xl-auto {
               margin-left: auto !important;
            }
      }
      /** d.宽高
* w-sm/md/lg/xl-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100/auto(%)
* w-1400/1300/1200/1100/
*    1000/950/900/850/800/750/700/650/600/550/500/450/400/350/300/250/200/
*    190/180/170/160/150/140/130/120/110/100/
*    90/85/80/75/70/65/60/55/50/45/40/35/30/25/20/15/10/5(px)
* w-3-1/2
* w-6-1/5
* w-7-1/2/3/4/5/6
* vw-sm/md/lg/xl-5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100
* 
* h-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100/auto(%)
* h-sm(30px)-md(45px)-lg(50px)-xl(60px)
* h-1000/950/900/850/800/750/700/650/600/550/500/450/400/350/300/250/200/
*    190/180/170/160/150/140/130/120/110/100/
*    90/85/80/75/70/65/60/55/50/45/40/35/30/25/20/15/10/5(px)
* vh-5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100
*    
* mw-100/mh-100/min-vw-100/min-vh-100/
*/
      /*宽度*/
      
      .w-1400px {
            width: 1200px !important;
            margin: 0 auto;
      }
      
      .w-1300px {
            width: 1200px !important;
            margin: 0 auto;
      }
      
      .w-1200px {
            width: 1200px !important;
            margin: 0 auto;
      }
      
      .w-1100px {
            width: 1100px !important;
            margin: 0 auto;
      }
      
      .w-1000px {
            width: 1000px !important;
            margin: 0 auto;
      }
      
      .w-950px {
            width: 950px !important;
            margin: 0 auto;
      }
      
      .w-900px {
            width: 900px !important;
            margin: 0 auto;
      }
      
      .w-850px {
            width: 850px !important;
            margin: 0 auto;
      }
      
      .w-800px {
            width: 800px !important;
            margin: 0 auto;
      }
      
      .w-750px {
            width: 750px !important;
            margin: 0 auto;
      }
      
      .w-700px {
            width: 700px !important;
            margin: 0 auto;
      }
      
      .w-650px {
            width: 650px !important;
            margin: 0 auto;
      }
      
      .w-600px {
            width: 600px !important;
            margin: 0 auto;
      }
      
      .w-550px {
            width: 550px !important;
            margin: 0 auto;
      }
      
      .w-500px {
            width: 500px !important;
            margin: 0 auto;
      }
      
      .w-450px {
            width: 450px !important;
            margin: 0 auto;
      }
      
      .w-400px {
            width: 400px !important;
            margin: 0 auto;
      }
      
      .w-350px {
            width: 350px !important;
            margin: 0 auto;
      }
      
      .w-300px {
            width: 300px !important;
            margin: 0 auto;
      }
      
      .w-250px {
            width: 250px !important;
            margin: 0 auto;
      }
      
      .w-200px {
            width: 200px !important;
            margin: 0 auto;
      }
      
      .w-190px {
            width: 190px !important;
            margin: 0 auto;
      }
      
      .w-180px {
            width: 180px !important;
            margin: 0 auto;
      }
      
      .w-170px {
            width: 170px !important;
            margin: 0 auto;
      }
      
      .w-160px {
            width: 160px !important;
            margin: 0 auto;
      }
      
      .w-150px {
            width: 150px !important;
            margin: 0 auto;
      }
      
      .w-140px {
            width: 140px !important;
            margin: 0 auto;
      }
      
      .w-130px {
            width: 130px !important;
            margin: 0 auto;
      }
      
      .w-120px {
            width: 120px !important;
            margin: 0 auto;
      }
      
      .w-110px {
            width: 110px !important;
            margin: 0 auto;
      }
      
      .w-100px {
            width: 100px !important;
            margin: 0 auto;
      }
      
      .w-95px {
            width: 95px !important;
            margin: 0 auto;
      }
      
      .w-90px {
            width: 90px !important;
            margin: 0 auto;
      }
      
      .w-85px {
            width: 85px !important;
            margin: 0 auto;
      }
      
      .w-80px {
            width: 80px !important;
            margin: 0 auto;
      }
      
      .w-75px {
            width: 75px !important;
            margin: 0 auto;
      }
      
      .w-70px {
            width: 70px !important;
            margin: 0 auto;
      }
      
      .w-65px {
            width: 65px !important;
            margin: 0 auto;
      }
      
      .w-60px {
            width: 60px !important;
            margin: 0 auto;
      }
      
      .w-55px {
            width: 55px !important;
            margin: 0 auto;
      }
      
      .w-50px {
            width: 50px !important;
            margin: 0 auto;
      }
      
      .w-45px {
            width: 45px !important;
            margin: 0 auto;
      }
      
      .w-40px {
            width: 40px !important;
            margin: 0 auto;
      }
      
      .w-35px {
            width: 35px !important;
            margin: 0 auto;
      }
      
      .w-30px {
            width: 30px !important;
            margin: 0 auto;
      }
      
      .w-25px {
            width: 25px !important;
            margin: 0 auto;
      }
      
      .w-20px {
            width: 20px !important;
            margin: 0 auto;
      }
      
      .w-15px {
            width: 15px !important;
            margin: 0 auto;
      }
      
      .w-10px {
            width: 10px !important;
            margin: 0 auto;
      }
      
      .w-5px {
            width: 5px !important;
            margin: 0 auto;
      }
      
      .w-0 {
            width: 0 !important;
      }
      
      .w-5 {
            width: 5% !important;
      }
      
      .w-10 {
            width: 10% !important;
      }
      
      .w-15 {
            width: 15% !important;
      }
      
      .w-20 {
            width: 20% !important;
      }
      
      .w-25 {
            width: 25% !important;
      }
      
      .w-30 {
            width: 30% !important;
      }
      
      .w-35 {
            width: 35% !important;
      }
      
      .w-40 {
            width: 40% !important;
      }
      
      .w-45 {
            width: 45% !important;
      }
      
      .w-50 {
            width: 50% !important;
      }
      
      .w-55 {
            width: 55% !important;
      }
      
      .w-60 {
            width: 60% !important;
      }
      
      .w-65 {
            width: 65% !important;
      }
      
      .w-70 {
            width: 70% !important;
      }
      
      .w-75 {
            width: 75% !important;
      }
      
      .w-80 {
            width: 80% !important;
      }
      
      .w-85 {
            width: 85% !important;
      }
      
      .w-90 {
            width: 90% !important;
      }
      
      .w-95 {
            width: 95% !important;
      }
      
      .w-100 {
            width: 100% !important;
      }
      
      .w-3-1 {
            width: 33.33% !important;
      }
      
      .w-3-2 {
            width: 66.67% !important;
      }
      
      .w-6-1 {
            width: 16.67% !important;
      }
      
      .w-6-5 {
            width: 83.34% !important;
      }
      
      .w-7-1 {
            width: 14.29% !important;
      }
      
      .w-7-2 {
            width: 28.57% !important;
      }
      
      .w-7-3 {
            width: 42.86% !important;
      }
      
      .w-7-4 {
            width: 57.14% !important;
      }
      
      .w-7-5 {
            width: 71.43% !important;
      }
      
      .w-7-6 {
            width: 85.71% !important;
      }
      
      .w-auto {
            width: auto !important;
      }
      
      .vw-5 {
            width: 5vw !important;
      }
      
      .vw-10 {
            width: 10vw !important;
      }
      
      .vw-15 {
            width: 15vw !important;
      }
      
      .vw-20 {
            width: 20vw !important;
      }
      
      .vw-25 {
            width: 25vw !important;
      }
      
      .vw-30 {
            width: 30vw !important;
      }
      
      .vw-35 {
            width: 35vw !important;
      }
      
      .vw-40 {
            width: 40vw !important;
      }
      
      .vw-45 {
            width: 45vw !important;
      }
      
      .vw-50 {
            width: 50vw !important;
      }
      
      .vw-55 {
            width: 55vw !important;
      }
      
      .vw-60 {
            width: 60vw !important;
      }
      
      .vw-65 {
            width: 65vw !important;
      }
      
      .vw-70 {
            width: 70vw !important;
      }
      
      .vw-75 {
            width: 75vw !important;
      }
      
      .vw-80 {
            width: 80vw !important;
      }
      
      .vw-85 {
            width: 85vw !important;
      }
      
      .vw-90 {
            width: 90vw !important;
      }
      
      .vw-95 {
            width: 95vw !important;
      }
      
      .vw-100 {
            width: 100vw !important;
      }
      
      @media (min-width: 576px) {
            .w-sm-0 {
               width: 0 !important;
            }
            .w-sm-5 {
               width: 5% !important;
            }
            .w-sm-10 {
               width: 10% !important;
            }
            .w-sm-15 {
               width: 15% !important;
            }
            .w-sm-20 {
               width: 20% !important;
            }
            .w-sm-25 {
               width: 25% !important;
            }
            .w-sm-30 {
               width: 30% !important;
            }
            .w-sm-35 {
               width: 35% !important;
            }
            .w-sm-40 {
               width: 40% !important;
            }
            .w-sm-45 {
               width: 45% !important;
            }
            .w-sm-50 {
               width: 50% !important;
            }
            .w-sm-55 {
               width: 55% !important;
            }
            .w-sm-60 {
               width: 60% !important;
            }
            .w-sm-65 {
               width: 65% !important;
            }
            .w-sm-70 {
               width: 70% !important;
            }
            .w-sm-75 {
               width: 75% !important;
            }
            .w-sm-80 {
               width: 80% !important;
            }
            .w-sm-85 {
               width: 85% !important;
            }
            .w-sm-90 {
               width: 90% !important;
            }
            .w-sm-95 {
               width: 95% !important;
            }
            .w-sm-100 {
               width: 100% !important;
            }
            .w-sm-auto {
               width: auto !important;
            }
            .vw-sm-5 {
               width: 5vw !important;
            }
            .vw-sm-10 {
               width: 10vw !important;
            }
            .vw-sm-15 {
               width: 15vw !important;
            }
            .vw-sm-20 {
               width: 20vw !important;
            }
            .vw-sm-25 {
               width: 25vw !important;
            }
            .vw-sm-30 {
               width: 30vw !important;
            }
            .vw-sm-35 {
               width: 35vw !important;
            }
            .vw-sm-40 {
               width: 40vw !important;
            }
            .vw-sm-45 {
               width: 45vw !important;
            }
            .vw-sm-50 {
               width: 50vw !important;
            }
            .vw-sm-55 {
               width: 55vw !important;
            }
            .vw-sm-60 {
               width: 60vw !important;
            }
            .vw-sm-65 {
               width: 65vw !important;
            }
            .vw-sm-70 {
               width: 70vw !important;
            }
            .vw-sm-75 {
               width: 75vw !important;
            }
            .vw-sm-80 {
               width: 80vw !important;
            }
            .vw-sm-85 {
               width: 85vw !important;
            }
            .vw-sm-90 {
               width: 90vw !important;
            }
            .vw-sm-95 {
               width: 95vw !important;
            }
            .vw-sm-100 {
               width: 100vw !important;
            }
      }
      
      @media (min-width: 768px) {
            .w-md-0 {
               width: 0 !important;
            }
            .w-md-5 {
               width: 5% !important;
            }
            .w-md-10 {
               width: 10% !important;
            }
            .w-md-15 {
               width: 15% !important;
            }
            .w-md-20 {
               width: 20% !important;
            }
            .w-md-25 {
               width: 25% !important;
            }
            .w-md-30 {
               width: 30% !important;
            }
            .w-md-35 {
               width: 35% !important;
            }
            .w-md-40 {
               width: 40% !important;
            }
            .w-md-45 {
               width: 45% !important;
            }
            .w-md-50 {
               width: 50% !important;
            }
            .w-md-55 {
               width: 55% !important;
            }
            .w-md-60 {
               width: 60% !important;
            }
            .w-md-65 {
               width: 65% !important;
            }
            .w-md-70 {
               width: 70% !important;
            }
            .w-md-75 {
               width: 75% !important;
            }
            .w-md-80 {
               width: 80% !important;
            }
            .w-md-85 {
               width: 85% !important;
            }
            .w-md-90 {
               width: 90% !important;
            }
            .w-md-95 {
               width: 95% !important;
            }
            .w-md-100 {
               width: 100% !important;
            }
            .w-md-auto {
               width: auto !important;
            }
            .vw-md-5 {
               width: 5vw !important;
            }
            .vw-md-10 {
               width: 10vw !important;
            }
            .vw-md-15 {
               width: 15vw !important;
            }
            .vw-md-20 {
               width: 20vw !important;
            }
            .vw-md-25 {
               width: 25vw !important;
            }
            .vw-md-30 {
               width: 30vw !important;
            }
            .vw-md-35 {
               width: 35vw !important;
            }
            .vw-md-40 {
               width: 40vw !important;
            }
            .vw-md-45 {
               width: 45vw !important;
            }
            .vw-md-50 {
               width: 50vw !important;
            }
            .vw-md-55 {
               width: 55vw !important;
            }
            .vw-md-60 {
               width: 60vw !important;
            }
            .vw-md-65 {
               width: 65vw !important;
            }
            .vw-md-70 {
               width: 70vw !important;
            }
            .vw-md-75 {
               width: 75vw !important;
            }
            .vw-md-80 {
               width: 80vw !important;
            }
            .vw-md-85 {
               width: 85vw !important;
            }
            .vw-md-90 {
               width: 90vw !important;
            }
            .vw-md-95 {
               width: 95vw !important;
            }
            .vw-md-100 {
               width: 100vw !important;
            }
      }
      
      @media (min-width: 992px) {
            .w-lg-0 {
               width: 0 !important;
            }
            .w-lg-5 {
               width: 5% !important;
            }
            .w-lg-10 {
               width: 10% !important;
            }
            .w-lg-15 {
               width: 15% !important;
            }
            .w-lg-20 {
               width: 20% !important;
            }
            .w-lg-25 {
               width: 25% !important;
            }
            .w-lg-30 {
               width: 30% !important;
            }
            .w-lg-35 {
               width: 35% !important;
            }
            .w-lg-40 {
               width: 40% !important;
            }
            .w-lg-45 {
               width: 45% !important;
            }
            .w-lg-50 {
               width: 50% !important;
            }
            .w-lg-55 {
               width: 55% !important;
            }
            .w-lg-60 {
               width: 60% !important;
            }
            .w-lg-65 {
               width: 65% !important;
            }
            .w-lg-70 {
               width: 70% !important;
            }
            .w-lg-75 {
               width: 75% !important;
            }
            .w-lg-80 {
               width: 80% !important;
            }
            .w-lg-85 {
               width: 85% !important;
            }
            .w-lg-90 {
               width: 90% !important;
            }
            .w-lg-95 {
               width: 95% !important;
            }
            .w-lg-100 {
               width: 100% !important;
            }
            .w-lg-auto {
               width: auto !important;
            }
            .vw-lg-5 {
               width: 5vw !important;
            }
            .vw-lg-10 {
               width: 10vw !important;
            }
            .vw-lg-15 {
               width: 15vw !important;
            }
            .vw-lg-20 {
               width: 20vw !important;
            }
            .vw-lg-25 {
               width: 25vw !important;
            }
            .vw-lg-30 {
               width: 30vw !important;
            }
            .vw-lg-35 {
               width: 35vw !important;
            }
            .vw-lg-40 {
               width: 40vw !important;
            }
            .vw-lg-45 {
               width: 45vw !important;
            }
            .vw-lg-50 {
               width: 50vw !important;
            }
            .vw-lg-55 {
               width: 55vw !important;
            }
            .vw-lg-60 {
               width: 60vw !important;
            }
            .vw-lg-65 {
               width: 65vw !important;
            }
            .vw-lg-70 {
               width: 70vw !important;
            }
            .vw-lg-75 {
               width: 75vw !important;
            }
            .vw-lg-80 {
               width: 80vw !important;
            }
            .vw-lg-85 {
               width: 85vw !important;
            }
            .vw-lg-90 {
               width: 90vw !important;
            }
            .vw-lg-95 {
               width: 95vw !important;
            }
            .vw-lg-100 {
               width: 100vw !important;
            }
      }
      
      @media (min-width: 1200px) {
            .w-xl-0 {
               width: 0 !important;
            }
            .w-xl-5 {
               width: 5% !important;
            }
            .w-xl-10 {
               width: 10% !important;
            }
            .w-xl-15 {
               width: 15% !important;
            }
            .w-xl-20 {
               width: 20% !important;
            }
            .w-xl-25 {
               width: 25% !important;
            }
            .w-xl-30 {
               width: 30% !important;
            }
            .w-xl-35 {
               width: 35% !important;
            }
            .w-xl-40 {
               width: 40% !important;
            }
            .w-xl-45 {
               width: 45% !important;
            }
            .w-xl-50 {
               width: 50% !important;
            }
            .w-xl-55 {
               width: 55% !important;
            }
            .w-xl-60 {
               width: 60% !important;
            }
            .w-xl-65 {
               width: 65% !important;
            }
            .w-xl-70 {
               width: 70% !important;
            }
            .w-xl-75 {
               width: 75% !important;
            }
            .w-xl-80 {
               width: 80% !important;
            }
            .w-xl-85 {
               width: 85% !important;
            }
            .w-xl-90 {
               width: 90% !important;
            }
            .w-xl-95 {
               width: 95% !important;
            }
            .w-xl-100 {
               width: 100% !important;
            }
            .w-xl-auto {
               width: auto !important;
            }
            .vw-xl-5 {
               width: 5vw !important;
            }
            .vw-xl-10 {
               width: 10vw !important;
            }
            .vw-xl-15 {
               width: 15vw !important;
            }
            .vw-xl-20 {
               width: 20vw !important;
            }
            .vw-xl-25 {
               width: 25vw !important;
            }
            .vw-xl-30 {
               width: 30vw !important;
            }
            .vw-xl-35 {
               width: 35vw !important;
            }
            .vw-xl-40 {
               width: 40vw !important;
            }
            .vw-xl-45 {
               width: 45vw !important;
            }
            .vw-xl-50 {
               width: 50vw !important;
            }
            .vw-xl-55 {
               width: 55vw !important;
            }
            .vw-xl-60 {
               width: 60vw !important;
            }
            .vw-xl-65 {
               width: 65vw !important;
            }
            .vw-xl-70 {
               width: 70vw !important;
            }
            .vw-xl-75 {
               width: 75vw !important;
            }
            .vw-xl-80 {
               width: 80vw !important;
            }
            .vw-xl-85 {
               width: 85vw !important;
            }
            .vw-xl-90 {
               width: 90vw !important;
            }
            .vw-xl-95 {
               width: 95vw !important;
            }
            .vw-xl-100 {
               width: 100vw !important;
            }
      }
      /*高度*/
      
      .h-sm {
            height: 30px !important;
            line-height: 30px !important;
      }
      
      .h-md {
            height: 45px !important;
            line-height: 45px !important;
      }
      
      .h-lg {
            height: 50px !important;
            line-height: 60px !important;
      }
      
      .h-xl {
            height: 60px !important;
            line-height: 60px !important;
      }
      
      .h-5px {
            height: 5px !important;
      }
      
      .h-10px {
            height: 10px !important;
      }
      
      .h-15px {
            height: 15px !important;
      }
      
      .h-20px {
            height: 20px !important;
      }
      
      .h-25px {
            height: 25px !important;
      }
      
      .h-30px {
            height: 30px !important;
      }
      
      .h-35px {
            height: 35px !important;
      }
      
      .h-40px {
            height: 40px !important;
      }
      
      .h-45px {
            height: 45px !important;
      }
      
      .h-50px {
            height: 50px !important;
      }
      
      .h-55px {
            height: 55px !important;
      }
      
      .h-60px {
            height: 60px !important;
      }
      
      .h-65px {
            height: 65px !important;
      }
      
      .h-70px {
            height: 70px !important;
      }
      
      .h-75px {
            height: 75px !important;
      }
      
      .h-80px {
            height: 80px !important;
      }
      
      .h-85px {
            height: 85px !important;
      }
      
      .h-90px {
            height: 90px !important;
      }
      
      .h-95px {
            height: 95px !important;
      }
      
      .h-100px {
            height: 100px !important;
      }
      
      .h-110px {
            height: 110px !important;
      }
      
      .h-120px {
            height: 120px !important;
      }
      
      .h-130px {
            height: 130px !important;
      }
      
      .h-140px {
            height: 140px !important;
      }
      
      .h-150px {
            height: 150px !important;
      }
      
      .h-160px {
            height: 160px !important;
      }
      
      .h-170px {
            height: 170px !important;
      }
      
      .h-180px {
            height: 180px !important;
      }
      
      .h-190px {
            height: 190px !important;
      }
      
      .h-200px {
            height: 200px !important;
      }
      
      .h-250px {
            height: 250px !important;
      }
      
      .h-300px {
            height: 300px !important;
      }
      
      .h-350px {
            height: 350px !important;
      }
      
      .h-400px {
            height: 400px !important;
      }
      
      .h-450px {
            height: 450px !important;
      }
      
      .h-500px {
            height: 500px !important;
      }
      
      .h-550px {
            height: 550px !important;
      }
      
      .h-600px {
            height: 600px !important;
      }
      
      .h-650px {
            height: 650px !important;
      }
      
      .h-700px {
            height: 700px !important;
      }
      
      .h-750px {
            height: 750px !important;
      }
      
      .h-800px {
            height: 800px !important;
      }
      
      .h-850px {
            height: 850px !important;
      }
      
      .h-900px {
            height: 900px !important;
      }
      
      .h-950px {
            height: 950px !important;
      }
      
      .h-1000px {
            height: 1000px !important;
      }
      
      .h-0 {
            height: 0 !important;
      }
      
      .h-5 {
            height: 5% !important;
      }
      
      .h-10 {
            height: 10% !important;
      }
      
      .h-15 {
            height: 15% !important;
      }
      
      .h-20 {
            height: 20% !important;
      }
      
      .h-25 {
            height: 25% !important;
      }
      
      .h-30 {
            height: 30% !important;
      }
      
      .h-35 {
            height: 35% !important;
      }
      
      .h-40 {
            height: 40% !important;
      }
      
      .h-45 {
            height: 45% !important;
      }
      
      .h-50 {
            height: 50% !important;
      }
      
      .h-55 {
            height: 55% !important;
      }
      
      .h-60 {
            height: 60% !important;
      }
      
      .h-65 {
            height: 65% !important;
      }
      
      .h-70 {
            height: 70% !important;
      }
      
      .h-75 {
            height: 75% !important;
      }
      
      .h-80 {
            height: 80% !important;
      }
      
      .h-85 {
            height: 85% !important;
      }
      
      .h-90 {
            height: 90% !important;
      }
      
      .h-95 {
            height: 95% !important;
      }
      
      .h-100 {
            height: 100% !important;
      }
      
      .h-auto {
            height: auto !important;
      }
      
      .mw-100 {
            max-width: 100% !important;
      }
      
      .mh-100 {
            max-height: 100% !important;
      }
      
      .min-vw-100 {
            min-width: 100vw !important;
      }
      
      .min-vh-100 {
            min-height: 100vh !important;
      }
      
      .vh-5 {
            height: 5vh !important;
      }
      
      .vh-10 {
            height: 10vh !important;
      }
      
      .vh-15 {
            height: 15vh !important;
      }
      
      .vh-20 {
            height: 20vh !important;
      }
      
      .vh-25 {
            height: 25vh !important;
      }
      
      .vh-30 {
            height: 30vh !important;
      }
      
      .vh-35 {
            height: 35vh !important;
      }
      
      .vh-40 {
            height: 40vh !important;
      }
      
      .vh-45 {
            height: 45vh !important;
      }
      
      .vh-50 {
            height: 50vh !important;
      }
      
      .vh-55 {
            height: 55vh !important;
      }
      
      .vh-60 {
            height: 60vh !important;
      }
      
      .vh-65 {
            height: 65vh !important;
      }
      
      .vh-70 {
            height: 70vh !important;
      }
      
      .vh-75 {
            height: 75vh !important;
      }
      
      .vh-80 {
            height: 80vh !important;
      }
      
      .vh-85 {
            height: 85vh !important;
      }
      
      .vh-90 {
            height: 90vh !important;
      }
      
      .vh-95 {
            height: 95vh !important;
      }
      
      .vh-100 {
            height: 100vh !important;
      }
      /** e.边框
*  有 border border-top border-right border-bottom border-left 
*  无 border-0 border-top-0 border-right-0 border-bottom-0 border-left-0
*  颜色 border-primary  secondary success info warning danger light dark white transparent green-dark
*  粗细 border-1px/2px/3px/4px/5px/6px/7px/8px/9px/10px
*  风格 border-dotted dashed solid double groove ridge inset outset
*  圆角 rounded-sm(0.2rem) -md(0.5rem) -lg(1rem) -xl(2rem) -circle(50%) -pill(50rem) -0
*        rounded/rounded-top-left/rounded-top-right/rounded-bottom-left/rounded-bottom-right
*        /rounded-top/rounded-right/rounded-bottom/rounded-left(0.25rem)
*/
      /*有无*/
      
      .border {
            border: 1px solid var(--gray-light3) !important;
      }
      
      .border-top {
            border-top: 1px solid var(--gray-light3) !important;
      }
      
      .border-top-only {
            border-top-width: 1px 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom: 0 !important;
      }
      
      .border-right {
            border-right: 1px solid var(--gray-light3) !important;
      }
      
      .border-right-only {
            border-top: 0 !important;
            border-left: 0 !important;
            border-right-width: 1px !important;
            border-bottom: 0 !important;
      }
      
      .border-bottom {
            border-bottom: 1px solid var(--gray-light3) !important;
      }
      
      .border-bottom-only {
            border-top: 0 !important;
            border-left: 0 !important;
            border-right: 0 !important;
            border-bottom-width: 1px !important;
      }
      
      .border-left {
            border-left: 1px solid var(--gray-light3) !important;
      }
      
      .border-left-only {
            border-top: 0 !important;
            border-left-width: 1px !important;
            border-right: 0 !important;
            border-bottom: 0 !important;
      }
      
      .border-0 {
            border: 0 !important;
      }
      
      .border-top-0 {
            border-top: 0 !important;
      }
      
      .border-right-0 {
            border-right: 0 !important;
      }
      
      .border-bottom-0 {
            border-bottom: 0 !important;
      }
      
      .border-left-0 {
            border-left: 0 !important;
      }
      /*颜色*/
      
      .border-primary {
            border-color: var(--primary) !important;
      }
      
      .border-secondary {
            border-color: var(--secondary) !important;
      }
      
      .border-success {
            border-color: var(--success) !important;
      }
      
      .border-info {
            border-color: var(--info) !important;
      }
      
      .border-warning {
            border-color: var(--warning) !important;
      }
      
      .border-danger {
            border-color: var(--danger) !important;
      }
      
      .border-light {
            border-color: var(--light) !important;
      }
      
      .border-dark {
            border-color: var(--dark) !important;
      }
      
      .border-white {
            border-color: var(--white) !important;
      }
      
      .border-transparent {
            border-color: transparent !important;
      }
      
      .border-green-dark {
            border-color: var(--green-dark) !important;
      }
      /*粗细*/
      
      .border-1px {
            border-width: 1px !important;
      }
      
      .border-2px {
            border-width: 2px !important;
      }
      
      .border-3px {
            border-width: 3px !important;
      }
      
      .border-4px {
            border-width: 4px !important;
      }
      
      .border-5px {
            border-width: 5px !important;
      }
      
      .border-6px {
            border-width: 6px !important;
      }
      
      .border-7px {
            border-width: 7px !important;
      }
      
      .border-8px {
            border-width: 8px !important;
      }
      
      .border-9px {
            border-width: 9px !important;
      }
      
      .border-10px {
            border-width: 10px !important;
      }
      /*风格*/
      
      .border-dotted {
            border-style: dotted !important;
      }
      
      .border-dashed {
            border-style: dashed !important;
      }
      
      .border-solid {
            border-style: solid !important;
      }
      
      .border-double {
            border-style: double !important;
      }
      
      .border-groove {
            border-style: groove !important;
      }
      
      .border-ridge {
            border-style: ridge !important;
      }
      
      .border-inset {
            border-style: inset !important;
      }
      
      .border-outset {
            border-style: outset !important;
      }
      /*圆角*/
      
      .rounded {
            border-radius: 0.25rem !important;
      }
      
      .rounded-sm {
            border-radius: 0.2rem !important;
      }
      
      .rounded-md {
            border-radius: 0.5rem !important;
      }
      
      .rounded-lg {
            border-radius: 1rem !important;
      }
      
      .rounded-xl {
            border-radius: 2rem !important;
      }
      
      .rounded-top {
            border-top-left-radius: 0.25rem !important;
            border-top-right-radius: 0.25rem !important;
      }
      
      .rounded-right {
            border-top-right-radius: 0.25rem !important;
            border-bottom-right-radius: 0.25rem !important;
      }
      
      .rounded-bottom {
            border-bottom-right-radius: 0.25rem !important;
            border-bottom-left-radius: 0.25rem !important;
      }
      
      .rounded-left {
            border-top-left-radius: 0.25rem !important;
            border-bottom-left-radius: 0.25rem !important;
      }
      
      .rounded-top-left {
            border-top-left-radius: 0.25rem !important;
      }
      
      .rounded-top-right {
            border-top-right-radius: 0.25rem !important;
      }
      
      .rounded-bottom-right {
            border-bottom-right-radius: 0.25rem !important;
      }
      
      .rounded-bottom-left {
            border-bottom-left-radius: 0.25rem !important;
      }
      
      .rounded-circle,
      .circle {
            border-radius: 50% !important;
      }
      
      .rounded-pill {
            border-radius: 50rem !important;
      }
      
      .rounded-0 {
            border-radius: 0 !important;
      }
      /** f.阴影 elevation
* elevation-0/1/2/3/4/5
*/
      
      .elevation-0 {
            box-shadow: none !important;
      }
      
      .elevation-1 {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
      }
      
      .elevation-2 {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
      }
      
      .elevation-3 {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;
      }
      
      .elevation-4 {
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22) !important;
      }
      
      .elevation-5 {
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22) !important;
      }
      /** g.隐藏与显示 visibility d-
* visible invisible hide
* d-(sm-/md-/lg-/xl-)-none/inline/inline-block/block/table/table-row/table-cell/flex/inline-flex
*/
      
      .visible {
            visibility: visible !important;
      }
      
      .invisible {
            visibility: hidden !important;
      }
      
      .d-none,
      .hide {
            display: none !important;
      }
      
      .d-inline {
            display: inline !important;
      }
      
      .d-inline-block {
            display: inline-block !important;
      }
      
      .d-block,
      .show {
            display: block !important;
      }
      
      .d-table {
            display: table !important;
      }
      
      .d-table-row {
            display: table-row !important;
      }
      
      .d-table-cell {
            display: table-cell !important;
      }
      
      .flex,
      .d-flex {
            display: -ms-flexbox !important;
            display: flex !important;
      }
      
      .d-inline-flex {
            display: -ms-inline-flexbox !important;
            display: inline-flex !important;
      }
      
      @media (min-width: 576px) {
            .d-sm-none {
               display: none !important;
            }
            .d-sm-inline {
               display: inline !important;
            }
            .d-sm-inline-block {
               display: inline-block !important;
            }
            .d-sm-block {
               display: block !important;
            }
            .d-sm-table {
               display: table !important;
            }
            .d-sm-table-row {
               display: table-row !important;
            }
            .d-sm-table-cell {
               display: table-cell !important;
            }
            .d-sm-flex,
            .sm-flex {
               display: -ms-flexbox !important;
               display: flex !important;
            }
            .d-sm-inline-flex {
               display: -ms-inline-flexbox !important;
               display: inline-flex !important;
            }
      }
      
      @media (min-width: 768px) {
            .d-md-none {
               display: none !important;
            }
            .d-md-inline {
               display: inline !important;
            }
            .d-md-inline-block {
               display: inline-block !important;
            }
            .d-md-block {
               display: block !important;
            }
            .d-md-table {
               display: table !important;
            }
            .d-md-table-row {
               display: table-row !important;
            }
            .d-md-table-cell {
               display: table-cell !important;
            }
            .d-md-flex,
            .md-flex {
               display: -ms-flexbox !important;
               display: flex !important;
            }
            .d-md-inline-flex {
               display: -ms-inline-flexbox !important;
               display: inline-flex !important;
            }
      }
      
      @media (min-width: 992px) {
            .d-lg-none {
               display: none !important;
            }
            .d-lg-inline {
               display: inline !important;
            }
            .d-lg-inline-block {
               display: inline-block !important;
            }
            .d-lg-block {
               display: block !important;
            }
            .d-lg-table {
               display: table !important;
            }
            .d-lg-table-row {
               display: table-row !important;
            }
            .d-lg-table-cell {
               display: table-cell !important;
            }
            .d-lg-flex,
            .lg-flex {
               display: -ms-flexbox !important;
               display: flex !important;
            }
            .d-lg-inline-flex {
               display: -ms-inline-flexbox !important;
               display: inline-flex !important;
            }
      }
      
      @media (min-width: 1200px) {
            .d-xl-none {
               display: none !important;
            }
            .d-xl-inline {
               display: inline !important;
            }
            .d-xl-inline-block {
               display: inline-block !important;
            }
            .d-xl-block {
               display: block !important;
            }
            .d-xl-table {
               display: table !important;
            }
            .d-xl-table-row {
               display: table-row !important;
            }
            .d-xl-table-cell {
               display: table-cell !important;
            }
            .d-xl-flex,
            .xl-flex {
               display: -ms-flexbox !important;
               display: flex !important;
            }
            .d-xl-inline-flex {
               display: -ms-inline-flexbox !important;
               display: inline-flex !important;
            }
      }
      /** h.溢出 overflow-(x/y)
*  auto/hidden/visible/scroll
*  滚动条 scrollbar-none/gray
*/
      
      .overflow-auto {
            overflow: auto !important;
      }
      
      .overflow-x-auto {
            overflow-x: auto !important;
      }
      
      .overflow-y-auto {
            overflow-y: auto !important;
      }
      
      .overflow-hidden {
            overflow: hidden !important;
      }
      
      .overflow-x-hidden {
            overflow-x: hidden !important;
      }
      
      .overflow-y-hidden {
            overflow-y: hidden !important;
      }
      
      .overflow-visible {
            overflow: visible !important;
      }
      
      .overflow-x-visible {
            overflow-x: visible !important;
      }
      
      .overflow-y-visible {
            overflow-y: visible !important;
      }
      
      .overflow-scroll {
            overflow: scroll !important;
      }
      
      .overflow-x-scroll {
            overflow-x: scroll !important;
      }
      
      .overflow-y-scroll {
            overflow-y: scroll !important;
      }
      /** 滚动条样式
   * 滚动条组成部分
   *	1. ::-webkit-scrollbar 滚动条整体部分
   *	2. ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动）
   *	3. ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
   *	4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
   *	5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
   *	6. ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方
   *	7. ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件
   */
      /*隐藏滚动条*/
      
      .scrollbar-none::-webkit-scrollbar {
            display: none
      }
      /*定制滚动条  */
      
      .scrollbar-gray::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 8px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
      }
      
      .scrollbar-gray::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 5px;
            border: 2px solid rgba(0, 0, 0, 0);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
      }
      
      .scrollbar-gray::-webkit-scrollbar-thumb:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
      }
      
      .scrollbar-gray::-webkit-scrollbar-corner {
            background-color: rgba(0, 0, 0, 0);
      }
      /** i.定位 position-
* position-static/relative/absolute/fixed/sticky
* fixed-top/bottom
* absolute-right/left/top/bottom
* right/left/top/bottom/rw-0/5/10/15/20/25/30/35/40/45/50/55/60/65/70/75/80/85/90/95/100
*/
      
      .position-static {
            position: static !important;
      }
      
      .position-relative {
            position: relative !important;
      }
      
      .position-absolute {
            position: absolute !important;
      }
      
      .position-fixed {
            position: fixed !important;
      }
      
      .position-sticky {
            position: -webkit-sticky !important;
            position: sticky !important;
      }
      
      .fixed-top {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 1030;
      }
      
      .fixed-bottom {
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1030;
      }
      
      .absolute-right {
            position: absolute !important;
            right: 0;
      }
      
      .absolute-left {
            position: absolute !important;
            left: 0;
      }
      
      .absolute-bottom {
            position: absolute !important;
            bottom: 0;
      }
      
      .absolute-top {
            position: absolute !important;
            top: 0;
      }
      
      .top-0 {
            top: 0;
      }
      
      .top-5 {
            top: 5%;
      }
      
      .top-10 {
            top: 10%;
      }
      
      .top-15 {
            top: 15%;
      }
      
      .top-20 {
            top: 20%;
      }
      
      .top-25 {
            top: 25%;
      }
      
      .top-30 {
            top: 30%;
      }
      
      .top-35 {
            top: 35%;
      }
      
      .top-40 {
            top: 40%;
      }
      
      .top-45 {
            top: 45%;
      }
      
      .top-50 {
            top: 50%;
      }
      
      .top-55 {
            top: 55%;
      }
      
      .top-60 {
            top: 60%;
      }
      
      .top-65 {
            top: 65%;
      }
      
      .top-70 {
            top: 70%;
      }
      
      .top-75 {
            top: 75%;
      }
      
      .top-80 {
            top: 80%;
      }
      
      .top-85 {
            top: 85%;
      }
      
      .top-90 {
            top: 90%;
      }
      
      .top-95 {
            top: 95%;
      }
      
      .top-100 {
            top: 100%;
      }
      
      .left-0 {
            left: 0;
      }
      
      .left-5 {
            left: 5%;
      }
      
      .left-10 {
            left: 10%;
      }
      
      .left-15 {
            left: 15%;
      }
      
      .left-20 {
            left: 20%;
      }
      
      .left-25 {
            left: 25%;
      }
      
      .left-30 {
            left: 30%;
      }
      
      .left-35 {
            left: 35%;
      }
      
      .left-40 {
            left: 40%;
      }
      
      .left-45 {
            left: 45%;
      }
      
      .left-50 {
            left: 50%;
      }
      
      .left-55 {
            left: 55%;
      }
      
      .left-60 {
            left: 60%;
      }
      
      .left-65 {
            left: 65%;
      }
      
      .left-70 {
            left: 70%;
      }
      
      .left-75 {
            left: 75%;
      }
      
      .left-80 {
            left: 80%;
      }
      
      .left-85 {
            left: 85%;
      }
      
      .left-90 {
            left: 90%;
      }
      
      .left-95 {
            left: 95%;
      }
      
      .left-100 {
            left: 100%;
      }
      
      .right-0 {
            right: 0;
      }
      
      .right-5 {
            right: 5%;
      }
      
      .right-10 {
            right: 10%;
      }
      
      .right-15 {
            right: 15%;
      }
      
      .right-20 {
            right: 20%;
      }
      
      .right-25 {
            right: 25%;
      }
      
      .right-30 {
            right: 30%;
      }
      
      .right-35 {
            right: 35%;
      }
      
      .right-40 {
            right: 40%;
      }
      
      .right-45 {
            right: 45%;
      }
      
      .right-50 {
            right: 50%;
      }
      
      .right-55 {
            right: 55%;
      }
      
      .right-60 {
            right: 60%;
      }
      
      .right-65 {
            right: 65%;
      }
      
      .right-70 {
            right: 70%;
      }
      
      .right-75 {
            right: 75%;
      }
      
      .right-80 {
            right: 80%;
      }
      
      .right-85 {
            right: 85%;
      }
      
      .right-90 {
            right: 90%;
      }
      
      .right-95 {
            right: 95%;
      }
      
      .right-100 {
            right: 100%;
      }
      
      .bottom-0 {
            bottom: 0;
      }
      
      .bottom-5 {
            bottom: 5%;
      }
      
      .bottom-10 {
            bottom: 10%;
      }
      
      .bottom-15 {
            bottom: 15%;
      }
      
      .bottom-20 {
            bottom: 20%;
      }
      
      .bottom-25 {
            bottom: 25%;
      }
      
      .bottom-30 {
            bottom: 30%;
      }
      
      .bottom-35 {
            bottom: 35%;
      }
      
      .bottom-40 {
            bottom: 40%;
      }
      
      .bottom-45 {
            bottom: 45%;
      }
      
      .bottom-50 {
            bottom: 50%;
      }
      
      .bottom-55 {
            bottom: 55%;
      }
      
      .bottom-60 {
            bottom: 60%;
      }
      
      .bottom-65 {
            bottom: 65%;
      }
      
      .bottom-70 {
            bottom: 70%;
      }
      
      .bottom-75 {
            bottom: 75%;
      }
      
      .bottom-80 {
            bottom: 80%;
      }
      
      .bottom-85 {
            bottom: 85%;
      }
      
      .bottom-90 {
            bottom: 90%;
      }
      
      .bottom-95 {
            bottom: 95%;
      }
      
      .bottom-100 {
            bottom: 100%;
      }
      
      .rw-0 {
            left: 100%;
            width: 0;
      }
      
      .rw-5 {
            left: 95%;
            width: 5%;
      }
      
      .rw-10 {
            left: 90%;
            width: 10%;
      }
      
      .rw-15 {
            left: 85%;
            width: 15%;
      }
      
      .rw-20 {
            left: 80%;
            width: 20%;
      }
      
      .rw-25 {
            left: 75%;
            width: 25%;
      }
      
      .rw-30 {
            left: 70%;
            width: 30%;
      }
      
      .rw-35 {
            left: 65%;
            width: 35%;
      }
      
      .rw-40 {
            left: 60%;
            width: 40%;
      }
      
      .rw-45 {
            left: 55%;
            width: 45%;
      }
      
      .rw-50 {
            left: 50%;
            width: 50%;
      }
      
      .rw-55 {
            left: 45%;
            width: 55%;
      }
      
      .rw-60 {
            left: 40%;
            width: 60%;
      }
      
      .rw-65 {
            left: 35%;
            width: 65%;
      }
      
      .rw-70 {
            left: 30%;
            width: 70%;
      }
      
      .rw-75 {
            left: 25%;
            width: 75%;
      }
      
      .rw-80 {
            left: 20%;
            width: 80%;
      }
      
      .rw-85 {
            left: 15%;
            width: 85%;
      }
      
      .rw-90 {
            left: 10%;
            width: 90%;
      }
      
      .rw-95 {
            left: 5%;
            width: 95%;
      }
      
      .rw-100 {
            left: 0;
            width: 100%;
      }
      
      .lw-0 {
            right: 100%;
            width: 0;
      }
      
      .lw-5 {
            right: 95%;
            width: 5%;
      }
      
      .lw-10 {
            right: 90%;
            width: 10%;
      }
      
      .lw-15 {
            right: 85%;
            width: 15%;
      }
      
      .lw-20 {
            right: 80%;
            width: 20%;
      }
      
      .lw-25 {
            right: 75%;
            width: 25%;
      }
      
      .lw-30 {
            right: 70%;
            width: 30%;
      }
      
      .lw-35 {
            right: 65%;
            width: 35%;
      }
      
      .lw-40 {
            right: 60%;
            width: 40%;
      }
      
      .lw-45 {
            right: 55%;
            width: 45%;
      }
      
      .lw-50 {
            right: 50%;
            width: 50%;
      }
      
      .lw-55 {
            right: 45%;
            width: 55%;
      }
      
      .lw-60 {
            right: 40%;
            width: 60%;
      }
      
      .lw-65 {
            right: 35%;
            width: 65%;
      }
      
      .lw-70 {
            right: 30%;
            width: 70%;
      }
      
      .lw-75 {
            right: 25%;
            width: 75%;
      }
      
      .lw-80 {
            right: 20%;
            width: 80%;
      }
      
      .lw-85 {
            right: 15%;
            width: 85%;
      }
      
      .lw-90 {
            right: 10%;
            width: 90%;
      }
      
      .lw-95 {
            right: 5%;
            width: 95%;
      }
      
      .lw-100 {
            right: 0;
            width: 100%;
      }
      /** j.浮动 float-(sm-/md-/lg-/xl-)
*  left/right/none
*/
      
      .clear {
            clear: both;
      }
      
      .clear:after {
            content: '';
            display: block;
            clear: both;
      }
      
      .float-left {
            float: left !important;
      }
      
      .float-right {
            float: right !important;
      }
      
      .float-none {
            float: none !important;
      }
      
      @media (min-width: 576px) {
            .float-sm-left {
               float: left !important;
            }
            .float-sm-right {
               float: right !important;
            }
            .float-sm-none {
               float: none !important;
            }
      }
      
      @media (min-width: 768px) {
            .float-md-left {
               float: left !important;
            }
            .float-md-right {
               float: right !important;
            }
            .float-md-none {
               float: none !important;
            }
      }
      
      @media (min-width: 992px) {
            .float-lg-left {
               float: left !important;
            }
            .float-lg-right {
               float: right !important;
            }
            .float-lg-none {
               float: none !important;
            }
      }
      
      @media (min-width: 1200px) {
            .float-xl-left {
               float: left !important;
            }
            .float-xl-right {
               float: right !important;
            }
            .float-xl-none {
               float: none !important;
            }
      }
      /** k.栅格 
*  .row
*  .col-(sm-/md-/lg-/xl)-1/2/3...12/auto
*  .order-(sm-/md-/lg-/xl)-1/2/3...12/first/last
*  .offset-(sm-/md-/lg-/xl)-1/2/3...11
*/
      
      .row {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            padding: 0;
            margin: 0;
            /*margin-right: -7.5px;
         margin-left: -7.5px;*/
      }
      
      .no-gutters {
            margin-right: 0;
            margin-left: 0;
      }
      
      .no-gutters>.col,
      .no-gutters>[class*="col-"] {
            padding-right: 0;
            padding-left: 0;
      }
      
      .col-1,
      .col-2,
      .col-3,
      .col-4,
      .col-5,
      .col-6,
      .col-7,
      .col-8,
      .col-9,
      .col-10,
      .col-11,
      .col-12,
      .col,
      .col-auto,
      .col-sm-1,
      .col-sm-2,
      .col-sm-3,
      .col-sm-4,
      .col-sm-5,
      .col-sm-6,
      .col-sm-7,
      .col-sm-8,
      .col-sm-9,
      .col-sm-10,
      .col-sm-11,
      .col-sm-12,
      .col-sm,
      .col-sm-auto,
      .col-md-1,
      .col-md-2,
      .col-md-3,
      .col-md-4,
      .col-md-5,
      .col-md-6,
      .col-md-7,
      .col-md-8,
      .col-md-9,
      .col-md-10,
      .col-md-11,
      .col-md-12,
      .col-md,
      .col-md-auto,
      .col-lg-1,
      .col-lg-2,
      .col-lg-3,
      .col-lg-4,
      .col-lg-5,
      .col-lg-6,
      .col-lg-7,
      .col-lg-8,
      .col-lg-9,
      .col-lg-10,
      .col-lg-11,
      .col-lg-12,
      .col-lg,
      .col-lg-auto,
      .col-xl-1,
      .col-xl-2,
      .col-xl-3,
      .col-xl-4,
      .col-xl-5,
      .col-xl-6,
      .col-xl-7,
      .col-xl-8,
      .col-xl-9,
      .col-xl-10,
      .col-xl-11,
      .col-xl-12,
      .col-xl,
      .col-xl-auto {
            position: relative;
            width: 100%;
            padding: 0;
            margin: 0;
            /*padding-right: 7.5px;
         padding-left: 7.5px;*/
      }
      
      .col {
            -ms-flex-preferred-size: 0;
            flex-basis: 0;
            -ms-flex-positive: 1;
            flex-grow: 1;
            max-width: 100%;
      }
      
      .col-auto {
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            width: auto;
            max-width: 100%;
      }
      
      .col-1 {
            -ms-flex: 0 0 8.333333%;
            flex: 0 0 8.333333%;
            max-width: 8.333333%;
      }
      
      .col-2 {
            -ms-flex: 0 0 16.666667%;
            flex: 0 0 16.666667%;
            max-width: 16.666667%;
      }
      
      .col-3 {
            -ms-flex: 0 0 25%;
            flex: 0 0 25%;
            max-width: 25%;
      }
      
      .col-4 {
            -ms-flex: 0 0 33.333333%;
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
      }
      
      .col-5 {
            -ms-flex: 0 0 41.666667%;
            flex: 0 0 41.666667%;
            max-width: 41.666667%;
      }
      
      .col-6 {
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            max-width: 50%;
      }
      
      .col-7 {
            -ms-flex: 0 0 58.333333%;
            flex: 0 0 58.333333%;
            max-width: 58.333333%;
      }
      
      .col-8 {
            -ms-flex: 0 0 66.666667%;
            flex: 0 0 66.666667%;
            max-width: 66.666667%;
      }
      
      .col-9 {
            -ms-flex: 0 0 75%;
            flex: 0 0 75%;
            max-width: 75%;
      }
      
      .col-10 {
            -ms-flex: 0 0 83.333333%;
            flex: 0 0 83.333333%;
            max-width: 83.333333%;
      }
      
      .col-11 {
            -ms-flex: 0 0 91.666667%;
            flex: 0 0 91.666667%;
            max-width: 91.666667%;
      }
      
      .col-12 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
      }
      
      .order-first {
            -ms-flex-order: -1;
            order: -1;
      }
      
      .order-last {
            -ms-flex-order: 13;
            order: 13;
      }
      
      .order-0 {
            -ms-flex-order: 0;
            order: 0;
      }
      
      .order-1 {
            -ms-flex-order: 1;
            order: 1;
      }
      
      .order-2 {
            -ms-flex-order: 2;
            order: 2;
      }
      
      .order-3 {
            -ms-flex-order: 3;
            order: 3;
      }
      
      .order-4 {
            -ms-flex-order: 4;
            order: 4;
      }
      
      .order-5 {
            -ms-flex-order: 5;
            order: 5;
      }
      
      .order-6 {
            -ms-flex-order: 6;
            order: 6;
      }
      
      .order-7 {
            -ms-flex-order: 7;
            order: 7;
      }
      
      .order-8 {
            -ms-flex-order: 8;
            order: 8;
      }
      
      .order-9 {
            -ms-flex-order: 9;
            order: 9;
      }
      
      .order-10 {
            -ms-flex-order: 10;
            order: 10;
      }
      
      .order-11 {
            -ms-flex-order: 11;
            order: 11;
      }
      
      .order-12 {
            -ms-flex-order: 12;
            order: 12;
      }
      
      .offset-1 {
            margin-left: 8.333333%;
      }
      
      .offset-2 {
            margin-left: 16.666667%;
      }
      
      .offset-3 {
            margin-left: 25%;
      }
      
      .offset-4 {
            margin-left: 33.333333%;
      }
      
      .offset-5 {
            margin-left: 41.666667%;
      }
      
      .offset-6 {
            margin-left: 50%;
      }
      
      .offset-7 {
            margin-left: 58.333333%;
      }
      
      .offset-8 {
            margin-left: 66.666667%;
      }
      
      .offset-9 {
            margin-left: 75%;
      }
      
      .offset-10 {
            margin-left: 83.333333%;
      }
      
      .offset-11 {
            margin-left: 91.666667%;
      }
      
      @media (min-width: 576px) {
            .col-sm {
               -ms-flex-preferred-size: 0;
               flex-basis: 0;
               -ms-flex-positive: 1;
               flex-grow: 1;
               max-width: 100%;
            }
            .col-sm-auto {
               -ms-flex: 0 0 auto;
               flex: 0 0 auto;
               width: auto;
               max-width: 100%;
            }
            .col-sm-1 {
               -ms-flex: 0 0 8.333333%;
               flex: 0 0 8.333333%;
               max-width: 8.333333%;
            }
            .col-sm-2 {
               -ms-flex: 0 0 16.666667%;
               flex: 0 0 16.666667%;
               max-width: 16.666667%;
            }
            .col-sm-3 {
               -ms-flex: 0 0 25%;
               flex: 0 0 25%;
               max-width: 25%;
            }
            .col-sm-4 {
               -ms-flex: 0 0 33.333333%;
               flex: 0 0 33.333333%;
               max-width: 33.333333%;
            }
            .col-sm-5 {
               -ms-flex: 0 0 41.666667%;
               flex: 0 0 41.666667%;
               max-width: 41.666667%;
            }
            .col-sm-6 {
               -ms-flex: 0 0 50%;
               flex: 0 0 50%;
               max-width: 50%;
            }
            .col-sm-7 {
               -ms-flex: 0 0 58.333333%;
               flex: 0 0 58.333333%;
               max-width: 58.333333%;
            }
            .col-sm-8 {
               -ms-flex: 0 0 66.666667%;
               flex: 0 0 66.666667%;
               max-width: 66.666667%;
            }
            .col-sm-9 {
               -ms-flex: 0 0 75%;
               flex: 0 0 75%;
               max-width: 75%;
            }
            .col-sm-10 {
               -ms-flex: 0 0 83.333333%;
               flex: 0 0 83.333333%;
               max-width: 83.333333%;
            }
            .col-sm-11 {
               -ms-flex: 0 0 91.666667%;
               flex: 0 0 91.666667%;
               max-width: 91.666667%;
            }
            .col-sm-12 {
               -ms-flex: 0 0 100%;
               flex: 0 0 100%;
               max-width: 100%;
            }
            .order-sm-first {
               -ms-flex-order: -1;
               order: -1;
            }
            .order-sm-last {
               -ms-flex-order: 13;
               order: 13;
            }
            .order-sm-0 {
               -ms-flex-order: 0;
               order: 0;
            }
            .order-sm-1 {
               -ms-flex-order: 1;
               order: 1;
            }
            .order-sm-2 {
               -ms-flex-order: 2;
               order: 2;
            }
            .order-sm-3 {
               -ms-flex-order: 3;
               order: 3;
            }
            .order-sm-4 {
               -ms-flex-order: 4;
               order: 4;
            }
            .order-sm-5 {
               -ms-flex-order: 5;
               order: 5;
            }
            .order-sm-6 {
               -ms-flex-order: 6;
               order: 6;
            }
            .order-sm-7 {
               -ms-flex-order: 7;
               order: 7;
            }
            .order-sm-8 {
               -ms-flex-order: 8;
               order: 8;
            }
            .order-sm-9 {
               -ms-flex-order: 9;
               order: 9;
            }
            .order-sm-10 {
               -ms-flex-order: 10;
               order: 10;
            }
            .order-sm-11 {
               -ms-flex-order: 11;
               order: 11;
            }
            .order-sm-12 {
               -ms-flex-order: 12;
               order: 12;
            }
            .offset-sm-0 {
               margin-left: 0;
            }
            .offset-sm-1 {
               margin-left: 8.333333%;
            }
            .offset-sm-2 {
               margin-left: 16.666667%;
            }
            .offset-sm-3 {
               margin-left: 25%;
            }
            .offset-sm-4 {
               margin-left: 33.333333%;
            }
            .offset-sm-5 {
               margin-left: 41.666667%;
            }
            .offset-sm-6 {
               margin-left: 50%;
            }
            .offset-sm-7 {
               margin-left: 58.333333%;
            }
            .offset-sm-8 {
               margin-left: 66.666667%;
            }
            .offset-sm-9 {
               margin-left: 75%;
            }
            .offset-sm-10 {
               margin-left: 83.333333%;
            }
            .offset-sm-11 {
               margin-left: 91.666667%;
            }
      }
      
      @media (min-width: 768px) {
            .col-md {
               -ms-flex-preferred-size: 0;
               flex-basis: 0;
               -ms-flex-positive: 1;
               flex-grow: 1;
               max-width: 100%;
            }
            .col-md-auto {
               -ms-flex: 0 0 auto;
               flex: 0 0 auto;
               width: auto;
               max-width: 100%;
            }
            .col-md-1 {
               -ms-flex: 0 0 8.333333%;
               flex: 0 0 8.333333%;
               max-width: 8.333333%;
            }
            .col-md-2 {
               -ms-flex: 0 0 16.666667%;
               flex: 0 0 16.666667%;
               max-width: 16.666667%;
            }
            .col-md-3 {
               -ms-flex: 0 0 25%;
               flex: 0 0 25%;
               max-width: 25%;
            }
            .col-md-4 {
               -ms-flex: 0 0 33.333333%;
               flex: 0 0 33.333333%;
               max-width: 33.333333%;
            }
            .col-md-5 {
               -ms-flex: 0 0 41.666667%;
               flex: 0 0 41.666667%;
               max-width: 41.666667%;
            }
            .col-md-6 {
               -ms-flex: 0 0 50%;
               flex: 0 0 50%;
               max-width: 50%;
            }
            .col-md-7 {
               -ms-flex: 0 0 58.333333%;
               flex: 0 0 58.333333%;
               max-width: 58.333333%;
            }
            .col-md-8 {
               -ms-flex: 0 0 66.666667%;
               flex: 0 0 66.666667%;
               max-width: 66.666667%;
            }
            .col-md-9 {
               -ms-flex: 0 0 75%;
               flex: 0 0 75%;
               max-width: 75%;
            }
            .col-md-10 {
               -ms-flex: 0 0 83.333333%;
               flex: 0 0 83.333333%;
               max-width: 83.333333%;
            }
            .col-md-11 {
               -ms-flex: 0 0 91.666667%;
               flex: 0 0 91.666667%;
               max-width: 91.666667%;
            }
            .col-md-12 {
               -ms-flex: 0 0 100%;
               flex: 0 0 100%;
               max-width: 100%;
            }
            .order-md-first {
               -ms-flex-order: -1;
               order: -1;
            }
            .order-md-last {
               -ms-flex-order: 13;
               order: 13;
            }
            .order-md-0 {
               -ms-flex-order: 0;
               order: 0;
            }
            .order-md-1 {
               -ms-flex-order: 1;
               order: 1;
            }
            .order-md-2 {
               -ms-flex-order: 2;
               order: 2;
            }
            .order-md-3 {
               -ms-flex-order: 3;
               order: 3;
            }
            .order-md-4 {
               -ms-flex-order: 4;
               order: 4;
            }
            .order-md-5 {
               -ms-flex-order: 5;
               order: 5;
            }
            .order-md-6 {
               -ms-flex-order: 6;
               order: 6;
            }
            .order-md-7 {
               -ms-flex-order: 7;
               order: 7;
            }
            .order-md-8 {
               -ms-flex-order: 8;
               order: 8;
            }
            .order-md-9 {
               -ms-flex-order: 9;
               order: 9;
            }
            .order-md-10 {
               -ms-flex-order: 10;
               order: 10;
            }
            .order-md-11 {
               -ms-flex-order: 11;
               order: 11;
            }
            .order-md-12 {
               -ms-flex-order: 12;
               order: 12;
            }
            .offset-md-0 {
               margin-left: 0;
            }
            .offset-md-1 {
               margin-left: 8.333333%;
            }
            .offset-md-2 {
               margin-left: 16.666667%;
            }
            .offset-md-3 {
               margin-left: 25%;
            }
            .offset-md-4 {
               margin-left: 33.333333%;
            }
            .offset-md-5 {
               margin-left: 41.666667%;
            }
            .offset-md-6 {
               margin-left: 50%;
            }
            .offset-md-7 {
               margin-left: 58.333333%;
            }
            .offset-md-8 {
               margin-left: 66.666667%;
            }
            .offset-md-9 {
               margin-left: 75%;
            }
            .offset-md-10 {
               margin-left: 83.333333%;
            }
            .offset-md-11 {
               margin-left: 91.666667%;
            }
      }
      
      @media (min-width: 992px) {
            .col-lg {
               -ms-flex-preferred-size: 0;
               flex-basis: 0;
               -ms-flex-positive: 1;
               flex-grow: 1;
               max-width: 100%;
            }
            .col-lg-auto {
               -ms-flex: 0 0 auto;
               flex: 0 0 auto;
               width: auto;
               max-width: 100%;
            }
            .col-lg-1 {
               -ms-flex: 0 0 8.333333%;
               flex: 0 0 8.333333%;
               max-width: 8.333333%;
            }
            .col-lg-2 {
               -ms-flex: 0 0 16.666667%;
               flex: 0 0 16.666667%;
               max-width: 16.666667%;
            }
            .col-lg-3 {
               -ms-flex: 0 0 25%;
               flex: 0 0 25%;
               max-width: 25%;
            }
            .col-lg-4 {
               -ms-flex: 0 0 33.333333%;
               flex: 0 0 33.333333%;
               max-width: 33.333333%;
            }
            .col-lg-5 {
               -ms-flex: 0 0 41.666667%;
               flex: 0 0 41.666667%;
               max-width: 41.666667%;
            }
            .col-lg-6 {
               -ms-flex: 0 0 50%;
               flex: 0 0 50%;
               max-width: 50%;
            }
            .col-lg-7 {
               -ms-flex: 0 0 58.333333%;
               flex: 0 0 58.333333%;
               max-width: 58.333333%;
            }
            .col-lg-8 {
               -ms-flex: 0 0 66.666667%;
               flex: 0 0 66.666667%;
               max-width: 66.666667%;
            }
            .col-lg-9 {
               -ms-flex: 0 0 75%;
               flex: 0 0 75%;
               max-width: 75%;
            }
            .col-lg-10 {
               -ms-flex: 0 0 83.333333%;
               flex: 0 0 83.333333%;
               max-width: 83.333333%;
            }
            .col-lg-11 {
               -ms-flex: 0 0 91.666667%;
               flex: 0 0 91.666667%;
               max-width: 91.666667%;
            }
            .col-lg-12 {
               -ms-flex: 0 0 100%;
               flex: 0 0 100%;
               max-width: 100%;
            }
            .order-lg-first {
               -ms-flex-order: -1;
               order: -1;
            }
            .order-lg-last {
               -ms-flex-order: 13;
               order: 13;
            }
            .order-lg-0 {
               -ms-flex-order: 0;
               order: 0;
            }
            .order-lg-1 {
               -ms-flex-order: 1;
               order: 1;
            }
            .order-lg-2 {
               -ms-flex-order: 2;
               order: 2;
            }
            .order-lg-3 {
               -ms-flex-order: 3;
               order: 3;
            }
            .order-lg-4 {
               -ms-flex-order: 4;
               order: 4;
            }
            .order-lg-5 {
               -ms-flex-order: 5;
               order: 5;
            }
            .order-lg-6 {
               -ms-flex-order: 6;
               order: 6;
            }
            .order-lg-7 {
               -ms-flex-order: 7;
               order: 7;
            }
            .order-lg-8 {
               -ms-flex-order: 8;
               order: 8;
            }
            .order-lg-9 {
               -ms-flex-order: 9;
               order: 9;
            }
            .order-lg-10 {
               -ms-flex-order: 10;
               order: 10;
            }
            .order-lg-11 {
               -ms-flex-order: 11;
               order: 11;
            }
            .order-lg-12 {
               -ms-flex-order: 12;
               order: 12;
            }
            .offset-lg-0 {
               margin-left: 0;
            }
            .offset-lg-1 {
               margin-left: 8.333333%;
            }
            .offset-lg-2 {
               margin-left: 16.666667%;
            }
            .offset-lg-3 {
               margin-left: 25%;
            }
            .offset-lg-4 {
               margin-left: 33.333333%;
            }
            .offset-lg-5 {
               margin-left: 41.666667%;
            }
            .offset-lg-6 {
               margin-left: 50%;
            }
            .offset-lg-7 {
               margin-left: 58.333333%;
            }
            .offset-lg-8 {
               margin-left: 66.666667%;
            }
            .offset-lg-9 {
               margin-left: 75%;
            }
            .offset-lg-10 {
               margin-left: 83.333333%;
            }
            .offset-lg-11 {
               margin-left: 91.666667%;
            }
      }
      
      @media (min-width: 1200px) {
            .col-xl {
               -ms-flex-preferred-size: 0;
               flex-basis: 0;
               -ms-flex-positive: 1;
               flex-grow: 1;
               max-width: 100%;
            }
            .col-xl-auto {
               -ms-flex: 0 0 auto;
               flex: 0 0 auto;
               width: auto;
               max-width: 100%;
            }
            .col-xl-1 {
               -ms-flex: 0 0 8.333333%;
               flex: 0 0 8.333333%;
               max-width: 8.333333%;
            }
            .col-xl-2 {
               -ms-flex: 0 0 16.666667%;
               flex: 0 0 16.666667%;
               max-width: 16.666667%;
            }
            .col-xl-3 {
               -ms-flex: 0 0 25%;
               flex: 0 0 25%;
               max-width: 25%;
            }
            .col-xl-4 {
               -ms-flex: 0 0 33.333333%;
               flex: 0 0 33.333333%;
               max-width: 33.333333%;
            }
            .col-xl-5 {
               -ms-flex: 0 0 41.666667%;
               flex: 0 0 41.666667%;
               max-width: 41.666667%;
            }
            .col-xl-6 {
               -ms-flex: 0 0 50%;
               flex: 0 0 50%;
               max-width: 50%;
            }
            .col-xl-7 {
               -ms-flex: 0 0 58.333333%;
               flex: 0 0 58.333333%;
               max-width: 58.333333%;
            }
            .col-xl-8 {
               -ms-flex: 0 0 66.666667%;
               flex: 0 0 66.666667%;
               max-width: 66.666667%;
            }
            .col-xl-9 {
               -ms-flex: 0 0 75%;
               flex: 0 0 75%;
               max-width: 75%;
            }
            .col-xl-10 {
               -ms-flex: 0 0 83.333333%;
               flex: 0 0 83.333333%;
               max-width: 83.333333%;
            }
            .col-xl-11 {
               -ms-flex: 0 0 91.666667%;
               flex: 0 0 91.666667%;
               max-width: 91.666667%;
            }
            .col-xl-12 {
               -ms-flex: 0 0 100%;
               flex: 0 0 100%;
               max-width: 100%;
            }
            .order-xl-first {
               -ms-flex-order: -1;
               order: -1;
            }
            .order-xl-last {
               -ms-flex-order: 13;
               order: 13;
            }
            .order-xl-0 {
               -ms-flex-order: 0;
               order: 0;
            }
            .order-xl-1 {
               -ms-flex-order: 1;
               order: 1;
            }
            .order-xl-2 {
               -ms-flex-order: 2;
               order: 2;
            }
            .order-xl-3 {
               -ms-flex-order: 3;
               order: 3;
            }
            .order-xl-4 {
               -ms-flex-order: 4;
               order: 4;
            }
            .order-xl-5 {
               -ms-flex-order: 5;
               order: 5;
            }
            .order-xl-6 {
               -ms-flex-order: 6;
               order: 6;
            }
            .order-xl-7 {
               -ms-flex-order: 7;
               order: 7;
            }
            .order-xl-8 {
               -ms-flex-order: 8;
               order: 8;
            }
            .order-xl-9 {
               -ms-flex-order: 9;
               order: 9;
            }
            .order-xl-10 {
               -ms-flex-order: 10;
               order: 10;
            }
            .order-xl-11 {
               -ms-flex-order: 11;
               order: 11;
            }
            .order-xl-12 {
               -ms-flex-order: 12;
               order: 12;
            }
            .offset-xl-0 {
               margin-left: 0;
            }
            .offset-xl-1 {
               margin-left: 8.333333%;
            }
            .offset-xl-2 {
               margin-left: 16.666667%;
            }
            .offset-xl-3 {
               margin-left: 25%;
            }
            .offset-xl-4 {
               margin-left: 33.333333%;
            }
            .offset-xl-5 {
               margin-left: 41.666667%;
            }
            .offset-xl-6 {
               margin-left: 50%;
            }
            .offset-xl-7 {
               margin-left: 58.333333%;
            }
            .offset-xl-8 {
               margin-left: 66.666667%;
            }
            .offset-xl-9 {
               margin-left: 75%;
            }
            .offset-xl-10 {
               margin-left: 83.333333%;
            }
            .offset-xl-11 {
               margin-left: 91.666667%;
            }
      }
      /** l.弹性布局 flex-
* .flex- row 水平左起/column 水平右起/row-reverse 垂直上起/column-reverse垂直下起(flex-direction 主轴方向)
* .flex- wrap/nowrap/wrap-reverse 换行且第一行在下方(flex-wrap 换行方式)
* .justify-content- start/end/center/between 两端对齐/around 两侧间隔相等(主轴main对齐方式)
* .align-items- start/end/center/baseline/stretch 未设高度时占满容器(交叉轴cross对齐方式)
* .align-content- start/end/center/between/around/stretch (多根轴线的对齐方式)
* .flex-grow- 0/1 (项目放大比例)
* .flex-shrink- 0/1 (项目缩小比例)
* .align-self- auto/start/end/center/baseline/stretch (单个项目对齐方式 默认auto继承父元素)
*/
      
      .flex-fill {
            -ms-flex: 1 1 auto !important;
            /*grow shrink basis*/
            flex: 1 1 auto !important;
      }
      
      .align-center {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            text-align: center;
      }
      /** flex-direction 主轴方向
   *  flex-row 水平坐起/column 水平右起/row-reverse 垂直上起/column-reverse垂直下起
   */
      
      .flex-row {
            -ms-flex-direction: row !important;
            flex-direction: row !important;
      }
      
      .flex-column {
            -ms-flex-direction: column !important;
            flex-direction: column !important;
      }
      
      .flex-row-reverse {
            -ms-flex-direction: row-reverse !important;
            flex-direction: row-reverse !important;
      }
      
      .flex-column-reverse {
            -ms-flex-direction: column-reverse !important;
            flex-direction: column-reverse !important;
      }
      /** flex-wrap 换行方式
   * .flex-wrap/nowrap/wrap-reverse 换行且第一行在下方
   */
      
      .flex-wrap {
            -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
      }
      
      .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
      }
      
      .flex-wrap-reverse {
            -ms-flex-wrap: wrap-reverse !important;
            flex-wrap: wrap-reverse !important;
      }
      /** justify-content 主轴main对齐方式
   * .justify-content-start/end/center/between 两端对齐/around 两侧间隔相等
   */
      
      .justify-content-start,
      .align-x-start,
      .align-x-left {
            -ms-flex-pack: start !important;
            justify-content: flex-start !important;
      }
      
      .justify-content-end,
      .align-x-end,
      .align-x-right {
            -ms-flex-pack: end !important;
            justify-content: flex-end !important;
      }
      
      .justify-content-center,
      .align-x-center {
            -ms-flex-pack: center !important;
            justify-content: center !important;
      }
      
      .justify-content-between,
      .align-x-between {
            -ms-flex-pack: justify !important;
            justify-content: space-between !important;
      }
      
      .justify-content-around,
      .align-x-around {
            -ms-flex-pack: distribute !important;
            justify-content: space-around !important;
      }
      /** align-items 交叉轴cross对齐方式
   * .align-items-start/end/center/baseline/stretch 未设高度时占满容器
   */
      
      .align-items-start,
      .align-y-start,
      .align-y-top {
            -ms-flex-align: start !important;
            align-items: flex-start !important;
      }
      
      .align-items-end,
      .align-y-end,
      .align-y-bottom {
            -ms-flex-align: end !important;
            align-items: flex-end !important;
      }
      
      .align-items-center,
      .align-y-center {
            -ms-flex-align: center !important;
            align-items: center !important;
      }
      
      .align-items-baseline,
      .align-y-baseline {
            -ms-flex-align: baseline !important;
            align-items: baseline !important;
      }
      
      .align-items-stretch,
      .align-y-stretch {
            -ms-flex-align: stretch !important;
            align-items: stretch !important;
      }
      
      .align-x-left,
      .align-x-start,
      .align-x-right,
      .align-x-end,
      .align-x-center,
      .align-x-between,
      .align-x-around,
      .align-y-top,
      .align-y-start,
      .align-y-bottom,
      .align-y-end,
      .align-y-center,
      .align-y-baseline,
      .align-y-stretch {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
      }
      /** align-content 多根轴线的对齐方式
   * .align-content-start/end/center/between/around/stretch
   */
      
      .align-content-start {
            -ms-flex-line-pack: start !important;
            align-content: flex-start !important;
      }
      
      .align-content-end {
            -ms-flex-line-pack: end !important;
            align-content: flex-end !important;
      }
      
      .align-content-center {
            -ms-flex-line-pack: center !important;
            align-content: center !important;
      }
      
      .align-content-between {
            -ms-flex-line-pack: justify !important;
            align-content: space-between !important;
      }
      
      .align-content-around {
            -ms-flex-line-pack: distribute !important;
            align-content: space-around !important;
      }
      
      .align-content-stretch {
            -ms-flex-line-pack: stretch !important;
            align-content: stretch !important;
      }
      /** flex-grow 项目放大比例
   * .flex-grow-0/1
   */
      
      .flex-grow-0 {
            -ms-flex-positive: 0 !important;
            flex-grow: 0 !important;
      }
      
      .flex-grow-1 {
            -ms-flex-positive: 1 !important;
            flex-grow: 1 !important;
      }
      /** flex-shrink 项目缩小比例
   * .flex-shrink-0/1
   */
      
      .flex-shrink-0 {
            -ms-flex-negative: 0 !important;
            flex-shrink: 0 !important;
      }
      
      .flex-shrink-1 {
            -ms-flex-negative: 1 !important;
            flex-shrink: 1 !important;
      }
      /** align-self 单个项目对齐方式 默认auto继承父元素
   * .align-self-auto/start/end/center/baseline/stretch
   */
      
      .align-self-auto {
            -ms-flex-item-align: auto !important;
            align-self: auto !important;
      }
      
      .align-self-start {
            -ms-flex-item-align: start !important;
            align-self: flex-start !important;
      }
      
      .align-self-end {
            -ms-flex-item-align: end !important;
            align-self: flex-end !important;
      }
      
      .align-self-center {
            -ms-flex-item-align: center !important;
            align-self: center !important;
      }
      
      .align-self-baseline {
            -ms-flex-item-align: baseline !important;
            align-self: baseline !important;
      }
      
      .align-self-stretch {
            -ms-flex-item-align: stretch !important;
            align-self: stretch !important;
      }
      
      @media (min-width: 576px) {
            .flex-sm-row {
               -ms-flex-direction: row !important;
               flex-direction: row !important;
            }
            .flex-sm-column {
               -ms-flex-direction: column !important;
               flex-direction: column !important;
            }
            .flex-sm-row-reverse {
               -ms-flex-direction: row-reverse !important;
               flex-direction: row-reverse !important;
            }
            .flex-sm-column-reverse {
               -ms-flex-direction: column-reverse !important;
               flex-direction: column-reverse !important;
            }
            .flex-sm-wrap {
               -ms-flex-wrap: wrap !important;
               flex-wrap: wrap !important;
            }
            .flex-sm-nowrap {
               -ms-flex-wrap: nowrap !important;
               flex-wrap: nowrap !important;
            }
            .flex-sm-wrap-reverse {
               -ms-flex-wrap: wrap-reverse !important;
               flex-wrap: wrap-reverse !important;
            }
            .flex-sm-fill {
               -ms-flex: 1 1 auto !important;
               flex: 1 1 auto !important;
            }
            .flex-sm-grow-0 {
               -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
            }
            .flex-sm-grow-1 {
               -ms-flex-positive: 1 !important;
               flex-grow: 1 !important;
            }
            .flex-sm-shrink-0 {
               -ms-flex-negative: 0 !important;
               flex-shrink: 0 !important;
            }
            .flex-sm-shrink-1 {
               -ms-flex-negative: 1 !important;
               flex-shrink: 1 !important;
            }
            .justify-content-sm-start {
               -ms-flex-pack: start !important;
               justify-content: flex-start !important;
            }
            .justify-content-sm-end {
               -ms-flex-pack: end !important;
               justify-content: flex-end !important;
            }
            .justify-content-sm-center {
               -ms-flex-pack: center !important;
               justify-content: center !important;
            }
            .justify-content-sm-between {
               -ms-flex-pack: justify !important;
               justify-content: space-between !important;
            }
            .justify-content-sm-around {
               -ms-flex-pack: distribute !important;
               justify-content: space-around !important;
            }
            .align-items-sm-start {
               -ms-flex-align: start !important;
               align-items: flex-start !important;
            }
            .align-items-sm-end {
               -ms-flex-align: end !important;
               align-items: flex-end !important;
            }
            .align-items-sm-center {
               -ms-flex-align: center !important;
               align-items: center !important;
            }
            .align-items-sm-baseline {
               -ms-flex-align: baseline !important;
               align-items: baseline !important;
            }
            .align-items-sm-stretch {
               -ms-flex-align: stretch !important;
               align-items: stretch !important;
            }
            .align-content-sm-start {
               -ms-flex-line-pack: start !important;
               align-content: flex-start !important;
            }
            .align-content-sm-end {
               -ms-flex-line-pack: end !important;
               align-content: flex-end !important;
            }
            .align-content-sm-center {
               -ms-flex-line-pack: center !important;
               align-content: center !important;
            }
            .align-content-sm-between {
               -ms-flex-line-pack: justify !important;
               align-content: space-between !important;
            }
            .align-content-sm-around {
               -ms-flex-line-pack: distribute !important;
               align-content: space-around !important;
            }
            .align-content-sm-stretch {
               -ms-flex-line-pack: stretch !important;
               align-content: stretch !important;
            }
            .align-self-sm-auto {
               -ms-flex-item-align: auto !important;
               align-self: auto !important;
            }
            .align-self-sm-start {
               -ms-flex-item-align: start !important;
               align-self: flex-start !important;
            }
            .align-self-sm-end {
               -ms-flex-item-align: end !important;
               align-self: flex-end !important;
            }
            .align-self-sm-center {
               -ms-flex-item-align: center !important;
               align-self: center !important;
            }
            .align-self-sm-baseline {
               -ms-flex-item-align: baseline !important;
               align-self: baseline !important;
            }
            .align-self-sm-stretch {
               -ms-flex-item-align: stretch !important;
               align-self: stretch !important;
            }
      }
      
      @media (min-width: 768px) {
            .flex-md-row {
               -ms-flex-direction: row !important;
               flex-direction: row !important;
            }
            .flex-md-column {
               -ms-flex-direction: column !important;
               flex-direction: column !important;
            }
            .flex-md-row-reverse {
               -ms-flex-direction: row-reverse !important;
               flex-direction: row-reverse !important;
            }
            .flex-md-column-reverse {
               -ms-flex-direction: column-reverse !important;
               flex-direction: column-reverse !important;
            }
            .flex-md-wrap {
               -ms-flex-wrap: wrap !important;
               flex-wrap: wrap !important;
            }
            .flex-md-nowrap {
               -ms-flex-wrap: nowrap !important;
               flex-wrap: nowrap !important;
            }
            .flex-md-wrap-reverse {
               -ms-flex-wrap: wrap-reverse !important;
               flex-wrap: wrap-reverse !important;
            }
            .flex-md-fill {
               -ms-flex: 1 1 auto !important;
               flex: 1 1 auto !important;
            }
            .flex-md-grow-0 {
               -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
            }
            .flex-md-grow-1 {
               -ms-flex-positive: 1 !important;
               flex-grow: 1 !important;
            }
            .flex-md-shrink-0 {
               -ms-flex-negative: 0 !important;
               flex-shrink: 0 !important;
            }
            .flex-md-shrink-1 {
               -ms-flex-negative: 1 !important;
               flex-shrink: 1 !important;
            }
            .justify-content-md-start {
               -ms-flex-pack: start !important;
               justify-content: flex-start !important;
            }
            .justify-content-md-end {
               -ms-flex-pack: end !important;
               justify-content: flex-end !important;
            }
            .justify-content-md-center {
               -ms-flex-pack: center !important;
               justify-content: center !important;
            }
            .justify-content-md-between {
               -ms-flex-pack: justify !important;
               justify-content: space-between !important;
            }
            .justify-content-md-around {
               -ms-flex-pack: distribute !important;
               justify-content: space-around !important;
            }
            .align-items-md-start {
               -ms-flex-align: start !important;
               align-items: flex-start !important;
            }
            .align-items-md-end {
               -ms-flex-align: end !important;
               align-items: flex-end !important;
            }
            .align-items-md-center {
               -ms-flex-align: center !important;
               align-items: center !important;
            }
            .align-items-md-baseline {
               -ms-flex-align: baseline !important;
               align-items: baseline !important;
            }
            .align-items-md-stretch {
               -ms-flex-align: stretch !important;
               align-items: stretch !important;
            }
            .align-content-md-start {
               -ms-flex-line-pack: start !important;
               align-content: flex-start !important;
            }
            .align-content-md-end {
               -ms-flex-line-pack: end !important;
               align-content: flex-end !important;
            }
            .align-content-md-center {
               -ms-flex-line-pack: center !important;
               align-content: center !important;
            }
            .align-content-md-between {
               -ms-flex-line-pack: justify !important;
               align-content: space-between !important;
            }
            .align-content-md-around {
               -ms-flex-line-pack: distribute !important;
               align-content: space-around !important;
            }
            .align-content-md-stretch {
               -ms-flex-line-pack: stretch !important;
               align-content: stretch !important;
            }
            .align-self-md-auto {
               -ms-flex-item-align: auto !important;
               align-self: auto !important;
            }
            .align-self-md-start {
               -ms-flex-item-align: start !important;
               align-self: flex-start !important;
            }
            .align-self-md-end {
               -ms-flex-item-align: end !important;
               align-self: flex-end !important;
            }
            .align-self-md-center {
               -ms-flex-item-align: center !important;
               align-self: center !important;
            }
            .align-self-md-baseline {
               -ms-flex-item-align: baseline !important;
               align-self: baseline !important;
            }
            .align-self-md-stretch {
               -ms-flex-item-align: stretch !important;
               align-self: stretch !important;
            }
      }
      
      @media (min-width: 992px) {
            .flex-lg-row {
               -ms-flex-direction: row !important;
               flex-direction: row !important;
            }
            .flex-lg-column {
               -ms-flex-direction: column !important;
               flex-direction: column !important;
            }
            .flex-lg-row-reverse {
               -ms-flex-direction: row-reverse !important;
               flex-direction: row-reverse !important;
            }
            .flex-lg-column-reverse {
               -ms-flex-direction: column-reverse !important;
               flex-direction: column-reverse !important;
            }
            .flex-lg-wrap {
               -ms-flex-wrap: wrap !important;
               flex-wrap: wrap !important;
            }
            .flex-lg-nowrap {
               -ms-flex-wrap: nowrap !important;
               flex-wrap: nowrap !important;
            }
            .flex-lg-wrap-reverse {
               -ms-flex-wrap: wrap-reverse !important;
               flex-wrap: wrap-reverse !important;
            }
            .flex-lg-fill {
               -ms-flex: 1 1 auto !important;
               flex: 1 1 auto !important;
            }
            .flex-lg-grow-0 {
               -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
            }
            .flex-lg-grow-1 {
               -ms-flex-positive: 1 !important;
               flex-grow: 1 !important;
            }
            .flex-lg-shrink-0 {
               -ms-flex-negative: 0 !important;
               flex-shrink: 0 !important;
            }
            .flex-lg-shrink-1 {
               -ms-flex-negative: 1 !important;
               flex-shrink: 1 !important;
            }
            .justify-content-lg-start {
               -ms-flex-pack: start !important;
               justify-content: flex-start !important;
            }
            .justify-content-lg-end {
               -ms-flex-pack: end !important;
               justify-content: flex-end !important;
            }
            .justify-content-lg-center {
               -ms-flex-pack: center !important;
               justify-content: center !important;
            }
            .justify-content-lg-between {
               -ms-flex-pack: justify !important;
               justify-content: space-between !important;
            }
            .justify-content-lg-around {
               -ms-flex-pack: distribute !important;
               justify-content: space-around !important;
            }
            .align-items-lg-start {
               -ms-flex-align: start !important;
               align-items: flex-start !important;
            }
            .align-items-lg-end {
               -ms-flex-align: end !important;
               align-items: flex-end !important;
            }
            .align-items-lg-center {
               -ms-flex-align: center !important;
               align-items: center !important;
            }
            .align-items-lg-baseline {
               -ms-flex-align: baseline !important;
               align-items: baseline !important;
            }
            .align-items-lg-stretch {
               -ms-flex-align: stretch !important;
               align-items: stretch !important;
            }
            .align-content-lg-start {
               -ms-flex-line-pack: start !important;
               align-content: flex-start !important;
            }
            .align-content-lg-end {
               -ms-flex-line-pack: end !important;
               align-content: flex-end !important;
            }
            .align-content-lg-center {
               -ms-flex-line-pack: center !important;
               align-content: center !important;
            }
            .align-content-lg-between {
               -ms-flex-line-pack: justify !important;
               align-content: space-between !important;
            }
            .align-content-lg-around {
               -ms-flex-line-pack: distribute !important;
               align-content: space-around !important;
            }
            .align-content-lg-stretch {
               -ms-flex-line-pack: stretch !important;
               align-content: stretch !important;
            }
            .align-self-lg-auto {
               -ms-flex-item-align: auto !important;
               align-self: auto !important;
            }
            .align-self-lg-start {
               -ms-flex-item-align: start !important;
               align-self: flex-start !important;
            }
            .align-self-lg-end {
               -ms-flex-item-align: end !important;
               align-self: flex-end !important;
            }
            .align-self-lg-center {
               -ms-flex-item-align: center !important;
               align-self: center !important;
            }
            .align-self-lg-baseline {
               -ms-flex-item-align: baseline !important;
               align-self: baseline !important;
            }
            .align-self-lg-stretch {
               -ms-flex-item-align: stretch !important;
               align-self: stretch !important;
            }
      }
      
      @media (min-width: 1200px) {
            .flex-xl-row {
               -ms-flex-direction: row !important;
               flex-direction: row !important;
            }
            .flex-xl-column {
               -ms-flex-direction: column !important;
               flex-direction: column !important;
            }
            .flex-xl-row-reverse {
               -ms-flex-direction: row-reverse !important;
               flex-direction: row-reverse !important;
            }
            .flex-xl-column-reverse {
               -ms-flex-direction: column-reverse !important;
               flex-direction: column-reverse !important;
            }
            .flex-xl-wrap {
               -ms-flex-wrap: wrap !important;
               flex-wrap: wrap !important;
            }
            .flex-xl-nowrap {
               -ms-flex-wrap: nowrap !important;
               flex-wrap: nowrap !important;
            }
            .flex-xl-wrap-reverse {
               -ms-flex-wrap: wrap-reverse !important;
               flex-wrap: wrap-reverse !important;
            }
            .flex-xl-fill {
               -ms-flex: 1 1 auto !important;
               flex: 1 1 auto !important;
            }
            .flex-xl-grow-0 {
               -ms-flex-positive: 0 !important;
               flex-grow: 0 !important;
            }
            .flex-xl-grow-1 {
               -ms-flex-positive: 1 !important;
               flex-grow: 1 !important;
            }
            .flex-xl-shrink-0 {
               -ms-flex-negative: 0 !important;
               flex-shrink: 0 !important;
            }
            .flex-xl-shrink-1 {
               -ms-flex-negative: 1 !important;
               flex-shrink: 1 !important;
            }
            .justify-content-xl-start {
               -ms-flex-pack: start !important;
               justify-content: flex-start !important;
            }
            .justify-content-xl-end {
               -ms-flex-pack: end !important;
               justify-content: flex-end !important;
            }
            .justify-content-xl-center {
               -ms-flex-pack: center !important;
               justify-content: center !important;
            }
            .justify-content-xl-between {
               -ms-flex-pack: justify !important;
               justify-content: space-between !important;
            }
            .justify-content-xl-around {
               -ms-flex-pack: distribute !important;
               justify-content: space-around !important;
            }
            .align-items-xl-start {
               -ms-flex-align: start !important;
               align-items: flex-start !important;
            }
            .align-items-xl-end {
               -ms-flex-align: end !important;
               align-items: flex-end !important;
            }
            .align-items-xl-center {
               -ms-flex-align: center !important;
               align-items: center !important;
            }
            .align-items-xl-baseline {
               -ms-flex-align: baseline !important;
               align-items: baseline !important;
            }
            .align-items-xl-stretch {
               -ms-flex-align: stretch !important;
               align-items: stretch !important;
            }
            .align-content-xl-start {
               -ms-flex-line-pack: start !important;
               align-content: flex-start !important;
            }
            .align-content-xl-end {
               -ms-flex-line-pack: end !important;
               align-content: flex-end !important;
            }
            .align-content-xl-center {
               -ms-flex-line-pack: center !important;
               align-content: center !important;
            }
            .align-content-xl-between {
               -ms-flex-line-pack: justify !important;
               align-content: space-between !important;
            }
            .align-content-xl-around {
               -ms-flex-line-pack: distribute !important;
               align-content: space-around !important;
            }
            .align-content-xl-stretch {
               -ms-flex-line-pack: stretch !important;
               align-content: stretch !important;
            }
            .align-self-xl-auto {
               -ms-flex-item-align: auto !important;
               align-self: auto !important;
            }
            .align-self-xl-start {
               -ms-flex-item-align: start !important;
               align-self: flex-start !important;
            }
            .align-self-xl-end {
               -ms-flex-item-align: end !important;
               align-self: flex-end !important;
            }
            .align-self-xl-center {
               -ms-flex-item-align: center !important;
               align-self: center !important;
            }
            .align-self-xl-baseline {
               -ms-flex-item-align: baseline !important;
               align-self: baseline !important;
            }
            .align-self-xl-stretch {
               -ms-flex-item-align: stretch !important;
               align-self: stretch !important;
            }
      }
      /** m.分隔线 .divider .divider-vertical
*  .divider-1px/2px/3px/4px/5px/6px/7px/8px/9px/10px
*/
      /*分隔线*/
      
      .divider,
      .divider.divider-1px {
            background-color: var(--gray-light3);
            position: relative;
            display: block;
            height: 1px;
            width: 100%;
            margin: 24px 0;
      }
      
      .divider-vertical,
      .divider-vertical.divider-1px {
            display: inline-block;
            width: 1px;
            height: 1em;
            margin: 0 8px;
            vertical-align: middle;
            position: relative;
      }
      /*.divider-horizontal {
      display: block;
      height: 1px;
      width: 100%;
      margin: 24px 0;
   }*/
      
      .divider.divider-2px {
            height: 2px;
            width: 100%;
      }
      
      .divider-vertical.divider-2px {
            width: 2px;
            height: 1em;
      }
      
      .divider.divider-3px {
            height: 3px;
            width: 100%;
      }
      
      .divider-vertical.divider-3px {
            width: 3px;
            height: 1em;
      }
      
      .divider.divider-4px {
            height: 4px;
            width: 100%;
      }
      
      .divider-vertical.divider-4px {
            width: 4px;
            height: 1em;
      }
      
      .divider.divider-5px {
            height: 5px;
            width: 100%;
      }
      
      .divider-vertical.divider-5px {
            width: 5px;
            height: 1em;
      }
      
      .divider.divider-6px {
            height: 6px;
            width: 100%;
      }
      
      .divider-vertical.divider-6px {
            width: 6px;
            height: 1em;
      }
      
      .divider.divider-7px {
            height: 7px;
            width: 100%;
      }
      
      .divider-vertical.divider-7px {
            width: 7px;
            height: 1em;
      }
      
      .divider.divider-8px {
            height: 8px;
            width: 100%;
      }
      
      .divider-vertical.divider-8px {
            width: 8px;
            height: 1em;
      }
      
      .divider.divider-9px {
            height: 9px;
            width: 100%;
      }
      
      .divider-vertical.divider-9px {
            width: 9px;
            height: 1em;
      }
      
      .divider.divider-10px {
            height: 10px;
            width: 100%;
      }
      
      .divider-vertical.divider-10px {
            width: 10px;
            height: 1em;
      }
      /*.line-1px {
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
   }

   .line-2px {
      border: 0;
      border-top: 2px solid rgba(0, 0, 0, 0.1);
   }

   .line-3px {
      border: 0;
      border-top: 3px solid rgba(0, 0, 0, 0.1);
   }

   .line-4px {
      border: 0;
      border-top: 4px solid rgba(0, 0, 0, 0.1);
   }

   .line-5px {
      border: 0;
      border-top: 5px solid rgba(0, 0, 0, 0.1);
   }

   .line-6px {
      border: 0;
      border-top: 6px solid rgba(0, 0, 0, 0.1);
   }

   .line-7px {
      border: 0;
      border-top: 7px solid rgba(0, 0, 0, 0.1);
   }

   .line-8px {
      border: 0;
      border-top: 8px solid rgba(0, 0, 0, 0.1);
   }

   .line-9px {
      border: 0;
      border-top: 9px solid rgba(0, 0, 0, 0.1);
   }

   .line-10px {
      border: 0;
      border-top: 10px solid rgba(0, 0, 0, 0.1);
   }*/
      /** n.光标 cursor-
*  pointer/text
*/
      
      .cursor-pointer {
            cursor: pointer !important;
      }
      
      .cursor-text {
            cursor: text !important;
      }
      /** o.层级 zindex- 010/09/08/07/06/05/04/03/02/01/0/1/2/3/4/5/6/7/8/9/10/99/999/9999/99999/999999
*/
      
      .zindex-010 {
            z-index: -10;
      }
      
      .zindex-09 {
            z-index: -9;
      }
      
      .zindex-08 {
            z-index: -8;
      }
      
      .zindex-07 {
            z-index: -7;
      }
      
      .zindex-06 {
            z-index: -6;
      }
      
      .zindex-05 {
            z-index: -5;
      }
      
      .zindex-04 {
            z-index: -4;
      }
      
      .zindex-03 {
            z-index: -3;
      }
      
      .zindex-02 {
            z-index: -2;
      }
      
      .zindex-01 {
            z-index: -1;
      }
      
      .zindex-0 {
            z-index: 0;
      }
      
      .zindex-1 {
            z-index: 1;
      }
      
      .zindex-2 {
            z-index: 2;
      }
      
      .zindex-3 {
            z-index: 3;
      }
      
      .zindex-4 {
            z-index: 4;
      }
      
      .zindex-5 {
            z-index: 5;
      }
      
      .zindex-6 {
            z-index: 6;
      }
      
      .zindex-7 {
            z-index: 7;
      }
      
      .zindex-8 {
            z-index: 8;
      }
      
      .zindex-9 {
            z-index: 9;
      }
      
      .zindex-10 {
            z-index: 10;
      }
      
      .zindex-99 {
            z-index: 99;
      }
      
      .zindex-999 {
            z-index: 999;
      }
      
      .zindex-9999 {
            z-index: 9999;
      }
      
      .zindex-99999 {
            z-index: 99999;
      }
      
      .zindex-999999 {
            z-index: 999999;
      }
      /** p.透明度 opacity-0/10/20/30/40/50/60/70/80/90/100
*/
      
      .opacity-0 {
            opacity: 0;
      }
      
      .opacity-10 {
            opacity: 0.1;
      }
      
      .opacity-20 {
            opacity: 0.2;
      }
      
      .opacity-30 {
            opacity: 0.3;
      }
      
      .opacity-40 {
            opacity: 0.4;
      }
      
      .opacity-50 {
            opacity: 0.5;
      }
      
      .opacity-60 {
            opacity: 0.6;
      }
      
      .opacity-70 {
            opacity: 0.7;
      }
      
      .opacity-80 {
            opacity: 0.8;
      }
      
      .opacity-90 {
            opacity: 0.9;
      }
      
      .opacity-95 {
            opacity: 0.95;
      }
      
      .opacity-100 {
            opacity: 1;
      }
      /** q.ul列表 
*  list-style-none
*  list-style
*  list-style-type-disc/circle/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha
*/
      
      ul {
            list-style: none outside none;
            /*type position image*/
            margin: 0;
            padding: 0;
      }
      
      ul.list-style-none {
            list-style: none outside none;
      }
      
      ul.list-style {
            list-style: disc outside none;
      }
      /*type*/
      /*实心圆*/
      
      ul.list-style-type-disc {
            list-style-type: disc;
      }
      /*空心圆*/
      
      ul.list-style-type-circle {
            list-style-type: circle;
      }
      /*实心方块*/
      
      ul.list-style-type-square {
            list-style-type: square;
      }
      /*数字*/
      
      ul.list-style-type-decimal {
            list-style-type: decimal;
      }
      /*0开头的数字标记*/
      
      ul.list-style-type-decimal-leading-zero {
            list-style-type: decimal-leading-zero;
      }
      /*小写罗马数字(i, ii, iii, iv, v, 等。)*/
      
      ul.list-style-type-lower-roman {
            list-style-type: lower-roman;
      }
      /*大写罗马数字(I, II, III, IV, V, 等。)*/
      
      ul.list-style-type-upper-roman {
            list-style-type: upper-roman;
      }
      /*小写英文字母(a, b, c, d, e, 等。)*/
      
      ul.list-style-type-lower-alpha {
            list-style-type: lower-alpha;
      }
      /*大写英文字母(A, B, C, D, E, 等。)*/
      
      ul.list-style-type-upper-alpha {
            list-style-type: upper-alpha;
      }
      /*position*/
      
      ul.list-style-position-inside {
            list-style-position: inside;
      }
      
      ul.list-style-position-outside {
            list-style-position: outside;
      }
      /** r.grid布局
* 
* .grid-container 
* (.grid-2/2r/3/3r/4/6/6r/9/12/12r/16/20/a/b/c/d/e/f)
* (.grid-col-1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/1-2/2-1/1-2-1/1-3/3-1/1-3-1)
* (.grid-row-1/2/3/4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19/20/1-2/2-1/1-2-1/1-3/3-1/1-3-1)
* 		->.grid-item
* 
* .grid-container  (.grid-a/b/c/d/e/f)
* 		->.grid-item-area
*
* row-gap-/column-gap-/gap- 0/1/2/3/4/5(px)
* ****************************************************************************
*/
      /**  
      * 容器属性
      *     display: grid指定一个容器采用网格布局 
      *         默认情况下，容器元素都是块级元素，但也可以设成行内元素 display: inline-grid;
      *     grid-template-columns 属性，定义每一列的列宽 grid-template-columns: 100px 100px 100px;
      *     grid-template-rows 属性,定义每一行的行高
      *         repeat()
      *             grid-template-columns: repeat(3, 33.33%);
      *         auto-fill 关键字
      *             grid-template-columns: repeat(auto-fill, 100px);
      *         fr 关键字
      *             grid-template-columns: 150px 1fr 2fr;
      *             grid-template-columns: repeat(3, 1fr);
      *         minmax()
      *             grid-template-columns: 1fr 1fr minmax(100px, 1fr);
      *         auto 关键字
      *             grid-template-columns: 100px auto 100px;
      *         网格线的名称
      *             grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
      *     row-gap用于设置行间距，
      *     column-gap用于设置列间距，合并简写：
      *     gap是row-gap属性和column-gap属性的合并简写形式
      *     grid-template-areas属性用于定义区域，如果某些区域不需要利用，则使用"点"（.）表示。
      *         多个单元格合并成一个区域的写法如下：
      *             grid-template-areas: 'a a a'
      *                                  'b b b'
      *                                  'c . c';
      *     grid-auto-flow 属性定义行列顺序，默认row、column、rowdense、column dense
      *         column表示 "先列后行"row dense，表示"先行后列"，并且尽可能紧密填满
      *    
      *     justify-items属性设置单元格内容的水平位置（左中右）
      *     align-items属性设置单元格内容的垂直位置
      *     place-items属性是align-items属性和justify-items属性的合并简写形式。
      *         start | end | center | stretch
      *     justify-content属性是整个内容区域在容器里面的水平位置（左中右），
      *     align-content属性是整个内容区域的垂直位置（上中下）。
      *     place-content属性是align-content属性和justify-content属性的合并简写形式
      *         start | end | center | stretch | space-around | space-between | space-evenly
      *     grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高
      *     grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
      *     grid属性是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow
      * 项目属性：
      *     grid-column-start属性：左边框所在的垂直网格线
      *     grid-column-end属性：右边框所在的垂直网格线
      *     grid-row-start属性：上边框所在的水平网格线
      *     grid-row-end属性：下边框所在的水平网格线
      *     grid-column属性是grid-column-start和grid-column-end的合并简写形式 grid-column: 1 / 3;
      *     grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
      *         网格线序号、网格线名字
      *         span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格  grid-column-start: span 2;
      *     grid-area属性指定项目放在哪一个区域
      *     grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
      *          grid-area: <row-start> / <column-start> / <row-end> / <column-end>
      *     justify-self属性设置单元格内容的水平位置（左中右）
      *     align-self属性设置单元格内容的垂直位置（上中下）
      *     place-self属性是align-self属性和justify-self属性的合并简写形式
      *         start | end | center | stretch
      */
      
      .grid-container {
            width: 100%;
            height: 100%;
            display: grid;
            grid-gap: 1px;
      }
      
      .grid-container>.grid-item {
            grid-column-start: span 1;
      }
      
      .grid-container>.grid-item-area:nth-child(1) {
            grid-area: a1;
      }
      
      .grid-container>.grid-item-area:nth-child(2) {
            grid-area: a2;
      }
      
      .grid-container>.grid-item-area:nth-child(3) {
            grid-area: a3;
      }
      
      .grid-container>.grid-item-area:nth-child(4) {
            grid-area: a4;
      }
      
      .grid-container>.grid-item-area:nth-child(5) {
            grid-area: a5;
      }
      
      .grid-container>.grid-item-area:nth-child(6) {
            grid-area: a6;
      }
      
      .grid-container>.grid-item-area:nth-child(7) {
            grid-area: a7;
      }
      
      .grid-container>.grid-item-area:nth-child(8) {
            grid-area: a8;
      }
      
      .grid-container>.grid-item-area:nth-child(9) {
            grid-area: a9;
      }
      
      .grid-container>.grid-item-area:nth-child(10) {
            grid-area: a10;
      }
      
      .grid-container>.grid-item-area:nth-child(11) {
            grid-area: a11;
      }
      
      .grid-container>.grid-item-area:nth-child(12) {
            grid-area: a12;
      }
      
      .grid-container>.grid-item-area:nth-child(13) {
            grid-area: a13;
      }
      
      .grid-container>.grid-item-area:nth-child(14) {
            grid-area: a14;
      }
      
      .grid-container>.grid-item-area:nth-child(15) {
            grid-area: a15;
      }
      
      .grid-container>.grid-item-area:nth-child(16) {
            grid-area: a16;
      }
      /*grid-col-*/
      
      .grid-col-1 {
            grid-template-columns: 1fr;
      }
      
      .grid-col-2 {
            grid-template-columns: repeat(2, 1fr);
      }
      
      .grid-col-3 {
            grid-template-columns: repeat(3, 1fr);
      }
      
      .grid-col-4 {
            grid-template-columns: repeat(4, 1fr);
      }
      
      .grid-col-5 {
            grid-template-columns: repeat(5, 1fr);
      }
      
      .grid-col-6 {
            grid-template-columns: repeat(6, 1fr);
      }
      
      .grid-col-7 {
            grid-template-columns: repeat(7, 1fr);
      }
      
      .grid-col-8 {
            grid-template-columns: repeat(8, 1fr);
      }
      
      .grid-col-9 {
            grid-template-columns: repeat(9, 1fr);
      }
      
      .grid-col-10 {
            grid-template-columns: repeat(10, 1fr);
      }
      
      .grid-col-11 {
            grid-template-columns: repeat(11, 1fr);
      }
      
      .grid-col-12 {
            grid-template-columns: repeat(12, 1fr);
      }
      
      .grid-col-13 {
            grid-template-columns: repeat(13, 1fr);
      }
      
      .grid-col-14 {
            grid-template-columns: repeat(14, 1fr);
      }
      
      .grid-col-15 {
            grid-template-columns: repeat(15, 1fr);
      }
      
      .grid-col-16 {
            grid-template-columns: repeat(16, 1fr);
      }
      
      .grid-col-17 {
            grid-template-columns: repeat(17, 1fr);
      }
      
      .grid-col-18 {
            grid-template-columns: repeat(18, 1fr);
      }
      
      .grid-col-19 {
            grid-template-columns: repeat(19, 1fr);
      }
      
      .grid-col-20 {
            grid-template-columns: repeat(20, 1fr);
      }
      
      .grid-col-1-2 {
            grid-template-columns: 1fr 2fr;
      }
      
      .grid-col-2-1 {
            grid-template-columns: 2fr 1fr;
      }
      
      .grid-col-1-2-1 {
            grid-template-columns: 1fr 2fr 1fr;
      }
      
      .grid-col-1-3 {
            grid-template-columns: 1fr 3fr;
      }
      
      .grid-col-3-1 {
            grid-template-columns: 3fr 1fr;
      }
      
      .grid-col-1-3-1 {
            grid-template-columns: 1fr 3fr 1fr;
      }
      /*grid-row-*/
      
      .grid-row-1 {
            grid-template-rows: 1fr;
      }
      
      .grid-row-2 {
            grid-template-rows: repeat(2, 1fr);
      }
      
      .grid-row-3 {
            grid-template-rows: repeat(3, 1fr);
      }
      
      .grid-row-4 {
            grid-template-rows: repeat(4, 1fr);
      }
      
      .grid-row-5 {
            grid-template-rows: repeat(5, 1fr);
      }
      
      .grid-row-6 {
            grid-template-rows: repeat(6, 1fr);
      }
      
      .grid-row-7 {
            grid-template-rows: repeat(7, 1fr);
      }
      
      .grid-row-8 {
            grid-template-rows: repeat(8, 1fr);
      }
      
      .grid-row-9 {
            grid-template-rows: repeat(9, 1fr);
      }
      
      .grid-row-10 {
            grid-template-rows: repeat(10, 1fr);
      }
      
      .grid-row-11 {
            grid-template-rows: repeat(11, 1fr);
      }
      
      .grid-row-12 {
            grid-template-rows: repeat(12, 1fr);
      }
      
      .grid-row-13 {
            grid-template-rows: repeat(13, 1fr);
      }
      
      .grid-row-14 {
            grid-template-rows: repeat(14, 1fr);
      }
      
      .grid-row-15 {
            grid-template-rows: repeat(15, 1fr);
      }
      
      .grid-row-16 {
            grid-template-rows: repeat(16, 1fr);
      }
      
      .grid-row-17 {
            grid-template-rows: repeat(17, 1fr);
      }
      
      .grid-row-18 {
            grid-template-rows: repeat(18, 1fr);
      }
      
      .grid-row-19 {
            grid-template-rows: repeat(19, 1fr);
      }
      
      .grid-row-20 {
            grid-template-rows: repeat(20, 1fr);
      }
      
      .grid-row-1-2 {
            grid-template-rows: 1fr 2fr;
      }
      
      .grid-row-2-1 {
            grid-template-rows: 2fr 1fr;
      }
      
      .grid-row-1-2-1 {
            grid-template-rows: 1fr 2fr 1fr;
      }
      
      .grid-row-1-3 {
            grid-template-rows: 1fr 3fr;
      }
      
      .grid-row-3-1 {
            grid-template-rows: 3fr 1fr;
      }
      
      .grid-row-1-3-1 {
            grid-template-rows: 1fr 3fr 1fr;
      }
      /*grid*/
      
      .grid-2 {
            grid-template-columns: repeat(2, 1fr);
      }
      
      .grid-2r {
            grid-template-rows: repeat(2, 1fr);
      }
      
      .grid-3 {
            grid-template-columns: repeat(3, 1fr);
      }
      
      .grid-3r {
            grid-template-rows: repeat(3, 1fr);
      }
      
      .grid-4 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
      }
      
      .grid-6 {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
      }
      
      .grid-6r {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 1fr);
      }
      
      .grid-9 {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
      }
      
      .grid-12 {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
      }
      
      .grid-12r {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr);
      }
      
      .grid-16 {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(4, 1fr);
      }
      
      .grid-20 {
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(4, 1fr);
      }
      
      .grid-a {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas: 'a1 a4 a4 a7' 'a2 a4 a4 a8' 'a3 a5 a6 a9';
      }
      
      .grid-b {
            grid-template-columns: 25% auto 25%;
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas: 'a1 a4 a6' 'a2 a4 a7' 'a3 a5 a8';
      }
      
      .grid-c {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas: 'a1 a1 a4' 'a1 a1 a5' 'a2 a3 a6';
      }
      
      .grid-d {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas: 'a1 a1 a4' 'a1 a1 a5' 'a2 a3 a5';
      }
      
      .grid-e {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 2fr 1fr;
            grid-template-areas: 'a1 a1 a2' 'a3 a4 a2';
      }
      
      .grid-f {
            grid-template-columns: 2fr 1fr 1fr;
            grid-template-rows: 30px 1fr;
            grid-template-areas: 'a1 a2 a3' 'a4 a4 a4';
      }
      /*@media (max-width: 1200px){
         .grid-col-lg-1{
            grid-template-rows: 1fr !important;
         }
      }
      @media (max-width: 992px){
         .grid-col-md-1{
            grid-template-rows: 1fr !important;
         }
      }
      @media (max-width: 768px){
         .grid-col-sm-1{
            grid-template-rows: 1fr !important;
         }
      }
      @media (max-width: 576px){
         .grid-col-xs-1{
            grid-template-rows: 1fr !important;
         }
      }*/
      /* 间距 
         *	row-gap/column-gap/gap-
         *	0/1/2/3/4/5(px)
      */
      
      .row-gap-0 {
            row-gap: 0 !important;
      }
      
      .row-gap-1 {
            row-gap: 0.25rem !important;
      }
      
      .row-gap-2 {
            row-gap: 0.5rem !important;
      }
      
      .row-gap-3 {
            row-gap: 1rem !important;
      }
      
      .row-gap-4 {
            row-gap: 1.5rem !important;
      }
      
      .row-gap-5 {
            row-gap: 3rem !important;
      }
      
      .row-gap-1px {
            row-gap: 1px !important;
      }
      
      .row-gap-2px {
            row-gap: 2px !important;
      }
      
      .row-gap-3px {
            row-gap: 3px !important;
      }
      
      .row-gap-4px {
            row-gap: 4px !important;
      }
      
      .row-gap-5px {
            row-gap: 5px !important;
      }
      
      .column-gap-0 {
            column-gap: 0px !important;
      }
      
      .column-gap-1 {
            column-gap: 0.25rem !important;
      }
      
      .column-gap-2 {
            column-gap: 0.5rem !important;
      }
      
      .column-gap-3 {
            column-gap: 1rem !important;
      }
      
      .column-gap-4 {
            column-gap: 1.5rem !important;
      }
      
      .column-gap-5 {
            column-gap: 3rem !important;
      }
      
      .column-gap-1px {
            column-gap: 1px !important;
      }
      
      .column-gap-2px {
            column-gap: 2px !important;
      }
      
      .column-gap-3px {
            column-gap: 3px !important;
      }
      
      .column-gap-4px {
            column-gap: 4px !important;
      }
      
      .column-gap-5px {
            column-gap: 5px !important;
      }
      
      .gap-0 {
            gap: 0px !important;
      }
      
      .gap-1 {
            gap: 0.25rem !important;
      }
      
      .gap-2 {
            gap: 0.5rem !important;
      }
      
      .gap-3 {
            gap: 1rem !important;
      }
      
      .gap-4 {
            gap: 1.5rem !important;
      }
      
      .gap-5 {
            gap: 3rem !important;
      }
      
      .gap-1px {
            gap: 1px !important;
      }
      
      .gap-2px {
            gap: 2px !important;
      }
      
      .gap-3px {
            gap: 3px !important;
      }
      
      .gap-4px {
            gap: 4px !important;
      }
      
      .gap-5px {
            gap: 5px !important;
      }
      /**
* *****************************************************************************
*  a.M-D导航 
*   .wrapper
*     .md-sidebar
*       .md-header
*       .md-wrapper
*     .md-content
*       .md-header
*       .md-wrapper
* *****************************************************************************
*/
      
      .wrapper {
            height: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            /*display:grid;
      grid-template-rows: auto 1fr;*/
      }
      
      .md-sidebar {
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            /*display:flex;
      flex-direction:column;*/
            display: grid;
            grid-template-rows: auto 1fr;
            box-sizing: border-box;
            transition: 0.3s;
            background-color: var(--white);
            z-index: 2;
            width: 20%;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) !important;
      }
      
      .md-content {
            height: 100%;
            position: absolute;
            top: 0;
            overflow: hidden;
            /*display:flex;
      flex-direction:column;*/
            display: grid;
            grid-template-rows: auto 1fr;
            transition: 0.3s;
            background-color: var(--light);
            z-index: 1;
      }
      
      .md-header {
            height: 45px;
            line-height: 45px;
            border-bottom: 1px solid var(--gray-light3);
            /*overflow:hidden;*/
            display: flex;
            /*align-items: center;*/
      }
      
      .md-sidebar>.md-header {
            overflow: hidden;
      }
      
      .md-wrapper {
            position: relative;
            -ms-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
            overflow: auto;
      }
      
      .md-wrapper::-webkit-scrollbar {
            display: none
      }
      /*.wrapper:not(.main-wrapper) .md-content,.md-wrapper:not(.main-wrapper) .md-content{
      width:80%;
      left:20%;
      }*/
      /*sidebar-collapse 缩起导航部分*/
      
      .sidebar-collapse:not(.main-wrapper)>.md-sidebar {
            width: 0 !important;
            z-index: -1;
      }
      
      .sidebar-collapse:not(.main-wrapper)>.md-content {
            left: 0 !important;
            width: 100% !important;
      }
      /*主导航设置*/
      /*默认导航宽度*/
      
      .main-wrapper>.md-sidebar {
            width: 250px;
            z-index: 3;
      }
      
      .main-wrapper.small-sidebar>.md-sidebar {
            width: 180px;
      }
      /*主导航md-content定位模式改变*/
      
      .main-wrapper>.md-content {
            position: static;
      }
      /*鼠标悬浮显示导航附加信息*/
      
      .main-wrapper>.md-sidebar:hover {
            width: 250px !important;
            transition-duration: width 0.3s;
      }
      
      .main-wrapper.small-sidebar>.md-sidebar:hover {
            width: 180px !important;
            transition-duration: width 0.3s;
      }
      
      .main-wrapper>.md-sidebar:hover .md-hide {
            margin-left: 0px;
            opacity: 1;
            visibility: visible;
      }
      /*当屏幕宽度>=768px时 展开时收缩主体部分*/
      
      @media (min-width: 768px) {
            .main-wrapper>.md-content {
               margin-left: 250px;
               transition: margin-left .3s ease-in-out;
            }
            .main-wrapper.small-sidebar>.md-content {
               margin-left: 180px;
               transition: margin-left .3s ease-in-out;
            }
      }
      /*缩起时缩起导航部分*/
      
      .main-wrapper.sidebar-collapse>.md-sidebar {
            margin-left: -250px;
      }
      
      .main-wrapper.small-sidebar.sidebar-collapse>.md-sidebar {
            margin-left: -180px;
      }
      /*当屏幕宽度>=922px时 缩起时显示缩略导航*/
      
      @media (min-width: 992px) {
            /*full-collapse*/
            .main-wrapper.full-collapse.sidebar-collapse>.md-content {
               margin-left: 0 !important;
               transition: margin-left .35s ease-in-out;
            }
            .main-wrapper.full-collapse.sidebar-collapse>.md-sidebar {
               margin-left: -250px;
               transition: margin-left .35s ease-in-out;
            }
            .main-wrapper.sidebar-collapse:not(.full-collapse)>.md-content {
               margin-left: 3.6rem !important;
            }
            .main-wrapper.sidebar-collapse:not(.full-collapse)>.md-sidebar {
               margin-left: 0;
               width: 3.6rem;
               overflow-x: hidden;
            }
            /*small-sidebar*/
            .main-wrapper.small-sidebar.full-collapse.sidebar-collapse>.md-sidebar {
               margin-left: -180px;
            }
            .main-wrapper.small-sidebar.sidebar-collapse>.md-sidebar {
               margin-left: 0;
            }
            /*隐藏图标后面的文字等信息*/
            .main-wrapper.sidebar-collapse .md-hide {
               margin-left: -10px;
               opacity: 0;
               visibility: hidden;
               transition-duration: opacity 0.3s;
            }
      }
      /*当屏幕宽度<991.98px时 md-content占满屏幕*/
      
      @media (max-width: 991.98px) {
            .main-wrapper>.md-content {
               margin-left: 0;
            }
      }
      
      .main-wrapper .nav-icon {
            width: 2.6rem;
            margin-right: 0.5rem;
            text-align: center;
      }
      
      .main-wrapper .md-logo-img {
            width: 2.6rem;
            margin-right: 0.5rem;
            float: left;
            height: 100%;
            display: flex;
            -ms-flex-align: center !important;
            align-items: center !important;
      }
      /*层级缩进菜单 leveltree*/
      
      .leveltree.sidebar-nav>li.has-treeview>.nav-treeview {
            padding-left: 0.5rem
      }
      
      .main-wrapper .leveltree.sidebar-nav>li.has-treeview>.nav-treeview {
            padding-left: 3.1rem
      }
      
      .main-wrapper .leveltree.sidebar-nav .nav-treeview .nav-icon {
            margin-right: 0;
            width: auto;
      }
      /*nav-item*/
      
      .nav-item {
            padding-left: 0.5rem;
            padding-right: 0.75rem;
            /*font-size: 1rem;*/
            white-space: nowrap;
            cursor: pointer;
      }
      /*nav-link*/
      
      .nav-link {
            display: block;
            padding: 0.3rem 0.5rem;
            cursor: pointer;
            white-space: nowrap;
            cursor: pointer;
      }
      
      .nav-link:hover,
      .nav-link:focus {
            text-decoration: none;
      }
      
      .nav-link.disabled {
            color: var(--secondary);
            pointer-events: none;
            cursor: default;
      }
      /*nav-pills*/
      
      .nav-pills .nav-link,
      .nav-pills .nav-item {
            border-radius: 0.25rem;
      }
      /*navbar 横向导航条*/
      
      .navbar {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 0.5rem 0.5rem;
      }
      
      .navbar-nav {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row !important;
            flex-direction: row !important;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
      }
      
      .navbar-nav .nav-link {
            padding: 0;
      }
      
      .navbar-nav .nav-item {
            position: relative;
            /*height: 2.5rem;*/
      }
      /*.navbar-badge {
         font-size: .6rem;
         font-weight: 300;
         padding: 2px 4px;
         position: absolute;
         left: 12px;
         top: 9px;
      }*/
      
      .navbar-badge {
            font-size: .8rem !important;
            font-weight: 600 !important;
            padding: 2px 3px !important;
            position: absolute !important;
            left: 14px !important;
            top: 7px !important;
      }
      /*sidebar 侧边导航列表*/
      
      .sidebar-nav {
            height: 100%;
            padding: 0.5rem;
      }
      
      .sidebar-nav .nav-item {
            padding-left: 0;
            padding-right: 0;
      }
      
      .sidebar-nav>.nav-item i.fa {
            font-size: 1.1rem;
            padding: 0 0.5rem;
      }
      
      .sidebar-nav .nav-item>.nav-link {
            padding-left: 0;
            padding-right: 0;
            position: relative;
            margin-bottom: .2rem;
            color: var(--gray-dark2);
      }
      
      .sidebar-nav .nav-item p {
            display: inline-block;
            margin: 0;
      }
      
      .sidebar-nav .nav-link>.right,
      .sidebar-nav .nav-link>p>.right {
            position: absolute;
            right: 1rem;
            top: .42rem;
      }
      
      .sidebar-nav .nav-link>.right:nth-child(2),
      .sidebar-nav .nav-link>p>.right:nth-child(2) {
            right: 2.3rem;
      }
      /*nav-link-lg*/
      
      .sidebar-nav .nav-link.nav-link-lg>.right,
      .sidebar-nav .nav-sidebar .nav-link.nav-link-lg>p>.right {
            top: .7rem;
      }
      
      .sidebar-nav .nav-link.nav-link-lg {
            display: block;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
      }
      /*树状*/
      
      .sidebar-nav .has-treeview:not(.menu-open)>.nav-treeview {
            display: none;
      }
      
      .sidebar-nav .menu-open>.nav-link i.right {
            -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
      }
      
      .sidebar-nav .nav-item>.nav-link .right {
            transition: -webkit-transform ease-in-out .3s;
            transition: transform ease-in-out .3s;
            transition: transform ease-in-out .3s, -webkit-transform ease-in-out .3s;
      }
      
      .sidebar-nav>.nav-item>.nav-treeview {
            background: 0 0;
      }
      
      .sidebar-nav .nav-item.active {
            background-color: rgba(255, 255, 255, 0.9);
      }
      
      .sidebar-nav .nav-item.active .nav-link {
            color: var(--gray-dark2)!important;
      }
      /*背景及字体颜色*/
      /*默认背景：白色 var(--white)*/
      
      .wrapper>.md-sidebar>.md-wrapper,
      .wrapper>.md-content>.md-header,
      .wrapper>.md-sidebar>.md-header,
      .md-wrapper>.md-sidebar>.md-wrapper,
      .md-wrapper>.md-content>.md-header,
      .md-wrapper>.md-sidebar>.md-header {
            background-color: var(--white);
      }
      /*默认字体：灰色 rgba(0,0,0,.5)*/
      
      .wrapper>.md-sidebar>.md-wrapper,
      .wrapper>.md-content>.md-header,
      .wrapper>.md-sidebar>.md-header,
      .wrapper>.md-sidebar>.md-wrapper .nav-item,
      .wrapper>.md-sidebar>.md-wrapper .nav-link,
      .wrapper>.md-content>.md-header .nav-item,
      .wrapper>.md-content>.md-header .nav-link,
      .wrapper>.md-content>.md-header .breadcrumb-item.active,
      .wrapper>.md-content>.md-header .breadcrumb-item+.breadcrumb-item::before,
      .wrapper>.md-content>.md-header .breadcrumb-item a,
      .wrapper>.md-sidebar>.md-header .nav-item,
      .wrapper>.md-sidebar>.md-header .nav-link,
      .wrapper>.md-sidebar>.md-header a,
      .md-wrapper>.md-sidebar>.md-wrapper,
      .md-wrapper>.md-content>.md-header,
      .md-wrapper>.md-sidebar>.md-header,
      .md-wrapper>.md-sidebar>.md-wrapper .nav-item,
      .md-wrapper>.md-sidebar>.md-wrapper .nav-link,
      .md-wrapper>.md-content>.md-header .nav-item,
      .md-wrapper>.md-content>.md-header .nav-link,
      .md-wrapper>.md-content>.md-header .breadcrumb-item.active,
      .md-wrapper>.md-content>.md-header .breadcrumb-item+.breadcrumb-item::before,
      .md-wrapper>.md-content>.md-header .breadcrumb-item a,
      .md-wrapper>.md-sidebar>.md-header .nav-item,
      .md-wrapper>.md-sidebar>.md-header .nav-link,
      .md-wrapper>.md-sidebar>.md-header a {
            color: rgba(0, 0, 0, .5);
      }
      /*默认鼠标悬浮字体：深灰色 rgba(0,0,0,.5)*/
      
      .wrapper>.md-sidebar>.md-wrapper .nav-item:hover,
      .wrapper>.md-sidebar>.md-wrapper .nav-link:hover,
      .wrapper>.md-content>.md-header .nav-item:hover,
      .wrapper>.md-content>.md-header .nav-link:hover,
      .wrapper>.md-content>.md-header .breadcrumb-item a:hover,
      .wrapper>.md-sidebar>.md-header .nav-item:hover,
      .wrapper>.md-sidebar>.md-header .nav-link:hover,
      .md-wrapper>.md-sidebar>.md-wrapper .nav-item:hover,
      .md-wrapper>.md-sidebar>.md-wrapper .nav-link:hover,
      .md-wrapper>.md-content>.md-header .nav-item:hover,
      .md-wrapper>.md-content>.md-header .nav-link:hover,
      .md-wrapper>.md-content>.md-header .breadcrumb-item a:hover,
      .md-wrapper>.md-sidebar>.md-header .nav-item:hover,
      .md-wrapper>.md-sidebar>.md-header .nav-link:hover {
            color: var(--gray-dark2);
      }
      /*默认树状展开时父元素背景 以及悬浮到元素上*/
      
      .wrapper>.md-sidebar .sidebar-nav li>.nav-link:hover,
      .md-wrapper>.md-sidebar .sidebar-nav li>.nav-link:hover
      /*,.wrapper>.md-sidebar .sidebar-nav li.has-treeview.menu-open >.nav-link*/
      
      ,
      .wrapper>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:active
      /*,.md-wrapper>.md-sidebar .sidebar-nav li.has-treeview.menu-open >.nav-link*/
      
      ,
      .md-wrapper>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:active {
            /*background-color: #545b62;*/
            /*color: var(--white);*/
            background-color: rgba(255, 255, 255, 0.6);
      }
      
      .wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li>.nav-link:hover,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li>.nav-link:hover
      /*,.wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview.menu-open >.nav-link*/
      
      ,
      .wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:hover,
      .wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:active
      /*,.md-wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview.menu-open >.nav-link*/
      
      ,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:hover,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar .sidebar-nav li.has-treeview>.nav-link:active {
            background-color: rgba(255, 255, 255, .1);
            color: var(--white);
      }
      /*深色背景字体：灰白色 rgba(255,255,255,.75)*/
      
      .wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper,
      .wrapper[class*=header-dark]>.md-content>.md-header,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header .wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-item,
      .wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-link,
      .wrapper[class*=header-dark]>.md-content>.md-header .nav-item,
      .wrapper[class*=header-dark]>.md-content>.md-header .nav-link,
      .wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item.active,
      .wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item+.breadcrumb-item::before,
      .wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item a,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-item,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-link,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header a,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper,
      .md-wrapper[class*=header-dark]>.md-content>.md-header,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-item,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-link,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .nav-item,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .nav-link,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item.active,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item+.breadcrumb-item::before,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item a,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-item,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-link,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header a {
            color: rgba(255, 255, 255, .75);
      }
      /*深色背景鼠标悬浮字体：白色 var(--white)*/
      
      .wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-item:hover,
      .wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-link:hover,
      .wrapper[class*=header-dark]>.md-content>.md-header .nav-item:hover,
      .wrapper[class*=header-dark]>.md-content>.md-header .nav-link:hover,
      .wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item a:hover,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-item:hover,
      .wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-link:hover,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-item:hover,
      .md-wrapper[class*=sidebar-dark]>.md-sidebar>.md-wrapper .nav-link:hover,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .nav-item:hover,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .nav-link:hover,
      .md-wrapper[class*=header-dark]>.md-content>.md-header .breadcrumb-item a:hover,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-item:hover,
      .md-wrapper[class*=logo-dark]>.md-sidebar>.md-header .nav-link:hover {
            color: var(--white);
      }
      /*深色背景分隔线： 灰 rgba(255,255,255,.8)*/
      
      [class*=sidebar-dark]>.md-sidebar>.md-header {
            border-bottom: 1px solid #4b545c;
            color: rgba(255, 255, 255, .8);
      }
      /*sidebar-dark-info*/
      /*header-dark-info*/
      /*logo-dark-info*/
      
      .wrapper.sidebar-dark-info>.md-sidebar>.md-wrapper,
      .wrapper.header-dark-info>.md-content>.md-header,
      .wrapper.logo-dark-info>.md-sidebar>.md-header,
      .md-wrapper.sidebar-dark-info>.md-sidebar>.md-wrapper,
      .md-wrapper.header-dark-info>.md-content>.md-header,
      .md-wrapper.logo-dark-info>.md-sidebar>.md-header {
            background-color: var(--info);
      }
      /*sidebar-dark-secondary*/
      /*header-dark-secondary*/
      /*logo-dark-secondary*/
      
      .wrapper.sidebar-dark-secondary>.md-sidebar>.md-wrapper,
      .wrapper.header-dark-secondary>.md-content>.md-header,
      .wrapper.logo-dark-secondary>.md-sidebar>.md-header,
      .md-wrapper.sidebar-dark-secondary>.md-sidebar>.md-wrapper,
      .md-wrapper.header-dark-secondary>.md-content>.md-header,
      .md-wrapper.logo-dark-secondary>.md-sidebar>.md-header {
            background-color: var(--secondary);
      }
      /*sidebar-dark-pink*/
      /*header-dark-pink*/
      /*logo-dark-pink*/
      
      .wrapper.sidebar-dark-pink>.md-sidebar>.md-wrapper,
      .wrapper.header-dark-pink>.md-content>.md-header,
      .wrapper.logo-dark-pink>.md-sidebar>.md-header,
      .md-wrapper.sidebar-dark-pink>.md-sidebar>.md-wrapper,
      .md-wrapper.header-dark-pink>.md-content>.md-header,
      .md-wrapper.logo-dark-pink>.md-sidebar>.md-header {
            background-color: var(--pink);
      }
      /*sidebar-dark-green-dark*/
      /*header-dark-green-dark*/
      /*logo-dark-green-dark*/
      
      .wrapper.sidebar-dark-green-dark>.md-sidebar>.md-wrapper,
      .wrapper.header-dark-green-dark>.md-content>.md-header,
      .wrapper.logo-dark-green-dark>.md-sidebar>.md-header,
      .md-wrapper.sidebar-dark-green-dark>.md-sidebar>.md-wrapper,
      .md-wrapper.header-dark-green-dark>.md-content>.md-header,
      .md-wrapper.logo-dark-green-dark>.md-sidebar>.md-header {
            background-color: var(--green-dark);
      }
      /*sidebar-light-warning*/
      /*header-light-warning*/
      /*logo-light-warning*/
      
      .wrapper.sidebar-light-warning>.md-sidebar>.md-wrapper,
      .wrapper.header-light-warning>.md-content>.md-header,
      .wrapper.logo-light-warning>.md-sidebar>.md-header,
      .md-wrapper.sidebar-light-warning>.md-sidebar>.md-wrapper,
      .md-wrapper.header-light-warning>.md-content>.md-header,
      .md-wrapper.logo-light-warning>.md-sidebar>.md-header {
            background-color: var(--warning);
      }
      /*sidebar-light-ivory*/
      /*header-light-ivory*/
      /*logo-light-ivory*/
      
      .wrapper.sidebar-light-ivory>.md-sidebar>.md-wrapper,
      .wrapper.header-light-ivory>.md-content>.md-header,
      .wrapper.logo-light-ivory>.md-sidebar>.md-header,
      .md-wrapper.sidebar-light-ivory>.md-sidebar>.md-wrapper,
      .md-wrapper.header-light-ivory>.md-content>.md-header,
      .md-wrapper.logo-light-ivory>.md-sidebar>.md-header {
            background-color: var(--ivory);
      }
      /*sidebar-dark*/
      /*header-dark*/
      /*logo-dark*/
      
      .wrapper.sidebar-dark>.md-sidebar>.md-wrapper,
      .wrapper.header-dark>.md-content>.md-header,
      .wrapper.logo-dark>.md-sidebar>.md-header,
      .md-wrapper.sidebar-dark>.md-sidebar>.md-wrapper,
      .md-wrapper.header-dark>.md-content>.md-header,
      .md-wrapper.logo-ddark>.md-sidebar>.md-header {
            background-color: var(--dark);
      }
      /*sidebar-light*/
      /*header-light*/
      /*logo-light*/
      
      .wrapper.sidebar-light>.md-sidebar>.md-wrapper,
      .wrapper.header-light>.md-content>.md-header,
      .wrapper.logo-light>.md-sidebar>.md-header,
      .md-wrapper.sidebar-light>.md-sidebar>.md-wrapper,
      .md-wrapper.header-light>.md-content>.md-header,
      .md-wrapper.logo-light>.md-sidebar>.md-header {
            background-color: var(--light);
      }
      /*expand-sidebar*/
      
      .wrapper.expand-sidebar>.md-sidebar .nav-sidebar nav-link>.right,
      .wrapper.expand-sidebar>.md-sidebar .nav-sidebar .nav-link>p>.right,
      .md-wrapper.expand-sidebar>.md-sidebar .nav-sidebar nav-link>.right,
      .md-wrapper.expand-sidebar>.md-sidebar .nav-sidebar .nav-link>p>.right {
            position: absolute;
            right: 1rem;
            top: .7rem;
      }
      
      .wrapper.expand-sidebar>.md-sidebar .nav-link,
      .md-wrapper.expand-sidebar>.md-sidebar .nav-link {
            display: block;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
      }
      /*控制栏*/
      
      .md-control-sidebar-content {
            z-index: 999;
            background-color: var(--dark);
            color: var(--white);
            padding: 0.5rem;
            position: absolute;
            top: 0;
            right: 0;
            width: 250px;
            height: 100%;
            overflow: auto;
            display: none;
      }
      /*颜色按钮*/
      
      .md-control-sidebar-content .color-button {
            width: 40px;
            height: 20px;
            border-radius: 25px;
            margin-right: 10px;
            margin-bottom: 10px;
            opacity: 0.8;
            cursor: pointer;
      }
      
      .control-sidebar-open.md-control-sidebar-content {
            display: block;
      }
      /**
* *****************************************************************************
*  b.表单元素 form
* *****************************************************************************
*/
      /*form*/
      
      form,
      form * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
      }
      /*input*/
      
      input:-webkit-autofill,
      input:-webkit-autofill:hover,
      input:-webkit-autofill:focus {
            /*背景颜色*/
            box-shadow: 0 0 0 60px #eee inset;
            /*字的颜色*/
            -webkit-text-fill-color: #878787;
      }
      
      input[type="text"],
      input[type="text"]:focus,
      input[type="text"]:active,
      input[type="text"]:hover,
      textarea,
      textarea:focus,
      textarea:active,
      textarea:hover,
      textarea:visited {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-color: transparent;
      }
      /*.input-group 组件框*/
      
      .input-group {
            position: relative;
            margin-bottom: 1rem;
      }
      /*.form-label 标签*/
      
      .form-label {
            color: #606266;
            /*#262F44;*/
            /*#496785;*/
            letter-spacing: 1px;
            font-size: 14px;
            /*font-weight: 500;*/
            line-height: 1.5;
            /*30px*/
            padding-left: 5px;
      }
      /*.form-button 提交按钮*/
      
      .form-button {
            border: 0;
            height: 46px;
            line-height: 1;
            font-size: 1.5rem;
            font-weight: 700;
            cursor: pointer;
            padding: 0 30px;
            text-align: center;
            position: relative;
            vertical-align: top;
            display: inline-block;
      }
      /*表单输入元素
      .form-input
      .form-select-multiple
      .form-select
      .form-textarea
   */
      /*共有*/
      
      .form-input,
      .form-select>select,
      .form-textarea {
            position: relative;
            display: inline-block;
            display: -moz-inline-stack;
            vertical-align: middle;
            background-position: 0 0;
            background-color: transparent;
            border: 1px solid var(--gray-light4);
            color: #34495E;
            outline: 0;
            width: 100%;
            padding: .375rem .75rem;
            /*font-size: 1rem;*/
            font-weight: 400;
      }
      
      .form-input,
      .form-select>select,
      .form-textarea,
      input[type=button],
      input[type=submit],
      input[type=search],
      input[type=date] {
            -webkit-tap-highlight-color: transparent;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
      }
      
      .form-input,
      .form-select>select {
            height: 35px;
            line-height: 1.5;
      }
      /*.form-textarea 文本域*/
      
      .form-textarea {
            resize: none;
            line-height: 19px;
            overflow: auto;
            max-width: 100%;
      }
      /*下拉框*/
      
      select {
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
      }
      /*带搜索下拉框*/
      
      .searchable-select-hide {
            display: none;
      }
      
      .searchable-select {
            display: inline-block;
            min-width: 100%;
            /*200px;*/
            font-size: 14px;
            line-height: 1.428571429;
            color: #555;
            vertical-align: middle;
            position: relative;
            outline: none;
      }
      
      .searchable-select-holder {
            white-space: nowrap;
            padding: 6px;
            /*background-color: var(--white);*/
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            min-height: 30px;
            box-sizing: border-box;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      }
      
      .searchable-select-caret {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 0;
            height: 0;
            box-sizing: border-box;
            border-style: solid;
            border-width: 5px;
            border-color: black transparent transparent transparent;
            margin: auto;
            right: 10px;
      }
      
      .searchable-select-dropdown {
            position: absolute;
            background-color: var(--white);
            border: 1px solid #ccc;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            padding: 4px;
            border-top: none;
            top: 28px;
            left: 0;
            right: 0;
            z-index: 999;
      }
      
      .searchable-select-input {
            margin-top: 5px;
            border: 1px solid #ccc;
            outline: none;
            padding: 4px;
            width: 100%;
            box-sizing: border-box;
      }
      
      .searchable-scroll {
            margin-top: 4px;
            position: relative;
      }
      /* .searchable-scroll.has-privious {
            padding-top: 16px;
      }
      
      .searchable-scroll.has-next {
            padding-bottom: 16px;
      } */
      
      .searchable-has-privious {
            top: 0;
      }
      
      .searchable-has-next {
            bottom: 0;
      }
      
      .searchable-has-privious,
      .searchable-has-next {
            height: 16px;
            left: 0;
            right: 0;
            position: absolute;
            text-align: center;
            z-index: 10;
            background-color: white;
            line-height: 8px;
            cursor: pointer;
      }
      
      .searchable-select-items {
            max-height: 400px;
            overflow-y: scroll;
            position: relative;
      }
      
      .searchable-select-items::-webkit-scrollbar {
            display: none;
      }
      
      .searchable-select-item {
            padding: 5px 5px;
            cursor: pointer;
            min-height: 30px;
            box-sizing: border-box;
      }
      
      .searchable-select-item.hover {
            background: #555;
            color: white;
      }
      
      .searchable-select-item.selected {
            background: #28a4c9;
            color: white;
      }
      /*form 定制*/
      
      .searchable-select-caret {
            border: 0;
      }
      
      .searchable-select-holder,
      .select {
            height: 35px;
            border-radius: 5px !important;
            -webkit-border-radius: 5px !important;
            -moz-border-radius: 5px !important;
            -ms-border-radius: 5px !important;
            -o-border-radius: 5px !important;
      }
      /*右侧三角图标*/
      
      .form-select {
            position: relative;
      }
      
      .form-select:after {
            content: ' ';
            position: absolute;
            pointer-events: none;
            border: solid transparent;
            border-top-color: #B5B5B5;
            border-width: 4px;
            z-index: 100;
            bottom: 10px;
            right: 15px;
            height: 0;
            width: 0;
      }
      /*.form-upload 文件上传*/
      
      .form-upload {
            display: block;
            /*width: 100%;*/
      }
      
      .form-upload .form-file {
            width: 100%;
            height: 100%;
            cursor: pointer;
            padding: 8px 10px;
            position: absolute;
            -moz-opacity: 0;
            opacity: 0;
            z-index: 11;
            bottom: 0;
            right: 0;
      }
      
      .form-upload .form-button {
            position: absolute;
            bottom: 0;
            right: 0;
            float: none;
            height: 38px;
            line-height: 38px;
            padding: 0 16px;
            z-index: 10;
      }
      /*开关按钮*/
      
      .form-switch {
            line-height: 35px;
            position: relative;
            font-size: 14px;
      }
      
      .form-switch:after {
            clear: both;
      }
      
      .form-switch:after,
      .form-switch:before {
            display: table;
            content: "";
      }
      
      .switch-label {
            display: inline-flex;
            align-items: center;
            position: relative;
            font-size: 14px;
            line-height: 20px;
            height: 20px;
            vertical-align: middle;
      }
      
      .switch-input {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 100;
            margin: 0;
      }
      
      .switch-core {
            margin: 0;
            display: inline-block;
            position: relative;
            width: 40px;
            height: 20px;
            border: 1px solid var(--gray-light3);
            outline: none;
            border-radius: 10px;
            box-sizing: border-box;
            background: var(--gray-light3);
            cursor: pointer;
            transition: border-color .3s, background-color .3s;
            vertical-align: middle;
      }
      
      .switch-core:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: var(--white);
      }
      
      .switch-input:checked+.switch-label .switch-core {
            border-color: var(--green-dark);
            /*#409eff;*/
            background-color: var(--green-dark);
            /*#409eff;*/
      }
      
      .switch-input:checked+.switch-label .switch-core:after {
            left: 100%;
            margin-left: -17px;
      }
      /*单选复选按钮 checkbox radio*/
      
      .form-option {
            position: relative;
            /* display: block; */
            vertical-align: middle;
            margin-right: 10px;
            font-size: 14px;
      }
      /*选择按钮横向排列*/
      
      .inline .form-option {
            display: inline-block;
      }
      
      .form-option>input {
            position: absolute;
            height: inherit;
            width: inherit;
            clip: rect(1px 1px 1px 1px);
            clip: rect(1px, 1px, 1px, 1px);
            overflow: hidden;
            opacity: 0;
            left: 0;
      }
      
      .form-checkbox,
      .form-radio {
            position: relative;
            margin-right: 2px;
            display: inline-block;
            border: 2px solid #B5B5B5;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -o-border-radius: 3px;
            border-radius: 3px;
            outline: 0;
            height: 19px;
            width: 19px;
            top: 5px;
      }
      
      .form-checkbox:before,
      .form-radio:before {
            content: '';
            display: block;
            -webkit-box-sizing: content-box;
            -moz-box-sizing: content-box;
            -o-box-sizing: content-box;
            box-sizing: content-box;
            -webkit-transition: all .25s;
            -moz-transition: all .25s;
            transition: all .25s;
            padding: 0;
            margin: 0;
            height: 0;
            width: 0;
            opacity: 0;
      }
      
      .form-checkbox:before {
            width: 0;
            height: 0;
            -webkit-transition: -webkit-transform .33s cubic-bezier(.55, 0, .1, 1);
            -moz-transition: transform .33s cubic-bezier(.55, 0, .1, 1);
            -ms-transition: transform .33s cubic-bezier(.55, 0, .1, 1);
            -o-transition: transform .33s cubic-bezier(.55, 0, .1, 1);
            transition: transform .33s cubic-bezier(.55, 0, .1, 1);
            -webkit-transform: rotate(0);
            -moz-transform: rotate(0);
            -ms-transform: rotate(0);
            -o-transform: rotate(0);
            transform: rotate(0);
      }
      
      .form-radio {
            position: relative;
            margin-right: 2px;
            display: inline-block;
            border: 2px solid #B5B5B5;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -o-border-radius: 3px;
            border-radius: 3px;
            outline: 0;
            height: 19px;
            width: 19px;
            top: 5px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -o-border-radius: 20px;
            border-radius: 20px
      }
      
      input+.form-radio:before {
            width: 9px;
            height: 9px;
            margin: 2px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -o-border-radius: 10px;
            border-radius: 10px;
            -webkit-transform: scale(0);
            -moz-transform: scale(0);
            transform: scale(0);
            opacity: 0
      }

      .form-checkbox.sm,
      .form-radio.sm{
            height: 16px;
            width: 16px;
            top: 1px;
            border: 1.2px solid #B5B5B5;
      }
      
      .form-checkbox:after,
      .form-radio:after {
            content: '';
            width: 16px;
            height: 16px;
            background: 0 0;
            position: absolute;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -ms-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            -o-border-radius: 20px;
            border-radius: 20px;
            left: 0;
            top: 0;
      }
      
      input:checked+.form-checkbox:before {
            position: absolute;
            top: 4px;
            left: 3px;
            width: 8px;
            height: 3px;
            border: solid var(--white);
            border-width: 0 0 3px 3px;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            opacity: 1;
      }
      
      input:checked+.form-radio:before {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            transform: scale(1);
            opacity: 1
      }
      
      input:checked+.form-checkbox:active:after,
      input:checked+.form-option:active .form-checkbox:after,
      input:checked+.form-option:active .form-radio:after,
      input:checked+.form-radio:active:after {
            -webkit-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(0, 150, 136, .2);
            -moz-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(0, 150, 136, .2);
            -o-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(0, 150, 136, .2);
            box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(0, 150, 136, .2)
      }
      
      input:checked+.form-checkbox,
      input:checked+.form-radio {
            border: 2px solid var(--green-dark);
      }
      
      input+.form-radio:before,
      input:checked+.form-checkbox,
      input:focus+.form-radio:before {
            background: var(--green-dark);
      }
      
      input:focus+.form-checkbox,
      input:focus+.form-radio,
      input:hover+.form-checkbox,
      input:hover+.form-radio {
            border-color: var(--green-dark);
      }
      /*时分秒选择器*/
      
      .timer table {
            width: 100%;
            /*border:#949495 1px solid;*/
            table-layout: fixed
      }
      
      .timer input {
            outline: none;
      }
      /*时间模块*/
      
      .timer .block-time {
            float: left;
            border: 0px;
            display: block;
            line-height: 25px;
            width: 90%;
      }
      /*数字*/
      
      .timer .number {
            border: 0;
            background: transparent;
            width: auto;
            font-size: 14px;
            font-weight: 500;
            padding: 0 15% 0 2% !important;
            color: #555;
            outline: none;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
      }
      
      .timer input.number {
            box-sizing: content-box;
            width: 1.25rem;
      }
      /*分隔符 ：*/
      
      .timer .colon {
            border: 0;
            background: transparent;
            width: 1rem;
            font-weight: 600;
      }
      /*按钮模块*/
      
      .timer .block-btn {
            float: right;
            border: 0px;
            line-height: 14px;
            padding: 2px;
      }
      /*向上 向下按钮*/
      
      .timer .btn-up,
      .timer .btn-down {
            position: relative;
            display: block;
            width: 10px;
            height: 8px;
      }
      
      .timer .btn-up:after {
            /*background-image: url(img/up.jpg);*/
            /*content: '\f084';
            font-family: "FontAwesome"!important;
            position: absolute;
            right: 0;
            width: 25px;
            line-height: 35px;
            text-align: left;*/
            content: ' ';
            position: absolute;
            pointer-events: none;
            border: solid transparent;
            border-bottom-color: #B5B5B5;
            border-width: 5px;
            bottom: 1px;
            z-index: 100;
            height: 0;
            width: 0;
      }
      
      .timer .btn-down:after {
            /*margin-top: 3px;
            background-image: url(img/down.jpg);*/
            content: ' ';
            position: absolute;
            pointer-events: none;
            border: solid transparent;
            border-top-color: #B5B5B5;
            border-width: 5px;
            top: 1px;
            z-index: 100;
            height: 0;
            width: 0;
      }
      /*输入框*/
      
      .timer input {
            -webkit-tap-highlight-color: transparent;
            -webkit-border-radius: 0;
            border-radius: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: 0;
            background: none
      }
      
      .timer input:-webkit-autofill,
      .timer input:-webkit-autofill:hover,
      .timer input:-webkit-autofill:focus {
            box-shadow: 0 0 0 60px #eee inset;
            border: 0 !important;
            background-color: transparent !important;
      }
      /*聚焦输入框时效果(加边框)*/
      
      .form-input:focus {
            color: #495057;
            background-color: var(--white);
            border-color: #40a9ff;
            /*#80bdff;*/
            outline: 0;
            /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
      }
      
      .form-input[readonly]:focus {
            background-color: var(--transparent);
      }
      /*默认输入 placeholder*/
      /*placeholder字体样式*/
      
         ::-webkit-input-placeholder {
            color: #aaa;
            font-size: 14px;
      }
      
         :-moz-placeholder {
            color: #aaa;
            font-size: 14px;
      }
      
         ::-moz-placeholder {
            color: #aaa;
            font-size: 14px;
      }
      
         :-ms-input-placeholder {
            color: #aaa;
            font-size: 14px;
      }
      
      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
            color: #aaa;
            font-size: 14px;
            font-weight: 500;
      }
      /*div 实现placeholder*/
      
      .placeholder:empty:before {
            content: attr(placeholder);
            /* element attribute*/
            /*content: 'this is content';*/
            color: #aaa;
            font-size: 14px;
      }
      /*焦点时内容为空*/
      
      .placeholder:focus:before {
            content: none;
      }
      /*按钮*/
      /*扫描按钮*/
      /*.btn-scan {
            border: 0;
            width: 50px;
            height: 40px;
            background-size: 100% 100%;
            background-image: url('img/icon/icon-scan.png')
         }*/
      /*拍照按钮*/
      /*.btn-camera {
            width: 50px;
            height: 40px;
            border: 1px solid var(--gray-light4);
            background: url(img/icon/icon-camera.png) no-repeat;
            background-position: center;
            background-size: 30px 30px;
         }*/
      /*图标 icon*/
      
      .icon {
            position: absolute;
            right: 10px;
            bottom: 0;
            width: 40px;
            height: 40px;
            background-size: cover;
      }
      /*扫描图标*/
      /*.icon-scan {
            background-image: url('img/icon/icon-scan.png');
         }*/
      /*扫描*/
      /*.input-group.icon-scan-after:after {
         content: '';
         position: absolute;
         bottom: 0;
         right: 10px;
         width: 40px;
         height: 40px;
         background-size: cover;
         background-image: url('img/icon/icon-scan.png');
      }*/
      
      .input-group.icon-envelope-after input,
      .input-group.icon-password-after input,
      .input-group.icon-search-after input,
      .input-group.icon-date-after input {
            padding-right: 25px;
      }
      
      .input-group.icon-envelope-after:after,
      .input-group.icon-password-after:after,
      .input-group.icon-search-after:after,
      .input-group.icon-date-after:after {
            font-family: "FontAwesome"!important;
            position: absolute;
            right: 0;
            width: 25px;
            line-height: 35px;
            text-align: left;
            /*color:var(--gray-light2);B5B5B5*/
      }
      /*邮箱*/
      
      .input-group.icon-envelope-after:after {
            content: '\f0e0';
      }
      /*密码*/
      
      .input-group.icon-password-after:after {
            content: '\f084';
      }
      /*搜索*/
      
      .input-group.icon-search-after:after {
            content: '\f002';
      }
      /*日期*/
      
      .input-group.icon-date-after:after {
            content: '\f133';
      }
      /*append-icon prepend-icon*/
      
      .append-icon,
      .prepend-icon {
            display: inline-block;
            vertical-align: top;
            position: relative;
            width: 100%
      }
      
      .append-icon .form-icon {
            right: 5px;
      }
      
      .prepend-icon .form-icon {
            left: 5px;
      }
      
      .append-icon .form-icon,
      .prepend-icon .form-icon {
            position: absolute;
            width: 40px;
            height: 40px;
            color: inherit;
            line-height: 40px;
            text-align: left;
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            pointer-events: none;
            bottom: 0;
            z-index: 1;
            vertical-align: middle;
            align-items: center;
            text-align: center;
      }
      
      .append-icon .form-icon i,
      .prepend-icon .form-icon i {
            position: relative;
            font-size: 1rem;
            color: #AEBCC6;
      }
      
      .prepend-icon>input,
      .prepend-icon>select,
      .prepend-icon>textarea {
            padding-left: 25px
      }
      /*必填处理 */
      /*label前加*图标*/
      
      .form-label.required:before {
            content: '*';
            color: red;
      }
      /*禁用处理 */
      /*输入框*/
      
      .form-input[disabled],
      .modern-forms .form-select-multiple select[disabled],
      .form-select>select[disabled],
      .modern-forms .form-textarea[disabled],
      .form-upload .form-file[disabled]+.form-input {
            color: #b5c5c5;
            border-color: #D5D5D5;
            border-style: dotted;
      }
      /*标签 图标*/
      
      .form-input[disabled]+.form-label,
      .form-input[disabled]~.form-icon i,
      .form-select-multiple select[disabled]+.form-label,
      .form-select>select[disabled]+.form-label,
      .form-select>select[disabled]~.form-icon i,
      .form-textarea[disabled]+.form-label,
      .form-textarea[disabled]~.form-icon i,
      .form-upload .form-file[disabled]~.form-icon i,
      .form-upload .form-file[disabled]~.form-label,
      input:disabled+.form-checkbox+.option-label,
      input:disabled+.form-radio+.option-label {
            color: #D5D5D5
      }
      /*placeholder*/
      /*input:disabled::-webkit-input-placeholder {
            color: #D5D5D5
         }

         input:disabled:-ms-input-placeholder {
            color: #D5D5D5
         }

         input:disabled::-moz-placeholder {
            color: #D5D5D5
         }

         input:disabled:-moz-placeholder {
            color: #D5D5D5
         }

         textarea:disabled::-webkit-input-placeholder {
            color: #D5D5D5
         }

         textarea:disabled:-ms-input-placeholder {
            color: #D5D5D5
         }

         textarea:disabled::-moz-placeholder {
            color: #D5D5D5
         }

         textarea:disabled:-moz-placeholder {
            color: #D5D5D5
         }

         .form-upload .form-file[disabled]+input:-moz-placeholder {
            color: #D5D5D5
         }

         .form-upload .form-file[disabled]+input::-moz-placeholder {
            color: #D5D5D5
         }

         .form-upload .form-file[disabled]+input:-ms-input-placeholder {
            color: #D5D5D5
         }

         .form-upload .form-file[disabled]+input::-webkit-input-placeholder {
            color: #D5D5D5
         }*/
      /*输入框下划线*/
      /* .form-input[disabled]~.form-bar,
            .form-select-multiple select[disabled]~.form-bar,
            .form-select>select[disabled]~.form-bar,
            .form-textarea[disabled]~.form-bar,
            .form-upload .form-file[disabled]+.form-input~.form-bar{
            display:none
            }*/
      /*单选复选按钮*/
      
      input:disabled+.form-checkbox,
      input:disabled+.form-radio {
            border-color: #D5D5D5
      }
      
      input:checked:disabled+.form-checkbox,
      input:checked:disabled+.form-radio:before {
            background: #D5D5D5
      }
      
      .form-checkbox:active:after,
      .form-option:active .form-checkbox:after,
      .form-option:active .form-radio:after,
      .form-radio:active:after,
      input[disabled]:checked+.form-checkbox:active:after,
      input[disabled]:checked+.form-option:active .form-checkbox:after,
      input[disabled]:checked+.form-option:active .form-radio:after,
      input[disabled]:checked+.form-radio:active:after {
            -webkit-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(128, 128, 128, .1);
            -moz-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(128, 128, 128, .1);
            -o-box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(128, 128, 128, .1);
            box-shadow: 0 2px 8px transparent, 0 0 0 24px rgba(128, 128, 128, .1)
      }
      
      .input-group>.option-group {
            line-height: 25px;
      }
      /*label 与输入框同行 inline*/
      
      .input-group.inline {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: stretch;
            align-items: stretch;
            width: 100%;
      }
      
      .input-group.inline>.option-group {
            line-height: 35px;
      }
      
      .input-group.inline>.form-input,
      .input-group.inline>.form-select,
      .input-group.inline>.searchable-select,
      .input-group.inline>.option-group,
      .input-group.inline>.form-upload,
      .input-group.inline>.form-textarea,
      .input-group.inline>.form-switch {
            display: block;
            width: 100%;
            position: relative;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 1%;
            margin-bottom: 0;
            min-width: 0;
      }
      
      .input-group.inline .form-label,
      .input-group.inline .form-icon {
            position: static;
            display: -ms-flexbox;
            /*display: flex !important;*/
            margin-right: -1px !important;
            line-height: 35px;
            padding: 0 15px 0 5px;
      }
      
      .input-group.inline .form-icon {
            border: 1px solid var(--gray-light4);
            border-left: 0;
            background-color: var(--white);
      }
      
      .input-group.inline .form-icon i {
            margin: auto;
      }
      /**
   * 图片上传预览CSS
   */
      
      .imageList {
            padding: 18px;
            border: 2px dashed #E7E6E6;
      }
      
      .imageList .up-section {
            position: relative;
            margin-right: 20px;
            margin-bottom: 20px;
            width: 120px;
            height: 120px;
      }
      
      .up-section .close-upimg {
            position: absolute;
            display: none;
            z-index: 10;
            color: #f15134;
            background-color: #fff;
            border-radius: 50%;
            right: 0px;
            padding: 1px;
            cursor: pointer;
            transform: translate(50%, -50%);
            font-size: 20px;
      }
      /*悬浮小阴影*/
      /* .up-section .up-span{
            display: block;
            width: 100%;
            height: 100%;
            visibility: hidden;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 9;
            background: rgba(0,0,0,.35);
      }*/
      
      .up-section .up-img {
            display: block;
            width: 100%;
            height: 100%;
      }
      
      .up-section p {
            display: none;
      }
      
      .up-section:hover {
            border: 1px dashed #f15134;
      }
      
      .up-section:hover .close-upimg {
            display: block;
      }
      
      .up-section:hover .up-span {
            visibility: visible;
      }
      /*加载中*/
      
      .loading {
            border: 1px solid #D1D1D1;
            /*background:url(../../smart/img/image-imageUpload/loading.gif) no-repeat center;*/
      }
      /*弹出框*/
      
      .mask {
            z-index: 1000;
            display: none;
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4);
      }
      
      .mask .mask-content {
            width: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -80px;
            background: white;
            height: 160px;
            text-align: center;
      }
      
      .mask .mask-content .del-p {
            color: #555;
            height: 94px;
            line-height: 94px;
            font-size: 18px;
            border-bottom: 1px solid #D1D1D1;
      }
      
      .mask-content .check-p {
            height: 66px;
            line-height: 66px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 100%;
      }
      
      .mask-content .check-p span {
            width: 49%;
            display: inline-block;
            text-align: center;
            color: #d4361d;
            font-size: 18px;
      }
      
      .check-p .del-com {
            border-right: 1px solid #D1D1D1;
      }
      
      input[type=label] {
            border: 0;
            font-weight: bold;
      }
      
      .form-input.inputStyle1 {
            color: #fff;
            background: rgba(45, 45, 45, .15);
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, .15);
            box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%) inset;
            text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
      }
      
      .form-input.inputStyle1:focus {
            color: #fff;
            border-color: rgba(255, 255, 255, .15);
            -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset, 0 2px 7px 0 rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%) inset, 0 2px 7px 0 rgb(0 0 0 / 20%);
            box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%) inset, 0 2px 7px 0 rgb(0 0 0 / 20%);
      }
      /**
* *****************************************************************************
*  c.表格 table 
* *****************************************************************************
*/
      /*.table*/
      
      .table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1rem;
            color: var(--gray-dark2);
      }
      
      .table th,
      .table td {
            padding: 0.55rem;
            vertical-align: middle;
      }
      
      .table thead th {
            vertical-align: middle;
            border-bottom: 2px solid #f4f4f4;
      }
      
      .table tbody+tbody {
            border-top: 2px solid var(--gray-light3);
      }
      /*.table-sm*/
      
      .table-sm th,
      .table-sm td {
            padding: 0.25rem;
            font-size: 0.9rem;
      }
      /*.table-bordered*/
      
      .table-bordered {
            border: 1px solid #f4f4f4;
      }
      
      .table-bordered th,
      .table-bordered td {
            border: 1px solid #f4f4f4;
      }
      
      .table-bordered thead th,
      .table-bordered thead td {
            border-bottom-width: 2px;
      }
      /*.table-borderless*/
      
      .table-borderless th,
      .table-borderless td,
      .table-borderless thead th,
      .table-borderless tbody+tbody {
            border: 0;
      }
      /*.table-striped*/
      
      .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.05);
      }
      /*.table-hover*/
      
      .table-hover tbody tr:hover {
            color: var(--gray-dark2);
            background-color: rgba(0, 0, 0, 0.075);
      }
      /*.table-primary*/
      
      .table-primary,
      .table-primary>th,
      .table-primary>td {
            background-color: #b8daff;
      }
      
      .table-primary th,
      .table-primary td,
      .table-primary thead th,
      .table-primary tbody+tbody {
            border-color: #7abaff;
      }
      
      .table-hover .table-primary:hover {
            background-color: #9fcdff;
      }
      
      .table-hover .table-primary:hover>td,
      .table-hover .table-primary:hover>th {
            background-color: #9fcdff;
      }
      /*.table-secondary*/
      
      .table-secondary,
      .table-secondary>th,
      .table-secondary>td {
            background-color: #d6d8db;
      }
      
      .table-secondary th,
      .table-secondary td,
      .table-secondary thead th,
      .table-secondary tbody+tbody {
            border-color: #b3b7bb;
      }
      
      .table-hover .table-secondary:hover {
            background-color: #c8cbcf;
      }
      
      .table-hover .table-secondary:hover>td,
      .table-hover .table-secondary:hover>th {
            background-color: #c8cbcf;
      }
      /*.table-success*/
      
      .table-success,
      .table-success>th,
      .table-success>td {
            background-color: #c3e6cb;
      }
      
      .table-success th,
      .table-success td,
      .table-success thead th,
      .table-success tbody+tbody {
            border-color: #8fd19e;
      }
      
      .table-hover .table-success:hover {
            background-color: #b1dfbb;
      }
      
      .table-hover .table-success:hover>td,
      .table-hover .table-success:hover>th {
            background-color: #b1dfbb;
      }
      /*.table-info*/
      
      .table-info,
      .table-info>th,
      .table-info>td {
            background-color: #bee5eb;
      }
      
      .table-info th,
      .table-info td,
      .table-info thead th,
      .table-info tbody+tbody {
            border-color: #86cfda;
      }
      
      .table-hover .table-info:hover {
            background-color: #abdde5;
      }
      
      .table-hover .table-info:hover>td,
      .table-hover .table-info:hover>th {
            background-color: #abdde5;
      }
      /*.table-warning*/
      
      .table-warning,
      .table-warning>th,
      .table-warning>td {
            background-color: #ffeeba;
      }
      
      .table-warning th,
      .table-warning td,
      .table-warning thead th,
      .table-warning tbody+tbody {
            border-color: #ffdf7e;
      }
      
      .table-hover .table-warning:hover {
            background-color: #ffe8a1;
      }
      
      .table-hover .table-warning:hover>td,
      .table-hover .table-warning:hover>th {
            background-color: #ffe8a1;
      }
      /*.table-danger*/
      
      .table-danger,
      .table-danger>th,
      .table-danger>td {
            background-color: #f5c6cb;
      }
      
      .table-danger th,
      .table-danger td,
      .table-danger thead th,
      .table-danger tbody+tbody {
            border-color: #ed969e;
      }
      
      .table-hover .table-danger:hover {
            background-color: #f1b0b7;
      }
      
      .table-hover .table-danger:hover>td,
      .table-hover .table-danger:hover>th {
            background-color: #f1b0b7;
      }
      /*.table-light*/
      
      .table-light thead {
            background-color: var(--light);
      }
      /*.table-light,
      .table-light>th,
      .table-light>td {
         background-color: #fdfdfe;
      }

      .table-light th,
      .table-light td,
      .table-light thead th,
      .table-light tbody+tbody {
         border-color: #fbfcfc;
      }*/
      
      .table-hover .table-light:hover {
            background-color: #ececf6;
      }
      
      .table-hover .table-light:hover>td,
      .table-hover .table-light:hover>th {
            background-color: #ececf6;
      }
      /*.table-dark*/
      
      .table-dark,
      .table-dark>th,
      .table-dark>td {
            background-color: #c6c8ca;
      }
      
      .table-dark th,
      .table-dark td,
      .table-dark thead th,
      .table-dark tbody+tbody {
            border-color: #95999c;
      }
      
      .table-hover .table-dark:hover {
            background-color: #b9bbbe;
      }
      
      .table-hover .table-dark:hover>td,
      .table-hover .table-dark:hover>th {
            background-color: #b9bbbe;
      }
      /*.table-active*/
      
      .table-active,
      .table-active>th,
      .table-active>td {
            background-color: rgba(0, 0, 0, 0.075);
      }
      
      .table-hover .table-active:hover {
            background-color: rgba(0, 0, 0, 0.075);
      }
      
      .table-hover .table-active:hover>td,
      .table-hover .table-active:hover>th {
            background-color: rgba(0, 0, 0, 0.075);
      }
      /*.thead-dark*/
      
      .table .thead-dark th {
            color: var(--white);
            background-color: var(--dark);
            border-color: #454d55;
      }
      /*.thead-light*/
      
      .table .thead-light th {
            color: #495057;
            background-color: #e9ecef;
            border-color: var(--gray-light3);
      }
      /*.table-dark*/
      
      .table-dark {
            color: var(--white);
            background-color: var(--dark);
      }
      
      .table-dark th,
      .table-dark td,
      .table-dark thead th {
            border-color: #454d55;
      }
      
      .table-dark.table-bordered {
            border: 0;
      }
      
      .table-dark.table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(255, 255, 255, 0.05);
      }
      
      .table-dark.table-hover tbody tr:hover {
            color: var(--white);
            background-color: rgba(255, 255, 255, 0.075);
      }
      /*.table-responsive(-sm-md-lg-xl)*/
      
      @media (max-width: 575.98px) {
            .table-responsive-sm {
               display: block;
               width: 100%;
               overflow-x: auto;
               -webkit-overflow-scrolling: touch;
            }
            .table-responsive-sm>.table-bordered {
               border: 0;
            }
      }
      
      @media (max-width: 767.98px) {
            .table-responsive-md {
               display: block;
               width: 100%;
               overflow-x: auto;
               -webkit-overflow-scrolling: touch;
            }
            .table-responsive-md>.table-bordered {
               border: 0;
            }
      }
      
      @media (max-width: 991.98px) {
            .table-responsive-lg {
               display: block;
               width: 100%;
               overflow-x: auto;
               -webkit-overflow-scrolling: touch;
            }
            .table-responsive-lg>.table-bordered {
               border: 0;
            }
      }
      
      @media (max-width: 1199.98px) {
            .table-responsive-xl {
               display: block;
               width: 100%;
               overflow-x: auto;
               -webkit-overflow-scrolling: touch;
            }
            .table-responsive-xl>.table-bordered {
               border: 0;
            }
      }
      
      .table-responsive {
            display: block;
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
      }
      
      .table-responsive>.table-bordered {
            border: 0;
      }
      /*.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
      border: 1px solid #f4f4f4;
   }*/
      /*dataTables*/
      /*显示条数控制下拉框*/
      
      div.dataTables_wrapper div.dataTables_length {
            width: 50%;
            float: left;
            margin-bottom: 5px;
      }
      
      div.dataTables_wrapper div.dataTables_length label {
            font-weight: normal;
            text-align: left;
            white-space: nowrap;
            color: var(--gray-light);
      }
      
      div.dataTables_wrapper div.dataTables_length select {
            width: 75px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding: 1px 2%;
            border-color: var(--gray-light2);
      }
      
      div.dataTables_wrapper div.dataTables_length select:focus {
            border-color: #40a9ff;
            background: rgba(255, 255, 255, 0.9);
            outline: 0;
      }
      
      div.dataTables_wrapper div.dataTables_length select:expand {
            display: block;
      }
      /*搜索框*/
      
      div.dataTables_wrapper div.dataTables_filter {
            width: 50%;
            float: right;
            margin-bottom: 5px;
      }
      
      div.dataTables_wrapper div.dataTables_filter label {
            font-size: 1rem;
            position: relative;
      }
      
      div.dataTables_wrapper div.dataTables_filter input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /*border: 1px solid var(--gray-light2);*/
            border: 0;
            background-color: var(--light);
            border-radius: 5px;
            box-shadow: none;
            height: 30px;
            line-height: 1.5;
            padding: 5px 10px 5px 30px;
            /*font-size: 12px;*/
            color: #555;
            /*background-color: var(--white);*/
            background-image: none;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            /*width:120px;      */
            max-width: 100%;
            margin-left: 0;
      }
      /*搜索图标*/
      
      div.dataTables_wrapper div.dataTables_filter label:after {
            font-family: "FontAwesome"!important;
            content: '\f002';
            position: absolute;
            left: 10px;
            width: 20px;
            line-height: 30px;
            text-align: left;
            color: var(--gray-light2);
      }
      
      div.dataTables_wrapper div.dataTables_filter input:focus {
            border-color: #40a9ff;
            /*background:rgba(255,255,255,0.9);*/
            /*background:#dae0e5;*/
            outline: 0;
      }
      /*.dataTables_wrapper,.dataTables_scroll{
            height:100% !important;
         }*/
      /*.dataTables_scrollHead,.dataTables_scrollBody,.dataTables_scrollHeadInner,.dataTables_scrollBodyInner
         ,.dataTables_scrollHead table,.dataTables_scrollBody table {
            width:100% !important;
         }*/
      
      .dataTables_scrollHead table,
      .dataTables_scrollBody table {
            width: 100% !important;
      }
      
      /* 滚动条整体样式 */
      .dataTables_scrollBody::-webkit-scrollbar {
            width: 8px; /* 垂直滚动条宽度 */
            height: 8px; /* 水平滚动条高度 */
      }
      /* 滚动条滑块 */
      .dataTables_scrollBody::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 4px;
            border: 2px solid rgba(0, 0, 0, 0);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
      }
      /* 滚动条滑块悬停状态 */
      .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
      }
      /*翻页器*/
      
      div.dataTables_wrapper div.dataTables_paginate {
            overflow: hidden;
            padding-left: 0;
            margin: 10px 0;
            border-radius: 4px;
      }
      
      .dataTables_paginate a,
      .dataTables_paginate>span {
            display: inline;
      }
      
      .dataTables_paginate>a:first-child {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
      }
      
      .dataTables_paginate>a:last-child {
            margin-left: 0;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
      }
      
      .dataTables_paginate a.disabled,
      .dataTables_paginate a.disabled:focus,
      .dataTables_paginate a.disabled:hover {
            color: #777;
            cursor: not-allowed;
            background-color: var(--white);
            border-color: #ddd;
      }
      
      .dataTables_paginate a {
            background: #fafafa;
      }
      
      .dataTables_paginate a {
            position: relative;
            float: left;
            padding: 6px 12px;
            line-height: 1.42857143;
            text-decoration: none;
            border: 1px solid #ddd;
      }
      
      .dataTables_paginate a.current,
      .dataTables_paginate a.current:focus,
      .dataTables_paginate a.current:hover {
            z-index: 3;
            color: var(--white);
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7;
      }
      
      .dataTables_paginate a:focus,
      .dataTables_paginate a:hover {
            outline: 0;
            cursor: pointer;
      }
      /*标题*/
      
      .dataTables_title {
            float: left;
            font-size: 18px;
            font-weight: 700;
      }
      /*有固定列数时设定背景颜色*/
      /*.DTFC_ScrollWrapper .table-striped tbody tr,.DTFC_ScrollWrapper .table-striped thead {
            background-color: var(--white);
         }
         .DTFC_ScrollWrapper .table-striped tbody tr:nth-of-type(odd) {
            background-color: #F9F9F9;
         }*/
      /*有固定列数时偏移调整*/
      /*.DTFC_ScrollWrapper ,.DTFC_LeftWrapper,.DTFC_RightWrapper{
            height:100% !important;
         }*/
      
      .DTFC_LeftHeadWrapper table,
      .DTFC_RightHeadWrapper table {
            margin-bottom: 0 !important;
            border-bottom: 0 !important;
      }
      
      .DTFC_LeftBodyWrapper table,
      .DTFC_RightBodyWrapper table {
            margin: 0 !important;
            border-top: 0 !important;
      }
      /*轮播表单式样*/
      
      .scroll-box {
            width: 100%;
            overflow: hidden;
            position: relative;
      }
      
      .tab-scroll {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 1s;
            border-top: none;
      }
      /*.tab-scroll td{border-top: none;}*/
      /**
* *****************************************************************************
*  d.按钮 btn 
* *****************************************************************************
*/
      /*.btn*/
      
      .btn {
            display: inline-block;
            font-weight: 400;
            color: var(--gray-dark2);
            text-align: center;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-color: transparent;
            border: 1px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            line-height: 1.5;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            /*border: 0;*/
            /*outline: none;*/
      }
      
      @media (prefers-reduced-motion: reduce) {
            .btn {
               transition: none;
            }
      }
      
      .btn:hover {
            color: var(--gray-dark2);
            text-decoration: none;
      }
      
      .btn:focus,
      .btn.focus {
            outline: 0;
            /*box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);*/
      }
      
      .btn.disabled,
      .btn:disabled {
            opacity: 0.65;
      }
      
      .btn:not(:disabled):not(.disabled) {
            cursor: pointer;
      }
      
      a.btn.disabled,
      fieldset:disabled a.btn {
            pointer-events: none;
      }
      /*.btn-primary*/
      
      .btn-primary {
            color: var(--white);
            background-color: var(--primary);
            border-color: var(--primary);
      }
      
      .btn-primary:hover {
            color: var(--white);
            background-color: #0069d9;
            border-color: #0062cc;
      }
      
      .btn-primary:focus,
      .btn-primary.focus {
            color: var(--white);
            background-color: #0069d9;
            border-color: #0062cc;
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
      }
      
      .btn-primary.disabled,
      .btn-primary:disabled {
            color: var(--white);
            background-color: var(--primary);
            border-color: var(--primary);
      }
      
      .btn-primary:not(:disabled):not(.disabled):active,
      .btn-primary:not(:disabled):not(.disabled).active,
      .show>.btn-primary.dropdown-toggle {
            color: var(--white);
            background-color: #0062cc;
            border-color: #005cbf;
      }
      
      .btn-primary:not(:disabled):not(.disabled):active:focus,
      .btn-primary:not(:disabled):not(.disabled).active:focus,
      .show>.btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
      }
      /*.btn-secondary*/
      
      .btn-secondary {
            color: var(--white);
            background-color: var(--secondary);
            border-color: var(--secondary);
      }
      
      .btn-secondary:hover {
            color: var(--white);
            background-color: #5a6268;
            border-color: #545b62;
      }
      
      .btn-secondary:focus,
      .btn-secondary.focus {
            color: var(--white);
            background-color: #5a6268;
            border-color: #545b62;
            box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
      }
      
      .btn-secondary.disabled,
      .btn-secondary:disabled {
            color: var(--white);
            background-color: var(--secondary);
            border-color: var(--secondary);
      }
      
      .btn-secondary:not(:disabled):not(.disabled):active,
      .btn-secondary:not(:disabled):not(.disabled).active,
      .show>.btn-secondary.dropdown-toggle {
            color: var(--white);
            background-color: #545b62;
            border-color: #4e555b;
      }
      
      .btn-secondary:not(:disabled):not(.disabled):active:focus,
      .btn-secondary:not(:disabled):not(.disabled).active:focus,
      .show>.btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
      }
      /*.btn-success*/
      
      .btn-success {
            color: var(--white);
            background-color: var(--success);
            border-color: var(--success);
      }
      
      .btn-success:hover {
            color: var(--white);
            background-color: #218838;
            border-color: #1e7e34;
      }
      
      .btn-success:focus,
      .btn-success.focus {
            color: var(--white);
            background-color: #218838;
            border-color: #1e7e34;
            box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
      }
      
      .btn-success.disabled,
      .btn-success:disabled {
            color: var(--white);
            background-color: var(--success);
            border-color: var(--success);
      }
      
      .btn-success:not(:disabled):not(.disabled):active,
      .btn-success:not(:disabled):not(.disabled).active,
      .show>.btn-success.dropdown-toggle {
            color: var(--white);
            background-color: #1e7e34;
            border-color: #1c7430;
      }
      
      .btn-success:not(:disabled):not(.disabled):active:focus,
      .btn-success:not(:disabled):not(.disabled).active:focus,
      .show>.btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
      }
      /*.btn-info*/
      
      .btn-info {
            color: var(--white);
            background-color: var(--info);
            border-color: var(--info);
      }
      
      .btn-info:hover {
            color: var(--white);
            background-color: #138496;
            border-color: #117a8b;
      }
      
      .btn-info:focus,
      .btn-info.focus {
            color: var(--white);
            background-color: #138496;
            border-color: #117a8b;
            box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
      }
      
      .btn-info.disabled,
      .btn-info:disabled {
            color: var(--white);
            background-color: var(--info);
            border-color: var(--info);
      }
      
      .btn-info:not(:disabled):not(.disabled):active,
      .btn-info:not(:disabled):not(.disabled).active,
      .show>.btn-info.dropdown-toggle {
            color: var(--white);
            background-color: #117a8b;
            border-color: #10707f;
      }
      
      .btn-info:not(:disabled):not(.disabled):active:focus,
      .btn-info:not(:disabled):not(.disabled).active:focus,
      .show>.btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
      }
      /*.btn-warning*/
      
      .btn-warning {
            color: var(--gray-dark2);
            background-color: var(--warning);
            border-color: var(--warning);
      }
      
      .btn-warning:hover {
            color: var(--gray-dark2);
            background-color: #e0a800;
            border-color: #d39e00;
      }
      
      .btn-warning:focus,
      .btn-warning.focus {
            color: var(--gray-dark2);
            background-color: #e0a800;
            border-color: #d39e00;
            box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
      }
      
      .btn-warning.disabled,
      .btn-warning:disabled {
            color: var(--gray-dark2);
            background-color: var(--warning);
            border-color: var(--warning);
      }
      
      .btn-warning:not(:disabled):not(.disabled):active,
      .btn-warning:not(:disabled):not(.disabled).active,
      .show>.btn-warning.dropdown-toggle {
            color: var(--gray-dark2);
            background-color: #d39e00;
            border-color: #c69500;
      }
      
      .btn-warning:not(:disabled):not(.disabled):active:focus,
      .btn-warning:not(:disabled):not(.disabled).active:focus,
      .show>.btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
      }
      /*.btn-danger*/
      
      .btn-danger {
            color: var(--white);
            background-color: var(--danger);
            border-color: var(--danger);
      }
      
      .btn-danger:hover {
            color: var(--white);
            background-color: #c82333;
            border-color: #bd2130;
      }
      
      .btn-danger:focus,
      .btn-danger.focus {
            color: var(--white);
            background-color: #c82333;
            border-color: #bd2130;
            box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
      }
      
      .btn-danger.disabled,
      .btn-danger:disabled {
            color: var(--white);
            background-color: var(--danger);
            border-color: var(--danger);
      }
      
      .btn-danger:not(:disabled):not(.disabled):active,
      .btn-danger:not(:disabled):not(.disabled).active,
      .show>.btn-danger.dropdown-toggle {
            color: var(--white);
            background-color: #bd2130;
            border-color: #b21f2d;
      }
      
      .btn-danger:not(:disabled):not(.disabled):active:focus,
      .btn-danger:not(:disabled):not(.disabled).active:focus,
      .show>.btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
      }
      /*.btn-light*/
      
      .btn-light {
            color: var(--gray-dark2);
            background-color: var(--light);
            border-color: var(--light);
      }
      
      .btn-light:hover {
            color: var(--gray-dark2);
            background-color: #e2e6ea;
            border-color: #dae0e5;
      }
      
      .btn-light:focus,
      .btn-light.focus {
            color: var(--gray-dark2);
            background-color: #e2e6ea;
            border-color: #dae0e5;
            box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
      }
      
      .btn-light.disabled,
      .btn-light:disabled {
            color: var(--gray-dark2);
            background-color: var(--light);
            border-color: var(--light);
      }
      
      .btn-light:not(:disabled):not(.disabled):active,
      .btn-light:not(:disabled):not(.disabled).active,
      .show>.btn-light.dropdown-toggle {
            color: var(--gray-dark2);
            background-color: #dae0e5;
            border-color: #d3d9df;
      }
      
      .btn-light:not(:disabled):not(.disabled):active:focus,
      .btn-light:not(:disabled):not(.disabled).active:focus,
      .show>.btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, 0.5);
      }
      /*.btn-dark*/
      
      .btn-dark {
            color: var(--white);
            background-color: var(--dark);
            border-color: var(--dark);
      }
      
      .btn-dark:hover {
            color: var(--white);
            background-color: #23272b;
            border-color: #1d2124;
      }
      
      .btn-dark:focus,
      .btn-dark.focus {
            color: var(--white);
            background-color: #23272b;
            border-color: #1d2124;
            box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
      }
      
      .btn-dark.disabled,
      .btn-dark:disabled {
            color: var(--white);
            background-color: var(--dark);
            border-color: var(--dark);
      }
      
      .btn-dark:not(:disabled):not(.disabled):active,
      .btn-dark:not(:disabled):not(.disabled).active,
      .show>.btn-dark.dropdown-toggle {
            color: var(--white);
            background-color: #1d2124;
            border-color: #171a1d;
      }
      
      .btn-dark:not(:disabled):not(.disabled):active:focus,
      .btn-dark:not(:disabled):not(.disabled).active:focus,
      .show>.btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.5);
      }
      /*.btn-outline-primary*/
      
      .btn-outline-primary {
            color: var(--primary);
            border-color: var(--primary);
      }
      
      .btn-outline-primary:hover {
            color: var(--white);
            background-color: var(--primary);
            border-color: var(--primary);
      }
      
      .btn-outline-primary:focus,
      .btn-outline-primary.focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
      }
      
      .btn-outline-primary.disabled,
      .btn-outline-primary:disabled {
            color: var(--primary);
            background-color: transparent;
      }
      
      .btn-outline-primary:not(:disabled):not(.disabled):active,
      .btn-outline-primary:not(:disabled):not(.disabled).active,
      .show>.btn-outline-primary.dropdown-toggle {
            color: var(--white);
            background-color: var(--primary);
            border-color: var(--primary);
      }
      
      .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
      .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
      }
      /*.btn-outline-secondary*/
      
      .btn-outline-secondary {
            color: var(--secondary);
            border-color: var(--secondary);
      }
      
      .btn-outline-secondary:hover {
            color: var(--white);
            background-color: var(--secondary);
            border-color: var(--secondary);
      }
      
      .btn-outline-secondary:focus,
      .btn-outline-secondary.focus {
            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
      }
      
      .btn-outline-secondary.disabled,
      .btn-outline-secondary:disabled {
            color: var(--secondary);
            background-color: transparent;
      }
      
      .btn-outline-secondary:not(:disabled):not(.disabled):active,
      .btn-outline-secondary:not(:disabled):not(.disabled).active,
      .show>.btn-outline-secondary.dropdown-toggle {
            color: var(--white);
            background-color: var(--secondary);
            border-color: var(--secondary);
      }
      
      .btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
      .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
      }
      /*.btn-outline-success*/
      
      .btn-outline-success {
            color: var(--success);
            border-color: var(--success);
      }
      
      .btn-outline-success:hover {
            color: var(--white);
            background-color: var(--success);
            border-color: var(--success);
      }
      
      .btn-outline-success:focus,
      .btn-outline-success.focus {
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      
      .btn-outline-success.disabled,
      .btn-outline-success:disabled {
            color: var(--success);
            background-color: transparent;
      }
      
      .btn-outline-success:not(:disabled):not(.disabled):active,
      .btn-outline-success:not(:disabled):not(.disabled).active,
      .show>.btn-outline-success.dropdown-toggle {
            color: var(--white);
            background-color: var(--success);
            border-color: var(--success);
      }
      
      .btn-outline-success:not(:disabled):not(.disabled):active:focus,
      .btn-outline-success:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      /*.btn-outline-info*/
      
      .btn-outline-info {
            color: var(--info);
            border-color: var(--info);
      }
      
      .btn-outline-info:hover {
            color: var(--white);
            background-color: var(--info);
            border-color: var(--info);
      }
      
      .btn-outline-info:focus,
      .btn-outline-info.focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
      }
      
      .btn-outline-info.disabled,
      .btn-outline-info:disabled {
            color: var(--info);
            background-color: transparent;
      }
      
      .btn-outline-info:not(:disabled):not(.disabled):active,
      .btn-outline-info:not(:disabled):not(.disabled).active,
      .show>.btn-outline-info.dropdown-toggle {
            color: var(--white);
            background-color: var(--info);
            border-color: var(--info);
      }
      
      .btn-outline-info:not(:disabled):not(.disabled):active:focus,
      .btn-outline-info:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
      }
      /*.btn-outline-warning*/
      
      .btn-outline-warning {
            color: var(--warning);
            border-color: var(--warning);
      }
      
      .btn-outline-warning:hover {
            color: var(--gray-dark2);
            background-color: var(--warning);
            border-color: var(--warning);
      }
      
      .btn-outline-warning:focus,
      .btn-outline-warning.focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
      }
      
      .btn-outline-warning.disabled,
      .btn-outline-warning:disabled {
            color: var(--warning);
            background-color: transparent;
      }
      
      .btn-outline-warning:not(:disabled):not(.disabled):active,
      .btn-outline-warning:not(:disabled):not(.disabled).active,
      .show>.btn-outline-warning.dropdown-toggle {
            color: var(--gray-dark2);
            background-color: var(--warning);
            border-color: var(--warning);
      }
      
      .btn-outline-warning:not(:disabled):not(.disabled):active:focus,
      .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
      }
      /*.btn-outline-danger*/
      
      .btn-outline-danger {
            color: var(--danger);
            border-color: var(--danger);
      }
      
      .btn-outline-danger:hover {
            color: var(--white);
            background-color: var(--danger);
            border-color: var(--danger);
      }
      
      .btn-outline-danger:focus,
      .btn-outline-danger.focus {
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
      }
      
      .btn-outline-danger.disabled,
      .btn-outline-danger:disabled {
            color: var(--danger);
            background-color: transparent;
      }
      
      .btn-outline-danger:not(:disabled):not(.disabled):active,
      .btn-outline-danger:not(:disabled):not(.disabled).active,
      .show>.btn-outline-danger.dropdown-toggle {
            color: var(--white);
            background-color: var(--danger);
            border-color: var(--danger);
      }
      
      .btn-outline-danger:not(:disabled):not(.disabled):active:focus,
      .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
      }
      /*.btn-outline-light*/
      
      .btn-outline-light {
            color: var(--light);
            border-color: var(--light);
      }
      
      .btn-outline-light:hover {
            color: var(--gray-dark2);
            background-color: var(--light);
            border-color: var(--light);
      }
      
      .btn-outline-light:focus,
      .btn-outline-light.focus {
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
      }
      
      .btn-outline-light.disabled,
      .btn-outline-light:disabled {
            color: var(--light);
            background-color: transparent;
      }
      
      .btn-outline-light:not(:disabled):not(.disabled):active,
      .btn-outline-light:not(:disabled):not(.disabled).active,
      .show>.btn-outline-light.dropdown-toggle {
            color: var(--gray-dark2);
            background-color: var(--light);
            border-color: var(--light);
      }
      
      .btn-outline-light:not(:disabled):not(.disabled):active:focus,
      .btn-outline-light:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
      }
      /*.btn-outline-dark*/
      
      .btn-outline-dark {
            color: var(--dark);
            border-color: var(--dark);
      }
      
      .btn-outline-dark:hover {
            color: var(--white);
            background-color: var(--dark);
            border-color: var(--dark);
      }
      
      .btn-outline-dark:focus,
      .btn-outline-dark.focus {
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
      }
      
      .btn-outline-dark.disabled,
      .btn-outline-dark:disabled {
            color: var(--dark);
            background-color: transparent;
      }
      
      .btn-outline-dark:not(:disabled):not(.disabled):active,
      .btn-outline-dark:not(:disabled):not(.disabled).active,
      .show>.btn-outline-dark.dropdown-toggle {
            color: var(--white);
            background-color: var(--dark);
            border-color: var(--dark);
      }
      
      .btn-outline-dark:not(:disabled):not(.disabled):active:focus,
      .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
      .show>.btn-outline-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
      }
      /*.btn-link*/
      
      .btn-link {
            font-weight: 400;
            color: var(--primary);
            text-decoration: none;
      }
      
      .btn-link:hover {
            color: #0056b3;
            text-decoration: underline;
      }
      
      .btn-link:focus,
      .btn-link.focus {
            text-decoration: underline;
      }
      
      .btn-link:disabled,
      .btn-link.disabled {
            color: var(--secondary);
            pointer-events: none;
      }
      /*.btn-lg*/
      
      .btn-lg,
      .btn-group-lg>.btn {
            padding: 0.5rem 1rem;
            font-size: 1.25rem;
            line-height: 1.5;
            border-radius: 0.3rem;
      }
      /*.btn-sm*/
      
      .btn-sm,
      .btn-group-sm>.btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            line-height: 1.5;
            border-radius: 0.2rem;
      }
      /*.btn-block*/
      
      .btn-block {
            display: block;
            width: 100%;
      }
      
      .btn-block+.btn-block {
            margin-top: 0.5rem;
      }
      
      input[type="submit"].btn-block,
      input[type="reset"].btn-block,
      input[type="button"].btn-block {
            width: 100%;
      }
      /**
* *****************************************************************************
*  e.徽章 badge  pill primary/secondary/success/info/warning/danger/light/dark
* *****************************************************************************
*/
      
      .badge {
            display: inline-block;
            padding: 0.25em 0.4em;
            font-size: 75%;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.25rem;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      }
      
      @media (prefers-reduced-motion: reduce) {
            .badge {
               transition: none;
            }
      }
      
      a.badge:hover,
      a.badge:focus {
            text-decoration: none;
      }
      
      .badge:empty {
            display: none;
      }
      
      .btn .badge {
            position: relative;
            top: -1px;
      }
      
      .badge-pill {
            padding-right: 0.6em;
            padding-left: 0.6em;
            border-radius: 10rem;
      }
      /*badge-primary*/
      
      .badge-primary {
            color: var(--white);
            background-color: var(--primary);
      }
      
      a.badge-primary:hover,
      a.badge-primary:focus {
            color: var(--white);
            background-color: #0062cc;
      }
      
      a.badge-primary:focus,
      a.badge-primary.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
      }
      /*badge-secondary*/
      
      .badge-secondary {
            color: var(--white);
            background-color: var(--secondary);
      }
      
      a.badge-secondary:hover,
      a.badge-secondary:focus {
            color: var(--white);
            background-color: #545b62;
      }
      
      a.badge-secondary:focus,
      a.badge-secondary.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
      }
      /*badge-success*/
      
      .badge-success {
            color: var(--white);
            background-color: var(--success);
      }
      
      a.badge-success:hover,
      a.badge-success:focus {
            color: var(--white);
            background-color: #1e7e34;
      }
      
      a.badge-success:focus,
      a.badge-success.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
      }
      /*badge-info*/
      
      .badge-info {
            color: var(--white);
            background-color: var(--info);
      }
      
      a.badge-info:hover,
      a.badge-info:focus {
            color: var(--white);
            background-color: #117a8b;
      }
      
      a.badge-info:focus,
      a.badge-info.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
      }
      /*badge-warning*/
      
      .badge-warning {
            color: var(--gray-dark3);
            background-color: var(--warning);
      }
      
      a.badge-warning:hover,
      a.badge-warning:focus {
            color: var(--gray-dark3);
            background-color: #d39e00;
      }
      
      a.badge-warning:focus,
      a.badge-warning.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
      }
      /*badge-danger*/
      
      .badge-danger {
            color: var(--white);
            background-color: var(--danger);
      }
      
      a.badge-danger:hover,
      a.badge-danger:focus {
            color: var(--white);
            background-color: #bd2130;
      }
      
      a.badge-danger:focus,
      a.badge-danger.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
      }
      /*badge-light*/
      
      .badge-light {
            color: var(--gray-dark3);
            background-color: var(--light);
      }
      
      a.badge-light:hover,
      a.badge-light:focus {
            color: var(--gray-dark3);
            background-color: #dae0e5;
      }
      
      a.badge-light:focus,
      a.badge-light.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 250, 0.5);
      }
      /*badge-dark*/
      
      .badge-dark {
            color: var(--white);
            background-color: var(--dark);
      }
      
      a.badge-dark:hover,
      a.badge-dark:focus {
            color: var(--white);
            background-color: #1d2124;
      }
      
      a.badge-dark:focus,
      a.badge-dark.focus {
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.5);
      }
      /**
* *****************************************************************************
*  f.收缩卡片 card
* *****************************************************************************
*/
      
      .card {
            box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
            margin-bottom: 1rem;
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            background-color: var(--white);
            background-clip: border-box;
            border: 0 solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            border-top: 3px solid var(--gray-light2);
      }
      
      .card-header {
            background-color: transparent;
            border-bottom: 1px solid rgba(0, 0, 0, .125);
            padding: .75rem 1.25rem;
            position: relative;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            margin-bottom: 0;
      }
      
      .card-title {
            float: left;
            font-size: 1.1rem;
            font-weight: 400;
            margin: 0;
      }
      
      .card-header>.card-tools {
            float: right;
            margin-right: -.625rem;
      }
      
      .card-body::after,
      .card-footer::after,
      .card-header::after {
            display: block;
            clear: both;
            content: "";
      }
      
      .card-body {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 1.25rem;
      }
      
      .btn-tool {
            background: 0 0;
            font-size: .875rem;
            margin: -.75rem 0;
            padding: .25rem .5rem;
      }
      
      .card-footer:last-child {
            border-radius: 0 0 calc(.25rem - 0) calc(.25rem - 0);
      }
      
      .card-footer {
            padding: .75rem 1.25rem;
            background-color: rgba(0, 0, 0, .03);
            border-top: 0 solid rgba(0, 0, 0, .125);
      }
      /*独自*/
      
      .card-header {
            padding: .75rem 0.25rem;
            font-size: 1.1rem;
            font-weight: 600;
            color: #c9c9c9 !important;
      }
      /**
* *****************************************************************************
*  g.盒子 box 
*  box box-primary/info/danger/warning/success/default collapsed-box height-control .box-solid no-header
*  box border-right border-left
*  with-border
*  
* *****************************************************************************
*/
      
      .box {
            position: relative;
            border-radius: 3px;
            background: var(--white);
            border-top: 3px solid var(--gray-light2);
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
      }
      
      .box.box-primary {
            border-top-color: var(--primary);
            /*#3c8dbc*/
      }
      
      .box.box-info {
            border-top-color: var(--info);
            /*#00c0ef*/
      }
      
      .box.box-danger {
            border-top-color: var(--danger);
            /*#dd4b39*/
      }
      
      .box.box-warning {
            border-top-color: var(--warning);
            /*#f39c12*/
      }
      
      .box.box-success {
            border-top-color: var(--success);
            /*#00a65a*/
      }
      
      .box.box-default {
            border-top-color: var(--gray-light2);
      }
      
      .box.collapsed-box .box-body,
      .box.collapsed-box .box-footer {
            display: none;
      }
      
      .box .nav-stacked>li {
            border-bottom: 1px solid #f4f4f4;
            margin: 0;
      }
      
      .box .nav-stacked>li:last-of-type {
            border-bottom: none;
      }
      
      .box.height-control .box-body {
            max-height: 300px;
            overflow: auto;
      }
      
      .box .border-right {
            border-right: 1px solid #f4f4f4;
      }
      
      .box .border-left {
            border-left: 1px solid #f4f4f4;
      }
      
      .box.box-solid {
            border-top: 0;
      }
      
      .box.box-solid>.box-header .btn.btn-default {
            background: transparent;
      }
      
      .box.box-solid>.box-header .btn:hover,
      .box.box-solid>.box-header a:hover {
            background: rgba(0, 0, 0, 0.1);
      }
      
      .box.box-solid.box-default {
            border: 1px solid var(--gray-light2);
      }
      
      .box.box-solid.box-default>.box-header {
            color: #444444;
            background: var(--gray-light2);
            background-color: var(--gray-light2);
      }
      
      .box.box-solid.box-default>.box-header a,
      .box.box-solid.box-default>.box-header .btn {
            color: #444444;
      }
      
      .box.box-solid.box-primary {
            border: 1px solid var(--primary);
      }
      
      .box.box-solid.box-primary>.box-header {
            color: var(--white);
            background: var(--primary);
            background-color: var(--primary);
      }
      
      .box.box-solid.box-primary>.box-header a,
      .box.box-solid.box-primary>.box-header .btn {
            color: var(--white);
      }
      
      .box.box-solid.box-info {
            border: 1px solid var(--info);
      }
      
      .box.box-solid.box-info>.box-header {
            color: var(--white);
            background: var(--info);
            background-color: var(--info);
      }
      
      .box.box-solid.box-info>.box-header a,
      .box.box-solid.box-info>.box-header .btn {
            color: var(--white);
      }
      
      .box.box-solid.box-danger {
            border: 1px solid var(--danger);
      }
      
      .box.box-solid.box-danger>.box-header {
            color: var(--white);
            background: var(--danger);
            background-color: var(--danger);
      }
      
      .box.box-solid.box-danger>.box-header a,
      .box.box-solid.box-danger>.box-header .btn {
            color: var(--white);
      }
      
      .box.box-solid.box-warning {
            border: 1px solid var(--warning);
      }
      
      .box.box-solid.box-warning>.box-header {
            color: var(--white);
            background: var(--warning);
            background-color: var(--warning);
      }
      
      .box.box-solid.box-warning>.box-header a,
      .box.box-solid.box-warning>.box-header .btn {
            color: var(--white);
      }
      
      .box.box-solid.box-success {
            border: 1px solid var(--success);
      }
      
      .box.box-solid.box-success>.box-header {
            color: var(--white);
            background: var(--success);
            background-color: var(--success);
      }
      
      .box.box-solid.box-success>.box-header a,
      .box.box-solid.box-success>.box-header .btn {
            color: var(--white);
      }
      
      .box.box-solid>.box-header>.box-tools .btn {
            border: 0;
            box-shadow: none;
      }
      
      .box.box-solid[class*='bg']>.box-header {
            color: var(--white);
      }
      
      .box .box-group>.box {
            margin-bottom: 5px;
      }
      
      .box .knob-label {
            text-align: center;
            color: #333;
            font-weight: 100;
            font-size: 12px;
            margin-bottom: 0.3em;
      }
      
      .box>.overlay,
      .overlay-wrapper>.overlay,
      .box>.loading-img,
      .overlay-wrapper>.loading-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
      }
      
      .box .overlay,
      .overlay-wrapper .overlay {
            z-index: 50;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 3px;
      }
      
      .box .overlay>.fa,
      .overlay-wrapper .overlay>.fa {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -15px;
            margin-top: -15px;
            color: var(--black);
            font-size: 30px;
      }
      
      .box .overlay.dark,
      .overlay-wrapper .overlay.dark {
            background: rgba(0, 0, 0, 0.5);
      }
      
      .box-header:before,
      .box-body:before,
      .box-footer:before,
      .box-header:after,
      .box-body:after,
      .box-footer:after {
            content: " ";
            display: table;
      }
      
      .box-header:after,
      .box-body:after,
      .box-footer:after {
            clear: both;
      }
      
      .box-header {
            color: #444;
            display: block;
            padding: 10px;
            position: relative;
      }
      
      .box-header.with-border {
            border-bottom: 1px solid #f4f4f4;
      }
      
      .collapsed-box .box-header.with-border {
            border-bottom: none;
      }
      
      .box-header>.fa,
      .box-header>.glyphicon,
      .box-header>.ion,
      .box-header .box-title {
            display: inline-block;
            font-size: 18px;
            margin: 0;
            line-height: 1;
      }
      
      .box-header>.fa,
      .box-header>.glyphicon,
      .box-header>.ion {
            margin-right: 5px;
      }
      
      .box-header>.box-tools {
            position: absolute;
            right: 10px;
            top: 5px;
      }
      
      .box-header>.box-tools [data-toggle="tooltip"] {
            position: relative;
      }
      
      .box-header>.box-tools.pull-right .dropdown-menu {
            right: 0;
            left: auto;
      }
      
      .btn-box-tool {
            padding: 5px;
            font-size: 12px;
            background: transparent;
            color: #97a0b3;
      }
      
      .open .btn-box-tool,
      .btn-box-tool:hover {
            color: #606c84;
      }
      
      .btn-box-tool.btn:active {
            box-shadow: none;
      }
      
      .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
      }
      
      .no-header .box-body {
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
      }
      
      .box-body>.table {
            margin-bottom: 0;
      }
      
      .box-body .fc {
            margin-top: 5px;
      }
      
      .box-body .full-width-chart {
            margin: -19px;
      }
      
      .box-body.no-padding .full-width-chart {
            margin: -9px;
      }
      
      .box-body .box-pane {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 3px;
      }
      
      .box-body .box-pane-right {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 0;
      }
      
      .box-footer {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            border-top: 1px solid #f4f4f4;
            padding: 10px;
            background-color: var(--white);
      }
      
      .chart-legend {
            margin: 10px 0;
      }
      
      @media (max-width: 991px) {
            .chart-legend>li {
               float: left;
               margin-right: 10px;
            }
      }
      
      .box-comments {
            background: #f7f7f7;
      }
      
      .box-comments .box-comment {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
      }
      
      .box-comments .box-comment:before,
      .box-comments .box-comment:after {
            content: " ";
            display: table;
      }
      
      .box-comments .box-comment:after {
            clear: both;
      }
      
      .box-comments .box-comment:last-of-type {
            border-bottom: 0;
      }
      
      .box-comments .box-comment:first-of-type {
            padding-top: 0;
      }
      
      .box-comments .box-comment img {
            float: left;
      }
      
      .box-comments .comment-text {
            margin-left: 40px;
            color: #555;
      }
      
      .box-comments .username {
            color: #444;
            display: block;
            font-weight: 600;
      }
      
      .box-comments .text-muted {
            font-weight: 400;
            font-size: 12px;
      }
      /**
* *****************************************************************************
*  h.信息框 info-box 
* *****************************************************************************
*/
      
      .info-box {
            /*box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);*/
            border-radius: 0.25rem;
            background: var(--white);
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 1rem;
            min-height: 80px;
            padding: .5rem;
            position: relative;
            width: 100%;
      }
      
      .info-box .progress {
            background-color: rgba(0, 0, 0, 0.125);
            height: 2px;
            margin: 5px 0;
      }
      
      .info-box .progress .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box-icon {
            border-radius: 0.25rem;
            -ms-flex-align: center;
            align-items: center;
            display: -ms-flexbox;
            display: flex;
            font-size: 1.875rem;
            -ms-flex-pack: center;
            justify-content: center;
            text-align: center;
            width: 70px;
      }
      
      .info-box .info-box-icon>img {
            max-width: 100%;
      }
      
      .info-box .info-box-content {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;
            line-height: 120%;
            -ms-flex: 1;
            flex: 1;
            padding: 0 10px;
      }
      
      .info-box .info-box-number {
            display: block;
            margin-top: .25rem;
            font-weight: 700;
      }
      
      .info-box .progress-description,
      .info-box .info-box-text {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
      }
      
      .info-box .info-box .bg-primary,
      .info-box .info-box .bg-gradient-primary {
            color: var(--white);
      }
      
      .info-box .info-box .bg-primary .progress-bar,
      .info-box .info-box .bg-gradient-primary .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box .bg-secondary,
      .info-box .info-box .bg-gradient-secondary {
            color: var(--white);
      }
      
      .info-box .info-box .bg-secondary .progress-bar,
      .info-box .info-box .bg-gradient-secondary .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box .bg-success,
      .info-box .info-box .bg-gradient-success {
            color: var(--white);
      }
      
      .info-box .info-box .bg-success .progress-bar,
      .info-box .info-box .bg-gradient-success .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box .bg-info,
      .info-box .info-box .bg-gradient-info {
            color: var(--white);
      }
      
      .info-box .info-box .bg-info .progress-bar,
      .info-box .info-box .bg-gradient-info .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box .bg-warning,
      .info-box .info-box .bg-gradient-warning {
            color: var(--gray-dark3);
      }
      
      .info-box .info-box .bg-warning .progress-bar,
      .info-box .info-box .bg-gradient-warning .progress-bar {
            background-color: var(--gray-dark3);
      }
      
      .info-box .info-box .bg-danger,
      .info-box .info-box .bg-gradient-danger {
            color: var(--white);
      }
      
      .info-box .info-box .bg-danger .progress-bar,
      .info-box .info-box .bg-gradient-danger .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box .bg-light,
      .info-box .info-box .bg-gradient-light {
            color: var(--gray-dark3);
      }
      
      .info-box .info-box .bg-light .progress-bar,
      .info-box .info-box .bg-gradient-light .progress-bar {
            background-color: var(--gray-dark3);
      }
      
      .info-box .info-box .bg-dark,
      .info-box .info-box .bg-gradient-dark {
            color: var(--white);
      }
      
      .info-box .info-box .bg-dark .progress-bar,
      .info-box .info-box .bg-gradient-dark .progress-bar {
            background-color: var(--white);
      }
      
      .info-box .info-box-more {
            display: block;
      }
      
      .info-box .progress-description {
            margin: 0;
      }
      
      @media (min-width: 768px) {
            .col-xl-2 .info-box .progress-description,
            .col-lg-2 .info-box .progress-description,
            .col-md-2 .info-box .progress-description {
               display: none;
            }
            .col-xl-3 .info-box .progress-description,
            .col-lg-3 .info-box .progress-description,
            .col-md-3 .info-box .progress-description {
               display: none;
            }
      }
      
      @media (min-width: 992px) {
            .col-xl-2 .info-box .progress-description,
            .col-lg-2 .info-box .progress-description,
            .col-md-2 .info-box .progress-description {
               font-size: 0.75rem;
               display: block;
            }
            .col-xl-3 .info-box .progress-description,
            .col-lg-3 .info-box .progress-description,
            .col-md-3 .info-box .progress-description {
               font-size: 0.75rem;
               display: block;
            }
      }
      
      @media (min-width: 1200px) {
            .col-xl-2 .info-box .progress-description,
            .col-lg-2 .info-box .progress-description,
            .col-md-2 .info-box .progress-description {
               font-size: 1rem;
               display: block;
            }
            .col-xl-3 .info-box .progress-description,
            .col-lg-3 .info-box .progress-description,
            .col-md-3 .info-box .progress-description {
               font-size: 1rem;
               display: block;
            }
      }
      /**
* *****************************************************************************
*  i.进度条 progress
* *****************************************************************************
*/
      
      .progress {
            display: -ms-flexbox;
            display: flex;
            height: 1rem;
            overflow: hidden;
            font-size: 0.75rem;
            background-color: #e9ecef;
            border-radius: 0.25rem;
            box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1);
      }
      
      .progress-bar {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-pack: center;
            justify-content: center;
            overflow: hidden;
            color: var(--white);
            text-align: center;
            white-space: nowrap;
            background-color: var(--primary);
            transition: width 0.6s ease;
      }
      
      @media (prefers-reduced-motion: reduce) {
            .progress-bar {
               transition: none;
            }
      }
      
      .progress-bar-striped {
            background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
            background-size: 1rem 1rem;
      }
      
      .progress-bar-animated {
            -webkit-animation: progress-bar-stripes 1s linear infinite;
            animation: progress-bar-stripes 1s linear infinite;
      }
      
      @keyframes progress-bar-stripes {
            from {
               background-position: 1rem 0
            }
            to {
               background-position: 0 0
            }
      }
      
      @media (prefers-reduced-motion: reduce) {
            .progress-bar-animated {
               -webkit-animation: none;
               animation: none;
            }
      }
      
      .progress {
            box-shadow: none;
            border-radius: 1px;
      }
      
      .progress.vertical {
            display: inline-block;
            height: 200px;
            margin-right: 10px;
            position: relative;
            width: 30px;
      }
      
      .progress.vertical>.progress-bar {
            bottom: 0;
            position: absolute;
            width: 100%;
      }
      
      .progress.vertical.sm,
      .progress.vertical.progress-sm {
            width: 20px;
      }
      
      .progress.vertical.xs,
      .progress.vertical.progress-xs {
            width: 10px;
      }
      
      .progress.vertical.xxs,
      .progress.vertical.progress-xxs {
            width: 3px;
      }
      
      .progress-group {
            margin-bottom: 0.5rem;
      }
      
      .progress-md {
            height: 18px;
      }
      
      .progress-sm {
            height: 10px;
      }
      
      .progress-xs {
            height: 7px;
      }
      
      .progress-xxs {
            height: 3px;
      }
      
      .table tr>td .progress {
            margin: 0;
      }
      /**
* *****************************************************************************
*  j.下拉菜单 dropdown 
* *****************************************************************************
*/
      
      .dropdown {
            position: relative;
            font-size: 14px;
            color: #333;
      }
      
      .dropdown .dropdown-list {
            /*padding: 12px;*/
            /*background: var(--white);*/
            width: 100%;
            position: absolute;
            top: 100%;
            transform-origin: 50% 0;
            transform: scale(1, 0);
            transition: transform .15s ease-in-out .15s;
            max-height: 66vh;
            overflow-y: auto;
            z-index: 9999;
      }
      
      .dropdown .dropdown-option {
            display: block;
            padding: 8px 12px;
            opacity: 0;
            transition: opacity .15s ease-in-out;
      }
      
      .dropdown .dropdown-label {
            display: block;
            padding: 6px 12px;
            /*line-height: 1;*/
            cursor: pointer;
      }
      
      .dropdown .dropdown-label:before {
            content: '▼';
            float: right;
      }
      
      .dropdown.on .dropdown-list {
            transform: scale(1, 1);
            transition-delay: 0s;
      }
      
      .dropdown.on .dropdown-list .dropdown-option {
            opacity: 1;
            transition-delay: .2s;
      }
      
      .dropdown.on .dropdown-label:before {
            content: '▲';
      }
      
      .dropdown[data-control="checkbox-dropdown"] {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            /*display: block;
      margin-bottom: 0;
      min-width: 0;*/
            /*width: 1%;*/
            border-radius: 5px;
      }
      
      .dropdown[data-control="checkbox-dropdown"] .dropdown-label {
            border-radius: 5px;
            height: 35px;
            background: var(--white);
            border: 1px solid #ccc;
      }
      
      .dropdown[data-control="checkbox-dropdown"] .dropdown-list {
            border: 1px solid #ccc;
            border-radius: 0 0 5px 5px;
            background: var(--white);
            padding: 12px;
            top: 30px;
      }
      
      .dropdown [type="checkbox"] {
            position: relative;
            top: -1px;
            margin-right: 4px;
      }
      
      .media {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: start;
            align-items: flex-start;
      }
      
      .media-body {
            -ms-flex: 1;
            flex: 1;
      }
      /**
* *****************************************************************************
*  k.面包屑 breadcrumb 
* *****************************************************************************
*/
      
      .breadcrumb {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
            list-style: none;
            background-color: #e9ecef;
            border-radius: 0.25rem;
      }
      
      .breadcrumb-item+.breadcrumb-item {
            padding-left: 0.5rem;
      }
      
      .breadcrumb-item+.breadcrumb-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: var(--secondary);
            content: "/";
      }
      
      .breadcrumb-item+.breadcrumb-item:hover::before {
            text-decoration: underline;
      }
      
      .breadcrumb-item+.breadcrumb-item:hover::before {
            text-decoration: none;
      }
      
      .breadcrumb-item.active {
            color: var(--secondary);
      }
      
      .md-header .breadcrumb {
            background: 0 0;
            line-height: 45px;
            margin-bottom: 0;
            padding: 0;
      }
      /**
* *****************************************************************************
*  l.下拉toogle菜单 dropdown-menu
* *****************************************************************************
*/
      
      .dropup,
      .dropright,
      .dropdown,
      .dropleft {
            position: relative;
      }
      
      .dropdown-toggle {
            white-space: nowrap;
      }
      
      .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0.3em solid;
            border-right: 0.3em solid transparent;
            border-bottom: 0;
            border-left: 0.3em solid transparent;
      }
      
      .dropdown-toggle:empty::after {
            margin-left: 0;
      }
      
      .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            /* float: left; */
            min-width: 10rem;
            padding: 0.5rem 0;
            margin: 0.125rem 0 0;
            font-size: 1rem;
            color: var(--gray-dark2);
            text-align: left;
            list-style: none;
            background-color: var(--white);
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 0.25rem;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
            line-height: 1.5;
      }
      
      .dropdown-menu-left {
            right: auto;
            left: 0;
      }
      
      .dropdown-menu-right {
            right: 0;
            left: auto;
      }
      
      @media (min-width: 576px) {
            .dropdown-menu-sm-left {
               right: auto;
               left: 0;
            }
            .dropdown-menu-sm-right {
               right: 0;
               left: auto;
            }
      }
      
      @media (min-width: 768px) {
            .dropdown-menu-md-left {
               right: auto;
               left: 0;
            }
            .dropdown-menu-md-right {
               right: 0;
               left: auto;
            }
      }
      
      @media (min-width: 992px) {
            .dropdown-menu-lg-left {
               right: auto;
               left: 0;
            }
            .dropdown-menu-lg-right {
               right: 0;
               left: auto;
            }
      }
      
      @media (min-width: 1200px) {
            .dropdown-menu-xl-left {
               right: auto;
               left: 0;
            }
            .dropdown-menu-xl-right {
               right: 0;
               left: auto;
            }
      }
      
      .dropup .dropdown-menu {
            top: auto;
            bottom: 100%;
            margin-top: 0;
            margin-bottom: 0.125rem;
      }
      
      .dropup .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0;
            border-right: 0.3em solid transparent;
            border-bottom: 0.3em solid;
            border-left: 0.3em solid transparent;
      }
      
      .dropup .dropdown-toggle:empty::after {
            margin-left: 0;
      }
      
      .dropright .dropdown-menu {
            top: 0;
            right: auto;
            left: 100%;
            margin-top: 0;
            margin-left: 0.125rem;
      }
      
      .dropright .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0.3em solid transparent;
            border-right: 0;
            border-bottom: 0.3em solid transparent;
            border-left: 0.3em solid;
      }
      
      .dropright .dropdown-toggle:empty::after {
            margin-left: 0;
      }
      
      .dropright .dropdown-toggle::after {
            vertical-align: 0;
      }
      
      .dropleft .dropdown-menu {
            top: 0;
            right: 100%;
            left: auto;
            margin-top: 0;
            margin-right: 0.125rem;
      }
      
      .dropleft .dropdown-toggle::after {
            display: inline-block;
            margin-left: 0.255em;
            vertical-align: 0.255em;
            content: "";
      }
      
      .dropleft .dropdown-toggle::after {
            display: none;
      }
      
      .dropleft .dropdown-toggle::before {
            display: inline-block;
            margin-right: 0.255em;
            vertical-align: 0.255em;
            content: "";
            border-top: 0.3em solid transparent;
            border-right: 0.3em solid;
            border-bottom: 0.3em solid transparent;
      }
      
      .dropleft .dropdown-toggle:empty::after {
            margin-left: 0;
      }
      
      .dropleft .dropdown-toggle::before {
            vertical-align: 0;
      }
      
      .dropdown-menu[x-placement^="top"],
      .dropdown-menu[x-placement^="right"],
      .dropdown-menu[x-placement^="bottom"],
      .dropdown-menu[x-placement^="left"] {
            right: auto;
            bottom: auto;
      }
      /*.dropdown-divider {
   height: 0;
   margin: 0.5rem 0;
   overflow: hidden;
   border-top: 1px solid #e9ecef;
   }*/
      
      .dropdown-item {
            display: block;
            width: 100%;
            padding: 0.25rem 1rem;
            clear: both;
            font-weight: 400;
            color: var(--gray-dark2);
            text-align: inherit;
            white-space: nowrap;
            background-color: transparent;
            border: 0;
      }
      
      .dropdown-menu a {
            color: #111111;
            font-size: 14px;
            font-weight: 400;
      }
      
      .dropdown-item:hover,
      .dropdown-item:focus {
            color: #16181b;
            text-decoration: none;
            background-color: var(--light);
      }
      
      .dropdown-item.active,
      .dropdown-item:active {
            color: var(--white);
            text-decoration: none;
            background-color: var(--primary);
      }
      
      .dropdown-item.disabled,
      .dropdown-item:disabled {
            color: var(--secondary);
            pointer-events: none;
            background-color: transparent;
      }
      
      .dropdown-footer,
      .dropdown-header {
            display: block;
            font-size: 0.875rem;
            padding: 0.5rem 1rem;
            text-align: center;
            white-space: nowrap;
            color: var(--secondary);
      }
      
      .dropdown-item-title {
            font-size: 1rem;
            margin: 0;
      }
      
      .dropdown-item-text {
            display: block;
            padding: 0.25rem 1rem;
            color: var(--gray-dark2);
      }
      /*dropdown-menu-xl*/
      
      .dropdown-menu-xl {
            max-width: 420px;
            min-width: 360px;
            padding: 0;
      }
      /*.dropdown-menu-xl .dropdown-divider {
      margin: 0;
      }*/
      
      .dropdown-menu-xl .divider {
            margin: 0;
      }
      
      .dropdown-menu-xl .dropdown-item {
            padding: 0.5rem 1rem;
      }
      
      .dropdown-menu-xl p {
            margin: 0;
            white-space: normal;
      }
      
      .dropdown-menu-lg p {
            white-space: normal;
            margin: 0;
      }
      
      .dropdown-menu-lg {
            max-width: 300px;
            min-width: 280px;
            padding: 0;
      }
      /*.dropdown-menu-lg .dropdown-divider {
   margin: 0;
   }*/
      
      .dropdown-menu-lg .divider {
            margin: 0;
      }
      
      .dropdown-menu-lg .dropdown-item {
            padding: 0.5rem 1rem;
      }
      
      .dropdown-menu-lg p {
            margin: 0;
            white-space: normal;
      }
      
      .dropdown-menu-md {
            max-width: 220px;
            min-width: 200px;
            padding: 0 0;
      }
      /*.dropdown-menu-md .dropdown-divider {
   margin: 0 0;
   }*/
      
      .dropdown-menu-md .divider {
            margin: 0 0;
      }
      
      .dropdown-menu-md .dropdown-item {
            padding: 0.25rem 1rem;
      }
      
      .dropdown-menu-md p {
            margin: 0 0;
            white-space: normal;
      }
      
      .dropdown-menu-sm {
            max-width: 150px;
            min-width: 100px;
            padding: 0 0;
      }
      /*.dropdown-menu-sm .dropdown-divider {
   margin: 0 0;
   }*/
      
      .dropdown-menu-sm .divider {
            margin: 0 0;
      }
      
      .dropdown-menu-sm .dropdown-item {
            padding: 0.2rem .5rem;
      }
      
      .dropdown-menu-sm p {
            margin: 0 0;
            white-space: normal;
      }
      /**
* *****************************************************************************
*  m.tab切换
* *****************************************************************************
*/
      
      .tab {
            background-color: var(--white);
      }
      
      .tab .tab-header {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: 0.5rem 0.5rem 0;
            border-bottom: 1px solid var(--gray-light3);
      }
      
      .tab .tab-header ul {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: row !important;
            flex-direction: row !important;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
            margin-bottom: -1px;
      }
      
      .tab .tab-header ul.right {
            margin-left: auto;
      }
      
      .tab .tab-header ul.center {
            margin-left: auto;
            margin-right: auto;
      }
      
      ul.tab-body {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 0.25rem;
      }
      
      ul.tab-body>li:not(.active) {
            display: none;
      }
      
      .tab .tab-header .tab-btn {
            cursor: pointer;
            padding: .25rem .5rem;
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
            color: var(--primary);
      }
      
      .tab .tab-header .tab-btn:hover {
            border-color: var(--gray-light3);
      }
      
      .tab .tab-header .tab-btn.active {
            color: #495057;
            background-color: var(--white);
            border-color: var(--gray-light3) var(--gray-light3) var(--white);
      }
      /*.tab.tab-box{
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      border-radius: 0.25rem;
      border: 1px solid rgba(0,0,0,.125);
   }
   .tab.tab-box .tab-header {
      background-color: transparent;
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
      border-bottom: 1px solid rgba(0,0,0,.125);
      padding-bottom:0;
      padding-top: 0.5rem;
   }
   .tab.tab-box .tab-header .tab-btn {
      border : 1px solid transparent;
      border-top-left-radius : .25rem;
      border-top-right-radius : .25rem;
   }
   .tab.tab-box .tab-header .tab-btn.active {
      background-color: var(--white);
      border-color: var(--gray-light3) var(--gray-light3) var(--white);
      font-weight: 500;
   }*/
      
      .tab.tab-underline .tab-header {
            border-bottom: 1px solid transparent;
      }
      
      .tab.tab-underline .tab-header .tab-btn {
            border: 2px solid transparent;
            margin: 0 0.25rem;
            color: #495057;
      }
      
      .tab.tab-underline .tab-header .tab-btn:hover {
            border-color: transparent;
      }
      
      .tab.tab-underline .tab-header .tab-btn.active {
            background-color: transparent;
            border-color: transparent transparent #111;
            font-weight: 500;
      }
      /**
* *****************************************************************************
*  n.模态框 popup
* *****************************************************************************
*/
      
      .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            background: rgba(59, 45, 45, 0.6);
      }
      
      .popup.active {
            display: flex;
            justify-content: center;
            align-items: center;
      }
      
      .modal-content {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            width: 50%;
            pointer-events: auto;
            background-color: var(--white);
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: .3rem;
            box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, .5);
            outline: 0;
      }
      
      .modal-header {
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding: .5rem 1rem;
            border-bottom: 1px solid #e9ecef;
            border-top-left-radius: calc(.3rem - 1px);
            border-top-right-radius: calc(.3rem - 1px);
      }
      
      .modal-title {
            margin-bottom: 0;
            line-height: 1.5;
      }
      /*.modal-header > .modal-tools {
      position: absolute;
      right: 10px;
      top: 5px;
   }*/
      
      .modal-body {
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            padding: 1rem;
      }
      
      .modal-footer {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: end;
            justify-content: flex-end;
            padding: .5rem;
            border-top: 1px solid #e9ecef;
            border-bottom-right-radius: calc(.3rem - 1px);
            border-bottom-left-radius: calc(.3rem - 1px);
      }
      /**
* *****************************************************************************
*  o.kpi-box
* *****************************************************************************
*/
      
      .kpi-box {
            text-align: center;
            padding-right: 0.35rem;
      }
      
      .kpi-box-content {
            display: inline-block;
            border-radius: 0.25rem;
            padding: 0.5rem 0.75rem 0.25rem 0.75rem;
      }
      
      .kpi-box-icon {
            font-size: 1.5rem;
            padding-right: 0.25rem;
      }
      
      .kpi-box-number {
            font-size: 1.5rem;
            font-weight: 700;
      }
      
      .kpi-box-sup {
            font-size: 0.875rem;
            opacity: 0.7;
      }
      
      .kpi-box-text {
            opacity: 0.7;
            font-size: 0.875rem;
            padding: 0.25rem;
      }
      
      .list-unstyled {
            padding-left: 0;
            list-style: none;
      }
      
      .list-inline {
            padding-left: 0;
            list-style: none;
      }
      
      .list-inline-item {
            display: inline-block;
      }
      
      .list-inline-item:not(:last-child) {
            margin-right: 0.5rem;
      }
      
      img.table-avatar,
      .table-avatar img {
            border-radius: 50%;
            display: inline;
            width: 2.5rem;
            height: 2.5rem;
      }
      
      .post {
            border-bottom: 1px solid #adb5bd;
            color: #666;
            margin-bottom: 15px;
            padding-bottom: 15px;
      }
      
      .post:last-of-type {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
      }
      
      .post .user-block {
            margin-bottom: 15px;
            width: 100%;
      }
      
      .post .row {
            width: 100%;
      }
      
      .user-block {
            float: left;
      }
      
      .user-block img {
            float: left;
            height: 40px;
            width: 40px;
      }
      
      .user-block .username,
      .user-block .description,
      .user-block .comment {
            display: block;
            margin-left: 50px;
      }
      
      .user-block .username {
            font-size: 16px;
            font-weight: 600;
            margin-top: -1px;
      }
      
      .user-block .description {
            color: var(--secondary);
            font-size: 13px;
      }
      
      .user-block.user-block-sm img {
            width: 1.875rem;
            height: 1.875rem;
      }
      
      .user-block.user-block-sm .username,
      .user-block.user-block-sm .description,
      .user-block.user-block-sm .comment {
            margin-left: 40px;
      }
      
      .user-block.user-block-sm .username {
            font-size: 14px;
      }
      
      .img-sm,
      .img-md,
      .img-lg {
            float: left;
      }
      
      .img-sm {
            height: 1.875rem;
            width: 1.875rem;
      }
      
      .img-sm+.img-push {
            margin-left: 2.5rem;
      }
      
      .img-md {
            width: 3.75rem;
            height: 3.75rem;
      }
      
      .img-md+.img-push {
            margin-left: 4.375rem;
      }
      
      .img-lg {
            width: 6.25rem;
            height: 6.25rem;
      }
      
      .img-lg+.img-push {
            margin-left: 6.875rem;
      }
      
      .img-bordered {
            border: 3px solid #adb5bd;
            padding: 3px;
      }
      
      .img-bordered-sm {
            border: 2px solid #adb5bd;
            padding: 2px;
      }
      
      .img-rounded {
            border-radius: 0.25rem;
      }
      
      .img-circle {
            border-radius: 50%;
      }
      
      .img-size-64,
      .img-size-50,
      .img-size-32 {
            height: auto;
      }
      
      .img-size-64 {
            width: 64px;
      }
      
      .img-size-50 {
            width: 50px;
      }
      
      .img-size-32 {
            width: 32px;
      }
      
      .size-32,
      .size-40,
      .size-50 {
            display: block;
            text-align: center;
      }
      
      .size-32 {
            height: 32px;
            line-height: 32px;
            width: 32px;
      }
      
      .size-40 {
            height: 40px;
            line-height: 40px;
            width: 40px;
      }
      
      .size-50 {
            height: 50px;
            line-height: 50px;
            width: 50px;
      }
      /*p {
   margin-top: 0;
   margin-bottom: 1rem;
}*/
      
      .h1,
      .h2,
      .h3,
      .h4,
      .h5,
      .h6,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
            margin-bottom: .5rem;
            font-family: inherit;
            font-weight: 500;
            line-height: 1.2;
            color: inherit;
      }
      /* list */
      
      .dataTable th,
      .dataTable td {
            padding: 5px !important;
            line-height: 1.5 !important;
            white-space: nowrap !important;
            vertical-align: middle !important;
      }
      
      div.dataTables_wrapper div.dataTables_info {
            width: 50%;
            float: left;
            margin-top: 5px;
      }
      
      div.dataTables_wrapper div.dataTables_paginate {
            width: 50%;
            float: right;
            margin-top: 5px;
      }
      
      div.dataTables_wrapper div.dataTables_filter label:after {
            left: 45px;
      }
      
      .primary-theme {
            background-color: #e8f4ff;
            border-color: #d1e9ff;
            color: #1890ff;
      }
      
      .primary-theme:focus,
      .primary-theme:hover {
            background: #1890ff;
            border-color: #1890ff;
            color: #fff;
      }
      
      .light-theme {
            color: #909399;
            background: #f4f4f5;
            border-color: #d3d4d6;
      }
      
      .light-theme:focus,
      .light-theme:hover {
            background: #909399;
            border-color: #909399;
            color: #fff;
      }
      
      .success-theme {
            color: #13ce66;
            background: #e7faf0;
            border-color: #a1ebc2;
      }
      
      .success-theme:focus,
      .success-theme:hover {
            background: #13ce66;
            border-color: #13ce66;
            color: #fff;
      }
      
      .warning-theme {
            color: #ffba00;
            background: #fff8e6;
            border-color: #ffe399;
      }
      
      .warning-theme:focus,
      .warning-theme:hover {
            background: #ffba00;
            border-color: #ffba00;
            color: #fff;
      }
      
      .danger-theme {
            color: #ff4949;
            background: #ffeded;
            border-color: #ffb6b6;
      }
      
      .danger-theme:focus,
      .danger-theme:hover {
            background: #ff4949;
            border-color: #ff4949;
            color: #fff;
      }
      
      .info-theme {
            color: #909399;
            background: #f4f4f5;
            border-color: #d3d4d6;
      }
      
      .info-theme:focus,
      .info-theme:hover {
            background: #909399;
            border-color: #909399;
            color: #fff;
      }
      
      .theme {
            background: #fff;
            border: 1px solid #dcdfe6;
            border-color: #dcdfe6;
            color: #606266;
      }
      
      .theme:focus,
      .theme:hover {
            color: #1890ff;
            border-color: #badeff;
            background-color: #e8f4ff;
      }
      
      .pagination>.active>a,
      .pagination>.active>a:focus,
      .pagination>.active>a:hover,
      .pagination>.active>span,
      .pagination>.active>span:focus,
      .pagination>.active>span:hover {
            z-index: 3;
            color: #fff;
            cursor: default;
            background-color: #2351a9;
            border-color: #2351a9;
      }   

      /* 20250427 */
      /* 背景图片 */
      .bg-light-img001 {
         font-family: Verdana, Arial, Helvetica, sans-serif;
         background: transparent url(../../public/img/bg001.png) repeat-x;
         background-color: #faf7ef;
      }