@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2018-01-16
******************************************************** */

@import url("./font.css");	/* 나눔고딕 */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

/* layout */
body, table, th, td, button, select, input, textarea {
	font-family:'Play', 'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:15px;
	color:#666;
}

body { background-color:#fff; word-break:keep-all}
#wrap {overflow:hidden; width:100%; min-width:320px; position:relative; } /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.font-noto{font-family:'Noto Sans KR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.font-cafe24{font-family:'Cafe24Danjunghae','Noto Sans KR',sans-serif;}
.font-cafe24-play{font-family: 'Play','Cafe24Danjunghae','Noto Sans KR',sans-serif;}
/* ****************** 공통클래스 ********************** */
#content{margin-bottom:130px}
.area{ max-width:1100px; margin:0px auto;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box{ max-width:1460px; margin:0px auto; }
.area-1500{max-width:1500px; margin:0px auto;}
.big-area-box{ max-width:1715px; margin:0px auto; }
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:inherit; color:inherit; vertical-align:middle;}
.text-ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.table-layout{display:table; width:100%; height:100%; }
.table-cell-layout{display:table-cell; width:100%; height:100%; vertical-align:middle;}
.over-img{overflow:hidden;}
.over-img img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
a:hover .over-img img{
	-ms-transform: scale(1.1) rotate(0.02deg);
	  -o-transform: scale(1.1) rotate(0.02deg);
	  -moz-transform: scale(1.1) rotate(0.02deg);
	  -webkit-transform: scale(1.1) rotate(0.02deg);
	  transform: scale(1.1) rotate(0.02deg);
}
@media all and (max-width:1750px){
	.big-area-box{padding:0 15px;}
}
@media all and (max-width:1620px){
	.area-box{padding:0 15px;}
}
@media all and (max-width:1720px){
	.area-1500{padding:0 15px;}
}
@media all and (max-width:1120px){
	.area{padding:0 15px;}
}
@media all and (max-width:800px){	
	#content{margin-bottom:60px}
}
@media all and (max-width:480px){	
	#content{margin-bottom:80px}
}
/* ****************** HEADER ********************** */
#header{/*position:relative;*/position:absolute; width:100%; height:90px; top:0; left:0; -webkit-transition:top 0.4s;-moz-transition:top 0.4s;-o-transition:top 0.4s;-ms-transition:top 0.4s;transition:top 0.4s}
#headerInnerWrap{/*position:fixed;*/ position:absolute; top:0; left:0; height:90px; 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}
#headerInner{position:relative; height:90px; margin:0px auto; }
#header .logo{position:relative; float:left; padding:22px 0; z-index:999;}		/* padding값 적절히 바꿔주세요 */
#header .logo img{display:block; vertical-align:top;}
#header .logo img.sub-logo{display:none;}
#header .logo a{display:block;}

/* -------- Header :: UTIL BOX -------- */
.header-util-box{position:absolute; top:50%; right:0; margin-top:-11px; margin-right:120px; z-index:999}

/* Header :: 언어선택 */
.header-lang {position:relative; float:right; width:124px; height:30px; border:1px solid #5c5c5c; border-color:#333; z-index:100; }
.header-lang .lang-open-btn {overflow:hidden; position:relative; display:block; height:100%; padding:0 10px; font-size:10px; line-height: 30px; color:#333; }
.header-lang .lang-open-btn i {display:inline-block; margin-right: 6px; vertical-align: middle; font-size:20px; margin-top:-2px; }
.header-lang .lang-open-btn .arrow{position:absolute; top:0px; right:0px;}
.header-lang .lang-open-btn .arrow i{font-size:16px;}
.header-lang > ul {position:absolute; top:30px; left:-1px; z-index:10; width:100%; border:1px solid #5c5c5c; background-color:#fff; opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.header-lang > ul > li > a{display:block; padding:0 10px; font-size:10px; line-height: 30px; color:#333;}
.header-lang > ul > li > a:hover{background-color:#fff; background-color:rgba(255,255,255,0.7); }
.header-lang.open .lang-open-btn .arrow i{transform:rotate(180deg); margin-top:-3px;}
.header-lang.open > ul {opacity:1;filter:Alpha(opacity=100); visibility:visible;}

/* Header :: 사이트맵 */
.sitemap-open-btn{float:left; color:#222;}
.sitemap-open-btn i{vertical-align:middle; font-size:24px}


/* Header :: 사이트맵, 네비게이션 버튼 */
.header-line-btn{
	position:absolute; top:50%; right:0; z-index:9998; margin-top:-15px; /* margin-top: button 크기의 1/2 px */
	height:30px;
	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);  
	-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);
}
.header-line-btn .line{
	display:block; width:28px; height:3px; background-color:#333; border-radius:5px; margin: 3px auto;
	-webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 }
.header-line-btn.active .line{background-color:#fff;}
.header-line-btn.active .line:nth-child(2), .header-line-btn.active .line:nth-child(4){opacity: 0;}
.header-line-btn.active .line:nth-child(1){
	 -webkit-transform: translateY(6px) rotate(45deg);
	  -ms-transform: translateY(6px) rotate(45deg);
	  -o-transform: translateY(6px) rotate(45deg);
	  transform: translateY(6px) rotate(45deg);
}
.header-line-btn.active .line:nth-child(3){
	 -webkit-transform: translateY(-6px) rotate(-45deg);
	  -ms-transform: translateY(-6px) rotate(-45deg);
	  -o-transform: translateY(-6px) rotate(-45deg);
	  transform: translateY(-6px) rotate(-45deg);
}
.nav-open-btn{display:none;}

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:97;}	/* gnb overlay BG */
#gnbBg{display:none; position:absolute; left:0; top:66px; width:100%; height:300px; background:#ff6100; border-bottom:1px solid #111; z-index:98}	/* gnb 2depth BG */
#gnb{position:absolute; top:0; left:0px; width:100%; z-index:99;}
#gnb:after{position:absolute; content:""; width:100%; height:1px; bottom:1px; left:0; background-color:rgba(0,0,0,0.1)}
#gnb > ul{text-align:center}
#gnb > ul > li{position:relative; /*float:left;*/ display:inline-block; }
#gnb > ul.menu5 > li{width:14%;}
#gnb > ul > li > a{position:relative; z-index:100; display:block; height:90px; line-height:90px; text-align:center; color:#222; font-size:18.5px; letter-spacing:0; font-weight:600; overflow:hidden; /*transition:all 0.2s;*/}
#gnb > ul > li.active > a{color:#0b486d}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#fff; background-color:rgb(11,72,109);}
#gnb > ul > li > a span{position:relative; display:block;}
#gnb > ul.clearfix > li > a span.over, #gnb > ul.clearfix > li > a span.out{display:block; width:100%; height:100%; position:relative; top:0; -webkit-transition:top 0.4s; -moz-transition:top 0.4s; -o-transition:top 0.4s; -ms-transition:top 0.4s; transition:top 0.4s;}
#gnb > ul.clearfix > li:hover > a span.over,
#gnb > ul.clearfix > li:focus > a span.over,
#gnb > ul.clearfix > li:hover > a span.out,
#gnb > ul.clearfix > li:focus > a span.out{top:-55px;}


/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	/* display:none; */
	position:absolute; 
	top:110px; 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:left; 
	visibility:hidden;
	opacity:0;filter:Alpha(opacity=0); padding-bottom:20px
}
#gnb.each-menu > ul > li .gnb-2dep:before{
	content:""; 
	position:absolute; top:-20px; left:0px; right:0px; 
	height:0; 
	background-color:rgb(11,72,109); 
	transition:all 0.4s
}
#gnb.each-menu > ul > li .gnb-2dep ul{padding:0px 0px 15px 0;}
#gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:8px 7px; opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0s 0s;-moz-transition:all  0s 0s;-o-transition:all  0s 0s;-ms-transition:all  0s 0s;transition:all  0s 0s; }
#gnb.each-menu > ul > li .gnb-2dep ul li a{ display:block; color:#fff; font-size:16px; font-weight:400; text-align:center; line-height:1.3; opacity:0.7; transition:all 0.2s}
#gnb.each-menu > ul > li .gnb-2dep ul li a:hover{font-weight: 500; opacity:1.0;filter:Alpha(opacity=100);}
/* over했을때 */
#gnb.each-menu > ul > li:hover .gnb-2dep:before{height:100%}
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#gnb > ul > li .gnb-2dep.open ul li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1){-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2){-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3){-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4){-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5){-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.5s;transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6){-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;-ms-transition-delay: 0.6s;transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7){-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;-ms-transition-delay: 0.7s;transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8){-webkit-transition-delay: 0.8s;-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-ms-transition-delay: 0.8s;transition-delay:0.8s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(9){-webkit-transition-delay: 0.9s;-moz-transition-delay: 0.9s;-o-transition-delay: 0.9s;-ms-transition-delay: 0.9s;transition-delay:0.9s;}


/* -------- Header :: GNB(Mobile) -------- */
#gnbM{display:none}

/* -------- Header :: 스타일변경 -------- */
/* Header :: 헤더가 비주얼 배경위에 있는 스타일 */
#header.fixed-header {position:fixed; top:0; left:0; width:100%; z-index:99;}
#header.fixed-header #headerInnerWrap{ }
#header.fixed-header .logo a{}
#header.fixed-header .header-search-open-btn,#header.fixed-header  .header-search-close-btn,#header.fixed-header  .header-search-btn{color:#fff; border-color:rgba(255,255,255,0.2);}
#header.fixed-header .header-lang {border-color:rgba(255,255,255,0.2); }
#header.fixed-header .header-lang .lang-open-btn{color:#fff;}
#header.fixed-header .header-lang > ul {border-color:rgba(255,255,255,0.6);}
#header.fixed-header .header-line-btn .line{background-color:#fff}
#header.fixed-header #gnb{border-color:rgba(0,0,0,0.1);}
#header.fixed-header #gnb > ul > li > a{color:#222;}

/* -------- Header :: 서브 -------- */
#header.sub .header-search-inner .header-search-inner-box{border-bottom-color:#bbbbbb;}
#header.sub .header-search-open-btn, #header.sub .header-search-close-btn, #header.sub .header-search-btn{color:#00346a;}
#header.sub .header-search-inner .header-search-word{color:#3a3a3a !important;}
#header.sub .header-search-inner .header-search-word::-webkit-input-placeholder{color:#3a3a3a !important;} 
#header.sub .header-search-inner .header-search-word::-moz-placeholder{color:#3a3a3a !important;}
#header.sub .sitemap-open-btn{border-color:#ddd;color:#3a3a3a;}
#header.sub .header-line-btn.active .line{background-color:#fff;}

@media all and ( min-width: 1121px ){	
	/* -------- Header :: 스타일변경 -------- */	
	/* Header :: 마우스 OVER 스타일 (마우스 오버시 헤더의 배경색이 변경되는 경우에만 삽입) */
	#header.fixed-header.over #headerInnerWrap{background:#fff;}
	#header.fixed-header.over .logo a{background:url(/images/common/logo_open.png) no-repeat}
	#header.fixed-header.over .logo img{display:none}
	#header.fixed-header.over .header-search-open-btn,#header.fixed-header.over  .header-search-close-btn,#header.fixed-header.over  .header-search-btn{border-color:#ff6100; color:#ff6100;}
	#header.fixed-header.over .header-lang{border-color:#ff6100;}
	#header.fixed-header.over .header-lang .lang-open-btn{color:#ff6100}
	#header.fixed-header.over .header-line-btn .line{background-color:#ff6100}
	#header.fixed-header.over #gnb{border-color:rgba(0,0,0,0.2)}
	#header.fixed-header.over #gnb > ul > li > a{color:#333;}
	#header.fixed-header.over #gnb > ul > li > a:hover,#header.fixed-header.over  #gnb > ul > li.on > a{color:#fff;}
	/* Header :: FIXED 스타일 */
	/*#header.fixed #headerInnerWrap{top:-71px; background-color:#00346a;}*/

}
@media all and ( max-width: 1440px ){
	/* -------- Header :: GNB(Pc) -------- */
	#gnb{margin-left:100px}
	.header-util-box{margin-right:90px}
}
@media all and ( max-width: 1300px ){	
	#gnb > ul > li > a{font-size:17px}
	#gnb > ul.menu5 > li{width:13%}
	#gnb.each-menu > ul > li .gnb-2dep ul li a{font-size:14px}
	.header-util-box{margin-right:30px}


}
@media all and ( max-width: 1120px ){	
	#header.fixed{position:fixed; top:0; left:0; width:100%; z-index:999}
	#header.fixed #headerInnerWrap{background:#fff}
	#header, #headerInnerWrap, #headerInner{height:80px;}
	#header .logo{padding:16px 0;}
	#header.sub #headerInnerWrap, #header.fixed #headerInnerWrap{box-shadow: 1px 1px 3px rgba(0, 0, 0, .1)}
	#header.fixed-header.fixed #headerInnerWrap{top:0; background-color:#00346a; }
	#header.sub.fixed-header.fixed #headerInnerWrap{background-color:#fff;}
	
	/* -------- Header :: UTIL BOX -------- */
	.sitemap-open-btn{display:none}
	.header-util-box{right:60px;}
	/* Header :: 사이트맵, 네비게이션 버튼 */
	.header-line-btn{display:none;}
	.nav-open-btn{display:block; right:15px;}

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

	/* -------- Header :: GNB(Mobile) -------- */
	#gnbM{ 
		display:block; 
		overflow-y:auto; 
		position:fixed; 
		top:0px; 
		right:-82%;
		width:80%; 
		height:100%;  
		max-width:280px; 
		background-color:#0b486d; 
		z-index:999; 
		box-shadow:-2px 1px 11px rgba(0, 0, 0, .3);
		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);  
		-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);		/* gnb OPEN 속도 */
		visibility:hidden;
	}
	#gnbM.open{
		right:0px; 
		visibility:visible;
	}
	#gnbM #navigation{margin-top:80px;}	/* Header 높이값 */
	/* GNB Mobile :: 1차 */
	#gnbM #navigation > li{border-bottom:1px solid rgba(255,255,255,0.2);}
	#gnbM #navigation > li > a {position:relative; display:block; padding:15px; color:#fff; font-size:17px;  }
	#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:10px; margin-top:-14px;}
	#gnbM #navigation > li .gnb-icon i{font-size:24px;}
	/* GNB Mobile :: 2차 */
	#gnbM #navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#3a3a3a; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);}
	#gnbM #navigation > li .gnb-2dep > li{}
	#gnbM #navigation > li .gnb-2dep > li > a{display:block; color:#fff; font-size:14px; padding:10px 15px; opacity:0.7;filter:Alpha(opacity=70);}
	#gnbM #navigation > li .gnb-2dep > li.active > a{opacity:1.0;filter:Alpha(opacity=100);}
	/* GNB Mobile :: 3차 */
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep{display:none; padding:10px 20px; background-color:#aaa; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .3);}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#fff;}
	#gnbM #navigation > li .gnb-2dep > li > .gnb-3dep > li > a:before{display:inline-block; content:"-"; margin-right:5px;}


}
@media all and ( max-width: 800px ){
	#header, #headerInnerWrap, #headerInner{height:60px;}
	#header .logo{padding:14px 0;}
	#header .logo img{max-width:160px;}

	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{right:0; padding-right:40px}
	.sitemap-open-btn, .zoomArea button{display:none;}
	/* Header :: 검색버튼 */
	.header-search-open-btn{display:block; float:right; width:34px; height:34px; border:1px solid rgba(255,255,255,0.5); background-color:rgba(0,0,0,0.5);}
	.header-search-box{margin-right:5px;}
	.header-search-inner{display:none; position:fixed; left:0; top:60px; width:calc(100% - 60px); padding:10px 45px 10px 15px; background-color:rgba(0,52,106,0.9); text-align:left;}
	.header-search-inner .header-search-inner-box{border-bottom:0;}
	.header-search-inner .header-search-close-btn{display:block; top:50%; right:8px; margin-top:-16px; background:none; border:1px solid rgba(255,255,255,0.3) !important;}
	.header-search-inner .header-search-word{width:calc(100% - 36px); border-bottom:1px solid rgba(255,255,255,0.5);}
	.header-search-inner .header-search-btn{position:static; float:left; width:34px; height:34px;}
	
	/* -------- Header :: 서브 -------- */
	#header.sub .header-search-open-btn{background:none; border-color:#00346a; border-color:rgba(0,52,106,0.5);}
	#header.sub .header-search-close-btn, #header.sub .header-search-btn{color:#fff;}
	#header.sub .header-search-inner .header-search-word{color:#fff !important;}
	#header.sub .header-search-inner .header-search-word::-webkit-input-placeholder{color:#fff !important;} 
	#header.sub .header-search-inner .header-search-word::-moz-placeholder{color:#fff !important;}

	/* Header :: 언어선택 */
	.header-lang{width:60px; }
	.header-lang strong{display:none;}
	.header-lang > ul{border-color:#ccc;}
	.header-lang > ul > li > a{padding:0; text-align:center;}
	/* Header :: 사이트맵, 네비게이션 버튼 */
	.header-line-btn{top:14px; margin-top:0;}
	.header-line-btn .line{width:20px; height:2px;}
	.header-line-btn.active .line:nth-child(1){
		 -webkit-transform: translateY(5px) rotate(45deg);
		  -ms-transform: translateY(5px) rotate(45deg);
		  -o-transform: translateY(5px) rotate(45deg);
		  transform: translateY(5px) rotate(45deg);
	}
	.header-line-btn.active .line:nth-child(3){
		 -webkit-transform: translateY(-5px) rotate(-45deg);
		  -ms-transform: translateY(-5px) rotate(-45deg);
		  -o-transform: translateY(-5px) rotate(-45deg);
		  transform: translateY(-5px) rotate(-45deg);
	}
	/* Header :: GNB(Mobile) */
	#gnbM #navigation{margin-top:60px}	/* Header 높이값 */
	#gnbM #navigation > li > a {font-size:15px;}
	#gnbM #navigation > li .gnb-2dep > li > a{font-size:13px;}

}

@media all and ( max-width: 480px ){
	#header .logo a{width:156px;}
	#header .logo img{max-width:100%;}
	
	.header-search-open-btn, .zoomArea button{width:30px; height:30px;}
	.sitemap-open-btn{width:83px; height:30px; font-size:12px;}
	.sitemap-open-btn i{font-size:22px; vertical-align:middle;}
}

/* ****************** FOOTER ********************** */
#footer{width:100%; background-color:#fff; border-top:1px solid #ddd}
#footerMenu{width:100%;/* height:63px; */overflow:hidden; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1}
#footerInner{position:relative; padding:40px 0 75px; width:100%; }
#footerInner > div{position:relative}
#footerTop{margin-bottom:30px}

/* Footer :: 서브메뉴 list */
.footer-sub-menu .footer-sub-list{padding:80px 0}
.footer-sub-menu .footer-sub-list > li{float:left; width:16.66%}
/* .footer-sub-menu .footer-sub-list > li:nth-child(2),
.footer-sub-menu .footer-sub-list > li:nth-child(3){width:22%}
.footer-sub-menu .footer-sub-list > li:last-child{width:14%} */
.footer-sub-menu .footer-sub-list > li > a{display:inline-block; font-weight:500; font-size:16px; letter-spacing:0; color:#222; margin-bottom:6px}
.footer-sub-menu .footer-sub-list > li .sub-menu-list li a{font-weight:300; font-size:15px; letter-spacing:0; color:#888; line-height:2}


/* Footer :: TOP버튼 */
.to-top-btn{
	position:fixed; bottom:-100px; right:15px; display:block; width:46px; height:46px; background-color:#d7d7d7; text-align:center; line-height:46px; color:#fff; z-index:99;
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;transition:all 0.6s
	/* -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%; */
}
.to-top-btn.fixed{bottom:15px; opacity:1.0;filter:Alpha(opacity=100);}

/* Footer :: FooterMenu */
.footer-menu-inner{width:100%; height:100%; display:table;}

/* Footer :: 하단정보 */
.foot-address{float:left; width:calc(100% - 200px)}
.family-address p{font-weight:400; font-size:15px; line-height:1.7; letter-spacing:-0.45px; color:#999; word-break:keep-all}
.family-address p strong{font-weight:500; color:#181818;}
.family-address span{display:inline-block; margin-right:30px}

.family-address address{margin-top:20px; font-weight:400; font-size:15px; line-height:1.66; letter-spacing:-0.45px; color:#999; text-transform:uppercase}
.family-address address strong{font-weight:500; color:#181818}

/* Footer :: 패밀리사이트 */
.family-site-box{float:right; position:relative; width:170px; text-align:left; letter-spacing:-0.25px;}
.family-site-box .family-site-open-btn{display:block; height:50px; line-height:50px; text-indent:10px; font-size:14px; border:1px solid #929292; padding:0 20px}
.family-site-box .family-site-open-btn i{position:absolute; font-size:16px; right:20px; top:50%; margin-top:-8px;}
.family-site-list{position:absolute; bottom:52px; left:0px; width:100%;  padding:10px 0; background-color:#fff; border:1px solid #ddd; border-bottom:0;  z-index:11; display:none; box-sizing:border-box;}
.family-site-list a{display:block; padding:10px; color:#333; font-size:12px;}
.family-site-list a:hover{color:#000; text-decoration:underline;}

/* Footer :: 푸터우측 */
.ft-rt{float:right; width:200px; text-align:right}
/* Footer :: 로고 */
.ft-rt .foot-logo{display:block; margin:0 0 40px}
/* Footer :: 푸터메뉴 */
.foot-menu{overflow:hidden;/* line-height:62px; */display:table-cell; vertical-align:middle; padding:15px 0}
.foot-menu li{float:left;}
.foot-menu li:before{display:inline-block; content:""; margin:-3px 14px 0 14px; width:2px; height:2px; background-color:#3a3a3a; vertical-align:middle; border-radius:5px; } 
.foot-menu li:first-child:before{display:none} 
.foot-menu li a{font-weight:500; color:rgba(58,58,58,0.7); font-size:14px; letter-spacing:-0.45px; line-height:1.3}
.foot-menu-number{font-weight:700; font-size:26px; letter-spacing:0; color:#0b486d; /*line-height:63px*/ display:table-cell; vertical-align:middle; text-align:right; padding:15px 0; width:250px}
.foot-menu-number span{display:inline-block; padding-right:15px; vertical-align:top; position:relative; top:-2px}
.foot-menu-number span img{width:100%}


@media all and (max-width:1024px){		
	#footerInner{padding:40px 0}
	/* Footer :: 하단정보 */
	.foot-address{float:none; width:100%}
	/* Footer :: 푸터우측 */
	.ft-rt{float:none; width:100%; text-align:center; margin-top:30px}
	.ft-rt .foot-logo{display:inline-block}
	.family-site-box{float:none; display:block; margin:auto;}
}
@media all and (max-width:800px){	
	.footer-sub-menu{display:none}
	/* Footer :: 푸터로고 */
	.ft-rt .foot-logo{margin-bottom:20px}
	.foot-logo img{max-width:148px;}
	/* Footer :: 푸터메뉴 */
	.foot-menu{padding:10px 0}
	.foot-menu li a{font-size:13px;}
	.foot-menu li:before{width:3px; height:3px; margin:0 7px; position:relative; top:-2px}
	.foot-menu-number{font-size:17px; padding:10px 0; width:150px}
	.foot-menu-number span{width:23px; padding-right:5px; vertical-align:middle}
	/* Footer :: 하단정보 */
	#footerInner{padding:20px 0 10px; text-align:center}
	.family-address{margin-bottom:15px}
	.family-address p{font-size:13px; text-align:left; margin-bottom:10px}
	.family-address a{}
	.family-address .footer-caution-txt{font-size:11px; word-break:keep-all}
	.family-address address{font-size:12px;}
	.foot-address{float:none}
	.foot-logo{float:none; margin:15px 0 10px}
	.family-address span{margin-right:15px}

	/* Footer :: 패밀리사이트 */
	.family-site-box{width:140px;}
	.family-site-box .family-site-open-btn{height:34px; line-height:34px; font-size:13px;}
	.family-site-list{bottom:36px;}
}

@media all and (max-width:480px){
	/* Footer :: FooterMenu */
	.footer-menu-inner{display:block}
	.foot-menu{display:block; padding-bottom:0}
	.foot-menu-number{display:block; text-align:right; width:100%}
}

/* ****************** SUB LAYOUT ********************** */

/*  SUB LAYOUT :: 비주얼 */
#visual{position:relative; overflow:hidden; width:100%; height:600px; }
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1); 
    -moz-transform: scale(1.1,1.1); 
    -webkit-transform: scale(1.1,1.1); 
     transform: scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
#visual.active .visual-img-con{
	-ms-transform: scale(1.0,1.0) rotate(0.002deg);
    -o-transform: scale(1.0,1.0) rotate(0.002deg);
    -moz-transform: scale(1.0,1.0) rotate(0.002deg);
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}



#visual .visual-txt{position:relative; padding-top:280px; text-align:left;}
#visual .visual-tit{font-weight:400; font-size:60px; letter-spacing:0; color:#222}
#visual .visual-sub-txt{font-weight:400; font-size:18px; letter-spacing:0.5px; color:rgba(51,51,51,0.8); margin-top:25px}

/*  SUB LAYOUT :: 상단정보 */
#middleArea{width:100%;}
#contentInfoCon{overflow:hidden;}

/*  SUB LAYOUT :: 상단정보 (공통) */
#contentInfoCon{position:relative; margin:0 auto}
#contentInfoCon .content-tit{color:#3a3a3a; font-size:40px; font-weight:500; letter-spacing:-0.25px; position:relative; padding-top:35px}
#contentInfoCon .content-sub-tit{color:#999; font-weight:400; padding-top:20px; font-size:15px; letter-spacing:0; word-break:keep-all; text-transform:uppercase}
/*  SUB LAYOUT :: 상단정보(스타일01) */
#contentInfoCon.content-info-style01{text-align:center; padding:80px 0 70px}
#contentInfoCon .content-tit:before{position:absolute; content:""; width:40px; height:5px; background:#fe984a; top:0; left:50%;  transform:translateX(-50%);}




.location{overflow:hidden; float:right; padding-top:18px;}
.location li{float:left; color:#a7a7a7; font-size:13px; letter-spacing:-0.5px;}
.location li i{font-size:18px; margin-top:-2px;}
.location li:before{display:inline-block; content:">"; vertical-align:middle; margin:0px 8px 0 10px; font-family:"나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif; color:#c0c0c0; font-size:12px;}
.location li:first-child:before{display:none;}
.location li:last-child{color:#333;}

@media all and (max-width:1120px){
	#visual{height:400px;}
	#visual .visual-tit{font-size:45px}
	#visual .visual-txt{padding-top:180px;}
}

@media all and (max-width:800px){
	#visual{height:250px}
	#visual .visual-txt{padding-top:130px;}
	#visual .visual-tit{font-size:31px;}
	#visual .visual-sub-txt{font-size:14px; margin-top:10px}
	#contentInfoCon.content-info-style01{padding:40px 0}
	#contentInfoCon.content-info-style01:before{width:7.8px; height:43px; background-size:cover !important}
	#contentInfoCon .content-tit{font-size:27px; padding-top:20px}
	#contentInfoCon .content-tit:before{width:30px; height:3px}
	#contentInfoCon .content-sub-tit{font-size:13px; padding-top:10px}
}

@media all and (max-width:480px){
	#visual{height:200px}
	#visual .visual-txt{padding-top:110px;}
	#visual .visual-tit{font-size:28px;}
}

/* SUB LAYOUT :: SideMenu */
#sideMenu{margin-bottom:50px; border-bottom:1px solid #e4e4e3; margin-bottom:0;}
#sideMenu.type2{margin-bottom:0;}
.side-menu-inner{position:relative; height:80px;}
.snb{width:100%; text-align:center; height:80px; display:flex; align-items:center; justify-content:center}
.snb li{position:relative; float:left; width:25%; height:100%; max-width:215px;}
.snb li a{display:table; width:100%; height:80px; font-weight:500; font-size:18px; color:#222; letter-spacing:-0.5px;}
.snb li a span{display:table-cell; vertical-align:middle}
.snb li.on:after{position:absolute; left:0; right:0; bottom:-1px; display:block; content:""; width:100%; height:3px; background-color:#0b486d; z-index:2;}
.snb li.on a{color:#0b486d;}
#sideMenuM,
#topMenuM02{display:none;}


@media all and ( max-width: 1120px ){
	.snb li a{font-size:17px;}
}

@media all and ( max-width: 800px ){	
	.side-menu-inner{height:60px;}
	.snb{height:60px;}

	#sideMenu{display:none;}
	#topMenuM02{display:block; position:relative; width:100%; height:59px; z-index:22}
	#topMenuM02 .side-menu-inner{height:59px; background-color:#f9f9f9}
	#topMenuM02 .menu-location{position:relative;}
	#topMenuM02 .location-to-home-btn + .menu-location{margin-left:44px}
	#topMenuM02 .menu-location > .cur-location{position:relative; display:block; height:59px; padding:0 30px 0 15px; }
	#topMenuM02 .menu-location > .cur-location span{position:relative; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:59px; font-weight:500; color:#0b486d; font-size:16px; letter-spacing:-0.6px}
	#topMenuM02 .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-8px; font-size:20px; color:#222}
	#topMenuM02 .menu-location > .cur-location.open .arrow{transform:rotate(-180deg); margin-top:-10px;}
	#topMenuM02 .menu-location .location-menu-con{display:none; position:absolute; top:59px; left:0px; width:calc(100% - 2px); border-bottom:1px solid #ddd; border-top:0; background-color:#fff; z-index:11; }
	#topMenuM02 .menu-location.location1 .location-menu-con{width:calc(100% - 1px)}
	#topMenuM02 .menu-location .location-menu-con li a{display:block; padding:7px 15px; font-size:14px; line-height:1.5; word-break:keep-all;}
	#topMenuM02 .menu-location .location-menu-con li.on{position:relative;}
	#topMenuM02 .menu-location .location-menu-con li.on a{color:#0b486d; font-weight:500;}

}

/* ****************** MODAL LAYERPOPUP ********************** */
/* modal layer */
.modal-fixed-pop-wrapper{display:none; overflow-y:scroll; overflow-x:hidden;  position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; background-color:#fff; }
.footer-modal-content h1{height:60px; line-height:60px; font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0; background-color:#777; color:#fff;}
.modal-close-btn{position:absolute; top:11px; right:10px; color:#fff; }
.modal-close-btn i{font-size:38px;}
.modal-close-btn i:hover {color:#fff}
.footer-inner-box{padding:30px; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; }

/* 사이트맵 */
#siteMapCon{border:5px solid #fe984a;}
.sitemap-wrapper{padding:30px;}
.sitemap-wrapper > ul{overflow:hidden;}
.sitemap-wrapper > ul > li{float:left; width:16.66%; text-align:center;}	/* 메뉴 갯수에 맞게 %로 계산, 두줄로 들어갈 경우 height값 설정 */
.sitemap-wrapper.menu4 > ul > li{width:25%;}
.sitemap-wrapper.menu6 > ul > li{width:16.6%;}
.sitemap-wrapper.menu7 > ul > li{width:14.2%;}
.sitemap-wrapper > ul > li > h2{color:#191919; margin:0 2% 20px 2%; padding-bottom:20px; font-size:16px; border-bottom:1px solid #888; letter-spacing:-1.0px; margin-bottom:20px; font-weight:500;}
.sitemap-wrapper > ul > li .sitemap-2dep {padding:0 5%;}
.sitemap-wrapper > ul > li .sitemap-2dep a{display:block; padding:10px 0; color:#666; font-size:13px; font-weight:400; line-height:1.2em;}
.sitemap-wrapper > ul > li .sitemap-2dep a:hover{color:#000; text-decoration:underline;}
.sitemap-close-btn{top:auto; right:auto; bottom:-26px; left:50%; width:52px; height:52px; margin-left:-26px; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -o-border-radius:100%; background-color:#fe984a; text-align:center; line-height:52px;}
.sitemap-close-btn i{color:#fff;}

@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content h1{height:46px; line-height:46px; font-size:18px; text-align:left; padding:0 15px}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
	/* 사이트맵  */
	.sitemap-wrapper{padding:15px}
}