*{margin:0px;padding:0px;word-break: break-all;word-wrap: break-word;}
li,ul{ list-style:none;}
body,input,select,textarea,button{font-size: 12px;color:#333;font-family:Arial,'hiragino sans gb','microsoft yahei ui','microsoft yahei',simsun,sans-serif;}
a{text-decoration:none;color:#333;}
.clear{ clear:both; overflow:hidden;}
.clearfix{display:block;*zoom:1}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden}
.h-20{height:20px;}
.h-10{height:10px;}
.hide{ display:none !important;}
.show{ display:block !important;}
.d-inline-block{ display:inline-block;}
iframe{border:0px;}
.f-l{ float:left;}
.f-r{ float:right;}
.opacity0{filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity: 0;  opacity: 0;}

#pageLoad{width:100%;height:100%; position:absolute;top:15px;left:0; background:#fff;}
#pageLoad .icon-load{width:300px;height:300px; position:fixed;left:50%;margin-left:-50px;top:50%;margin-top:-150px; background:url(../images/page-loading.gif) no-repeat 50% 50%;}

.drag-pageHead{height:44px; line-height:44px; background:#fff;border-bottom:1px solid #dbdbdb; position:fixed;color:#7d8695; z-index:999;width:100%;top:0;}
.drag-pageHead .f-l span{float:left; margin:0px 15px; cursor:pointer;font-size:12px; padding:0 15px;height:30px; line-height:30px;margin-top:7px;border-radius:3px;}
.drag-pageHead .f-l .active{ background:#f6f6f6;}
.drag-pageHead .f-l span:hover{ background:#f6f6f6;}
.drag-pageHead .f-l .icon-color{background:url(../images/icon-color.png) no-repeat;width:21px;height:21px;margin:4px 10px 0 0;}
.drag-pageHead .f-l a{color:#7d8695;}
.drag-pageHead .f-l i{ float:left; margin-right:6px; font-weight:bold;}

.drag-pageHead .f-r .select{ padding:0px 15px; font-size:12px;border-radius:3px;height:30px; line-height:30px; float:left; cursor:pointer;color:#7d8695;width:140px;background:#f6f6f6; margin:7px 15px 0px 15px;}
.drag-pageHead .f-r i{ float:left; margin-right:5px;}
.drag-pageHead .f-r .button{ float:left; padding:0 20px; cursor:pointer;background:#21b384;color:#fff;height:30px;line-height:30px;margin:6px 0 0 15px;border-radius:4px; transition: .3s;}
.drag-pageHead .f-r .default{background:#fff;border:1px solid #ebebeb; color:#7d8695;}
.drag-pageHead .f-r .button:hover{background:#19a97b;}
.drag-pageHead .f-r .default:hover{background:none;}
.drag-pageHead .f-r .drag-i-list2{ font-size:14px; margin:0px 10px 0px 0px;float:left;}
.drag-pageHead .f-r .drag-i-xia{float:right; font-size:12px;margin-top:2px;}

.drag-pageHead .select-box{width:200px;height:100%; position:fixed;border-left:1px solid #dbdbdb;right:0;top:45px; background:#fff; z-index:999; font-size:14px; display:none;}

.drag-pageHead .select-box .folder-name{ padding:0px 20px; cursor:pointer;}
.drag-pageHead .select-box .folder-name-on{color:#7d8695;}
.drag-pageHead .select-box .folder-name:hover{ background:#f9f9f9;}
.drag-pageHead .select-box .folder-box{ }
.drag-pageHead .select-box .folder-box a{padding:0px 20px; display:block; font-size:12px;color:#7d8695; height:34px; line-height:34px; overflow:hidden;}
.drag-pageHead .select-box .folder-box a:hover{ background:#f9f9f9;}
.drag-pageHead .select-box .folder-box .drag-font{ margin-left:20px;}
.drag-pageHead .select-box .drag-font{ font-size:18px;width:25px; float:left;}
.drag-pageHead .select-box a:hover{ background:#f9f9f9;}
.drag-pageHead .select-box .folder-box-top{ display:block;}

.drag-pageHead .select-box .folder-box-top .drag-font{ margin-left:0px;}

.head-preview{ position:absolute;top:44px;right:95px;border-radius:4px;width:280px; background:#fff;border:1px solid #dbdbdb; box-shadow:0 1px 4px rgba(0,0,0,0.05); display:none;}
.head-preview:before{ content:'';width:11px;height:7px; background:url(../images/arrow-up.png) no-repeat; position:absolute;left:50%;margin-left:-5px;top:-7px;}
.head-preview .tips{ padding:0 20px;}
.head-preview .p-box{height:240px; overflow-y:auto;}
.head-preview li{ height:32px; line-height:32px; cursor:pointer;padding:0 20px; overflow:hidden;}
.head-preview li:hover{ background:#f9f9f9; color:#525e71;}

.pageLeft-set{width:500px;height:100%; position:fixed;left:-500px; display:none;top:45px; z-index:99; background:#fff;border-right:1px solid #dbdbdb;}
.pageLeft-set iframe{ position:absolute;top:0;left:0;width:100%;height:100%;}

#pageCont{ position:relative; overflow:hidden;}
#pageCont .x-axis{border-bottom:1px solid #dbdbdb;height:14px; overflow:hidden;}
#pageCont .x-axis span{height:14px;width:99px;float:left;border-right:1px solid #dbdbdb; background:url(../images/x.png) repeat-x; color:#9b9b9b;}
#pageCont .x-axis span em{ font-size:10px;-webkit-transform:scale(0.8); font-style:normal; display:block; float:left;}

.wraper{ padding-left:200px;margin-top:45px; position:relative;}
.pageLeft{ position:absolute;left:0;top:0;width:199px; background:#fff;height:100%;border-right:1px solid #dbdbdb;}
.pageLeft .btn-close{width:18px;height:40px; position: absolute;left:199px;top:50%;margin-top:-21px;background:#fff; z-index: 9;border:1px solid #dbdbdb;border-left:0;border-radius:0px 4px 4px 0; text-align: center;line-height:40px; cursor: pointer;color:#9b9b9b;}
.pageLeft .btn-close-on{background:#21b384;color:#fff;border:1px solid #21b384;border-left:0;}
.pageLeft .tab-tips-bg{width:100%;height:100%; position:absolute;left:40px; background:#ffae77; display:none;filter:alpha(opacity=20); -moz-opacity:0.2; -khtml-opacity: 0.2;  opacity: 0.2;}

.pageLeft .tab{width:40px;height:100%; background:#f8f8f8; position:absolute;left:0;top:0; z-index:1;}
.pageLeft .tab .line{width:1px;height:100%; position:absolute;right:0;top:0; background:#dbdbdb;}
.pageLeft .tab ul{ padding-top:10px;}
.pageLeft .tab li{margin-left:5px;border:1px solid;border-right:0px; border-color:#f8f8f8;border-radius:3px 0px 0px 3px; text-align:center; padding:12px 0px 10px 0px;color:#7d8695; cursor:pointer; line-height:20px;}
.pageLeft .tab li i{ display:block;font-weight:bold;}
.pageLeft .tab .active{border-color:#dbdbdb; background:#fff; position:relative; z-index:1;}

.pageLeft .tab .disabled{color:#b2b2b2;text-shadow:0 1px 1px #fff; background:#ebebeb;}

.pageLeft .tabbox{ padding-left:40px; position:relative;height:100%; }
.pageLeft .tabbox .box-tips{ margin:10px; color:#e00; background:#; }
.pageLeft .tabbox .small-tit{height:34px; line-height:34px;color:#7d8695; cursor:pointer; margin:0 10px;border-bottom:1px solid #dbdbdb;}
.pageLeft .tabbox .small-tit i{font-size:14px; float:right;}
.pageLeft .tabbox ul{ padding:10px;}
.pageLeft .tabbox li{width:50%;float:left; cursor:pointer;border-radius:3px; text-align:center; padding:10px 0px; line-height:22px;color:#7d8695;}
.pageLeft .tabbox li i{ display:block;font-weight:bold; font-size:18px;}
.pageLeft .tabbox li .fz19{ font-size:19px;}
.pageLeft .tabbox li .fz21{ font-size:21px;}
.pageLeft .tabbox li:hover{ background:#f8f8f8;}

.pageLeft .icon-format{width:19px;height:22px; display:block;margin:0 auto;}
.pageLeft .icon-format1{ background:url(../images/icon-format1.png) no-repeat;}
.pageLeft .icon-format2{ background:url(../images/icon-format2.png) no-repeat;}
.pageLeft .icon-format3{ background:url(../images/icon-format3.png) no-repeat;}
.pageLeft .icon-format4{ background:url(../images/icon-format4.png) no-repeat;}


#main{ position:absolute;top:0;left:0;height:100%;width:100%;}

.drag-moduleBoxBg{width:100%;height:100%;background:rgba(0,0,0,0.3); position:fixed;top:0;left:0; z-index:9990;}
.head-gray-bg{width:100%;height:44px;background:#000;filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity: 0.3;  opacity: 0.3; position:fixed;top:0;left:0; z-index:9990; display:none;}

.drag-windowBox{width:900px;height:600px; position:fixed;top:0;left:50%;top:50%;margin-top:-300px;margin-left:-450px; background:#fff;border-radius:5px; z-index:9999; display:none; overflow:hidden;}
.drag-windowBox .tab{height:44px; line-height:44px; background:#f5f5f5;}
.drag-windowBox .tab li{float:left; width:33.3%; text-align:center; cursor:pointer; font-size:14px;color:#525252;}
.drag-windowBox .tab .on{ background:#fff;}

.drag-windowBox .title{height:44px; line-height:44px;padding:0px 20px;border-bottom:1px solid #e2e2e2; background:#fff; font-size:14px;}

.drag-windowBox .title .close{width:30px;height:30px; text-align:center; line-height:30px;float:right; cursor:pointer;color:#929292;  -webkit-transition:.3s; transition:.3s;margin-top:7px;}
.drag-windowBox .title .close:hover{background:#f2f2f2;border-radius:50%;}


.drag-selectModule .small-tit{height:24px; line-height:24px;color:#929292; padding:0px 20px;margin-top:15px; overflow:hidden;}

.drag-selectModule .line{height:15px;border-bottom:1px dashed #e2e2e2; margin:0px 20px;}

.drag-selectModule li{width:96px; padding:15px 0px 8px 0px; background:#f5f5f5; text-align:center; line-height:28px;float:left;margin:10px 0px 10px 20px;border-radius:5px; color:#929292; cursor:pointer;}
.drag-selectModule li .drag-font{ display:block; font-size:26px; line-height:28px;}
.drag-selectModule li:hover{ background:#21B384; color:#fff;}

.drag-selectModule .foot{border-top:1px solid #e2e2e2; padding:15px;}
.drag-selectModule .foot #determine,.drag-selectModule .foot #modify{ padding:0px 40px;height:40px; line-height:40px; cursor:pointer; background:#21B384;color:#fff;border-radius:3px; text-align:center;float:left; font-size:14px; margin-right:15px;}
.drag-selectModule .foot .cancel{ padding:0px 40px;height:38px; line-height:38px; cursor:pointer;color:#5d5d5d;border-radius:3px; text-align:center;float:left; font-size:14px; margin-right:15px;border:1px solid #e2e2e2;}

.drag-buttonBox{ background:#f5f5f5; padding:20px;border-top:1px solid #e2e2e2;height:40px; overflow:hidden; text-align:center;}
.drag-buttonBox .drag-btn-main,
.drag-buttonBox .drag-btn-gray{float:left;}
.drag-buttonBox .drag-btn-gray{ margin-left:15px;}

#moduleTypeHtml{ background:#f5f5f5;}

#myEditor{height:300px; overflow:auto;}


.select-title li{width:50%;float:left;}
.select-title li > .li-ct{ margin:5px 10px 10px 0px; padding:10px;border:1px solid #ebebeb;}
.select-title li.active > .li-ct{border:1px solid #21b384;}
.select-title li img{width:100%; display:block; overflow:hidden;}


.drag-setupBox .tab{height:44px; line-height:44px; font-size:14px; background:#f5f5f5;color:#929292; overflow:hidden;}
.drag-setupBox .tab li{float:left; text-align:center; cursor:pointer;}
.drag-setupBox .tab .on{ background:#fff;color:#333;}

.drag-tableStyle{ padding:10px 30px 30px 0px; font-size:12px;}
.drag-tableStyle td{ line-height:24px; position:relative; padding-top:20px;color:#929292;}
.drag-tableStyle .td-tit{ text-align:right; line-height:40px; color:#929292; white-space:nowrap; padding:20px 15px 0px 30px;width:40px;}
.drag-tableStyle .td-textbox{ padding-right:32px;}
.drag-tableStyle .textbox,
.drag-tableStyle textarea{width:100%;border:1px solid #e2e2e2;border-radius:3px;color:#525252; padding:0px 15px; -webkit-transition:.3s; transition:.3s; font-size:13px;}
.drag-tableStyle .textbox:focus,
.drag-tableStyle textarea:focus{border:1px solid #21B384; box-shadow:0 1px 3px #a8dbca; outline:none;}

.drag-tableStyle .textbox{height:38px; line-height:38px;}
.drag-tableStyle .text-color{ padding-right:57px;}

.drag-tableStyle .text-color .textbox{ padding-left:40px;}

.drag-tableStyle textarea{height:80px; line-height:24px;padding-top:10px; padding-bottom:10px;}

.drag-tableStyle .band-button{ padding-right:162px;}
.drag-tableStyle .band-button input[type=button]{width:120px; position:absolute;right:0;top:20px;}

.drag-tableStyle .drag-second-button{ float:left;}

.drag-tableStyle .inputInTex{ position:relative; float:left; margin-right:15px;}
.drag-tableStyle .inputInTex .textbox{ margin:0px; padding-left:40px; width:70px; text-align:center;}
.drag-tableStyle .inputInTex font{ position:absolute;left:5px;top:1px; line-height:38px;width:30px;color:#c2c2c2; text-align:center;}

.drag-tableStyle .title{height:23px; line-height:23px; overflow:hidden; font-size:13px;color:#525252;}


.drag-btn-main,
.drag-btn-vice,
.drag-btn-normal,
.drag-btn-gray{ padding:0px 30px; background:none; cursor:pointer; border-radius:3px; text-align:center; display:inline-block;outline:none; cursor:pointer; font-size:14px;}

.drag-btn-main{height:40px; line-height:40px;background:#21B384;color:#fff; border:0px; }

.drag-btn-vice{height:38px; line-height:38px; padding:0px 30px;border:1px solid #21B384;color:#21B384;}

.drag-btn-normal{height:38px; line-height:38px; padding:0px 30px;border:1px solid #e2e2e2;color:#525252;}
.drag-btn-gray{height:40px; line-height:40px; background:#c2c2c2;color:#fff;border:0px;}

/*开关*/
.drag-checkbox-style{width:46px;height:28px; background:#d2d2d2;border-radius:50px; position:relative; cursor:pointer; -webkit-transition:0.3s; transition:0.3s;}
.drag-checkbox-style i{width:24px;height:24px; background:#fff;border-radius:50%; box-shadow: 0 0 6px rgba(0,0,0,0.2); position:absolute;top:2px;right:20px; -webkit-transition:0.3s; transition:0.3s;}

.drag-checked{ background:#34bd75;}
.drag-checked i{right:2px;}

.drag-select-style{ position:relative; z-index:9;}
.drag-select-style .selected{ height:38px; line-height:38px;border:1px solid #e2e2e2;position:relative; background:#fff; padding:0px 30px 0px 15px; overflow:hidden; font-size:13px;color:#525252; cursor:pointer; -webkit-transition:.3s; transition:.3s;border-radius:3px;}
.drag-select-style .drag-i-xia{ position:absolute;right:15px;top:50%;margin-top:-6px; line-height:12px; font-size:12px;color:#b2b2b2; z-index:1; -webkit-transition:.3s; transition:.3s;}

.drag-select-style .option-wrap{width:100%; position:absolute;left:0;top:0;  z-index:1;top:41px;display:none; }
.drag-select-style .option-box{background:#fff;color:#525252;text-align:center;border:1px solid #e8e8e8;border-radius:3px; box-shadow:0 1px 8px rgba(0,0,0,0.1); }

.drag-select-style .option{ cursor:pointer; line-height:38px;height:38px; overflow:hidden; font-size:13px;}
.drag-select-style .option:hover{ background:#f8f8f8;}

.drag-selected{ z-index:99;}
.drag-selected .selected{border:1px solid #21b384;}
.drag-selected .drag-i-xia{color:#21b384;transform:rotate(-180deg);
-ms-transform:rotate(-180deg); 	
-moz-transform:rotate(-180deg); 
-webkit-transform:rotate(-180deg); 
-o-transform:rotate(-180deg);}

input[type="radio"]{width:18px;height:18px; -webkit-appearance:none; background-image:url(../images/radio.png); background-repeat:no-repeat; background-position:-37px 0px; outline:none;}
input[type="radio"]:checked{ background-position:0 0;}
input[type="radio"]:disabled{filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6;  opacity: 0.6;}

.clickMove .click-dot{ position:absolute;left:0;top:-6px;width:18px;height:18px; background:#21B384;border-radius:50%; cursor:pointer;}
.clickMove .bg-bar{width:280px;height:6px; background:#ebebeb;border-radius:30px; position:relative;float:left;}
.clickMove .bg-bared{ position:absolute;left:0;top:0;height:100%; background:#b4f0dd;border-radius:30px;}
.clickMove .move-percent{ float:left;}


.block-st-3{width:33.33%;}
.d-none{ display:none;}

.text-error{border:1px solid #ef3939 !important;color:#ef3939 !important;}


.drag-module-btn,
.drag-format-btn{width:72px;height:72px; line-height:32px;border-radius:6px; cursor:pointer;position:fixed;bottom:40px;left:40px; box-shadow:0 1px 6px rgba(0,0,0,0.2); text-align:center; z-index:999;}

.drag-module-btn .drag-font,
.drag-format-btn .drag-font{ font-size:24px; display:block; line-height:1;margin-top:11px;height:24px;}

.drag-module-btn{ background:#fff;color:#525252;}
.drag-format-btn{background:#21B384;color:#fff;}

.drag-format-btn{bottom:125px;}

.format-line{height:0; border-top:1px dashed #dbdbdb; overflow:hidden;margin:15px 0px;}

/*选择版式*/
.selectFormat{ padding:15px 30px 30px 15px;}
.selectFormat li{width:25%;float:left;}
.selectFormat .style{ margin:15px 0px 0px 15px;border:1px solid #e8e8e8; cursor:pointer; padding:30px;}
.selectFormat .style img{width:100%; display:block; overflow:hidden;}

.selectFormat .active{border:1px solid #21b384; background:url(../images/active.png) no-repeat 100% 100%; }

.formatBox .box{ padding:30px 30px 30px 262px; position:relative;min-height:242px;color:#929292;}
.formatBox .box .image{width:190px;height:190px; border:1px solid #ebebeb; position:absolute;left:30px;top:30px;}
.formatBox .box .image img{width:100%; display:block; overflow:hidden;}

.formatBox .box .name{ line-height:44px;height:44px; font-size:14px;color:#525252; overflow:hidden;}

.formatBox .box .textbox{ margin:0px 15px;float:left;}
.formatBox .box .row{ line-height:34px; padding:10px 0 0 90px; font-size:14px; position: relative;min-height:34px;}

.formatBox .box .row .tit{width:75px;float:left; text-align:right; position: absolute;left:0;top:10px;}
.formatBox .box .row label{ margin:0px 15px; float:left; cursor:pointer;}
.formatBox .box .row label input{margin:7px 5px 0px 0px;float:left;}
.formatBox .box .row-image{max-height:142px;margin-left: 15px; overflow: hidden;min-height: 0px;}
.formatBox .box .row-image img{width:142px;}

.formatBox .box .drag-checkbox-style{float:left; margin:3px 0px 0px 15px;}

.formatBox .box input[type=text],
.formatBox .box select{height:34px; line-height:34px;border:1px solid #e8e8e8;width:140px; text-align:center; outline:none; -webkit-transition:.3s; transition:.3s;color:#525252; font-size:14px;}
.formatBox .box input[type=text]:focus,
.formatBox .box select:focus{border:1px solid #21b384;}


.formatBox .box .clickMove{ margin-left:15px;float:left;}
.formatBox .box .clickMove .bg-bar{ float:left;margin:14px 15px 0px 0px;}

.formatBox .box .text-color input{ padding-left:20px;}

.formatBox .box .inputInTex{ position:relative; float:left; margin-left:15px;}
.formatBox .box .inputInTex input[type=text]{ margin:0px; padding-left:20px; color:#525252;width:75px; }
.formatBox .box .inputInTex font{ position:absolute;left:5px;top:1px;height:34px; line-height:34px;width:34px;color:#b2b2b2; text-align:center;}

#textTips{ position:fixed;left:300px;top:30px; line-height:18px; font-size:12px; padding:7px 15px 7px 30px;color:#ff0000; background:#fff0f0 url(../images/error.png) no-repeat 15px 50%;border:1px solid #ffd7d7;border-radius:3px;}
#textTips:after{ content:'';width:9px;height:5px; position:absolute;bottom:-5px;left:50%;margin-left:-5px; background:url(../images/error-arrow.png) no-repeat;}


.drag-tips{ line-height:22px; padding:8px 15px; background:#fffbe6;color:#664810;border:1px solid #fff5c2;}

.drag-tips .drag-font{float:left;}
.drag-tips .drag-i-tuli{color:#f5bd00; margin-right:10px;}


.style-list li{width:25%;float:left;}
.style-list li .box{margin:20px 0px 0px 20px;border:1px solid #ebebeb; text-align:center;}
.style-list li .box img{width:100%; display:block; overflow:hidden;}
.style-list li.on .box{border:1px solid #21B384;}


.realTimeBox{width:319px; position:fixed;left:-320px; top:0; background:#fff; z-index:99;height:100%; border-left:1px solid #dbdbdb;}

.realTimeBox .title{height:44px; line-height:44px;padding:45px 15px 0px 20px;border-bottom:1px solid #dbdbdb; background:#fff; font-size:14px;}

.realTimeBox .title .close{width:30px;height:30px; text-align:center; line-height:30px;float:right; cursor:pointer; -webkit-transition:.3s; transition:.3s;margin-top:7px;}
.realTimeBox .title .drag-i-guanbi{ font-size:14px;}
.realTimeBox .title .close:hover{background:#f6f6f6;border-radius:50%;}


.realTimeBox2{width:700px;height:440px; position:fixed;top:50%;margin-top:-220px;left:50%;margin-left:-357px; z-index:999; box-shadow:0 3px 15px rgba(0,0,0,0.1); overflow:hidden; background:#fff; display:none;}
.realTimeBox2 .title{height:40px; line-height:40px; overflow:hidden;}
.realTimeBox2 .title strong{ font-size:14px; padding-left:20px;}
.realTimeBox2 .title .close{float:right; padding:0 15px; cursor:pointer;color:#9b9b9b;}
.realTimeBox2 .title .close:hover{color:#323232;}

.realTimeBox2 #realTime2{height:360px;width:100%;}

.selectNumber{height:36px;padding-left:15px;}
.selectNumber .number{width:50px;height:34px; line-height: 34px;border:1px solid #e8e8e8;float:left; text-align: center; color:#323232; cursor: pointer}
.selectNumber .ratio-colon{float:left;margin:0 10px; font-style: normal}
.selectNumber .focus{border:1px solid #21B384;}
.selectNumber .ratiobox{float:left;}

#selectNumberBox{border:1px solid #cbcbcb;width:200px; box-shadow: 0 1px 9px rgba(0, 0, 0, 0.1); position: absolute; display: none;background:#fff;border-radius:4px;margin-top:5px; padding:5px;}
#selectNumberBox:before{width:9px;height:6px; content: '';background:url(../images/arrow-up2.png) no-repeat; position: absolute;top:-6px;left:15px; z-index: 99;}
#selectNumberBox > .option{width:30px;float:left;height:30px;line-height: 30px; text-align: center;font-size:14px; cursor: pointer;color:#666;margin:5px;border-radius:3px;}
#selectNumberBox > .option:hover{background: #f3f3f3;}
#selectNumberBox .active,
#selectNumberBox .active:hover{background:#21B384;color:#fff;}