@charset "utf-8";
/* *******************************************************
 * filename : gnb_index.css
 * description : 전체 레이아웃 CSS
******************************************************** */

/* ****************** HEADER ********************** */
#header{
	position:absolute; height:100px; top:0; left:0; width:100%; z-index:9999; 
	-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
#headerInnerWrap{
	position:absolute; top:0px; left:0px; width:100%; height:82px; z-index:9999; 
	border-bottom:1px solid #333333;
	-webkit-transition:background-color 0.3s; transition:background-color 0.3s
}
#headerInner{
	position:relative; height:100%; margin:0px auto; 
	-webkit-transition:padding 0.3s; transition:padding 0.3s
}
#header .logo{position:relative; z-index:100; width:140px; padding-top:18px;  }
#header .logo a{display:inline-block; }
#header .logo img{vertical-align:top; max-width:100%; height:auto; }

/* -------- Header :: 언어선택 -------- */
.header-util-box{position:absolute; right:0; top:18px; z-index:100;}
/* Header :: 언어선택 */

.header-lang {text-align:right;}
.headerLangList {}
.headerLangList li{float:left; position:relative; padding-left:20px; line-height:20px;}
.headerLangList li:before{position:absolute; top:50%; left:9px; width:1px; height:10px; margin-top:-5px; background-color:#000;  content:"";} /* 세로구분바 */ 
.headerLangList li:first-child{padding-left:0}
.headerLangList li:first-child:before{display:none} 
.headerLangList li i {float:left; position:relative; top:0px; padding-right:6px;}

.head-ext-menu {float:left; background-color:#f3f3f3; padding:2px 10px 2px 10px;}
.head-ext-menu li{float:left; position:relative; padding-left:20px; line-height:20px;}
.head-ext-menu li:before{position:absolute; top:50%; left:9px; width:1px; height:10px; margin-top:-5px; background-color:#000;  content:""; } /* 세로구분바 */ 
.head-ext-menu li:first-child{padding-left:2px;}
.head-ext-menu li:first-child:before{display:none} 

.header-lang > ul > li > a{display:inline-block; text-align:center; color:#000; font-size:1.2rem; font-weight:700;}
.header-lang > ul > li.cur > a, .header-lang > ul > li > a:hover{color:#e71f10; }

/* -------- Header :: GNB(PC) -------- */
/* 상단 대메뉴 부분 */
.gnb-overlay-bg{display:none; position:absolute; top:82px; left:0; width:100%; height:318px; background:rgba(243,244,248,1.0); z-index:9997;}	/* gnb overlay BG */
#gnb{position:relative; text-align:center; top:-52px; z-index:99; margin:0px auto;}
#gnb > .menu5{display:inline-block; *display:inline;*zoom:1;}
#gnb > .menu5 > li{position:relative; float:left; word-break:keep-all; }
#gnb > .menu5 > li > a{
	position:relative; z-index:100; display:block; height:40px; padding:12px 32px 0; 
	text-align:center; color:#000; font-size:1.8rem; letter-spacing:-0.5px; font-weight:400; 
	-webkit-transition:all 0.5s; transition:all 0.5s; 
}
#gnb > .menu5 > li > a:hover, #gnb > .menu5 > li > a.on{ color:red; font-weight:800; }
#gnb > .menu5 > li > a:before{ position:absolute; left:50%; width:0;  bottom:10px; height:3px; background-color:red; content:"";  -webkit-transition:all 0.5s; transition:all 0.5s; }
#gnb > .menu5 > li > a.on:before{ position:absolute; margin-left:-50px; left:50%; width:100px;  bottom:10px; height:3px; background-color:red; content:"";  -webkit-transition:all 0.5s; transition:all 0.5s; }
#gnb > .menu5 > li:hover > a:before,
#gnb > .menu5 > li > a:hover:before{margin-left:-50px; width:100px; }

/*상단메뉴 전체 */
#gnb > .menu-all{ display:none; text-align:left; height: 315px;}
#gnb > .menu-all.open{ }
#gnb > .menu-all > li{position:relative; float:left; word-break:keep-all; width:calc(100% / 5); height: 100%; padding:30px; box-sizing:border-box;  border-left:1px solid #e7e7e7;}
#gnb > .menu-all > li:last-child { border-right:1px solid #e7e7e7; }
#gnb > .menu-all > li:before{content:""; }
#gnb > .menu-all > li:hover, #gnb > .menu-all > li.on{background-color:#e7e8ec;}
#gnb > .menu-all > li > a{position:relative; text-align:left; color:#000; font-size:1.8rem; letter-spacing:-0.5px; font-weight:400; }
#gnb > .menu-all > li > a:hover, #gnb > .menu-all > li > a.on{border-bottom:1px solid #333333;}


#gnb > .menu-all > li div{ position:relative; padding-top: 20px;}
#gnb > .menu-all > li div ul { text-align:left; }
#gnb > .menu-all > li div ul li { padding:12px 0px 0; }
#gnb > .menu-all > li div ul li a:hover , #gnb > .menu-all > li div ul li.on a{ color:red; }

/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}



/* *******************************************************
 * filename : gnb_responsive
******************************************************** */

/* ****************** HEADER ********************** */
@media all and ( max-width: 1132px ){
	/* -------- Header :: GNB(Pc) -------- */
	.header-util-box{right:20px;}
	#gnb > ul {padding:0}
	.main-content-wrapper .main-content-slider > ul > li { padding-bottom:30px; }
}
@media all and ( max-width: 1024px ){
	#header,#headerInnerWrap { height:0px; }
	#header{position:relative; text-align:center;}
	.index-wrapper #header{position:fixed;}
	#headerInnerWrap{position:fixed; z-index:99; border-bottom:0px; }

	#header .logo img{ display:none; }
	
	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{display:none;}
	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none;}

	/* -------- Header :: GNB(Mobile/기본스타일) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}	
	#gnbM{ 
		display:block; 
		position:fixed; 
		top:0px; 
		right:0px; 
		width:80%; 
		height:100%;  
		min-width:310px;
		max-width:480px;
		background-color:#fff; 
		z-index:9999; 
		transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); 
		-webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);  
		visibility:hidden;
	}


	/*모바일용 메뉴 오픈 */
	#gnbM.open{
		right:0px; 
		visibility:visible;
	}
	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:107px; overflow-y:auto;}	/* padding-top : Header 높이값 */
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:0}
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{ border-bottom:1px solid #e7e7e7;}
	#navigation > li > a { position:relative; display:block; margin:20px; color:#010101; font-size:2.4rem; font-weight:700;  }
	#navigation > li.active > a{ color:#0053a8; }

	#navigation > li.has-2dep > a{}
	#navigation > li.has-2dep.active > a{}

	#navigation > li .gnb-icon{position:absolute; top:50%; right:50px; margin-top:-10px;}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding:15px 30px 15px 30px; background-color:#ebebeb; }
	#navigation > li .gnb-2dep > li{ height:auto !important; font-size:2.0rem; }
	#navigation > li .gnb-2dep > li > a{ display:block; color:#010101; padding:12px 15px; font-weight:500;}
	#navigation > li .gnb-2dep > li.on > a, #navigation > li .gnb-2dep > li > a:hover{ color:#0053a8;  }

	#navigation > li .ext-navigation { text-align:center; border:1px solid #e7e7e7; margin:30px 0 0 0; padding:15px 0; width:inherit; }
	#navigation > li .ext-navigation > li { display:inline-block; height:auto !important; font-size:1.6rem; border-left:1px solid #e7e7e7; padding: 0 2rem ;}  
	#navigation > li .ext-navigation > li:first-child { border-left: 0;}
	#navigation > li .ext-navigation > li > a { position:relative; display:block; color:#010101; }
	#navigation > li .ext-navigation > li > a:before { }
	#navigation > li .ext-navigation > li > a:hover { color:#0053a8; }

	
	/* -------- GNB Mobile :: 스타일2 (Full Style) -------- */
	#gnbM.gnb-style-full{ 
		top: 0; 
		right: -100%;
		width:80%;
		height:100%;  
		max-width:none; 
		background: #fff url(../images/layout/m_menu_top_img.png) no-repeat; 
		background-size: 100% 107px;
	}
	#gnbM.gnb-style-full.open{
		right: 0;

	}
	.gnb-style-full .gnb-navigation-wrapper{ height:auto; width:100%; position:absolute; top:0px; bottom:0px; left:0; padding-top:0; }
	.gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{ top:107px; }
	.gnb-style-full-member .gnb-navigation-wrapper{ bottom:80px; }
	.gnb-style-full .gnb-navigation-inner{ display:table; width:100%; height:100%; }
	.gnb-style-full #navigation{ 
		padding:30px;
		display:table-cell;
		vertical-align:top;
	}
	.gnb-style-full #navigation > li{ 
		text-align:left; 
		border-bottom:1px solid #dddddd; 
		opacity:0;filter:Alpha(opacity=0); 
		-webkit-transform:translateY(-20px);
		transform:translateY(-20px);
		-webkit-transition:all 0s 0s;
		transition:all 0s 0s;
	}

	.gnb-style-full #navigation > li:last-child { border-bottom:0; outline:0; }

	.gnb-style-full #navigation > li > a {}
	.gnb-style-full.open #navigation > li{
		opacity:1.0;filter:Alpha(opacity=100); 
		-webkit-transform:translateY(0px); 
		transform:translateY(0px); 
		-webkit-transition:transform 0.8s, opacity 0.8s;
		transition:transform 0.8s, opacity 0.8s;
	}
	.gnb-style-full.open #navigation > li:nth-child(1){-webkit-transition-delay: 0.3s; transition-delay:0.3s;}
	.gnb-style-full.open #navigation > li:nth-child(2){-webkit-transition-delay: 0.4s; transition-delay:0.4s;}
	.gnb-style-full.open #navigation > li:nth-child(3){-webkit-transition-delay: 0.6s; transition-delay:0.6s;}
	.gnb-style-full.open #navigation > li:nth-child(4){-webkit-transition-delay: 0.7s; transition-delay:0.7s;}
	.gnb-style-full.open #navigation > li:nth-child(5){-webkit-transition-delay: 0.9s; transition-delay:0.9s;}
	.gnb-style-full.open #navigation > li:nth-child(6){-webkit-transition-delay: 0.9s; transition-delay:0.9s;}
	
	/* -------- GNB Mobile :: 언어선택 -------- */
	.header-util-menu-box{height:80px;}
	/* 언어선택 */
	.header-util-menu-box .lang-select{ padding:40px 20px; }
	.header-util-menu-box .lang-select li{float:left; position:relative;  }
	.header-util-menu-box .lang-select li:before{position:absolute; top:50%; left:0px; width:1px; height:10px; margin-top:-5px; background-color:#fff;  content:""; }
	.header-util-menu-box .lang-select li:first-child{ margin-left:0; }
	.header-util-menu-box .lang-select li:first-child:before{ display:none; }
	.header-util-menu-box .lang-select li > a{position:relative; display:block; min-width:80px; text-align:center ; height:40px; line-height:40px; padding:0 10px; color:#fff; font-size:1.8rem; font-weight:600;}	
	.header-util-menu-box .lang-select li.cur {position:relative; z-index:1;}
	.header-util-menu-box .lang-select li.cur a, .header-util-menu-box .lang-select li > a:hover{color:#c53132; z-index:1; font-weight:600; }
	
	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
	.nav-open-btn{background-color:#efefef;
		display:block; position:fixed; top:40px;  right:20px; z-index:10000; 
		height:30px;
		-webkit-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:28px; height:3px; background-color:#333; border-radius:5px; margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out;
	     transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active .line{ background-color:#333; }
	.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(7px) rotate(45deg);
		  transform: translateY(7px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-7px) rotate(-45deg);
		  transform: translateY(-7px) rotate(-45deg);
	}
	
	#header.fixed .nav-open-btn .line{ background-color:#333 }
}