@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: #17a2b8; */
--primary: #6c757d;
--primary-font:#fff;
/*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: #EBEBEB;
/*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;
--dark: #343a40;
--white: #fff;
--white-0:rgba(255,255,255,0);
--white-5:rgba(255,255,255,0.05);
--white-10:rgba(255,255,255,0.10);
--white-15:rgba(255,255,255,0.15);
--white-20:rgba(255,255,255,0.20);
--white-25:rgba(255,255,255,0.25);
--white-30:rgba(255,255,255,0.30);
--white-35:rgba(255,255,255,0.35);
--white-40:rgba(255,255,255,0.40);
--white-45:rgba(255,255,255,0.45);
--white-50:rgba(255,255,255,0.50);
--white-55:rgba(255,255,255,0.55);
--white-60:rgba(255,255,255,0.60);
--white-65:rgba(255,255,255,0.65);
--white-70:rgba(255,255,255,0.70);
--white-75:rgba(255,255,255,0.75);
--white-80:rgba(255,255,255,0.80);
--white-85:rgba(255,255,255,0.85);
--white-90:rgba(255,255,255,0.90);
--white-95:rgba(255,255,255,0.95);
--white-100:rgba(255,255,255,1);

--black: #000;
--black-0:rgba(0,0,0,0);
--black-5:rgba(0,0,0,0.05);
--black-10:rgba(0,0,0,0.10);
--black-15:rgba(0,0,0,0.15);
--black-20:rgba(0,0,0,0.20);
--black-25:rgba(0,0,0,0.25);
--black-30:rgba(0,0,0,0.30);
--black-35:rgba(0,0,0,0.35);
--black-40:rgba(0,0,0,0.40);
--black-45:rgba(0,0,0,0.45);
--black-50:rgba(0,0,0,0.50);
--black-55:rgba(0,0,0,0.55);
--black-60:rgba(0,0,0,0.60);
--black-65:rgba(0,0,0,0.65);
--black-70:rgba(0,0,0,0.70);
--black-75:rgba(0,0,0,0.75);
--black-80:rgba(0,0,0,0.80);
--black-85:rgba(0,0,0,0.85);
--black-90:rgba(0,0,0,0.90);
--black-95:rgba(0,0,0,0.95);
--black-100:rgba(0,0,0,1);
--transparent: transparent;
--disabled: 0.65;
--muted: #6c757d;
/*--rosered: #FF365D;
--gray: #e9e9e9;

*/
--sidebar-width:220px;
--sidebar-width-small:180px;
--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%;
   font-size: 12px;
}

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;
}

/*文件列表用*/
.fileList .hover-trigger:not(.common){
border:1px dashed transparent;
}
.fileList .hover-trigger:not(.common):hover{
   background-color:var(--light);
   border-color:var(--primary);
}
/** 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(--primary-font) !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(--primary-font);
      }
      /*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(--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-white-0 {
         background-color: rgba(255,255,255,0) !important;
      }
      .bg-white-5 {
         background-color: rgba(255,255,255,.05) !important;
      }
      .bg-white-10 {
         background-color: rgba(255,255,255,.1) !important;
      }
      .bg-white-15 {
         background-color: rgba(255,255,255,.15) !important;
      }
      .bg-white-20 {
         background-color: rgba(255,255,255,.2) !important;
      }
      .bg-white-25 {
         background-color: rgba(255,255,255,.25) !important;
      }
      .bg-white-30 {
         background-color: rgba(255,255,255,.3) !important;
      }
      .bg-white-35 {
         background-color: rgba(255,255,255,.35) !important;
      }
      .bg-white-40 {
         background-color: rgba(255,255,255,.4) !important;
      }
      .bg-white-45 {
         background-color: rgba(255,255,255,.45) !important;
      }
      .bg-white-50 {
         background-color: rgba(255,255,255,.5) !important;
      }
      .bg-white-55 {
         background-color: rgba(255,255,255,.55) !important;
      }
      .bg-white-60 {
         background-color: rgba(255,255,255,.6) !important;
      }
      .bg-white-65 {
         background-color: rgba(255,255,255,.65) !important;
      }
      .bg-white-70 {
         background-color: rgba(255,255,255,.7) !important;
      }
      .bg-white-75 {
         background-color: rgba(255,255,255,.75) !important;
      }
      .bg-white-80 {
         background-color: rgba(255,255,255,.8) !important;
      }
      .bg-white-85 {
         background-color: rgba(255,255,255,.85) !important;
      }
      .bg-white-90 {
         background-color: rgba(255,255,255,.9) !important;
      }
      .bg-white-95 {
         background-color: rgba(255,255,255,.95) !important;
      }
      .bg-white-100 {
         background-color: rgba(255,255,255,1) !important;
      }
      /*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;
      }

      .bg-black-0 {
         background-color: rgba(0,0,0,0) !important;
      }
      .bg-black-5 {
         background-color: rgba(0,0,0,.05) !important;
      }
      .bg-black-10 {
         background-color: rgba(0,0,0,.1) !important;
      }
      .bg-black-15 {
         background-color: rgba(0,0,0,.15) !important;
      }
      .bg-black-20 {
         background-color: rgba(0,0,0,.2) !important;
      }
      .bg-black-25 {
         background-color: rgba(0,0,0,.25) !important;
      }
      .bg-black-30 {
         background-color: rgba(0,0,0,.3) !important;
      }
      .bg-black-35 {
         background-color: rgba(0,0,0,.35) !important;
      }
      .bg-black-40 {
         background-color: rgba(0,0,0,.4) !important;
      }
      .bg-black-45 {
         background-color: rgba(0,0,0,.45) !important;
      }
      .bg-black-50 {
         background-color: rgba(0,0,0,.5) !important;
      }
      .bg-black-55 {
         background-color: rgba(0,0,0,.55) !important;
      }
      .bg-black-60 {
         background-color: rgba(0,0,0,.6) !important;
      }
      .bg-black-65 {
         background-color: rgba(0,0,0,.65) !important;
      }
      .bg-black-70 {
         background-color: rgba(0,0,0,.7) !important;
      }
      .bg-black-75 {
         background-color: rgba(0,0,0,.75) !important;
      }
      .bg-black-80 {
         background-color: rgba(0,0,0,.8) !important;
      }
      .bg-black-85 {
         background-color: rgba(0,0,0,.85) !important;
      }
      .bg-black-90 {
         background-color: rgba(0,0,0,.9) !important;
      }
      .bg-black-95 {
         background-color: rgba(0,0,0,.95) !important;
      }
      .bg-black-100 {
         background-color: rgba(0,0,0,1) !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(--blue) !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-11 {
            font-size: 4.5rem !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: 1400px !important;
         margin: 0 auto;
      }
      
      .w-1300px {
         width: 1300px !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-4px {
         width: 4px !important;
         margin: 0 auto;
      }
      .w-3px {
         width: 3px !important;
         margin: 0 auto;
      }
      .w-2px {
         width: 2px !important;
         margin: 0 auto;
      }
      .w-1px {
         width: 1px !important;
         margin: 0 auto;
      }
      
      .w-0 {
         width: 0 !important;
      }
      .w-1 {
         width: 1% !important;
      }
      .w-2 {
         width: 2% !important;
      }
      .w-3 {
         width: 3% !important;
      }
      .w-4 {
         width: 4% !important;
      }
      
      .w-5 {
         width: 5% !important;
      }
      .w-6 {
         width: 6% !important;
      }
      .w-7 {
         width: 7% !important;
      }
      .w-8 {
         width: 8% !important;
      }
      .w-9 {
         width: 9% !important;
      }
      
      .w-10 {
         width: 10% !important;
      }
      .w-11 {
         width: 11% !important;
      }
      .w-12 {
         width: 12% !important;
      }
      .w-13 {
         width: 13% !important;
      }
      .w-14 {
         width: 14% !important;
      }
      
      .w-15 {
         width: 15% !important;
      }
      .w-16 {
         width: 16% !important;
      }
      .w-17 {
         width: 17% !important;
      }
      .w-18 {
         width: 18% !important;
      }
      .w-19 {
         width: 19% !important;
      }
      
      .w-20 {
         width: 20% !important;
      }
      .w-21 {
         width: 21% !important;
      }
      .w-22 {
         width: 22% !important;
      }
      .w-23 {
         width: 23% !important;
      }
      .w-24 {
         width: 24% !important;
      }
      
      .w-25 {
         width: 25% !important;
      }
      .w-26 {
         width: 26% !important;
      }
      .w-27 {
         width: 27% !important;
      }
      .w-28 {
         width: 28% !important;
      }
      .w-29 {
         width: 29% !important;
      }
      
      .w-30 {
         width: 30% !important;
      }
      .w-31 {
         width: 31% !important;
      }
      .w-32 {
         width: 32% !important;
      }
      .w-33 {
         width: 33% !important;
      }
      .w-34 {
         width: 34% !important;
      }
      
      .w-35 {
         width: 35% !important;
      }
      .w-36 {
         width: 36% !important;
      }
      .w-37 {
         width: 37% !important;
      }
      .w-38 {
         width: 38% !important;
      }
      .w-39 {
         width: 39% !important;
      }
      
      .w-40 {
         width: 40% !important;
      }
      .w-41 {
         width: 41% !important;
      }
      .w-42 {
         width: 42% !important;
      }
      .w-43 {
         width: 43% !important;
      }
      .w-44 {
         width: 44% !important;
      }
      
      .w-45 {
         width: 45% !important;
      }
      .w-46 {
         width: 46% !important;
      }
      .w-47 {
         width: 47% !important;
      }
      .w-48 {
         width: 48% !important;
      }
      .w-49 {
         width: 49% !important;
      }
      
      .w-50 {
         width: 50% !important;
      }
      .w-51 {
         width: 51% !important;
      }
      .w-52 {
         width: 52% !important;
      }
      .w-53 {
         width: 53% !important;
      }
      .w-54 {
         width: 54% !important;
      }
      
      .w-55 {
         width: 55% !important;
      }
      .w-56 {
         width: 56% !important;
      }
      .w-57 {
         width: 57% !important;
      }
      .w-58 {
         width: 58% !important;
      }
      .w-59 {
         width: 59% !important;
      }
      
      .w-60 {
         width: 60% !important;
      }
      .w-61 {
         width: 61% !important;
      }
      .w-62 {
         width: 62% !important;
      }
      .w-63 {
         width: 63% !important;
      }
      .w-64 {
         width: 64% !important;
      }
      
      .w-65 {
         width: 65% !important;
      }
      .w-66 {
         width: 66% !important;
      }
      .w-67 {
         width: 67% !important;
      }
      .w-68 {
         width: 68% !important;
      }
      .w-69 {
         width: 69% !important;
      }
      
      .w-70 {
         width: 70% !important;
      }
      .w-71 {
         width: 71% !important;
      }
      .w-72 {
         width: 72% !important;
      }
      .w-73 {
         width: 73% !important;
      }
      .w-74 {
         width: 74% !important;
      }
      
      .w-75 {
         width: 75% !important;
      }
      .w-76 {
         width: 76% !important;
      }
      .w-77 {
         width: 77% !important;
      }
      .w-78 {
         width: 78% !important;
      }
      .w-79 {
         width: 79% !important;
      }
      
      .w-80 {
         width: 80% !important;
      }
      .w-81 {
         width: 81% !important;
      }
      .w-82 {
         width: 82% !important;
      }
      .w-83 {
         width: 83% !important;
      }
      .w-84 {
         width: 84% !important;
      }
      
      .w-85 {
         width: 85% !important;
      }
      .w-86 {
         width: 86% !important;
      }
      .w-87 {
         width: 87% !important;
      }
      .w-88 {
         width: 88% !important;
      }
      .w-89 {
         width: 89% !important;
      }
      
      .w-90 {
         width: 90% !important;
      }
      .w-91 {
         width: 91% !important;
      }
      .w-92 {
         width: 92% !important;
      }
      .w-93 {
         width: 93% !important;
      }
      .w-94 {
         width: 94% !important;
      }
      
      .w-95 {
         width: 95% !important;
      }
      .w-96 {
         width: 96% !important;
      }
      .w-97 {
         width: 97% !important;
      }
      .w-98 {
         width: 98% !important;
      }
      .w-99 {
         width: 99% !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.66% !important;
      }
      
      .w-6-5 {
         width: 83.34% !important;
      }
      
      .w-7-1 {
         width: 14.28% !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;
         }

         .w-sm-3-1 {
               width: 33.33% !important;
         }
         
         .w-sm-3-2 {
               width: 66.67% !important;
         }
         
         .w-sm-6-1 {
               width: 16.67% !important;
         }
         
         .w-sm-6-5 {
               width: 83.34% !important;
         }
         
         .w-sm-7-1 {
               width: 14.29% !important;
         }
         
         .w-sm-7-2 {
               width: 28.57% !important;
         }
         
         .w-sm-7-3 {
               width: 42.86% !important;
         }
         
         .w-sm-7-4 {
               width: 57.14% !important;
         }
         
         .w-sm-7-5 {
               width: 71.43% !important;
         }
         
         .w-sm-7-6 {
               width: 85.71% !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;
         }
         .w-md-3-1 {
               width: 33.33% !important;
         }
         
         .w-md-3-2 {
               width: 66.67% !important;
         }
         
         .w-md-6-1 {
               width: 16.67% !important;
         }
         
         .w-md-6-5 {
               width: 83.34% !important;
         }
         
         .w-md-7-1 {
               width: 14.29% !important;
         }
         
         .w-md-7-2 {
               width: 28.57% !important;
         }
         
         .w-md-7-3 {
               width: 42.86% !important;
         }
         
         .w-md-7-4 {
               width: 57.14% !important;
         }
         
         .w-md-7-5 {
               width: 71.43% !important;
         }
         
         .w-md-7-6 {
               width: 85.71% !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;
         }
         .w-lg-3-1 {
               width: 33.33% !important;
         }
         
         .w-lg-3-2 {
               width: 66.67% !important;
         }
         
         .w-lg-6-1 {
               width: 16.67% !important;
         }
         
         .w-lg-6-5 {
               width: 83.34% !important;
         }
         
         .w-lg-7-1 {
               width: 14.29% !important;
         }
         
         .w-lg-7-2 {
               width: 28.57% !important;
         }
         
         .w-lg-7-3 {
               width: 42.86% !important;
         }
         
         .w-lg-7-4 {
               width: 57.14% !important;
         }
         
         .w-lg-7-5 {
               width: 71.43% !important;
         }
         
         .w-lg-7-6 {
               width: 85.71% !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;
         }
         .w-xl-3-1 {
               width: 33.33% !important;
         }
         
         .w-xl-3-2 {
               width: 66.67% !important;
         }
         
         .w-xl-6-1 {
               width: 16.67% !important;
         }
         
         .w-xl-6-5 {
               width: 83.34% !important;
         }
         
         .w-xl-7-1 {
               width: 14.29% !important;
         }
         
         .w-xl-7-2 {
               width: 28.57% !important;
         }
         
         .w-xl-7-3 {
               width: 42.86% !important;
         }
         
         .w-xl-7-4 {
               width: 57.14% !important;
         }
         
         .w-xl-7-5 {
               width: 71.43% !important;
         }
         
         .w-xl-7-6 {
               width: 85.71% !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-1px {
         height: 1px !important;
      }
      
      .h-2px {
         height: 2px !important;
      }
      
      .h-3px {
         height: 3px !important;
      }
      
      .h-4px {
         height: 4px !important;
      }
      
      .h-5px {
         height: 5px !important;
      }
      
      .h-6px {
         height: 6px !important;
      }
      
      .h-7px {
         height: 7px !important;
      }
      
      .h-8px {
         height: 8px !important;
      }
      
      .h-9px {
         height: 9px !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-1 {
         height: 1% !important;
      }
      .h-2 {
         height: 2% !important;
      }
      .h-3 {
         height: 3% !important;
      }
      .h-4 {
         height: 4% !important;
      }
      
      .h-5 {
         height: 5% !important;
      }
      .h-6 {
         height: 6% !important;
      }
      .h-7 {
         height: 7% !important;
      }
      .h-8 {
         height: 8% !important;
      }
      .h-9 {
         height: 9% !important;
      }
      
      .h-10 {
         height: 10% !important;
      }
      .h-11 {
         height: 11% !important;
      }
      .h-12 {
         height: 12% !important;
      }
      .h-13 {
         height: 13% !important;
      }
      .h-14 {
         height: 14% !important;
      }
      
      .h-15 {
         height: 15% !important;
      }
      .h-16 {
         height: 16% !important;
      }
      .h-17 {
         height: 17% !important;
      }
      .h-18 {
         height: 18% !important;
      }
      .h-19 {
         height: 19% !important;
      }
      
      .h-20 {
         height: 20% !important;
      }
      .h-21 {
         height: 21% !important;
      }
      .h-22 {
         height: 22% !important;
      }
      .h-23 {
         height: 23% !important;
      }
      .h-24 {
         height: 24% !important;
      }
      
      .h-25 {
         height: 25% !important;
      }
      .h-26 {
         height: 26% !important;
      }
      .h-27 {
         height: 27% !important;
      }
      .h-28 {
         height: 28% !important;
      }
      .h-29 {
         height: 29% !important;
      }
      
      .h-30 {
         height: 30% !important;
      }
      .h-31 {
         height: 31% !important;
      }
      .h-32 {
         height: 32% !important;
      }
      .h-33 {
         height: 33% !important;
      }
      .h-34 {
         height: 34% !important;
      }
      
      .h-35 {
         height: 35% !important;
      }
      .h-36 {
         height: 36% !important;
      }
      .h-37 {
         height: 37% !important;
      }
      .h-38 {
         height: 38% !important;
      }
      .h-39 {
         height: 39% !important;
      }
      
      .h-40 {
         height: 40% !important;
      }
      .h-41 {
         height: 41% !important;
      }
      .h-42 {
         height: 42% !important;
      }
      .h-43 {
         height: 43% !important;
      }
      .h-44 {
         height: 44% !important;
      }
      
      .h-45 {
         height: 45% !important;
      }
      .h-46 {
         height: 46% !important;
      }
      .h-47 {
         height: 47% !important;
      }
      .h-48 {
         height: 48% !important;
      }
      .h-49 {
         height: 49% !important;
      }
      
      .h-50 {
         height: 50% !important;
      }
      .h-51 {
         height: 51% !important;
      }
      .h-52 {
         height: 52% !important;
      }
      .h-53 {
         height: 53% !important;
      }
      .h-54 {
         height: 54% !important;
      }
      
      .h-55 {
         height: 55% !important;
      }
      .h-56 {
         height: 56% !important;
      }
      .h-57 {
         height: 57% !important;
      }
      .h-58 {
         height: 58% !important;
      }
      .h-59 {
         height: 59% !important;
      }
      
      .h-60 {
         height: 60% !important;
      }
      .h-61 {
         height: 61% !important;
      }
      .h-62 {
         height: 62% !important;
      }
      .h-63 {
         height: 63% !important;
      }
      .h-64 {
         height: 64% !important;
      }
      
      .h-65 {
         height: 65% !important;
      }
      .h-66 {
         height: 66% !important;
      }
      .h-67 {
         height: 67% !important;
      }
      .h-68 {
         height: 68% !important;
      }
      .h-69 {
         height: 69% !important;
      }
      
      .h-70 {
         height: 70% !important;
      }
      .h-71 {
         height: 71% !important;
      }
      .h-72 {
         height: 72% !important;
      }
      .h-73 {
         height: 73% !important;
      }
      .h-74 {
         height: 74% !important;
      }
      
      .h-75 {
         height: 75% !important;
      }
      .h-76 {
         height: 76% !important;
      }
      .h-77 {
         height: 77% !important;
      }
      .h-78 {
         height: 78% !important;
      }
      .h-79 {
         height: 79% !important;
      }
      
      .h-80 {
         height: 80% !important;
      }
      .h-81 {
         height: 81% !important;
      }
      .h-82 {
         height: 82% !important;
      }
      .h-83 {
         height: 83% !important;
      }
      .h-84 {
         height: 84% !important;
      }
      
      .h-85 {
         height: 85% !important;
      }
      .h-86 {
         height: 86% !important;
      }
      .h-87 {
         height: 87% !important;
      }
      .h-88 {
         height: 88% !important;
      }
      .h-89 {
         height: 89% !important;
      }
      
      .h-90 {
         height: 90% !important;
      }
      .h-91 {
         height: 91% !important;
      }
      .h-92 {
         height: 92% !important;
      }
      .h-93 {
         height: 93% !important;
      }
      .h-94 {
         height: 94% !important;
      }
      
      .h-95 {
         height: 95% !important;
      }
      .h-96 {
         height: 96% !important;
      }
      .h-97 {
         height: 97% !important;
      }
      .h-98 {
         height: 98% !important;
      }
      .h-99 {
         height: 99% !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;
      }
      .lh-1 {
         line-height: 1 !important;
      }
      .lh-15 {
         line-height: 1.5 !important;
      }
      .lh-2 {
         line-height: 2 !important;
      }
      .lh-25 {
         line-height: 2.5 !important;
      }
      .lh-3 {
         line-height: 3 !important;
      }
      .lh-35 {
         line-height: 3.5 !important;
      }
      .lh-4 {
         line-height: 4 !important;
      }
      .lh-45 {
         line-height: 4.5 !important;
      }
      .lh-5 {
         line-height: 5 !important;
      }
      .lh-5px {
         line-height: 5px !important;
      }
      
      .lh-10px {
         line-height: 10px !important;
      }
      
      .lh-15px {
         line-height: 15px !important;
      }
      
      .lh-20px {
         line-height: 20px !important;
      }
      
      .lh-25px {
         line-height: 25px !important;
      }
      
      .lh-30px {
         line-height: 30px !important;
      }
      
      .lh-35px {
         line-height: 35px !important;
      }
      
      .lh-40px {
         line-height: 40px !important;
      }
      
      .lh-45px {
         line-height: 45px !important;
      }
      
      .lh-50px {
         line-height: 50px !important;
      }
      
      .lh-55px {
         line-height: 55px !important;
      }
      
      .lh-60px {
         line-height: 60px !important;
      }
      
      .lh-65px {
         line-height: 65px !important;
      }
      
      .lh-70px {
         line-height: 70px !important;
      }
      
      .lh-75px {
         line-height: 75px !important;
      }
      
      .lh-80px {
         line-height: 80px !important;
      }
      
      .lh-85px {
         line-height: 85px !important;
      }
      
      .lh-90px {
         line-height: 90px !important;
      }
      
      .lh-95px {
         line-height: 95px !important;
      }
      
      .lh-100px {
         line-height: 100px !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-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;
      }
      .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-gray-light {
         border-color: var(--gray-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;
      }
      /*圆角*/
      
      .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);
         }

      /*悬浮显示滚动条*/
         .scrollbar-gray-hover::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 12px;
            /*高宽分别对应横竖滚动条的尺寸*/
            height: 12px;
            display:none;
         }

         .scrollbar-gray-hover:hover::-webkit-scrollbar{
         display:block;
         }
         
         .scrollbar-gray-hover::-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-hover::-webkit-scrollbar-thumb:hover {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) inset;
         }
         
         .scrollbar-gray-hover::-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;
      }
      .cursor-not-allowed {
         cursor:not-allowed !important;
         text-decoration: none !important;
      }

      .cursor-ew-resize {
         cursor: ew-resize !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-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: var(--sidebar-width);
         z-index: 3;
      }
      
      .main-wrapper.small-sidebar>.md-sidebar {
         width: var(--sidebar-width-small);
      }
      /*主导航md-content定位模式改变*/
      
      .main-wrapper>.md-content {
         position: static;
      }
      /*鼠标悬浮显示导航附加信息*/
      
      .main-wrapper>.md-sidebar:hover {
         width: var(--sidebar-width) !important;
         transition-duration: width 0.3s;
      }
      
      .main-wrapper.small-sidebar>.md-sidebar:hover {
         width: var(--sidebar-width-small) !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: var(--sidebar-width);
               transition: margin-left .3s ease-in-out;
         }
         .main-wrapper.small-sidebar>.md-content {
               margin-left: var(--sidebar-width-small);
               transition: margin-left .3s ease-in-out;
         }
      }
      /*缩起时缩起导航部分*/
      
      .main-wrapper.sidebar-collapse>.md-sidebar {
         margin-left: -var(--sidebar-width);
      }
      
      .main-wrapper.small-sidebar.sidebar-collapse>.md-sidebar {
         margin-left: -var(--sidebar-width-small);
      }
      /*当屏幕宽度>=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: -var(--sidebar-width);
               transition: margin-left .35s ease-in-out;
         }
         .main-wrapper.sidebar-collapse:not(.full-collapse)>.md-content {
               margin-left: 3rem !important;
         }
         .main-wrapper.sidebar-collapse:not(.full-collapse)>.md-sidebar {
               margin-left: 0;
               width: 3rem;
               overflow-x: hidden;
         }
         /*small-sidebar*/
         .main-wrapper.small-sidebar.full-collapse.sidebar-collapse>.md-sidebar {
               margin-left: -var(--sidebar-width-small);
         }
         .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;
         padding:0 !important;
      }
      
      .main-wrapper .md-logo-img {
         width: 3rem;
         /*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.5rem;
         /*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 ,.sidebar-nav>.nav-item i.iconfont{
         font-size: 1.15rem;
         padding: 0 1rem;
      }
      
      .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: 0rem;
         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, .65);
      }
      /*默认鼠标悬浮字体：深灰色 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: rgba(0, 0, 0, 1);
      }
      /*默认树状展开时父元素背景 以及悬浮到元素上*/
      
      .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: 1rem;
         /*line-height: 1.428571429;*/
         color: #555;
         vertical-align: middle;
         position: relative;
         outline: none;
      }
      
      .searchable-select-holder {
         white-space: nowrap;
         padding: 0.375rem 0.75rem;
         display:flex;
         align-items: center; 
         background-image: none;
         border: 1px solid #ccc;
         border-radius: 4px;
         font-size: 1rem;
         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: var(--primary);/*#28a4c9*/
         color: white;
      }
      /*form 定制*/
      
      .searchable-select-caret {
         border: 0;
      }
      
      .searchable-select-holder,
      .select {
         height: 35px;
         line-height: 1.5;
         border-radius: 5px !important;
         -webkit-border-radius: 5px !important;
         -moz-border-radius: 5px !important;
         -ms-border-radius: 5px !important;
         -o-border-radius: 5px !important;
      }
      select option:checked,
      select option:focus,
      select option:hover {
         /*background-color: var(--primary); /* 设置选中时背景色为红色 */*/
      }

      /*右侧三角图标*/
      
      .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 0px;
         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.sm {
         width: 30px;
         height: 16px;
      }
      
      .switch-core:after {
         content: "";
         position: absolute;
         top: 1.5px;
         left: 1.5px;
         border-radius: 100%;
         transition: all .3s;
         width: 16px;
         height: 16px;
         background-color: var(--white);
      }
      .switch-core.sm:after {
         top: 1px;
         left: 1px;
         width: 13px;
         height: 13px;
      }
      .switch-input:checked+.switch-label .switch-core {
         border-color: var(--primary);
         /*#409eff;*/
         background-color: var(--primary);
         /*#409eff;*/
      }
      
      .switch-input:checked+.switch-label .switch-core:after {
         left: 100%;
         margin-left: -17px;
      }
      .switch-input:checked+.switch-label .switch-core.sm:after {
         left: 100%;
         margin-left: -13px;
      }
      /*单选复选按钮 checkbox radio*/
      
      .form-option {
         position: relative;
         display: block; 
         vertical-align: middle;
         margin-right: 10px;
         font-size: 12px;
      }
      /*选择按钮横向排列*/
      
      .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.sm,
      .form-radio.sm{
         height: 16px;
         width: 16px;
         top: 1px;
         border: 1.2px solid #B5B5B5;
      }
      
      .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.sm:before,
      .form-radio.sm:before {
         padding: 0;
         /* margin: 2px; */
         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: 3px;
         -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
      }
      input+.form-radio.sm:before {
         width: 8px;
         height: 8px;
         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: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-checkbox.sm:before {
         top: 2px;
         left: 2px;
         width: 7px;
         height: 3px;
         border-width: 0 0 2px 2px;
      }
      
      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(--primary);
      }
      
      input+.form-radio:before,
      input:checked+.form-checkbox,
      input:focus+.form-radio:before {
         background-color: var(--primary);
      }
      
      
      input:focus+.form-checkbox,
      input:focus+.form-radio,
      input:hover+.form-checkbox,
      input:hover+.form-radio {
         border-color: var(--primary);
      }
      /*时分秒选择器*/
      
      .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: var(--primary);/*#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: 20px;
         bottom: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;
         border-top: 1px solid #f4f4f4;
      }
      
      .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: var(--primary);/*#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: var(--primary);/*#40a9ff;*/
         /*background:rgba(255,255,255,0.9);*/
         /*background:#dae0e5;*/
         outline: 0;
      }
      
      /*.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;
      }
      
      div.dataTables_wrapper div.dataTables_paginate {
            padding-top: 0px; 
            margin-top: 0
      }
      
      .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-default {
      background-color: #f8f9fa;
      border-color: #ddd;
      color: #444;
   }
      /*.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;
         -ms-flex-align: start;
         align-items: flex-start;
         -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 */

      .pagination>li>a, .pagination>li>span{
         color:var(--primary);
      }
      .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
         background-color:var(--primary);
         border-color:var(--primary);
         color:"#fff";
         }

      .dataTable th,
      .dataTable td {
         padding: 5px !important;
         line-height: 1.5 !important;
         white-space: nowrap !important;
         vertical-align: middle !important;
      }


   /* dataTables */

   div.dataTables_wrapper div.dataTables_length {
         float: left;
         /*margin-right: 20px;*/
   }

   div.dataTables_wrapper div.dataTables_info {
         float: left;
         line-height: 35px;
         margin-left:10px
   }

   div.dataTables_wrapper div.dataTables_paginate {
         padding-top: 8px;
   }


   /* 翻页器 */

   .dataTables_paginate a:focus,
   .dataTables_paginate a:hover {
         outline: 0;
   }

   div.dataTables_scrollBody>table>thead>tr>th {
         padding-top: 0px !important;
         padding-bottom: 0px !important;
   }
      
      .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;
      }

      .hover-underline:hover {
         text-decoration: underline;
         cursor: pointer;
         }
         .table-button-header {
         padding-right: 100px;
         }
         .table-button-bottom {
         display: flex;
         align-items: center;
         justify-content: space-between;
         }
         .table-bottom-lf {
         display: flex;
         align-items: center;
         justify-content: flex-start;
         }
         .dataTables_empty {
               font-size: 14px !important;
         }
         .dataTables_filter {
         width: 200px !important;
         }
         .table-bottom-lf .dataTables_length{
         width: 140px !important;
         }
   
         .table-bottom-lf .dataTables_length label {
         margin: 0px !important;
         color: #000 !important;
         font-weight: normal !important;
         }
         .table-bottom-lf .dataTables_info {
         width: 360px !important;
         padding: 0px !important;
         font-weight: normal !important;
         font-size: 12px !important;
         color: var(--gray) !important;
         }
         .dataTable td {
         padding: 2px 5px !important;
         /*border-top: 1px solid #d9d9d9 !important;*/
         }
         table.dataTable > thead > tr > th {
         border-bottom: none !important;
         }
   
         .dataTables_wrapper .dataTables_paginate {
         display: flex !important;
         margin: 10px 0 !important;
         padding: 0px !important;
         }
         .dataTables_wrapper .dataTables_paginate > span {
         display: flex !important;
         }
         .dataTables_wrapper .dataTables_paginate > span > a {
         border-radius: 0px !important;
         }
   
         .dataTables_wrapper .dataTables_paginate .ellipsis {
         border-left: 1px solid #dddddd  !important;
         border-top: 1px solid #dddddd !important;
         border-bottom: 1px solid #dddddd !important;
         color: var(--primary) !important;
         padding-top: 3px !important;
         }
         .dataTables_wrapper .dataTables_paginate .paginate_button {
         padding: 6px 12px !important;
         color: var(--primary) !important;
         border-top: 1px solid #dddddd !important;
         border-left: 1px solid #dddddd !important;
         border-bottom: 1px solid #dddddd !important;
         margin: 0px !important;
         }
         .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
         background: #eeeeee !important;
         padding: 6px 12px !important;
         color: var(--primary) !important;
         margin: 0px !important;
         border-right: 1px solid #dddddd !important;
         }
   
         .dataTables_wrapper .dataTables_paginate .paginate_button:active {
         background: #f3fff6 !important;
         box-shadow: none;
         }
   
         .dataTables_wrapper .dataTables_paginate .paginate_button.current {
         background-color: var(--primary) !important;
         color: #fff !important;
         border-color: var(--primary) !important;
         margin: 0px !important;
         }
   
         .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
         color: #f3fff6 !important;
         }
   
         .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
         cursor: not-allowed !important;
         background: #fff !important;
         }
         .dataTables_paginate > a:last-child {
         border-right: 1px solid #dddddd !important;
         border-top-right-radius: 4px !important;
         border-bottom-right-radius: 4px !important;
         border-top-left-radius: 0px !important;
         border-bottom-left-radius: 0px !important;
         }
         .dataTables_paginate > a:first-child {
         border-top-left-radius: 4px !important;
         border-bottom-left-radius: 4px !important;
         border-top-right-radius: 0px !important;
         border-bottom-right-radius: 0px !important;
         }
   
         /*input[type='checkbox']:not(.switch-input) {
         width: 15px;
         height: 15px;
         margin-top: 2px;
         position: relative;
         }
         input[type='checkbox']:not(.switch-input)::after {
         position: absolute;
         top: 0;
         color: #000;
         width: 15px;
         height: 15px;
         display: inline-block;
         visibility: visible;
         padding-left: 0px;
         text-align: center;
         content: ' ';
         border-radius: 3px;
         }
         input[type='checkbox']:not(.switch-input):checked::after {
         content: '√';
         color: #fff;
         font-size: 13px;
         line-height: 18px;
         text-align: center;
         background-color: var(--primary);
         }*/ 
         .dataTables_wrapper .dataTables_scroll{
      /*height:100% !important;*/
      border:1px solid var(--gray-light3);
   }
   .dataTables_wrapper.no-footer .dataTables_scrollBody {
         border-bottom: 0; 
   }

/*加载页*/
   .loading-page{
      width: 100%;
      height: 100%;
      position: fixed;
      top:0;left: 0;
      z-index: 9999999;
      background-color: #fff;

   }
   .loading-page .pic{
      width: 50px;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
   }
   .loading-page .pic i{
      display: block;
      float: left;
      width: 6px;
      height: 50px;
      background-color: var(--primary);
      margin: 0 2px;
      transform: scaleY(.4);
      animation: loadingPage 1.2s infinite;
   }
   .loading-page .pic i:nth-child(2){
      animation-delay: .1s; 
   }
   .loading-page .pic i:nth-child(3){
      animation-delay: .2s;
   }
   .loading-page .pic i:nth-child(4){
      animation-delay: .3s;
   }
   .loading-page .pic i:nth-child(5){
      animation-delay: .4s;
   }
   @keyframes loadingPage{
      0%,40%,100%{transform: scaleY(.4);}
      20%{transform: scaleY(1);}
   }

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