@charset "utf-8";

body {
	margin: 0;
}
nav {
	border-top: 8px solid #000000;
}
nav ul {
	overflow: hidden;
	list-style: none;
	margin: 50px auto;
	padding: 0;
	width: 700px;
}
nav li {
	box-sizing: border-box;
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 50px;
	text-indent: -9999px;
}
nav li:last-child {
	margin-right: 0;
}
nav a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/navigation.png) no-repeat;
}
/* 일반적인 스타일 */
.about { background-position: left 0 top 0; }
.lunch { background-position: left -100px top 0; }
.drink { background-position: left -200px top 0; }
.dinner { background-position: left -300px top 0; }
.access { background-position: left -400px top 0; }
/* 마우스를 올려놓았을 때의 스타일 */
.about:hover { background-position: left 0 top -100px; }
.lunch:hover { background-position: left -100px top -100px; }
.drink:hover { background-position: left -200px top -100px; }
.dinner:hover { background-position: left -300px top -100px; }
.access:hover { background-position: left -400px top -100px; }