@charset "utf-8";
html {width: 100%;height: 100%;min-height: 100%;}
body {font-size:16px; font-family:"Noto Sans KR"; color:#000; position: relative;height: 100%;min-height: 100%;font-weight:400;line-height: 1.5;}
a {text-decoration:none; color:inherit;}
.auto { margin:0 auto;position:relative;width:1200px;}
.auto:after,.clearFix:after,ol:after,ul:after,dl:after {content:""; display:block;width:0; height:0; overflow:hidden;clear:both;font-size:0; overflow: hidden;}
em , strong {font-weight: 700;}
ul.list > li { float: left;}
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html.fix {overflow-y: hidden;}


/* skip */
#skipNav {height:0; overflow: hidden;}
#skipNav li a {display: block;font-size:16px;width:100%;position:absolute;top:-9999px;left:0;text-align:center;z-index:999999;}
#skipNav li a:focus, #skipNav li a.on {position:absolute;top:0;left:0;font-weight:bold;color:#fff;background:#272727;padding:20px 0;color:#ffffff;}


/* header */
#header {position: fixed; width: 100%;height: 80px;z-index:99;background:#fff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out ;
-ms-transition: all 0.3s ease-out ;
-o-transition: all 0.3s ease-out ;
transition: all 0.3s ease-out ;
}
#header:after {}
#header .logo {float: left;}
#header .logo a {display: block;padding: 27px 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out ;
-ms-transition: all 0.3s ease-out ;
-o-transition: all 0.3s ease-out ;
transition: all 0.3s ease-out ;
}
#header.on { height:60px;}
/* #header.on { height:60px; background: rgba(43,56,73,0.95); } */
#header.on .logo a { padding: 14px 0;}
#header.on .gnbList a { line-height: 60px;height: 70px;}

#header.mobileOn { height:60px; background:#fff; /* rgba(12,76,163,0.9); */}
#header.mobileOn .logo a { padding: 20px 0;padding-left: 14px;}
#header.mobileOn .gnbList a { line-height: 50px;height: 50px;}

#header.on .language   {margin-top:15px;}
/* #header.on .gnbList a {color: #000;}
#header.on .language  {border-color: #000;color: #000;}
 */


/* gnb */
#header #gnb { float: right;padding-right:100px;}
#header #gnb > ul { float: left;}
#header .gnbList > li {float: left;position: relative;}
#header .gnbList a {display: block; font-weight: 500;height: 80px;line-height: 80px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out ;
-ms-transition: all 0.3s ease-out ;
-o-transition: all 0.3s ease-out ;
transition: all 0.3s ease-out ;
}
#header .gnbList > li > h2 > a {font-size: 16px; color: #444; padding: 0 30px;}
#header .gnbList > li > h2 > a i {font-size: 12px;margin-left: 10px;}
#header .gnbList > li:hover > h2 > a {color:rgba(12,77,162,0.97)}
#header .gnbList > li > .sub {overflow: hidden;width: 100%;position: absolute; display: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
#header .gnbList > li > .sub a {font-size: 14px; height: 40px;line-height: 40px; text-align: center;background: rgba(12,77,162,0.97);color: #fff;}
#header .gnbList > li > .sub li:hover a {background:rgba(50,50,50,0.97) ;}
#header .gnbList > li .depth03 {display: none;}
#header .language {width: 70px;height: 30px;float:left;margin-top: 25px;overflow: hidden;border: 2px solid #444;  color: #444; font-size: 12px;background:#fff; /* display: none; */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out ;
-ms-transition: all 0.3s ease-out ;
-o-transition: all 0.3s ease-out ;
transition: all 0.3s ease-out ;
}
#header .language  a {height: 30px;line-height: 26px;display: block;padding-left: 10px;}
#header .language > a i {margin-left: 20px;}

#header .btnBlog {position:absolute;right:15px;top:30px;}
#header.on .btnBlog {top:20px;}

#header .btnRemote {position:absolute;right:0;top:20px;}
#header.on .btnRemote {top:10px;}
/* mobile */
/* .btnAll {position: absolute; right:10px; top:0;display: none;padding: 20px 0;}
.btnAll img {height: 20px;}*/
.btnAll {display:block}
.btnAll {position:absolute;top:0;right:0;display:none;height:60px;width:60px;z-index:60}
.btnAll span{position:absolute;right:15px;top:0;display:block;width:18px;height:1px;background:#fff;transform: rotate(0deg);-o-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);	transition: .25s ease-in-out;-o-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-webkit-transition: .25s ease-in-out}
.btnAll span:nth-child(1){top:22px;}
.btnAll span:nth-child(2){top:28px;}
.btnAll span:nth-child(3){top:34px;}

/* footer */
#footer {padding: 60px 0 30px;border-top: 1px solid #d9d9d9; text-align:center;position:relative;}
.fLogo {float: left;margin-top: 10px;}
.fMenu a {display:inline-block;font-size: 13px;color: #808080;line-height: 1.8;position:relative;}
.fMenu a.btnSitemap {margin-right:10px;}
.fMenu a.btnSitemap:after {content:"";position:absolute;top:7px;right:-8px;width:1px;height:10px;background:#999;}
address {f loat: left;font-size: 13px;color: #808080;line-height: 1.8;mar gin-left: 30px; }
address span {display:inline-block;padding:0 5px;position:relative;}
address span:after {content:"";position:absolute;top:7px;right:-2px;width:1px;height:10px;background:#999;}
address span:nth-child(3):after {display:none;}
address .btnSitemap {padding:0 5px;}
address .copyright {font-size: 12px;color: #b2b2b2;display: block; text-transform: uppercase;}
address .copyright:after {display:none;}

.subsidiary {position:absolute;top:20px;left:50%;margin-left:-110px;width:220px;height:30px;border:1px solid #333;font-size:13px;color:#333;z-index:999;
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.subsidiary > div > a {display:block;line-height: 30px;}
.subsidiary > div > a img {padding:12px 0 12px 10px;}
.subsidiary > div {position:relative;}
.subsidiary > div ul {position:absolute;width:220px;height:350px;top:-350px;text-align:left;background:#fff;border:1px solid #333;padding:15px 5px 15px 15px;display:none;
	-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
}
.subsidiary > div ul li {margin-bottom:10px}
.subsidiary > div ul li:last-child {margin-bottom:0;}
.subsidiary > div ul li a {font-size:13px;color:#666;letter-spacing:-1px;}
.subsidiary > div ul li span {display:block;font-size:14px;color:#333;font-weight:700;margin-top:10px;}
.subsidiary > div ul li:first-child span {margin-top:0;}

/* selectBox */
.selectBox {position: relative;}
.selectBox > a { font-size: 12px;display: block;width:119px ;height: 23px; border: 1px solid #256d76;line-height: 23px;padding:  0 10px ;background: url("../images/layout/bgSelect.png") no-repeat 120px 50%;}
.selectBox > ul li {margin-top: -1px;}
.selectBox > ul {position: absolute;display: none;}
.selectBox > ul a {display: block;font-size: 12px;display: block;width:119px ;height: 23px; border: 1px solid #256d76;line-height: 23px;padding:  0 10px ;background: #163d42;}


/*  */
.historyBox {text-align: center;padding: 50px 0;}
.historyList {display: inline-block;}
.historyList > li > dl {position: relative;padding-left: 300px; text-align: left;}
.historyList > li > dl > dt {position: absolute;left:0; top:0;line-height: 1.2;}
.historyList > li > dl > dt .copy {display: block;font-size:20px;color: #808080;}
.languageENG .historyList > li > dl > dt .copy {font-size:18px;}
.historyList > li > dl > dt .year{display: block;font-size:45px;color: #0c4da2; font-weight: 500;}
.historyList > li > dl > dd {}
.historyList > li .subYear > li dl {padding-bottom:30px;background: url("../images/contents/bgHistoryLine.png") repeat-y 10px 0;}
.historyList > li .subYear li dt {padding-left:100px;font-size: 32px; font-weight: 500; background: url("../images/contents/bgYear.png") no-repeat 0 50% #fff; line-height: 1;margin-bottom: 20px;}
.historyList > li .subYear li dd {padding-left:100px;font-size: 14px; color: #666;}
.historyList > li .subYear li dd li {position: relative;padding-left: 10px;}
.historyList > li .subYear li dd li:after {content: "";display: block;width: 5px;height: 1px; background: #666;position: absolute; left:0; top:50%;}


#btnBack {display: block;font-size: 18px;width: 50px;height: 50px;border: 1px solid rgba(0,0,0,0.1);text-align: center;line-height: 50px; position: fixed; bottom:10px; left:10px;
background: rgba(255,255,255,0.8); z-index:99; display: none;padding-top: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#btnTop {display: block;font-size: 18px;width: 50px;height: 50px;border: 1px solid rgba(0,0,0,0.1);text-align: center;line-height: 50px;position: fixed; bottom:10px; right:10px;
background: rgba(255,255,255,0.8); z-index:99; display: none;padding-top:15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

@media screen and (max-width:1200px) {
	.auto {width: 100%;}
	#header #gnb {margin-right: 10px;padding-right:50px;}
	#header .btnBlog {right:10px;}
	
}
@media screen and (max-width:1024px){
	#header .gnbList > li > h2 > a {padding:0 20px;}
}
@media screen and (max-width:980px) {



	#header {height:60px;}
	#header.on .logo a {padding: 20px 0;padding-left: 15px;}
	#header .logo a {padding: 20px 0;padding-left: 15px;}
	#header .logo img {height: 18px; width: auto;}
	
	#header #gnb {position: fixed; top:-100%;width: 100%;height: 100%; min-height: 100%;margin-right: 0; background:rgba(43,56,73,0.97);overflow-y: scroll;}
	#header #gnb > ul { float: none;position: relative;height: 120%;}
	#header .gnbList > li {float: none;position: relative;}
	#header .gnbList > li > h2 > a { height: 50px;line-height: 50px; font-size: 16px; font-weight:300; border-bottom:1px solid #414c5c;}
	#header .gnbList > li > h2 > a i {font-size: 12px;margin-left: 10px; font-weight:300;}
	#header .gnbList > li > .sub li:hover a {background: #303843; }
	#header .gnbList > li > .sub {width: 100%;position: relative;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;}
	#header .gnbList > li > .sub a {background:rgba(30,39,51,0.97); text-align: left;padding-left: 30px; font-weight:300; line-height:40px;}
	#header .gnbList > li > h2 > a {font-size: 16px; color: #fff; padding: 0 30px;}
	#header .gnbList > li:hover > h2 > a{color: #fff;}

	#header .language {position:absolute; bottom:80px; right:20px; ma rgin-right:20px; z-index:999;}
	.btnAll {display: block;  height:60px;width:60px;z-index:60} 
/* 	.btnAll {position:absolute;top:0;right:0;display:none;} */
	.btnAll span{position:absolute;right:20px;top:0;display:block;width:20px;height:1px;background:#333;transform: rotate(0deg);-o-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);	transition: .25s ease-in-out;-o-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-webkit-transition: .25s ease-in-out;	}
	.btnAll span:nth-child(1){top:22px;}
	.btnAll span:nth-child(2){top:28px;}
	.btnAll span:nth-child(3){top:34px;}
	.btnAll.open span:nth-child(1){transform: rotate(135deg);top:28px;} 
	.btnAll.open span:nth-child(3){transform: rotate(-135deg);top:28px;} 
	.btnAll.open span:nth-child(2){opacity: 0;} 

	#header .btnBlog {top:20px;right:60px;}

	#header .gnbList > li > h2 > a {position: relative; padding-left:20px;}
	#header .gnbList > li > h2 > a > i {display:none;}
	#header .gnbList > li > h2 > a > span.icon {position:absolute;top:50%;right:25px;display:block;height:13px;width:13px;margin-top:-7px;}
	#header .gnbList > li > h2 > a > span.icon span{position:absolute;left:0;top:50%;display:block;width:13px;height:1px;background:#fff;
		transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);	
		transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-webkit-transition: .25s ease-in-out
	}
	#header .gnbList > li > h2 > a > span.icon span:nth-child(1){
		transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg)
	}
	#header .gnbList > li.open > h2 > a > span.icon span:nth-child(1){
		transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg)
	}
	.lnbWrap {display:none;}

	#footer {padding:60px 15px 20px; }
	address {font-size: 13px; line-height: 1.5;}
	address .copyright {font-size: 10px; margin-top:5px;}
}	


@media screen and (max-width:768px) {
	.historyBox {padding:20px;}
}
@media screen and (max-width:640px) {
	.historyList > li > dl {padding-left: 0;}
	.historyList > li > dl > dt {position: relative;margin: 30px 0; }
	.historyList > li > dl > dt .year {font-size: 36px;}
	.historyList > li .subYear li dt {font-size:24px;}
	.historyList > li .subYear li dd li {font-size:13px;}
	/* #btnBack {display: block;} */
}