body,body[sui-theme='light'] {
    --sui-color-white:#ffffff;
    --sui-color-black:#000000;

    /*颜色*/
    --sui-color-primary: #07c160;/*主题色*/
    --sui-color-secondary:#FF6700;/*金额题色,橙色*/


    /*--sui-color-primary: #FFC300;!*主题色*!*/

    --sui-color-success:#07C160;/*成功题色*/
    --sui-color-warning:#FFC300;/*警告题色*/
    --sui-color-danger:#FA5151;/*危险题色*/
    --sui-color-info:#909399;/*信息题色*/
    --sui-color-base: #FBFBFB;/*基础颜色*/

    /*文字颜色*/
    --sui-text-primary: #353535;/*主要文字*/
    --sui-text-regular:#606266;/*常规文字*/
    --sui-text-secondary:#9a9a9a;/*次要文字*/
    --sui-text-placeholder:#CCCCCC;/*占位文字*/

    /*--sui-text-primary:#303133;!*主要文字*!*/
    /*--sui-text-regular:#606266;!*常规文字*!*/
    /*--sui-text-secondary:#909399;!*次要文字*!*/
    /*--sui-text-placeholder:#C0C4CC;!*占位文字*!*/

    /*边线颜色*/
    --sui-border-base:#9a9a9a;/*一级边框颜色*/
    --sui-border-light:#BBBBBB;/*二级边框颜色*/
    --sui-border-lighter:#CCCCCC;/*三级边框颜色*/
    --sui-border-extra:#F2F6FC;/*四级边框颜色*/

    /*背景颜色*/
    --sui-bg-primary:#ffffff;/*主背景颜色*/
    --sui-bg-base:#f2f2f2;/*基础颜色,主要背景颜色*/
    --sui-bg-light:#f0f0f0;/*常规颜色*/
    --sui-bg-lighter:#f2f2f2;/*次要颜色*/
    --sui-bg-extra:#fafafa;/*四级背景颜色，提示背景*/
    --sui-bg-active:#f5f5f5;/*点击颜色*/
    /* fafafa0*/

    /*透明颜色*/
    --sui-fg-0: rgba(0,0,0, 0.1);/*半透明*/
    --sui-fg-1: rgba(0, 0, 0, 0.5);
    --sui-fg-2: rgba(0, 0, 0, 0.3);
    --sui-fg-3: rgba(0, 0, 0, 0.1);
    --sui-fg-4: rgba(0, 0, 0, 0.15);

    /*字体大小*/
    --sui-size-big:32px;/*大标题文字*/
    --sui-size-xl:22px;/*大标题文字*/
    --sui-size-lg:20px;/*标题文字*/
    --sui-size-md:16px;/*基础文字*/
    --sui-size-sm:14px;/*描述文字*/
    --sui-size-xs:12px;/*标识文字*/


    /* --sui-uv:16px;!*单位边距*!
     --sui-ov:8px;!*半边距*!
     --sui-cv:10px;!*容器框边距*!
     --sui-iv:6px;!*内容框边距*!*/


    --sui-uv:12px;/*单位边距*/
    --sui-ov:6px;/*半边距*/
    --sui-cv:6px;/*容器框边距*/
    --sui-iv:6px;/*内容框边距*/

    --sui-RED: #fa5151;
    --sui-ORANGE: #fa9d3b;
    --sui-YELLOW: #ffc300;
    --sui-GREEN: #91d300;
    --sui-LIGHTGREEN: #95ec69;
    --sui-BRAND: #07c160;
    --sui-BLUE: #10aeff;
    --sui-INDIGO: #1485ee;
    --sui-PURPLE: #6467f0;
    --sui-WHITE: #fff;
    --sui-LINK: #576b95;
    --sui-TEXTGREEN: #06ae56;


    /*  --sui-RED: #fa5151;
      --sui-ORANGE: #c87d2f;
      --sui-YELLOW: #cc9c00;
      --sui-GREEN: #74a800;
      --sui-LIGHTGREEN: #3eb575;
      --sui-BRAND: #07c160;
      --sui-BLUE: #10aeff;
      --sui-INDIGO: #1196ff;
      --sui-PURPLE: #8183ff;
      --sui-WHITE: rgba(255, 255, 255, 0.8);
      --sui-LINK: #7d90a9;
      --sui-TEXTGREEN: #259c5c;*/
}



/******TODO UI开始*********/
.sui-active-color:hover,.sui-active-color:active{
    color: #44B549 !important;
}
.sui-a{
    cursor: pointer;
    text-decoration: none;
    color: #576B95;
    -webkit-tap-highlight-color: transparent;
}
.sui-image{
    will-change: transform;
}

/*有背景颜色点击*/
.sui-link, .sui-sharp-active {
    cursor: pointer;
}
.sui-link:active, .sui-sharp-active:active {
    opacity: 0.8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 3ms;  /* 所有属性都过渡,且效果一样 */
}

/*禁止选择复制*/
.sui-select-ban{
    -webkit-user-select:none !important;
    user-select: none !important;
}


/*图片加载动画*/
/*img[src='']*/
.sui-img[src='']:after{
    position: relative;
}
/*img[src='']:after, */
.sui-img[src='']:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: var(--sui-bg-primary);
    z-index: 1;
}
/*img[src='']:before, */
.sui-img[src='']:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid #aaa;
    border-left-color: #ddd;
    border-radius: 24px;
    vertical-align: middle;
    -webkit-animation: loading .6s linear .6s infinite;
    margin: auto;
    z-index: 2;
}

/*******TODO 基础样式********/
.sui-sizing-border{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sui-sizing-content{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.sui-sticky-top{
    position: sticky !important;
    top: 0px;
    z-index: 2;
}
.sui-sticky-bottom{
    position: sticky !important;;
    bottom: 0px;
    z-index: 2;
}

.sui-over-hide{
    overflow: hidden;
}
.sui-over-def{
    overflow: initial !important;
}
.sui-sharp-text{
    color: #FFFFFF !important;
}
.sui-opacity-s{
    opacity: 0.8 !important;
}
.sui-content-transp:after,.sui-content-transp:before{
    opacity: 0.5;
}
.sui-weak{
    opacity: 0.5 !important;
}
.sui-opt-width{
    width: 250px;
}

/*内边距*/
.sui-padding-ns {
    padding: 2px;
}
.sui-padding-xs{
    padding: 3px;
}
.sui-padding-sm{
    padding: 6px;
}
.sui-padding-df{
    padding: 12px;
}
.sui-padding, .sui-padding_m {
    padding: 12px;
}
.sui-padding_l {
    padding: 24px;
}
.sui-padding-lg{
    padding: 24px;
}
.sui-padding-xl{
    padding: 48px;
}
/*左内边距*/
.sui-padding-left-xs,
.sui-padding-lr-xs{
    padding-left: 3px;
}
.sui-padding-left-sm,
.sui-padding-lr-sm{
    padding-left: 6px;
}
.sui-padding-left-df,
.sui-padding-lr-df{
    padding-left: 12px;
}
.sui-padding-left-lg,
.sui-padding-lr-lg{
    padding-left: 24px;
}
.sui-padding-left-xl,
.sui-padding-lr-xl{
    padding-left: 48px;
}
/*右内边距*/
.sui-padding-right-xs,
.sui-padding-lr-xs{
    padding-right: 3px;
}
.sui-padding-right-sm,
.sui-padding-lr-sm{
    padding-right: 6px;
}
.sui-padding-right-df,
.sui-padding-lr-df{
    padding-right: 12px;
}
.sui-padding-right-lg,
.sui-padding-lr-lg{
    padding-right: 24px;
}
.sui-padding-right-xl,
.sui-padding-lr-xl{
    padding-right: 48px;
}

/*头内边距*/
.sui-padding-top-xs,
.sui-padding-tb-xs{
    padding-top: 3px;
}
.sui-padding-top-sm,
.sui-padding-tb-sm{
    padding-top: 6px;
}
.sui-padding-top-df,
.sui-padding-tb-df{
    padding-top: 12px;
}
.sui-padding-top-lg,
.sui-padding-tb-lg{
    padding-top: 24px;
}
.sui-padding-top-xl,
.sui-padding-tb-xl{
    padding-top: 48px;
}

.sui-padding-top-xxl,
.sui-padding-tb-xxl{
    padding-top: 96px;
}

/*底内边距*/
.sui-padding-bottom-xs,
.sui-padding-tb-xs{
    padding-bottom: 3px;
}
.sui-padding-bottom-sm,
.sui-padding-tb-sm{
    padding-bottom: 6px;
}
.sui-padding-bottom-df,
.sui-padding-tb-df{
    padding-bottom: 12px;
}
.sui-padding-bottom-lg,
.sui-padding-tb-lg{
    padding-bottom: 24px;
}
.sui-padding-bottom-xl,
.sui-padding-tb-xl{
    padding-bottom: 48px;
}
.sui-padding-bottom-xxl,
.sui-padding-tb-xxl{
    padding-bottom: 96px;
}

/*外边距*/
.sui-margin-xs{
    margin: 3px;
}
.sui-margin-sm{
    margin: 6px;
}
.sui-margin-df{
    margin: 12px;
}
.sui-margin-lg{
    margin: 24px;
}
.sui-margin-xl{
    margin: 48px;
}

/*左外边距*/
.sui-margin-left-xs,
.sui-margin-lr-xs{
    margin-left: 3px;
}
.sui-margin-left-sm,
.sui-margin-lr-sm{
    margin-left: 6px;
}
.sui-margin-left-df,
.sui-margin-lr-df{
    margin-left: 12px;
}
.sui-margin-left-lg,
.sui-margin-lr-lg{
    margin-left: 24px;
}
.sui-margin-left-xl,
.sui-margin-lr-xl{
    margin-left: 48px;
}
/*右外边距*/
.sui-margin-right-xs,
.sui-margin-lr-xs{
    margin-right: 3px;
}
.sui-margin-right-sm,
.sui-margin-lr-sm{
    margin-right: 6px;
}
.sui-margin-right-df,
.sui-margin-lr-df{
    margin-right: 12px;
}
.sui-margin-right-lg,
.sui-margin-lr-lg{
    margin-right: 24px;
}
.sui-margin-right-xl,
.sui-margin-lr-xl{
    margin-right: 48px;
}

/*头外边距*/
.sui-margin-top-xs,
.sui-margin-tb-xs{
    margin-top: 3px;
}
.sui-margin-top-sm,
.sui-margin-tb-sm{
    margin-top: 6px;
}
.sui-margin-top-df,
.sui-margin-tb-df{
    margin-top: 12px;
}
.sui-margin-top-lg,
.sui-margin-tb-lg{
    margin-top: 24px;
}
.sui-margin-top-xl,
.sui-margin-tb-xl{
    margin-top: 48px;
}
/*底外边距*/
.sui-margin-bottom-xs,
.sui-margin-tb-xs{
    margin-bottom: 3px;
}
.sui-margin-bottom-sm,
.sui-margin-tb-sm{
    margin-bottom: 6px;
}
.sui-margin-bottom-df,
.sui-margin-tb-df{
    margin-bottom: 12px;
}
.sui-margin-bottom-lg,
.sui-margin-tb-lg{
    margin-bottom: 24px;
}
.sui-margin-bottom-xl,
.sui-margin-tb-xl{
    margin-bottom: 48px;
}


/*垂直间隔*/
.sui-sv + .sui-sv{
    margin-top:12px;
}
.sui-svm + .sui-svm{
    margin-top:6px;
}
.sui-svs + .sui-svs{
    margin-top:3px;
}
.sui-hn{
    margin-top:6px;
    margin-bottom:6px;
}
/*水平间隔*/
.sui-shl + .sui-shl{
    margin-left:24px;
}
.sui-sh + .sui-sh{
    margin-left:12px;
}

.sui-shm + .sui-shm{
    margin-left:6px;
}
.sui-shn + .sui-shn{
    margin-left:2px;
}

.sui-pd-x {
    padding-top: 64px;
    padding-bottom: 64px;
}

.sui-pd-l {
    padding-top: 32px;
    padding-bottom: 32px;
}

.sui-pd-m {
    padding-top: 24px;
    padding-bottom: 24px;
}

.sui-pd-s {
    padding-top: 18px;
    padding-bottom: 18px;
}

.sui-pd-n {
    padding-top: 12px;
    padding-bottom: 12px;
}


.sui-pb {
    padding-bottom: 8px;
}


.sui-vp {
    padding-top: 6px;
    padding-bottom: 6px;
}

.sui-hp {
    padding-left: 12px;
    padding-right: 12px;
}

.sui-hp-m {
    padding-left: 6px;
    padding-right: 6px;
}

.sui-vx {
    padding-top: 16px;
    padding-bottom: 16px;
}

.sui-vm {
    padding-top: 12px;
    padding-bottom: 12px;
}

.sui-tp {
    padding-top: 6px;
}

.sui-hn {
    margin-top: 6px;
    margin-bottom: 6px;
}
.sui-hm {
    margin-top: 12px;
    margin-bottom: 12px;
}
.sui-mv {
    margin-left: 6px;
    margin-right: 6px;
}
.sui-xv {
    margin-left: 12px;
    margin-right: 12px;
}
.sui-mh {
    margin: 2px 0;
}




/*盒子小边距*/
.sui-vsp {
    padding-top: 6px;
    padding-bottom: 6px;
}

.sui-hsp {
    padding-left: 6px;
    padding-right: 6px;
}

.sui-padding_s {
    padding: 6px;
}
.sui-vnp {
    padding-top: 16px;
    padding-bottom: 16px;
}

/*大边距*/
.sui-vmp {
    padding-top: 24px;
    padding-bottom: 24px;
}
/*大边距*/
.sui-vlp {
    padding-top: 58px;
    padding-bottom: 58px;
}

/*子盒子边距*/
.sui-vpm {
    padding-top: 6px;
    padding-bottom: 6px;
}
.sui-hpm {
    padding-left: 6px;
    padding-right: 6px;
}

/*行级*/
.sui-block {
    display: block !important;
}

/*填充*/
.sui-full{
    width: 100%;
    height: 100%;
}
/*相对填充*/
.sui-view-full{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 100vh;
    width: 100vw;
}

.sui-wh-full{
    height: 100vh;
    width: 100vw;
}
.sui-h-full{
    height: 100vh;
}
/*盒子填充*/
.sui-fill {
    width: 100%;
    height: 100%;
    display: block;
}
.sui-fill-w {
    width: 100% !important;
}
.sui-fill-h {
    height: 100% !important;
}

/*居中*/
.sui-mc,.sui-center{
    margin: 0 auto;
}

.sui-mn{
    margin: 0;
}
/*文字垂直居中*/
.sui-mt {
    vertical-align: middle;
    display: inline-block;
}
/*右对齐*/
.sui-tl {
    text-align: left !important;
}
/*右对齐*/
.sui-tr {
    text-align: right !important;
}
/*居中对齐*/
.sui-tc {
    text-align: center !important;
}


/*隐藏*/
.sui-hidden,.sui-hide {
    display: none !important;
}
/*禁用*/
.sui-disabled {
    opacity: 0.3;
    pointer-events:none;
}
/*只读*/
.sui-readonly {
    pointer-events:none;
}
/*相对布局*/
.sui-relative {
    position: relative;
}
/*绝对布局*/
.sui-absolute {
    position: absolute;
}
/*右上角*/
.sui-corner{
    position: absolute;
    right: 0;
    top: 0;
}
/*加粗*/
.sui-bold{
    font-weight: 700;
}
/*斜体*/
.sui-italic{
    font-style:italic;
}
/*圆型*/
.sui-circle,.sui-round {
    border-radius: 100% !important;
    overflow: hidden;
}
/*圆角*/
.sui-square,.sui-corner {
    border-radius: 4px;
    overflow: hidden;
}
.sui-corner-none {
    border-radius: 0px;
    overflow: hidden;
}
.sui-hr{
    height: 2px;
    background-color: var(--sui-bg-base);
}

/*行高*/
.sui-lh1{
    line-height: 1;
}
.sui-lh2{
    line-height: 2;
}
.sui-lh3{
    line-height: 3;
}
.sui-lh-sm{
    line-height: 1.2;
}
.sui-ih1{
    height: 1em;
}
.sui-ih2{
    height: 2em;
}
.sui-ih2-sm{
    height: 2.4em;
}

/*最大宽度*/
.sui-iw-2 {
    min-width: 2em;
}
.sui-iw-3 {
    min-width: 3em;
}
.sui-iw-4 {
    min-width: 4em;
}
.sui-iw-6 {
    min-width: 6em;
}


.sui-wem-2 {
    width: 2em;
}
.sui-wem-3 {
    width: 3em;
}
.sui-wem-4 {
    width: 4em;
}
.sui-wem-6 {
    width: 6em;
}
.sui-wem-8 {
    width: 8em;
}
.sui-wem-12 {
    width: 12em;
}
.sui-wem-14 {
    width: 14em;
}
.sui-z {
    position: relative;
}

.sui-z2 {
    z-index: 2;
}
.sui-z1 {
    z-index: 1;
}
.sui-z0 {
    z-index: 1;
}
/*end圆角*/

/*块布局*/
.sui-inline {
    display: inline-block !important;
    vertical-align: middle;
}
.sui-inline-txt {
    display: inline-block !important;
    vertical-align: text-bottom;
}
.sui-img-block {
    display: block !important;
}


.sui-apart {
    display: inline-block !important;
    vertical-align: middle;
    /*    padding-left: 12px;
        padding-right: 12px;*/
}
.sui-apart+.sui-apart {
    margin-left:12px;
    position: relative;
}
.sui-apart+.sui-apart:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 1em;
    margin: auto;
    top: 0;
    bottom: 0;
    left: -6px;
    background-color: var(--sui-text-secondary);
}

/*图片填充*/
.sui-cover{
    object-fit:cover;
}
.sui-img > img {
    width: 100%;
    height: 100%;
}
/*滚动条*/
.sui-overflow-hidden{
    overflow: hidden;
}
.sui-overflow-x{
    overflow-x: auto;
}
.sui-overflow-y{
    overflow-y: auto;
}
/*隐藏滚动条*/
.sui-scrol_hide :-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}
/*******end基础样式********/

/*明显背景*/

/*默认背景*/
.sui-bc {
    background-color: var(--sui-bg-primary) !important;
}
.sui-bc-t8 {
    background-color: rgba(255,255,255,0.8) !important;
}
.sui-bc-t {
    background-color: rgba(255,255,255,0.5) !important;
}
.sui-bs {
    background-color: var(--sui-bg-base);
}
.sui-bt {
    background-color: var(--sui-bg-lighter);
}
.sui-bl {
    background-color: var(--sui-bg-light);
}
.sui-bc-primary {
    background-color: var(--sui-color-primary) !important;
}

.sui-bc-warning {
    background-color: var(--sui-color-warning) !important;
}

.sui-bc-light{
    background-color: var(--sui-color-white) !important;
}
.sui-bc-dark{
    background-color: var(--sui-color-black) !important;
}
.sui-bc-opt{
    background-color: rgba(145, 211, 0, 0.2) !important;
}
.sui-bc-diff{
    background-color: rgba(7, 193, 96, 0.2) !important;
}
/*******end背景颜色********/


/*******TODO 区块********/
.sui-layout {
    background: var(--sui-bg-primary);
}
.sui-con {
    display: block;
}
/*大模块*/
.sui-module {
    background-color: var(--sui-bg-primary);
    margin-bottom: 20px;
}
.sui-module_space {
    margin-bottom: 10px;
}
/*复合模块*/
.sui-module_small {
    margin-bottom: 0;
}
/*透明模块*/
.sui-module_transparent {
    background-color: transparent;
}
.sui-module_def {
    background-color: transparent;
    margin-bottom: 0;
}
/*内容块*/
.sui-section {
    background-color: var(--sui-bg-primary);
    margin-bottom: 10px;
}
.sui-section:empty{
    margin-bottom:0;
}
.sui-space{
    margin-bottom: 10px;
}
.sui-space-none{
    margin-bottom: 0px;
}
.sui-section_transparent {
    background-color: transparent;
}
.sui-section_small {
    margin-bottom: 0;
}

/*容器阴影*/
.sui-box-shadow{
    background: var(--sui-bg-primary);
    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}
.sui-img-shadow{
    background: var(--sui-bg-primary);
    box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.2);
}

/*模块容器区域*/
.sui-elements{
    padding:18px 0px;
    background-color: var(--sui-bg-primary);
    margin-bottom: 10px;
}
/*内容无间隔*/
.sui-elements_auto{
    margin-bottom: 0px;
}
/*模块内容区域*/
.sui-element{
    padding:6px 12px;
}
.sui-element-s{
    padding-top: 6px;
    padding-bottom: 6px;
}
/*内容无边距*/
.sui-element_auto{
    padding-left: 0;
    padding-right: 0;
}

/*内容块*/
.sui-piece {
    padding: 10px 0;
}
.sui-cont-piece{
}
.sui-min-h{
    min-height: 200px;
}
.sui-cont-piece>.sui-item{
    border-bottom: 1px solid #e7e7eb;
    padding-top: 20px;
    padding-bottom: 20px;
}
.sui-cont-piece>.sui-item:last-child{
    border-bottom:none;
}

/*底部菜单区域*/
.sui-foot-piece {
    margin-top: 15px;
    padding-bottom: 50px;
    padding-top: 20px;
    border-top: 1px solid #e7e7eb;
    text-align: center;
}
.sui-foot {
    display: block;
    position: relative;
    min-height: 120px;
}
.sui-foot-con {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    padding: 12px;
    z-index: 999;
}


/*底部按钮区域*/
.sui-operate {
    position: relative;
    min-height: 120px;
    display: block;
}
.sui-operate-con {
    padding: 24px 0 80px;
}
.sui-operate.sui-fixed .sui-operate-con {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    margin: auto;
    z-index: 99;
    padding-bottom: 24px;
}

/*边距容器*/
.sui-operate.sui-fixed .sui-content-con {
    padding: 40px 60px;
}




/*******TODO 矩形容器********/
/*正方形*/
.sui-square-con, .sui-ratio-con {
    background-color: transparent;
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.sui-square-con > img, .sui-square-con > .sui-area, .sui-ratio-con > .sui-area {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


/*5:3 长方形*/
.sui-con-rectangle {
    position: relative;
    display: block;
    background-color: transparent;
    width: 100%;
    padding-top: 60%;
}
/*5:2长方形*/
.sui-con-breadth {
    background-color: transparent;
    width: 100%;
    padding-top: 40%;
}
/*4:3相片*/
.sui-con-photo {
    background-color: transparent;
    width: 100%;
    padding-top: 75%;
}
/*图标填充*/
.sui-ico_full {
    width: 100%;
    height: 100%;
}
/*居中*/
.sui-middle {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
/*垂直居中*/
.sui-con-middle {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -webkit-box-orient: vertical;
    flex-flow: column;
}

/*******TODO 边距********/
/*盒子边距*/

/*全局控制无边距*/
.container-hp .sui-hp {
    padding-left: 0px;
    padding-right: 0px;
}
.container-lhp {
}
.container-lhp .sui-hp {
    padding-left: 33px;
    padding-right: 33px;
}
.container-lhp .sui-hsp {
    padding-left: 12px;
    padding-right: 12px;
}
/*******end边距********/

/*******TODO 颜色********/
/*颜色*/
.sui-color-white,.sui-color-light {
    color: var(--sui-color-white) !important;
}
.sui-color-black,.sui-color-dark {
    color: var(--sui-text-primary) !important;
}
.sui-color-default {
    color: var(--sui-text-secondary)  !important;
}
.sui-color-primary,.sui-color-green {
    color: var(--sui-color-primary) !important;
}
.sui-color-success{
    color: var(--sui-color-success) !important;
}
.sui-color-secondary,.sui-color-price {
    color: var(--sui-color-secondary) !important;
}
.sui-color-warning {
    color:  var(--sui-color-warning) !important;
}
.sui-color-danger {
    color:  var(--sui-color-danger) !important;
}
.sui-color-base{
    color: var(--sui-color-base) !important;
}
/*end颜色*/
/*******end颜色********/

/*******TODO 文字大小********/
/*字体大小*/
.sui-size-xs {
    font-size: var(--sui-size-xs) !important;
}
.sui-size-sm {
    font-size: var(--sui-size-sm) !important;
}
.sui-size-md {
    font-size: var(--sui-size-md) !important;
}
.sui-size-lg,.sui-size-c {
    font-size: var(--sui-size-lg) !important;
}
.sui-size-xl,.sui-size-m {
    font-size: var(--sui-size-xl) !important;
}
.sui-size-big {
    font-size: var(--sui-size-big) !important;
}

/*文字颜色*/
.sui-text-primary {
    color: var(--sui-text-primary) !important;
}
.sui-text-regular {
    color: var(--sui-text-regular) !important;
}
.sui-text-secondary {
    color: var(--sui-text-secondary) !important;
}
.sui-text-placeholder {
    color: var(--sui-text-placeholder) !important;
}

/*end字体大小*/

/*标题*/
.sui-tit-xl,.sui-tit-l,.sui-tit-max,.sui-title-l {
    font-size: var(--sui-size-xl);
    color: var(--sui-text-primary);
    word-wrap: break-word;
    word-break: normal;
    -webkit-user-select:text;
    user-select:text;
}
.sui-tit-lg,.sui-tit-l,.sui-tit-md,.sui-tit-m,.sui-title-m,.sui-title-primary{
    font-size: var(--sui-size-lg);
    color: var(--sui-text-primary);
    word-wrap: break-word;
    word-break: normal;
    -webkit-user-select:text;
    user-select:text;
}
/*小标题*/
.sui-tit,.sui-title {
    font-size: var(--sui-size-md);
    color: var(--sui-text-primary);
    -webkit-user-select:text;
    user-select:text;
}

.sui-tst-xl,.sui-text-x {
    font-size: var(--sui-size-xl);
    color: var(--sui-text-secondary);
}
.sui-tst-lg,.sui-text-l {
    font-size: var(--sui-size-lg);
    color: var(--sui-text-secondary);
}

.sui-tst,.sui-text-m {
    font-size: var(--sui-size-md);
    color: var(--sui-text-secondary);
    -webkit-user-select:text;
    user-select:text;
}

.sui-tit-sm,.sui-tit-s,.sui-title-n {
    font-size: var(--sui-size-sm);
    color: var(--sui-text-primary);
    -webkit-user-select:text;
    user-select:text;
}
.sui-txt-sm,.sui-text,.sui-txt,.sui-lab,.sui-tip{
    font-size:var(--sui-size-sm);
    color: var(--sui-text-secondary);
    -webkit-user-select:text;
    user-select:text;
}

.sui-txt-xs,.sui-text-n {
    font-size: var(--sui-size-xs);
    color: var(--sui-text-secondary);
    -webkit-user-select:text;
    user-select:text;
}

.sui-tit-light {
    color: var(--sui-color-white) !important;
}
.sui-tit-dark {
    color: var(--sui-text-primary) !important;
}
.sui-txt-light {
    color: var(--sui-color-white) !important;
}
.sui-txt-dark {
    color: var(--sui-text-secondary) !important;
}

.sui-shadow-light {
    text-shadow: 0px 0px 10px var(--sui-text-primary);
}
.sui-shadow-dark {
    text-shadow: 0px 0px 10px var(--sui-color-white);;
}
/*小单位*/
.sui-unit, .sui-sub, .sui-text-unit {
    font-size:  var(--sui-size-xs) !important;
}
.sui-unit-max{
    font-size: var(--sui-size-lg) !important;
}
/*描述*/
.sui-desc {
    font-size: var(--sui-size-sm);
    color: var(--sui-text-secondary);
    word-wrap: break-word;
    padding-top: 6px;
    padding-bottom: 6px;
}


/*列表标题*/
.sui-caption {
    display: block;
    padding: 36px 12px 12px;
    color: #9a9a9a;
    font-size: 16px;
    /* font-weight: 700;*/
    line-height: 1;
}
/*列表标题*/
.sui-caption-con {
    display: block;
    padding: 24px 12px 12px;
}

/*描述文字*/
.sui-descr {
    font-style: oblique;
}

/**
 * 文字大写
 */
.sui-uppercase {
    text-transform: uppercase !important;
}

/**
 * 文字小写
 */
.sui-lowercase {
    text-transform: lowercase !important;
}

/*明显文字，价格*/
.sui-price-primary {
    font-size: 18px !important;
    color: var(--sui-color-secondary) !important;
    font-weight: 500;
}
.sui-price-tag {
    color: #FFFFFF;
    background-color: var(--sui-color-secondary);
    font-size: 10px;
    line-height: 1;
    padding: 2px 3px;
    border-radius: 2px;
    overflow: hidden;
    opacity: 0.8;
}
/*划线价格*/
.sui-line-through{
    text-decoration:line-through;
}
.sui-text-default {
    font-size: 18px !important;
    color: #9a9a9a !important;
    font-weight: 500;
}
/*大的价格*/
.sui-overt-price {
    font-size: 38px !important;
    color: #353535 !important;
    line-height: 1.8;
    font-weight: 500;
}


.sui-h-radius{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}


.sui-partition {
    border-bottom: 2px dashed  #dddddd;
}

/*行数*/
.sui-nowrap {
    white-space:nowrap ;
}
.sui-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap ;
}


.sui-line1,
.sui-line2,
.sui-line3,
.sui-line4 {
    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.sui-line1 {
    -webkit-line-clamp: 1;
}

.sui-line2 {
    -webkit-line-clamp: 2;
}

.sui-line3 {
    -webkit-line-clamp: 3;
}

.sui-line4 {
    -webkit-line-clamp: 4;
}

.sui-txt-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
}

/*******end文字大小********/
/*******TODO 边线********/
/*白色边线*/
.sui-bw {
    border: 1px solid var(--sui-border-lighter);
}

/*黑色边线*/
.sui-bb {
    border: 1px solid var(--sui-border-lighter);
}

.sui-hb,
.sui-fb,
.sui-lb,
.sui-rb,
.sui-grid-border,
.sui-grid-border > .sui-item,
.sui-item-border > .sui-item {
    position: relative;
}

.sui-hb:after,
.sui-fb:after,
.sui-lb:after,
.sui-rb:after,
.sui-grid-border:after,
.sui-grid-border > .sui-item:before,
.sui-grid-border > .sui-item:after,
.sui-item-border > .sui-item:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--sui-fg-4);
    z-index: 0;
}

.sui-hb:after,
.sui-grid-border:after {
    height: 1px;
    bottom: auto;
    transform: scaleY(0.2);
    transform-origin:100% top;
}

.sui-fb:after,
.sui-grid-border > .sui-item:after,
.sui-item-border > .sui-item:not(:last-child):after {
    height: 1px;
    top: auto;
    transform: scaleY(0.2);
    transform-origin: 0 100%;
    z-index: 1;
}

.sui-lb:after {
    width: 1px;
    right: auto;
    transform: scaleX(0.2);
    transform-origin: 0 0;
}

.sui-rb:after,
.sui-grid-border > .sui-item:before {
    width: 1px;
    left: auto;
    transform: scaleX(0.2);
    transform-origin: 100% 0;
}

.sui-fb_cm:after,.sui-hb_cm:after, .sui-item-border_cm > .sui-item:after {
    left: 12px !important;
    right: 12px !important;
}

.sui-fb_lm:after,.sui-hb_lm:after, .sui-item-border_lm > .sui-item:after {
    left: 12px !important;
}
.sui-hb_dm:after,.sui-item-border_dm> .sui-item:after {
    left: 0px !important;
    right: 0px !important;
}

.sui-lab-con{
    width: 98px;
}
.sui-fb_lm_lab:after, .sui-item-border_lm_lab > .sui-item:after {
    left: 118px !important;
}

.sui-fb_rm:after,.sui-hb_rm:after, .sui-item-border_rm > .sui-item:after {
    right: 12px !important;
}

.sui-b_cm:after {
    top: 12px !important;
    bottom: 12px !important;
}

.sui-b_tm:after {
    top: 12px !important;
}

.sui-b_bm:after {
    bottom: 12px !important;
}


.sui-item-un-border:after,.sui-item-un-border:before{
    display: none;
}
/*边线*/

/*四周边线*/
.sui-border {
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.sui-border_rotund {
    border-radius: 225px;
}

.sui-border:after {
    display: block;
    content: '';
    position: absolute;
    width: 400%;
    height: 400%;
    left: 0;
    top: 0;
    border-width: 1px;
    border-style: solid;
    -webkit-transform: scale(.25, .25);
    -ms-transform: scale(.25, .25);
    transform: scale(.25, .25);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    border-radius: 16px;
    border-color: #DDDDDD;
}

.sui-border_rotund:after {
    border-radius: 1000px;
}

.sui-border-solid {
    border: 1px solid #E4E8EB;
}
.sui-border-bottom {
    border-bottom: 1px solid #E4E8EB;
}
/*end四周边线*/
/*******end边线********/

/*******TODO 列表项目********/
/*列表项背景*/
.sui-item-bg > .sui-item {
    background-color: var(--sui-bg-primary);
}

.sui-item-bg_block > .sui-item {
    background-color: var(--sui-bg-extra);
}

/*end列表项背景*/
/*列表项间隔*/
.sui-item-space {
}

.sui-item-space > .sui-item {
    margin-bottom: 4px;
}

.sui-item-space_s > .sui-item {
    margin-bottom: 2px;
}
.sui-item-space_mid > .sui-item {
    margin-bottom: 20px;
}


.sui-item-padding-space {
    padding: 6px;
}

.sui-item-padding-space > .sui-item {
    padding: 6px;
}

/*end列表项间隔*/

/*列表项点击*/
.sui-active, .sui-item-active > .sui-item {
    cursor: pointer;
}

.sui-active:active, .sui-item-active > .sui-item:active {
    background-color: var(--sui-bg-active) !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sui-hover:hover, .sui-item-hover > .sui-item:hover {
    background-color: var(--sui-bg-active) !important;
}



/*点击背景加深*/
.sui-tap-active{
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.sui-tap-active:active:before {
    content: "";
}
.sui-tap-active:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2);
}


.sui-item-btn{
    cursor: pointer;
    background-color: var(--sui-bg-base);
}

.sui-item-btn:active{
    background-color: var(--sui-bg-active);
    -webkit-tap-highlight-color: transparent;
}
/*end列表项点击*/

.sui-item-tr .sui-value,
.sui-item-tr .sui-value-title,
.sui-item-tr .sui-value-text {
    text-align: right !important;
}

/*******TODO 消息角标********/
/*消息角标*/
.sui-mark {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    min-width: 16px;
    /*width: 16px;*/
    font-size: 12px;
    padding: 0 4px;
    line-height: 16px;
    text-align: center;
    border-radius: 100px;
    color: #FFFFFF;
    background-color: var(--sui-color-secondary);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-indent: 0px;
}
.sui-mark:empty,.sui-mark_more {
    width: 6px;
    height: 6px;
    min-width: auto;
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    background-color: var(--sui-color-secondary);
}
.sui-mark.sui-mark_inline {
    display: inline-block;
    vertical-align: middle;
}
.sui-mark.sui-mark_block {
    display: block;
}
.sui-mark_auto{
    width: auto;
}
.sui-mark_fixed {
    position: absolute !important;
    right: 10px;
    top: 10px;
}
.sui-mark_corner {
    position: absolute !important;
    right: 4px;
    top: 4px;
}
.sui-mark_space {
    position: absolute !important;
    right: 0px;
    top: 0px;
}
.sui-mark_top {
    position: absolute !important;
    right: -8px;
    top: -8px;
}
.sui-mark_out {
    position: absolute !important;
    right: -4px;
    top: -4px;
}
.sui-mark_txt {
    width: auto;
    padding-left: 6px;
    padding-right: 6px;
}
.sui-mark_plain {
    background-color: transparent;
    color: var(--sui-color-secondary);
    border: 1px solid var(--sui-color-secondary);
}
.sui-mark_sm {
    font-size: 10px;
}
/*end消息角标*/
/*******end消息角标********/
/*操作按钮，上下移动*/
.sui-opt-btn{
    opacity: 0.6;
    cursor: pointer;
}
.sui-opt-btn:active{
    opacity: 1;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    background-color: var(--sui-bg-active);
}

/*小标点*/
.sui-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background-color: var(--sui-border-lighter);
}

.sui-dot_primary {
    background-color: var(--sui-color-primary);
}

/*******TODO 图片大小********/


/*end表单文字*/
.sui-ws {
    width: 100px;
}
.sui-wm {
    width: 180px;
}
.sui-center-auto {
    margin: 0 auto;
}
/*小图标*/
.sui-n {
    width: 32px;
    height: 32px;
}
/*mini小图标*/
.sui-c {
    width: 24px;
    height: 24px;
}
.sui-o {
    width: 16px;
    height: 16px;
}
.sui-i {
    width: 14px;
    height: 14px;
}

.sui-u {
    width: 40px;
    height: 40px;
}
.sui-w-u {
    width: 40px;
}
.sui-h-u {
    height: 40px;
}
.sui-d {
    width: 48px;
    height: 48px;
}
.sui-p {
    width: 56px;
    height: 56px;
}
/*菜单列表图*/
.sui-s {
    width: 64px;
    height: 64px;
}

/*头像图*/
.sui-m {
    width: 80px;
    height: 80px;
}

/*列表图*/
.sui-l {
    width: 100px;
    height: 100px;
}

/*大列表图*/
.sui-x {
    width: 120px;
    height: 120px;
}

.sui-xl {
    width: 180px;
    height: 180px;
}

.sui-xxl {
    width: 200px;
    height: 200px;
}
.sui-code {
    width: 260px;
    height: 260px;
}


.sui-u-wa {
    height: 40px;
    min-width: 40px;
}


.sui-w-auto {
    width: auto;
}
.sui-w-fill {
    width: 100%;
}
.sui-h-auto {
    height: auto;
}
.sui-h-fill {
    height: 100%;
}
.sui-auto-w {
    width: auto !important;
    max-width: none;
}
.sui-auto-h {
    height: auto !important;
    max-width: none;
}
.sui-w-50 {
    width: 50%;
}
.sui-w-60 {
    width: 60%;
}


.sui-logo{
    width: auto !important;
    height: auto !important;
    max-width: 220px !important;
    max-height: 100px !important;
}
/*******end图片大小********/

/*******TODO 背景圆角********/
/*背景图*/
.sui-bg {
    position: relative;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-image: url(); */
}
.sui-bgi-m {
    background-size: 20px 20px;
}

/*end图片填充*/
/*******TODO 内容填充********/
.sui-scale {
    width: 50%;
    text-align: center;
    margin: 0 auto;
}
.sui-scale_m {
    max-width: 48px;
}
.sui-scale_xl {
    max-width: 256px;
}
/*******TODO 文字********/

/*******TODO 盒子布局********/
.sui-box {
    /*position: relative;*/
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    -webkit-box-lines: single;
    -webkit-box-orient: horizontal;
    flex-wrap: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*项居中对齐*/
.sui-box_content,
.sui-box_center {
    justify-content: center;
}
/*项左对齐*/
.sui-box_left {
    justify-content: flex-start;
}
/*项右对齐*/
.sui-box_right {
    justify-content: flex-end;
}
/*两边对齐*/
.sui-box_between {
    justify-content: space-between;
}
/*盒子向上对齐*/
.sui-box_start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
/*超出换行*/
.sui-box_wrap{
    flex-wrap: wrap;
}
/*超出不换行*/
.sui-box_nowrap{
    flex-wrap: nowrap;
}
/*手机端垂直显示，电脑端水平显示*/
.sui-box_media{

}

/*垂直布局*/
.sui-box_vertical {
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    flex-flow: column;
}
.sui-box.sui-box_vertical > .sui-item {
    align-self: stretch;
    overflow: auto;
}

/*布局项*/
.sui-box > .sui-item {
    -webkit-box-align: center;
    align-content: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/*列表项的列占满*/
.sui-box > .sui-flex-half {
    -webkit-box-flex: 0.5;
    -webkit-flex: 0.5;
    flex: 0.5;
}
.sui-flex,.sui-box > .sui-flex {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.sui-shrink{
    flex-shrink:0;
}
.sui-box > .sui-flex2 {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    flex: 2;
}
.sui-box > .sui-flex3 {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    flex: 3;
}
/*容器超出隐藏，结合 sui-flex 使用*/
.sui-box > .sui-flex-fixed {
    width: 0;
}
/*项填充容器*/
.sui-stretch,.sui-box.sui-stretch > .sui-item {
    -webkit-align-self: stretch;
    align-self: stretch;
}
/*向上对齐*/
.sui-flex-start {
    align-self: flex-start;
}
/*向下对齐*/
.sui-flex-end {
    align-self: flex-end;
}
/*居中对齐*/
.sui-flex-center {
    align-self: center;
}
/*子项倒序*/
.sui-flex-reverse {
    flex-direction:row-reverse;
}


.sui-box_auto>.sui-item{
    flex: 1 0 auto;
    min-width: 33.333%;/*最多显示3个*/
}
/*面板*/
.sui-box_bill{
    flex-wrap: wrap;
}
.sui-box_bill>.sui-item{
    min-width: 280px;
    flex-shrink: 1;
    /*
     max-width: 100%;*/
    /*flex-grow:1;!*默认为0，即如果存在剩余空间，也不放大。*!*/
    /* flex-grow:1;
     flex-shrink: 1;*/
    /*flex-grow: 1;*/
    /*flex-basis: 20%;*/
}




/*特小边距*/
.sui-box_np {
    padding: 3px 3px;
}
.sui-box_np > .sui-item {
    padding-left: 3px;
    padding-right: 3px;
}

.sui-box_tp {
    padding: 3px 9px;
}
.sui-box_tp > .sui-item {
    padding: 3px;
}


/*特小边距*/
.sui-box_sp {
    padding: 6px 9px;
}
.sui-box_sp > .sui-item {
    padding-left: 3px;
    padding-right: 3px;
}

/*小边距*/
.sui-box_mp {
    padding: var(--sui-iv)  var(--sui-cv);
}
.sui-box_mp > .sui-item {
    padding: var(--sui-iv) var(--sui-iv);
}


/*纵向边距*/
.sui-box_hp {
    padding: 0px 6px;
}
.sui-box_hp > .sui-item {
    padding: 0px 6px;
}

.sui-box > .sui-item.sui-auto {
    padding: 0px 0px;
}

/*大边距*/
.sui-box_cp {
    /* padding: 12px 6px;*/
    padding: var(--sui-uv)  var(--sui-cv);
}
.sui-box_cp > .sui-item {
    /*padding-left: 6px;
    padding-right: 6px;*/

    padding-left: var(--sui-iv);
    padding-right: var(--sui-iv);
}
.sui-box_cp.sui-box_vertical {
    padding: 6px 12px;
}
.sui-box_cp.sui-box_vertical > .sui-item {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.sui-box_np.sui-box_vertical {
    padding: 3px 3px;
}
.sui-box_np.sui-box_vertical > .sui-item {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
}


.sui-box_cw {
    padding: 6px 6px;
}
.sui-box_cw > .sui-item {
    padding: 0px 6px;
}

.sui-box_ch > .sui-item {
    padding-top: 6px;
    padding-bottom: 6px;
}
.sui-box_cp-big {
    padding-top: 20px;
    padding-bottom: 20px;
}





/*超大边距*/
.sui-box_lp {
    padding: 12px 12px;
}
.sui-box_lp > .sui-item {
    padding-left: 12px;
    padding-right: 12px;
}
.sui-box_lp.sui-box_vertical > .sui-item {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sui-box_xp {
    padding: 20px 20px;
}
.sui-box_xp > .sui-item {
    padding-left: 10px;
    padding-right: 10px;
}
.sui-box_lg.sui-box_vertical {
    padding: 36px 12px;
}
.sui-box_lg.sui-box_vertical > .sui-item {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sui-box_pr{
    padding-left: 0px;
    padding-right: 0px;
}
.sui-box_pr > .sui-item:first-child{
    padding-left: 0px;
}
.sui-box_pr > .sui-item:last-child{
    padding-right: 0px;
}

.sui-box.sui-box_space > .sui-item + .sui-item {
    margin-left: 12px;
}
.sui-box.sui-box_space_m > .sui-item + .sui-item {
    margin-left: 6px;
}
.sui-box.sui-box_space_n > .sui-item + .sui-item {
    margin-left: 2px;
}



/*统一边距管理*/
/*容器边距*/
.sui-box_cv {
    /*padding: 10px 10px;*/
    padding: var(--sui-ov) var(--sui-ov);
}
.sui-box_cv > .sui-item {
    /*padding: 6px 6px;*/
    padding: var(--sui-ov) var(--sui-ov);
}
.sui-box_cv > .sui-box_iv{
    padding: 0;
}
/*子容器边距*/
.sui-box_iv > .sui-item {
    padding: var(--sui-iv) var(--sui-iv);
}

.sui-box_cv_m {
    padding-top: 0;
    padding-bottom: 0;
}

.sui-box_opt{
    min-height: 56px;
}



.sui-box-opt{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px !important;
}


.sui-grid-item{
    cursor: pointer;
    position: relative;
}
.sui-grid-item:active{
    background-color: var(--sui-bg-active) !important;
}
.sui-grid-item>.sui-item-head{
    padding: 12px 6px 3px;
    text-align: center;
}
.sui-grid-item>.sui-item-cont{
    padding: 3px 6px 3px;
    text-align: center;
}
.sui-grid-item .sui-item-icon{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin: 0 auto;
}
.sui-grid-item .sui-item-text{
    font-size: var(--sui-size-sm);
    color: var(--sui-text-primary);
    line-height: 1.2em;
    height: 2.4em;
    text-align: center;

    -webkit-user-select:none;
    user-select:none;

    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}





/*TODO 容器边距*/
.sui-csp_xs,.sui-csp_n {
    padding: 3px;
}
.sui-csp_sm,.sui-csp_s {
    padding: 6px;
}
.sui-csp_md,.sui-csp_m {
    padding: 9px;
}
.sui-csp_lg,.sui-csp_l {
    padding: 12px;
}
.sui-csp_xl,.sui-csp_max {
    padding: 24px;
}
.sui-csp_no {
    padding: 0px;
}

/*子项边距*/
.sui-isp_xs > .sui-item {
    padding: 3px;
}
.sui-isp_sm > .sui-item {
    padding: 6px;
}
.sui-isp_md > .sui-item {
    padding: 9px;
}
.sui-isp_lg > .sui-item {
    padding: 12px;
}
.sui-isp_xl> .sui-item {
    padding: 24px;
}
.sui-isp_no> .sui-item {
    padding: 0px;
}


/*顶部显示内容*/
.sui-screen{
    padding: 36px 12px;
    min-height: 120px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
}








/*宽度比例*/
.sui-iw_1> .sui-item {
    width: 100%;
}
.sui-iw_2> .sui-item {
    width: 50%;
}
.sui-iw_3> .sui-item {
    width: 33.33333%;
}
.sui-iw_4> .sui-item {
    width: 25%;
}
.sui-iw_5> .sui-item {
    width: 20%;
}
.sui-iw_0> .sui-item {
    width: auto;
}

.sui-mw_sm> .sui-item {
    max-width: 96px;
}
.sui-mw_md> .sui-item {
    max-width: 128px;
}
.sui-mw_lg> .sui-item {
    max-width: 156px;
}


/*******end盒子布局********/

/*******TODO 表格布局********/
/*组合*/
.sui-grids-title {
    display: block;
    padding: 18px 12px 6px;
    color: #9a9a9a;
}
.sui-grids {
    overflow: hidden;
    display: block;
    position: relative;
}
.sui-grids > .sui-item, .sui-grids > .sui-grid {
    position: relative;
    display: block;
    float: left;
    width: 33.33333333%;
    box-sizing: border-box;
}
.sui-grids_col1 > .sui-item, .sui-grids_col1 > .sui-grid {
    width: 100%;
    box-sizing: border-box;
}
.sui-grids_col2 > .sui-item, .sui-grids_col2 > .sui-grid {
    width: 50%;
    box-sizing: border-box;
}
.sui-grids_col > .sui-item,
.sui-grids_col > .sui-grid,
.sui-grids_col3 > .sui-item,
.sui-grids_col3 > .sui-grid {
    width: 33.33333333%;
    box-sizing: border-box;
}
.sui-grids_col4 > .sui-item,
.sui-grids_col4 > .sui-grid {
    width: 25%;
    box-sizing: border-box;
}
.sui-grids_col5 > .sui-item,
.sui-grids_col5 > .sui-grid {
    width: 20%;
    box-sizing: border-box;
}
.sui-grids_pd {
    padding: var(--sui-cv);
}
.sui-grids_pd > .sui-item {
    padding: var(--sui-iv);
}
.sui-grids_mpd {
    padding: 3px;
}
.sui-grids_mpd > .sui-item {
    padding: 3px;
}
.sui-grids_space > .sui-item {
    padding: 6px;
}
/*******end表格布局********/

/*******TODO 表单********/
/*表单文字*/
/*图标*/
.sui-icon,[class*="sui-icon"]{
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-indent: -1000px;
    overflow: hidden;
}
.sui-icon_block {
    display: block;
}
.sui-icon_m {
    width: 16px;
    height: 16px;
}
.sui-ico_pd {
    background-size: 20px 20px;
}
.sui-icon_bs_m {
    background-size: 40px;
}

/*调用方式
.sui-ico_success {
    mask-image: url("~@svg/checkbox-circle-fill.svg");
    color: var(--sui-color-success);
}*/

.sui-ico-xs{
    font-size: 20px;
}
.sui-ico-sm{
    font-size: 28px;
}
.sui-ico-md{
    font-size: 48px;
}
.sui-ico-lg{
    font-size: 64px;
}
.sui-ico-xl{
    font-size: 96px;
}











.sui-circle-btn {
    border-radius: 100%;
    overflow: hidden;
    padding: 6px;
    background-color: rgba(255,255,255,0.8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sui-circle-btn-sharp{
    background-color: rgba(230,230,230,0.8);
}
.sui-circle-btn:active{
    background-color: rgba(240,240,240,0.8);
}

/*键*/
.sui-name {
    min-width: 8em;
    display: block;
    color: #9a9a9a;
    text-align: left;
    font-size: 14px;
    line-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
}
/*文字小边距*/
.sui-name_m {
    min-width: 4em;
}



.sui-piece{
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--sui-bg-primary);
}
.sui-piece-link:active{
    background-color: var(--sui-bg-active);
}

/*值*/
.sui-value {
    display: block;
    color: #353535;
    font-size: 14px;
    line-height: 36px;
    word-wrap: break-word;
}
.sui-value-title {
    display: block;
    color: #353535;
    font-size: 14px;
    line-height: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.sui-value-text {
    display: block;
    color: #9A9A9A;
    font-size: 12px;
    line-height: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.sui-list-tit{
    padding: 12px 12px 0px 12px;
}
.sui-list{
}
.sui-list-bg{
    background-color: var(--sui-bg-primary);
}
.sui-list-space{
    padding: 6px;
}
.sui-list-space>.sui-item{
    padding: 6px;
}

.sui-list-space-s{
    padding: 9px;
}
.sui-list-space-s>.sui-item{
    padding: 3px;
}

.sui-ms-xs>.sui-item+.sui-item{
    margin-top: 2px;
}
.sui-ms-sm>.sui-item+.sui-item{
    margin-top: 4px;
}

.sui-cont-item{
    padding: var(--sui-ov) var(--sui-ov);
}

.sui-lable,.sui-label{
    min-width: 6em;
    display: block;
    color: var(--sui-text-primary);
    text-align: left;
    font-size: 16px;
    line-height: 24px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.sui-lable-m,.sui-label-m{
    min-width: 4em;
}
.sui-data {
    display: block;
    color: var(--sui-text-primary);
    font-size: 16px;
    word-break: break-word;
    -webkit-user-select:text;
    user-select:text;
}




.sui-lab{
    min-width: 6em;
    display: block;
    color: var(--sui-text-primary);
    text-align: left;
    font-size: 16px;
    white-space:nowrap;
}




.sui-wordwrap{
    word-break: break-word;
}
.sui-wordnowrap{
    white-space:nowrap;
}

.sui-item-title{
    color: var(--sui-text-primary);
    font-size: 16px;
}

/*文本框*/
.sui-input,.sui-select {
    -webkit-tap-highlight-color: transparent;
    display: block;
    color: #353535;
    text-align: left;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    font-size: 16px;
    line-height: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    width: 100%;
    min-width: auto;
    border-radius: 0;
    background: none;
    overflow: hidden;
}

.sui-input[type="date"],.sui-input[type="time"]{
    line-height: 1;
    padding-top: 8px;
    padding-bottom: 8px;
}
.sui-input[type="datetime-local"]{
    line-height:16px;
    padding-top: 4px;
    padding-bottom: 8px;
}
.sui-input_lg{
    font-size: 32px;
    height: 64px;
}
.sui-minput_lg{
    font-size: 32px;
    height: 64px;
}

/*文本框*/
.sui-input_def{
    width: 100%;
    display: inline-block;
    font-size: 14px;
    height: 36px;
    line-height: 24px;
    padding:6px 12px;
    color: var(--sui-text-primary);
    background: var(--sui-bg-primary);
    border: 1px solid var(--sui-border-lighter);
    border-radius: 3px;
    min-width: 260px;
    max-width: 100%;
}


.sui-input_base{
    color: var(--sui-text-primary);
    background: var(--sui-bg-base);
    border-radius: 3px;
    padding-left: 12px;
    padding-right: 12px;
}

.sui-input:disabled{
    background-color: var(--sui-bg-light);
}
.sui-input:-webkit-input-placeholder, .sui-textarea:-webkit-input-placeholder {
    color: var(--sui-text-placeholder);
}
.sui-input_auto{
    min-width: 400px;
}
.sui-input_block{
    width: 100%;
    min-width: auto;
}
.sui-input_m{
    min-width: auto;
    width: 220px;
}
.sui-input_mini{
    min-width: auto;
    width: 150px;
}
/*手机端文本框*/
.sui-input_concise {
    font-size: 16px;
    padding-left: 0px;
    padding-right:0px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 0px;
    background: transparent;
}

.sui-input_concise:focus {
    border: none;
}
.sui-input_un_border{
    border: none;
}
.sui-input_un_border:focus{
    border: none;
    box-shadow: none;
    outline: none;
    border: none;
}

/*小文本框*/
.sui-input_n{
    font-size: 14px;
    width: 40px;
    min-width: auto;
    text-align: center;
    height: 28px;
    padding-left: 6px;
    padding-right: 6px;
}
.sui-border-primary{
    border-color: var(--sui-color-primary);
}
/*end表单文字*/

.sui-radio,.sui-checkbox{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background-color: var(--sui-bg-base);
    border: 1px solid var(--sui-border-base);
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 50ms ease-in 0ms;
    -moz-transition: all 50ms ease-in 0ms;
    -ms-transition: all 50ms ease-in 0ms;
    transition: all 50ms ease-in 0ms;
    border-radius: 2px;
    outline: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sui-radio{
    border-radius: 50%;
}
.sui-radio.sui-mini,.sui-checkbox.sui-mini{
    width: 18px;
    height: 18px;
}

.sui-radio:checked,.sui-checkbox:checked,.sui-radio.sui-checked,.sui-checkbox.sui-checked {
    border: 1px solid var(--sui-color-primary);
    box-shadow: none;
    color: #FFFFFF;
    background-color: var(--sui-color-primary);
    outline: none;
}
.sui-radio:checked:after,.sui-checkbox:checked:after,.sui-radio.sui-checked:after,.sui-checkbox.sui-checked:after {
    content: '';
    width: 16px;
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid var(--sui-bg-extra);
    border-top: none;
    border-right: none;
    margin-top: 6px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.sui-radio.sui-mini:after,.sui-checkbox.sui-mini:after{
    width: 12px;
    height: 6px;
    margin-top: 4px;
}

.sui-radio:disabled.sui-checkbox:disabled {
    cursor: default;
    opacity: 0.7;
}
.sui-radio + label,.sui-checkbox + label{
    display: inline-block;
    vertical-align: middle;
    padding-left: 4px;
}

/*选择项样式*/
.sui-select-item{
    background-color: var(--sui-bg-base);
    border-radius: 4px;
    overflow: hidden;
}

.sui-select-item.on{
    background-color: #d7ffdc;
}

.sui-textarea {
    min-width: 400px;
    min-height: 6em;
    outline: none;
    color: var(--sui-text-primary);
    /*   background: var(--sui-bg-primary);*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sui-textarea_auto{
    width: 100%;
    min-width: auto;
    min-height: 4em;
    line-height: 1.3;
    padding: 8px 0;
}
.sui-textarea_max {
    width: 100%;
    min-height: 30em;
}
.sui-textarea_padding {
    padding: 12px;
}
/*文字换行*/
.sui-wrap{
    white-space: pre-wrap;
}
/*搜索框*/
.sui-search-box {
    line-height: 1;
    font-size: 16px;
    color: #9A9A9A;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--sui-bg-base);
}
.sui-search-box-active:active {
    background-color: var(--sui-bg-active);
}
.sui-search-input{
    font-size: 16px;
    color: #353535;
    border: none;
    background-color: transparent;
    width: 100%;
    height: 28px;
    line-height: 28px;
    box-sizing: border-box;
    outline: none;
}
.sui-search-opt{
    height: 24px;
    line-height: 24px;
}
.sui-search-box-submit{
    background-color: var(--sui-color-primary);
    color: #FFFFFF;
}
/*.sui-search-box-submit:active{
    background-color: #34A123;
    color: #FFFFFF;
}*/
/*******end表单********/

/*******TODO 操作菜单********/
/*圆形菜单操作*/
.sui-icon-opt {
    width: 53px;
    height: 53px;
    background-color: var(--sui-bg-primary);
    border-radius: 50%;
}
.sui-icon-opt:active {
    background-color: var(--sui-bg-active);
}
/*end圆形菜单操作*/


/*******end操作菜单********/

/*******TODO 样式图标********/
.sui-ico-left,
.sui-back,
.sui-ico-right,
.sui-ico-top,
.sui-ico-bottom,
.sui-more {
    position: relative;
    display: block;
    font-size: 24px;
    width: 1em;
    height: 1em;
    overflow: hidden;
    box-sizing: border-box;
}

.sui-more-mini{
    font-size: 16px;
}
.sui-more-xs{
    font-size: 12px;
}
.sui-back_m {
    font-size: 28px !important;
}

.sui-back:after,
.sui-ico-left:after,
.sui-ico-right:after,
.sui-ico-top:after,
.sui-ico-bottom:after,
.sui-more:after {
    content: '';
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid #9a9a9a;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
    box-sizing: border-box;
    display: block;
    transform-origin: center center;
}

.sui-back:after,
.sui-ico-left:after {
    transform: rotate(225deg);
}

.sui-ico-right:after {
    transform: rotate(45deg);
}

.sui-ico-bottom:after {
    bottom: 25%;
    transform: rotate(135deg);
}

.sui-ico-top:after {
    top: 25%;
    transform: rotate(315deg);
}


/*删除按钮*/
.sui-ico-del,
.sui-mark_del {
    width: 1em;
    height: 1em;
    text-align: center;
    font-size: 24px;
    display: block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    text-indent: -1000px;
    overflow: hidden;
}

.sui-ico_mini{
    font-size: 16px;
}

.sui-ico-del:before,
.sui-ico-del:after,
.sui-mark_del:before,
.sui-mark_del:after {
    content: '';
    height: 2px;
    display: block;
    background: #9a9a9a;
    position: absolute;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    margin: auto;
    text-align: center;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);

}

.sui-ico-del:after,
.sui-mark_del:after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.sui-ico-del:active {
}

/*删除*/
.sui-mark_del {
    font-size: 16px;
}

.sui-mark_del:before,
.sui-mark_del:after {
    background: #FFFFFF;
}


/*添加按钮*/
.sui-ico-add, .sui-ico-sub {
    position: relative;
    width: 1em;
    height: 1em;
    font-size: 22px;
    display: block;
}

.sui-ico-add:before,
.sui-ico-sub:before {
    content: '';
    height: 2px;
    display: block;
    background: #9a9a9a;
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    bottom: 0;
    margin: auto;
    text-align: center;
}

.sui-ico-add:after {
    content: '';
    width: 2px;
    display: block;
    background: #9a9a9a;
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    bottom: 15%;
    margin: auto;
    text-align: center;
}

/*更多按钮*/
.sui-ico-opt {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin: 6px 12px;
    display: inline-block;
    vertical-align: middle;
}

.sui-ico-opt:before {
    content: '';
    position: absolute;
    left: -8px;
}

.sui-ico-opt:after {
    content: '';
    position: absolute;
    right: -8px;
}

.sui-ico-opt, .sui-ico-opt:before, .sui-ico-opt:after {
    width: 4px;
    height: 4px;
    border-radius: 20px;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--sui-border-base);
}

.sui-ico-opt {
    width: 6px;
    height: 6px;
}

.sui-ico-opt:before, .sui-ico-opt:after {
    top: 0;
    bottom: 0;
    margin: auto;
}

.sui-ico-opt_black, .sui-ico-opt_black:before, .sui-ico-opt_black:after {
    background-color: #999999;
}

.sui-ico-opt_white, .sui-ico-opt_white:before, .sui-ico-opt_white:after {
    background-color: #f8f8f8;
}

/*其他颜色*/
.sui-light-opt:before,.sui-light-opt:after{
    border-color: #f5f5f5;
}
.sui-dark-opt:before,.sui-dark-opt:after{
    border-color: #f5f5f5;
}


/*列表标志*/
.sui-ico-sp {
    position: relative;
}

.sui-ico-sp:before {
    display: block;
    content: '';
    position: absolute;
    left: 0px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 4px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background-color: #57A000;
    overflow: hidden;
}


.sui-ico-no {
    width: 6px;
    height: 6px;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--sui-border-lighter);
    border-radius: 10px;
    overflow: hidden;
}
.sui-ico-no_primary {
    background-color: var(--sui-color-primary);
}
.sui-ico-no_error {
    background-color: #e64a2a;
}
.sui-ico-no_warning {
    background-color: #FFB900;
}


/***********end样式图标***********/



/*******TODO 按钮********/
/*按钮*/
.sui-btn {
    position: relative;
    display: inline-block;
    padding: 0 22px;
    line-height: 2.42857143;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space:nowrap;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: var(--sui-color-base);
    color: var(--sui-text-secondary);
    overflow: hidden;
    margin: 0;/*兼容表格布局*/
}
.sui-btn:after {
    border: none;
}
.sui-btn:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.1);
}
.sui-btn:not([disabled]):not(.sui-btn_loading):not(.sui-btn_link):active:before {
    content: "";
}

/*无样式按钮*/
.sui-btn-view{
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    line-height:inherit;
    font-size:inherit;
}
.sui-btn-view:after {
    border: none;
}

/*默认按钮*/
.sui-btn_default {
    background-color: var(--sui-color-base);
    color: var(--sui-text-secondary);
}
/*次要按钮*/
.sui-btn_secondary {
    background-color: var(--sui-color-base);
    color: var(--sui-color-primary);
}
/*重点按钮*/
.sui-btn_primary {
    background-color: var(--sui-color-primary);
    color: var(--sui-color-white);
}
/*警告按钮*/
.sui-btn_warn {
    color: var(--sui-color-danger);
}
/*链接按钮*/
.sui-btn_link {
    background-color: transparent;
    color: var(--sui-color-primary);
}

/*加载按钮*/
.sui-btn_loading:after,
.sui-btn.is-loading:after{
    content: "";
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 12px;
    vertical-align: middle;
    border: 2px solid #FFFFFF;
    border-left-color: #CCCCCC;
    border-radius: 24px;
    vertical-align: middle;
    opacity: 0.9;
    -webkit-animation: loading .6s linear .6s infinite;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}



/*行级*/
.sui-btn_block,.sui-btn-block{
    display: block;
    width: 100%;
}
.sui-btn_opt{
    width: 10em;
}
/*圆角*/
.sui-btn_radius,.sui-btn_circle{
    border-radius: 100px;
}

/*禁用*/
.sui-btn_disabled,
.sui-btn_loading,
.sui-btn:disabled,
.sui-btn.is-disabled{
    opacity: 0.5;
    cursor: default !important;
}
/*.sui-btn[disabled] {*/
/*    color: inherit;*/
/*}*/
/*大小*/
.sui-btn_xs {
    padding: 0 10px;
    font-size: 12px;
    line-height: 1.8;
}
.sui-btn_sm,.sui-btn_mini {
    padding: 0 18px;
    font-size: 12px;
}
.sui-btn_md {
    padding: 0 22px;
    font-size: 16px;
}
.sui-btn_lg,.sui-btn_max{
    padding: 0 36px;
    font-size: 18px;
    line-height: 48px;
}

/*行按钮*/
.sui-btn_cell {
    border-radius:0;
    padding-top: 4px;
    padding-bottom: 4px;
}
.sui-btn_cell:before {
    border-radius: 0px;
}

.sui-btn-group{
    display: flex;
    padding-left: 1px;
    flex-direction: row;
    flex-wrap: wrap;
}
.sui-btn-group>.sui-item{
    margin-left: -1px;
    background-color: var(--sui-bg-base);
}
.sui-btn-group>.sui-item:not(:first-child):not(:last-child){
    border-radius:0;
}
.sui-btn-group>.sui-item:first-child{
    border-top-right-radius:0;
    border-bottom-right-radius: 0;
}
.sui-btn-group>.sui-item:last-child{
    border-top-left-radius:0px;
    border-bottom-left-radius: 0;
}
.sui-btn-group>.sui-item:only-child{
    border-radius: 4px;
}

.sui-btn-group>.sui-item.sui-btn_selected {
    background-color: var(--sui-color-primary);
    color: var(--sui-color-white);
}
/*******end按钮********/


/*******TODO 选择框********/
.sui-opt {
    display: inline-block;
    padding: 6px 12px;
    min-width: 54px;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    color: #666;
    border-color: #E4E8EB;
    background-color: var(--sui-bg-primary);
    line-height: 28px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.sui-opt-sle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: break-word;
    min-width: 8em;
}
.sui-opt-block {
    display: block;
}

.sui-opt.disabled {
    background-color: #DDDDDD;
    opacity: 0.5;
    cursor: default;
}
.sui-opt.on {
    background-color: var(--sui-color-primary);
    border-color: var(--sui-color-primary);
    color: #FFFFFF;
}
.sui-opt .sui-tit {
    font-size: 16px;
    color: #353535;
    line-height: 1.5;
}
.sui-opt .sui-txt {
    font-size: 12px;
    color: #9A9A9A;
    line-height: 1.3;
}
.sui-opt.on .sui-tit {
    color: #FFFFFF;
}
.sui-opt.on .sui-txt {
    color: #DDDDDD;
}



/*******end选择框********/


/*******TODO 标签********/
/*标签*/
.sui-tag, .sui-tag-2 {
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: #9a9a9a;
    /*  background-color: rgba(154, 154, 154, 0.2);*/
    padding: 4px 6px;
    line-height: 1;
    border-radius: 100px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: relative;
    overflow: hidden;
    z-index: 0;
    white-space:nowrap ;
}
.sui-tag:before{
    content: '';
    background-color: currentColor;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0.2;
    z-index: -1;
}

.sui-tag_wane {
    border-radius: 3px;
}
.sui-tag-l{
    font-size: 14px;
    padding: 0px 6px;
    line-height: 1.6;
}
.sui-tag-m {
    font-size: 8px;
    padding: 2px 3px;
    line-height: 12px;
    margin-right: 2px;
    border-radius: 2px;
}
.sui-tag-success,
.sui-tag-green{
    color: var(--sui-color-success);
}
.sui-tag-warning{
    color: var(--sui-color-warning);
}
.sui-tag-primary{
    color: var(--sui-color-success);
}
.sui-tag-danger{
    color: var(--sui-color-danger);
}

.sui-tag-1 {
    color: var(--sui-color-primary);
}
.sui-tag-2 {
    color: var(--sui-GREEN);
}
.sui-tag-3 {
    color: var(--sui-ORANGE);
}
.sui-tag-4 {
    color: var(--sui-BLUE);
}
.sui-tag-5 {
    color: var(--sui-PURPLE);
}
.sui-tag-6 {
    color: var(--sui-LINK);
}
.sui-tag-7 {
    color: var(--sui-LIGHTGREEN);
}

.sui-tag-white {
    color: #FFF;
}
.sui-tag-active{
    cursor: pointer;
}
.sui-tag-active:active{
    opacity: 0.5;
}

.sui-auth-tag{
    background-color: rgba(230, 230, 230, 0.7);
    overflow: hidden;
    border-radius: 50px;
    padding: 2px 6px 2px 2px;
    font-size: 12px;
    line-height: 1;
    color:#9a9a9a;
}
.sui-auth-tag.sui-type-0{
    color: #9a9a9a;
    background-color: rgba(230, 230, 230, 0.7);
}
.sui-auth-tag.sui-type-1{
    background-color: rgba(255, 242, 204, 0.7);
    color: var(--sui-color-warning);
}
.sui-auth-tag.sui-type-2{
    background-color: rgba(220, 255, 204, 0.7);
    color: var(--sui-color-primary);
}
/*end标签*/

/*******end标签********/


/*******TODO 加载动画********/
/*加载框*/
.sui-get {
    position: relative;
}

.sui-get:empty {
    position: relative;
    display: block;
    padding: 24px;
}

.sui-get:empty:before {
    position: relative;
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border: 2px solid #aaa;
    border-left-color: #ddd;
    border-radius: 24px;
    animation: loading .6s linear .6s infinite;
    animation-delay: 0.1s;
    transform-origin: 50% 50%;
    margin: auto;
    z-index: 2;
    opacity: 0.8;
}
.sui-get.sui-get_center:empty{
    padding: 0px;
}
.sui-get.sui-get_center:empty:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
.sui-get.sui-get_light:empty:before {
    border-color: rgba(204, 204, 204, 0.5);
    border-left-color: #ffffff;
    opacity: 1;
}

.sui-get.sui-get-fixed:empty {
    position: fixed;
    padding: 12px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.sui-get.sui-get-fixed:empty:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}


.sui-get_l:empty {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.sui-get_r:empty:before {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

@keyframes loading {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}




.sui-page-load:empty {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: fadein 2s ease-in-out,loader 1s linear infinite;
    margin:auto;
    opacity: 1;

}
.sui-page-load:empty:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 19px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--sui-color-primary);
}
@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadein {
    0% {opacity: 0.0;}

    25% {opacity: 0.0;}

    50% {opacity: 0.0;}

    70% {opacity: 0.5;}

    100% {opacity: 1;}
}

/*******end********/


/*******TODO 组件样式********/
/*加载更多动画*/
.sui-load {
    display: none;
    padding: 20px 12px;
    text-align: center;
    margin-top: 1px;
}
.sui-load-ing {
    display: none;
}
.sui-load-txt {
    color: #999;
    font-size: 14px;
    display: none;
}
.sui-load[data-status=""], .sui-load[data-status="0"] {
    display: none;
}

.sui-load[data-status="1"] {
    display: block;
}

.sui-load[data-status="1"] .sui-load-ing {
    display: block;
}

.sui-load[data-status="2"] {
    display: block;
}

.sui-load[data-status="2"] .sui-load-txt {
    display: block;
}


.sui-loading {
    padding: 20px 12px;
    text-align: center;
    margin-top: 1px;
}
.sui-loading-con {
    display: block;
}
.sui-loading-txt {
    color: #9a9a9a;
    font-size: 14px;
}
.sui-load-ico > .sui-item {
    background-color: #aaa;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    margin: 4px;
    animation-fill-mode: both;
    display: inline-block;
    animation: ball-beat 1s 0s infinite linear;
}
.sui-load-ico > .sui-item:nth-child(2n-1) {
    -webkit-animation-delay: 0.5s !important;
    animation-delay: 0.5s !important;
}

@keyframes ball-beat {
    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

/*end加载更多动画*/

/*******end组件样式********/

/*******TODO 有色边框********/
/*有色边框*/
.sui-overt {
}

.sui-overt > .sui-item {
    margin-bottom: 6px;
    background-color: rgba(220, 255, 204, 0.5);
}

.sui-overt > .sui-item.sui-danger {
    background-color: rgba(255, 227, 221, 0.5);
}

.sui-overt > .sui-item.sui-warning {
    background-color: rgba(255, 242, 204, 0.5);
}

.sui-text-vital {
    font-size: 32px;
    color: #9A9A9A;
}

.sui-text-big {
    font-size: 32px;
    color: #9A9A9A;
}

/*end有色边框*/
/*******end有色边框********/


/*******TODO 底部菜单********/
/*主页菜单*/
.sui-bar {
    position: relative;
    height: 60px;
    display: block;
}
.sui-bar-con {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    margin: auto;
    z-index: 99;
    background-color: var(--sui-bg-primary);
}
.sui-bar-view{
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.sui-bar-cell {
    padding: 6px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sui-bar-item{
    width: 56px;
    margin: 0 auto;
    position: relative;
}
.sui-bar-ico {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    color: var(--sui-text-secondary) !important;
}
.sui-bar-txt {
    line-height: 16px;
    font-size: 10px;
    color: var(--sui-text-secondary);
    text-align: center;
}
.sui-bar-cell.on .sui-bar-txt {
    color: var(--sui-color-primary)  !important;
}
.sui-bar-cell.on .sui-bar-ico {
    color: var(--sui-color-primary)  !important;
}


/*end主页菜单*/
/*******end底部菜单********/


/*******TODO 顶部菜单********/
.sui-nav {
    position: relative;
    height: 44px;
    display: block;
}

.sui-nav-con {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    background-color: var(--sui-bg-primary);
    margin: auto;
    z-index: 99;
}

.sui-navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    z-index: 500;
    top: 0;
    width: 100%;
}

.sui-navbar > .sui-item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 12px 0;
    text-align: center;
    font-size: 0;
    color: #666666;

}

.sui-navbar > .sui-item.on:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 40px;
    height: 3px;
    background-color: var(--sui-color-primary);
}

.sui-navbar-title {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    min-width: 5em;
}

.sui-navbar > .sui-item.on, .sui-navbar > .sui-item.on .sui-navbar-title {
    color: var(--sui-color-primary);
}

/*******end顶部菜单********/


/*******TODO 旧版表单********/
.sui-form-item {
    background-color: #000066;;
}

.sui-form-title {
    line-height: 40px;
    color: #9a9a9a;
    margin-bottom: 25px;
    margin-top: 25px;
}

.sui-form_desc {
    padding-bottom: 40px;
}

.sui-form_lable,.sui-form_label {
    width: 140px;
    line-height: 40px;
}

.sui-form_opt {
    line-height: 40px;
}

.sui-form_input_con {
}

.sui-form_input_item {
    display: inline-block;
    margin-right: 20px;
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sui-form_input_item label {
    cursor: pointer;
}

.sui-form_input,
.sui-form_textarea {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 500px;
    font-size: 0px;
    padding: 10px 12px;
    border: 1px solid #e7e7eb;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    background-color: var(--sui-bg-primary);
    outline: 0;
    min-height: 40px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.sui-form_input:disabled, .sui-form_textarea:disabled {
    background-color: #EEEEEA;
}


/*******TODO 手机形状********/
.sui-phoneview {
    height: 500px;
    overflow: hidden;
    border-bottom: 1px solid #e3e4e6;
}

.sui-phone {
    position: relative;
    box-sizing: border-box;
    font-size: 14px;
    width: 324px;
    height: 614px;
    background: #fafbfc;
    background-image: linear-gradient(-180deg, #fff 1%, rgba(250, 251, 252, 0));
    box-shadow: inset 0 0 0 2px #e3e4e6;
    border-radius: 20px;
    padding: 40px 12px;
    margin: 0 auto;
}

.sui-phone_m {
    width: 375px;
    height: 747px;
}
.sui-phone_s {
    width: 237px;
    height: 450px;
}
.sui-phone-con {
    height: 100%;
    border: 1px solid #e3e4e6;
    position: relative;
}

.sui-phone-img {
    width: 100%;
    height: 100%;
}

.sui-phone-con:hover .sui-phone-code {
    visibility: visible;
    opacity: 1;
}

.sui-phone-code {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 100px 12px;
    visibility: hidden;
    transition: all 0.3s;
    opacity: 0;
}

/*******end手机形状********/


/*******TODO 头部导航栏********/
.sui-navigation {
    position: relative;
    display: block;
    height: 52px;
}

.sui-navigation-con {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    background-color: #FFFFFF;
    z-index: 100;
    height: 52px;
    -webkit-user-select: none;
}

/*导航栏*/
.sui-navigation + div .sui-nav-con {
    top: 52px;
}



.sui-header {
    background-color: #FFFFFF;
    box-shadow: 0 1px 4px 0 rgba(238, 238, 238, 0.5);
}
.sui-header-cont {
    padding: 0 65px;
    height: 56px;
}
.sui-header {
    margin-bottom: 40px;
}





.sui-menu {
    width: 250px;
    float: none;
    position: absolute;
    left: 0;
}
.sui-main {
    min-height: 500px;
    position: relative;
}
.sui-menu + .sui-main {
    margin-left: 250px;
    border-left: 1px solid #e7e7eb;
}
.sui-wrapper> .sui-menu + .sui-main + .sui-footer{
    padding-left: 250px;
    margin-top: 80px;
}

.sui-main-con {
    width: 92%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}


.sui-wrapper-min{
    max-width: 960px !important;
    margin: 0 auto;
    padding: 0 !important;;
}



/*模块容器*/
.sui-panel {
    padding: 24px 40px;
    margin-bottom: 30px;
    margin-left: 12px;
    margin-right: 12px;
    background-color: var(--sui-bg-primary);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.05);
}


/*模块标题*/
.sui-module-title {
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
}




.sui-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    table-layout:auto;
    border: none;
}
.sui-table th,
.sui-table td {
    padding: 12px 10px;
    word-break: break-all;
}
.sui-table th {
    font-weight: 400;
}
.sui-table td {
    border-bottom: 1px solid #E4E8EB;
    border-bottom: 1px solid #f5f5f5;
}
.sui-table thead {
    background-color: #F6F8F9;
    color: #9A9A9A;
}

.sui-table th:last-child,
.sui-table td:last-child {
    padding-right: 20px;
    text-align: right;
}
.sui-table th:first-child,
.sui-table td:first-child {
    padding-left: 20px;
    text-align: left;
}




/*滚动条样式*/
/*滚动条样式*/
.sui-scroll{
    -webkit-overflow-scrolling:touch;
}
.sui-scroll:-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background-color: transparent;

}
/*滚动条没有滑块的轨道部分.*/
.sui-scroll:-webkit-scrollbar-track-piece{
    background-color: transparent;
}
/*滚动条轨道*/
.sui-scroll:-webkit-scrollbar-track {
    border: 2px solid transparent;
    box-shadow: none;
    background: transparent;
}
/*滚动条上的滚动滑块*/
.sui-scroll:-webkit-scrollbar-thumb {
    /*border: 1px solid #cccccc;*/
    background-color: transparent;
    min-height: 20px;
    background-color: #CCCCCC;
}
/*当同时有垂直滚动条和水平滚动条时交汇的部分*/
.sui-scroll:-webkit-scrollbar-corner {
    background: transparent;
}

.sui-scroll-view{
    -webkit-overflow-scrolling:touch;
    overflow: auto;
}


/*弹出层*/
.sui-popup{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0px;
    background-color: rgba(0,0,0,0.6);

    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s 0s, visibility 0s 0.3s;
    -moz-transition: opacity 0.5s 0s, visibility 0s 0.3s;
    transition: opacity 0.5s 0s, visibility 0s 0.3s;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    vertical-align: middle;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    z-index:500;




}



.sui-ba-start {
    -webkit-box-align:start !important;
    -moz-box-align:start !important;
}
.sui-ba-end {
    -webkit-box-align:end !important;
    -moz-box-align:end !important;
}
.sui-ba-center {
    -webkit-box-align:center !important;
    -moz-box-align:center !important;
}
.sui-ba-stretch {
    -webkit-box-align:stretch !important;
    -moz-box-align:stretch !important;
}


.sui-popup.sui-visible{
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.1s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.1s 0s, visibility 0s 0s;
    transition: opacity 0.1s 0s, visibility 0s 0s;
}
.sui-popup-container{
    position: relative;
    max-width: 100%;
    max-height:94%;
    width: 100%;
    margin: 0 auto;
    background: var(--sui-bg-primary);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 15px var(--sui-fg-1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0px;

    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    flex-flow: column;
    -webkit-transform: translate(0,100%);
    transform: translate(0,100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 501;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s,
    -webkit-transform 0.3s;

}

.sui-popup-container-auto,.sui-popup-container-auto{
    background:none;
    box-shadow:none;
    border-radius: 0px;
}


.sui-popup-size-sm{
    height: 30%;
}
.sui-popup-size-md{
    height: 50%;
}
.sui-popup-size-lg{
    height: 70%;
}
.sui-popup-size-xl{
    height: 90%;
}

/*弹框*/
.sui-popup-dialog>.sui-popup-container {
    width: 80%;
    max-width: 320px;
    border-radius: 5px;
    -webkit-transform: translate(0,-15%);
    transform: translate(0,-15%);
}
/*抽屉*/
.sui-popup-drawer>.sui-popup-container {
    padding-top: 6px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}


.sui-popup.sui-visible .sui-popup-container{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

.sui-popup-cont-text{
    max-width: 600px;
    padding: 24px 24px;
    font-size: var(--sui-size-md);
    color: var(--sui-text-regular) ;
}

.sui-popup-full>.sui-popup-container{
    width: 100%;
    height: 100%;
    max-width: auto;
    max-height: auto;
    box-shadow: none;
    border-radius: 0;
}


.sui-popup .sui-view-cont{
    z-index:502;
}
.sui-popup .sui-view-foot{
    z-index:501;
}

.sui-position-foot{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.sui-drawer-con > .sui-item{
    padding: 20px;
    font-size: 16px;
    color: #353535;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sui-drawer-con > .sui-item:active{
    background-color: var(--sui-bg-active);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}



/*消息提示*/
.sui-tips {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0 12px;
    z-index: 100000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
    -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
    transition: opacity 0.5s 0s, visibility 0s 0.5s;
}
.sui-tips>.sui-tips-con {
    display: inline-block;
    min-width: 200px;
    padding: 10px 30px;
    color: #fff;
    border-radius: 3px;
    background-color: var(--sui-color-primary);
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
.sui-tips.is-visible{
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.1s 0s, visibility 0s 0s;
    -moz-transition: opacity 0.1s 0s, visibility 0s 0s;
    transition: opacity 0.1s 0s, visibility 0s 0s;
}
/*成功*/
.sui-tips.success>.sui-tips-con,
.sui-tips[data-type='4']>.sui-tips-con{
    background-color: var(--sui-color-primary);
}
/*失败*/
.sui-tips.error>.sui-tips-con,
.sui-tips[data-type='3']>.sui-tips-con{
    background-color: var(--sui-color-danger);
}
/*警告*/
.sui-tips.warning>.sui-tips-con,
.sui-tips[data-type='2']>.sui-tips-con{
    background-color: var(--sui-color-warning);
}
/*消息*/
.sui-tips.info>.sui-tips-con,
.sui-tips[data-type='1']>.sui-tips-con{
    background-color: var(--sui-color-primary);
}
/*消息提示*/
/*选择框*/
.sui-choose{
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.sui-choose-input{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    background-color: var(--sui-bg-extra);
    border: 2px solid var(--sui-border-base);
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 50ms ease-in 0ms;
    -moz-transition: all 50ms ease-in 0ms;
    -ms-transition: all 50ms ease-in 0ms;
    transition: all 50ms ease-in 0ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    outline: none;
    overflow: hidden;
}
.sui-choose-radio{
    border-radius: 50%;
}
.sui-choose-input:checked,
.sui-choose-input.is-checked{
    border: 1px solid var(--sui-color-primary);
    box-shadow: none;
    color: #FFFFFF;
    background-color: var(--sui-color-primary);
}
.sui-choose-input:checked:after,
.sui-choose-input.is-checked:after{
    content: '';
    width: 12px;
    height: 6px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid #fcfff4;
    border-top: none;
    border-right: none;
    margin-top: 8px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.sui-choose-input:disabled,
.sui-choose-input.is-disabled{
    cursor: default;
    opacity: 0.5;
}
.sui-choose-lable,.sui-choose-label{
    display: inline-block;
    vertical-align: middle;
    padding-left: 10px;
}

/*数量输入框*/
.sui-number-opt{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    background-color: var(--sui-bg-extra);
    display: block;
    position: relative;
    outline: none;
    border: 2px solid var(--sui-color-primary);
    box-shadow: none;
    color: #FFFFFF;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.sui-number-opt:active{
    opacity: 0.8;
}
.sui-number-add:before,
.sui-number-add:after,
.sui-number-sub:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.sui-number-add:before{
    width: 2px;
    height: 12px;
    background-color: var(--sui-color-primary);
}
.sui-number-add:after,
.sui-number-sub:after{
    width: 12px;
    height: 2px;
    background-color: var(--sui-color-primary);
}

.sui-number-opt.on{
    border: 2px solid var(--sui-color-primary);
    background-color: var(--sui-color-primary);
}
.sui-number-add.on:before,
.sui-number-add.on:after{
    background-color: #fcfff4;
}
.sui-number-tit{
    font-size: 16px;
    color: var(--sui-color-primary);
    width: 30px;
    line-height: 26px;
    text-align: center;
    font-weight: 400;
    height: 26px;
}
.sui-number-box{
    background-color: var(--sui-bg-extra);
    border-radius: 50px;
    overflow: hidden;
    display: inline-block;
}

/*按钮开关*/
.sui-switch {
    -webkit-user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    user-select: none;
    position: relative;
    display: block;
    padding: 3px;
    border-radius: 24px;
    border: none;
    width: 46px;
    height: 30px;
    background-color: var(--sui-bg-light);
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}
.sui-switch:disabled,.sui-switch[disabled],.sui-switch.is-disabled{
    opacity: 0.8;
    cursor: inherit;
}
.sui-switch:active{
    outline: none;
    user-select: none;
}
.sui-switch:before {
    content: '';
    display: block;
    border-radius: 24px;
    height: 22px;
    background-color: #CCCCCC;
    border: none;
    width: 40px;
    height: 24px;
}
.sui-switch:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -11px;
    margin-left: -11px;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
    -webkit-transform: translateX(-9px);
    -webkit-transition: transform 0.3s ;
    transition: transform 0.3s;
}
.sui-switch:checked:after,.sui-switch.sui-checked:after {
    -webkit-transform: translateX(9px);
}
.sui-switch:checked:before,.sui-switch.sui-checked:before {
    background-color: var(--sui-color-primary);
}
.sui-switch-mini{
    width: 32px;
    height: 20px;
    padding: 2px;
}
.sui-switch-mini:before{
    height: 16px;
    width: 28px;
}
.sui-switch-mini:after{
    height: 14px;
    width: 14px;
    margin-top: -7px;
    margin-left: -7px;
    -webkit-transform: translateX(-7px);
}
.sui-switch-mini:checked:after,.sui-switch-mini.sui-checked:after {
    -webkit-transform: translateX(7px);
}
/*end选择框*/



/*进度条*/
.sui-progress {
    background: rgba(0, 0, 0, .1);
    border-radius: 4px;
    overflow: hidden;
    display: block;
}
.sui-progress-bar {
    width: 0%;
    background-color: var(--sui-color-primary);
    position: relative;
    height: 5px;
    border-radius: 4px;
    -webkit-transition: .4s linear;
    -moz-transition: .4s linear;
    -o-transition: .4s linear;
    transition: .4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
}

.sui-progress-bar.active {
    animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

.sui-progress-bar.begin {
    width: 0%;
}

.sui-progress-bar.end {
    width: 100%;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 20px 0
    }
    to {
        background-position: 0 0
    }
}
/*end 进度条*/

/******菜单项******/
.sui-tree-top {}
.sui-tree.sui-tree-top>.sui-item {
    position: relative;
}
.sui-tree-top .sui-link {
    vertical-align: middle;
}
.sui-tree-top .sui-link:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.03);
}
.sui-tree.sui-tree-top>.sui-item:before {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 94px;
    width: 43%;
    border-top: 1px solid #E4E8EB;
}

.sui-tree.sui-tree-top>.sui-item:last-child:before {
    display: none;
}
.sui-tree-ico {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}
.sui-tree.sui-tree-top>.sui-item>.sui-link {
    font-size: 18px;
    line-height: 50px;
    padding-left: 70px;
    position: relative;
    display: block;
}

.sui-tree-top .sui-ico {
    margin-right: 10px;
}
.sui-tree {
    display: block;
    padding-bottom: 8px;
}
.sui-tree>.sui-item {
    /*padding: 8px 0;*/
}
.sui-tree>.sui-item>.sui-link {
    color: #333333;
    display: block;
    line-height: 42px;
    padding-left: 98px;
    padding-right: 20px;
}
.sui-tree>.sui-item>.sui-link.on {
    color: var(--sui-color-primary);
}

/*菜单项*/

/*权限信息*/
.sui-footer {
    padding-left: 0px;
    margin-top: 80px;
}

.sui-footer.sui-menu-pd .sui-footer-con {
    width: 92%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.sui-footer.sui-menu-pd{
    margin-left: 12px;
    margin-right: 12px;
}

.sui-footer-con{
    padding: 16px 0 40px;
    border-top: none;
    margin-left: auto;
    margin-right: auto;
}

.sui-footer-con_info {
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E4E8EB;
}


.sui-page-foot{
    max-width: 1600px;
    padding-bottom: 12px;
    margin-top: 80px;
    margin-left: 12px;
    margin-right: 12px;
}
.sui-page-foot-con{
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #E4E8EB;
}


/*end权限信息*/
.sui-tabs {
    position: relative;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    -webkit-box-lines: single;
    -webkit-box-orient: horizontal;
    flex-wrap: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    justify-content:center;
    overflow: auto;
}
.sui-tabs.sui-tabs_center{
    justify-content: center;
}
.sui-tabs.sui-tabs_left{
    justify-content: flex-start;
}
.sui-tabs.sui-tabs_right{
    justify-content: flex-end;
}
.sui-tabs>.sui-item{
    cursor: pointer;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    color: #353535;
    position: relative;
    min-width: 5em;
    /*    padding-left: 12px;
        padding-right: 12px;*/
}
.sui-tabs_mini>.sui-item{
    font-size: 12px;
    line-height: 28px;
}
.sui-tabs_small>.sui-item{
    font-size: 14px;
    line-height: 30px;
    min-width: 2.2em;
}
.sui-tabs_space>.sui-item + .sui-item{
    margin-left: 12px;
}

.sui-tabs>.sui-item.on{
    color: var(--sui-color-primary);
}
.sui-tabs.sui-tabs_line>.sui-item.on:before{
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    max-width: 56px;
    margin: auto;
    background-color: var(--sui-color-primary);
}
.sui-tabs.sui-tabs_small.sui-tabs_line>.sui-item.on:before{
    height: 2px;
}
.sui-tabs.sui-tabs_flex>.sui-item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.sui-tabs-con{
    position: relative;
    height: 48px;
}
/*.sui-tabs-con>.sui-tabs{
    background-color: var(--sui-bg-primary);
}*/
.sui-tabs-con.sui-tabs-con_fixed>.sui-tabs,.sui-tabs-con.sui-fixed>.sui-tabs{
    position: sticky;
    top:0;
    right: 0;
    left: 0;
    z-index: 2;
}


/*兼容有标题情况*/
.sui-navigation + div .sui-tabs-con.sui-tabs-con_fixed>.sui-tabs,.sui-navigation + div .sui-tabs-con.sui-fixed>.sui-tabs {
    top: 52px;
}

/*.sui-search-con{
    height: 60px;
}*/
/*.sui-search-con>.sui-search{
    background-color: var(--sui-bg-primary);
}*/
.sui-search-con.sui-fixed>.sui-search{
    position: fixed;
    top:0;
    right: 0;
    left: 0;
    z-index: 2;
}
.sui-search-con.sui-fixed + .sui-tabs-con.sui-fixed>.sui-tabs{
    top: 60px;
}

.sui-container.sui-has-nav .sui-search-con.sui-fixed>.sui-search{
    top:52px;
}
.sui-container.sui-has-nav .sui-search-con.sui-fixed + .sui-tabs-con.sui-fixed>.sui-tabs{
    top:112px;
}
.sui-tabs_black{
}
.sui-tabs_white>.sui-item {
    color: #ffffff;
    opacity: 0.8;
}
.sui-tabs_line.sui-tabs_white>.sui-item.on {
    color: #ffffff;
    opacity: 1;
}
.sui-tabs_line.sui-tabs_white>.sui-item.on:before{
    background-color: var(--sui-bg-primary);
}
.sui-tabs_group {
    justify-content:center;
    border: none;
    border-radius: 100px;
    overflow: hidden;
}
.sui-tabs_group>.sui-item {
    color: #353535;
    opacity: 0.8;
    margin-left: 0;
    padding: 6px 8px;
    line-height: 1;
    min-width: auto;
    background-color: rgba(255,255,255,0.3);
}
.sui-tabs_group>.sui-item.on {
    opacity: 1;
    color: var(--sui-color-primary);
    border-bottom: none;
}
.sui-tabs_group>.sui-item.on:before {
    content: none;
}
.sui-tabs_group.sui-tabs_white>.sui-item {
    color: #ffffff;
    opacity: 0.8;
}
.sui-tabs_group.sui-tabs_white>.sui-item.on {
    opacity: 1;
    color: #ffffff;
    border-bottom: none;
    background-color: rgba(255,255,255,0.9);
    color: var(--sui-color-primary);
}




.sui-tabs_tag {

}
.sui-tabs_tag>.sui-item {
    color: #353535;
    opacity: 0.8;
    margin-left: 0;
    padding: 6px 12px;
    line-height: 1;
    min-width: auto;
    background-color: rgba(255,255,255,1);
    font-size: 14px;

    border-radius: 100px;
    overflow: hidden;
}
.sui-tabs_tag>.sui-item.on {
    opacity: 1;
    color: var(--sui-color-white);
    background-color: var(--sui-color-primary);
}


/*技术支持*/
.sui-img-hs{
    height: 24px;
    width: auto !important;
}
.sui-img-ws{
    height: auto;
    width: 24px;
}

/*警告提示，固定顶部*/
.sui-caution{
    position: relative;
    background-color: var(--sui-bg-extra);
    color: #FFFFFF;
    margin: 12px;
    border-radius: 4px;
    box-shadow: 1px 1px 10px #cccccc;
}



.sui-caution-view.sui-fixed{
    height: 36px;
}
.sui-caution-view.sui-fixed > .sui-caution{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
}

/*富文本视图*/
.sui-content-view{
    overflow: hidden;
    display: -webkit-box !important;
    overflow: hidden !important;
    white-space: normal;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    font-size: var(--sui-size-md);
    color: var(--sui-text-secondary);
}
.sui-content-view.sui-hide{
    -webkit-line-clamp: 6;
}
.sui-content-view img{
    max-width: 100%;
}
.sui-content-opt{
    text-align: center;
    padding: 12px;
    cursor: pointer;
    color: #9a9a9a;
}
.sui-content-opt:active{
    background-color: var(--sui-bg-active);
    -webkit-tap-highlight-color: transparent;
}

/*调试视图*/
.sui-debug-view{
    width: 50%;
    min-height: 80px;
    position: fixed;
    top: 12px;
    left: 12px;
    background-color: rgba(0,0,0,0.8);
    padding: 20px;
    z-index: 10000;
    border-radius: 4px;
    overflow: hidden;
    word-wrap: break-word;
    color: var(--sui-color-primary);
    cursor: move;
    transition: top 0.3s, left 0.3s;
}
.sui-debug-con{
    width: 100%;
    height: 100%;
    overflow: auto;
}
/*提示操作*/
.sui-cue{
    padding: 0px 12px;
    border-radius: 4px;
    background-color:var(--sui-bg-extra);
    position: relative;
    padding-left: 24px;
}
.sui-cue_auto{
    background-color:transparent;
}
/*.sui-cue:before{
    content: '';
    display: block;
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 4px;
    height: 4px;
    background-color: var(--sui-color-primary);
    border-radius: 2px;
    opacity: 0.3;
}*/
.sui-cue:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 20px;
    border: 2px solid var(--sui-color-primary);
    opacity: 0.5;
    /*  background-color: red;*/
}

.sui-cue-ico{
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    background-color: var(--sui-color-primary);
    border-radius: 100px;
}
/*.sui-cue-ico:before{*/
/*    content: '';*/
/*    display: block;*/
/*    position: absolute;*/
/*    left: 12px;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    margin: auto;*/
/*    width: 4px;*/
/*    height: 4px;*/
/*    background-color: var(--sui-color-primary);*/
/*    border-radius: 2px;*/
/*    opacity: 0.3;*/
/*}*/
.sui-cue-ico:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border-radius: 20px;
    border: 2px solid #FFFFFF;
    opacity: 0.8;
}


/*上传图片*/
.sui-res-add{
    border: 1px dashed  var(--sui-border-base);
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
}
.sui-add,.sui-fun{
    position: fixed;
    right: 20px;
    bottom: 30px;
    box-sizing: border-box;
    width: 54px;
    height: 54px;
    background-color: var(--sui-color-primary);
    border-radius: 100px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0px 0px 10px var(--sui-fg-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /*   text-indent: -1000px;*/
    opacity: 0.8;
}
.sui-fun{
    right: 20px;
    bottom: 94px;
    background-color: var(--sui-color-white);
}
.sui-add.sui-relative,.sui-fun.sui-relative{
    position: relative;
    width: 34px;
    height: 34px;
    right: auto;
    bottom: auto;
}
.sui-add:active,.sui-fun:active{
    opacity: 0.5;
}
.sui-add:before,.sui-res-add:before{
    content: '';
    height: 2px;
    width: 30%;
    display: block;
    background: var(--sui-border-base);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}
.sui-add:after,.sui-res-add:after {
    content: '';
    width: 2px;
    height:30%;
    display: block;
    background: var(--sui-border-base);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
}
.sui-add:before,.sui-add:after{
    background: var(--sui-color-white);
}

.sui-fun:before,.sui-fun:after {
    content: '';
    height: 4px;
    width: 4px;
    background-color: var(--sui-color-primary);
    position: absolute;
    margin: auto;
    border-radius: 100px;
}
.sui-fun:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 12px;
    margin: auto;
}
.sui-fun:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    bottom: 0;
    margin: auto;
}


/*.sui-ico-opt {*/
/*    position: relative;*/
/*    -webkit-user-select: none;*/
/*    -moz-user-select: none;*/
/*    -ms-user-select: none;*/
/*    user-select: none;*/
/*    -webkit-tap-highlight-color: transparent;*/
/*    margin: 6px 12px;*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*}*/







.sui-fixebox{
    min-height: 120px;
}
.sui-fixedcon{
    position: fixed;
    bottom: 48px;
    width: 100%;
    z-index: 88;
    text-align: center;
}
.sui-bar ~ .sui-fixebox > .sui-fixedcon{
    bottom: 66px;
}
/*固定头部兼容*/
.sui-container.sui-has-bar .sui-fixebox{
}
.sui-container.sui-has-bar .sui-fixedcon{
    bottom: 60px;
}

/*详情页，背景*/
.sui-plan{
    background-color: var(--sui-color-primary);
    color: #FFFFFF;
}
.sui-plan .sui-plan-tit{
    font-size: 18px;
    color: #FFFFFF;
    opacity: 1;
}
.sui-plan .sui-plan-txt{
    color: #FFFFFF;
    font-size: 14px;
    opacity: 0.8;
}









/*内容部件*/
.sui-parts{
    /* margin-bottom: 12px;*/
}
.sui-part{
    margin-top: 12px;
}
.sui-part>.sui-part-head{
    /*padding:12px 12px 6px;*/
    padding:var(--sui-uv) var(--sui-uv)  var(--sui-ov);
}
.sui-part-tit{
    font-size: var(--sui-size-md);
    color: var(--sui-text-regular);
}
/*.sui-part+.sui-part{
    margin-top: 12px;
}*/
/*.sui-part>.sui-part-cont{
    margin-top: 12px;
}
.sui-part>.sui-part-head + .sui-part-cont{
    margin-top: 0px;
}*/
.sui-part>.sui-part-cont{
    background-color: var(--sui-bg-primary);
}
.sui-part>.sui-part-cont{
    border-radius: 0px;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
}


/*.sui-parts-area */
.sui-part>.sui-part-tit{
    margin-left: 12px;
    margin-right: 12px;
}
/*.sui-parts-area */
.sui-part>.sui-part-cont{
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px;
}
.sui-part-body{

}

/*部件视图*/
.sui-part-item,.sui-part-view{
    border-radius: 0px;
    overflow: hidden;
    margin-left: 0;
    margin-right: 0;
    background-color: var(--sui-bg-primary);
    position: relative;
}

.sui-part-item+.sui-part-item{
    margin-top: 12px;
}

.sui-part-view{
    margin-top: 12px;
}

.sui-part-view>.sui-part-tit{
    padding:var(--sui-uv) var(--sui-uv)  var(--sui-ov);
    font-size: var(--sui-size-md);
    color: var(--sui-text-primary);
}
/*没有边距*/
.sui-part-nt{
    margin-top: 0px;
}
/*上下小边距*/
.sui-part-sm{
    padding-top: 6px;
    padding-bottom: 6px;
}


.sui-parts-area{
}
/*.sui-parts-area */
.sui-part-view, .sui-part-item{
    border-radius: 4px;
    margin-left: 12px;
    margin-right: 12px;
}
.sui-part-view.sui-margin-none{
    margin-top: 0px;
}
/*.sui-parts-area */
.sui-part-view.sui-margin-none,
.sui-part-item.sui-margin-none{
    border-radius: 4px;
    margin-left: 0px;
    margin-right: 0px;
}

.sui-cell{
    border-radius: 4px;
    /*overflow: hidden;*/
    background-color: var(--sui-bg-primary);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.sui-cell_base{
    background-color: var(--sui-bg-base);
}

.sui-cell.sui-on{
    /* border: 2px solid var(--sui-color-primary);*/
    background-color: #f1fff3;
    border: 1px solid var(--sui-color-primary);
}

.sui-choice{
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
.sui-choice:after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sui-bg-base);
    z-index: -1;
}
.sui-choice.sui-on{
    color: #ffffff;
}
.sui-choice.sui-on:after{
    background-color: var(--sui-color-primary);
    opacity: 0.6;
}
.sui-choice.sui-on .sui-tst{
    color: #ffffff;
}


/*元件*/
.sui-compon{
    border-radius: 4px;
    overflow: hidden;
    margin: 12px;
    background-color: var(--sui-bg-primary);
}
.sui-compon + .sui-compon{
    margin-top: 12px;
}

/*背景墙*/
.sui-wall-view{
    background-color: var(--sui-color-primary);
    padding-bottom: 40px;
}
/*背景墙下面内容*/
.sui-wall-view + .sui-wall-cont{
    margin-top: -40px;
}

.sui-wall-view.sui-wall-md{
    padding-bottom: 200px;
}
.sui-wall-view.sui-wall-md + .sui-wall-cont{
    margin-top: -200px;
}

.sui-wall-view.sui-wall-sm{
    padding-bottom: 80px;
}
.sui-wall-view.sui-wall-sm + .sui-wall-cont{
    margin-top: -80px;
}


.sui-wall-view.sui-wall-res{
    padding-bottom: 200px;
}
.sui-wall-view.sui-wall-res + .sui-wall-cont{
    margin-top: -100px;
}


/*默认背景墙*/
.sui-wall{
    margin-bottom: -60px;
    background-color: var(--sui-color-primary);
    z-index:0;
}

.sui-wall-area{
    padding: 12px 12px 80px;
    text-align: center;
}

/*.sui-wall-view + .sui-wall-cont{
    background-color: #ffffff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: var(--sui-bg-lighter);
}*/


.sui-wall-cont{
    margin-top: -40px;
    position: relative;
}

.sui-ul{

}
.sui-ul>.sui-item,.sui-ul>li{
    position: relative;
    padding-left: 12px;
    margin-bottom: 12px;
}
.sui-ul>.sui-item:after,.sui-ul>li:after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 1px;
    background-color: currentColor;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}





/*页面切换动画*/
.sui-out-enter-active,
.sui-out-leave-active,
.sui-in-enter-active,
.sui-in-leave-active {
    will-change: transform ;
    transition: all 350ms;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    position: absolute;
    position:fixed;
    /*    z-index: 2;*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.sui-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.sui-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.sui-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.sui-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}


/*组件滑动*/
.sui-slide-in-enter-active,
.sui-slide-leave-active,
.sui-slide-out-enter-active,
.sui-slide-out-leave-active{
    will-change: transform ;
    transition: all 350ms;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    perspective: 1000px;
}
.sui-slide-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.sui-slide-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}

.sui-slide-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.sui-slide-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}

/*底部操作按钮*/
/*.sui-opt-view{
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    padding: 60px 6px 80px 6px;
    flex-flow: column;
}
.sui-opt-view>.sui-item{
    padding: 6px;
    flex: 1;
}*/

/*引导视图*/
.sui-lead-view{
    padding: 60px 12px;
    margin: 0 auto;
    text-align: center;
}
/*操作视图*/
.sui-opt-view{
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 60px 12px 80px 12px;
    margin-top: 24px;
    flex-direction: column;
    gap: 12px !important;
}
.sui-opt-area{
    padding: 60px 12px 80px 12px;
}



/*grid布局*/
.sui-grid {
    display: grid !important;
    /* justify-items: stretch;
     grid-auto-columns: 50px;*/
}
.sui-grid-col1 {
    grid-template-columns: repeat(1, 1fr);
}
.sui-grid-col2 {
    grid-template-columns: repeat(2, 1fr);
}
.sui-grid-col3 {
    grid-template-columns: repeat(3, 1fr);
}
.sui-grid-col4 {
    grid-template-columns: repeat(4, 1fr);
}
.sui-grid-col5 {
    grid-template-columns: repeat(5, 1fr);
}
.sui-gap-md {
    gap: 12px !important;
}
.sui-gap-sm {
    gap: 6px !important;
}
.sui-col-6 {
    /*flex: 0 0 auto;*/
    /*width: 50%;*/
}