@charset "utf-8";

#sub-wrapper {
overflow: hidden;
width: 100%;
min-width: 320px;
position: relative;
}
			
#wrapper-inner {
position: relative; 
width: 100%;
}

.area { 
max-width: 1160px; 
margin: 0px auto;
padding:0 15px;
box-sizing: border-box;
}

.gnb-area {
max-width: 900px;
margin: 0 auto; 
width: 100%;
}

.table-cell-layout {
display: table-cell; 
width: 100%; 
height: 100%; 
vertical-align: middle;
}
						
/* Header */
#header {
position: fixed; 
top: 0; 
width: 100%; 
height: 80px; 
z-index: 99;
}
	
#header-wrap {
position: absolute; 
top: 0; 
left: 0; 
height: inherit; 
width: 100%; 
z-index: 99; 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
			
#header-inner {
position: relative; 
height: inherit; 
max-width: 1760px; 
margin: 0px auto; 
padding: 0 15px; 
}
			
#header .logo {
position: relative; 
z-index: 100; 
float: left; 
padding-top: 12px; 
margin-left: -15px;
}

#header .logo a {display: block;}

#header .logo img {
display: block; 
vertical-align: top;
}

/* Gnb 1depth */
.gnb-overlay-bg { /* Gnb 1depth BG */
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 80px; 
background: rgba(19, 28, 50, 0.9); 
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
z-index: 99;
}
			
#gnbBg { /* Gnb 2depth BG */
display: none; 
position: absolute; 
left: 0; 
top: 79px; 
width: 100%; 
height: 290px; 
background: rgba(19, 28, 50, 0.9);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
z-index: 98;
}
			
#gnb {
position: absolute; 
text-align: center; 
top: 0; 
left: 0px; 
width: 100%; 
z-index: 99;
}
			
#gnb > ul {
display: inline-block; 
*display: inline;
*zoom: 1;
}

#gnb > ul > li {
position: relative; 
display: inline-block; 
text-align: center;
}
			
#gnb > ul > li > a {
position: relative; 
z-index: 100; 
display: block; 
height: 80px; 
line-height: 90px; 
padding: 1px 50px 0 50px; 
text-align: center; 
color: #ddd; 
font-family: NanumSquareWeb,"돋움", Dotum, Arial, sans-serif;
font-size: 20px; 
font-weight: 700; 
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}

#gnb > ul > li > a:before {
position: absolute; 
bottom: 0; 
left: 50%; 
display: block; 
content: ''; 
width: 0; 
height: 2px; 
background-color: #00549e; 
-webkit-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-ms-transition: all 0.3s; 
-o-transition: all 0.3s; 
transition: all 0.3s;
}

#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color: #fff;}

#gnb > ul > li > a:hover:before, #gnb > ul > li.on > a:before{
width: 70%; 
margin-left: -35%;
}
			
/* Gnb 2depth */
#gnb.total-menu > ul > li .gnb-2dep {
display: none; 
position: absolute; 
top: 80px; 
left: 0px; 
z-index: 99;
width: 100%; 
text-align: left; 
}

#gnb.total-menu > ul > li:hover .gnb-2dep {}

#gnb > ul > li .gnb-2dep ul {padding: 20px 0px;}

#gnb > ul > li .gnb-2dep ul li {
position: relative; 
padding: 10px;
}

#gnb > ul > li .gnb-2dep ul li a {
display: block; 
text-align: center; 
color: #aaa; 
font-size: 15px; 
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s
}

#gnb > ul > li .gnb-2dep ul li a:hover {color: #fff;}

/* ===================== */
#gnb .intranet {
display: inline-block;
text-align: initial;
/*font-weight: 700px;*/
right: 0;
width: 130px;
padding: 26px 15px 0 0;
position : relative;
left : 56px;

}

#gnb .intranet > a {
display: block;
color: rgba(255, 255, 255, 0.4);
border: solid 1px rgba(255, 255, 255, 0.1);
line-height: 34px;
background: url("../images/icon_arrow1.png") no-repeat 92% 50%;
padding-left: 20px;
}

#gnb .intranet > a:hover {
color: #4a9fff;
border: solid 1px rgba(255, 255, 255, 0.15);
}
.gotoDown {
position: relative;
top: 80px;
left: 1800px;
z-index: 99;
}
/* ===================== */

/* Gnb Mobile */
.nav-open-btn {display: none;}
			
#gnbM {display: none;}


/* Sub */
#sub-visual {
width: 100%; 
height: 500px; 
background-size: cover !important;
}

.sub-visual-area {
max-width: 1160px; 
margin: 0px auto;
}
			
#sub-visual .sub-visual-txt-con {
position: relative; 
text-align: left; 
display: table; 
width: 100%; 
height: 100%; 
color: #fff;
}
			
#sub-visual .table-cell-layout {padding: 310px 15px 0;}
			
#sub-visual h2 {
font-size: 70px;
text-transform: uppercase;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
}
			
#content {
padding: 70px 0 150px 0;
background: #fff;
}

#content-main {
padding: 0;
background: #fff;
}

/* Top Button */
.gotoTop {
display: none; 
position: fixed; 
bottom: 0px; 
right: 40px; 
z-index: 1000; 
width: 55px; 
height: 55px;
}

.gotoTop img {width: 100%}

/* Footer */
#footer * {box-sizing: border-box;}

#footer {
width: 100%; 
height: 350px; 
z-index: 10; 
background-color: #131c32;
}

#footerInner {
position: relative; 
max-width: 1160px; 
margin: 0 auto;
color: rgba(255, 255, 255, 0.3); 
font-weight: 700;
padding: 70px 15px 0 15px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}

#footerInner .logo {
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px 30px 30px 0;
opacity: 0.6;
}

#footerInner .copyright {
display: inline-block;
line-height: 2;
padding: 13px 0 0 20px;
}

#footerInner .copyright li {
display: inline-block;
padding-left: 10px;
margin-right: 10px;
}

#footerInner .copyright p {
padding-left: 10px;
margin-right: 10px;
}

#footerInner .intranet {
position: absolute;
right: 0;
width: 150px;
padding: 26px 15px 0 0;
}

#footerInner .intranet > a {
display: block;
color: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
line-height: 34px;
background: url("../images/icon_arrow1.png") no-repeat 92% 50%;
padding-left: 20px;
}

#footerInner .intranet > a:hover {
color: #4a9fff;
border: 1px solid rgba(255, 255, 255, 0.15);
}

/* @media */
@media all and (max-width:1440px) {
	/* Header */
	#header .logo {padding-top:12px; margin-left:0px;}
}

@media all and (max-width:1220px) {
	/* Header */
	#header, #header-wrap, #header-inner {height:80px;}
	#header-wrap {position:fixed; z-index:9998;}
	#header .logo {padding-top:12px; margin-left:-5px;}
	#header .logo img {height:55px;}
	#header.fixed #header-wrap {background-color:#131c32;}
	
	/* Gnb */
	#gnb {display:none;}
	.gnb-overlay-bg {display:none;}
	
	#gnbM {
	display:block; 
	overflow-y:auto; 
	position:fixed; 
	top:0px; 
	right:-102%;
	width:100%; 
	height:100%;  
	max-width:500px;
	background-color:#131c32; 
	z-index:999; 
	box-shadow:-2px 1px 100px 5000px rgba(255, 255, 255, 0.7); /* 본문 숨기기 효과 */
	-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);
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	visibility:hidden;
	}
	#gnbM.open {right:0px; visibility:visible;}
	#gnbM #navigation {margin-top:80px;}
					
	/* Gnb Mobile 1depth */
	#gnbM #navigation > li {border-bottom:1px solid rgba(255, 255, 255, 0.15); margin:0 30px;}
	#gnbM #navigation > li:first-child {border-top:1px solid rgba(255, 255, 255, 0.15);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:20px 30px; color:#999; font-size:17px; font-weight:700;}
	#gnbM #navigation > li > a:hover {color:#fff;}
	#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:30px; margin-top:-12px; font-family:NanumSquareWeb,"돋움", Dotum, Arial, sans-serif; font-size:20px;}
	
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep {display:none; padding:20px 0; background-color:rgba(255, 255, 255, 0.15);}
	#gnbM #navigation > li .gnb-2dep > li {}
	#gnbM #navigation > li .gnb-2dep > li > a {display:block; color:#f5f5f5; font-size:15px; padding:10px 47px;}
	#gnbM #navigation > li .gnb-2dep > li > a:hover {color:#4a9fff;}
	#gnbM #navigation > li .gnb-2dep > li.on > a {}
	
	.nav-open-btn {
	display:block; 
	position:fixed; 
	top:24px; 
	right:15px; 
	z-index:9998; 
	height:30px;
	outline:none;
	-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
	-moz-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	-o-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);
	transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
	}
	
	.nav-open-btn .line {
	display:block; 
	width:24px; 
	height:2px; 
	background-color:#ddd; 
	margin:4px auto;
	-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 .line {background-color:#ddd;}
	.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(6px) rotate(45deg);
	-o-transform:translateY(6px) rotate(45deg);
	-ms-transform:translateY(6px) rotate(45deg);
	transform:translateY(6px) rotate(45deg);
	}
	
	.nav-open-btn.active .line:nth-child(3) {
	-webkit-transform:translateY(-6px) rotate(-45deg);
	-o-transform:translateY(-6px) rotate(-45deg);
	-ms-transform:translateY(-6px) rotate(-45deg);
	transform:translateY(-6px) rotate(-45deg);
	}
	
	/* Sub */
	#content {padding:50px 0 100px 0;}
				
	/* Sub Visual & Tilte */
	#sub-visual {height:400px;}
	#sub-visual h2 {font-size:70px;}
	#sub-visual .sub-visual-txt-con {width:calc(100% - 60px); padding:0 30px;}
	#sub-visual .sub-visual-txt-con .table-cell-layout {padding-top:230px;}
	
	/* Top Button */
	.gotoTop {right:15px; width:50px; height:50px;}
}



@media all and (max-width:980px) {
	/* Sub Visual & Tilte */
	#sub-visual {height:350px;}
	#sub-visual h2 {font-size:60px;}
	#sub-visual .sub-visual-txt-con .table-cell-layout {padding-top:190px;}

	/* Footer */
	#footer {height:350px;}
	#footerInner {text-align:center; flex-direction:column; align-items:center; justify-content:center;}
	#footerInner .logo {display:block; width:100%; border-right:none; border-bottom:1px solid rgba(255, 255, 255, 0.1); padding:0 0 20px 0; margin-bottom:20px;}
	#footerInner .copyright {display:block; padding:0;}
	#footerInner .intranet {position:relative; text-align:left; width:230px; padding:30px 0 0 0;}
}



@media all and (max-width:800px) {
	/* Header */
	#header, #header-wrap, #header-inner {height:60px;}
	#header .logo {padding-top:7px;}
	#header .logo img {height:45px;}
					
	.nav-open-btn {top:15px; margin-top:0;}
	.nav-open-btn .line {width:22px; height:2px;}
	
	/* Gnb */
	#gnbM {max-width:481px;}
	
	/* Gnb Mobile 1depth */
	#gnbM #navigation {margin-top:60px;}
	#gnbM #navigation > li {margin:0 20px;}
	#gnbM #navigation > li > a {padding:20px 20px; font-size:16px;}
	#gnbM #navigation > li .gnb-icon {right:20px;}
	
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep {padding:10px 0;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:14px; padding:10px 37px;}
	
	/* Sub */
	#content {padding:40px 0 80px 0;}
	
	/* Sub Visual & Tilte */
	#sub-visual {height:300px;}
	#sub-visual h2 {font-size:50px;}
	#sub-visual .sub-visual-txt-con .table-cell-layout {padding-top:170px;}
	
	/* Top Button */
	.gotoTop {width:45px; height:45px;}

	/* Footer */
	#footer {font-size:13px; letter-spacing:-0.5px;}
	#footerInner .copyright li {padding-left:5px; margin-right:5px;}
	#footerInner .intranet {width:180px;}
}



@media all and (max-width:480px) {
	/* Header */
	#header, #header-wrap, #header-inner {height:50px;}
	#header .logo {padding-top:5px;}
	#header .logo img {height:40px;}
	
	.nav-open-btn {top:10px;}
	.nav-open-btn .line {width:20px; height:2px;}
	
	/* Gnb Mobile 1depth */
	#gnbM #navigation > li {margin:0 15px;}
	#gnbM #navigation > li > a {padding:17px 20px; font-size:15px;}
	#gnbM #navigation > li .gnb-icon {right:15px;}
	
	/* Gnb Mobile 2depth */
	#gnbM #navigation > li .gnb-2dep {padding:10px 0;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:13px; padding:10px 35px;}
	
	/* Sub */
	#content {padding:15px 0 60px 0;}
	
	/* Sub Visual & Tilte */
	#sub-visual {height:250px;}
	#sub-visual h2 {font-size:45px;}
	#sub-visual .sub-visual-txt-con {width:calc(100% - 40px); padding:0 20px;}
	#sub-visual .sub-visual-txt-con .table-cell-layout {padding-top:130px;}
	
	/* Top Button */
	.gotoTop {width:40px; height:40px;}
	
	/* Footer */
	#footer {height:300px;}
	#footerInner {padding:50px 15px 0 15px;}
	#footerInner .logo {margin-bottom:17px;}
	#footerInner .logo img {height:26px;}
	#footerInner .copyright {line-height: 1.7;}
}



@media all and (max-width:350px) {
	/* Sub Visual & Tilte */
	#sub-visual {height:230px;}
	#sub-visual h2 {font-size:40px;}
	#sub-visual .sub-visual-txt-con {width:calc(100% - 30px); padding:0 15px;}
	#sub-visual .sub-visual-txt-con .table-cell-layout {padding-top:120px;}
	
	/* Top Button */
	.gotoTop {width:35px; height:35px;}
	
	/* Footer */
	#footerInner .logo img {height:24px;}
}