@charset "utf-8";

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,
dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,
canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,
time,mark,audio,video,input,textarea{
	margin:0;
	padding:0;
	border:0;
	text-decoration:none;
	box-sizing:border-box;
}
html,body {height:100%;font-size:13px;color:#252525;font-family:AppleSDGothicNeo-Light,'HelveticaNeue','Malgun Gothic','맑은 고딕',sans-serif;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}


input[type="text"],
textarea {border:1px solid #ccc;}

textarea {resize:none;}

/*------------------------------------------------
* z-index
/*------------------------------------------------*/
/* z-index */
.dimmed {z-index:9000;}
.loading {z-index:9999;}


/*------------------------------------------------
* button
/*------------------------------------------------*/
button {width:150px;height:30px;}


/*------------------------------------------------
*  loading
/*------------------------------------------------*/
.loading {
	position:absolute;
    border: 8px solid #0054a6;
    border-top: 8px solid #0080c6;
    border-radius: 50%;
    width:50px;
    height:50px;
	left:50%;
	top:50%;
	margin:-25px 0 0 -25px;
	animation: spin 0.6s linear infinite;
	opacity:0.7;
	display:none;
}
.loading.small {
    border: 4px solid #0054a6;
    border-top: 4px solid #0080c6;
    width:26px;
    height:26px;
	margin:-13px 0 0 -13px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dimmed {position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.3;display:none;}
.dimmed.white {background:#fff;opacity:0.6;}


/*------------------------------------------------
* content
/*------------------------------------------------*/
body {overflow:hidden;}

.wrap {width:100%;height:100%;}
.wrap:after {content:"";display:block;clear:both;}

.source-box {float:left;width:600px;height:100%;padding:10px;}
.source-box h1 {font-size:20px;padding:0 0 10px 0;}
.source-box form {width:100%;height:calc(100% - 100px);}
.source-box textarea {width:100%;height:300px;margin-bottom:10px;padding:10px;display:none;}
.source-box input[type="text"] {width:100%;height:32px;line-height:32px;margin-bottom:10px;padding:0 10px;}
.source-box button {margin-bottom:10px;}
.source-box #textarea_box {width:100%;height:300px;border: 1px solid #ccc;padding:10px;overflow:auto;}
.source-box #textarea_box table {width:100% !important;}
.source-box #textarea_box table td {border:1px solid #c1c1c1 !important;}

.result-box {float:right;width:calc(100% - 600px);height:calc(100% - 68px);}
.result-box .result-tit {width:100%;height:45px;line-height:45px;font-size:25px;text-align:center;}
.result-box .result-tit.on {background:#007fff;color:#fff;}
.result-box iframe {width:100%;height:100%;}


.paste-box {position:absolute;left:0;top:68px;width:600px;height:100%;z-index:100;padding:10px;display:none;background:#cde3f9;}
.paste-box input[type="text"] {width:100%;height:32px;line-height:32px;margin-bottom:10px;padding:0 10px;}
.paste-box textarea {width:100%;height:300px;margin-bottom:10px;padding:10px;}


header {width:100%;padding:20px;}
header h1 {display:inline-block;width:150px;height:11.98px;}
header h1 a {display:block;width:100%;height:100%;font-size:0;}
header h1 svg {width:100%;height:100%;}

header .profile {position:relative;display:inline-block;background:#2196F3;border-radius:10px;color:#fff;font-size:11px;padding:3px 10px;vertical-align:middle;margin-left:10px;top:-2px;}
header .profile * {vertical-align:top;}
header .profile .contact {overflow:hidden;width:119px;display:inline-block;white-space:nowrap;transition:all 0.4s;transform:translate3d(10px,0,0);font-weight:bold;color:yellow;}
header .profile:hover .contact {width:230px;transform:translate3d(0,0,0);}

header .notice {position:relative;display:inline-block;background:#fff;border-radius:10px;font-size:11px;padding:3px 10px 3px 0;vertical-align:middle;margin-left:1px;top:-2px;letter-spacing:-1px;}
header .notice span {font-style:italic;color:red;margin-right:3px;font-size:8px;vertical-align:top;}

header .banner {position:absolute;top:5px;right:5px;}