#main>.wrap{background-color:#fff;position:relative;min-width:1000px;z-index:33}
#header{background-color:#fff}
#footer{margin-top:0;position:relative;}


#font1{text-transform: uppercase;}
#font_box { width: 600px; background-color: #fff; position: fixed; top: 50%; left: 0; right: 0; margin: 0 auto; line-height: 2; box-shadow: rgba(0, 0, 0, .3) 0 0 10px; transform: translate( 0,-50%); height: 600px; z-index: -99; border-radius: 5px; display: block; padding:60px 20px 72px;overflow:visible; text-align:center;}

#font_top{position:relative;z-index:8}

#font_top > b { background-color: #fff; z-index: 2; border-radius: 50%; width: 40px; height: 40px; color: #000; box-shadow: rgba(0,0,0,.3) 0 0 10px; cursor:pointer;font-size:24px;line-height:40px;text-align:center;position:absolute;left:0px;top:-50px}
#set_pro_side {width:500px;text-align:center;float:left;position:absolute;top:-62px;left:50px}
#set_pro_side button{height:40px;border-radius:5px;margin:12px 5px 0;cursor:pointer;border:0 none;padding:0 10px;background-color:#ddd;}
#set_pro_side button.active{background-color:#24C987;color:#fff}


#font_top:before{content:'';display:block;position:absolute;width:640px;background-color:#f8f8f8;height:60px;left:-20px;top:-60px;z-index:-1}


#font_top>button{position:absolute;right:0px;top:-50px;border:0 none;background-color:#24C987;color:#fff;font-size:20px;cursor:pointer;transition:all .3s;padding:7px 10px;}
#font_top > button:hover{opacity:.7}


body.noscroll { position: fixed; height: 100%; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; }
body.noscroll #font_box{z-index: 1000;}
body.noscroll #bg{display:block;}


#svgs>div{display:none;overflow:hidden;margin:0 auto;}
#svgs>div.active{display:block;}



#fontSvg{width:auto;height:100%;}


 div.box_frame { float: none; overflow: visible; width: auto;position:relative; margin:0 auto}


.box_frame > div { position: absolute; display: block; cursor: move; z-index: 6; white-space: nowrap; opacity: 0; line-height: 1.3; outline: 2px dashed #ccc; color: transparent; box-sizing: border-box; }







.box_frame > div.active { opacity: 1; z-index: 10; }
.box_frame button { font-family: "icon" !important; font-size: 1.2rem; font-style: normal; -webkit-font-smoothing: antialiased; display: inline-block; border-radius: 1rem; background-color: #fff; border: 0 none; -moz-osx-font-smoothing: grayscale; position: absolute; color: #24C987; text-align: center; line-height: 2rem;  width: 2rem; height: 2rem; box-shadow: 0 0 .5rem rgba(0,0,0,.5); display:none;}
.box_frame > div.active button{display:block;}
.box_frame .scale:before {
    content: "\e7ca";
}
.box_frame button:first-child{left:-1rem;top:-1rem;}
.box_frame button:nth-child(2){left:-1rem;bottom:-1rem; transform:rotate(90deg)}
.box_frame button:nth-child(3){right:-1rem;top:-1rem; transform:rotate(90deg)}
.box_frame button:last-child{right:-1rem;bottom:-1rem; transform:rotate(45deg)}
#Rotate:before {
    content: "\e771";
}

#loading { z-index: 1002; }


.sp-container { width: 230px; border: 0 none; background-color:#f8f8f8;display:block; }

.sp-picker-container, .sp-palette-container { margin-bottom: -300px; border: 0; width: 208px; }
.sp-hue { left: 95.6%; border: 0 none;}
.sp-color { right: 8%;border: 0 none; }
.sp-dragger { width: 9px; height: 9px; border-radius: 50%; margin: 3px 0 0 3px; }
.sp-slider { height: 11px; border-radius: 50%; border: 0; background-color: #999; margin-top: 5px; }




#font_bottom { height:72px; white-space: nowrap; position: absolute; width: 600px; bottom: 0; left: 20px; }
#font_bottom button{border:0 none;cursor:pointer;background-color:#f8f8f8;transition:color .3s }

#font_input{width:580px;height:32px;float:left;padding:10px;background-color:#f8f8f8;position:relative;z-index:8}
#font{float:left;width:410px;padding:5px 10px;height:22px;font-size:14px;outline:1px solid #ccc;border:0 none;margin-right:10px}
#font_input div{position:absolute;top:-53px;background-color:#eee;border-radius:5px;padding:10px 0 10px 10px;right:0;display:none;}
#font_input div:after{content:'';display:block;position:absolute;width:0;height:0;border-width:10px;border-style:solid;border-color:#eee transparent transparent transparent; bottom:-19px;left:46.5%}
#font_input.active div{display:block;}


#font_input button:hover{color:#24C987;}

#Rotate90,.icon-dayin1{font-size:40px;float:right;margin-top:-3px}
.icon-dayin1{transform:rotate(45deg);font-size:22px;margin:5px 10px 0}



#color_box{width:100%;float:left;margin-top:7px;position:relative;z-index:8}
#color_box>button{border-width:15px;border-style:solid;width:0;height:0;outline:1px solid #ccc;float:left;margin-right:5px;}


#font_input input[type=button]{display:block;float:left;width:32px;height:32px;border:0 none;margin-right:7px;outline:1px solid #ccc;cursor:pointer;}

#font_input input.active{outline-color:#24C987}
#font_input>b{display:block;float:left;height:26px;outline:1px solid #ccc;cursor:pointer;border:3px solid #fff;border-right-width:18px;width:26px;position:relative;}
#font_input>b:after{content:'';display:block;position:absolute;width:0;height:0;border-width:10px 5px ;border-style:solid;border-color:#000 transparent transparent transparent;left:30px;top:10px}


#sys_attrs .error dt,#sys_attrs .error .msg{color:#f00}
#sys_attrs .error dd{display:block;}