@charset "utf-8";

html {overflow-x:hidden; width:100%; height:100% }
body { font-family:'Barlow', 'Noto Sans KR', sans-serif, 'Noto Serif KR', serif;; font-size:75%;letter-spacing:0 }
label { cursor:pointer}
a:link, a:visited { text-decoration:none;}
a:hover, a:focus, a:active { text-decoration:underline}

a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt,
em, embed,
fieldset, figcaption, figure, font, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd,
keygen,
label, legend, li,
meter,
nav, menu,
object, ol, output,
p, pre, progress,
q,
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul,
var { margin:0; padding:0}

h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em}
body, input, button, select, textarea, sub{}
em, cite, address, optgroup { font-style:normal}
kbd, samp, code { font-family:monospace}


img, input, button, select, textarea { vertical-align:middle}
ul, ol { list-style:none}
img, fieldset { border:0}
abbr, acronym { cursor:help; border-bottom:1px dotted black}
table {	width:100%;  border-spacing:0}/* border-collapse: collapse; ff에서 border="0" 인 경우 문제 발생 */

legend, hr { overflow:hidden; position:absolute; top:0; left:0}
legend, hr, caption { visibility:hidden; font-size:0; width:0; height:0; line-height:0}

* {box-sizing:border-box; font-family:'Barlow', 'Noto Sans KR', sans-serif; word-break: keep-all;}

/* Html5 Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block}
mark, rp, rt, ruby, summary, time{ display: inline }

A:link {text-decoration:none;color: #666;font-size: 12px;letter-spacing:0;font-weight: normal;}
A:visited {text-decoration:none;color: #666;font-size: 12px;letter-spacing:0;font-weight: normal;}
A:active {text-decoration:none;color: #222;font-size: 12px;letter-spacing:0;font-weight: normal;}
A:hover {text-decoration:none;color: #222;font-size: 12px;letter-spacing:0;font-weight: normal;}

a.accessibility01 {position:absolute; display:block; width:100%; left:0; text-align:center; top:-10000px; z-index:500; font-size:1.3em}
a.accessibility01:hover, a.accessibility01:focus, a.accessibility01:active {position: absolute; top:0; padding: 15px 0; font-weight:bold; color:#fff; background:#1d60a7; z-index:500}

/* skip navi */
.accessibility02 { position:absolute; top:0; display:block; left:0; width:199px; z-index:1; visibility:hidden; }
.accessibility02 a { display:block; height:19px; text-indent:-5000px; overflow:hidden}


/* hidden */
.hidden, #contents .hidden { visibility:hidden; position:absolute; font-size:0; width:0; height:0; line-height:0; margin:0; padding:0; background:none }

/* input */
.inp_st1 { border:1px solid #d7d7d7; background:#fff; padding:7px 11px 8px 10px; color:#555; font-size:1.05em }
.inp_st2 { border:1px solid #eaeaea; background:#fff; padding:5px 10px 7px 8px; color:#555; font-size:1.0em }
.inp_st3 { border:1px solid #d7d7d7; background:#fff; padding:7px 10px 8px 8px; color:#888; font-size:1.1em }
.sel_st1 { padding:5px 5px 7px 5px; border:1px solid #4a4b4f }
.sel_st2 { padding:5px 5px 7px 5px; border:1px solid #d7d7d7 }

/* with */
.w_40{ width:40px!important;}
.w_45{ width:45px!important;}
.w_60{ width:60px!important;}
.w_63{ width:63px!important;}
.w_80{ width:80px!important;}
.w_90{ width:88px!important;}
.w_110{ width:110px!important;}
.w_124{ width:120px!important;}
.w_142{ width:142px!important;}
.w_150{ width:156px!important;}
.w_164{ width:164px!important;}
.w_180{ width:180px!important;}
.w_240{ width:220px!important;}
.w_400{ width:400px!important;}
.w_500{ width:494px!important;}
.w_550{ width:550px!important;}
.w_700{ width:700px!important;}
.w_100p{ width:100%!important;}
.h_50{ height:50px!important;}
.h_70{ height:70px!important;}
.h_100{ height:100px!important;}
.h_200{ height:200px!important;}
.h_300{ height:300px!important;}

/* align */
.t_alc { text-align:center }
.t_alr { text-align:right }

/* margin */
.mt_0 { margin-top:0px!important; }
.mt_3 { margin-top:3px }
.mt_5 { margin-top:5px }
.mt_7 { margin-top:7px }
.mt_10 { margin-top:10px }
.mt_12 { margin-top:12px }
.mt_15 { margin-top:15px }
.mt_17 { margin-top:17px }
.mt_20 { margin-top:20px!important; }
.mt_21 { margin-top:21px!important; }
.mt_24 { margin-top:24px }
.mt_25 { margin-top:25px }
.mt_30 { margin-top:30px ; margin-bottom:20px}
.mt_35 { margin-top:35px }
.mt_37 { margin-top:37px }
.mt_40 { margin-top:40px }
.mt_44 { margin-top:44px }
.mt_50 { margin-top:50px }
.mt_55 { margin-top:55px }
.mt_70 { margin-top:70px }
.mt_80 { margin-top:80px }
.mt_100 { margin-top:100px }
.mt_410 { margin-top:410px }
.mr_5 { margin-right:5px }
.mr_21 { margin-right:21px }
.mr_38 { margin-right:38px }
.ml2 { margin-left:2px }
.ml4 { margin-left:4px }
.ml10 { margin-left:10px }
.ml20 { margin-left:20px }
.ml_50 { margin-left:50px }
.ml_57 { margin-left:57px }
.mrl_26 { margin-right:26px; margin-left:26px }
.mrl_50 { margin-right:50px; margin-left:50px }
.mb_20 { margin-bottom:20px!important; }
.pt_69 { padding-top:69px!important; }


.fnt11 {font-size:11px;}
.fnt12 {font-size:12px;}
.fnt14 {font-size:14px;}
.fnt16 {font-size:16px;}
.fnt18 {font-size:18px;}
.fnt20 {font-size:20px;}

.red {color:#ff3300;}


.label-blue {background:#0099cc;color:#fff;font-size:14px;padding:5px 10px;}
.label-red {background:#cc0000;color:#fff;font-size:14px;padding:5px 10px;}
.label-gray {background:#8b8b8b;color:#fff;font-size:14px;padding:5px 10px;}

p.null-blue {background:#0099cc;color:#fff;font-size:30px;padding:150px 10px;text-align:center;}
p.null-gray {background:#eee;color:#000;font-size:30px;padding:150px 10px;text-align:center;margin-top:50px;}

/* layer popup */
.popup-layer {display:none;width:50%;background-color:#fff;padding-top:5px;padding-bottom:40px;}
.popup-layer .popup-layer-top {padding:20px;margin-bottom:10px;}
.popup-layer p.data-title {float:left;padding-left:5px;font-size:18px;}
.popup-layer p b {font-weight:800;}
.popup-layer span {float:right;padding-right:5px;cursor:pointer;}
.data-content {width:100%;background-color:#fff;padding:20px;text-align:center;}
.popup-layer table {border-top:solid 2px #505050;}
.popup-layer table tr {border-bottom:solid 1px #eee;}
.popup-layer table tr th {padding:5px; text-align:center; font-weight:700;font-size:14px;}
.popup-layer table tr td {padding:10px; text-align:center; font-size:14px;}

@media all and (max-width:800px) {
	.popup-layer {display:none;width:100%;background-color:#fff;padding-top:5px;padding-bottom:40px;}
	.popup-layer .popup-layer-top {padding:20px;margin-bottom:10px;}
	.popup-layer p.data-title {float:left;padding-left:5px;font-size:18px;}
	.popup-layer p b {font-weight:800;}
	.popup-layer span {float:right;padding-right:5px;cursor:pointer;}
	.data-content {width:100%;background-color:#fff;padding:20px;text-align:center;}
	.data-content img {width:100%;}
	.popup-layer table {border-top:solid 2px #505050;}
	.popup-layer table tr {border-bottom:solid 1px #eee;}
	.popup-layer table tr th {padding:5px; text-align:center; font-weight:700;font-size:14px;}
	.popup-layer table tr td {padding:10px; text-align:center; font-size:14px;}
}


@media all and (max-width:1000px) {
	.w_700{ width:90% !important;}
	.w_400 { width:90% !important;}
}

.content-text {display:block; width:100%; text-align:center;font-size:30px; }
.content-text img{width: 100%; height: auto; max-width: 900px;}


/* 이미지 크기 변경시 화질 저하안되게 하기*/
img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
	image-rendering: -moz-crisp-edges; /* Firefox */
	image-rendering: -o-crisp-edges; /* Opera */
	image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
  }