

:root {
    --mdiy-common-width: 1380px; /*全局宽度*/
    --mdiy-article-width: 1280px; /*文章页宽度*/
    --mdiy-sidebar-width: 360px; /*侧边宽度*/
    --mdiy-sidebar-panel-width: 280px; /*面板侧边宽度*/
    --mdiy-background-body: #f7fafc; /*全局body背景*/
    --mdiy-background-card: #ffffff; /*模块卡片背景*/
    --mdiy-border-color: #eff2f7; /*边框色*/
    --mdiy-border-radius: 0.25rem; /*圆角*/
    --mdiy-box-shadow-color: rgb(0 0 0 / 8%); /*边框阴影色*/
    --mdiy-table-bg: transparent;
    --mdiy-table-accent-bg: transparent;
    --mdiy-table-striped-color: #354052;
    --mdiy-table-striped-bg: rgba(53, 64, 82, 0.024);
    --mdiy-table-active-color: #354052;
    --mdiy-table-active-bg: rgba(0, 0, 0, 0.1);
    --mdiy-table-hover-color: #354052;
    --mdiy-table-hover-bg: rgba(0, 0, 0, 0.075);
    --mdiy-dialog-theme: #2071ff;
}



::selection{background:#6190e8;color:#fff}
::-moz-selection{background:#6190e8;color:#fff}
body,html{position:relative;overflow-x:hidden;overflow-y:scroll}
body::-webkit-scrollbar,html::-webkit-scrollbar{display:none}
body{background-color:#f7f8fa;color:#323233;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;font-size:12px;overflow-y:scroll;-webkit-font-smoothing:antialiased}
article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
ol,ul{list-style:none}
input::-ms-clear,input::-ms-reveal{display:none}
a{color:#18191a;background:0 0;text-decoration:none;outline:0;cursor:pointer;-webkit-transition:color .3s ease;transition:color .3s ease}
a:hover{color:#79a1eb}
a:active{color:#4f7de2}
a:active,a:hover{outline:0;text-decoration:none}
a[disabled]{color:#bfbfbf;cursor:not-allowed;pointer-events:none}
cite,em{font-style:normal}
code,kbd,pre,samp{font-family:Consolas,Menlo,Courier,monospace}
table{border-collapse:collapse;caption-side:bottom;}
th{text-align:inherit;text-align:-webkit-match-parent;}
tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0;}



@font-face { font-family: "dzicon"; src: url('{IMGDIR}/dzicon.eot'); src: url('{IMGDIR}/dzicon.eot?#iefix') format('eot'), url('{IMGDIR}/dzicon.woff2') format('woff2'), url('{IMGDIR}/dzicon.woff') format('woff'); font-weight: normal; font-style: normal; }
	[class^="fico-"]:before, [class*=" fico-"]:before { font-family: "dzicon"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; font-size: 120%; }
	/* font icon size */
	.fic4 { font-size: 14px; }.fic6 { font-size: 16px; }.fic8 { font-size: 18px; }
	/* flip x */
	.fifx::before { transform: scale(-1,1); }
	/* font rotate */
	@keyframes dzrotate{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
.dzicon{font-family: dzicon;}
.fa_bin:before {content: "\f10c";color: #AAA;}
.fa_backup:before {content: "\f135";color: #AAA;}
.fa_import:before {content: "\f125";color: #AAA;}
.fa_export:before {content: "\f124";color: #AAA;}
.fa_reset:before {content: "\f10b";color: #AAA;}
.fa_x:before {content: "\f129";color: #fff;}
.fa_save:before {content: "\f128";color: #fff;}
.fa_layer:before {content: "\f146";color: #fff;}
#open_diy_module, #diycancel, #savebtn{ margin-right: 2px; border-radius: 4px;background: #E6A234 !important;border-color: #DB7D29 !important;color: #FFF;font-size: 14px;font-weight: 700;text-shadow: 1px 1px 2px #666; }

.block,.frame,.tab {position:relative;min-height:20px;zoom:1}
.edit {position:absolute;top:0;right:0;z-index:199;padding:0 5px;background:red;color:#fff;line-height:26px;cursor:pointer}
.block .edit {background:#369}
.edit-menu {position:absolute;z-index:300;margin-top:-20px;margin-left:37px;border-color:#323233;border-style:solid;border-width:0 1px 1px 1px;background:#323233}
.mitem {padding:4px 12px;border-top:1px solid #3c3c3e;color:#fff;cursor:pointer}
.mitem:hover {background:#414142;color:#fff}
.subtitle {margin:0 4px}
.frame-tab .title .move-span {float:left;margin:0 3px 0 0;padding:0;width:100px;border-bottom:none;cursor:pointer}
#samplepanel {background:#fff}
.block-name {display:block;padding:2px;font-size: 14px;font-weight: 500;}
#ajaxwaitid {position:absolute;top:0;right:0;z-index:1;display:none;padding:0 5px;background:#d00;color:#fff}
#outerbox {margin:auto;width:970px}
.float_left {margin:0 0 0 34px}
.float_center {margin:auto}
.float_item {position:absolute;z-index:25}
#nav {min-height:30px;border:1px solid #09f;line-height:28px}
#nav ul li {float:left;margin:1px 2px}
.op {position:absolute;right:10px;bottom:10px}
.op a {display:inline;margin-left:2px;line-height:22px}
.area-none {margin-bottom:5px;padding:3px;background:#ddf0df}
body#space .area {padding:10px 0;border:none;background:0 0}
body .area{margin-bottom: 20px;}
.frame,.frame-tab {padding:5px;    border: 1px solid #ebedf0;border-radius: 4px;background:#fff}
#space .frame {background-color:transparent}
.frame-tab {border-color:#ff8500}
.frame-tab .title .titletext {float:left;margin:0 2px}
body#space .frame,body#space .frame-tab {padding:0}
.frame-tab .title ul li {cursor:pointer}
.frame-tab .tabcontent {float:left;margin:3px;width:98%;border:1px solid #09f}
.tabactivity {background:#fff}
.title .tmpbox {float:left}
.frame-1-1,.frame-1-1-1 {background-position:50% 0}
/* .frame-title {display:none} */
.block {margin:2px 0;padding:2px;border:1px dotted #b6c7ec;background:#fff}
#space .block {background-color:transparent}
.block .blocktitle {height:26px;line-height:26px}
.block .blockname {float:left;margin-left:5px;font-weight:700}
.block .blockedit {float:right;margin-right:5px;text-decoration:underline;cursor:pointer}
.block .dxb_bc {overflow:hidden;}
body#space .block {margin:0 2px 5px;border:1px dashed #09f}
.tab-title {background:#fffad2!important}
.frame-tab .title .move-span .blocktitle {background:#fffad2}
.moving {position:absolute;background:#4ef}
.tmpbox {margin:4px 0;width:100%!important;border:1px dashed #aaa;background:#fff}
.temp {height:0;border:0}
.hide {display:none}
.left {float:left}
.right {float:right}
.pointer {cursor:pointer}
.current {background:#fff}
.rb {border:1px solid red}
#contentblockclass li label,#contentframe li a {cursor:move}
.b_c,.b_l,.b_r,.m_l,.m_r,.t_c,.t_l,.t_r {display:none}
.fwinmask {top:56px!important;right:0!important;left:initial!important;overflow-x:hidden;overflow-y:auto;height:calc(100% - 56px)!important;border-left:1px solid #ebedf0;background:#fff;box-shadow: 0 0px 14px 0 rgb(0 0 0 / 10%);}
#fwin_showimport {height: auto !important;}
#fwin_showimport .m_c .o { position: inherit; }
#fwin_showimport .m_c .c{margin-top: 80px;}
.m_c .c {margin-top:50px;padding:5px 15px 10px;width:590px!important;height:100%!important;max-height:100%!important;line-height: 20px!important;    padding-bottom: 60px;}
#fwin_showblock .m_c .c{margin-top:5px;}
.vt label {margin-right:6px;color:#797c80;font-size:13px;cursor:pointer}
.vm {vertical-align:middle}
img.vm {vertical-align:text-bottom}
.borderul .bordera,.borderul label {display:none}
.flb {position:fixed;right:0;z-index:1;display:flex;margin-bottom:10px;padding:15px 15px 15px;width:590px;border-bottom:1px solid #ebebeb;background:#fff;cursor:inherit!important;justify-content:space-between}
.flb em {float:left;color:#494b4d;font-weight:700;font-size:14px}
.m_c .tb {display:flex;padding:10px 5px;margin-top: 50px;border-bottom:1px solid #f0f1f2;background:#fff;position: sticky;top: 50px;}
.m_c .tb li {padding:5px 12px;font-size:14px}
.m_c .tb li.a a {position:relative;z-index:1;border-bottom:2px solid #1c8ce9}
.m_c .tb li a {padding-bottom:16px}
.m_c .o {position:fixed;right:0;bottom:0;display:flex;padding:12px 15px;width:590px;border-top:1px solid #ebebeb;background:#fff;text-align:right}
.m_c .o button {margin-right:15px}
.m_c #import_type { display: flex;position: relative;margin-top: 0px;width: 100%;border-top: 1px solid #f0f1f2;}
.pipe {margin:0 5px;color:#ebebeb}
.pn {display:inline-block;padding:0 15px;height:30px;border:none;border-radius:4px;background-color:#fff;box-shadow: 0 0 0 1px #ebedf0;color:#18191a;font-weight:inherit;line-height:30px;cursor:pointer;transition-duration:.4s}
.pnc {background-color:#1985ff;color:#fff;box-shadow:none}
.pnc:hover {background-color:#66adfe}
.pr li label {display:flex;align-items:center}
.tip {position:absolute;margin:-.8rem 5px -.8rem -.8rem;padding:10px 12px;width:auto;border-radius:4px;background-color:rgba(70,76,91,.9);box-shadow:0 1px 6px rgb(0 0 0 / 20%);color:#fff;text-align:left;text-decoration:none}
.tip_horn {position:absolute;bottom:-5px;left:15px;width:0;height:0;border-style:solid;border-width:5px 5px 0;border-top-color:rgba(70,76,91,.9)}
.ptn {padding-top:8px!important}
.mbn {margin-bottom:8px!important}
.mtn {margin-top:8px!important}
.ptm {padding-top:10px!important}
.tb .y {margin-right:8px;margin-left:auto}
.borderula li label {margin-right:5px}
.ss em {float:left;display:block;margin-right:4px;width:30px;border-radius:4px;background:#eee;text-align:center;line-height:30px;cursor:pointer}
.ss em.a {background:#09f;color:#fff}
textarea {resize:none}
.flb span a,.flb strong {float:left;margin-left:8px;color:#18191a;text-decoration:none;font-weight:400;font-size:12px}
table {width:100%;border-collapse:collapse;empty-cells:show}
caption,th {text-align:left;font-weight:400}
.dt {width:100%}
#block_data .dt th:nth-child(1) {width:40px}
.dt td,.dt th {border-bottom:1px solid #ebebeb}
.dt th {padding:10px 6px;background:#fff;font-weight:500;font-size:13px}
.dt td {padding:10px 6px}
hr.l {height:1px;border:none;background:#ebebeb;color:#ebebeb}
.ps,.pt,.px,select {border:1px solid #dadfe6;border-radius:4px;background:#fff}
.pt,.px {margin:0 5px 0 0;padding:0 5px}
.px {height:28px}
.ps,select {margin-right:4px;padding:2px 2px 2px 1px;height:30px}
select[multiple=multiple] {height:auto}
.pc,.pr {margin:0 6px 0 0;padding:0}
label {color:#797c80;font-size:13px;cursor:pointer}
.diywin td {padding:5px 2px}
.fwinmask::-webkit-scrollbar {display:none}
.preview-page::-webkit-scrollbar {display:none}
.control-nav {display:flex;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #f2f4f6;font-size:14px}
.control-nav li {position:relative;width:30%;text-align:center}
.control-nav li.current:after {position:relative;bottom:-11px;display:block;margin:0 auto;width:15px;height:2px;border-radius:20px;background-color:#165bd3;content:''}
.control-nav li.current {font-weight:700}
.flb span {display:flex;align-items:center}
.flb span a.flbc {display:flex;width:20px;height:20px;background:url({STATICURL}image/m_diy/icon-cancel.svg) no-repeat center;background-size:20px;font-size:0;line-height:1}
.tfm .pt,.tfm .px {margin-right:4px;width:330px}
.p_fre {width:auto!important}
.fdiy .tfm .pt,.fdiy .tfm .px {width:auto}
.p_pop {margin-top:4px;margin-left:0;min-width:60px;border:1px solid #f5f6f7;border-radius:4px;background:#fff;box-shadow:0 4px 4px -4px rgb(98 124 153 / 10%)}
.p_pop li {display:block;text-align:center}
.p_pop li a {display:block;padding:6px 10px;border-bottom:1px solid #ebebeb;white-space:nowrap}
.content-frame li,.content-start li {float:left;width:50%;text-align:center}
.content-frame li a,.content-start li a,.content.pagestyle li a,.content.modulestyle li a {display:flex;padding:10px 10px 0;flex-direction:column}
.content.pagestyle li a,.content.modulestyle li a { width:100px; height: 100px; float: left; text-align: center; }
.content-frame li img,.content-start li img {margin-bottom:5px}
.content-block-class .tbmu {display:flex;padding:12px 0;flex-wrap:wrap}
.content-block-class .tbmu a {margin:2%;padding:5px;border-radius:5px;box-shadow:0 0 0 1px #ebedf0;text-align:center}
.content-block-class .tbmu a.a {background: #165cd3;font-weight: 700;color: #fff;box-shadow: 0 0 0 1px #165cd3;}
.content-block-class .tbmu .pipe {display:none}
.blocks {margin-bottom:10px}
.blocks ol {display:flex;width:100%;flex-direction:row;flex-wrap:wrap;background-image: none !important; }
.blocks ol li {display:flex;margin:1%;width:48%;text-align:center}
.blocks ol li label {padding:8px 10px;width:100%;border:1px dotted #b6c7ec;border-radius:4px;background:0 0}
.blocks.content {margin-bottom:5px;padding-bottom:8px;border-bottom:1px dashed #ebebeb}
.tfm caption,.tfm td,.tfm th {padding:5px 0;vertical-align:top}
.tfm th {padding:5px 2px;width:135px;text-align:left;font-weight:400}
.area {margin:0;min-height:10px;background:#ddf0df}
#controlpanel {}
#controlcontent {flex:1}
#contentstart {height:100%}
#tbody_setting textarea {width:98%;padding:.2rem .3rem;min-height:300px}

#panel .block .dxb_bc {overflow:hidden;max-height: 80px;display: none;}

.m-diy-container,.m-diy-container *,.m-diy-header,.m-diy-header *{box-sizing:border-box}
.m-diy-container .content { height: 100% !important;}

.m-diy-header{position:fixed;top:0;right:0;z-index:200;display:flex;width:100%;height:56px;border-bottom:1px solid #ebedf0;background-color:#fff;justify-content:space-between}
.design-header-back{vertical-align:middle;font-size:16px;font-weight:500;line-height:55px;margin-right:auto;margin-left:14px}
.design-header-back small{font-size:12px;font-weight:400;margin-left:10px;color:#969799}
.design-header-back a{color:#4f4f4f}
.design-header-more{display:flex;align-items:center;margin-right:1rem}
.design-header-more span{display:flex}
.design-header-more a{display:flex;justify-content:center;align-items:center;margin-left:.5rem;color:#18191a;padding:6px 10px;box-shadow:0 0 0 1px #ebedf0;border-radius:4px}
.design-header-more a:hover{background-color:#f7f8fa}
.design-header-more a i{font-size: 16px;margin-right: .2rem;height: 16px;line-height: 16px;font-style: normal;}

.m-diy-container{display:flex;justify-content:space-between;width:100%;height:calc(100% - 56px);margin-top: 56px;}
.m-diy-menu-sidebar{display:flex;justify-content:space-between;flex-direction:column;overflow:hidden;min-width:80px;max-width:80px;height:100%;border-right:1px solid #ebedf0;background:#fff}
.m-diy-sidebar{display:flex;justify-content:space-between;overflow:hidden;min-width:260px;max-width:260px;border-right:1px solid #ebedf0;background-color:#fff;transition:all .2s;flex-direction:column;position: absolute;min-height: calc(100vh - 56px);}
.m-diy-preview{display:flex;flex:1;flex-direction:column;min-height: calc(100vh - 56px);margin-right: 620px;}
.m-diy-action{display:flex;justify-content:space-between;flex-direction:column;min-width:360px;max-width:360px;background:#fff;border-right:1px solid #ebedf0;position: fixed;height: calc(100% - 56px);}
.m-diy-pagebar{display:flex;justify-content:space-between;overflow:hidden;min-width:260px;max-width:260px;border-right:1px solid #ebedf0;background-color:#fff;transition:all .2s;flex-direction:column}

.design-sidebar-title{display:flex;align-items:center;padding:15px;width:100%;color:#969799;font-size:12px;font-weight:500;border-bottom:1px solid #ebebeb}
.design-sidebar-nav{overflow-x:hidden;overflow-y:auto;padding:.6rem;flex:1;}
.design-sidebar-nav .sidebar-nav-item{position:relative;box-sizing:border-box;margin-bottom:.6rem;min-height:32px;background:#fff;color:#323233;font-size:12px;cursor:pointer;}
.design-sidebar-nav .sidebar-nav-item .item-link{position:relative;display:block;padding:.5rem .8rem;border:1px solid #ebedf0;border-radius:4px;color:#323233;text-align:left;font-weight:500;}
.design-sidebar-nav .sidebar-nav-item.item-active .item-link,.design-sidebar-nav .sidebar-nav-item:hover .item-link{background-color:rgba(241,245,250,.5);color:#2071ff;}
.design-sidebar-nav .sidebar-nav-item .item-link p{margin-top:.3rem;color:#969799;font-weight:400;font-size:12px;}
.design-sidebar-bottom{display:flex;align-items:center;width:100%;height:52px;padding:10px;border-top:1px solid #ebedf0}

.design-action-header{display:flex;flex-direction:column;position:relative;padding:1.2rem 1rem;border-bottom:1px solid #f2f4f6}
.design-action-header .action-header_title{text-align:left;font-weight:500;font-size:14px}
.design-action-header .action-header_link{position:absolute;right:1rem;color:#2071ff;font-size:12px}
.design-action-header .action-header_description{margin-top:12px;color:#969799;font-size:12px;line-height:20px}
.design-action-scroll{flex:1;padding:.8rem;overflow-x:hidden;overflow-y:scroll}
.design-action-footer{display:flex;margin-top:auto;padding:1.2rem 1rem;width:100%;height:52px;background-color:#fff;border-top:1px solid #ebedf0;justify-content:space-between;align-items:center}

.m-diy-mobile{display:flex;flex-direction:column;padding:1.2rem 0;height:100%}
.design-mobile-head{position:relative;display:flex;min-height:62px;background-position:50%;background-size:contain;background-repeat:no-repeat;box-shadow:0 0 14px 0 rgb(0 0 0 / 10%);border-radius:4px 4px 0 0;}
.design-mobile-head-h5{background-image:url({STATICURL}image/m_diy/bg_mobile_h5.png);}
.design-mobile-head-title{overflow:hidden;margin:0 auto;font-weight:500;padding-top:28px;width:180px;color:#111;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.design-mobile-head,.design-mobile-preview{width: 360px;margin: 0 auto;box-shadow: 0 0 14px 0 rgb(0 0 0 / 10%);}
.design-mobile-preview{background-color:#fff;border-radius:0 0 4px 4px;height:100%}

.m-diy-sidebar{right:360px;}
.m-diy-action{right:0px;}
.m-diy-pagebar{left:76px;}

.design-action-prompt{display:flex;justify-content:center;width:100%;}