@charset "utf-8";
@import url(animate.css);
@import url(board.css);

/* 
 * layout CSS Document
 * KOWeb kimhynho 
 */
 
#wrap{overflow:hidden;}
 
#header{background:#fff;}
#header .inr{position:relative; max-width:1200px; height:90px; box-sizing:border-box; margin:0 auto; padding-top:35px;}
#header .inr h1{position:absolute; left:0px; top:50%; /*width:183px;*/width: 233px; height:48px; margin-top:-24px;}
#header .inr h1 > a{display:block; height:100%; background:url(../images/common/logo.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#header .inr:after{content:''; display:block; clear:both;}

/* gnb */
nav > .gnb{float:right;}
nav > .gnb:after{content:''; display:block; clear:both;}
nav > .gnb > li{float:left; position:relative; padding:0 45px;}
nav > .gnb > li > a{display:inline-block; position:relative; padding-bottom:28px; font-size:18px; color:#2c343b; letter-spacing:-1px; text-align:center;}
nav > .gnb > li > a:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:6px; background:#54c1e5; transform:scaleX(0); transition:all 0.3s ease 0s;}
nav > .gnb > li > a:hover:after,
nav > .gnb > li > a:focus:after,
nav > .gnb > li > a.active:after,
nav > .gnb > li > a.on:after{transform:scaleX(1);}
nav > .gnb > li > ul{display:none; position:absolute; top:55px; left:0px; z-index:90; width:100%; min-width:170px; box-sizing:border-box; box-shadow:5px 5px 0px rgba(0,0,0,0.2);}
nav > .gnb > li > ul > li:first-child > a{border-top:1px solid #e5e5e5;}
nav > .gnb > li > ul > li > a{display:block; position:relative; padding:10px 15px; background:#fff; border-bottom:1px solid #e5e5e5; color:#666; letter-spacing:-1px; font-weight:300; font-size:16px;}
nav > .gnb > li > ul > li > a:hover,
nav > .gnb > li > ul > li > a:focus{background:#54c1e5; border-color:#46aed0; color:#fff;}
nav > .gnb > li > ul > li > a:before{content:''; display:block; opacity:0; position:absolute; top:-1px; left:0px; width:100%; height:1px; background:#46aed0;}
nav > .gnb > li > ul > li > a:hover:before,
nav > .gnb > li > ul > li > a:focus:before{opacity:1;}
nav > .gnb > li:last-child > ul{right:0px; left:auto;}
nav > .gnb > li > a.open{display:none;}

/* mobile gnb */ 
.btn_m_menu{display:none; position:absolute; right:15px; top:50%; width:24px; height:22px; box-sizing:border-box; margin-top:-7px; padding-top:9px;}
.btn_m_menu span{display:block; height:4px; background:#2d3e50; border-radius:2px; text-indent:100%; overflow:hidden; white-space:nowrap; transition:all 0.3s ease 0s;}
.btn_m_menu:before,
.btn_m_menu:after{content:''; display:block; position:absolute; left:0px; width:100%; height:4px; background:#2d3e50; border-radius:2px;}
.btn_m_menu:before{top:0px; transition:top 0.3s ease 0s, transform 0.3s ease 0.3s;}
.btn_m_menu:after{bottom:0px; transition:bottom 0.3s ease 0s, transform 0.3s ease 0.3s}
.btn_m_menu.active span{opacity:0;}
.btn_m_menu.active:before{top:9px; transform:rotate(45deg);}
.btn_m_menu.active:after{bottom:9px; transform:rotate(-45deg);}

#header nav .bg{position:absolute; right:0; top:84px; z-index:999; width:40%; background:#446ecc; transform:translateX(100%); transition:all 0.4s ease-out 0s;}
#header nav	.bg.active{transform:translateX(0);}
#header nav .shadow{display:none; position:fixed; left:0px; top:0px; z-index:997; width:100%; height:100%;}
#header nav .shadow > a{display:block; height:100%;}
#header nav .bg.active + .shadow{display:block;}

/* container */
#container{max-width:1200px; margin:0 auto;}

/* footer */
#footer{background:#40495a;}
#footer .inr{position:relative; max-width:1200px; margin:0 auto; padding:40px 0px; color:#fff; font-size:14px; font-weight:300;}
#footer .logo{display:block; position:absolute; left:0px; top:40px; /*width:183px;*/ width: 233px; height:48px; background:url(../images/common/logo_footer.gif) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
/* 2018-09-06 수정 */
/*#footer .inr > *:not(.logo){padding-left:215px;}*/
#footer .inr > *:not(.logo){padding-left:263px;}
#footer address span{display:inline-block; padding-right:20px;}
#footer p{margin-top:5px; font-size:13px;}

/* btn top */
.btn_top{display:inline-block; opacity:0; position:fixed; right:50px; bottom:50px; z-index:999; width:48px; height:48px; background:#8698ac url(../images/common/img_arrow_top.gif) no-repeat 50% 50%; border-radius:50%; box-shadow:5px 5px 10px rgba(0,0,0,0.28); text-indent:100%; overflow:hidden; white-space:nowrap; transition:all 0.3s ease 0s;}
.btn_top.active{opacity:1;}

/* sub visual */
.area_subVisual{height:199px; background:url(../images/common/img_sub_visual.jpg) no-repeat 50% 0; background-size:cover; text-align:center; color:#fff;}
.area_subVisual em,
.area_subVisual i{display:block; font-family:'Raleway', sans-serif; font-weight:600;}
.area_subVisual i{padding-top:54px; font-size:50px; letter-spacing:-1px;}
.area_subVisual i span{font-size:32px;}
.area_subVisual em{font-size:16px; font-weight:400;}

/* lnb */
.area_lnb{float:left; width:250px;}
.area_lnb h2{height:160px; background:#1b40b3 url(../images/common/bg_subtitle.png) no-repeat 45% 60%; color:#fff; font-family:'Nanum Square', Sans-serif; font-size:35px; text-align:center;}
.area_lnb h2 span{display:inline-block; vertical-align:middle;}
.area_lnb h2:after{content:''; display:inline-block; height:100%; vertical-align:middle;}
.area_lnb .lnb > li{margin-top:10px;}
.area_lnb .lnb > li > a{display:block; padding:12px 15px; border:1px solid #dbdbdb; font-size:16px; color:#636363; letter-spacing:-0.5px;}
.area_lnb .lnb > li > a.on{background:#54c1e5; border-color:#54c1e5; color:#fff;}
.btn_m_lnb{display:none; position:relative; margin-top:15px; padding:12px 35px 12px 15px; border:1px solid #dbdbdb; font-size:16px; transition:all 0.3s ease 0s;}
.btn_m_lnb:after{content:''; display:block; position:absolute; right:20px; top:50%; width:8px; height:12px; margin-top:-6px; background:url(../images/common/img_arrow_gray.png) no-repeat 0 0; background-size:100%; transform:rotate(90deg); transition:all 0.3s ease 0s;}
.btn_m_lnb.active{background:#446ecc; border-color:#6488d8; color:#fff;}
.btn_m_lnb.active:after{background-image:url(../images/common/img_arrow.png); transform:rotate(-90deg);}

/* sub title */
.tit_sub{padding:75px 0 45px; background:url(../images/common/bg_subtitle02.gif) repeat-x 0 100%; font-family:'Nanum Square', Sans-serif; font-size:34px; color:#151515; font-weight:800;}

@media all and (min-width:1200px){
	#container{width:1200px; box-sizing:border-box;}
	.area_lnb .lnb{display:block !important;}
}

@media all and (max-width:1199px){
	#header .inr{padding-right:15px; padding-left:15px;}
	#header .inr h1{left:15px;}
	#container{padding-right:15px; padding-left:15px;}
}
	
@media all and (max-width:1024px){
	#header .inr{height:80px;}
	#header nav .bg{top:80px;}
	.btn_m_menu{display:block;}
	.gnb > li{position:relative;}
	.gnb > li > a{transition:all 0.3s ease 0s;}
	.gnb > li > a:not(.open){display:block; padding:15px; border-bottom:1px solid #6488d8; font-size:16px; color:#fff;}
	.gnb > li > ul{display:none;}
	.gnb > li > a.active{background:#3a5592; border-bottom-color:#2d4a8c;}
	.gnb > li > a.open{display:block; position:absolute; right:20px; top:10px; width:36px; height:36px; background:#3a5592; border-radius:50%; text-indent:100%; overflow:hidden; white-space:nowrap;}
	.gnb > li > a.open:before{content:''; display:block; position:absolute; left:14px; top:13px; width:8px; height:12px; background:url(../images/common/img_arrow.png) no-repeat 0 0; background-size:100%; transform:rotate(90deg); transition:all 0.3s ease 0s;}
	.gnb > li > a.open.active{background:#233969;}
	.gnb > li > a.open.active:before{transform:rotate(-90deg);}
	.gnb > li > ul{padding:20px; background:#3a5592; border-bottom:1px solid #2e467b;}
	.gnb > li > ul > li > a{display:block; padding:3px 0px; color:#fff; font-weight:300;}
	
	#footer .logo{display:none;}
	#footer .inr{text-align:center;}
	#footer .inr > *:not(.logo){padding-left:0px;}
	
	.area_lnb{float:none; position:relative; width:auto;}
	.area_lnb h2{display:none;}
	.area_lnb .lnb{display:none; position:absolute; top:50px; left:0px; width:100%; padding:10px 0px; background:#3a5592;}
	.area_lnb .lnb li{margin-top:0px;}
	.area_lnb .lnb li > a{padding:7px 15px; border:0px; color:#fff;}
	.area_lnb .lnb li > a.on{background:transparent;}
	.btn_m_lnb{display:block;}
	.tit_sub{padding-top:50px;}
}

@media all and (max-width:500px){
	#header nav .bg{width:60%;}
	.btn_top{right:15px;}
	
	.area_subVisual i{padding-top:60px; font-size:40px;}
	.area_subVisual i span{font-size:25px;}
	.area_subVisual em{font-size:14px;}
}