#menuArea {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 153px;
	width: 100%;
	z-index: 93;
	letter-spacing: -1px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;

	background: #fff url(../images/common/bg_menu.jpg) repeat-x 0px -1px; 
	/* ㄴ> 색상 + 회색 줄무늬 - 기본 배경 */

	background: #fff; 
	/* ㄴ> 색상만 넣을 때 2차 메뉴 열렸을 때 배경 흰색으로 덮음 */
}

#menuArea:before,
#menuArea:after {
	display: none; 
	/* 미사용 */
}

#menuArea .inner:before {
	content: '';
	display: block;
	position: absolute;
	left: -31%;
	bottom: 0;
	width: 50%;
	/* 
    left: -17%;
    bottom: 0;
    width: 236px;
	 */
	height: 100%;
}

#menuArea .bar {
	display: block;
	position: absolute;
	top: 57px;
	left: 0;
	width: 60px;
	height: 4px;
	opacity: 0;
	z-index: 98;
	background: #19305a;
	transition: 0.3s; 
}


/* ==============================
   GNB 1차 메뉴
   ============================== */

#topmenu {
	float: left;
	width: 100%;
	box-sizing: border-box;
}

#topmenu > li {
	position: relative;
	float: left;
	line-height: 0;
	box-sizing: border-box;

	width: calc(100% / 7); 
	/* 메뉴 개수에 맞게 나누기 */
}

/* class="last" 붙이면 해당 메뉴 숨김 */
#topmenu li.last {
	display: none; 
}

#topmenu > li > a {
	display: block;
	line-height: 60px;
	font-family: "gmarket";
	font-weight: 800;
	font-size: 21px;
	text-align: center;
	text-decoration: none;
	z-index: 97;
	background-color: #fff;
}

#topmenu > li:hover > a,
#topmenu > li > a:hover,
#topmenu > li > a:active,
#topmenu > li > a:focus,
#topmenu > li.current_on > a {
	color: #28416c;
}


/* ==============================
   2차 메뉴 (드롭다운 영역)
   ============================== */

#topmenu li .menu {
	display: none;
	position: relative;
	z-index: 96;
	width: 100%;
	padding: 15px 0 0 0;
	box-sizing: border-box;
	background: #fff;
	border-top: 1px solid #ddd;

	height: 380px; 
	/* 2차 메뉴 전체 높이 — 변경 시 :before height도 함께 수정 */
}

/* 각 메뉴 컬럼 좌측 구분선 */
#topmenu li .menu:before {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #ddd;
	width: 1px;
	height: calc(100% + 60px); 
	/* 2차 메뉴 height + 1차 메뉴 height(60px) */
}

/* 마지막 메뉴 컬럼 우측 구분선 */
#topmenu li:last-child .menu:after {
	content: '';
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 1px;
	background: #ddd;

	height: calc(100% + 60px); 
	/* 2차 메뉴 height + 1차 메뉴 height(60px) */
}

#topmenu li ul li {
	float: none;
	width: 100%;
}

#topmenu li ul li a {
	display: block;
	margin: 0 0 10px 0;
	padding: 0 3px 0 15px;
	font-size: 16px;
	line-height: 120%;
	text-align: left;
	color: #151515;
}

#topmenu li li a:hover,
#topmenu li li a:active,
#topmenu li li a:focus,
#topmenu li li.current_on a {
	color: #28416c;
}

#topmenu ul ul {
	display: none !important; 
	/* 3차 메뉴 비사용 */
}


/* ==============================
    마스크 (메뉴 열렸을 때)
   ============================== */

body.on .mask {
	z-index: 92;
	visibility: visible;
	opacity: 1;
	top: auto;
	bottom: 0;
	height: calc(100% - 200px); 
	/* 헤더 높이만큼 제외 */
}