@charset "utf-8";

/* 헤더 */
header {position:fixed;width:100%;left:0;top:0;z-index:1000;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:0;background-color:rgba(0,0,0,0.5);}
header:before {position:absolute;top:100px;left:0;content:"";display:block;width:100%;height:1px;background-color:rgba(255,255,255,0.3);z-index:999}
header h1 {position: relative; display: block; width:20%; min-width:110px; height:100px; margin:0 auto; z-index:100;}
header h1 .logo {position: absolute; top:50%; left:50%; display:block; width:350px; height:35px; margin-left:-175px; margin-top:-17px; background: url("/eng/images/logo.png") no-repeat center center;}
header h1 .logo em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
header .menu_btn {position:absolute;left:40px;top:35px;width:40px;z-index:1000}
header .menu_btn button{width:40px;height:42px;background:url("/images/menu_btn.png") no-repeat center;}
header .menu_btn.on button{ background:url("/images/menu_close.png") no-repeat center; }

/* 유틸 */
header .util{position:absolute; top:35px; right:70px; z-index:1000}
header .util:after{display:block; content:""; clear:both;}
header .util .link {position:relative; float:left; }
header .util .link a {font-family:'Malgun Gothic'; font-size:14px; font-weight:700; line-height:40px; color:#fff;}
header .util .sel_lang {position:relative; float:left;}
header .util .sel_lang:before {position:absolute; top:13px; left:10px; content:''; width:1px; height:15px; background:rgba(255,255,255,0.5);}
header .util .sel_lang > a {display:block; width:70px; font-family:'Malgun Gothic'; font-size:14px; font-weight:700; color:#fff; line-height:40px; text-align:center; background:url("/images/sel_arrow.png") right 5px top 50% no-repeat ; }
header .util .sel_lang > a.on {}
header .util .sel_lang > div {position:absolute; top:35px; left:5px; display:none; width:70px;background:rgba(255,255,255,0.95);}
header .util .sel_lang > div > a {display:block; font-family:'Malgun Gothic'; font-size:12px; font-weight:700; color:#555; line-height:2em; text-align:center; border-bottom:1px solid #aaa;}
header .util .sel_lang > div > a:last-child {border-bottom:0;}
header .util .sel_lang > div > a.on {color:#000;}

/* nav */
header #nav {position:absolute;top:0;right:0;width:100%;height:500px;background:rgba(30,30,30,0.85); box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; display:none;}
header #nav:before {position:absolute;top:160px;left:0;content:"";display:block;width:100%;height:1px;background-color:rgba(255,255,255,0.2);}
header #nav .logo {display:none;}
header #nav #gnb {position:relative;margin-top:100px}
header #nav #gnb > li {position:relative;float:left;width:25%;padding:0;text-align:center;}
header #nav #gnb > li:hover:after {position:absolute; top:59px; left:50%; margin-left:-25%; content:""; display:block; width:50%; height:2px; background:#fff;}
header #nav #gnb > li > a {display:block; height:60px; line-height:60px; font-size:19px; font-weight:500; color:#f8f8f8; box-sizing:border-box;}
header #nav #gnb > li > a:hover,
header #nav #gnb > li > a:focus{color:#fff !important;}
header #nav #gnb > li > .depth2 { margin-top:30px;}
header #nav #gnb > li > .depth2 > li {margin:0 0 15px 0; text-align:center}
header #nav #gnb > li > .depth2 > li:last-child {margin:0;}
header #nav #gnb > li > .depth2 > li > a {font-size:18px; color:#aaa;}
header #nav #gnb > li > .depth2 > li > a:hover {color:#fff;}

/* 미디어쿼리 시작 */
@media all and (min-width:1201px) {
	header #nav  {left:0 !important;}
	.gnbBg {display:none !important;}
}
@media all and (max-width:1199px){
	header {z-index:1001; background-color:#fff;}
	header:before {top:60px;}
	header h1 {height:60px; z-index:9999;}
	header h1 .logo {width:250px;margin-left:-125px;background: url("/eng/images/logo_on.png") no-repeat;background-size:contain;}
	header .menu_btn {position:absolute;left:15px;top:10px;z-index:1002;}
	header .menu_btn button {background-size:25px; background:url("/images/menu_btn_on.png") no-repeat center;}
	header .menu_btn.on button{background:url("/images/menu_close_on.png") no-repeat center;background-size:20px;}
	header .util{display:none;}
	header #nav {display:block !important; position:fixed; left:0; top:0; width:300px; height:100%;  z-index:1001; padding:0; left:-300px; background:#fff;}
	header #nav:before{display:none;}
	header #nav #gnb {margin-top:60px}
	header #nav #gnb > li {float:none;width:100%;margin:0;padding:0;text-align:left;border-top:1px solid #ddd;}
	header #nav #gnb > li > a {display:block;padding-left:20px;font-size:17px;font-family:'Noto Sans KR';font-weight:500;color:#222;background: url("/images/menu_plus.png") no-repeat 92% center; background-size: 14px;}
	header #nav #gnb > li > a:hover,
	header #nav #gnb > li > a:focus{color:#003591 !important;}
	header #nav #gnb > li.on > a {background: url("/images/menu_minus.png") no-repeat 92% center; background-size: 14px; color:#003591;}
	header #nav #gnb > li > .depth2 {display:none;margin:0;padding:20px;border-top:1px solid #ddd;background:#f1f1f1}
	header #nav #gnb > li > .depth2 > li {margin:0 0 20px 0;line-height:16px; text-align:left;}
	header #nav #gnb > li > .depth2 > li > a {font-size:15px;color:#454545;}
	.gnbBg { position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.8); z-index:1000; display:none;}
}


/* footer */
footer{width:100%;margin:0 auto;background:#1b1c1e;color:#fff;}
	#footer{position:relative;max-width:1300px;height:150px;margin:0 auto;padding-top:50px;}
	.footer-left {position:relative; width:100%; padding-top:50px;}
	.footer-logo {position:absolute; top:0; left:0; display:block; width:250px;height:26px; background: url("/eng/images/footer_logo.png") no-repeat center center;}
	.footer-logo em {position: absolute; top:0; left:0; width: 0; height: 0; overflow: hidden; opacity: 0;}
	
	address, .copy{display:block; margin:0; font-style:normal; color:#fff; font-size:14px; clear:both;}
	.copy{font-family:'Tohoma'; font-size:13px;}
	
	.footer-right {position:absolute; top:50px; right:0; }
		.print-btn{display:inline-block; margin-right:10px;}
		.print-btn a.p-btn {display:block; width:180px; padding-left:20px; font-size: 16px; color: #fff; line-height:40px; border:1px solid #ccc; background: url("/images/link-arrow.png") 92% 50% no-repeat;}
		.link-box{position:relative; display:inline-block; width:200px; height:40px; text-align:left; letter-spacing:-0.25px;}
		.link-box .link-btn{display:block; padding-left:20px; font-size:16px; line-height:40px; color:#fff; text-align:left; border:1px solid #ccc;}
		.link-box .link-btn img{position:absolute; right:15px; top:50%; margin-top:-2px;}
		.link-list{position:absolute;bottom:40px;left:0px;width:100%;background-color:#fff;border:1px solid #aaa;border-bottom:0;z-index:11;display:none;box-sizing:border-box;}
		.link-list a{display:block;padding:5px 10px;color:#555;font-size:15px;}
		.link-list a:hover{background:#eee;}

@media all and (max-width:1240px) {
	footer {width:94%; padding:0 3%;}
}
@media all and (max-width:1024px) {
	footer {}
	#footer {height:200px; padding-top:0;}
		.footer-left {width:100%; padding:70px 0 20px;}
		.footer-logo {top:25px;left:50%;margin-left:-125px;background-size:contain;}
		address, #footer p{text-align:center;}
		address{font-size:13px;}
	
		.footer-right {position:relative; width:100%; top:0;}
		.print-btn{margin-right:-4px; width:50%;}
		.print-btn a.p-btn {width:100%; line-height:30px; font-size: 14px; border-right:0; background-position:88% 50%;}
	 	.link-box {margin-right:-4px; width:100%; height:30px;}
	 	.link-box .link-btn {font-size: 14px; line-height:30px;}
		.link-list{bottom:30px;}
}