#dd
{   margin: 0;
    padding: 0}

#dd li
{   margin: 0;
    padding: 0;
    list-style: none;
    float: left;
	font-family: 'Nanum Gothic', nanum_gothic, 나눔고딕, arial;
    font: bold 12px 'Nanum Gothic';
}

#dd li a.menu
{   display: block;
	border-radius: 3px; /* 네면 모두 둥글게 */
    padding: 7px 5px 2px 5px; /* text-valign은 없고 위에서 부터의 거리를 조절해 줍니다. */
    background: #EEEEEE; /*메뉴 바탕색*/
	border-bottom: 2px solid #AABCCF;	 /* 바닥 선 굵기와 색상 */
    margin: 0 3px 0 0; /*메뉴 사이 간격 */
    text-align: center;
    width: 105px; /* 반드시 단위를 표시해야 한다. */
    height: 20px;
    color: #8C8D8E; /*메뉴 글자색*/
	font-size:12px;
	font-family: 'Nanum Gothic', nanum_gothic, 나눔고딕, arial;
    text-decoration: none}

#dd li a.menu:hover /*메뉴 마우스 오버시 */
{   background: #45689F;
    color: #fff; /*메뉴 글자색*/
	/*border-bottom: 2px solid #FF4128; */
}

.submenu2 /* 하위 메뉴 스타일 전체 박스 설정 */
{   background: white;
	border-radius: 2px; 			/* 네면 모두 둥글게 */

    border-top: 1px solid #AABCCF;	/* 서브 메뉴의 박스  위 부분 테두리 */
	border-bottom: 1px solid #AABCCF;	/* 바닥 선 굵기와 색상 */	
	margin-top: -1px;       		/* 메인 메뉴와 서브 메뉴 박스 위의 간격 */
    visibility: hidden;
    position: absolute;				/* html의 flow에 영향을 미치지 않게 absolute 설정 */

	width: 115px;           		/* 기본 넓이를 115px로 설정 */
	/* width: 125px;  				/* 자동으로 하려면, 설정안하면 된다. 단위는 반드시 표시해야 한다. */
    /* height: 20px;				/* 서브 메뉴 박스 높이이므로 자동으로 되도록 설정하면 안된다. */

	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초간 변화 되도록 설정(구버전 오페라) */
    z-index: 3;

	/*
	box-shadow: 0 5px 7px 0 rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 5px 7px 0 rgba(0,0,0,0.2);
	*/
	}

.submenu2 a {
	display: block;
    background: #F2F2F2; /*메뉴 바탕색*/	

	margin-top: -1px;       /* 위 칸의 하단 테두리와 아래칸의 상단 테두리가 겹쳐지도록 설정 */
	padding: 5px 15px 5px 15px;
	height: 17px; 			/* 마우스 오버 메뉴 박스 크기는 설정해도 된다. */

	border: thin solid #AABCCF;	 		/* 테두리 선 굵기와 색상 */
	border-bottom: 1px solid #AABCCF;	/* 바닥 선 굵기와 색상 */		

	font-size: 12px; 		/* font-size:10pt;와 동일하다. */
	font-weight: bold;      /* 폰트를 굵게 설정 */
	color: #8C8D8E; 		/*메뉴 글자색 #13000A */
	text-decoration: none;
	text-align: center;
	font-family: 'Nanum Gothic', 나눔고딕, nanum_gothic, arial;
}

.submenu2 a:visited {
	color: #8C8D8E; 		/*메뉴 글자색 #13000A */
}

.submenu2 a:link {
	color: #8C8D8E; 		/*메뉴 글자색 #13000A */
}

.submenu2 a:hover {
	background: #45689F;  	/* #DDDDDD #FF0000 빨간색 배경 */
    color: #FFF;
}

.longLink {     					/* 좀 더 긴 메뉴 스타일 설정 */
	width: 180px;   		/* 넓이는 190px로 설정 */
}

.submenu3 {
	background: #EAEBD8;
	border: 1px solid #13000A;
	visibility: hidden;
	position: absolute;
	z-index: 3;
	width: 108px;  /* 반드시 단위를 표시해야 한다. */
	height: 20px;
}

.submenu3 a {
	display: block;
	font: 11px arial;
	text-align: left;
	text-decoration: none;
	padding: 5px;
	color: #13000A
}

.submenu3 a:hover {
	background: #FF0000;
    color: #FFF;
}