/* CSS Document */

#topMenu { 
	width: 100%;
	position: relative;
	/*height: 38px;*/ /* 메인 메뉴의 높이 */ 
	/*width: 1100px;*/ /* 메인 메뉴의 넓이 */ 
	/*margin:0 auto;*/
	line-height: 60px;
}

#topMenu ul { /* 메인 메뉴 안의 ul을 설정함: 상위메뉴의 ul */ 
	list-style-type: none; /* 메인 메뉴 안의 ul 내부의 목록 표시를 없애줌 */ 
	margin: 0px; /* 메인 메뉴 안의 ul의 margin을 없앰 */ 
	padding: 0px; /* 메인 메뉴 안의 ul의 padding을 없앰 */ 
	z-index: 10;
	width: 100%;
} 

.menu ul:hover {
	content: "";
	display: block;
	clear: both;
}

#topMenu ul li { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위메뉴) */ 
	width: 14.28%; /* 기본 넓이를 150px로 설정 */ 
	color: white; /* 글씨 색을 흰색으로 설정 */ 
	/* background-color: #2D2D2D; 배경 색을 RGB(2D2D2D)로 설정 */ 
	float: left; /* 왼쪽으로 나열되도록 설정 */
	/*line-height: 38px;*/ /* 텍스트 한 줄의 높이를 30px로 설정 */ 
	vertical-align: middle; /* 세로 정렬을 가운데로 설정 */ 
	text-align: center; /* 텍스트를 가운데로 정렬 */ 
	position: relative; /* 해당 li 태그 내부의 top/left 포지션 초기화 */ 
}

#topMenu ul li.line { /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(상위메뉴) */ 
	display: none;
}

.menuLink {
	text-decoration:none; /* a 태그의 꾸밈 효과 제거 */ 
	display: block; /* a 태그의 클릭 범위를 넓힘 */ 
	width: 100%; /* 기본 넓이를 150px로 설정 */ 
	font-size: 15px; /* 폰트 사이즈를 12px로 설정 */ 
	color: white; /* 상위 메뉴의 글씨색을 흰색으로 설정 */ 
	font-weight: normal; /* 폰트를 굵게 설정 */ 
}

#subMenu ul li{ /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(하위메뉴) */ 
	color: white; /* 글씨 색을 흰색으로 설정 */ 
	background-color: white; /* 배경 색을 RGB(2D2D2D)로 설정 */ 
	float: left; /* 왼쪽으로 나열되도록 설정 */
	vertical-align: middle; /* 세로 정렬을 가운데로 설정 */ 
	text-align: center; /* 텍스트를 가운데로 정렬 */ 
	position: relative; /* 해당 li 태그 내부의 top/left 포지션 초기화 */
	font-size: 14px;
	width: 100%;
	line-height: 40px;
	height: 40px;
	display: block
	box-sizing: border-box;
	border: 1px solid #eee;
	border-top: 0 !important;
}

#subMenu ul li a{ /* 메인 메뉴 안에 ul 태그 안에 있는 li 태그의 스타일 적용(하위메뉴) */ 
	width: 100%;
	display: block;
	font-weight: 500;
	color: black;
}

.topMenuLi1:hover 
.menuLink1 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #ff2f63; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi2:hover 
.menuLink2 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #4267b2; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi3:hover 
.menuLink3 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #1cb540; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi4:hover 
.menuLink4 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #f0a718; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi5:hover 
.menuLink5 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #ff4848; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi6:hover 
.menuLink6 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #00b0f0; /* 배경색을 밝은 회색으로 설정 */ 
} 

.topMenuLi7:hover 
.menuLink7 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: black; /* 글씨 색 빨간색 */ 
	background-color: #fbe300; /* 배경색을 밝은 회색으로 설정 */ 
} 

.submenu1 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdd1e2; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu2 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #dae6fe; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu3 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #d1fcdb; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu4 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #feefd0; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu5 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdd5d5; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu6 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #D2F1FD; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

.submenu7 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdf8c9; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 


#topMenu ul li:hover 
.submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */ 
	height: 500px; /* 하위메뉴 높이를 93px로 설정 */ 
} 

.submenu { /* 하위 메뉴 스타일 설정 */ 
	position: absolute; /* html의 flow에 영향을 미치지 않게 absolute 설정 */ 
	height: 0px; /* 초기 높이는 0px로 설정 */ 
	overflow: hidden; /* 실 내용이 높이보다 커지면 해당 내용 감춤 */ 
	transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(기본) */ 
	-webkit-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 크롬/사파라ㅣ) */ 
	-moz-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 파폭) */ 
	-o-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 오페라) */ 
} 


/* 아래 하단은 메인 내 사이트맵 때 여백추가+모션없음 */

#siteMap {position: relative; overflow: hidden;;}


#siteMap .topMenuLi1
.menuLink1 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #ff2f63; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi2
.menuLink2 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #4267b2; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi3 
.menuLink3 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #1cb540; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi4
.menuLink4 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #f0a718; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi5
.menuLink5 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #ff4848; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi6
.menuLink6 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: white; /* 글씨 색 빨간색 */ 
	background-color: #00b0f0; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .topMenuLi7
.menuLink7 { /* 상위 메뉴의 li에 마우스오버 되었을 때 스타일 설정 */ 
	color: black; /* 글씨 색 빨간색 */ 
	background-color: #fbe300; /* 배경색을 밝은 회색으로 설정 */ 
} 

#siteMap .submenu1 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdd1e2; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu2 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #dae6fe; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu3 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #d1fcdb; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu4 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #feefd0; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu5 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdd5d5; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu6 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #D2F1FD; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap .submenu7 a:hover { /* 하위 메뉴의 a 태그의 마우스 오버 스타일 설정 */ 
	background-color: #fdf8c9; /* 배경을 RGB(DDDDDD)로 설정 */ 
} 

#siteMap #topMenu ul li:hover 
.submenu { /* 상위 메뉴에 마우스 모버한 경우 그 안의 하위 메뉴 스타일 설정 */ 
	height: auto; /* 하위메뉴 높이를 93px로 설정 */ 
} 

#siteMap .submenu { /* 하위 메뉴 스타일 설정 */ 
	position: relative; /* html의 flow에 영향을 미치지 않게 absolute 설정 */ 
	height: auto; /* 초기 높이는 0px로 설정 */ 
	overflow: hidden; /* 실 내용이 높이보다 커지면 해당 내용 감춤 */ 
	transition: none; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(기본) */ 
	-webkit-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 크롬/사파라ㅣ) */ 
	-moz-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 파폭) */ 
	-o-transition: height .2s; /* height를 변화 시켰을 때 0.2초간 변화 되도록 설정(구버전 오페라) */ 
}