@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
.s-inner {	width:92%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }


@media all and (max-width:1280px) {
	body#wrap { font-size: 15px; }
}

@media all and (max-width:976px) {
	body#wrap { font-size: 14px; }
}

@media all and (max-width:640px) {
		body#wrap { font-size: 13px; }
}

@media all and (max-width:568px) {
	body#wrap { font-size: 0.8rem; }
}



/*Header*/
#header{ position:absolute; width:100%;  top:0; left:0; z-index:999;}
#content { padding-top: 220px;  }

#header .headerTop { position: relative; width: 100%; overflow: hidden; background: #2d3290; line-height: 40px; }
#header .headerTop ul#utilL { float: left;  }
#header .headerTop ul#utilR { float: right; }
#header .headerTop ul li { float: left; }
#header .headerTop ul li::before { content:''; width: 1px; height: 10px; display: inline-block; vertical-align: middle;
                                                  background: rgba(255,255,255,0.2); margin: 0 15px; }
#header .headerTop ul li:first-child::before { display: none; }
#header .headerTop ul li a { color:#fff; font-size: 0.81em; }

#header .headerMid { position: relative; width: 100%; height: 110px; line-height: 110px; overflow: hidden; text-align: center; }
#header .headerMid .inner { width: 96%; }

#logo { z-index:89; font-size:0; display: inline-block; vertical-align: middle; }
#logo img { display: inline-block; vertical-align: middle; }

#schForm { position: absolute; width: 300px; height: 45px; border: 1px solid #2d3290; right:0; top:50%; transform: translateY(-50%);
                  border-radius: 45px; display: inline-block; vertical-align: middle; overflow: hidden; }
#schForm input.sch_str { width: calc(100% - 60px);  border:0; padding: 0 1em; height: 43px; line-height: 43px; float: left; }
#schForm .sch_btn { position: absolute; right:-1px; top:-1px; width: 60px; height: 45px; border:0; border-radius: 45px;
                        background: #2d3290 url("/images/common/ico_search.png") no-repeat center;  }

#schOpen { display: none; position: absolute; right:4%; top: 50%; width: 34px; height: 34px; margin-right: 30px; border-radius: 100%; transform: translateY(-50%);
                  background: #2d3290 url("/images/common/ico_search.png") no-repeat center; background-size: auto 100%; }


#navPC { position:relative;  width:100%; background:#f4f8fb; overflow:hidden; }
#navPC:hover { border-bottom:1px solid #2d3290; }
#navPC:before{ content:""; width:100%; height:70px; background:#FFF; border-top: 1px solid #ddd; border-bottom:1px solid #ddd;
                        display:block; z-index:0; position:absolute; top:0; left:0; }
#navPC #gnb { width:100%; position:relative; z-index:1;  }
#navPC .depth1 { width:calc(100% / 8); float:left; text-align:center; position:relative;   }
#navPC .depth1 .dep1 { position: relative; cursor:pointer; font-size:1.06em; line-height:70px; color:#212121; font-weight: 500; }
/* #navPC .depth1 .dep1::before { content:''; width: 2px; height: 2px; background: #212121; position: absolute; left:-1px; top: 50%; margin-top: -1px; } */
#navPC .depth1 .dep1::after { content:''; display:block; background: #437dea; width: 50%; height: 5px; position:absolute; left:25%; bottom:0px; transition:all .3s; transform:scaleX(0); }
#navPC .depth1:first-child .dep1::before { display: none; }
#navPC .depth1 .dep1 a { color:#212121; }

#navPC .depth2 { display:none; padding:0.8em 0;  height:380px; box-sizing:border-box; border-left: 1px solid rgba(215, 222, 231, 0.7); }
#navPC .depth1:last-child .depth2{ border-right: 1px solid rgba(215, 222, 231, 0.7); }
#navPC .depth2 li { padding:0.6em 0; font-size: 0.93em; }
#navPC .depth2 li a { color:#484848; }
#navPC .depth1:hover .depth2 { background:rgba(255,255,255,1); }
#navPC .depth1:hover .dep1 { color:#335abe;  }
#navPC .depth1:hover .dep1::after { transform:scaleX(1); }
#navPC .depth2 li a:hover { color:#437dea; font-weight:500; }
#navPC .depth3 { display: none !important; }

#header .headerMid div.navM_open{display:none; position:absolute; top:50%; transform:translateY(-50%); right:3%; cursor:pointer; z-index:100;}
#header .navM_open span{display:block; width:30px; height:2px; background:#555; position:relative;}
#header .navM_open span.m{margin:6px 0px;}
#header .navM_open:hover span.m{right:0; }

#header.open .headerMid div.navM_open { position: fixed; top:30px; transform: 0; right:10px; }

#navMobile{ overflow-y:auto;transform:translateX(100%); transition: all ease 0.8s 0s;  position:fixed; width:280px; z-index:99; right:0; top:0; height:100%; box-sizing:border-box; background:#FFF; }
#navMobile .nav_top { box-sizing:border-box; background:#335abe; padding:35px 15px; overflow: hidden; }
#navMobile .nav_top li { float: left; margin-left: 5px; }
#navMobile .nav_top li a { color:#fff; }
#navMobile .depth1 { position: relative; border-bottom:1px solid #ddd; }
#navMobile .depth1 .dep1 {padding:15px 15px; line-height:1em; font-weight:500; cursor:pointer; display: block; }
#navMobile .depth2 { position: relative; display:none; border-top:1px solid #ddd; }
#navMobile .depth2 > ul > li {box-sizing:border-box;  border-top:1px dotted #ddd; font-size:0.95em; background:#f2f6f8}
#navMobile .depth2 > ul > li > a { display: block; padding:10px 15px; }
#navMobile .depth1:hover .dep1 {color:#335abe}
#navMobile .depth2 li:hover>a{font-weight:500; color:#437dea;}
#navMobile .depth2 li:first-child{border-top:0;}
#navMobile .depth2 li>span{padding:0 0px 10px;box-sizing:border-box; display:block}
#navMobile .depth2 li:hover>span{font-weight:500; color:#437dea; cursor:pointer;}
#navMobile .depth3 { position: relative; display: none; background: #f7fafb; padding: 1em 1.5em; overflow: hidden;  }
#navMobile .depth3 li a { line-height: 1.8em; display: block; }

#navMobile .depth2.on { height: auto !important; }

#navMobile .depth2 .dep3::after { content: '\e874'; font-family:'Linearicons-Free'; color:#a6abb2; font-weight: 900;
                                                      position: absolute; right: 1.2em; font-size: 0.6em; }
#navMobile .depth2.on .dep3::after { content: '\e873'; }




.gnbBG{position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10;  display:none; opacity:0; transition: all ease 2s 0s; top:0; left:0;}

body.open,
html.open{overflow:hidden;}



@media all and (max-width:976px) {

	#header.open #navMobile{transform:translateX(0%); transition: all ease 0.8s 0s;}
	#header.open .navM_open { }
	#header.open .navM_open span{background:#FFF;}
	#header.open .navM_open span.m{display:none;}
	#header.open .navM_open span.t{transform: rotate(45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease;}
	#header.open .navM_open span.b{transform: rotate(-45deg); transition-duration: 300ms;   transition-property: all;   transition-timing-function: ease; top:-2px;}
	#header.open .gnbBG{ display:block; opacity:1; transition: all ease 2s 1s;}

	#header { border-bottom:1px solid #ddd; }
  #header .headerTop { line-height: 35px; }
  #header .headerMid { height: 80px; line-height: 80px; }

  #schWrap { display: none; background: #f4f8fb; position: fixed; top: 115px; left:0; width: 100%; height: 100px; text-align: center; }
  #schForm { right: inherit; left: 50%; transform:translate(-50%,-50%); max-width: 90%; }
  #schOpen { display: block; }


	#content { padding-top: 115px; }
	#navPC { display: none; }

	#header .headerMid div.navM_open{ display:block; }
}


@media all and (max-width:640px) {
	#header .headerTop { line-height: 30px; }
  #header .headerMid { height: 70px; line-height: 70px; }

	#logo img { height: 35px; }
	#content { padding-top: 100px; }

	#schOpen { width: 30px; height: 30px;  }
}

@media all and (max-width:480px) {
	#header .headerMid { text-align: left; }
	#logo img { height: 30px; }

	#header .headerTop ul li::before { margin: 0 7px; }
}

@media all and (max-width:380px) {
	#logo img { height: 26px; }
}


/* 유관기관 */
#siteList { position: relative; clear: both; overflow: hidden; padding: 35px 0; border-top: 1px solid #f2f8fc; }
#siteList h3 { width: 150px; color:#212121; font-weight: 500; font-size: 1.125em;
                    display: inline-block; vertical-align: middle;  }
#siteList .siteSlide { width: calc(100% - 155px); display: inline-block; vertical-align: middle; text-align: center; }
#siteList .siteSlide .item { position: relative; }
#siteList .siteSlide .slick-slide { margin: 0 0 0 10px; }
#siteList .siteSlide img { width: 100%;  }

.indicator{position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer;font-family: 'suit'; color: #000; font-weight: bold; right: calc(100% - 140px); width: 60px; display: flex; justify-content: space-between;}
.indicator span.arrows{width: calc(100%/2); text-align: center;}

@media all and (max-width:1280px) {
	#siteList h3 { width: 140px; }
	#siteList .siteSlide { width: calc(100% - 145px); }
}

@media all and (max-width:568px) {
	#siteList  { padding: 20px 0; }
	#siteList h3 { width: 100px; }
	#siteList .siteSlide { width: calc(100% - 105px); }
	#siteList .siteSlide .slick-slide { margin: 0 0 0 5px; }

    .indicator{right: calc(100% - 100px); width: 50px;}
}

@media all and (max-width:480px) {
	#siteList h3 { width: 100%; margin-bottom: 5px; }
	#siteList .siteSlide { width: calc(100% + 10px); margin-left: -5px; }
	#siteList .siteSlide .slick-slide { margin: 0 5px; }

    .indicator{width: 50px; top: 12%; right: 0;}
}

/*footer*/
#footer { position: relative; width: 100%; background: #333; clear: both; }
#footer .f-link { clear: both; border-bottom: 1px solid rgba(255,255,255,0.1); line-height: 80px; height: 80px; }
#footer .f-link .inner > ul { float: left; overflow: hidden; }
#footer .f-link .inner > ul li { display: inline-block; vertical-align: middle; margin-right: 15px; }
#footer .f-link .inner > ul li a { color:#fff; }
#footer .f-link .btSite { position: relative; float: right; width: 20%;  border-left: 1px solid rgba(255,255,255,0.15);  border-right: 1px solid rgba(255,255,255,0.15);}
#footer .f-link .btSite button { position: relative; width: 100%; text-align: left; border:0; color:#fff; line-height: 80px; height: 80px; padding: 0 1em; font-size: 1.0em;  }
#footer .f-link .btSite button::after { content: '\e873'; font-family:'Linearicons-Free'; color#fff; position: absolute; right: 20px; opacity: 0.4; }
#footer .f-link .btSite button.on::after { content: '\e874'; }
#footer .f-link .btSite ul { display: none; width: 100%; z-index: 100; position: absolute; left:0; bottom: 80px; overflow: hidden; background: #fff; border: 1px solid #3b434f;  }
#footer .f-link .btSite ul li { line-height: 3em; padding-left: 1em; border-bottom: 1px solid #e6e8e7;  }
#footer .f-info { position: relative; width: 100%; clear: both; overflow: hidden; padding: 2% 0; }
#footer .f-info p { color:#8a8a8a; font-size: 0.93em; display: inline-block; margin-right: 10px; line-height: 1.8em; }
#footer .f-info p.copy { display: block; font-size: 0.75em; }


@media all and (max-width:1399px) {
	#footer .f-link { line-height: 70px; height: 70px; }
	#footer .f-link .inner { padding-left: 4%; }
	#footer .f-link .btSite button  { line-height: 70px; height: 70px; }
	#footer .f-link .btSite ul { bottom: 70px; }
}

@media all and (max-width:767px) {
	#footer .f-link .btSite { width: 30%; }
	#footer .f-link,
	#footer .f-link .btSite button { line-height: 60px; height: 60px; }
	#footer .f-info { padding: 3% 0; }
}

@media all and (max-width:568px) {
	#footer .f-link { border-bottom:0; }
	#footer .f-link .inner > ul li { margin-right: 0.5em; }
	#footer .f-info { padding: 5% 0; }
	#footer .f-link .inner { padding-left:0; }
	#footer .f-link .btSite { width: 100%; border:0; border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); }
	#footer .f-link .inner > ul  { width: 100%; padding-left: 3%; }
	#footer .f-link, #footer .f-link .btSite button { line-height: 40px; height: 40px; }
}