@charset "utf-8"; 

* {-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

/* 상단메뉴 */
#header { position:fixed; left:0; top:0; width:100%; z-index:20000; }

/* 사이트맵 메뉴 */
.top_sm { width:30%; transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease; text-align:right; float:right;}
.top_sm a { position:relative; text-align:center; padding:0 5px 0 15px; font-size:13px; }
.top_sm a:last-child { padding-right:0 }
.top_sm a:last-child:before { position:absolute; left:0; top:0; color:#dcdcdc; font-size:11px; content:'│'; }
a.login { display:inline-block; vertical-align:top; width:150px; height:28px; line-height:26px; padding:0; background:#fff; 
text-align:center; font-size:15px; color:#000; border:1px solid #333 }
a.login:hover { background:#282828; border:1px solid #282828; color:#fff }
.active .top_sm { margin-top:5px; }
.active a.login { width:70px; }

/* 전체메뉴버튼 */
a.all_menu { display:inline-block; vertical-align:top; position:relative; margin-top:27px; margin-right:10px;
width:38px; height:38px; line-height:38px; border-radius:100%; background:#282828; font-size:0; }
a.all_menu span {display:inline-block;position:absolute;left:50%;margin-left:-9px;top:50%;margin-top:-1px;width:18px;height:3px;background-color:#fff;}
a.all_menu span:before {position:absolute;width:18px;height:3px;left:50%;margin-left:-9px;top:-7px;background-color:#fff;width:;height:;content:"";display:block;}
a.all_menu span:after {position:absolute;width:18px;height:3px;left:50%;margin-left:-9px;top:7px;background-color:#fff;width:;height:;content:"";display:block;}
a.all_menu span,
a.all_menu span:before,
a.all_menu span:after {transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}

a.all_menu.active  span {background:none;}
a.all_menu.active  span:before {background:#fff;top: 0;transform: rotate(45deg);}
a.all_menu.active  span:after {background:#fff;top: 0;transform: rotate(-45deg);}

.active a.all_menu { margin-top:5px; }

/* ============================================================================================================================================================== */
/* 전체메뉴 */
#allMenu { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000000; }
#allMenu .layer_bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=80); }
#allMenu .layer_area { position:absolute; left:50%; top:120px; margin-left:-655px; width:1320px; border:2px solid #282828; background:#fff; }

#allMenu .info { padding:40px; }
#allMenu .header { display:block; padding-left:15px; height:55px; line-height:55px; background:#282828 url('../images/common/dot_bg.png') repeat; }
#allMenu .header h2 { float:left; display:block; font-size:20px; font-weight:600; color:#fff; }
#allMenu .header h2 span { font-size:13px; font-weight:500; color:#fff; }

#allMenu .pop_close { float:right; position:relative; display:block; width:60px; height:55px; padding-left:15px; background:#545557; border:1px solid #545557; border-left:none; 
font-size:0; transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;}
#allMenu .pop_close span {display:inline-block;position:absolute;left:50%;margin-left:-13px;top:50%;margin-top:-1px;width:26px;height:3px;background-color:#fff;}
#allMenu .pop_close span:before {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:-7px;background-color:#fff;width:;height:;content:"";display:block;}
#allMenu .pop_close span:after {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:7px;background-color:#fff;width:;height:;content:"";display:block;}
#allMenu .pop_close span,
#allMenu .pop_close span:before,
#allMenu .pop_close span:after {transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}

#allMenu .pop_close.active span {background:none;}
#allMenu .pop_close.active span:before {background:#fff;top: 0;transform: rotate(45deg);}
#allMenu .pop_close.active span:after {background:#fff;top: 0;transform: rotate(-45deg);}

/* 사이트맵 */
#allMenu .sitemap_wrap { display:table; width:100%; margin:0 auto; overflow:hidden; border-top:2px solid #282828; border-bottom:1px solid #e5e5e5; border-right:1px solid #e5e5e5; }
#allMenu .sitemap_wrap dt { text-align:center; padding:10px 0; background:#eff2f8; border-bottom:1px solid #282828; font-size:18px; color:#000; }
#allMenu .sitemap_wrap dd { padding:8px 0 8px 18px; }
#allMenu .sitemap_wrap dd ul { overflow:hidden; }
#allMenu .sitemap_wrap dd ul li { line-height:30px; }
#allMenu .sitemap_wrap dd ul li a { font-weight:500; color:#666; }
#allMenu .sitemap_wrap dd ul li a:hover { color:#282828; }
#allMenu .sitemap_box01, #allMenu .sitemap_box02, #allMenu .sitemap_box03, 
#allMenu .sitemap_box04, #allMenu .sitemap_box05, #allMenu .sitemap_box06 { display:table-cell; border-left:1px solid #e5e5e5; width:20%; }


/* ============================================================================================================================================================== */

/* gnb 전체 감싸는 영역 */
#gnb_wrap { max-width:1280px; margin:0 auto;  position:relative; width:100%; z-index:20000;
-webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out;}
#gnb_wrap .wrap { width:100%; overflow:hidden; }

/* 서브감싸는 영역 */
#sub_wrap #gnb_wrap { }

/* 메인 스크롤 올렸을때 배경 */
#gnb_wrap.active { max-width:100%; height:53px; box-shadow:2px 2px 8px rgba(0, 0, 0, 0.3);  background:#f6f6f6;} 

/* 서브페이지 스크롤 올렸을때 배경  */
#sub_wrap #gnb_wrap.active { border-bottom:none; }

#gnb_wrap .top_cf { width:23%; padding-top:10px; margin-bottom:10px; float:left;}
#gnb_wrap .top_cf img { height:145px; }

#gnb_wrap h1 { width:54%; display:block; text-align:center; padding-top:60px;
-webkit-transition:0.4s ease-in-out;-moz-transition:0.4s ease-in-out;-o-transition:0.4s ease-in-out;transition:0.4s ease-in-out; float:left; }

#gnb_wrap h1 img { /* width:329px;  */}


#gnb_wrap .top_cf2 { position: relative; width:23%; padding-top:10px; margin-bottom:10px; text-align:right; float:right; height: 155px;}
#gnb_wrap .top_cf2 img {width: 100%; max-width: 100%; height: 100px;/*  height:145px;  */}

#gnb_wrap .top_cf2 .search_box {width: 100%; padding-top: 5px; position: absolute; left: 0; bottom: 0;}
#gnb_wrap .top_cf2 .search_box input {width: calc(100% - 40px); height: 40px; line-height: 40px; padding: 0 5px; border: 1px solid #ddd; float: left;}
#gnb_wrap .top_cf2 .search_box button {width: 40px; height: 40px; border: 1px solid #ddd; border-left: 0; background: #fff;}


#gnb_wrap.active .top_cf  { display:none;}
#gnb_wrap.active h1 { display:none;}
#gnb_wrap.active .top_cf2  { display:none;}
#gnb_wrap.active .top_date { display:none;}


#gnb_m .search_open {
	position: absolute; right: 60px; top:13px;
	background: none; border: none; font-size: 22px;
	width: 35px; height: 35px; text-align: center;padding-bottom: 2px;
	border-radius: 50%;
}
#gnb_m .search_open.on { background: #282828; color:#fff}
#gnb_m .search_close {position: absolute; right: 60px; top:13px;
	background: #282828; color:#fff; border: none; font-size: 22px;
	width: 35px; height: 35px; text-align: center;padding-bottom: 2px;
	border-radius: 50%; display: none;}
#gnb_m .search_box {
	position: absolute; width: 100%; top: 100%; display: none;
	border: 2px solid #282828;
}
#gnb_m .search_box input {width: calc(100% - 40px); height: 40px; line-height: 40px; border: none; float: left; padding: 0 10px;}
#gnb_m .search_box button {width: 40px; height: 40px; border: none; background: #fff;}
#gnb_m .search_box button i {font-size: 18px;}


/* 검색 메뉴 */
#gnb_wrap.active .top_sm { }

/* gnb 메뉴 속성 ==================================================================================*/


/* 서브메뉴 영역 */
#sub .wrap { position:relative; width:1320px; margin:0 auto; height:280px; display:none;}

/* 서브메뉴 펼쳐졌을때 왼쪽 이미지 영역 */
#sub .subimg { position:absolute; left:0; top:0; width:330px; height:200px; }
#sub .img1 { background:url('../images/common/simg1.png') no-repeat 0 20px; }
#sub .img2 { background:url('../images/common/simg2.png') no-repeat 0 20px; }
#sub .img3 { background:url('../images/common/simg3.png') no-repeat 0 20px; }
#sub .img4 { background:url('../images/common/simg4.png') no-repeat 0 20px; }
#sub .img5 { background:url('../images/common/simg5.png') no-repeat 0 20px; }

/* 서브메뉴 펼쳐졌을때 왼쪽 이미지 영역 */
#header.active #sub .subimg { top:0; width:230px; height:240px; }
#header.active #sub .img1 { background:url('../images/common/simg1_m.png') no-repeat 0 20px; }
#header.active #sub .img2 { background:url('../images/common/simg2_m.png') no-repeat 0 20px; }
#header.active #sub .img3 { background:url('../images/common/simg3_m.png') no-repeat 0 20px; }
#header.active #sub .img4 { background:url('../images/common/simg4_m.png') no-repeat 0 20px; }
#header.active #sub .img5 { background:url('../images/common/simg5_m.png') no-repeat 0 20px; }

/* 모바일 상단메뉴 =============================================================================*/
#gnb_m { display:none; position:relative; z-index:100000; }
.sidemenu_box { position:relative; min-height:100%; height:auto; display:none; z-index:1000000; }
.sidemenu_box_bg { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.7; filter:alpha(opacity=70);}

/* 모바일 메뉴 열기 */
a.open_sidemenu { position:relative; position:absolute; display:block; right:15px; top:20px; width:30px; height:21px; font-size:0; 
transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;}
a.open_sidemenu span {display:inline-block;position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:50%;margin-top:-1px;background-color:#282828;}
a.open_sidemenu span:before {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:-7px;background-color:#282828;content:"";display:block;}
a.open_sidemenu span:after {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:7px;background-color:#282828;content:"";display:block;}

a.open_sidemenu.active span {background:none;}
a.open_sidemenu.active span:before {background:#fff;top: 0;transform:rotate(45deg);}
a.open_sidemenu.active span:after {background:#fff;top: 0;transform:rotate(-45deg);}


/* 모바일 메뉴 닫기 */
.close_sidemenu_bg { position:relative; display:block; width:100%; height:60px; background:#282828; }
.close_sidemenu_bg .tit { position:absolute; display:block; left:15px; top:18px; color:rgba(255,255,255,0.8);}
.close_sidemenu_bg .tit span { font-size:15px; color:#2e7c25; vertical-align:top }

.close_sidemenu_bg .tit a { font-size:15px; color:rgba(255, 255, 255, 0.7); display:inline-block; height:21px; padding-left:24px; margin-right:10px }
.close_sidemenu_bg .tit a.login_m { background:url('/images/common/top_icon1.png') no-repeat 0 2px; background-size:14px; }
.close_sidemenu_bg .tit a.join_m { background:url('/images/common/top_icon2.png') no-repeat 0 2px; background-size:15px; }
.close_sidemenu_bg .tit a.logout_m { background:url('/images/common/top_icon3.png') no-repeat 0 2px; background-size:14px; }
.close_sidemenu_bg .tit a.myinfo_m { background:url('/images/common/top_icon4.png') no-repeat 0 2px; background-size:14px; }

a.close_sidemenu { position:relative; position:absolute;  display:block; right:15px; top:10px; width:30px; height:21px; font-size:0; 
transition:all .5s ease;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;}
a.close_sidemenu span {display:inline-block;position:absolute;left:50%;margin-left:-13px;top:50%;margin-top:-1px;width:26px;height:3px;background-color:#fff;}
a.close_sidemenu span:before {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:-7px;background-color:#fff;width:;height:;content:"";display:block;}
a.close_sidemenu span:after {position:absolute;width:26px;height:3px;left:50%;margin-left:-13px;top:7px;background-color:#fff;width:;height:;content:"";display:block;}

a.close_sidemenu.active span {background:none;}
a.close_sidemenu.active span:before {background:#fff;top: 0;transform: rotate(45deg);}
a.close_sidemenu.active span:after {background:#fff;top: 0;transform: rotate(-45deg);}

/* 모바일 메뉴 스크롤 */
#sidemenu_wrap { overflow:auto; position:absolute; width:100%; top:60px; bottom:0; z-index:1;  }
.sidemenu_w { position:fixed; top:0; bottom:0; right:-280px; width:280px; background:#282828; }

/* 모바일 메뉴 스타일 */
.sidemenu { position:absolute; width:100%; }

.sidemenu a.toggle span { 
	z-index:10000; position:absolute; top:50%; margin-top:-4px; right:20px;
	width:13px; height:8px; background:url('/images/common/sidemenu_bullet.png') no-repeat;
	-webkit-transition:all 0.3s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	-ms-transition: all 0.3s ease-in-out; 
	transition: all 0.3s ease-in-out; 
}
.sidemenu a.expanded span { 
	-webkit-transform: rotate(180deg); 
	-moz-transform: rotate(180deg); 
	-o-transform: rotate(180deg); 
	-ms-transform: rotate(180deg); 
	transform: rotate(180deg);
}

.sidemenu ul ul.submenu, 
.sidemenu ul ul.submenu li ul.submenu { display: none; }

.sidemenu ul li a.mm { position:relative; display:block; text-indent:15px; height:43px; line-height:43px; font-weight:bold; text-align:left;
font-size:16px; background:#282828; color:#fff; border-bottom:1px solid rgba(255, 255, 255, 0.1); }
.sidemenu ul li a.mm.toggle { position:relative; display:block; text-indent:15px; height:43px; line-height:43px; font-weight:bold; text-align:left;
font-size:16px; background:#282828; color:#fff; border-bottom:1px solid rgba(255, 255, 255, 0.1); }
.sidemenu ul li a.mm.expanded { background:#282828; border-bottom:1px solid #282828; color:#fff; }

.sidemenu ul ul.submenu { padding:10px 0; background:#fff; box-shadow:inset 0px 3px 9px rgba(0, 0, 0, .2) }
.sidemenu ul ul.submenu li a { position:relative; display:block; width:100%; height:36px; line-height:36px; background:#fff; 
font-size:14px; font-weight:600; color:#666; text-align:left; text-indent:15px; }
.sidemenu ul ul.submenu li a:hover { color:#282828; }


.top_menu {
	border-top:1px solid #ddd;
	border-bottom:2px solid #333;
	clear:both;
}
.top_menu .top_date { width:19%; font-weight:300; font-size:13px; float:left;}
.top_menu .top_date span { width:50px; display:inline-block;}
.top_menu .top_date b { line-height:1.2; font-size:15px; color:#000; font-weight:500; padding-top:5px; display:block;}

.top_menu ul {
	width:81%!important;
	padding: 0 5%;
	margin:0 auto;
	overflow:hidden;
}
.top_menu ul li {
	width:16.6%;
	float:left;
}
.top_menu ul li a {
	width:100%;
	line-height:50px;
	font-size:17px;
	padding:0!important;
	color:#000;
	text-align:center;
	display:block;
}

/* ============================================================================================================================================================== */

@media all and (max-width:1340px) { 

	
	#gnb .wrap { padding:0 10px; }
	#sub .wrap { width:1200px; }

	#gnb_wrap .top_cf { width:25%;}
	#gnb_wrap .top_cf img { width:100%; }

	#gnb_wrap h1 { width:50%; }
	#gnb_wrap h1 img { width:280px; }

	#gnb_wrap .top_cf2 {width:25%;}
	#gnb_wrap .top_cf2 img { width:100%; }


}

/* ============================================================================================================================================================== */

@media all and (max-width:1240px) { 

	/* #gnb_wrap h1 img { width:140px; } */

}


/* ============================================================================================================================================================== */

@media all and (max-width:1040px) { 

	/* 상단메뉴 */
	#header { width:100%; }
	.top_sm { display:none; }

	/* gnb 대메뉴 공통속성 */
	#gnb_wrap { display:none; }
	#gnb_m { display:block; width:100%; background:#fff; border-bottom:1px solid #dcdcdc; height:60px; }
	#gnb_m .wrap { width:95%; margin:0 auto; }

	/* 로고 */
	#header h1 { position:absolute; left:10px; top:15px; }
	#header h1 img { width:155px; }

}