body{
    margin: 0; font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,"PingFang SC","Source Han Sans SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi MicroHei",sans-serif;
}
a{
    text-decoration:none
}

li{
    list-style: none;
}
.mag-container{
    height:100%;
}
.mag-aside{
    width: auto;
    display: flex;
    border-right: solid 1px #e6e6e6;
    flex-direction: column;
    background-color: #f5f7fa
}

.mag-aside .logo-wrapper {
    line-height: 80px;
    text-align: center;
}

.mag-aside .logo-wrapper .logo-img {
    width: 45px;
    vertical-align: middle;
    tranistion: all .15s;
}
.mag-el-menu-vertical{
    flex-grow: 1;
}
.mag-aside .mag-el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.sidebar-collapser {
    border-top: 1px solid #e2e5ea;
}
.sidebar-collapser i{
    width: 58px;
}
.sidebar-item {
    height: 45px;
    line-height: 45px;
    color: #8d9199;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    font-size: 14px;
    white-space: nowrap;
}

.sidebar-item .el-menu--collapse .collapse-label{
    display: none;
}
.sidebar-collapser>a .collapse-icon {
    display: inline-block;
    text-align: center;
    height: 12px;
}

.mag-header{
    text-align: left; font-size: 12px;border-bottom: solid 1px #e6e6e6;
}
.mag-header .el-menu--horizontal{
    border-bottom: none;
    background: none;
}
.el-menu{
    border-right: none;
    background-color:transparent;
}

.mag-header .title{
    float: left;line-height: 60px;
}
.mag-header .title h3{
    margin: 0;
    color: #2f3033;
}
.mag-header h2{
    margin: 0;
}
.navi-right .el-badge__content.is-fixed{
    top: 17px;
    right: 16px;
}
.mag-header .navi-right{
    float: right;line-height: 60px;
}

.mag-header .navi-right a{
    padding: 10px;
    font-size: 14px;
    color: #7a8599;
}

.user-pop-header{
    position: relative;
    padding-top: 0;
    padding-left: 84px;
    border-bottom: solid 1px #e6e6e6;
}
.user-pop-header .account-info{
    padding-right: 85px;
}
.user-pop-header .recharge{ position: absolute; right: 0; top: 10px; }
.user-pop-header .avatar{
    position: absolute;
    top: 7px;
    left: 13px;
    width: 44px;
    height: 45px;
    border-radius: 50px;
}
.user-pop-header .pay{
    position: absolute;
    top: 7px;right: 13px;
}

.msg-pop{
    padding: 0;
}


.msg-pop .popper__arrow::after {
    border-bottom-color: #f5f7fa!important;
}
.msg-pop-header{
    padding: 15px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #dcdfe5;
}
.msg-pop-bottom{
    border-top: 1px solid #dcdfe5;
    padding: 10px;
    text-align: center;
}
.msg-pop-header .el-icon-setting{
    float: right;
    font-size: 18px;
}
.msg-pop-content{
    height: 164px;
}

.msg-pop-content .item{
    border-bottom: 1px solid #ebeef5;
    padding: 5px 15px;
}



.msg-pop-content span{
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.mag-header .navi-right .avatar {
    display: inline-block;
    height: 31px;
    margin-top: -4px;
    margin-left: 4px;
}
.img-circle {
    border-radius: 50%;
    vertical-align: middle;
}
.el-menu-item {
    color: #8d9199;
    border-left: 3px solid transparent;
}

.el-submenu__title{
    color: #8d9199;
    border-left: 3px solid transparent;
}

.user_navi_menu i{
    display: block;
}
.user_navi_menu a{
    display: block;
    vertical-align: middle;
    height: 50px;
    color: #8d9199;
    line-height: normal;
    text-align: center;
    padding-top: 20px;
}
.user_navi_menu{
    border-bottom: solid 1px #e6e6e6;
}
.el-pagination{
    padding: 10px;
    border: 1px solid #ebeef5;
}

.mag-nav-bar .mod-title{
    margin: 0; padding-bottom: 36px; color: #2f3033; font-size: 18px; font-weight: normal;
}
.mag-nav-bar .current{
    color: #8d9199;
}
.mag-nav-bar .current .deco{
    margin: 0 5px;
    font-weight: 300;
}
.tab-main-content{
    margin-top: 40px;
}
.tab-main-content .title{ margin: 10px 0; font-size: 16px; color: #5e6166; }

.widget{
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.14);
    -moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.14);
    box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.14);
    margin-top: 16px;
    position: relative;
}

.whead {
    color: #636363;
    background: #fbfbfb;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#fbfbfb',GradientType=0 );
    font-family: "Microsoft YaHei";
    font-size: 14px;
}
.whead h6{
    float: left;
    display: block;
    padding: 8px 14px 0px 14px;
    font-size: 14px;
    font-weight: bold;
    margin: 9px 0px;
}

.clear {
    clear: both;
}
.widget > [class*="whead"] {
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 0 #fff;
    -moz-box-shadow: 0 1px 0 #fff;
    text-shadow: 0 1px #fff;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    position: relative;
}

ul{
    margin: 0;
    padding: 0;
}


.grey_box{
    padding: 5px 10px;
    background: #FAFAFA;
    border: 1px solid #f0f0f0;
}

.right{
    float: right;
}

.el-table__body-wrapper {
    overflow-x: scroll;
}



.ly-iconfont{ font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-variant: normal; text-transform: none;
    line-height: 1; display: inline-block; }
.icon-icon_home:before { content: "\e601"; }
.icon-icon_config:before { content: "\e602"; }
.icon-icon_ticket:before { content: "\e603"; }
.icon-icon_seller:before { content: "\e604"; }
.icon-icon_card:before { content: "\e605"; }
.icon-icon_activity:before { content: "\e606"; }
.icon-icon_order:before { content: "\e607"; }
.icon-icon_advertise:before { content: "\e608"; }
.icon-icon_tickets:before { content: "\e60d"; }
.icon-icon_goods:before { content: "\e60f"; }
.icon-icon_gift:before { content: "\e610"; }
.icon-icon_shop1:before { content: "\e611"; }
.icon-icon_configcopy:before { content: "\e609"; }
.icon-icon_deal:before { content: "\e612"; }
.icon-icon_income:before { content: "\e613"; }
.icon-icon_vip:before { content: "\e614"; }
.icon-icon_vistor:before { content: "\e615"; }
.icon-icon_deal_today:before { content: "\e618"; }
.icon-icon_income_today:before { content: "\e619"; }
.icon-icon_share_today:before { content: "\e61a"; }
.icon-icon_vip_today:before { content: "\e61b"; }
.icon-icon_vistor_today:before { content: "\e61c"; }
.icon-icon_share:before { content: "\e61e"; }
.icon-icon_decoration:before { content: "\e61f"; }
.icon-icon_marketing:before { content: "\e620"; }

.cf:before,
.cf:after{ content: " "; display: table; }
.cf:after{ clear:both; }
.clear:after{ content: " "; display: block;clear:both; }
.lf{float: left;}
.rt{float: right;}

[v-cloak]{ display: none; }

.ly-top-header{ padding: 0 20px 0 0; height: 60px; position: relative; }
.ly-top-header .logo{ float: left; width: 200px; height: 60px; }
.ly-top-header .icon-question{ float: right; color:#ADBECE; font-size: 20px; margin-top: 20px; }
.ly-top-dropdown{ float: right; margin: 23px 0 0 20px; color:#C0C4CB; }
.ly-aside-el-menu{ border:0 none; background-color: rgba(0,0,0,0); margin-top: 10px; }
.fixed-aside-col .menu-wrapper.collapsed .el-submenu.is-opened .el-menu,
.ly-aside-el-menu .el-submenu.is-opened{ background-color: #F0F3F7;  }
.ly-aside-el-menu .el-submenu.is-opened .el-menu{ background-color: rgba(0,0,0,0) }
.ly-aside-el-menu .ly-iconfont{ margin-right: 5px; width: 24px; text-align: center; font-size: 22px; position: relative; top: -1px;  }

/* 可垂直滚动元素，隐藏掉滚动条 */
.has-vertical-scrollerbar{ overflow:hidden; overflow-y:scroll;  }
.has-vertical-scrollerbar::-webkit-scrollbar-track-piece,
.has-vertical-scrollerbar::-webkit-scrollbar{ width: 0; }
.has-horizontal-scrollerbar{ overflow-y: hidden; overflow-x:scroll;  }
.has-horizontal-scrollerbar::-webkit-scrollbar-track-piece{ background-color:#fff; height: 12px; border-radius:7px;}
.has-horizontal-scrollerbar::-webkit-scrollbar{ height: 12px; }
.has-horizontal-scrollerbar::-webkit-scrollbar-thumb{ background-color:#dedede; }
.has-horizontal-scrollerbar::-webkit-scrollbar-thumb:hover{ background-color:#dedede;}

.fixed-aside-col{ z-index: 1000; position: fixed; left:0; top: 60px; bottom: 0; width: 170px; background-color: #F5F7FA; -webkit-transition: all 0.2s; transition: all 0.2s; padding-bottom: 54px; }
.fixed-aside-col .menu-wrapper{ position: absolute; left:0; top:0; width:100%; bottom:42px; }
.fixed-aside-col .menu-wrapper.collapsed{ overflow: visible; }
.fixed-aside-col-toggler{ background-color: #F5F7FA; z-index: 100; position: absolute; left:6px; right: 6px; text-align: center; bottom:0; line-height: 52px; height: 52px; overflow: hidden; cursor: pointer; border-top: 1px solid #E3E6Eb; }
.fixed-aside-col-toggler .text{ margin-left: 12px; }
.fixed-aside-col-toggler.collapsed .text{ display: none; }
.fixed-aside-col-toggler.collapsed .el-icon-d-arrow-left{ -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.fixed-aside-col-toggler .el-icon-d-arrow-left{ -webkit-transition: all 0.2s; transition: all 0.2s; }

.fixed-top-header{ z-index: 1000; position: fixed; left:0; top: 0; right: 0; background-color: #324057; }
.ly-table-pager{ z-index: 1000; position: fixed; right:0; bottom:0; left:170px; padding:10px 20px; text-align: right; background-color: #fff; border-top:1px solid #E0E6ED; -webkit-transition: all 0.2s; transition: all 0.2s;  }
.ly-table-pager.for-diy{ text-align: center; }


.edui-default .edui-toolbar{ line-height: normal; }

.ly-row-small-btn{ font-size: 12px; color:#409EFF; margin-left: 10px; cursor: pointer; }
.ly-buton-text-danger{ color:#FF4C4C; }
.ly-table-top-action .el-select,
.ly-table-top-action .input-keywords{ float: left; }
.ly-table-top-action .input-keywords{ margin:0 10px; }
.ly-table-top-desc{ max-width: 800px; padding: 10px 0 0 0; font-size: 14px; line-height: 20px; color:#666; }
.ly-table-top-desc a{ color:#409EFF; }
.ly-table-wrap{ margin-top: 20px; }
.ly-table-wrap thead tr,
.ly-table-wrap thead th{ background-color: #E5E9F2; }
.el-table__body-wrapper { overflow-x: scroll;}

.ly-tree-item-intable{ overflow: hidden; position: relative; line-height: 32px; }
.ly-tree-item-intable .field-name{ margin-left: 25px; }
.ly-tree-item-intable .actions{ position: absolute; right:0; top:0; width: 138px; }
.ly-tree-item-intable .field-sort{ position: absolute; left:50%; top:0; transform: translate(-50%, 0); }


.ly-form-title{ font-size: 16px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,.05); }
.ly-form-title.for-diy{ font-weight: bold; }
.ly-form-subtitle{ font-size: 14px; margin-bottom: 20px; }
.ly-form .el-input{ width: 360px; }
.ly-form .ly-input-number .el-input{ width: 180px; }
.ly-form .el-date-editor--datetime{ width:315px; }
.ly-form-tip{ color:#8492A6; margin-top: 4px; line-height: 20px; font-size: 12px; }
.ly-textarea{ width: 630px; height: 120px; }
.ly-textarea .el-textarea__inner{ resize: none; height: 100%; }
.ly-form-item-with-divider{ padding-top: 20px; border-top: 1px dashed rgba(0,0,0,.1); }
.ly-form-group-note{ margin-bottom: 20px;  }
.ly-form-group-note .ly-form-subtitle{ margin: 0;  }
.ly-vertical-select-single{ padding:10px 24px; border:1px solid #D3DCE6; min-height: 80px; max-height: 208px; box-sizing: border-box; margin-top: 16px; }
.ly-vertical-select-single.for-diy-indialog{ max-height: 288px;  }
.ly-vertical-select-single .item{ padding:6px 0; }
.ly-empty-tip{ padding: 20px; text-align: center; color:#999; }

.ly-user-with-head{ position: relative; min-height: 20px; padding-left: 30px; font-size: 13px;  }
.ly-user-with-head .faceimg{ position: absolute; left:0; top:0; width: 20px; height: 20px; }


.ly-chart{ border:1px solid #ddd; font-size: 14px; margin-bottom: 20px;box-shadow: 0 1px 2px rgba(0,0,0,.12)}
.ly-chart-hd{font-size: 16px; line-height: 48px; position: relative; background-color: #E5E9F2; padding: 0 20px; box-shadow: 0 1px 0 0 rgba(237,237,237,1);}
.ly-chart-hd-no-bg{background: none;}
.ly-chart-hd .icon-issue{ float: left; width: 18px; height: 18px; background-color: #C8C8C8; border-radius: 9px; color:#fff; line-height: 18px; text-align: center; font-size: 12px; margin: 14px 0 0 10px; cursor: pointer; }
.ly-chart-hd  .export-exel{ color:#0D7DFF; }
.ly-chart-hd  .sub-hd{ color: #999999;font-size: 14px; }
.ly-chart-bd{ padding: 10px;}
.ly-chart-fields-less{ margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.1); }
.ly-chart-fields{ display: flex; }
.ly-chart-fields .align-center{ text-align: center;}
.ly-chart-fields .align-center .item{ padding-left:0; margin-left: 0; }
.ly-chart-fields.has-padding{ margin-right: 15%; }
.ly-chart-fields .ly-btn-text{ margin-left: 16px; font-size: 14px;}
.ly-chart-fields .item{ padding: 10px 0 10px 0; flex:1; border-left:1px solid rgba(0,0,0,.12); position: relative;text-align: center;}

.ly-chart-fields .no-border-rt{border-left:none;}
.ly-chart-fields .item:first-child{ border:0 none; }
.ly-chart-fields .item-longer{ flex:2; }
.ly-chart-fields .note{ color:#999; margin-left: 12px; }
.ly-chart-fields .tips{ color:#999; font-size: 14px;margin-left: 5px; }
.ly-chart-fields .num{ color:#3A403B; font-size: 32px; line-height: 46px; margin: 10px auto;}
.ly-chart-fields .txt-blue{color: #2589FF;}

.edui-default .edui-toolbar{ line-height: normal; }

.hide-txt{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clamp-txt{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.img-spread{ display: block; width: 100%; }
.info{ color:#c7c7c7; }
.jump-link{ color:#5E6D82; }
.diy-hlg-txt{ color:#FF4768; }
.ly-img{ background-size: cover; background-position: center; background-color: #F1F1F1; position:relative; }

.diy-page{ padding: 20px; }
.diy-top-desc{ line-height: 24px; color:#8492A6; }
.diy-top-desc .label{ font-size: 16px; color:#1F2D3D; margin-right: 14px; }
.diy-preview-container{ margin-top: 20px; }
.diy-demo-page{ float: left; width: 320px; background-color: #F8F8F8; border:1px solid #D3D3D3; }
.diy-demo-page .navi{ position: relative; box-sizing: border-box; height: 55px; text-align: center; font-size: 16px; font-weight: bold; background: url(src/static/test/top_navi.png) no-repeat left top; padding-top: 28px; }
.diy-demo-page .comps-selected{ min-height: 190px; }
.diy-comps-type{ margin-top: 30px; border-top: 1px solid #D3D3D3; padding: 0 0 20px 14px; background-color: #fff; font-size: 14px; }
.diy-comps-type-group{ padding-top: 20px; }
.diy-comps-type-list{ margin-top: 14px; }
.diy-comps-type-list .item{ float: left; width: 94px; line-height: 30px; text-align: center;background-color: #F8F8F8; margin:0 5px 10px 0; cursor: pointer; outline:1px dashed #E9E9E9; }
.diy-comps-type-list .item:hover{ outline:1px dashed #20A0FF; }

.icon-action{ display: none; position: absolute; z-index: 10; cursor: pointer; color:#20A0FF; }
.diycomp-preview-item{ background-color: #fff; position: relative; margin-top: 1px; }
.diycomp-preview-item.active{ outline: 1px dashed #20A0FF; }
.diycomp-preview-item:hover .icon-action{ display: inline-block; }
.diycomp-preview-item .el-icon-circle-close{ right: 0; top: -7px; font-size: 14px; }
.diycomp-preview-item .el-icon-circle-plus.top,
.diycomp-preview-item .el-icon-circle-plus.bottom{ left:50%; transform: translateX(-50%); font-size: 14px; color:#20A0FF; cursor: pointer; }
.diycomp-preview-item .el-icon-circle-plus.top{ top:-7px; }
.diycomp-preview-item .el-icon-circle-plus.bottom{ bottom:-7px; }

.diy-comp-form{ float: left; width:458px; padding:20px 10px; margin:0 0 0 30px; background: #FFFFFF; border: 1px solid #D3DCE6; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); border-radius: 6px; }
.diy-comp-form-hd{ font-size: 16px; padding-bottom: 20px; border-bottom: 1px solid #F8F8F8; }
.diy-comp-form .ly-form{ margin-top: 20px; }
.diy-comp-form .ly-form .el-input{ width: 238px; }
.diy-comp-form .ly-form .el-pagination .el-input{ width: 50px; }
.diy-comp-form .ly-form .el-input-number .el-input{ width: 100%; }

.diy-comp-added-topbtm{ float: left; width:300px; padding:20px; margin:0 0 0 30px; background: #FFFFFF; border: 1px solid #D3DCE6; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 0 6px 0 rgba(0,0,0,0.04); border-radius: 6px;}
.diy-comp-added-topbtm .diy-comps-type{ border: none; padding: 0; margin:0; }

.diy-form-items-group{ padding:20px 10px; margin:0 10px 20px 10px; outline: 1px dashed #B8E1FF; position: relative; }
.diy-form-items-group.with-btn{ cursor: pointer; padding: 0 10px; }
.diy-form-items-group .el-form-item:last-child{ margin-bottom: 0; }
.diy-form-items-group.can-deleted .icon-action{ position: absolute; right:0; top:0; display: none; }
.diy-form-items-group.can-deleted:hover .icon-action{ display: inline-block; }

.diy-btn-add{ width: 44px; height: 44px; border:1px solid #C0CCDA; border-radius: 4px; background-color: #F9FAFC; text-align: center; cursor: pointer; }
.diy-btn-add .el-icon-plus{ vertical-align: sub; }

.diy-list-item{ padding: 10px 20px; background-color: #fff; }
.diy-list-item .cover{ width:100%; border-radius: 6px; margin-bottom: 10px; }
.diy-list-item .vip-price{ float: left; margin-top: 8px; line-height: 20px; border:1px solid #FF4768; border-radius: 4px; overflow: hidden;  }
.diy-list-item .vip-price-label{ float: left; color:#fff; background-color: #FF4768; padding:0 4px; }
.diy-list-item .vip-price-num{ float: left; color:#FF4768; padding:0 4px; }
.diy-list-item .title{ font-size: 16px; line-height: 22px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.diy-list-item .price-ori{ color:#FF4768; font-size: 16px; font-weight: 600; float: left; margin: 8px 3px 0 0; line-height: 22px; }
.diy-list-item .info .has-line{ padding-right: 12px; position: relative; }
.diy-list-item .info .has-line:after{ content: '\20'; position: absolute; width: 1px; height: 12px; right: 6px; top: 2px; background-color: #c7c7c7; }
.price-current{ color:#FF4768; }
.diy-list-item .price-current{ float: left; font-size: 16px; margin-top: 8px; }
.price-old{ text-decoration: line-through; }
.diy-list-item .price-old{  float: left; color:#C7C7C7; margin: 10px 0 0 4px; }
.diy-list-bigpic .cover{ height: 164px; }
.diy-list-bigpic .info{ line-height: 18px; margin-top: 8px; }
.diy-list-bigpic .btn-buy-now{ float: right; margin-top: 8px; padding: 0 8px; height:24px; line-height:26px;background-color:#FFE200;border-radius:2px; color:#222; text-align: center; }
.diy-list-pintuan .info-pintuan{ overflow: hidden; margin-top: 8px; line-height: 20px; }
.diy-list-pintuan .info-pintuan .label-pintuan{ float: left; margin-right: 12px; }
.diy-list-pintuan .label-pintuan{ line-height: 20px; color:#fff; padding:0 8px 0 8px; background-color: #FF4768; position: relative; }
.diy-list-pintuan .label-pintuan:after{ content: ' '; position: absolute; right:-5px; top:0; height: 0; width:0; border-width: 10px 5px; border-style: solid; border-color:#FF4768 rgba(0,0,0,0) #FF4768 #FF4768;  }
.diy-list-pintuan .diy-list-two-spic .label-pintuan{ position: absolute;left:0; top:6px; }
.diy-list-pintuan .info-pintuan-left{ color:#c7c7c7; }
.diy-list-two-spic{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.diy-list-two-spic .spic-item{ width:135px; margin-bottom: 12px; }
.diy-list-two-spic .cover{ height: 100px; }
.diy-list-two-spic .vip-price{ font-size: 10px; line-height: 18px; }
.diy-list-two-spic .title{ height: 44px; }

.diy-shop-labels{ overflow: hidden; margin-top: 8px; }
.diy-shop-labels .label-item{ float:left; color:#707D8C; margin:0 6px 6px 0; line-height: 24px; border-radius: 2px; background-color: #EEF6FF; padding: 0 5px; }

.diy-img-with-text{ position: relative; min-height: 54px; padding-left: 64px; }
.diy-img-with-text .img{ position: absolute; left:0; top:0; width:54px; height: 54px; }
.diy-img-with-text .title{ font-size: 14px; line-height: 20px; color:#666; }

.diy-thumbs .ly-img{ float: left; width: 44px; height: 44px; border-radius: 4px; margin: 0 6px 6px; position: relative; }
.diy-thumbs .ly-img .icon-action{ right:-4px; top:-4px; }
.diy-thumbs .ly-img:hover .icon-action{ display: inline-block; }
.diy-thumbs .diy-btn-add{ float: left; }

.align-hvcenter{ top: 50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.diy-unchange-comp{ position: relative; cursor: pointer; margin-top: 1px; }
.diy-unchange-comp .hover-tip{ display: none; position: absolute; left:0; top:0; width:100%; height: 100%; background-color: rgba(0,0,0,.1); }
.diy-unchange-comp:hover .hover-tip{ display: block; }
.diy-unchange-comp .hover-tip-txt{ position: absolute; background-color: #fff; border:1px solid #20A0FF; color:#20A0FF; padding:0 10px; border-radius: 4px; line-height: 36px; width:240px; }

.ly-radio-group{ overflow: hidden; padding-top: 12px; }
.ly-radio-group .el-radio{ float: left; margin: 0 12px 10px 0; }

.diy-column-bar{ line-height: 44px; font-size: 14px;  }
.diy-column-bar .item{ float: left; width:84px; height: 44px; text-align: center; margin:0 6px; position: relative; cursor: pointer; }
.diy-column-bar .item:after{ display: none; content: ' '; position: absolute; bottom:3px; left:50%; width: 20px; height: 4px; border-radius: 2px; background-color: #FF4768; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0); }
.diy-column-bar .item.active{ font-size: 18px; font-weight: bold; }
.diy-column-bar .item.active:after{ display: inline; }

.diy-info-has-line{ padding-right: 12px; position: relative; }
.diy-info-has-line:after{ content: '\20'; position: absolute; width: 1px; height: 12px; right: 6px; top: 2px; background-color: #c7c7c7; }
.diy-cat-tree{ height: 274px; position: relative; padding: 0 10px 0 90px; }
.diy-cat-tree .col-fields{ position: absolute; left:0; top:0; width: 80px; height: 100%; background-color: #F0F0F0; }
.diy-cat-tree .diy-img-with-text{ min-height: 50px; padding:0 0 10px 62px; margin-top: 12px; border-bottom: 1px solid rgba(0,0,0,.1); }
.diy-cat-tree .diy-img-with-text:last-child{ border: 0 none; }
.diy-cat-tree .diy-img-with-text .title{ font-weight: bold; }
.diy-cat-tree .diy-img-with-text .img{ width: 50px; height: 50px; border-radius: 8px; }
.diy-cat-tree .info-nums{ line-height: 20px; }
.diy-cat-tree .col-items{ max-height: 100%; }
.diy-cat-tree .col-field-item{ display: block; cursor: pointer; text-align: center; font-size: 14px; padding: 0 10px; line-height: 40px; min-height:40px; border-bottom: 1px solid #E3E3E3; }
.diy-cat-tree .col-field-item.active{ background-color: #FBFBFB; }

.diy-head-colors{ padding-left: 16px; }
.diy-head-colors .field{ float: left; margin-right: 12px; font-size: 14px; color: #606266; }
.diy-head-colors .el-radio-group,
.diy-head-colors .el-color-picker{ float: left; margin-right: 60px; }

.diy-iconavi{ padding:12px 24px 0 24px; overflow: hidden; text-align: center; }
.diy-iconavi.for-five{ padding-left: 0; padding-right: 0; }
.diy-iconavi .item{ float: left; margin:0 10px 10px 10px; width: 48px; }
.diy-iconavi.for-five .item{ width: 20%; margin-left: 0; margin-right: 0; box-sizing: border-box; padding: 0 7px; }
.diy-iconavi .ly-img{ width: 30px; height: 30px; margin: 0 auto 3px auto; background-color: #D8D8D8; }
.diy-iconavi .ly-img.loaded{ background-color: rgba(0, 0, 0, 0); }
.diy-iconavi .hide-txt{ color:#5E6D82; line-height: 16px; font-size: 12px;}

.diycomp-title-with-desc{ padding:20px 70px 20px 14px; position: relative; }
.diycomp-title-with-desc .page-title{ font-size: 20px; color: #222222; line-height: 28px; font-weight: bold; }
.diycomp-title-with-desc .page-title-txt{ position: relative; }
.diycomp-title-with-desc .page-msg{ line-height: 16px; color: #C7C7C7; margin-top: 3px; }
.diycomp-title-with-desc .show-all{font-size: 14px; line-height: 20px;color: #FF4768;position: absolute;top: 50%;right: 20px;transform: translateY(-50%); }
.diycomp-title-with-desc.style-center{ text-align: center; padding:20px 14px; }
.diycomp-title-with-desc.style-center .page-title{ margin-bottom: 8px;}
.diycomp-title-with-desc.style-center .page-title-txt:before,
.diycomp-title-with-desc.style-center .page-title-txt:after{ content:" "; position: absolute; top:10px; width:27px; height: 6px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAGCAYAAAAynOUQAAAAAXNSR0IArs4c6QAAAGpJREFUKBVjYKAhMDU1DQdhmBXMMAa1aZAl////Xwo0N1haWvrms2fPrjIaGxv/J9eis2fPMmLTC7MIaBnYM4yMjH+BOJoFlwZshlAqRpNgBAUZKOiAjgsE+ug/yFenT59eSalj8epHTyAA0ZcmSvDECb8AAAAASUVORK5CYII=") no-repeat left top; }
.diycomp-title-with-desc.style-center .page-title-txt:before{ left:-40px; }
.diycomp-title-with-desc.style-center .page-title-txt:after{ right:-40px; transform: rotate(180deg); }
.diycomp-title-with-desc.style-center .show-all{ display: none; }

.diy-swiper-container{ overflow: visible; }
.diy-slider{ position: relative; overflow: hidden; }
.diy-slider .header-txt{ padding: 10px 0 0 20px; margin-bottom: 14px; position: relative; }
.diy-slider .header-txt .title{ font-size: 20px; line-height: 28px; font-weight: bold; margin-bottom: 2px; }
.diy-slider .navi-txt{ position: absolute; right:20px; top:10px; font-size: 14px; }
.diy-slider .navi-txt-current{ color:#1c1c1c; font-size: 20px; display: inline-block; text-align: center; width:20px; }
.diy-slider .swiper-slide{ padding: 0 16px; box-sizing: border-box; }
.diy-slider .swiper-slide .img-spread{ height: 145px; border-radius: 4px; margin-bottom: 8px; }
.diy-slider .swiper-slide .diy-hlg-txt{ line-height: 16px; height: 16px; }
.diy-slider .swiper-slide .title{ font-size: 14px; line-height: 22px; height: 22px; margin-top: 5px; padding-bottom: 14px; }
.diy-slider .swiper-pagination{ text-align: right; }
.diy-slider .swiper-pagination-fraction{ left:auto; right:20px; bottom:auto; top: -42px; color:#999; }
.diy-slider .swiper-pagination-current{ font-size: 20px; color:#333; }

.diy-spacer{ font-size: 0; width: 100%; }

.diy-imglink{ overflow: hidden; }
.diy-imglink .one-img{ width: 100%; display: block; min-height: 92px; background-color: #DBF0FF; border-radius: 4px; }
.diy-imglink .one-img.no-radius{ border-radius: 0; }
.diy-imglink .ly-img{ height: 92px; background-color: #DBF0FF; border-radius: 4px; }
.diy-imglink .img-wrap{ padding: 0 20px; }
.diy-imglink .img-wrap.no-padding{ padding: 0; }
.diy-imglink .img-wrap .ly-img{ float:left; width:100%;}
.diy-imglink .img-wrap.has-tow{ padding-right: 0; }
.diy-imglink .img-wrap.has-tow .ly-img{ width: 130px; margin-right: 20px; }
.diy-imglink .img-wrap.has-horizontal-scrollerbar .ly-img{ width: 110px; margin-right: 20px; }
.diy-imglink .swiper-container .ly-img{ margin: 0 16px; }
.diy-imglink-fixed{ padding-right: 16px; overflow: hidden; }
.diy-imglink-fixed .ly-img{ width: 40px; height: 40px; float: right; border-radius: 20px; }

.diy-imgad-style .item{ float: left; width: 100px; margin-right: 20px; text-align: center; color:#999; cursor: pointer; }
.diy-imgad-style .item-box{ background-color: #fff; padding:0 6px; border-style:solid; border-color: #E9E9E9; border-width: 13px 9px; }
.diy-imgad-style .item-box.no-padding{ padding:0; }
.diy-imgad-style .item-box.active{ outline: 1px solid #409EFF; }
.diy-imgad-style .item-box-inner{ height: 36px; background-color: #DBF0FF; }
.mag-header .header-split{
    float: left;
    line-height: 60px;
    padding-right: 20px;
    font-size: 16px;
    border-right: 1px solid #e6e6e6;
}
.mag-header .el-menu--horizontal{
    border-bottom: none;
    background: none;
}
.el-menu-item.is-active {
    color: #2f3033
}
.mag-aside .el-menu-item {
    color: #8d9199;
    border-left: 3px solid transparent;
    min-width: 100px;
}