@charset "urf-8";

body {font-family:'Noto Sans KR','Malgun Gothic', dotum, sans-serif;font-size:15px;}
/*============== font ===============*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
.Ubuntu {font-family:'Ubuntu', 'Noto Sans KR'}

/*==================== amimation ====================*/
@keyframes subtit-ani {
    0% {
		opacity: 0;
		margin-left:-30px;
    }
    100% {
		opacity: 1;
		margin-left:0;
    }
}



/*==================== 모바일 GNB ====================*/

.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.text-ellipsis{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:initial; color:inherit;}
.clearfix {*zoom: 1;}
.blind {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}
/* GNB Mobile :: OPEN BUTTON */
.nav-open-btn{
	position:fixed; top:68px; right:-2%; margin-top:-16px; z-index:9998;
	opacity:0;filter:Alpha(opacity=0);
	visibility:hidden;
}
.nav-open-btn .line {
	display:block; width:30px; height:3px; background-color:#0190d6; margin: 4px 0;
	-webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 }

.nav-open-btn.active{margin-top:-18px}
.nav-open-btn.active .line{background-color:#fff;}
.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4){opacity: 0;}
.nav-open-btn.active .line:nth-child(1){
  -webkit-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -o-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}
.nav-open-btn.active .line:nth-child(3){
  -webkit-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -o-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

#gnbM{
	display:block;
	overflow-y:auto;
	position:fixed;
	top:0px;
	right:-82%;
	width:80%;
	height:100%;
	max-width:280px;
	background-color:#2ea7df;
	z-index:999;
	box-shadow:-2px 1px 11px rgba(0, 0, 0, .3);
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	-oz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	-ms-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);		/* gnb OPEN 속도 */
	visibility:hidden;
}
#gnbM.open{
	right:0px;
	visibility:hidden;
}
#gnbM #navigation{margin-top:80px;}	/* Header 높이값 */
/* GNB Mobile :: 1차 */
#gnbM #navigation > li{border-bottom:1px solid rgba(255,255,255,0.33);}
#gnbM #navigation > li.active{background-color:#2299d0;}
#gnbM #navigation > li > a {position:relative; display:block; padding:20px 15px; color:#fff; font-size:18px;  }
#gnbM #navigation > li.active > a{color:#fff;}
#gnbM #navigation > li.has-2dep > a{}
#gnbM #navigation > li.has-2dep.active > a{}
#gnbM #navigation > li .gnb-icon{position:absolute; top:50%; right:10px; margin-top:-14px;}
#gnbM #navigation > li .gnb-icon i{font-size:24px;}
/* GNB Mobile :: 2차 */
#gnbM #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#2f2f2f; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);}
#gnbM #navigation > li .gnb-2dep > li{}
#gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#fff; font-size:15px; padding:10px 15px; opacity:0.7;filter:Alpha(opacity=70);}
#gnbM #navigation > li .gnb-2dep > li.active > a{opacity:1.0;filter:Alpha(opacity=100);}
/* GNB Mobile :: 3차 */
#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:5px 17%; background-color:#aaa; border-top:1px dotted #ddd;}
#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:10px 0; font-size:13px; color:#fff;}
#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}

/* -------- Mobile Side Bar -------- */
#topMenuBar{display:none; position:relative;}
#topMenuBar .depth1-tit{overflow:hidden; width:100%; font-weight:500;}
#topMenuBar .depth1-tit a{position:relative; display:block; height:55px; color:#333; padding:0 3%; background-color:#fff; border-bottom:1px solid #cfcfcf;}
#topMenuBar .depth1-tit a span{display:inline-block; line-height:55px; font-size:18px; position:relative;}
#topMenuBar .depth1-tit a span:after{display:inline-block; content:""; width:100%; height:1px; position:absolute; bottom:-1px; left:0; background-color:#00538f;}
#topMenuBar .depth1-tit a .arrow{position:absolute; top:50%; right:2%; margin-top:-10px;}
#topMenuBar .depth1-tit a.open .arrow{transform:rotate(-180deg); margin-top:-14px;}
#topMenuBar .top-menu-list{display:none; width:100%; position:absolute; top:56px; left:0px; z-index:99; background-color:#fff;}
#topMenuBar .top-menu-list li{width:100%; }
#topMenuBar .top-menu-list li a{display:block; height:45px; line-height:45px; padding:0 3%; font-size:16px; border-bottom:1px solid rgba(0,0,0,0.3); color:#333; text-align:left;}
#topMenuBar .top-menu-list li:first-child a{border-top:1px solid rgba(255,255,255,0.3);}
#topMenuBar .gnb-3dep{display:none;}
.nav-open-btn .line {
    display: block;
    width: 30px;
    height: 3px;
    background-color: #2ea7df;
    margin: 4px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


/*사이트맵*/
.site-map .site-map-wrap {width:100%;min-height:280px;}
.site-map .site-map-wrap ul {float:left;height:280px;width:calc(20% - 6px);margin-right:3px;margin-left:3px;border:1px solid #cbd2da}
.site-map .site-map-wrap ul li {padding:8px 20px;}
.site-map .site-map-wrap ul h1 + li {padding-top:20px;}
.site-map .site-map-wrap ul li a {font-size:15px;color:#555}
.site-map .site-map-wrap ul li a:hover {font-size:15px;color:#111}
.site-map .site-map-wrap ul h1 {height:54px;line-height:54px;font-size:16px;font-weight:600;color:#fff;text-align:center;width: calc(100% + 2px);margin: -1px;}
.list1 h1,.list4 h1 {background:#8cc33b}
.list2 h1,.list5 h1 {background:#2aa8e2}
.list3 h1 {background:#f5953f}
.list1,.list2,.list3,.list4,.list5 {margin-top:-100px;opacity:0;}
.list1 {
    animation: slidedown ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.list2 {
    animation: slidedown2 ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.list3 {
    animation: slidedown3 ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.list4 {
    animation: slidedown4 ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.list5 {
    animation: slidedown5 ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/*======================== 미디어쿼리 ========================*/
@media all and (max-width:1500px) {
    /*top menu*/
    .head-top .container .quick-menu {right:20px;}
    .head-top .container .tnb {left:20px;}
}

@media all and (max-width:1220px){
    /*서브*/
    #sub_contents {padding-left:20px;padding-right:20px;}
    #sub_contents .container {padding:0;}
	.page-tit {width:100%;font-size:24px;padding:0;/*margin: 0 auto 25px;*/}
    /*GNB*/
    #gnb .container > ul > li > a {font-size:19px;}
    /*모바일 GNB*/
	#sidebar, #subLocation{display:none;}
    #topMenuBar{display:block;}
    /*서브 비쥬얼&LNB*/
	.sub-visual-inner{display:table;}
    .sub-visual-txt{display:table-cell; width:100%; vertical-align:middle; padding:0;}
}

@media (max-width: 1024px){
    /*top menu*/
    .head-top .container .quick-menu,
    .head-top .container .tnb {display:none;}
    /*GNB*/
    #gnb.main-gnb .container {padding:0;}
    #gnb.main-gnb .container > ul > li > a {font-size:18px;font-weight:400;}
    /*서브 비쥬얼&LNB*/
	#lnbArea,.lnbArea  {border-bottom-color:#e5e5e5;}
	.lnb_wrap .home {display:none;}
	.lnb_wrap .dep {width:50%;}
	.lnb_wrap .dep > a {padding:0 70px 0 30px;}
	.lnb_wrap .dep:last-child > a {border-right:none;}
	.lnb_wrap .dep.on > a {font-weight:300;}
	.lnb_wrap .dep .dep_list {left:-2px;width:100%;}
	.lnb_wrap .dep:last-child .dep_list {left:-1px;border-right:0;}
    .lnb_wrap .dep .dep_list a {height:60px;line-height:58px;padding:0 30px;}
    .lnb_wrap:after {display:none;}

     /*모바일 GNB*/
     #gnb.main-gnb {height:0;}
     #gnb.main-gnb .container > ul > li {display:none;}
     #gnb.main-gnb:before {height:1px;background-color: #e4e4e4;}
     #gnb.main-gnb .container {height:0;}
     .nav-open-btn{right:2%; opacity:1.0;top:42px;right:15px;filter:Alpha(opacity=100); visibility:visible;}
     #gnbM.open{visibility:visible;}
     .logo img {width:240px; margin-top:9px;}
     .head-top .container {height:80px;}
     .logo {text-align:left;}
     .head-top .container .logo a {margin-left:10px;}

     /*서브 비쥬얼&LNB*/
     #sub-visual {margin-top:80px;height:80px;}
     #sub-visual h1 {font-size:22px;}
     #sub-visual h1:before {display:none;}
     #sub-visual .container {padding-top:18px;text-align:center;background-size:cover;}
     .sub-head-txt {margin-left:0;}
     #sideMenu #lnbArea {top:160px}
     #sideMenu.fixed #lnbArea {top:80px;}
     #lnbArea, .lnbArea {background:#eee;}

     /*사이트맵*/
     .site-map .site-map-wrap ul {width:calc(33.3333% - 6px);margin-bottom:6px;}
}
@media all and (max-width:1000px) {
    /*모바일 GNB*/
    .head-top .container .quick-menu {display:none;}
    .head-top .container .logo a {margin-left:0;}
}
@media all and (max-width:800px){
    /*서브 비쥬얼&LNB*/
	#visual{height:284px;}
	.sub-visual-inner{display:table;}
	.sub-visual-txt{display:table-cell; width:100%; vertical-align:middle; padding:0;}
	.sub-visual-txt > strong{margin-bottom:5%; font-size:35px;}
	.sub-visual-txt .sub-page-loc{margin-top:-5%; font-size:15px;}
	.sub-page-loc.page-prev{left:0;}
    .sub-page-loc.page-next{right:0;}

    /*모바일 GNB*/
    #topMenuBar .top-menu-list li.m{display:none;}
	#gnbM{max-width:230px;}
	#gnbM #navigation{margin-top:60px;}
	#gnbM #navigation > li .gnb-2dep > li.m{display:none;}
	.logo{top:-19px;}
	#header {height:90px;}
}

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

}
@media all and (max-width:550px){
    /*사이트맵*/
    .site-map .site-map-wrap ul {width:calc(50% - 6px);}
}
@media all and (max-width:480px){
    /*서브 비쥬얼&LNB*/
    #visual{height:200px;}
    .sub-head-txt {margin-left:0;}
	.sub-visual-txt > strong{font-size:30px;}
	.sub-visual-txt > p{font-size:15px; line-height:20px; word-break:keep-all;}
    .sub-visual-txt .sub-page-loc{display:none;}
    #lnbArea, .lnbArea {height:51px;}
    .lnb_wrap .dep > a {text-overflow:ellipsis;width:100%;padding-right:30px;padding-left:15px;}
    .dep > a {height:50px;line-height:50px;font-size:14px;}

     /*사이트맵*/
     .site-map .site-map-wrap ul {width:100%;height:auto;padding-bottom:10px;margin-left:0;margin-right:0;}

     /*GNB*/
     .logo img {margin-top:10px;}
}

@media all and (max-width: 425px){
    /*서브 비쥬얼&LNB*/
	.lnb_wrap .dep > a {padding: 0 10px 0 10px;}
}