@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url('https://fonts.googleapis.com/css?family=Cute+Font&display=swap');


/*reset*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
/*	font: inherit;*/
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


* {font-family: 'Noto Sans KR', sans-serif;color:#454545; font-weight:300;}
html,body{overflow-x:hidden;}
caption{position:absolute;left:-9999px;}
fieldset,legend{border:none;}


/****************************base********************************/

.gap {
    height:2em;
    width:100%;
    clear:both;
}

.gap_double {
    height:3em;
    width:100%;
    clear:both;
} 

.txt_box {
	text-align:justify;
}

.txt_blue {
	color:#4876b3;	
}

.clear {
	clear:both;
}

.f_left {
    float:left;
}

.f_right {
    float:right;
}

.underline {
    text-decoration: underline;
}

.bold {
    font-weight:bold;
}

.center {
    text-align:center;
}

.right {
	text-align:right;
}

.gap_line {
	width:100%;
	height:2em;
	border-bottom:1px solid #e1e1e1;
}

.gap_dotline {
	width:100%;
	height:1.5em;
	border-bottom:1px dotted #e1e1e1;
}

.gap_dash {
	width:100%;
	height:2em;
	border-bottom:1px dashed #e1e1e1;
}

p.star, 
div.star {
	position:relative;
	padding-left:15px;
}

p.star:before,
div.star:before {
	position:absolute;
	left:5px;
	content:"*";
	margin-top:2px;
}

.dash > p,
.dash > div {
	position:relative;
	padding-left:20px;
}

.dash > p:before,
.dash > div:before {
	position:absolute;
	left:5px;
	content:"-";
	margin-top:-1px;
}

.dot > div,
.dot > p{
	position:relative;
	padding-left:10px;
}

.dot > div:before,
.dot > p:before {
	position:absolute;
	left:0;
    top:0;
	content:" · ";
}

div.square,
p.square {
	position:relative;
	padding-left:20px;
}

div.square:before,
p.square:before {
	position:absolute;
	left:5px;
	content:" ■ ";
}

div.circle,
p.circle {
    position:relative;
    padding-left:20px;
}

div.circle:before,
p.circle:before {
    position:absolute;
    left:5px;
    color: #4f88a5;
    font-weight: bold;
    content:" ㅇ ";
    font-family: 'Cute Font', cursive !important;
    font-size: 25px;
    margin-top: -4px; 
}


div.q_mark,
p.q_mark {
	position:relative;
	padding-left:20px;
}

div.q_mark:before,
p.q_mark:before {
	position:absolute;
	left:5px;
	content:" ※ ";
}

.no-gutters {
    margin-right:0;
    margin-left:0;
}

.no-padding {
    padding-left:0;
    padding-right:0;
}

.clr {
    clear:both;
}

.num {
    counter-increment:num;
    padding-left:20px;
    position:relative;
    padding-bottom:1px;
}

.num:before {
    content:counter(num) ".";
    position:absolute;
    left:0;
}

.gray-bg {
    background:#f5f5f5;
}

/**/

#footer .bg {
    background:#616161;
}

#footer {
    border-top:1px solid white;
}

#footer .inner {
    padding:30px 25px;
}

.info {
    font-size:14px;
    color:#b9b9b9;
    line-height:20px; 
    text-decoration: none;
}

.copyright {
    font-size:12px;
    color:#dcdcdc;
}

.footer_logos div:first-child {
    padding-right:20px;
}

/*m_gnb*/

.navtoggleon #gnb-mobile {
    display:block;
}

#gnb-mobile {
    display:none;
    position:fixed;
    right:0;
    top:60px;
    bottom:0;
    z-index:10;
    width:270px;
    background:#f9f9f9;
}

#gnb-mobile .gnb {
    width:100%;
    background:#384b5c;
    padding:15px 0;
}

#gnb-mobile .gnb > li > div {
    padding:0 26px;
}

#gnb-mobile .gnb > li > ul {
    display:none;
}

#gnb-mobile .gnb > li.on > div {
    background:#4f88a5;
}

#gnb-mobile .gnb > li.on > ul {
    display:block;
}

#gnb-mobile .gnb > li.on > ul li.on a {
    opacity:1;
}

#gnb-mobile .gnb > li.on > ul li a:hover {
    opacity:1;
}

#gnb-mobile .gnb > li > div > a {
    display:block;
    font-size:16px;
    line-height:48px;
    font-weight:400;
    color:white !important;
    text-decoration:none; 
    border-top:1px solid rgba(81, 95, 108, 0.5);
    cursor: pointer;
}

#gnb-mobile .gnb > li:first-child > div > a {
    border-top:0;
}

#gnb-mobile .gnb > li > ul {
    background:#32383e;
    padding:5px 26px;
}


#gnb-mobile .gnb > li > ul li a {
    display: block;
    font-size:15px;
    font-weight:200; 
    color:white;
    opacity:0.5;
    line-height:30px;
    text-decoration:none; 
}



.small_btn {
    transform: scale(0.8);
    margin-bottom:-4px;
}




table.tbl {
/*    border-top:1px solid #536eaa;*/
    width:100%;
    border-bottom:2px solid #ededed;
    margin-bottom:20px;
}

table.tbl td,
table.tbl th {
    border-bottom:1px solid #dfdfdf;
    border-right:1px solid #dfdfdf;
    line-height:1.8em;
    padding:.5em .7em
}

table.tbl td:last-child,
table.tbl th:last-child {
    border-right:none;
}

table.tbl td.r_border {
    border-right:1px solid #cad0d9;;
}

table.tbl thead th {
    background:#888;
    text-align:center;
    border-bottom:1px solid #cad0d9;
    border-right:1px solid #cad0d9;
    color:white;
    font-size:1.1em;
}

table.tbl tbody th {
    background:#f7f7f7;
    text-align:center;
}

table.tbl tfoot th,
table.tbl tfoot td {
    background:#f1f1f1;
}




/*************************** mobile *********************************/
#nav-toggle { position: fixed;top: -61px;left: 0px;z-index: 101;transition:.3s;width:100%;height:60px;border-bottom:1px solid #dfdfdf;background:#ffffff;}
#nav-toggle .logo {
    line-height:60px;
    position:absolute;
    left:15px;
    top:50%;
    transform: translateY(-50%);
}
#nav-toggle .btn-nav-toggle {display: block;width: 60px;height: 60px;right:0px;top:0px;position:absolute;background-image: url(../images/common/btns.png);background-repeat: no-repeat;text-indent: -9999px;opacity: 1; background-position: 0 0}
#nav-toggle .btn-nav-toggle:hover {opacity: .3;}
.navtoggleon #nav-toggle .btn-nav-toggle {background-position:0 -60px;}
.navtoggleon #nav-toggle .btn-nav-toggle:hover {}
/*************************** wrap *********************************/
#wrap{transition:.3s;}
.navtoggleon #wrap{opacity:.5;}
/*.inner{clear:both;max-width:1100px;width:100%;margin:0 auto;}*/
/*************************** header *********************************/
#wrap{}
/*************************** spot *********************************/
#spot{}
/*************************** container *********************************/
#container{}
/*************************** footer *********************************/
#footer{}
/*************************** sider *********************************/
#sider{}
/*************************** etc *********************************/
#etc{}