body {

	margin:0;
	padding:0;
	font-family:dotum;
	font-size:12px;
	/* line-height:18px; */
	line-height:25px;
	background-color: #f6f6f3;  
	/* background: url(new/sub/images/sub_fla.png) ;  */
}

/* ~~ 요소/태그 선택기 ~~ */
ul, ol, dl { /* 브라우저마다 다르므로 목록의 패딩과 여백을 0으로 지정하는 것이 가장 좋습니다. 일관성을 위해, 여기에서 또는 포함하고 있는 목록 항목(LI, DT, DD)에서 원하는 크기를 지정할 수 있습니다. 보다 구체적인 선택기를 쓰지 않는 한 여기에서 수행한 작업은 .nav 목록에 계단식으로 표시됩니다. */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 위쪽 여백을 제거하면 포함된 div에서 여백이 이스케이프되는 문제를 방지할 수 있습니다. 나머지 아래쪽 여백은 이어지는 요소에서 이 문제를 보류합니다. */
	padding-right: 15px;
	padding-left: 15px; /* div에 직접 추가하는 대신 div 내에 있는 요소의 측면에 패딩을 추가하면 상자 모델 수학이 제거됩니다. 측면 패딩이 있는 중첩된 div를 대체 메서드로 사용할 수도 있습니다. */
}
a img { /* 이 선택기는 링크로 둘러싸인 이미지 주변에 있는 일부 브라우저에 표시된 파란색 기본 테두리를 제거합니다. */
	border: none;
}

/* ~~ 사이트 링크의 스타일링은 커서 놓기 효과를 생성하는 선택기 그룹을 포함하여 이 순서대로 남아 있어야 합니다. ~~ */
a:link {
	color: #42413C;
	text-decoration: underline; /* 매우 독특하게 보이도록 링크에 스타일을 지정하는 경우를 제외하고는 시각적으로 빠르게 식별되도록 밑줄을 적용하는 것이 가장 좋습니다. */
}
a:visited {
	color: #6E6C64;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* 이 선택기 그룹은 마우스를 사용하는 사람과 동일한 커서 놓기 환경을 키보드 탐색기에 제공합니다. */
	text-decoration: none;
}

	#mainVisual_bg {
	width:100%;
	height:505px;
    /* background-image: url(new/images/main_bg.png); */
	 /* background: url(new/sub/images/sub_fla.png) ; */
 } 
				#mainVisual {
	width:1000px;
	margin:0 auto; 
	height: 505px;
	background-image: url(); 
	/*background-image: url(images/main_fla.png); */
	/*background-image: url(new/newmain.html); */
    /* margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: 0; */

}


			#subVisual_bg {
	width:100%;
	height:313px;
	background-image: url(new/images/main_bg.png);
}
				#subVisual {
	width:1100px;
	height: 313px;
	background-image: url(new/images/main_bg.png);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}



/* ~~ 이 고정 폭 컨테이너는 다른 모든 div를 둘러쌉니다. ~~ */
.container {
	width: 1000px; /* 측면 자동 값, 폭으로 연결, 레이아웃 가운데 정렬 */
	/*height: 750px; */
	overflow: hidden; /* 이 선언은 내부의 부동 열이 끝나고 포함하는 위치를 .container가 인식하도록 합니다. */
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/* ~~ 이 항목은 레이아웃에 대한 열입니다. ~~ 

1) 패딩은 div의 위쪽 및/또는 아래쪽에만 배치됩니다. 이 div에 포함된 요소의 경우 측면에 패딩이 있습니다. 이를 통해 "상자 모델 수학"에서 제외됩니다. div 자체에 측면 패딩 또는 테두리를 추가하면 *전체* 폭을 만들기 위해 정의한 폭에 추가됩니다. div 내의 요소에서 패딩을 제거하고, 디자인에 필요한 패딩과 폭이 없는 상태로 내부에 두 번째 div를 배치할 수도 있습니다.

2) 모두 부동화됨에 따라 열에 여백이 지정되지 않았습니다. 여백을 추가해야 하는 경우에는 부동화하는 방향의 측면에 배치하지 않도록 하십시오(예: 오른쪽 부동화로 설정된 div의 오른쪽 여백). 대신에 여러 번 패딩이 사용될 수 있습니다. 이 규칙을 무시해야 하는 div의 경우, 일부 버전의 Internet Explorer에서 여백이 이중으로 삽입되는 버그를 해결하기 위해 div의 규칙에 "display:inline" 선언을 추가해야 합니다.

3) 문서에서 클래스를 여러 번 사용할 수 있으므로(또한 요소에 여러 클래스를 적용할 수 있으므로), 열에 ID 대신 클래스 이름이 지정되었습니다. 예를 들어, 필요한 경우 두 개의 사이드바 div를 누적할 수 있습니다. 문서당 한 번만 사용하는 한, 사용자의 환경 설정에 해당하는 경우 이 사이드바 div를 손쉽게 ID로 변경할 수 있습니다.

4) nav를 왼쪽 대신 오른쪽에 오게 하려는 경우, 이러한 열을 반대 방향(전체 왼쪽 대신 전체 오른쪽)으로 부동화하면 역순으로 렌더링됩니다. HTML 소스에서 div를 이리저리 옮기지 않아도 됩니다.

*/
.sidebar1 {
	float: left;
	width: 280px;
	padding-bottom: 0px;
}
.content {
	width: 336px;
	float: left;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}
.sidebar2 {
	width: 220px;
	float: left;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 30px;
	padding-left: 0;
	margin: 0px;
}


/* sub */
.sidebar3 {
	float: left;
	width: 220px;
	padding-bottom: 0;
        list-style:none;
        padding:0;
        margin:0;
}

.content2 {
	width: 880px;
	float: left;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}

/* ~~ 그룹화된 이 선택기는 .content 영역 공간에 목록을 제공합니다. ~~ */
.content ul, .content ol { 
	padding: 0 0px 0px 0px; /* 이 패딩은 머리글의 오른쪽 패딩과 위의 단락 규칙을 미러링합니다. 패딩은 목록에서 다른 요소들 사이의 공간 아래쪽과 들여쓰기 생성을 위한 왼쪽에 배치되었습니다. 패딩은 원하는 대로 조정할 수 있습니다. */
}

/* ~~ 탐색 목록 스타일(Spry와 같이 미리 만들어진 플라이아웃 메뉴를 사용하기로 선택한 경우 제거될 수 있음) ~~ */
ul {
	list-style: none; /* 목록 표시 기호를 제거합니다. */
	margin: 0px;
	padding: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

ul.nav a, ul.nav a:visited { /* 이러한 선택기를 그룹화하여 방문한 이후에도 링크가 버튼 모양을 유지하도록 합니다. */
	padding: 0px 0px 0px 0px;
	display: block; /* 링크에 블록 속성을 제공하여 이를 포함한 전체 LI를 채우도록 합니다. 이렇게 하면 전체 영역이 마우스 클릭에 반응하게 됩니다. */
	width: 404x;  /*이 폭은 IE6에서 전체 버튼을 클릭할 수 있도록 합니다. IE6를 지원할 필요가 없는 경우에는 제거할 수 있습니다. 사이드바 컨테이너의 폭에서 이 링크의 패딩을 제외함으로써 올바른 폭을 계산합니다. */
	text-decoration: none;

}

ul.nav2 a, ul.nav2 a:visited { /* 이러한 선택기를 그룹화하여 방문한 이후에도 링크가 버튼 모양을 유지하도록 합니다. */
	padding: 0px 0px 0px 0px;
	display: block; /* 링크에 블록 속성을 제공하여 이를 포함한 전체 LI를 채우도록 합니다. 이렇게 하면 전체 영역이 마우스 클릭에 반응하게 됩니다. */
	width: 336x;  /*이 폭은 IE6에서 전체 버튼을 클릭할 수 있도록 합니다. IE6를 지원할 필요가 없는 경우에는 제거할 수 있습니다. 사이드바 컨테이너의 폭에서 이 링크의 패딩을 제외함으로써 올바른 폭을 계산합니다. */
	text-decoration: none;

}

ul.nav3 a, ul.nav3 a:visited { /* 이러한 선택기를 그룹화하여 방문한 이후에도 링크가 버튼 모양을 유지하도록 합니다. */
	padding: 0px 0px 0px 0px;
	display: block; /* 링크에 블록 속성을 제공하여 이를 포함한 전체 LI를 채우도록 합니다. 이렇게 하면 전체 영역이 마우스 클릭에 반응하게 됩니다. */
	width: 336x;  /*이 폭은 IE6에서 전체 버튼을 클릭할 수 있도록 합니다. IE6를 지원할 필요가 없는 경우에는 제거할 수 있습니다. 사이드바 컨테이너의 폭에서 이 링크의 패딩을 제외함으로써 올바른 폭을 계산합니다. */
	text-decoration: none;

}


ul.nav4 a, ul.nav4 a:visited { /* 이러한 선택기를 그룹화하여 방문한 이후에도 링크가 버튼 모양을 유지하도록 합니다. */
	padding: 0px 0px 0px 0px;
	width: 220x;  /*이 폭은 IE6에서 전체 버튼을 클릭할 수 있도록 합니다. IE6를 지원할 필요가 없는 경우에는 제거할 수 있습니다. 사이드바 컨테이너의 폭에서 이 링크의 패딩을 제외함으로써 올바른 폭을 계산합니다. */
	text-decoration: none;

}

ul.nav5 a, ul.nav5 a:visited { /* 이러한 선택기를 그룹화하여 방문한 이후에도 링크가 버튼 모양을 유지하도록 합니다. */
	padding: 0px 0px 0px 0px;
	display: block; /* 링크에 블록 속성을 제공하여 이를 포함한 전체 LI를 채우도록 합니다. 이렇게 하면 전체 영역이 마우스 클릭에 반응하게 됩니다. */
	width: 880x;  /*이 폭은 IE6에서 전체 버튼을 클릭할 수 있도록 합니다. IE6를 지원할 필요가 없는 경우에는 제거할 수 있습니다. 사이드바 컨테이너의 폭에서 이 링크의 패딩을 제외함으로써 올바른 폭을 계산합니다. */
	text-decoration: none;

}



	#footer {
	width:1000px;
	text-align:center;
	background-image: url(images/main_copyrightbg.png);
}