@charset "utf-8";

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/NotoSans-Thin.eot?") format("eot"),
  url("../fonts/NotoSans-Thin.otf") format("opentype"),
  url("../fonts/NotoSans-Thin.woff") format("woff"),
  url("../fonts/NotoSans-Thin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/NotoSans-Light.eot?") format("eot"),
  url("../fonts/NotoSans-Light.otf") format("opentype"),
  url("../fonts/NotoSans-Light.woff") format("woff"),
  url("../fonts/NotoSans-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/NotoSans-DemiLight.eot?") format("eot"),
  url("../fonts/NotoSans-DemiLight.otf") format("opentype"),
  url("../fonts/NotoSans-DemiLight.woff") format("woff"),
  url("../fonts/NotoSans-DemiLight.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/NotoSans-Regular.eot?") format("eot"),
  url("../fonts/NotoSans-Regular.otf") format("opentype"),
  url("../fonts/NotoSans-Regular.woff") format("woff"),
  url("../fonts/NotoSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/NotoSans-Medium.eot?") format("eot"),
  url("../fonts/NotoSans-Medium.otf") format("opentype"),
  url("../fonts/NotoSans-Medium.woff") format("woff"),
  url("../fonts/NotoSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/NotoSans-Black.eot?") format("eot"),
  url("../fonts/NotoSans-Black.otf") format("opentype"),
  url("../fonts/NotoSans-Black.woff") format("woff"),
  url("../fonts/NotoSans-Black.woff2") format("woff2");
}

@font-face {
	font-family: "Noto Sans KR";
	font-weight: 900;
	font-style: normal;
	src: url("../fonts/NotoSans-Bold.eot?") format("eot"),
	url("../fonts/NotoSans-Bold.otf") format("opentype"),
	url("../fonts/NotoSans-Bold.woff") format("woff"),
	url("../fonts/NotoSans-Bold.woff2") format("woff2");
}


html {width:100%;/*overflow-x:hidden;*/letter-spacing:-0.02em;}
/* base */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0;padding:0;border:0; }
html, body {height:100%}
body{/*font-family:WebNotoSans, Arial, NanumBarunGothic,dotum,applegothic,sans-serif; overflow-x:hidden;*/font-family:Noto Sans KR, sans-serif; font-weight:400;letter-spacing: -0.5px; height:auto; font-size:1em; line-height:1.4em;color:#4c4c4c;word-break:keep-all;-webkit-text-size-adjust:none;/*-webkit-user-select:none;*/background:#fff;}
h1, h2, h3, h4, h5, h6 {font-family:Noto Sans KR, sans-serif;font-size: 100%;font-weight: normal;}
a:link, a:visited, a:hover, a:active, a:focus {color:#000; text-decoration:none; }
select, input, textarea { font-size: 100%;vertical-align: middle ; outline:none; resize:none;/*font-family:WebNotoSans, Arial, NanumBarunGothic,dotum,applegothic,sans-serif;*/font-family:Noto Sans KR !important;}
ol, ul {list-style: none;}
label {cursor: pointer;}
dfn, em, address{font-style:normal;}
legend, caption {width:1px; height:1px; font-size:0; line-height:0; margin:-1px;}
img {vertical-align: top;}
textarea{resize:none;outline:none;}
button{outline:none;font-family:Noto Sans KR, Arial, NanumBarunGothic,dotum,applegothic,sans-serif;}

dt { font-weight:500; }

input {
   /*-webkit-appearance: none;*/
   -webkit-border-radius: 0;
   outline:none;
}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset;
}

input {outline:none;}

input::placeholder, textarea::placeholder {color:#ccc;}

b, strong { font-weight:500; }

table {border-collapse:collapse;border:0 none;}
table th { font-weight:500; }

.sound_only {display:none;}
.blind {position: absolute; left:-9999px; top:-9999px; width:0; height:0; font-size:0; line-height:0;}

#skipNav {z-index: 600; position:absolute; position:fixed;  top:0; left:0; width:100%; }
#skipNav a {position: absolute;  top: -9999px; display: block; transition:.3s; -webkit-transition:.3s}
#skipNav a span {display: block; padding:10px 0; background:#003960; color:#fff; text-align:center; }
#skipNav a:hover, #skipNav a:active, #skipNav a:focus {z-index:600; top:0; display:inline-block; width:100%; }

.ent {/*font-family:WebNotoSans, Arial, NanumBarunGothic,dotum,applegothic,sans-serif;*/ font-family:Noto Sans; letter-spacing:0}

input[type="text"] {box-sizing:border-box; -webkit-appearance:none;}
input[type="password"] {box-sizing:border-box; -webkit-appearance:none;}
input[type="checkbox"] {}

required, textarea.required {background-image:none !important;}

/* 공통 */
#tool_bar {position:fixed;left:0;/*top:0;*/top:81px;z-index:200;width:50px;height:100%;border-right:1px solid #ddd;background:#fff;}
#tool_bar ul li {width:100%;height:50px; line-height:50px;text-align:center;background:url(../img/tool_ico_off.png) no-repeat center 0; cursor:pointer;}
#tool_bar ul li.tool_01 {background-position:center -3px; height:70px;  }
#tool_bar ul li.tool_02 {background-position:center -78px; }
#tool_bar ul li.tool_03 {background-position:center -125px; }
#tool_bar ul li.tool_04 {background-position:center -173px; }
#tool_bar ul li.tool_05 {background-position:center -220px; }
#tool_bar ul li.tool_06 {background-position:center -265px; }
#tool_bar ul li.tool_plus {background-position:center -605px;}

#tool_bar ul li.on {background:url(../img/tool_ico_on.png) no-repeat center 0;}
#tool_bar ul li.on.tool_01 {background-position:center -3px; height:70px;  }
#tool_bar ul li.on.tool_02 {background-position:center -78px; }
#tool_bar ul li.on.tool_03 {background-position:center -125px; }
#tool_bar ul li.on.tool_04 {background-position:center -173px; }
#tool_bar ul li.on.tool_05 {background-position:center -220px; }
#tool_bar ul li.on.tool_06 {background-position:center -265px; }
#tool_bar ul li.on.tool_plus {background-position:center -605px;}

#tool_bar ul li a { display:block; width:100%; height:100%; text-indent:-9999em; }
#tool_bar ul li .tool_hover { display:inline-block;  width:100px; text-align:left; margin-top:-2px;  margin-left:-50px; opacity:0;  }
#tool_bar ul li .tool_hover span {  
	padding:1px 8px 2px 8px; 
	border: 1px solid #f3e5be;
    border-radius: 40px;
    background-color: #fff9d7;
	font-size:0.8em; 
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    opacity: .95;
    filter: alpha(opacity=95); 
}
#tool_bar ul li.active .tool_hover{ display:inline-block; margin-left:60px; transition:all 0.5s; opacity:1; }

#tool_section { display:none; position:fixed; top:81px; left:0; height:100%; min-width:280px; background:#fff; margin-left:50px;
	-webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	-o-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);  
	animation:animatedToolRight 0.5s;
	z-index: 100;
}
#tool_section.active { display:block;  }
#tool_section.hide { animation:animatedToolLeft 0.5s;  }

#chat_section { display:block; position:fixed; top:95px; left:15px; width:370px; height:660px;  background:transparent; margin-left:50px;
	animation:animatedToolAlpha 0.5s;
	z-index: 90;
}

.tool_close { display:none; position:fixed; top:90px; left:340px;  width:40px;  border-radius:50%; animation:animatedToolRight 0.5s; cursor:pointer; z-index:190;} 
.tool_close img{ width:100%; }
.tool_close.active { display:block; }

@keyframes animatedToolLeft {
	0%{ left:0; opacity:0.5; }
	100%{ left:-100%; opacity:1;  }
}
@keyframes animatedToolRight {
	0%{ left:-100%; opacity:0.5; }
	100%{ left:0; opacity:1;  }
}
@keyframes animatedToolAlpha {
	0%{ opacity:0; }
	100%{ opacity:1;  }
}

.thumb_water_mark { display:block; width:100%;position:absolute; float:left; left:0; bottom:0; font-size:0.75em; z-index:50; color:#eee; text-align:left; padding:8px; background:rgba(0,0,0,0.2); line-height:1.5em; letter-spacing:-0.5px;}