body,html{height:100%;overflow:hidden}body{margin:0;color:#222;padding-top:60px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.scrollbar::-webkit-scrollbar{width:12px;height:12px}.scrollbar::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);background:#e5e5e5}.scrollbar::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0);border-radius:10px;background:#fff}.header{position:relative;margin-top:-60px;height:60px;line-height:60px;background-color:#363636;color:#fff}.header .header-container{width:100%;height:100%;min-width:820px;margin:auto}.header .header-logo,.header .header-title{float:left}.header .header-logo,.header .header-logo a{width:200px;text-align:center;color:#fff;font-size:24px}.header .header-title{width:330px}.header .header-title input{width:300px;line-height:38px;border:0;background-color:transparent;color:#fff}.header .header-tools{float:right;padding-right:20px}.header .header-tools>li{float:left;padding:0 20px;cursor:pointer}.main{position:relative;width:100%;height:100%;overflow:hidden}.main .main-left{width:70px;height:100%;position:absolute;left:0;top:0;background-color:#fff;border-right:1px solid #e5e5e5;padding-top:10px;-webkit-box-shadow:0 0 5px #ddd;-moz-box-shadow:0 0 5px #ddd;box-shadow:0 0 5px #ddd}.main .main-left .menu li i{font-size:24px}.main .main-left .menu li{font-size:12px;text-align:center;padding:20px 0;cursor:pointer}.main .main-left .menu li:hover{color:#008ae5}.main .main-left .menu li p{line-height:20px}.main .main-container{position:absolute;left:70px;right:280px;height:100%;background-color:#ecf1f5;overflow:auto}.main .main-right{position:absolute;right:0;top:0;width:280px;height:100%;border-left:1px solid #e5e5e5;font-size:12px;-webkit-box-shadow:0 0 5px #ddd;-moz-box-shadow:0 0 5px #ddd;box-shadow:0 0 5px #ddd}.main .main-right h3{font-weight:bold}.main .main-right .item{margin-top:15px}.main .main-right .zone-panel,.main .main-right .area-panel,.main .main-right .tips-panel{padding:15px 0 0 20px}.main .main-right fieldset{width:214px;font-size:14px;border:1px solid #ccc;padding:15px 10px}.main .main-right .zone-panel .size-width{margin-right:10px}.main .main-right .area-panel{display:none}.main .main-right .input-group-box{height:30px}.main .main-right .input-group{float:left;border:1px solid #e6e6e6;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.main .main-right .input-group input,.input-group label{display:inline-block}.main .main-right .input-group label{padding:0 5px}.main .main-right .input-group input{width:60px;height:36px;line-height:36px;padding-left:5px !important;border-width:0 1px 0 1px;border-color:#f0f0f0}.main .main-right .input-group-box .input-group:first-child{margin-right:10px}.main .main-right .item h5{margin-bottom:5px}.main .main-right #area-link,.main .main-right #area-desc{width:236px}.main .main-right .radio-box{margin-top:10px}.main .main-right .radio-box input{height:auto !important}.main .main-right .radio-box input,.radio-box label{cursor:pointer}.main .main-zone{position:relative;width:100%;height:100%}.main .user-zone{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:950px;height:500px;background-color:#fff;-webkit-box-shadow:0 0 6px #ddd;-moz-box-shadow:0 0 6px #ddd;box-shadow:0 0 6px #ddd}.drsElement{position:absolute;border:1px solid #333}.drsMoveHandle{cursor:move}.dragresize{position:absolute;width:10px;height:10px;font-size:1px;background:#fff;border:2px solid #008ae5;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.dragresize-tl{top:-7px;left:-7px;cursor:nw-resize}.dragresize-tm{top:-7px;left:50%;margin-left:-7px;cursor:n-resize}.dragresize-tr{top:-7px;right:-7px;cursor:ne-resize}.dragresize-ml{top:50%;margin-top:-7px;left:-7px;cursor:w-resize}.dragresize-mr{top:50%;margin-top:-7px;right:-7px;cursor:e-resize}.dragresize-bl{bottom:-7px;left:-7px;cursor:sw-resize}.dragresize-bm{bottom:-7px;left:50%;margin-left:-7px;cursor:s-resize}.dragresize-br{bottom:-7px;right:-7px;cursor:se-resize}.area-del{position:absolute;top:5px;right:5px;width:18px;height:18px;font-size:18px;line-height:18px;background-color:#fff;text-align:center;cursor:pointer;display:none}.drsElement{position:absolute;border:1px solid rgba(0,140,170,0.5);background-color:rgba(127,237,218,.5)}.drsElement:hover,.drsElement.selected{border:2px solid #008ae5;background-color:rgba(0,180,219,.5)}.layui-btn{background-color:#008ae5}.set-zone-box{padding:25px 50px 0 50px}.set-zone-box .item{margin-bottom:15px}.set-zone-box .item h5{margin-bottom:10px}.set-zone-box .item input{line-height:38px}.set-zone-box .btn-item .confirm{padding:0 30px;width:100%;margin-top:10px}.set-zone-box .layui-col-md6:first-child{margin-right:20px}.set-zone-box .layui-col-md6{width:255px}.zone-preview{position:fixed;top:0;left:0;width:100%;height:100%;z-index:99999;overflow:scroll;background-color:#fff}.zone-preview .preview-close{position:fixed;top:20px;right:50px;font-size:48px;width:50px;height:50px;line-height:50px;color:#008ae5;cursor:pointer;background-color:rgba(255,255,255,0.3)}.get-code-box{padding:25px}.get-code-box .code-text{width:100%;height:260px;resize:none;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:1px solid #e6e6e6}.get-code-box .btn-item{text-align:right;margin-top:10px}.get-code-box .btn-item button{padding:0 20px}