/* latin */
@font-face {
  font-family: 'Cabin Sketch';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Sketch Regular'), local('CabinSketch-Regular'), url(/fonts/fonts/QGYpz_kZZAGCONcK2A4bGOj8mNhN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Annie Use;src: url("/fonts/annieuseyourtelescope.ttf")
}
@font-face {
  font-family: Architects;src: url("/fonts/ArchitectsDaughter.ttf")
}
@font-face {
  font-family: Black Ops One;src: url("/fonts/blackopsone.ttf")
}
@font-face {
  font-family: Bungee Inline;src: url("/fonts/BungeeInline.ttf")
}
@font-face {
  font-family: Eater;src: url("/fonts/Eater.ttf")
}
@font-face {
  font-family: Freckle Face;src: url("/fonts/FreckleFace.ttf")
}
@font-face {
  font-family: Irish Grover;src: url("/fonts/IrishGrover.ttf")
}
@font-face {
  font-family: Michroma;src: url("/fonts/Michroma.ttf")
}
@font-face {
  font-family: Moon Dance;src: url("/fonts/MoonDance.ttf")
}
@font-face {
  font-family: Nosifer;src: url("/fonts/Nosifer.ttf")
}
@font-face {
  font-family: Open Sans;src: url("/fonts/opensans.ttf")
}
@font-face {
  font-family: Orbitron;src: url("/fonts/Orbitron.ttf")
}
@font-face {
  font-family: Qwitcher Grypen;src: url("/fonts/QwitcherGrypen.ttf")
}
@font-face {
  font-family: Rammetto One;src: url("/fonts/RammettoOne.ttf")
}
@font-face {
  font-family: Stylish;src: url("/fonts/Stylish.ttf")
}
@font-face {
  font-family: Swanky Moo Moo;src: url("/fonts/swankyandmoomoo.ttf")
}
@font-face {
  font-family: Syncopate;src: url("/fonts/Syncopate.ttf")
}
@font-face {
  font-family: Turret Road;src: url("/fonts/TurretRoad.ttf")
}



#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 108px;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_color {width:500px;text-align:center;float:left;}
#set_pro_color dt{display:none;}
#set_pro_color img{width:40px;height:40px;border-radius:50%;margin:10px;cursor:pointer;border:2px solid #fff}
#set_pro_color img.active{border-color: #009fdc;}


#font_top #set_pro_color{position:absolute;top:-62px;left:50px}
#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:#009fdc;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;}
#fontSvg{width:auto;height:100%;}


#font_box > 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: #009fdc; 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-replacer { display:none;}
.sp-dd { display: none; }*/

.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; }

/*#set_color .sp-preview{position:absolute;border:0 none;width:30px;}
.down_color .sp-preview{bottom:0;right:0}*/




#font_bottom { height: 108px; 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:398px;padding:5px 10px;height:22px;font-size:14px;outline:1px solid #ccc;border:0 none;margin-right:10px}


#family,#family button{float:left;height:32px;width:55px;}
#font_input button:hover{color:#009fdc;}

#family.active ul{display:block;}
#family li:hover{background-color:#f8f8f8;cursor:pointer;}
#family li.active{color:#009fdc}
#family ul{position:absolute;display:none;background-color:#fff;box-shadow:0 0 7px rgba(0,0,0,.3);bottom:58px;right:0;width:140px;overflow:auto;cursor:pointer;}
#family button:after,.icon-setting:after{content:'';display:inline-block;width:0;height:0;border: 5px solid;border-color:#333 transparent transparent ;margin-left:5px;    vertical-align: middle;}
#Rotate90,
.icon-setting{font-size:30px;float:right;margin-left:10px}
#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;}

#set_color{float:right;width:38px;height:30px;cursor:pointer;outline: 1px solid #ccc;font-size:26px;line-height:30px}


#setting_color{position:absolute;bottom:36px;left:-99990px;width:230px;box-shadow:0 0 7px rgba(0,0,0,.3);z-index:9}
#setting_color.active{left:auto;right:0}
#setting_color.active .sp-container.active{display:none;}


#setting_color>em{position:absolute;right:-15px;background-color:#fff;border-radius:50%;width:30px;height:30px;line-height:30px;top:-15px;box-shadow:0 0 3px rgba(0,0,0,.3);text-align:center;cursor:pointer;font-size:24px}
#setting_color>b{display:inline-block;width:115px;background-color:#ddd;cursor:pointer;font-size:16px}
#setting_color>b.active{background-color:#f8f8f8}

/*#scale{clear:both;width:160px;cursor:pointer;-webkit-appearance:none;background-color:#f8f8f8; display
:none;
}
#scale::-moz-range-thumb{box-shadow:0 1px 4px 0 rgba(0,0,0,.5);width:14px;height:14px;margin-top:-5px;background:#fff;border-radius:7px;-webkit-appearance:none}
#scale::-webkit-slider-thumb{box-shadow:0 1px 4px 0 rgba(0,0,0,.5);width:14px;height:14px;margin-top:-5px;background:#fff;border-radius:7px;-webkit-appearance:none}
#scale::-moz-range-track{display:block;height:4px;background:#e4e4e4;border:none}
#scale::-webkit-slider-runnable-track{display:block;height:4px;background:#e4e4e4;border:none}
#scale::-ms-track{color:transparent;border:none;cursor:pointer}
#scale::-ms-fill-lower,#scale::-ms-fill-upper{background:#e4e4e4}*/