@charset "UTF-8";



/*

1.1 分离 icon图标 与样式庫

 */





:root {

    /* Color 可以自定义相关配色 */

    /* var属性兼容性 --> https://www.caniuse.com/#feat=css-variables */

    /* 标准色 */

    --dw: 1px;

    --red: #e54d42;

    --orange: #f37b1d;

    --yellow: #fbbd08;

    --olive: #8dc63f;

    --green: #39b54a;

    --cyan: #1cbbb4;

    --blue: #0081ff;

    --purple: #6739b6;

    --mauve: #9c26b0;

    --pink: #e03997;

    --brown: #a5673f;

    --grey: #8799a3;

    --black: #000000;

    --darkGray: #666666;

    --gray: #aaaaaa;

    --ghostWhite: #f1f1f1;

    --white: #ffffff;

    /* 浅色 */

    --redLight: #fadbd9;

    --orangeLight: #fde6d2;

    --yellowLight: #fef2ce;

    --oliveLight: #e8f4d9;

    --greenLight: #d7f0db;

    --blackLight: #00000080;

    --cyanLight: #d2f1f0;

    --blueLight: #cce6ff;

    --purpleLight: #e1d7f0;

    --mauveLight: #ebd4ef;

    --pinkLight: #f9d7ea;

    --brownLight: #ede1d9;

    --greyLight: #e7ebed;

    --whiteLight: #ffffff80;



    /* 渐变色 */

    --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);

    --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);

    --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);

    --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);

    --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);

    --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);



    /* 阴影透明色 */

    --ShadowSize: 3px 3px 4px;

    --redShadow: rgba(204, 69, 59, 0.2);

    --orangeShadow: rgba(217, 109, 26, 0.2);

    --yellowShadow: rgba(224, 170, 7, 0.2);

    --oliveShadow: rgba(124, 173, 55, 0.2);

    --greenShadow: rgba(48, 156, 63, 0.2);

    --cyanShadow: rgba(28, 187, 180, 0.2);

    --blueShadow: rgba(0, 102, 204, 0.2);

    --purpleShadow: rgba(88, 48, 156, 0.2);

    --mauveShadow: rgba(133, 33, 150, 0.2);

    --pinkShadow: rgba(199, 50, 134, 0.2);

    --brownShadow: rgba(140, 88, 53, 0.2);

    --greyShadow: rgba(114, 130, 138, 0.2);

    --grayShadow: rgba(114, 130, 138, 0.2);

    --blackShadow: rgba(26, 26, 26, 0.2);

    /*默认*/

    --border_radius: 3px;

    --margin_config: 5px;

    --padding_config: 5px;

    --grid_padding_config: 10px;

    --grid_padding_cu-tag: 3px 4px;

    /*grid.grid-square .cu-tag*/

    --grid_padding_cu-tag_borderRadius: 3px
        /* border-left-bottom-radius:3px */

    ;

    --grid_cuIcon_fontSize: 2rem;

    /*.grid.grid-square>view>[class*="icon-"],.grid.grid-square>div>[class*="icon-"]  表单 图标 字体大小*/



    --cu-bar_min-height: 50px;

    /*cu-bar 操作条 盒子模型 最低高度*/

    --cu-bar_border-nav_top: -5px;

    /*nap 导航 定位 top*/

    --cu-bar_border_navSelect_height: 6px;

    /*.cu-bar .active.border-nav [class*="bg-"]:last-child 滑动切换底部边框样式 高度*/

    --sticky: sticky;

    --inherit: inherit;

    /* 继承 */

    --initial: initial;

    /* 初始值 */

    --unset: unset;

    /* 未设置 */

    background-color: #ffffff;

    /*配置全局背景*/

    /* font-size: 3rem; */

    color: #000000;

    font-family: Helvetica Neue, Helvetica, sans-serif, "Microsoft YaHei", "宋体", Arial Narrow, Arial, Simsun, Tahoma, "微软雅黑";

}



/* ====================

     width

     height

 ==================== */

.w-100 {

    width: 100%;

}



.min-w-100 {

    min-width: 100%;

}



.max-w-100 {

    max-width: 100%;

}



.w-90 {

    width: 90%;

}



.min-w-90 {

    min-width: 90%;

}



.max-w-90 {

    max-width: 90%;

}



.w-80 {

    width: 80%;

}



.min-w-80 {

    min-width: 80%;

}



.max-w-80 {

    max-width: 80%;

}



.w-75 {

    width: 75%;

}



.min-w-75 {

    min-width: 75%;

}



.max-w-75 {

    max-width: 75%;

}



.w-60 {

    width: 60%;

}



.min-w-60 {

    min-width: 60%;

}



.max-w-60 {

    max-width: 60%;

}



.w-50 {

    width: 50%;

}



.min-w-50 {

    min-width: 50%;

}



.max-w-50 {

    max-width: 50%;

}



.w-25 {

    width: 25%;

}



.min-w-25 {

    min-width: 25%;

}



.max-w-25 {

    max-width: 25%;

}



.h-100 {

    height: 100%;

}



.min-h-100 {

    min-height: 100%;

}



.max-h-100 {

    max-height: 100%;

}



.h-90 {

    height: 90%;

}



.min-h-90 {

    min-height: 90%;

}



.max-h-90 {

    max-height: 90%;

}



.h-80 {

    height: 80%;

}



.min-h-80 {

    min-height: 80%;

}



.max-h-80 {

    max-height: 80%;

}



.h-75 {

    height: 75%;

}



.min-h-75 {

    min-height: 75%;

}



.max-h-75 {

    max-height: 75%;

}



.h-60 {

    height: 60%;

}



.min-h-60 {

    min-height: 60%;

}



.max-h-60 {

    max-height: 60%;

}



.h-50 {

    height: 50%;

}



.min-h-50 {

    min-height: 50%;

}



.max-h-50 {

    max-height: 50%;

}



.h-25 {

    height: 25%;

}



.min-h-25 {

    min-height: 25%;

}



.max-h-25 {

    max-height: 25%;

}



/* ==================

     list-space

     去除display:inline-block;产生的间距

  ==================== */

.list-space {

    vertical-align: top;

    /*letter-spacing: -0.31em;*/

    /* webkit */

    letter-spacing: normal;

    /* IE < 8 重置 */

    word-spacing: -0.43em;

    /* IE < 8 && gecko */

}





/* ====================

     position

     定位

 ==================== */

.position-relative {

    position: relative;

}



.position-absolute {

    position: absolute;

}



.position-fixed {

    position: fixed;

}



/**粘性定位，

 该定位基于用户滚动的位置。在窗口内的时候，

 其行为与相对定位（position:relative）一样；

 超出窗口的时候，它的表现就像固定定位（position:fixed）。

 

 

 设置position:sticky同时给一个(top,bottom,right,left)之一即可

 使用条件：

 1、父元素不能overflow:hidden或者overflow:auto属性。

 2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

 3、父元素的高度不能低于sticky元素的高度

 4、sticky元素仅在其父元素内生效

 */

.position-sticky {

    position: sticky;

    position: -webkit-sticky;

}



.position-top {

    top: 0;

}



.position-right {

    right: 0;

}



.position-bottom {

    bottom: 0;

}



.position-left {

    left: 0;

}



.position-center {

    top: 50%;

    left: 50%;

    transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    -webkit-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -o-transform: translateX(-50%) translateY(-50%);

}



.position-top-center {

    top: 50%;

    transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -o-transform: translateY(-50%);

}



.position-left-center {

    left: 50%;

    transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -o-transform: translateX(-50%);

}



/* ====================

     z-index

 ==================== */

.z-index {

    z-index: inherit !important;

}



.z-index-one {

    z-index: 1;

}



.z-index-two {

    z-index: 9;

}



.z-index-three {

    z-index: 99;

}



.z-index-_one {

    z-index: -1;

}



.z-index-_two {

    z-index: -9;

}



.z-index-_three {

    z-index: -99;

}



/* ====================

     float

     浮动

 ==================== */

.float-left {

    float: left;

}



.float-right {

    float: right;

}



/* ====================

     clearfix

     清除浮动带来的影响

 ==================== */

.clearfix.position-relative,

.clearfix.position-absolute,

.clearfix.position-fixed {

    overflow: hidden;

    /*主动设置宽度**/

    /* display:inline-block; 设置为行内块 会丢失宽度并不会自适应了*/

}



/**解决浮动高度坍塌 加在父级就好了 但是不能解决解决定位高度坍塌*/

.clearfix {

    zoom: 1;

}



/*兼容ie触发hasLayout*/

.clearfix::after,

.clearfix::before {

    content: "";

    display: table;

    width: 0;

    visibility: hidden;

}



.clearfix::after {

    clear: both;

}



.clear-block::before,

.clear-block::after {

    content: "";

    display: block;

}



.before-table::before,

.after-table::after {

    content: "";

    display: table;

}



/* display */

.display-block {

    display: block;

}



.display-table {

    display: table;

}



.display-inline {

    display: inline;

}



.display-inlineBlock {

    display: inline-block;

}



.display-inlineTable {

    display: inline-table;

}



/*

 *flex

 *flex_box

 */

/* ====================

     flex flex_box

     设置弹性布局

 

 1.css 列（CSS columns）在弹性盒子中不起作用

 2.float, clear and vertical-align 在flex项目中不起作用

 

 ==================== */

/*（伸缩盒最新版本）（CSS3）*/

.flex {

    display: flex;

    /*新版本语法:opera 12.1,Firefox 22+*/

    display: -moz-flex;

    /* Firefox 18+ */

    display: -webkit-flex;

    /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

}



.inline-flex {

    display: inline-flex;

    display: -webkit-inline-flex;

}



/*（伸缩盒过渡版本）（CSS3）*/

.flexbox {

    display: flexbox;

    /**将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒过渡版本)*/

    display: -ms-flexbox;

    /*混合版本语法：IE 10*/

}



.flexinlinebox {

    display: inline-flexbox;

    /*将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）*/

    display: -ms-inline-flexbox;

    /*混合版本语法：IE 10）*/

}



/*伸缩盒最老版本*/

.flex_box {

    display: box;

    /*将对象作为弹性伸缩盒显示，同样继承block属性。（伸缩盒最老版本）*/

    display: -moz-box;

    /*老版本语法：Firefox(buggy) Firefox 17- */

    display: -webkit-box;

    /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/

}



.flex_inlinebox {

    display: inline-box;

    display: -moz-inline-box;

    display: -webkit-inline-box;

}



.flex-basis-xs {

    flex-basis: 20%;

}



.flex-basis-sm {

    flex-basis: 40%;

}



.flex-basis-df {

    flex-basis: 50%;

}



.flex-basis-lg {

    flex-basis: 60%;

}



.flex-basis-xl {

    flex-basis: 80%;

}



.flex-one {

    flex: 1;

}



.flex_box-one {

    box-flex: 1;

    -moz-box-flex: 1;

    -webkit-box-flex: 1;

}



.flex-two {

    flex: 2;

}



.flex_box-two {

    box-flex: 2;

    -moz-box-flex: 2;

    -webkit-box-flex: 2;

}



.flex-three {

    flex: 3;

}



.flex_box-three {

    box-flex: 3;

    -moz-box-flex: 3;

    -webkit-box-flex: 3;

}



/* flex 换行 在rtl下，自右向左*/

.flex-nowarp {

    flex-wrap: nowrap;

    -ms-flex-wrap: nowrap;

}



.flex-wrap {

    flex-wrap: wrap;

    -ms-flex-wrap: wrap;

}



/* 多行显示。与wrap相反 */

.flex-wrap-reverse {

    flex-wrap: wrap-reverse;

    -ms-flex-wrap: wrap-reverse;

}



/*反转反向*/

.flex-direction-reverse {

    flex-direction: row-reverse;

}



.flex_box-direction-reverse {

    box-direction: reverse;

    -moz-box-direction: reverse;

    -webkit-box-direction: reverse;

}



/*改变主轴为Y轴*/

.flex-direction-column {

    flex-direction: column;

}



.flex_box-direction-column {

    -moz-box-direction: column;

    -webkit-box-direction: column;

    box-direction: column;

}



/* 对齐 */

.flex-start {

    justify-content: start;

    justify-content: flex-start;

    /* justify-items: start;

     justify-items: flex-start;

     justify-items: self-start;

     justify-self: start;

     justify-self: flex-start;

     justify-self: self-start; */

}



.flex_box-start {

    box-pack: start;

    -moz-box-pack: start;

    -webkit-box-pack: start;

    -o-box-pack: start;

}



/**水平居中*/

.flex-center {

    justify-content: center;

    /* justify-items: center;

     justify-self: center; */

}



.flex_box-center {

    box-pack: center;

    -moz-box-pack: center;

    -o-box-pack: center;

    -webkit-box-pack: center;

}



.flex-end {

    justify-content: end;

    justify-content: flex-end;

    /* justify-items: end;

     justify-items: flex-end;

     justify-items: self-end;

     justify-self: end;

     justify-self: flex-end;

     justify-self: self-end; */

}



.flex_box-end {

    box-pack: end;

    -o-box-pack: end;

    -webkit-box-pack: end;

    -moz-box-pack: end;

}





/*两端对齐*/

.flex-space-between {

    justify-content: space-between;

}



.flex_box-space-between {

    box-pack: justify;

    -moz-box-pack: justify;

    -o-box-pack: justify;

    -webkit-box-pack: justify;

}



.flex-space-around {

    justify-content: space-around;

}



/* 动态尺寸：calc((100% - padding * padding的数量 - margin * margin的数量 - border * border的数量) / 列数)， 没有边距就不减。 */

.flex-space-evenly {

    justify-content: space-evenly;

    /*IE 浏览器失效*/

}



/* 不换行元素解决 space-evenly;IE 浏览器失效*/

.flex-space-evenly.flex-nowarp {

    justify-content: space-between;

}



.flex-space-evenly.flex-space-between {

    justify-content: space-between;

}



.flex-space-evenly.flex-space-between>* {

    margin-left: 2%;

    margin-right: 2%;

}



.flex-space-evenly.flex-nowarp::before,

.flex-space-evenly.flex-nowarp::after {

    content: '';

    display: block;

}







/* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */

.flex-stretch {

    justify-content: stretch;

}





/* ====================

     align

     元素对齐方式

 ==================== */



/**

 align-start,

 align-end,

 align-center,

 align-stretch,

 

 align_box 都是设置在父级的;

 */

/**垂直顶部对齐*/

.align-start {

    align-items: start;

    align-items: flex-start;

}



.self-start {

    align-self: flex-start;

}



.align_box-start {

    box-align: start;

    -moz-box-align: start;

    -webkit-box-align: start;

}



/**垂直居中对齐*/

.align-center {

    align-items: center;

}



.self-center {

    align-self: center;

}



.align_box-center {

    box-align: center;

    -moz-box-align: center;

    -webkit-box-align: center;

}



/**垂直底部对齐*/

.align-end {

    align-items: end;

    align-items: flex-end;

}



.self-end {

    align-self: flex-end;

}



.align_box-end {

    box-align: end;

    -moz-box-align: end;

    -webkit-box-align: end;

}



/*flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。*/

.align-stretch {

    align-self: stretch;

}



.align_box-stretch {

    box-align: stretch;

    -moz-box-align: stretch;

    -webkit-box-align: stretch;

}



/* ====================

     box-sizing

     改变盒子计算方式

 ==================== */

.box-sizing {

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

}





/* ====================

     text-align

     文本对齐方式

 ==================== */

/* text-left */

.text-left {

    text-align: left;

    text-align: -webkit-left;

}



.text-center {

    text-align: center;

    text-align: -webkit-center;

}



/* 做IE 兼容 */

.text-center>* {

    margin-left: auto;

    margin-right: auto;

}



.text-right {

    text-align: right;

    text-align: -webkit-right;

}



.text-align-last-center {

    text-align-last: center;

    -ms-text-align-last: center;

    -moz-text-align-last: center;

}



/* 两端对齐 */



/* 可以使每行文字两端对齐，

 兼容所有浏览器，对双字节的文字不支持 */

.text-align-justify {

    text-align: justify;

    /* IE 浏览器生效*/

    text-align-last: justify;

    /* goole中 生效 IE中无效*/

    -ms-text-align-last: justify;

    -moz-text-align-last: justify;

}



.text-align-justify>* {

    text-align-last: initial;

}



/* ====================

     文本溢出隐藏

 ==================== */

.text-overflow-ellipsis {

    /* width: 100%; IE6 需要定义宽度 */

    /*转换为...*/

    text-overflow: ellipsis;

    -ms-text-overflow: ellipsis;

    -o-text-overflow: ellipsis;

}



/*不显示...*/

.text-overflow-clip {

    /* width: 100%; IE6 需要定义宽度 */

    /*使用失败*/

    text-overflow: clip;

    -ms-text-overflow: clip;

    -o-text-overflow: clip;

}



/*暂时无法使用*/

.text-overflow-ellipsisWord {

    /* width: 100%; IE6 需要定义宽度 */

    text-overflow: ellipsis-word;

    -ms-text-overflow: ellipsis-word;

    -o-text-overflow: ellipsis-word;

}



.text-overflow-clip,

.text-overflow-ellipsis,

.text-overflow-ellipsisWord {

    overflow: hidden;

}





.text-overflow-one,

.text-overflow-two,

.text-overflow-three {

    display: -moz-box;

    display: -webkit-box;

    box-orient: vertical;

    -moz-box-orient: vertical;

    -webkit-box-orient: vertical;

}



/* 多行 */

.text-overflow-one {

    line-clamp: 1;

    -webkit-line-clamp: 1;

}



.text-overflow-two {

    line-clamp: 2;

    -webkit-line-clamp: 2;

}



.text-overflow-three {

    line-clamp: 3;

    -webkit-line-clamp: 3;

}



.text-overflow-ellipsis.text-overflow-one>* {

    overflow: hidden;

}



.text-normal {

    white-space: normal;

}



/* 设置不折行 */

.text-nowarp {

    white-space: nowrap;

}



.text-pre_warp {

    white-space: pre-wrap;

}



.text-pre_line {

    white-space: pre-line;

}



/* 文章开头自动换行两个字体像素 */

.text-indent {

    text-indent: 2em;

}



/* font */

.font-size-1 {



    font-size: .75rem;

}



.font-size-2 {

    font-size: .875rem;

}



.font-size-3 {

    font-size: 1rem;

}



.font-size-4 {

    font-size: 1.125rem;

}



.font-size-5 {

    font-size: 1.25rem;

}



.font-size-6 {

    font-size: 1.375rem;

}



/* 

 * xs 超小屏

 * sm 小屏

 * md 中屏

 * lg 大屏

 */











/* ====================

     margin

     外边距

 ==================== */

.margin-auto {

    margin-left: auto;

    margin-right: auto;

}



.margin-0 {

    margin: 0 !important;

}



.margin-top-0 {

    margin-top: 0 !important;

}



.margin-right-0 {

    margin-right: 0 !important;

}



.margin-bottom-0 {

    margin-bottom: 0 !important;

}



.margin-left-0 {

    margin-left: 0 !important;

}



.margin.w-100,

.margin-xs.w-100,

.margin-lg.w-100,

.margin-xl.w-100,

.margin-sm.w-100 {

    width: auto;

}



.margin-xs {

    margin: .3125rem;

}



.margin-sm {

    margin: .625rem;

}



.margin {

    margin: .9375rem;

}



.margin-lg {

    margin: 1.25rem
}



.margin-xl {

    margin: 1.5625rem;

}





.margin-top-xs {

    margin-top: .3125rem;

}



.margin-top-sm {

    margin-top: .625rem;

}



.margin-top {

    margin-top: .9375rem;

}



.margin-top-lg {

    margin-top: 1.25rem
}



.margin-top-xl {

    margin-top: 1.5625rem;

}



.margin-right-xs {

    margin-right: .3125rem;

}



.margin-right-sm {

    margin-right: .625rem;

}



.margin-right {

    margin-right: .9375rem;

}



.margin-right-lg {

    margin-right: 1.25rem
}



.margin-right-xl {

    margin-right: 1.5625rem;

}



.margin-bottom-xs {

    margin-bottom: .3125rem;

}



.margin-bottom-sm {

    margin-bottom: .625rem;

}



.margin-bottom {

    margin-bottom: .9375rem;

}



.margin-bottom-lg {

    margin-bottom: 1.25rem
}



.margin-bottom-xl {

    margin-bottom: 1.5625rem;

}



.margin-left-xs {

    margin-left: .3125rem;

}



.margin-left-sm {

    margin-left: .625rem;

}



.margin-left {

    margin-left: .9375rem;

}



.margin-left-lg {

    margin-left: 1.25rem
}



.margin-left-xl {

    margin-left: 1.5625rem;

}



.margin-lr-xs {

    margin-left: .3125rem;

    margin-right: .3125rem;

}



.margin-lr-sm {

    margin-left: .625rem;

    margin-right: .625rem;

}



.margin-lr {

    margin-left: .9375rem;

    margin-right: .9375rem;

}



.margin-lr-lg {

    margin-left: 1.25rem;

    margin-right: 1.25rem;

}



.margin-lr-xl {

    margin-left: 1.5625rem;

    margin-right: 1.5625rem;

}



.margin-tb-xs {

    margin-top: .3125rem;

    margin-bottom: .3125rem;

}



.margin-tb-sm {

    margin-top: .625rem;

    margin-bottom: .625rem;

}



.margin-tb {

    margin-top: .9375rem;

    margin-bottom: .9375rem;

}



.margin-tb-lg {

    margin-top: 1.25rem;

    margin-bottom: 1.25rem;

}



.margin-tb-xl {

    margin-top: 1.5625rem;

    margin-bottom: 1.5625rem;

}



/* ====================

     padding-内边距

 ==================== */





.padding-0 {

    padding: 0 !important;

}



.padding-top-0 {

    padding-top: 0 !important;

}



.padding-right-0 {

    padding-right: 0 !important;

}



.padding-bottom-0 {

    padding-bottom: 0 !important;

}



.padding-left-0 {

    padding-left: 0 !important;

}



.padding-xs {

    padding: .3125rem;

}



.padding-sm {

    padding: .625rem;

}



.padding {

    padding: .9375rem;

}



.padding-lg {

    padding: 1.25rem;

}



.padding-xl {

    padding: 1.5625rem;

}



.padding-top-xs {

    padding-top: .3125rem;

}



.padding-top-sm {

    padding-top: .625rem;

}



.padding-top {

    padding-top: .9375rem;

}



.padding-top-lg {

    padding-top: 1.25rem;

}



.padding-top-xl {

    padding-top: 1.5625rem;

}



.padding-right-xs {

    padding-right: .3125rem;

}



.padding-right-sm {

    padding-right: .625rem;

}



.padding-right {

    padding-right: .9375rem;

}



.padding-right-lg {

    padding-right: 1.25rem;

}



.padding-right-xl {

    padding-right: 1.5625rem;

}



.padding-bottom-xs {

    padding-bottom: .3125rem;

}



.padding-bottom-sm {

    padding-bottom: .625rem;

}



.padding-bottom {

    padding-bottom: .9375rem;

}



.padding-bottom-lg {

    padding-bottom: 1.25rem;

}



.padding-bottom-xl {

    padding-bottom: 1.5625rem;

}



.padding-left-xs {

    padding-left: .3125rem;

}



.padding-left-sm {

    padding-left: .625rem;

}



.padding-left {

    padding-left: .9375rem;

}



.padding-left-lg {

    padding-left: 1.25rem;

}



.padding-left-xl {

    padding-left: 1.5625rem;

}



.padding-lr-xs {

    padding-left: .3125rem;

    padding-right: .3125rem;

}



.padding-lr-sm {

    padding-left: .625rem;

    padding-right: .625rem;

}



.padding-lr {

    padding-left: .9375rem;

    padding-right: .9375rem;

}



.padding-lr-lg {

    padding-left: 1.25rem;

    padding-right: 1.25rem;

}



.padding-lr-xl {

    padding-left: 1.5625rem;

    padding-right: 1.5625rem;

}



.padding-tb-xs {

    padding-top: .3125rem;

    padding-bottom: .3125rem;

}



.padding-tb-sm {

    padding-top: .625rem;

    padding-bottom: .625rem
}



.padding-tb {

    padding-top: .9375rem;

    padding-bottom: .9375rem;

}



.padding-tb-lg {

    padding-top: 1.25rem;

    padding-bottom: 1.25rem;

}



.padding-tb-xl {

    padding-top: 1.5625rem;

    padding-bottom: 1.5625rem;

}



/* ====================

         border

 ==================== */

/* 圆角 */

.round {

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

}



.radius {

    border-radius: .1875rem;

    -webkit-border-radius: .1875rem;

    -moz-border-radius: .1875rem;

    -ms-border-radius: .1875rem;

    -o-border-radius: .1875rem;

}



/* ====================

         color

 ==================== */

.text-red,

.line-red,

.lines-red {

    color: #e54d42;

}



.text-orange,

.line-orange,

.lines-orange {

    color: #f37b1d;

}



.text-yellow,

.line-yellow,

.lines-yellow {

    color: #fbbd08;

}



.text-olive,

.line-olive,

.lines-olive {

    color: #8dc63f;

}



.text-green,

.line-green,

.lines-green {

    color: #39b54a;

}



.text-cyan,

.line-cyan,

.lines-cyan {

    color: #1cbbb4;

}



.text-blue,

.line-blue,

.lines-blue {

    color: #0081ff;

}



.text-purple,

.line-purple,

.lines-purple {

    color: #6739b6;

}



.text-mauve,

.line-mauve,

.lines-mauve {

    color: #9c26b0;

}



.text-pink,

.line-pink,

.lines-pink {

    color: #e03997;

}



.text-brown,

.line-brown,

.lines-brown {

    color: #a5673f;

}



.text-grey,

.line-grey,

.lines-grey {

    color: #8799a3;

}



.text-gray,

.line-gray,

.lines-gray {

    color: #aaaaaa;

}



.text-black,

.line-black,

.lines-black {

    color: #000000;

}



.text-white,

.line-white,

.lines-white {

    color: #ffffff;

}



/* ====================

     background

 ==================== */





.bg-red {

    background-color: #e54d42;

    color: #ffffff;

}



.bg-orange {

    background-color: #f37b1d;

    color: #ffffff;

}



.bg-yellow {

    background-color: #fbbd08;

    color: #000000;

}



.bg-olive {

    background-color: #8dc63f;

    color: #ffffff;

}



.bg-green {

    background-color: #39b54a;

    color: #ffffff;

}



.bg-cyan {

    background-color: #1cbbb4;

    color: #ffffff;

}



.bg-blue {

    background-color: #0081ff;

    color: #ffffff;

}



.bg-purple {

    background-color: #6739b6;

    color: #ffffff;

}



.bg-mauve {

    background-color: #9c26b0;

    color: #ffffff;

}



.bg-pink {

    background-color: #e03997;

    color: #ffffff;

}



.bg-brown {

    background-color: #a5673f;

    color: #ffffff;

}



.bg-grey {

    background-color: #8799a3;

    color: #ffffff;

}



.bg-gray {

    background-color: #f0f0f0;

    color: #000000;

}



.bg-black {

    background-color: #000000;

    color: #ffffff;

}



.bg-white {

    background-color: #ffffff;

    color: #666666;

}



.bg-shadeTop {

    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));

    color: #ffffff;

}



.bg-shadeBottom {

    background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));

    color: #ffffff;

}



.bg-red.light {

    color: #e54d42;

    background-color: #666666;

}



.bg-orange.light {

    color: #f37b1d;

    background-color: #fde6d2;

}



.bg-yellow.light {

    color: #fbbd08;

    background-color: #fef2ce;

}



.bg-olive.light {

    color: #8dc63f;

    background-color: #e8f4d9;

}



.bg-green.light {

    color: #39b54a;

    background-color: #d7f0db;

}



.bg-cyan.light {

    color: #1cbbb4;

    background-color: #d2f1f0;

}



.bg-blue.light {

    color: #0081ff;

    background-color: #cce6ff;

}



.bg-purple.light {

    color: #6739b6;

    background-color: #e1d7f0;

}



.bg-mauve.light {

    color: #9c26b0;

    background-color: #ebd4ef;

}



.bg-pink.light {

    color: #e03997;

    background-color: #f9d7ea;

}



.bg-brown.light {

    color: #a5673f;

    background-color: #ede1d9;

}



.bg-grey.light {

    color: #8799a3;

    background-color: #e7ebed;

}



.bg-gradual-red {

    background-image: linear-gradient(45deg, #f43f3b, #ec008c);

    color: #ffffff;

}



.bg-gradual-orange {

    background-image: linear-gradient(45deg, #ff9700, #ed1c24);

    color: #ffffff;

}



.bg-gradual-green {

    background-image: linear-gradient(45deg, #39b54a, #8dc63f);

    color: #ffffff;

}



.bg-gradual-purple {

    background-image: linear-gradient(45deg, #9000ff, #5e00ff);

    color: #ffffff;

}



.bg-gradual-pink {

    background-image: linear-gradient(45deg, #ec008c, #6739b6);

    color: #ffffff;

}



.bg-gradual-blue {

    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);

    color: #ffffff;

}



/* ==================

           边框

  ==================== */



/* -- 实线 -- */



.solid,

.solid-top,

.solid-right,

.solid-bottom,

.solid-left,

.solids,

.solids-top,

.solids-right,

.solids-bottom,

.solids-left,

.dashed,

.dashed-top,

.dashed-right,

.dashed-bottom,

.dashed-left {

    position: relative;

}



.solid::after,

.solid-top::after,

.solid-right::after,

.solid-bottom::after,

.solid-left::after,

.solids::after,

.solids-top::after,

.solids-right::after,

.solids-bottom::after,

.solids-left::after,

.dashed::after,

.dashed-top::after,

.dashed-right::after,

.dashed-bottom::after,

.dashed-left::after {

    content: " ";

    width: 200%;

    height: 200%;

    position: absolute;

    top: 0;

    left: 0;

    border-radius: inherit;

    -webkit-border-radius: inherit;

    -moz-border-radius: inherit;

    -ms-border-radius: inherit;

    -o-border-radius: inherit;

    transform: scale(0.5);

    transform-origin: 0 0;

    pointer-events: none;

    box-sizing: border-box;

}



.solid::after {

    border: 1px solid rgba(0, 0, 0, 0.1);

}



.solid-top::after {

    border-top: 1px solid rgba(0, 0, 0, 0.1);

}



.solid-right::after {

    border-right: 1px solid rgba(0, 0, 0, 0.1);

}



.solid-bottom::after {

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}



.solid-left::after {

    border-left: 1px solid rgba(0, 0, 0, 0.1);

}



.solids::after {

    border: .5rem solid #eee;

}



.solids-top::after {

    border-top: .5rem solid #eee;

}



.solids-right::after {

    border-right: .5rem solid #eee;

}



.solids-bottom::after {

    border-bottom: .5rem solid #eee;

}



.solids-left::after {

    border-left: .5rem solid #eee;

}



/* -- 虚线 -- */



.dashed::after {

    border: 1px dashed #ddd;

}



.dashed-top::after {

    border-top: 1px dashed #ddd;

}



.dashed-right::after {

    border-right: 1px dashed #ddd;

}



.dashed-bottom::after {

    border-bottom: 1px dashed #ddd;

}



.dashed-left::after {

    border-left: 1px dashed #ddd;

}





/* ====================

     shadow 阴影

 ==================== */



.shadow[class*="-red"] {

    box-shadow: .1875rem .1875rem .25rem rgba(204, 69, 59, 0.2);

}



.shadow[class*="-orange"] {

    box-shadow: .1875rem .1875rem .25rem rgba(217, 109, 26, 0.2);

}



.shadow[class*="-yellow"] {

    box-shadow: .1875rem .1875rem .25rem rgba(224, 170, 7, 0.2);

}



.shadow[class*="-olive"] {

    box-shadow: .1875rem .1875rem .25rem rgba(124, 173, 55, 0.2);

}



.shadow[class*="-green"] {

    box-shadow: .1875rem .1875rem .25rem rgba(48, 156, 63, 0.2);

}



.shadow[class*="-cyan"] {

    box-shadow: .1875rem .1875rem .25rem rgba(28, 187, 180, 0.2);

}



.shadow[class*="-blue"] {

    box-shadow: .1875rem .1875rem .25rem rgba(0, 102, 204, 0.2);

}



.shadow[class*="-purple"] {

    box-shadow: .1875rem .1875rem .25rem rgba(88, 48, 156, 0.2);

}



.shadow[class*="-mauve"] {

    box-shadow: .1875rem .1875rem .25rem rgba(133, 33, 150, 0.2);

}



.shadow[class*="-pink"] {

    box-shadow: .1875rem .1875rem .25rem rgba(199, 50, 134, 0.2);

}



.shadow[class*="-brown"] {

    box-shadow: .1875rem .1875rem .25rem rgba(140, 88, 53, 0.2);

}



.shadow[class*="-grey"] {

    box-shadow: .1875rem .1875rem .25rem rgba(114, 130, 138, 0.2);

}



.shadow[class*="-gray"] {

    box-shadow: .1875rem .1875rem .25rem rgba(114, 130, 138, 0.2);

}



.shadow[class*="-black"] {

    box-shadow: .1875rem .1875rem .25rem rgba(26, 26, 26, 0.2);

}



.shadow[class*="-white"] {

    box-shadow: .1875rem .1875rem .25rem rgba(26, 26, 26, 0.2);

}



.text-shadow[class*="-red"] {

    text-shadow: .1875rem .1875rem .25rem rgba(204, 69, 59, 0.2);

}



.text-shadow[class*="-orange"] {

    text-shadow: .1875rem .1875rem .25rem rgba(217, 109, 26, 0.2);

}



.text-shadow[class*="-yellow"] {

    text-shadow: .1875rem .1875rem .25rem rgba(224, 170, 7, 0.2);

}



.text-shadow[class*="-olive"] {

    text-shadow: .1875rem .1875rem .25rem rgba(124, 173, 55, 0.2);

}



.text-shadow[class*="-green"] {

    text-shadow: .1875rem .1875rem .25rem rgba(48, 156, 63, 0.2);

}



.text-shadow[class*="-cyan"] {

    text-shadow: .1875rem .1875rem .25rem rgba(28, 187, 180, 0.2);

}



.text-shadow[class*="-blue"] {

    text-shadow: .1875rem .1875rem .25rem rgba(0, 102, 204, 0.2);

}



.text-shadow[class*="-purple"] {

    text-shadow: .1875rem .1875rem .25rem rgba(88, 48, 156, 0.2);

}



.text-shadow[class*="-mauve"] {

    text-shadow: .1875rem .1875rem .25rem rgba(133, 33, 150, 0.2);

}



.text-shadow[class*="-pink"] {

    text-shadow: .1875rem .1875rem .25rem rgba(199, 50, 134, 0.2);

}



.text-shadow[class*="-brown"] {

    text-shadow: .1875rem .1875rem .25rem rgba(140, 88, 53, 0.2);

}



.text-shadow[class*="-grey"] {

    text-shadow: .1875rem .1875rem .25rem rgba(114, 130, 138, 0.2);

}



.text-shadow[class*="-gray"] {

    text-shadow: .1875rem .1875rem .25rem rgba(114, 130, 138, 0.2);

}



.text-shadow[class*="-black"] {

    text-shadow: .1875rem .1875rem .25rem rgba(26, 26, 26, 0.2);

}





/* ====================

         grid布局

 ==================== */



.grid {

    display: flex;

    display: -webkit-flex;

    flex-wrap: wrap;

    -ms-flex-wrap: wrap;

}



.grid.grid-square {

    overflow: hidden;

}



.grid.grid-square .cu-tag {

    position: absolute;

    right: 0;

    top: 0;

    border-bottom-left-radius: .1875rem;

    padding: .1875rem .25rem;



    height: auto;

    background-color: rgba(0, 0, 0, 0.5);

}



.grid.grid-square>view>[class*="icon-"],

.grid.grid-square>div>[class*="icon-"] {

    font-size: 2rem;

    position: absolute;

    color: #8799a3;

    margin: auto;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.grid.grid-square>view,

.grid.grid-square>div {

    box-sizing: border-box;

    margin-right: .625rem;

    margin-bottom: .625rem;

    border-radius: .1875rem;

    -webkit-border-radius: .1875rem;

    -moz-border-radius: .1875rem;

    -ms-border-radius: .1875rem;

    -o-border-radius: .1875rem;

    position: relative;

    overflow: hidden;

}



.grid.grid-square>view.bg-img image,

.grid.grid-square>div.bg-img img {

    width: 100%;

    height: 100%;

    position: absolute;

}



.grid.col-1.grid-square>view,

.grid.col-1.grid-square>div {

    margin-right: 0;

}



.grid.col-2.grid-square>view,

.grid.col-2.grid-square>div {

    width: calc((100% - .625rem)/2);

}



.grid.col-3.grid-square>view,

.grid.col-3.grid-square>div {

    width: calc((100% - 1.25rem)/3);

}



.grid.col-4.grid-square>view,

.grid.col-4.grid-square>div {

    width: calc((100% - 1.875rem)/4);

}



.grid.col-5.grid-square>view,

.grid.col-5.grid-square>div {

    width: calc((100% - 2.5rem)/5);

}



.grid.col-2.grid-square>view:nth-child(2n),

.grid.col-3.grid-square>view:nth-child(3n),

.grid.col-4.grid-square>view:nth-child(4n),

.grid.col-5.grid-square>view:nth-child(5n),

.grid.col-2.grid-square>div:nth-child(2n),

.grid.col-3.grid-square>div:nth-child(3n),

.grid.col-4.grid-square>div:nth-child(4n),

.grid.col-5.grid-square>div:nth-child(5n) {

    margin-right: 0;

}



.grid.col-1>view,

.grid.col-1>div {

    width: 100%;

}



.grid.col-2>view,

.grid.col-2>div {

    width: 50%;

}



.grid.col-3>view,

.grid.col-3>div {

    width: 33.33%;

}



.grid.col-4>view,

.grid.col-4>div {

    width: 25%;

}



.grid.col-5>view,

.grid.col-5>div {

    width: 20%;

}



/* ==================

           操作条

  ==================== */



.cu-bar {

    display: flex;

    display: -webkit-flex;

    position: relative;

    align-items: center;

    min-height: 3.125rem;

    justify-content: space-between;

}



.cu-bar .active {

    display: flex;

    display: -webkit-flex;

    align-items: center;

    height: 100%;

    justify-content: center;

    max-width: 100%;

}



.cu-bar .active.border-nav {

    position: relative;

    top: -.3125rem;

}



/* 底部导航 用于切换页面滑动显示 边框 */

.cu-bar .active.border-nav [class*="bg-"]:last-child {

    position: absolute;

    bottom: -0.5rem;

    min-width: 2rem;

    height: .375rem;

    left: 0;

}



.cu-bar.justify-center .active.border-nav :last-child {

    left: 0;

    right: 0;

    margin: auto;

    text-align: center;

}





/* ====================

     bg-img

 ==================== */

.bg-img {

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



/* 模态层 */

.bg-mask {

    background-color: #000000;

    position: relative;

    overflow: hidden;

}



.bg-mask .bg-img {

    position: absolute;

    z-index: 0;

}



.bg-mask .bg-img.w-100 {

    min-width: -webkit-fill-available;

}



.bg-mask .bg-img.h-100 {

    min-height: -webkit-fill-available;

}



/* 图片调整 */

.bg-mask image,

.bg-mask img,

.bg-mask video {

    width: auto;

    height: 100%;

    display: flex;

    display: -webkit-flex;

    margin: 0 auto;

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

}



/* 添加模态层 */

.bg-mask::after {

    content: "";

    border-radius: inherit;

    -webkit-border-radius: inherit;

    -moz-border-radius: inherit;

    -ms-border-radius: inherit;

    -o-border-radius: inherit;

    width: 100%;

    height: 100%;

    display: block;

    background-color: rgba(0, 0, 0, 0.4);

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    top: 0;

}



/* 字体悬浮图片之上 */

.bg-mask view,

.bg-mask cover-view,

.bg-mask text,

.bg-mask div,

.bg-mask p,

.bg-mask span {

    z-index: 5;

    position: relative;

}



.bg-video {

    position: relative;

}



.bg-video video {

    display: block;

    height: 100%;

    width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    position: absolute;

    top: 0;

    z-index: 0;

    pointer-events: none;

}







/* 图片与文字对齐 vertical */



/* 将支持valign特性的对象的内容与基线对齐  */

.vertical-align-baseline {

    vertical-align: baseline;

}



/* 垂直对齐文本的下标  */

.vertical-align-sub {

    vertical-align: sub;

}



/* 垂直对齐文本的上标  */

.vertical-align-super {

    vertical-align: super;

}



/* 将支持valign特性的对象的内容与对象顶端对齐  */

.vertical-align-top {

    vertical-align: top;

}



/* 将支持valign特性的对象的文本与对象顶端对齐  */

.vertical-align-textTop {

    vertical-align: text-top;

}



/* 将支持valign特性的对象的内容与对象中部对齐 */

.vertical-align-middle {

    vertical-align: middle;

}



.vertical-align-baseline-middle {

    vertical-align: -webkit-baseline-middle;

}



/* 将支持valign特性的对象的文本与对象底端对齐  */

.vertical-align-bottom {

    vertical-align: bottom;

}



/* 将支持valign特性的对象的文本与对象顶端对齐  */

.vertical-align-textBottom {

    vertical-align: text-bottom;

}



/* placeholder样式 */

/* 继承 */

.bg-inherit {

    background: inherit;

}



.show {

    display: block !important;

}



.hide {

    display: none !important;

}



/*点击之前*/

/* a:link {

     color: inherit;

     background-color: inherit;

 } */

/*鼠标悬停状态*/

/* a:hover {

     color: inherit;

     background-color: inherit;

 } */

/*点击状态*/

/* a:active {

     color: inherit;

     background-color: inherit;

 } */

/*点击之后状态*/

/* a:visited {

     color: inherit;

     background-color: inherit;

 } */

/*改变文字的默认颜色以及消除下划线*/

/* 公共样式 */

a {

    color: inherit;

    text-decoration: none;

    -webkit-tap-highlight-color: transparent;

    -webkit-user-select: none;

    -moz-user-focus: none;

    -moz-user-select: none;

}



ul,

ol {

    list-style: none;

    margin: 0;

    padding: 0;

}



/* 卡牌默认动画 */

.card:hover {

    transform: translateY(-.5rem);

    -webkit-transform: translateY(-.5rem);

    -moz-transform: translateY(-.5rem);

    -ms-transform: translateY(-.5rem);

    -o-transform: translateY(-.5rem);

    transition: transform ease 0.2s;

    -webkit-transition: transform ease 0.2s;

    -moz-transition: transform ease 0.2s;

    -ms-transition: transform ease 0.2s;

    -o-transition: transform ease 0.2s;

}



/* overflow */

/*hidden*/

.overflow-hidden {

    overflow: hidden;

}



.overflow-x-hidden {

    overflow-x: hidden;

}



.overflow-y-hidden {

    overflow-y: hidden;

}



/*scroll*/

.overflow-scroll {

    overflow: scroll;

}



.overflow-x-scroll {

    overflow-x: scroll;

}



.overflow-y-hidden {

    overflow-y: scroll;

}



/*auto*/

.overflow-scroll {

    overflow: auto;

}



.overflow-x-auto {

    overflow-x: auto;

}



.overflow-y-auto {

    overflow-y: auto;

}



/*visible 一直显示*/



.overflow-visible {

    overflow: visible;

}



.overflow-x-visible {

    overflow-x: visible;

}



.overflow-y-visible {

    overflow-y: visible;

}



/* scroll */

/*css隐藏滚动条 不过这个方法不兼容IE，做移动端的可以使用*/

.scroll-none::-webkit-scrollbar {

    width: 0 !important;

    height: 0 !important;

}



.scroll-none {

    -ms-overflow-style: none;

}



.scroll-none {

    overflow: -moz-scrollbars-none;

}



/* 滚动条的滑轨背景颜色 */

.scroll-none::-webkit-scrollbar-track {

    background-color: transparent;

}



/* 滑块颜色 */

.scroll-none::-webkit-scrollbar-thumb {

    background-color: transparent;

}



/* 滑轨两头的监听按钮颜色 */

.scroll-none::-webkit-scrollbar-button {

    background-color: transparent;

}



/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

.scroll-none::-webkit-scrollbar-corner {

    background-color: transparent;

}



/* visibility */

.visibility-hidden {

    visibility: hidden;

}



.visibility-visible {

    visibility: visible;

}



/*

     transform 

     d 50% 

     s 50%

 */

.transform-translateY-d50 {

    transform: translateY(50%);

    -webkit-transform: translateY(50%);

    -moz-transform: translateY(50%);

    -ms-transform: translateY(50%);

    -o-transform: translateY(50%);

}



.transform-translateY-s50 {

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

}



/* 输入框 placeholder 站位符设置样式 */

.placeholder::-webkit-input-placeholder {

    /* Chrome/Opera/Safari */

    /* padding-left: .9375rem; */

}



.placeholder::-moz-placeholder {

    /* Firefox 19+ */

    /* padding-left: .9375rem; */

}



.placeholder:-ms-input-placeholder {

    /* IE 10+ */

    /* padding-left: .9375rem; */

}



.placeholder:-moz-placeholder {

    /* Firefox 18- */

    /* padding-left: .9375rem; */

}



/*

     火狐单独进行css设置

 */



::-moz-list-number {}



/*

 控制list-style的大小。

 */

::-moz-list-bullet {}



/*

 伪对象：第一个节点。

 */

:-moz-first-node {}



/*

 伪对象：最后一个节点。

 */

:-moz-last-node {}



/*

 伪对象：空白内容。

 */

:-moz-only-whitespace {}