@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:15px; top:50%; width:190px; height:42px; margin-top:-17px;}
#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;}

.area_util{position:absolute; right:15px; top:25px;}
.area_util .language_select {position:relative; width:70px; padding:5px; display:block; border:2px solid #606060; border-radius:25px;}
.area_util .language_select::after{content:'\25BC'; position:absolute; top:0; right:0; padding:1em; font-size:11px; color:#677181; pointer-events:none;}
.area_util .language_select select{width:100%; height:100%; margin:0; padding:0 0 0 .5em; color:#606060; font-size:17px; color:#606060; cursor:pointer; outline:0; box-shadow:none; border:0 !important; background:transparent; background-image:none; appearance:none; -webkit-appearance:none; -moz-appearance:none; -ms-appearance:none;}
.area_util .language_select select::-ms-expand{display:none;}

/* gnb */
nav > .gnb{float:right; margin-right:150px}
nav > .gnb:after{content:''; display:block; clear:both;}
nav > .gnb > li{float:left; position:relative; padding:0 30px;}
nav > .gnb > li > a{display:inline-block; position:relative; padding-bottom:30px; font-size:18px; color:#333; letter-spacing:-1px; text-align:center;}
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:2px 2px 0px rgba(0,0,0,0.2);}
nav > .gnb > li > ul > li > a{display:block; position:relative; padding:5px 15px; background:#fff; color:#444; letter-spacing:-1px; font-weight:300; font-size:16px;}
nav > .gnb > li > ul > li > a:hover,
nav > .gnb > li > ul > li > a:focus{color:#2349c8;}
nav > .gnb > li > ul > li:first-child > a {padding:20px 5px 5px 15px}
nav > .gnb > li > ul > li:last-child > a {padding:5px 5px 20px 15px}
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:20px; box-sizing:border-box; margin-top:-7px; padding-top:9px;}
.btn_m_menu span{display:block; height:2px; background:#111; 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:2px; background:#111;}
.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{position:relative; margin:0 auto;}
#content{position:relative; width:100%; height:auto; margin:0 auto; padding-top:30px}
#content > div[class^="area_"] h2{font-size:35px;}
#content > div[class^="area_"] h2 + p{margin-top:15px; font-size:17px;}

/* lnb */
.area_lnb{position:relative; max-width:1200px; height:50px; margin:45px auto 25px auto; z-index:80;}
.area_lnb .lnb.w5 > li{float:left; width:20%;}
.area_lnb .lnb.w4 > li{float:left; width:25%;}
.area_lnb .lnb.w3 > li{float:left; width:33.33%;}
.area_lnb .lnb.w2 > li{float:left; width:50%;}
.area_lnb .lnb.w8 > li{float:left; width:25%;}
.area_lnb .lnb.w8 > li:nth-child(5) > a{border-top:0 !important;}
.area_lnb .lnb.w8 > li:nth-child(6) > a{border-top:0 !important;}
.area_lnb .lnb.w8 > li:nth-child(7) > a{border-top:0 !important;}
.area_lnb .lnb.w8 > li:nth-child(8) > a{border-top:0 !important;}
.area_lnb .lnb > li > a{display:block; margin-left:-1px; padding:12px 15px; border:1px solid #e1e1e1; font-size:17px; color:#111; text-align:center; letter-spacing:-0.5px;}
.area_lnb .lnb > li > a.on{background:#1f3272; border-color:#1f3272; 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);}

/* snb */
.area_snb_new{max-width:1200px; margin:30px auto 0; padding:0 3%;}
.snb_new{width:100%; box-sizing:border-box; padding:10px 20px; background:#f9f9f9;}
.snb_new > li{display:inline-block; margin-right:40px;}
.snb_new > li:last-child{margin-right:0px;}
.snb_new > li > a{display:inline-block; padding:5px; font-weight:500; color:#222; font-size:16px;}
.snb_new > li > a.on{color:#1839ab;}

/* footer */
#footer{position:relative; background:#323136 url(../images/common/footer_line.gif) repeat-x 0 54px; text-align:left;}
#footer ul{position:relative; max-width:1200px; margin:0 auto; padding:15px 0px;}
#footer ul > li{display:inline-block; position:relative; padding:0 15px;}
#footer ul > li > a{display:inline-block; color:#fff; font-weight:300; letter-spacing:-1px;}
#footer ul > li:first-child > a{color:#5ca0df !important}
#footer .inr{position:relative; max-width:1200px; margin:0 auto; padding:50px 0px; text-align:left;}
#footer .logo{display:block; position:absolute; left:15px; top:25px; width:181px; height:43px; background:url(../images/common/logo_footer.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap;}
#footer address{position:absolute; top:25px; right:15px; width:50%; text-align:right; color:#9794a3; letter-spacing:-0.5px; font-weight:300; word-break:keep-all;}
#footer address span{display:block; margin:0 5px; font-family:'Open Sans', Sans-serif;}
#footer p{padding:20px 15px 0px; font-family:'Open Sans', Sans-serif; font-size:15px; color:#9794a3;}
#footer p a{color:#9794a3 !important;}

.btn_top{display:block; position:absolute; top:-52px; right:15px; width:60px; height:54px; line-height:54px; background:url(../images/common/img_arrow_top.png) no-repeat 0 50%; font-size:15px; text-align:right; overflow:hidden;}
a.btn_top{color:#fff}

/* sub visual */
.area_subVisual{height:250px; 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:'Exo 2', sans-serif; font-weight:100; padding-top:80px; font-size:55px; letter-spacing:-1px;}
.area_subVisual em{padding-top:5px; font-size:18px; font-weight:400;}

/* location */
.area_location{position:relative;margin-top:10px}
.area_location li{vertical-align:middle; display:inline-block; margin:0 10px; font-size:14px; color:#fff;}
.area_location li:before{content:""; display:block; position:absolute; top:55%; margin-left:-11px; width:3px; height:3px; background:#fff; border-radius:50%;}
.area_location li.home:before{background:none;}
.area_location li img{vertical-align:middle}

/* sub title */
.tit_sub{margin-bottom:60px; padding:0 0 20px 0; border-bottom:1px solid #ccd0de; text-align:center; font-size:40px; font-weight:500; color:#151515;}

@media all and (min-width:1200px){
	header,
	header .util_area,
	.gnb_area,
	footer,
	.sub_visual{min-width:1130px;}
	header .util_area > div,
	.bottom_area,
	.gnb_area .inr > ul,
	footer > div,
	.contanier .content,
	.sub_visual > div{width:1200px; margin:0 auto;}
	.tab_area{width:1200px;}
	.area_lnb .lnb{display:block !important;}
}

@media all and (max-width:1199px){	
	nav > .gnb > li{float:left; position:relative; padding:0 20px;}
	
	#header .inr{padding-right:15px; padding-left:15px;}
	#header .inr h1{left:15px;}
	#container{padding-right:15px; padding-left:15px;}
	#content > div[class^="area_"] h2{margin:0 auto; font-size:30px;}
	#content > div[class^="area_"] h2 + p{margin:10px auto 0 auto; font-size:16px;}
}
	
@media all and (max-width:1024px){
	.area_util{position:absolute; right:60px; top:24px;}
	.area_util > a{width:40px; padding:6px 18px 6px 6px; border-radius:20px; font-size:14px; background:url(../images/common/img_btn_select.png) no-repeat 40px 50%;}

	#header .inr{height:80px;}
	#header nav .bg{top:80px;}
	.btn_m_menu{display:block;}
	#header nav .gnb > li{position:relative;}
	#header nav .gnb > li > a{transition:all 0.3s ease 0s;}
	#header nav .gnb > li > a:not(.open){display:block; padding:15px; border-bottom:1px solid #6488d8; font-size:16px; color:#fff;}
	#header nav .gnb > li > ul{display:none;}
	#header nav .gnb > li > a.active{background:#3a5592; border-bottom-color:#2d4a8c;}
	#header nav .gnb > li > a.open{display:block; position:absolute; right:10px; top:10px; width:36px; height:36px; text-indent:100%; overflow:hidden; white-space:nowrap;}
	#header nav .gnb > li > a.open:before{content:''; display:block; position:absolute; left:10px; top:10px; width:16px; height:16px; background:url(../images/common/img_more_close.png) no-repeat 0 0; background-size:100%; transform:rotate(90deg); transition:all 0.3s ease 0s;}
	#header nav .gnb > li > a.open.active:before{background:url(../images/common/img_more_open.png) no-repeat 0 0; transform:rotate(-180deg);}
	#header nav .gnb > li > ul{padding:20px; background:#3a5592; border-bottom:1px solid #2e467b;}
	#header nav .gnb > li > ul > li > a{display:block; padding:3px 0px; color:#fff; font-weight:300;}
	
	.area_lnb{position:relative; width:auto; min-height:inherit; margin:0 auto; padding:15px 3%;}
	.area_lnb .lnb.w8 > li,
	.area_lnb .lnb.w5 > li,
	.area_lnb .lnb.w4 > li,	
	.area_lnb .lnb.w3 > li,
	.area_lnb .lnb.w2 > li{float:inherit; width:auto;}
	.area_lnb .lnb{display:none; position:absolute; top:80px; left:0px; width:94%; margin:0 3% 0 3%; z-index:80; background:#3a5592;}
	.area_lnb .lnb li{margin-top:0px;}
	.area_lnb .lnb li > a{padding:7px 15px; border:0px; color:#fff; text-align:left;}
	.area_lnb .lnb li > a.on{background:transparent;}

	.snb_new > li{margin-right:20px;}
	
	#footer .logo{display:none;}
	#footer .inr{max-width:100%; padding:30px 0px; text-align:center;}
	#footer .inr > .logo{padding-left:0px;}
	#footer address{position:relative; top:0px; left:0px; width:80%; margin:0 auto; text-align:center;}
	#footer address span{display:inline-block;}
	
	.btn_m_lnb{display:block;}
	.tit_sub{margin-bottom:30px; font-size: 30px;}
}

@media all and (max-width:768px){
	.btn_open_menu{top:40px; width:22px; height:21px; padding-top:9px;}
	.btn_open_menu.active:before{top:9px;}
	.btn_open_menu.active:after{bottom:9px;}
	
	#footer ul{text-align:left;}
	#footer ul > li{padding:0 5px; line-height:1em;}
	#footer ul > li:before{width:4px; height:4px; margin-top:0px;}
	#footer ul > li > a{font-size:14px; line-height:1em;}
	#footer address{font-size:14px;}
	#footer address br{display:block;}
}

@media all and (max-width:500px){
	#header nav .bg{width:60%;}
	#header .inr h1{width: 150px;}
	#header .inr h1 > a{background-size:contain; background-position:0 50%;}
	
	.btn_top{right:15px;}
	
	.tab_area .col02 > li,
	.tab_area .col03 > li,
	.tab_area .col04 > li,
	.tab_area .col05 > li,
	.tab_area .col06 > li{width:100%;}
	.tab_area ul > li > a{border-bottom:1px solid #d3d7e3; border-left-width:0px;}
	
	#content{padding-top:30px;}
	#content > div[class^="area_"] h2{margin:0 auto; font-size:25px;}
	#content > div[class^="area_"] h2 + p{margin:10px auto 0 auto; font-size:16px;}

	.area_subVisual{height:220px;}
	.area_subVisual i{padding-top:70px; font-size:40px;}
	.area_subVisual i span{font-size:25px;}
	.area_subVisual em{font-size:14px;}

	.tit_sub{font-size:25px;}
}

@media all and (max-width:380px){
	.snb_new > li > a{font-size:14px;}
}