input,li,p,select,textarea,ul {
    margin: 0;
    padding: 0
}

input,select,textarea {
    border: none
}

body,button,input,select,textarea {
    font-family: Arial,宋体,tahoma,arial,微软雅黑
}

a {
    text-decoration: none
}

ul {
    list-style: none
}

.wrap {
    width: 100%;
    height: 100%;
    position: relative
}

.blur {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=false)
}

.skin-black input[type=text] {
    box-shadow: 1px 1px 2px 1px #aaa inset
}

.skin-black select {
    box-shadow: 1px 1px 2px 1px #aaa inset
}

.skin-black .hd {
    background: #1e1e1e;
    border-bottom: 1px solid #121212
}

.skin-black .hd .login a:hover {
    color: #ccc
}

.skin-black .hd .logo {
    background-image: url(./images/diy/logo-black.gif?v=20170808)
}

.skin-black .hd .tool .contact a,.skin-black .hd .tool .key a,.skin-black .hd .tool .tutorial a {
    color: #7d7d7d
}

.skin-black .hd .tool .contact:hover a,.skin-black .hd .tool .key:hover a,.skin-black .hd .tool .tutorial:hover a {
    color: #e1e1e1;
    background-color: #353535
}

.skin-black .hd .tool .space a {
    color: red;
    font-weight: 700
}

.skin-black .hd .tool .space a:hover {
    background-color: #353535
}

.skin-black .hd .tool .key .icon {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .hd .tool .clear,.skin-black .hd .tool .export,.skin-black .hd .tool .ifile,.skin-black .hd .tool .import,.skin-black .hd .tool .preview,.skin-black .hd .tool .sfile,.skin-black .hd .tool .share {
    color: #DFDFDF
}

.skin-black .hd .tool .clear .icon,.skin-black .hd .tool .export .icon,.skin-black .hd .tool .ifile .icon,.skin-black .hd .tool .import .icon,.skin-black .hd .tool .preview .icon,.skin-black .hd .tool .sfile .icon,.skin-black .hd .tool .share .icon {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .hd .tool .clear:hover,.skin-black .hd .tool .export:hover,.skin-black .hd .tool .ifile:hover,.skin-black .hd .tool .import:hover,.skin-black .hd .tool .preview:hover,.skin-black .hd .tool .sfile:hover,.skin-black .hd .tool .share:hover {
    color: #fff;
    background-color: #0078B3
}

.skin-black .hd .tool .clear:hover a,.skin-black .hd .tool .export:hover a,.skin-black .hd .tool .ifile:hover a,.skin-black .hd .tool .import:hover a,.skin-black .hd .tool .preview:hover a,.skin-black .hd .tool .sfile:hover a,.skin-black .hd .tool .share:hover a {
    color: #fff
}

.skin-black .hd .tool .clear a,.skin-black .hd .tool .export a,.skin-black .hd .tool .ifile a,.skin-black .hd .tool .import a,.skin-black .hd .tool .preview a,.skin-black .hd .tool .sfile a,.skin-black .hd .tool .share a {
    color: #DFDFDF
}

.skin-black .bd .ks-rule-left {
    color: #bababa;
    background-image: url(./images/diy/yrule-black.gif?v=20170718)
}

.skin-black .bd .ks-rule-top {
    color: #bababa;
    background-image: url(./images/diy/xrule-black.gif?v=20170718)
}

.skin-black .bd .ks-line {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .bd #container .edits {
    background: #242424;
    border: 1px solid #242424
}

.skin-black .bd #container .edits span {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .ft {
    color: #999;
    background: #1e1e1e
}

.skin-black .ft #location {
    background: #0B0B0B
}

.skin-black .ft #location span {
    color: #ccc
}

.skin-black .ft #location span.icon {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .ft #skin select {
    color: #222
}

.skin-black .ft #repos {
    color: #999;
    border: 1px solid #3F3F3F
}

.skin-black .ft #repos:hover {
    color: #CDCDCD;
    border: 1px solid #505050
}

.skin-black .ft .about .qq {
    color: #999
}

.skin-black .ft .about .qq a {
    color: #ccc
}

.skin-black .ft .about .copyright {
    color: #666
}

.skin-black .ft .about .copyright a {
    color: #666
}

.skin-black .ft .about .copyright a:hover {
    color: #ccc
}

.skin-black .panelboxs {
    background: #4A4A4A;
    border: 1px solid #1C1C1C;
    box-shadow: 2px 2px 5px #999
}

.skin-black .panelboxs .p-hd {
    background-image: url(./images/diy/bar-black.gif?v=20170718)
}

.skin-black .panelboxs .p-hd .icon {
    background-image: url(./images/diy/bar-black.gif?v=20170718)
}

.skin-black .panelboxs .p-bd .ks-tabs-bar {
    background-image: url(./images/diy/bar-black.gif?v=20170718)
}

.skin-black .panelboxs .p-bd .ks-tabs-bar .ks-tabs-tab {
    color: #A3A3A3;
    border-right: 1px solid #262626
}

.skin-black .panelboxs .p-bd .ks-tabs-bar .ks-tab-selected {
    color: #DBDBD9;
    background-color: #4a4a4a
}

.skin-black .panelboxs .p-bd .ks-tabs-body {
    color: #e3e3e3
}

.skin-black .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd {
    border-bottom: 1px solid #1F1F1F
}

.skin-black .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd .name {
    color: #ccc
}

.skin-black .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd .uid {
    color: #999
}

.skin-black .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-bd {
    border-top: 1px solid #626262
}

.skin-black .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-bd .prompt {
    color: #999
}

.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-hd {
    color: #aaa;
    background: #313131
}

.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-hd i {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-classify {
    background: #3B3B3B
}

.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-items-nav a,.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-items-operate a {
    border: 1px solid #777
}

.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd #accordion-pages .current,.skin-black .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd #tab-pages .current {
    background: #333
}

.skin-black .panelboxs .p-bd .history-panel .history {
    border: 1px solid #313131;
    border-bottom: none;
    background: #404040;
    color: #ccc
}

.skin-black .panelboxs .p-bd .history-panel .history .ks-record {
    border-bottom: 1px solid #313131
}

.skin-black .panelboxs .p-bd .history-panel .history .ks-record:hover {
    background: #535353
}

.skin-black .panelboxs .p-bd .history-panel .history .selected {
    background: #4B5367
}

.skin-black .panelboxs .p-bd .history-panel .history .selected:hover {
    background: #4B5367
}

.skin-black .panelboxs .p-bd .history-panel .history .redo {
    color: #757575
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd {
    border: 1px solid #383838;
    border-bottom: none;
    background: #404040
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer {
    border-bottom: 1px solid #383838
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer:hover {
    background: #525252
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .left {
    border-right: 1px solid #383838;
    background-color: #3B3B3B
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .eye {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .copy,.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .del,.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .down,.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .lock,.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .locked,.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .up {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname {
    color: #ccc
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname i {
    color: #999
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .selected {
    background: #4A5266
}

.skin-black .panelboxs .p-bd .layer-panel .layer-bd .selected:hover {
    background: #4A5266
}

.skin-black #align .align-panel {
    border-right: 1px solid #1F1F1F
}

.skin-black #align .align-panel .ks-item .icon {
    background-image: url(./images/diy/icon-black.png?v=20170718);
    opacity: .8;
    filter: alpha(opacity=80)
}

.skin-black #align .align-panel .ks-item:hover .icon {
    background-color: #000
}

.skin-black #align .sort-panel {
    color: #CCC;
    border-left: 1px solid #626262
}

.skin-black #align .sort-panel .ks-align-sortX,.skin-black #align .sort-panel .ks-align-sortY {
    color: #AEAEAE;
    background: #343434;
    border: 1px solid #000
}

.skin-black #align .sort-panel .ks-align-sortX:hover,.skin-black #align .sort-panel .ks-align-sortY:hover {
    color: #fff;
    background: #3C3C3C
}

.skin-black #align .sort-panel.disabled .ks-item:hover {
    color: #AEAEAE;
    background: #343434
}

.skin-black #widgets .p-bd .line {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #widgets .p-bd .item:hover {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #widgets .p-bd .item .name {
    color: #ccc
}

.skin-black #widgets .p-bd .item .icon {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #toolmenu .tools .ks-item .icon {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #toolmenu .tools .ks-item:hover {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #toolmenu .tools .selected {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #toolmenu .line {
    background-image: url(./images/diy/icon-black.png?v=20170718)
}

.skin-black #toolmenu .separate {
    border-top: 1px solid #1F1F1F;
    border-bottom: 1px solid #626262
}

.skin-black #module-panel .edit-mark {
    color: #999
}

.skin-grey input[type=text] {
    box-shadow: 1px 1px 2px 1px #eee inset
}

.skin-grey select {
    box-shadow: 1px 1px 2px 1px #eee inset
}

.skin-grey .hd {
    background: #d6d6d6;
    border-bottom: 1px solid #aaa
}

.skin-grey .hd .login a:hover {
    /* color: #fff */
}

.skin-grey .hd .logo {
    background-image: url(./images/diy/logo-grey.gif?v=20170808)
}

.skin-grey .hd .tool .contact a,.skin-grey .hd .tool .key a,.skin-grey .hd .tool .tutorial a {
    color: #f3f3f3
}

.skin-grey .hd .tool .contact:hover a,.skin-grey .hd .tool .key:hover a,.skin-grey .hd .tool .tutorial:hover a {
    color: #686868;
    background-color: #eee
}

.skin-grey .hd .tool .space a {
    color: red;
    font-weight: 700
}

.skin-grey .hd .tool .space a:hover {
    background-color: #eee
}

.skin-grey .hd .tool .key .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .hd .tool .key ul {
    box-shadow: 1px 2px 2px #ddd
}

.skin-grey .hd .tool .clear,.skin-grey .hd .tool .export,.skin-grey .hd .tool .ifile,.skin-grey .hd .tool .import,.skin-grey .hd .tool .preview,.skin-grey .hd .tool .sfile,.skin-grey .hd .tool .share {
    color: #f3f3f3
}

.skin-grey .hd .tool .clear .icon,.skin-grey .hd .tool .export .icon,.skin-grey .hd .tool .ifile .icon,.skin-grey .hd .tool .import .icon,.skin-grey .hd .tool .preview .icon,.skin-grey .hd .tool .sfile .icon,.skin-grey .hd .tool .share .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .hd .tool .clear:hover,.skin-grey .hd .tool .export:hover,.skin-grey .hd .tool .ifile:hover,.skin-grey .hd .tool .import:hover,.skin-grey .hd .tool .preview:hover,.skin-grey .hd .tool .sfile:hover,.skin-grey .hd .tool .share:hover {
    color: #fff;
    background-color: #0078B3
}

.skin-grey .hd .tool .clear:hover a,.skin-grey .hd .tool .export:hover a,.skin-grey .hd .tool .ifile:hover a,.skin-grey .hd .tool .import:hover a,.skin-grey .hd .tool .preview:hover a,.skin-grey .hd .tool .sfile:hover a,.skin-grey .hd .tool .share:hover a {
    color: #fff
}

.skin-grey .hd .tool .clear a,.skin-grey .hd .tool .export a,.skin-grey .hd .tool .ifile a,.skin-grey .hd .tool .import a,.skin-grey .hd .tool .preview a,.skin-grey .hd .tool .sfile a,.skin-grey .hd .tool .share a {
    color: #f3f3f3
}

.skin-grey .bd .ks-rule-left {
    color: #4e4e4e;
    background-image: url(./images/diy/yrule-grey.gif?v=20170718)
}

.skin-grey .bd .ks-rule-top {
    color: #4e4e4e;
    background-image: url(./images/diy/xrule-grey.gif?v=20170718)
}

.skin-grey .bd .ks-line {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .bd #container .edits {
    background: #fff;
    border: 1px solid #ccc
}

.skin-grey .bd #container .edits span {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .ft {
    color: #666;
    background: #d4d4d4
}

.skin-grey .ft #location {
    background: #C6C6C6
}

.skin-grey .ft #location span {
    color: #333
}

.skin-grey .ft #location span.icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .ft #skin select {
    color: #666
}

.skin-grey .ft #repos {
    color: #787878;
    border: 1px solid #B5B5B5;
    background: #eee
}

.skin-grey .ft #repos:hover {
    color: #606060;
    border: 1px solid #9D9D9D;
    background: #F5F5F5
}

.skin-grey .ft .about .qq {
    color: #666
}

.skin-grey .ft .about .qq a {
    color: #333
}

.skin-grey .ft .about .copyright {
    color: #888
}

.skin-grey .ft .about .copyright a {
    color: #888
}

.skin-grey .ft .about .copyright a:hover {
    color: #333
}

.skin-grey .panelboxs {
    background: #D6D6D6;
    
}
.panelboxs#align, .panelboxs#control{
    border: 1px solid #7B7B7B;
    box-shadow: 2px 2px 5px #999
}

.skin-grey .panelboxs .p-hd {
    background-image: url(./images/diy/bar-grey.gif?v=20170718)
}

.skin-grey .panelboxs .p-hd .icon {
    background-image: url(./images/diy/bar-grey.gif?v=20170718)
}

.skin-grey .panelboxs .p-bd .ks-tabs-bar {
    background-image: url(./images/diy/bar-grey.gif?v=20170718)
}

.skin-grey .panelboxs .p-bd .ks-tabs-bar .ks-tabs-tab {
    color: #333;
    border-right: 1px solid #7B7B7B
}

.skin-grey .panelboxs .p-bd .ks-tabs-bar .ks-tab-selected {
    color: #333;
    background-color: #D6D6D6
}

.skin-grey .panelboxs .p-bd .ks-tabs-body {
    color: #333
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd {
    border-bottom: 1px solid #9E9E9E
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd .name {
    color: #333
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-hd .uid {
    color: #666
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-bd {
    border-top: 1px solid #EFEFEF
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .ks-tabs-panel .attr-bd .prompt {
    color: #888
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-hd {
    color: #444;
    background: #bababa
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-hd i {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-classify {
    background: #C7C7C7
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-items-nav a,.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd .edit-items-operate a {
    color: #666;
    border: 1px solid #aaa
}

.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd #accordion-pages .current,.skin-grey .panelboxs .p-bd .ks-tabs-body .edit-items .edit-items-bd #tab-pages .current {
    background: #F5F5F5
}

.skin-grey .panelboxs .p-bd .history-panel .history {
    border: 1px solid #989898;
    border-bottom: none;
    background: #C7C7C7;
    color: #333
}

.skin-grey .panelboxs .p-bd .history-panel .history .ks-record {
    border-bottom: 1px solid #989898
}

.skin-grey .panelboxs .p-bd .history-panel .history .ks-record:hover {
    background: #D9D9D9
}

.skin-grey .panelboxs .p-bd .history-panel .history .selected {
    background: #B7CDF9
}

.skin-grey .panelboxs .p-bd .history-panel .history .selected:hover {
    background: #B7CDF9
}

.skin-grey .panelboxs .p-bd .history-panel .history .redo {
    color: #898989
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd {
    border: 1px solid #989898;
    border-bottom: none;
    background: #C7C7C7
} */

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer {
    border-bottom: 1px solid #989898
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer:hover {
    background: #D9D9D9
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .left {
    border-right: 1px solid #989898;
    background-color: #B6B6B6
} 

 .skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .eye {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .copy,.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .del,.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .down,.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .lock,.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .locked,.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .up {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname {
    color: #333
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname i {
    color: #888
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .selected {
    background: #B7CDF9
}

.skin-grey .panelboxs .p-bd .layer-panel .layer-bd .selected:hover {
    background: #B7CDF9
}

 .skin-grey #align .align-panel {
    border-right: 1px solid #9E9E9E
}

.skin-grey #align .align-panel .ks-item .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey #align .align-panel .ks-item:hover .icon {
    background-color: #fff
}

.skin-grey #align .sort-panel {
    color: #333;
    border-left: 1px solid #EFEFEF
}

.skin-grey #align .sort-panel .ks-align-sortX,.skin-grey #align .sort-panel .ks-align-sortY {
    background: #C7C7C7;
    border: 1px solid #838383
}

.skin-grey #align .sort-panel .ks-align-sortX:hover,.skin-grey #align .sort-panel .ks-align-sortY:hover {
    background: #E1E1E1
}

.skin-grey #align .sort-panel.disabled .ks-item:hover {
    background: #C7C7C7
}

.skin-grey #widgets .p-bd .line {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

/* .skin-grey #widgets .p-bd .item:hover {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
} */

/* .skin-grey #widgets .p-bd .item .name {
    color: #363636
} */

/* .skin-grey #widgets .p-bd .item .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey #toolmenu .tools .ks-item .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey #toolmenu .tools .ks-item:hover {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
} */

/* .skin-grey #toolmenu .tools .selected {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
}

.skin-grey #toolmenu .line {
    background-image: url(./images/diy/icon-grey.png?v=20170718)
} */

.skin-grey #toolmenu .separate {
    border-top: 1px solid #9E9E9E;
    border-bottom: 1px solid #EFEFEF
}

.skin-grey #module-panel .edit-mark {
    color: #888
}

.hd {
    width: 100%;
    height: 48px;
    position: relative;
    z-index: 1000
}

.hd .logo {
    width: 240px;
    height: 48px;
    float: left;
    display: block;
    font-size: 24px;
    color: #f3f3f3;
    line-height: 48px;
    background-position: 0 0;
    background-repeat: no-repeat
}

.hd .login {
    float: left;
    height: 51px;
    color: #f3f3f3;
    line-height: 51px
}

.hd .login a.logout {
    color: #f3f3f3
}

.hd .login .layui-btn-custom{
    margin-top: 6px;
}
.hd .login .login-a,.hd .login .login-b {
    height: 20px;
    line-height: 20px;
    float: left;
    margin: 14px 0
}

.hd .login .login-b {
    margin-left: 5px
}

.hd .login .login-b i,.hd .login .login-b span {
    display: block;
    float: left
}

.hd .login .login-b i {
    width: 20px;
    height: 20px;
    background: url(./images/icon.png?v=20170718) no-repeat -306px -149px
}

.hd .tool {
    height: 48px;
    line-height: 48px;
    position: absolute;
    right: 0;
    font-size: 14px
}

.hd .tool .item {
    cursor: pointer;
    float: left;
    position: relative
}

.hd .tool .contact,.hd .tool .key,.hd .tool .space,.hd .tool .tutorial {
    width: 66px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 12px
}

.hd .tool .contact a,.hd .tool .key a,.hd .tool .space a,.hd .tool .tutorial a {
    width: 100%;
    height: 100%;
    display: block
}

.hd .tool .key {
    position: relative
}

.hd .tool .key a .icon {
    width: 20px;
    height: 20px;
    float: left;
    display: block;
    margin: 14px 0;
    background-repeat: no-repeat;
    background-position: -254px -53px
}

.hd .tool .key a .name {
    width: 46px;
    height: 20px;
    line-height: 20px;
    float: left;
    text-align: right;
    display: block;
    margin: 14px 0
}

.hd .tool .key:hover ul {
    visibility: visible;
    z-index: 99
}

.hd .tool .key:hover .icon {
    background-position: -272px -53px
}

.hd .tool .key ul {
    width: 250px;
    padding: 20px 30px 20px 10px;
    position: absolute;
    visibility: hidden;
    left: -86px;
    top: 48px;
    background: #eee;
    cursor: default
}

.hd .tool .key ul li {
    height: 25px;
    line-height: 25px;
    font-size: 12px;
    margin-bottom: 5px
}

.hd .tool .key ul li span {
    height: 24px;
    float: left
}

.hd .tool .key ul li .tit {
    width: 110px;
    color: #666;
    text-align: right
}

.hd .tool .key ul li .cont {
    width: 140px;
    color: #666;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -164px -95px
}

.hd .tool .clear,.hd .tool .export,.hd .tool .ifile,.hd .tool .import,.hd .tool .preview,.hd .tool .sfile,.hd .tool .share {
    width: 71px;
    height: 48px;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat
}

.hd .tool .clear a,.hd .tool .export a,.hd .tool .ifile a,.hd .tool .import a,.hd .tool .preview a,.hd .tool .sfile a,.hd .tool .share a {
    width: 100%;
    height: 100%;
    display: block
}

.hd .tool .clear .icon,.hd .tool .export .icon,.hd .tool .ifile .icon,.hd .tool .import .icon,.hd .tool .preview .icon,.hd .tool .sfile .icon,.hd .tool .share .icon {
    width: 20px;
    height: 18px;
    float: left;
    margin: 14px 2px 0 7px;
    background-repeat: no-repeat
}

.hd .tool .clear .name,.hd .tool .export .name,.hd .tool .ifile .name,.hd .tool .import .name,.hd .tool .preview .name,.hd .tool .sfile .name,.hd .tool .share .name {
    width: 42px;
    height: 20px;
    float: left;
    margin: 14px 0;
    line-height: 20px
}

.hd .tool .share .icon {
    background-position: -320px -74px
}

.hd .tool .share:hover .icon {
    background-position: -320px -74px
}

.hd .tool .sfile .icon {
    background-position: -143px -35px
}

.hd .tool .sfile:hover .icon {
    background-position: -143px -35px
}

.hd .tool .ifile .icon {
    background-position: -161px -35px
}

.hd .tool .ifile:hover .icon {
    background-position: -161px -35px
}

.hd .tool .preview .icon {
    background-position: -180px -34px
}

.hd .tool .preview:hover .icon {
    background-position: -180px -34px
}

.hd .tool .import .icon {
    background-position: -215px -36px
}

.hd .tool .import:hover .icon {
    background-position: -215px -36px
}

.hd .tool .export .icon {
    background-position: -197px -35px
}

.hd .tool .export:hover .icon {
    background-position: -197px -35px
}

.hd .tool .clear .icon {
    background-position: -232px -35px
}

.hd .tool .clear:hover .icon {
    background-position: -232px -35px
}

.bd {
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.bd .ks-module-box {
    width: 1903px;
    height: 858px;
    overflow: auto;
    position: relative;
    left: 17px;
    top: 17px;
    background: #303030
}

.bd .ks-module-box .ks-module {
    width: 1920px;
    height: 2000px;
    background: #fff;
    margin: 0 auto;
    position: relative
}

.bd .ks-module-box .temp-data-comp {
    position: absolute
}

.bd .ks-module-box .temp-data-comp {
    border: 1px dotted red;
    display: none
}

.bd #wangge {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: repeat;
    background-position: 0 0
}

.bd #wangge.wang1 {
    background-image: url(./images/diy/wang1.png?v=20170718)
}

.bd #wangge.wang2 {
    background-image: url(./images/diy/wang2.png?v=20170718)
}

.bd #wangge.wang3 {
    background-image: url(./images/diy/wang3.png?v=20170718)
}

.bd #wangge.wang4 {
    background-image: url(./images/diy/wang4.png?v=2017031301)
}

.bd #wangge.opa1 {
    opacity: .1;
    filter: alpha(opacity=10)
}

.bd #wangge.opa2 {
    opacity: .2;
    filter: alpha(opacity=20)
}

.bd #wangge.opa3 {
    opacity: .3;
    filter: alpha(opacity=30)
}

.bd #wangge.opa4 {
    opacity: .4;
    filter: alpha(opacity=40)
}

.bd #wangge.opa5 {
    opacity: .5;
    filter: alpha(opacity=50)
}

.bd #wangge.opa6 {
    opacity: .6;
    filter: alpha(opacity=60)
}

.bd #wangge.opa7 {
    opacity: .7;
    filter: alpha(opacity=70)
}

.bd #wangge.opa8 {
    opacity: .8;
    filter: alpha(opacity=80)
}

.bd #wangge.opa9 {
    opacity: .9;
    filter: alpha(opacity=90)
}

.bd #wangge.opa10 {
    opacity: 1;
    filter: alpha(opacity=100)
}

.bd #wangge.hide {
    display: none
}

.bd #container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
    outline: medium
}

.bd #container .xline,.bd #container .yline {
    display: none;
    z-index: 99
}

.bd #container .xline {
    border-top: 1px dashed #666;
    height: 0;
    left: 0;
    position: absolute;
    width: 100%
}

.bd #container .yline {
    border-left: 1px dashed #666;
    height: 100%;
    position: absolute;
    top: 0;
    width: 0
}

.bd #container .temp-data-hot,.bd #container .temp-data-line {
    position: absolute
}

.bd #container .temp-data-hot {
    background: #000;
    opacity: .1;
    filter: alpha(opacity=10)
}

.bd #container .temp-data-line {
    background: #000
}

.bd #container .ks-box,.bd #container .ks-menu {
    border: 1px solid transparent;
    position: absolute;
    cursor: move;
    margin: -1px 0 0 -1px
}

.bd #container .ks-box .ks-move,.bd #container .ks-menu .ks-move {
    border: 1px solid #4AFFFF;
    margin: -1px 0 0 -1px;
    position: absolute;
    cursor: move
}

.bd #container .ks-box .ks-selected,.bd #container .ks-menu .ks-selected {
    border: 1px solid red
}

.bd #container .ks-box:hover .ks-resizable-handler,.bd #container .ks-menu:hover .ks-resizable-handler {
    display: block
}

.bd #container .ks-fixed.ks-red {
    border: 1px solid red!important
}

.bd #container .ks-fixed:hover {
    border: 1px solid #aaa;
    box-shadow: 0 0 2px #666
}

.bd #container .ks-fixed .ks-resizable-handler {
    display: block!important
}

.bd #container .ks-box:hover,.bd #container .ks-menu:hover {
    border: 1px solid #aaa;
    box-shadow: 0 0 2px #666
}

.bd #container .ks-resizable-handler {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    display: none
}

.bd #container .ks-resizable-handler-b,.bd #container .ks-resizable-handler-l,.bd #container .ks-resizable-handler-r,.bd #container .ks-resizable-handler-t {
    background-color: #999
}

.bd #container .ks-resizable-handler-b,.bd #container .ks-resizable-handler-t {
    cursor: n-resize;
    height: 1px;
    left: 0;
    width: 100%
}

.bd #container .ks-resizable-handler-b {
    bottom: 0
}

.bd #container .ks-resizable-handler-t {
    top: 0
}

.bd #container .ks-resizable-handler-l,.bd #container .ks-resizable-handler-r {
    cursor: e-resize;
    height: 100%;
    top: 0;
    width: 1px
}

.bd #container .ks-resizable-handler-l {
    left: 0
}

.bd #container .ks-resizable-handler-r {
    right: 0
}

.bd #container .ks-resizable-handler-bl,.bd #container .ks-resizable-handler-br,.bd #container .ks-resizable-handler-tl,.bd #container .ks-resizable-handler-tr {
    background-color: #666;
    height: 5px;
    position: absolute;
    width: 5px
}

.bd #container .ks-resizable-handler-bl {
    bottom: -2px;
    cursor: sw-resize;
    left: -2px
}

.bd #container .ks-resizable-handler-br {
    bottom: -2px;
    cursor: nw-resize;
    right: -2px
}

.bd #container .ks-resizable-handler-tl {
    cursor: nw-resize;
    left: -2px;
    top: -2px
}

.bd #container .ks-resizable-handler-tr {
    cursor: sw-resize;
    right: -2px;
    top: -2px
}

.bd #container .ks-hotarea .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    opacity: .1;
    filter: alpha(opacity=10)
}

.bd #container .ks-hotarea .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.bd #container .ks-hotarea .t {
    display: none
}

.bd #container .ks-hotarea:hover .t {
    display: block
}

.bd #container .ks-selected .ks-resizable-handler {
    display: block
}

.bd #container .ks-selected .ks-resizable-handler-b,.bd #container .ks-selected .ks-resizable-handler-l,.bd #container .ks-selected .ks-resizable-handler-r,.bd #container .ks-selected .ks-resizable-handler-t {
    background-color: transparent
}

.bd #container .ks-selected .mask {
    background: #E40050
}

.bd #container .ks-selected .ks-resizable-handler-bl,.bd #container .ks-selected .ks-resizable-handler-br,.bd #container .ks-selected .ks-resizable-handler-tl,.bd #container .ks-selected .ks-resizable-handler-tr {
    background-color: #E4007F;
    height: 5px;
    position: absolute;
    width: 5px
}

.bd #container .ks-selected {
    border: 1px solid red
}

.bd #container .edits {
    width: 48px;
    height: 17px;
    position: absolute;
    right: 0;
    top: -18px;
    padding: 0 2px;
    z-index: 2
}

.bd #container .edits span {
    width: 16px;
    height: 17px;
    display: block;
    float: left;
    cursor: pointer;
    background-repeat: no-repeat
}

.bd #container .edits span:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.bd #container .edits span.del {
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    background-position: -36px -55px
}

.bd #container .edits span.copy {
    background-position: -127px -56px
}

.bd #container .edits span.lock {
    background-position: 0 -55px
}

.bd #container .edits span.locked {
    background-position: -18px -55px
}

.bd .ks-rule-left {
    width: 17px;
    height: 3000px;
    position: absolute;
    left: 0;
    top: 17px;
    background-position: 0 0;
    background-repeat: repeat-y
}

.bd .ks-rule-left span {
    cursor: default;
    display: block;
    font-size: 10px;
    height: 46px;
    width: 13px;
    padding-left: 4px;
    font-family: serif;
    padding-top: 4px;
    letter-spacing: 10px;
    line-height: 10px;
    word-wrap: break-word
}

.bd .ks-rule-top {
    width: 3000px;
    height: 17px;
    position: absolute;
    left: 0;
    top: 0;
    background-position: 0 0;
    background-repeat: repeat-x
}

.bd .ks-rule-top span {
    cursor: default;
    display: block;
    float: left;
    font-size: 10px;
    height: 17px;
    width: 50px;
    font-family: serif;
    text-indent: 4px
}

.bd .ks-rule-info {
    display: none;
    width: 80px;
    color: #fff;
    background: #000;
    text-align: center;
    position: absolute;
    z-index: 9999;
    opacity: .5;
    filter: alpha(opacity=50);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -moz-border-top-left-radius: 15px;
    -moz-border-top-right-radius: 15px
}

.bd .ks-rule-info span {
    display: block;
    line-height: 26px
}

.bd .ks-rule {
    position: absolute;
    z-index: 9999
}

.bd .xrule {
    height: 5px;
    cursor: row-resize;
    border-top: 1px solid #4affff;
    margin-top: -1px
}

.bd .yrule {
    width: 5px;
    cursor: col-resize;
    border-left: 1px solid #4affff;
    margin-left: -1px
}

.bd .ks-line {
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: -307px -54px
}

.ft {
    width: 100%;
    height: 22px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
    overflow: hidden
}

.ft #location {
    width: 115px;
    height: 22px;
    margin-right: 20px;
    overflow: hidden;
    float: left
}

.ft #location span {
    width: 45px;
    height: 22px;
    display: block;
    font-size: 12px;
    float: left;
    line-height: 24px
}

.ft #location span.icon {
    width: 20px;
    margin-right: 5px;
    background-position: -125px -70px
}

.ft #skin {
    width: 260px;
    height: 18px;
    line-height: 18px;
    padding: 2px 0;
    overflow: hidden;
    float: left;
    margin-right: 20px
}

.ft #skin span {
    padding-right: 2px
}

.ft #skin select {
    height: 18px
}

.ft #skin .skin {
    width: 65px;
    margin-right: 20px
}

.ft #skin .type {
    width: 80px;
    margin-right: 5px
}

.ft #skin .opacity {
    width: 50px
}

.ft #suck {
    height: 18px;
    padding: 2px 0;
    overflow: hidden;
    float: left;
    margin-right: 20px
}

.ft #suck span {
    padding: 0 3px
}

.ft #suck .switch {
    position: relative;
    top: 2px
}

.ft #suck .ks-num {
    width: 25px;
    position: relative;
    top: 1px
}

.ft #repos {
    padding: 0 4px;
    margin: 2px 0;
    cursor: pointer;
    height: 16px;
    overflow: hidden;
    float: left
}

.ft .about {
    line-height: 23px;
    padding-right: 10px;
    float: right;
    overflow: hidden
}

.ft .about .qq {
    padding-right: 5px
}

.ft .about .copyright b {
    padding: 0 2px;
    position: relative;
    top: 1px
}

.ft .about .copyright a {
    padding: 0 2px;
    text-decoration: underline
}

.panelboxs {
    position: absolute;
    z-index: 3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    -moz-border-top-left-radius: 3px;
    -moz-border-top-right-radius: 3px
}

.panelboxs .p-hd {
    height: 9px;
    cursor: move;
    background-position: 0 -41px;
    background-repeat: repeat-x
}

.panelboxs .p-hd .icon {
    width: 11px;
    height: 9px;
    display: block;
    float: right;
    cursor: pointer;
    margin-right: 4px;
    background-repeat: repeat-x;
    background-position: -114px -107px
}

.panelboxs .p-hd .open {
    background-position: -95px -106px
}

.panelboxs .p-bd .ks-tabs-bar {
    height: 18px;
    overflow: hidden;
    background-repeat: repeat;
    background-position: 0 -68px
}

.panelboxs .p-bd .ks-tabs-bar .ks-tabs-tab {
    padding: 0 8px;
    height: 18px;
    overflow: hidden;
    float: left;
    text-align: center;
    line-height: 18px;
    cursor: pointer
}

.panelboxs .p-bd .ks-tabs-body {
    padding: 8px;
    display: none;
    max-height: 420px;
    overflow: auto
}

.panelboxs .p-bd .attr-panel {
    padding: 2px 10px 10px
}

.panelboxs .p-bd .attr-panel .attr-hd {
    height: 26px;
    line-height: 26px;
    margin-top: 4px
}

.panelboxs .p-bd .attr-panel .attr-hd span {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    float: left
}

.panelboxs .p-bd .attr-panel .attr-hd .name {
    font-size: 14px;
    padding-right: 2px;
    font-weight: 700
}

.panelboxs .p-bd .attr-panel .attr-hd .uid {
    font-size: 12px
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item {
    font-size: 12px;
    line-height: 18px;
    margin-top: 6px
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item span.attention {
    color: #FE3B1C
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item input[type=text] {
    height: 18px;
    margin-right: 5px
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item input[type=radio] {
    position: relative;
    top: 3px
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right: 2px;
    top: 2px
}

.panelboxs .p-bd .attr-panel .attr-bd .edit-item select {
    overflow: hidden;
    background: #fff;
    outline: 0;
    cursor: pointer;
    margin-right: 5px
}

.panelboxs .p-bd .attr-panel .edit-items {
    margin: 4px 0
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-hd {
    width: 101%;
    height: 20px;
    cursor: pointer;
    line-height: 20px;
    padding-left: 3px;
    position: relative;
    left: -3px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    font-weight: 700
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-hd i {
    width: 20px;
    height: 20px;
    display: block;
    float: right;
    background-position: -187px -172px;
    background-repeat: no-repeat
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd {
    display: none
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .eidt {
    padding-top: 10px
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-classify {
    display: none
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-classify {
    margin-top: 5px;
    padding: 4px 6px 10px;
    border-radius: 2px;
    -moz-border-radius: 2px
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-nav {
    margin-top: 7px
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-nav,.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-operate {
    line-height: 22px;
    margin-bottom: 8px;
    text-align: center
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-nav a,.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-operate a {
    cursor: pointer;
    padding: 0 6px;
    display: inline-block;
    margin: 0 2px
}

.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-nav a.disable,.panelboxs .p-bd .attr-panel .edit-items .edit-items-bd .edit-items-operate a.disable {
    cursor: default
}

.panelboxs .p-bd .attr-panel .show .edit-items-hd i {
    background-position: -187px -147px
}

.panelboxs .p-bd .attr-panel .show .edit-items-bd {
    display: block
}

.panelboxs .p-bd .history-panel .history .ks-record {
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    padding-left: 10px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer {
    height: 28px;
    overflow: hidden;
    position: relative;
    padding-left: 29px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .left {
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .right {
    width: 100%;
    height: 28px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .eye {
    width: 18px;
    height: 18px;
    margin: 5px;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: -18px -36px;
    opacity: 1;
    filter: alpha(opacity=100)
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .hide {
    background-position: 0 -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname {
    height: 18px;
    overflow: hidden;
    float: left;
    padding: 5px 0 5px 6px;
    line-height: 18px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .cname i {
    font-style: normal
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .copy,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .del,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .down,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .lock,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .locked,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .up {
    width: 18px;
    height: 18px;
    float: right;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    opacity: .6;
    margin: 5px 0;
    filter: alpha(opacity=60)
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .copy:hover,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .del:hover,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .down:hover,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .lock:hover,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .locked:hover,.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .up:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .lock {
    background-position: -54px -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .locked {
    background-position: -36px -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .copy {
    background-position: -126px -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .down {
    background-position: -90px -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .up {
    background-position: -72px -36px
}

.panelboxs .p-bd .layer-panel .layer-bd .ks-layer .del {
    background-position: -108px -36px;
    margin-right: 5px
}

.panelboxs .p-bd .layer-panel .ks-dd-dragging {
    border: 1px dotted #000
}

.panelboxs .p-bd .layer-panel .ks-dd-proxy {
    background: #fff;
    opacity: .6;
    filter: alpha(opacity=60)
}

.panelboxs .p-bd .module-panel .edit-item {
    font-size: 12px;
    line-height: 18px;
    margin-top: 6px;
    overflow: hidden
}

.panelboxs .p-bd .module-panel .edit-item input,.panelboxs .p-bd .module-panel .edit-item span {
    float: left
}

.panelboxs .p-bd .module-panel .edit-item span.attention {
    color: #FE3B1C
}

.panelboxs .p-bd .module-panel .edit-item input {
    height: 18px;
    margin-right: 5px
}

.panelboxs .p-bd .module-panel .edit-item input[type=radio] {
    position: relative;
    top: 3px
}

.panelboxs .p-bd .module-panel .edit-item input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right: 2px
}

.panelboxs .p-bd .module-panel .edit-item select {
    overflow: hidden;
    background: #fff;
    outline: 0;
    cursor: pointer
}

#widgets {
    width: 98px;
    left: 80px;
    top: 77px
}

#widgets .p-bd {
    width: 92px;
    padding: 0 3px 4px
}

#widgets .p-bd .line {
    width: 35px;
    height: 10px;
    margin: 0 auto;
    background-position: -306px -38px;
    background-repeat: no-repeat
}

#widgets .p-bd .item {
    width: 92px;
    height: 24px;
    cursor: pointer
}

#widgets .p-bd .item .icon {
    width: 18px;
    height: 18px;
    margin: 3px 5px 0 7px;
    float: left;
    background-repeat: no-repeat
}

/* #widgets .p-bd .item .name {
    width: 62px;
    height: 24px;
    float: left;
    line-height: 24px
} */

#widgets .p-bd .item.ks-widget-hotarea .icon {
    background-position: -325px 1px
}

#widgets .p-bd .item.ks-widget-picture .icon {
    background-position: -1px 0
}

#widgets .p-bd .item.ks-widget-double .icon {
    background-position: -19px 0
}

#widgets .p-bd .item.ks-widget-qrcode .icon {
    background-position: -37px 0
}

#widgets .p-bd .item.ks-widget-fav .icon {
    background-position: -54px 0
}

#widgets .p-bd .item.ks-widget-share .icon {
    background-position: -73px 0
}

#widgets .p-bd .item.ks-widget-car .icon {
    background-position: -90px 0
}

#widgets .p-bd .item.ks-widget-search .icon {
    background-position: -109px 0
}

#widgets .p-bd .item.ks-widget-countdown .icon {
    background-position: -127px 1px
}

#widgets .p-bd .item.ks-widget-wangwang .icon {
    background-position: -145px 1px
}

#widgets .p-bd .item.ks-widget-wanggroup .icon {
    background-position: -162px 1px
}

#widgets .p-bd .item.ks-widget-txt .icon {
    background-position: -180px 0
}

#widgets .p-bd .item.ks-widget-roll .icon {
    background-position: -197px 1px
}

#widgets .p-bd .item.ks-widget-flash .icon {
    background-position: -215px 1px
}

#widgets .p-bd .item.ks-widget-tab .icon {
    background-position: -233px 1px
}

#widgets .p-bd .item.ks-widget-mao .icon {
    background-position: -251px -1px
}

#widgets .p-bd .item.ks-widget-kgd .icon {
    background-position: -269px 1px
}

#widgets .p-bd .item.ks-widget-fixed .icon {
    background-position: -306px 0
}

#widgets .p-bd .item.ks-widget-rollimages .icon {
    background-position: -287px 0
}

#widgets .p-bd .item:hover {
    background-position: 0 -94px;
    background-repeat: no-repeat
}

#toolmenu {
    width: 37px
}

#toolmenu .tools .tool-comp .icon {
    background-position: -216px -18px
}

#toolmenu .tools .tool-comp .prompt {
    width: 255px
}

#toolmenu .tools .tool-hot .icon {
    background-position: -234px -18px
}

#toolmenu .tools .tool-hot .prompt {
    width: 315px
}

#toolmenu .tools .tool-line .icon {
    background-position: -252px -18px
}

#toolmenu .tools .tool-line .prompt {
    width: 220px
}

#toolmenu .tools .tool-rule .icon {
    background-position: -270px -18px
}

#toolmenu .tools .tool-rule .prompt {
    width: 138px
}

#toolmenu .tools .tool-wang .icon {
    background-position: -288px -18px
}

#toolmenu .tools .tool-wang .prompt {
    width: 135px
}

#toolmenu .tools .tool-locked .icon {
    background-position: -306px -18px
}

#toolmenu .tools .tool-locked .prompt {
    width: 255px
}

#toolmenu .tools .tool-lock .icon {
    background-position: -324px -18px
}

#toolmenu .tools .tool-lock .prompt {
    width: 255px
}

#toolmenu .tools .ks-item {
    width: 33px;
    height: 25px;
    cursor: pointer;
    position: relative
}

#toolmenu .tools .ks-item .icon {
    width: 18px;
    height: 18px;
    position: absolute;
    overflow: hidden;
    display: block;
    left: 7px;
    top: 3px;
    background-repeat: no-repeat
}

#toolmenu .tools .ks-item .prompt {
    height: 19px;
    line-height: 19px;
    padding: 0 5px;
    font-size: 12px;
    color: #000;
    background: #FFC;
    position: absolute;
    left: 33px;
    top: 2px;
    border: 1px solid #000;
    cursor: default;
    display: none
}

#toolmenu .tools .ks-item:hover {
    background-position: -95px -95px;
    background-repeat: no-repeat
}

#toolmenu .tools .ks-item.selected {
    background-position: -128px -95px
}

#toolmenu .tools .hover .prompt {
    display: block
}

#toolmenu .line {
    width: 100%;
    height: 10px;
    background-position: -55px -262px;
    background-repeat: no-repeat
}



#toolmenu .separate {
    width: 29px;
    margin: 0 4px
}

#toolmenu .else {
    padding: 10px 2px 5px;
    padding-top: 6px
}

#align {
    width: 290px
}

#align .ks-tabs-body {
    position: relative
}

#align .align-panel {
    width: 140px;
    height: 50px;
    position: absolute;
    left: 8px;
    top: 8px
}

#align .align-panel .ks-item {
    width: 19px;
    height: 19px;
    float: left;
    margin-right: 1px;
    margin-top: 4px;
    position: relative
}

#align .align-panel .ks-item .icon {
    width: 19px;
    height: 19px;
    display: block;
    overflow: hidden;
    cursor: pointer;
    background-repeat: no-repeat
}

#align .align-panel .ks-item .prompt {
    color: #000;
    height: 18px;
    line-height: 18px;
    background: #FFC;
    border: 1px solid #000;
    position: absolute;
    left: 0;
    top: -24px;
    z-index: 100;
    display: none;
    text-align: center
}

#align .align-panel .ks-item.ks-align-left .prompt {
    width: 44px
}

#align .align-panel .ks-item.ks-align-left .icon {
    background-position: 0 -18px
}

#align .align-panel .ks-item.ks-align-center .prompt {
    width: 79px
}

#align .align-panel .ks-item.ks-align-center .icon {
    background-position: -18px -18px
}

#align .align-panel .ks-item.ks-align-right {
    margin-right: 10px
}

#align .align-panel .ks-item.ks-align-right .prompt {
    width: 44px
}

#align .align-panel .ks-item.ks-align-right .icon {
    background-position: -36px -18px
}

#align .align-panel .ks-item.ks-align-top .prompt {
    width: 44px
}

#align .align-panel .ks-item.ks-align-top .icon {
    background-position: -54px -18px
}

#align .align-panel .ks-item.ks-align-middle .prompt {
    width: 79px
}

#align .align-panel .ks-item.ks-align-middle .icon {
    background-position: -72px -18px
}

#align .align-panel .ks-item.ks-align-bottom .prompt {
    width: 44px
}

#align .align-panel .ks-item.ks-align-bottom .icon {
    background-position: -90px -18px
}

#align .align-panel .ks-item.ks-canvas-left .prompt {
    width: 82px
}

#align .align-panel .ks-item.ks-canvas-left .icon {
    background-position: -108px -18px
}

#align .align-panel .ks-item.ks-canvas-center .prompt {
    width: 117px
}

#align .align-panel .ks-item.ks-canvas-center .icon {
    background-position: -126px -18px
}

#align .align-panel .ks-item.ks-canvas-right {
    margin-right: 10px
}

#align .align-panel .ks-item.ks-canvas-right .prompt {
    width: 82px
}

#align .align-panel .ks-item.ks-canvas-right .icon {
    background-position: -144px -18px
}

#align .align-panel .ks-item.ks-canvas-top .prompt {
    width: 82px
}

#align .align-panel .ks-item.ks-canvas-top .icon {
    background-position: -162px -18px
}

#align .align-panel .ks-item.ks-canvas-middle .prompt {
    width: 117px
}

#align .align-panel .ks-item.ks-canvas-middle .icon {
    background-position: -180px -18px
}

#align .align-panel .ks-item.ks-canvas-bottom .prompt {
    width: 82px
}

#align .align-panel .ks-item.ks-canvas-bottom .icon {
    background-position: -198px -18px
}

#align .align-panel .hover .prompt {
    display: block
}

#align .align-panel.adisabled:hover .ks-align .icon {
    background-color: transparent
}

#align .align-panel.adisabled .ks-align .icon {
    opacity: .3;
    filter: alpha(opacity=30);
    cursor: default
}

#align .align-panel.cdisabled:hover .ks-canvas .icon {
    background-color: transparent
}

#align .align-panel.cdisabled .ks-canvas .icon {
    opacity: .3;
    filter: alpha(opacity=30);
    cursor: default
}

#align .sort-panel {
    width: 120px;
    height: 50px;
    padding-left: 12px;
    overflow: hidden;
    position: absolute;
    right: 8px;
    top: 8px
}

#align .sort-panel .sortNum {
    height: 20px;
    line-height: 20px;
    margin-bottom: 4px
}

#align .sort-panel .sortNum input {
    height: 16px;
    position: relative;
    top: 1px
}

#align .sort-panel .ks-align-sortX,#align .sort-panel .ks-align-sortY {
    width: 54px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    float: left;
    cursor: pointer
}

#align .sort-panel .ks-align-sortX {
    margin-right: 4px
}

#align .sort-panel.disabled .ks-item {
    opacity: .3;
    filter: alpha(opacity=30);
    cursor: default
}

#rightmenu {
    width: 162px;
    background: #f2f2f2;
    position: absolute;
    left: 600px;
    top: 100px;
    z-index: 1000;
    padding: 10px 3px 4px 3px;
    border: 1px solid #cdcdcd;
    box-shadow: 0 5px 10px #ccc;
    display: none
}

#rightmenu .item {
    height: 22px;
    line-height: 22px;
    color: #333;
    cursor: pointer;
    margin-bottom: 6px
}

#rightmenu .item .icon {
    width: 18px;
    height: 18px;
    margin: 2px 3px 2px 9px;
    display: block;
    float: left
}

#rightmenu .item .name {
    width: 132px;
    height: 22px;
    display: block;
    float: left
}

#rightmenu .item i {
    color: #666
}

#rightmenu .item:hover {
    background-color: #91C9F7
}

#rightmenu .separate {
    width: 125px;
    margin-left: 30px;
    border-top: 1px solid #d6d6d6;
    margin-bottom: 5px
}

#rightmenu .copy .icon,#rightmenu .delete .icon,#rightmenu .drag .icon {
    background-image: url(./images/diy/icon-grey.png?v=20170718);
    background-repeat: no-repeat
}

#rightmenu .drag .icon {
    background-position: -53px -54px
}

#rightmenu .locked .icon {
    background-position: -107px -55px
}

#rightmenu .delete .icon {
    background-position: -72px -54px
}

#rightmenu .copy .icon {
    background-position: -90px -54px
}

.handleCode {
    padding-bottom: 20px;
    z-index: 9999;
    overflow: hidden;
    position: absolute;
    background: #E6E6E6;
    left: -9999px;
    top: -9999px
}

.handleCode .head {
    padding: 8px 10px;
    height: 20px;
    line-height: 20px;
    cursor: move;
    background: #fff
}

.handleCode .head .title {
    height: 20px;
    line-height: 18px;
    font-size: 14px;
    font-family: Microsoft Yahei;
    color: #333;
    display: block;
    overflow: hidden;
    position: relative
}

.handleCode .head .title .icon {
    width: 20px;
    height: 18px;
    float: left;
    display: block;
    background-image: url(./images/diy/icon-grey.png?v=20170718);
    background-repeat: no-repeat
}

.handleCode .head .title .name {
    float: left
}

.handleCode .head .title.gen .icon {
    background-position: -18px -72px
}

.handleCode .head .title.import .icon {
    background-position: -36px -72px
}

.handleCode .head .close {
    width: 20px;
    height: 20px;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -54px -72px;
    color: #999;
    float: right;
    font-weight: 700;
    cursor: pointer
}

.handleCode .body {
    overflow: auto
}

.handleCode .body .remark {
    width: 93%;
    padding: 10px;
    overflow: hidden;
    margin: 10px auto 0;
    background: #FDFBC1;
    color: #FF0202;
    line-height: 20px;
    border: 1px solid #FDFBC1
}

.handleCode .body .remark img {
    vertical-align: bottom
}

.handleCode .body .code {
    width: 93%;
    height: 310px;
    margin: 10px auto 0;
    padding: 10px;
    border: 1px solid #dedede;
    background: #fff;
    box-shadow: 4px 4px 5px 1px #efefef inset;
    position: relative
}

.handleCode .body .code textarea {
    width: 100%;
    height: 100%;
    color: #999;
    display: block;
    line-height: 16px;
    outline: 0;
    word-break: break-all;
    font-size: 12px;
    font-family: Courier New
}

.handleCode .body .code .copy {
    width: 70px;
    height: 24px;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background: #0F7CB4;
    position: absolute;
    cursor: pointer;
    right: 0;
    bottom: 0
}

.handleCode .foot {
    height: 36px;
    color: #fff;
    padding-top: 10px;
    text-align: center
}

.handleCode .foot span {
    width: 110px;
    height: 36px;
    margin: 0 5px;
    text-align: center;
    line-height: 36px;
    display: inline-block;
    cursor: pointer;
    font-family: Microsoft Yahei;
    font-size: 14px
}

.handleCode .foot .copy,.handleCode .foot .sure {
    color: #fff;
    background: #0078B3
}

.handleCode .foot .close {
    color: #fff;
    background: #5A5A5A
}

.ks-remark {
    z-index: 9999;
    overflow: hidden;
    position: absolute;
    background: #F0F0F0;
    left: -9999px;
    top: -9999px
}

.ks-remark .head {
    height: 20px;
    line-height: 20px;
    padding: 5px 15px;
    background: #fff
}

.ks-remark .head .close {
    float: right;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -54px -72px
}

.ks-remark .head .title {
    color: #333;
    height: 20px;
    display: block;
    font-size: 14px;
    font-family: Microsoft Yahei
}

.ks-remark .head .title .icon {
    width: 18px;
    height: 20px;
    float: left;
    margin: 0 2px
}

.ks-remark .head .title .name {
    float: left
}

.ks-remark .body {
    color: #333
}

.ks-remark .foot .close,.ks-remark .foot .sure {
    width: 100px;
    height: 36px;
    line-height: 36px;
    display: block;
    cursor: pointer;
    color: #fff;
    text-align: center;
    font-family: Microsoft Yahei;
    font-size: 14px
}

.shareCode {
    background: #fff
}

.shareCode .head {
    padding: 7px 8px
}

.shareCode .head .title .icon {
    margin: 0;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -320px -92px
}

.shareCode .body {
    border: 10px solid #E6E6E6;
    border-bottom: none;
    padding: 30px 0
}

.shareCode .body .item {
    height: 28px;
    line-height: 28px;
    margin-bottom: 6px
}

.shareCode .body .item input[type=text] {
    border: 1px solid #DEDEDE;
    height: 24px;
    width: 300px
}

.shareCode .body .item b {
    color: #999;
    padding-left: 5px;
    font-weight: 400
}

.shareCode .body .item select {
    height: 24px;
    border: 1px solid #DEDEDE
}

.shareCode .body .item input[type=file] {
    width: 70px;
    float: left;
    cursor: pointer
}

.shareCode .body .item .th-x {
    width: 132px;
    height: 100%;
    float: left;
    text-align: right
}

.shareCode .body .item .th-y {
    float: left
}

.shareCode .body .thumb {
    width: 158px;
    height: 158px;
    border: 1px solid #EBEBEB;
    overflow: hidden;
    margin-left: 132px;
    background-size: contain;
    background-image: url(./images/diy/thumb.gif);
    background-repeat: no-repeat;
    background-position: center
}

.shareCode .body .thumb img {
    width: 100%
}

.shareCode .foot {
    border: 10px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    height: 56px;
    background: #FAFAFA;
    overflow: hidden
}

.shareCode .foot .sure {
    width: 90px;
    height: 30px;
    background: #0078B3;
    text-align: center;
    line-height: 30px;
    margin: 14px 132px
}

.clearCode {
    width: 360px;
    height: 160px
}

.clearCode .head .title .icon {
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -71px -71px
}

.clearCode .body {
    padding: 25px
}

.clearCode .body p {
    text-align: center
}

.clearCode .foot {
    width: 210px;
    height: 62px;
    padding: 0 75px
}

.clearCode .foot .close,.clearCode .foot .sure {
    float: left
}

.clearCode .foot .sure {
    background: #C80D0D;
    margin-right: 10px
}

.clearCode .foot .close {
    background: #5A5A5A
}

#control {
    width: 290px
}

.overCode {
    width: 480px;
    height: 200px
}

.overCode .head .title .icon {
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -90px -72px
}

.overCode .body {
    padding: 20px
}

.overCode .body p {
    text-align: left;
    line-height: 22px
}

.overCode .body p img {
    vertical-align: bottom
}

.overCode .foot .close {
    margin: 0 auto;
    background: #C80D0D
}

.exportCode {
    padding-bottom: 0
}

.exportCode .foot {
    color: #797979;
    padding-top: 0;
    padding-left: 2.5%;
    height: 30px;
    line-height: 30px;
    text-align: left
}

.exportCode .foot strong {
    color: #FD3636;
    font-weight: 400
}

#customer {
    width: 268px;
    position: fixed;
    right: 17px;
    bottom: -180px;
    z-index: 99;
    box-shadow: 0 5px 10px #ccc
}

#customer .c-hd {
    height: 26px;
    line-height: 26px;
    background: #F58F22;
    color: #fff;
    padding-left: 12px
}

#customer .c-hd .name {
    float: left
}

#customer .c-hd .close {
    width: 18px;
    height: 18px;
    margin: 4px;
    float: right;
    cursor: pointer;
    font-size: 16px;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat 0 -72px
}

#customer .c-bd {
    padding: 20px 22px;
    background: #fff
}

#customer .c-bd p {
    color: #666;
    line-height: 22px
}

#customer .c-ft {
    height: 30px;
    padding: 9px 45px;
    background: #F5F5F5
}

#customer .c-ft a,#customer .c-ft span {
    width: 82px;
    height: 28px;
    display: block;
    float: left;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    -moz-border-top-left-radius: 2px;
    -moz-border-top-right-radius: 2px
}

#customer .c-ft a {
    color: #4CB7CB;
    border: 1px solid #4CB7CB;
    margin-right: 10px
}

#customer .c-ft span {
    color: #888;
    border: 1px solid #888
}

#tips {
    width: 180px;
    height: 36px;
    line-height: 18px;
    padding: 9px;
    position: fixed;
    right: 0;
    bottom: -54px;
    background: #FF9;
    opacity: .8;
    filter: alpha(opacity=80);
    z-index: 999;
    color: #333;
    box-shadow: 0 5px 10px #FF9
}

#multiple-panel {
    border: 1px solid #A4A4A4;
    background: #EAEAEA;
    position: relative;
    z-index: 3;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}

#multiple-panel .p-hd {
    height: 0
}

#multiple-panel .p-bd input {
    box-shadow: 1px 1px 2px 1px #eee inset
}

#multiple-panel .p-bd .ks-tabs-bar {
    height: 21px;
    overflow: hidden;
    background: url(./images/diy/bar-grey.gif?v=20170718) repeat-x 0 -160px
}

#multiple-panel .p-bd .ks-tabs-bar .ks-tabs-tab {
    height: 21px;
    padding: 0 8px;
    color: #363636;
    line-height: 21px;
    overflow: hidden;
    float: left;
    text-align: center;
    cursor: pointer;
    border-right: 1px solid #A4A4A4
}

#multiple-panel .p-bd .ks-tabs-bar .ks-tab-selected {
    color: #363636;
    background-color: #EAEAEA
}

#multiple-panel .p-bd .ks-tabs-close {
    width: 20px;
    height: 20px;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -130px -193px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer
}

#multiple-panel .p-bd .ks-tabs-body {
    height: 258px;
    color: #e3e3e3;
    display: none;
    max-height: 420px;
    overflow: auto
}

#multiple-panel .p-bd .single-panel {
    width: 100%;
    padding: 8px 0 0
}

#multiple-panel .p-bd .single-panel ul {
    width: 310px;
    margin: 0 auto
}

#multiple-panel .p-bd .single-panel ul li {
    margin-bottom: 6px;
    border-bottom: 1px solid #fff
}

#multiple-panel .p-bd .single-panel ul li:last-child {
    margin-bottom: 0
}

#multiple-panel .p-bd .single-panel ul li .box {
    height: 30px;
    padding-bottom: 6px;
    border-bottom: 1px solid #C8C8C8
}

#multiple-panel .p-bd .single-panel ul li .box .thumb {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 5px
}

#multiple-panel .p-bd .single-panel ul li .box .thumb img {
    width: 30px;
    height: 30px
}

#multiple-panel .p-bd .single-panel ul li .box .text {
    width: 190px;
    height: 24px;
    float: left;
    margin-top: 3px;
    margin-right: 5px
}

#multiple-panel .p-bd .single-panel ul li .box .text input {
    width: 100%;
    height: 100%
}

#multiple-panel .p-bd .single-panel ul li .box .btns {
    width: 80px;
    height: 20px;
    float: right;
    margin-top: 5px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span {
    width: 20px;
    height: 20px;
    float: left;
    cursor: pointer;
    display: block;
    background-image: url(./images/diy/icon-grey.png?v=20170718);
    background-repeat: no-repeat
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.up {
    background-position: -143px -72px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.up:hover {
    background-position: -234px -73px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.down {
    background-position: -161px -72px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.down:hover {
    background-position: -255px -73px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.del {
    background-position: -179px -71px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.del:hover {
    background-position: -297px -73px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.add {
    background-position: -198px -71px
}

#multiple-panel .p-bd .single-panel ul li .box .btns span.add:hover {
    background-position: -277px -73px
}

#multiple-panel .p-bd .batch-panel {
    width: 100%;
    padding: 8px 0 0
}

#multiple-panel .p-bd .batch-panel textarea {
    width: 310px;
    height: 258px;
    display: block;
    margin: 0 auto
}

#multiple-panel .p-ft {
    height: 22px;
    line-height: 22px;
    position: relative;
    margin: 7px
}

#multiple-panel .p-ft .total {
    margin-left: 12px
}

#multiple-panel .p-ft .clear,#multiple-panel .p-ft .sure {
    width: 38px;
    height: 20px;
    display: block;
    background: #f5f5f5;
    text-align: center;
    line-height: 20px;
    position: absolute;
    left: 126px;
    top: 0;
    cursor: pointer;
    color: #363636;
    border: 1px solid #9E9E9E
}

#multiple-panel .p-ft .clear:hover,#multiple-panel .p-ft .sure:hover {
    background: #fff
}

#multiple-panel .p-ft .clear {
    left: 170px
}

.exampleboxs {
    z-index: 9999;
    overflow: hidden;
    background: #E6E6E6
}

.exampleboxs .head {
    padding: 8px 10px;
    height: 20px;
    line-height: 20px;
    cursor: move;
    background: #fff
}

.exampleboxs .head .title {
    height: 20px;
    line-height: 18px;
    font-size: 14px;
    font-family: Microsoft Yahei;
    color: #333;
    display: block;
    overflow: hidden;
    position: relative
}

.exampleboxs .head .title .icon {
    width: 20px;
    height: 18px;
    float: left;
    display: block;
    background-image: url(./images/diy/icon-grey.png?v=20170718);
    background-repeat: no-repeat;
    background-position: -234px 0
}

.exampleboxs .head .close {
    width: 20px;
    height: 20px;
    background: url(./images/diy/icon-grey.png?v=20170718) no-repeat -54px -72px;
    color: #999;
    float: right;
    font-weight: 700;
    cursor: pointer
}

.exampleboxs .body ul {
    width: 680px;
    height: 400px;
    padding: 20px;
    overflow: hidden
}

.exampleboxs .body ul li {
    width: 160px;
    height: 190px;
    margin: 5px;
    float: left
}

.exampleboxs .body ul li .pic {
    width: 160px;
    height: 160px;
    cursor: pointer;
    background: #fff
}

.exampleboxs .body ul li .pic:hover {
    box-shadow: 0 0 6px #999
}

.exampleboxs .body ul li .tit {
    width: 160px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333
}

.ks-overlay-mask-shown {
    background: #000;
    opacity: .5;
    filter: alpha(opacity=50)
}

.ks-overlay {
    position: absolute;
    left: -9999px;
    top: -9999px
}

.ks-overlay-hidden {
    visibility: hidden
}

.ks-overlay-mask-hidden {
    display: none
}

.ks-overlay-shown {
    visibility: visible
}

.ks-overlay-mask {
    display: block
}
#login_panel.hide{
    display: none;
}
#login_panel .layui-form {
    margin-top: 30px;
}