<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout_test_01</title>
<style>
* {margin: 0; padding: 0;}
a {color: black; text-decoration: none;}
li {list-style: none;}
/*-------- header --------*/
.header .logo {
width: 1024px; height: 200px;
background-color: green;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
.header .lnb_box {
background-color: #ccc;
margin-bottom: 10px;
}
.header .lnb {
width: 1024px; height: 30px;
background-color: beige;
border: 1px solid black; box-sizing: border-box;
cursor: pointer;
margin: 0 auto;
}
.header .lnb li {
width: 204.4px;
text-align: center;
line-height: 30px;
float: left;
margin: 0 auto;
}
.header .lnb li li {
display: none;
}
.header .lnb:hover li li {
display: block;
background-color: green;
}
/*-------- wrap --------*/
.wrap {
width: 1024px;
background-color: #ccc;
border: 1px solid black; box-sizing: border-box;
margin: 0 auto;
}
.wrap .visual_main {
height: 300px;
background-color: beige;
text-align: center;
line-height: 300px;
margin-bottom: 10px;
}
.wrap .event {
height: 200px;
background-color: beige;
margin-bottom: 10px;
overflow: hidden;
}
.wrap .event div{
width: 506px; height: 200px;
border: 1px solid black; box-sizing: border-box;
text-align: center;
line-height: 200px;
float: left;
}
.wrap .event div:first-child {
margin-right: 10px;
}
.wrap .product {
height: 610px;
background-color: beige;
margin-bottom: 10px;
overflow: hidden;
}
.wrap .product div {
margin-bottom: 10px;
}
.wrap .product div div {
width: 334px; height: 300px;
border: 1px solid black; box-sizing: border-box;
text-align: center;
line-height: 300px;
float: left;
}
.wrap .product div div:nth-child(2) {
margin: 0 10px ;
}
.wrap .rolling_banner {
height: 200px;
background-color: beige;
text-align: center;
line-height: 200px;
}
/*-------- footer --------*/
.footer {
height: 200px;
background-color: #ccc;
margin-top: 10px;
}
.footer div h2 {
width: 1024px;
background-color: beige;
text-align: center;
line-height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header class="header">
<h2 class="logo">logo</h2>
<nav class="lnb_box">
<div class="lnb">
<ul>
<li>menu01
<ul>
<li><a href="#">menu01-1</a></li>
<li><a href="#">menu01-2</a></li>
<li><a href="#">menu01-3</a></li>
<li><a href="#">menu01-4</a></li>
</ul>
</li>
<li>menu02
<ul>
<li><a href="#">menu02-1</a></li>
<li><a href="#">menu02-2</a></li>
<li><a href="#">menu02-3</a></li>
<li><a href="#">menu02-4</a></li>
</ul>
</li>
<li>menu03
<ul>
<li><a href="#">menu03-1</a></li>
<li><a href="#">menu03-2</a></li>
<li><a href="#">menu03-3</a></li>
<li><a href="#">menu03-4</a></li>
</ul>
</li>
<li>menu04
<ul>
<li><a href="#">menu04-1</a></li>
<li><a href="#">menu04-2</a></li>
<li><a href="#">menu04-3</a></li>
<li><a href="#">menu04-4</a></li>
</ul>
</li>
<li>menu05
<ul>
<li><a href="#">menu05-1</a></li>
<li><a href="#">menu05-2</a></li>
<li><a href="#">menu05-3</a></li>
<li><a href="#">menu05-4</a></li>
</ul>
</li>
</ul>
</div><!--lnb-->
</nav>
</header><!--header-->
<div class="wrap">
<section class="visual_main">
<a href="#">visual_main</a>
</section>
<section class="event">
<div><a href="#">event01</a></div>
<div><a href="#">event02</a></div>
</section>
<section class="product">
<div>
<div><a href="#">product01</a></div>
<div><a href="#">product02</a></div>
<div><a href="#">product03</a></div>
</div>
<div>
<div><a href="#">product04</a></div>
<div><a href="#">product05</a></div>
<div><a href="#">product06</a></div>
</div>
</section>
<section class="rolling_banner">
<a href="#">rolling_banner</a>
</section>
</div><!--wrap-->
<footer class="footer">
<div>
<h2>footer</h2>
</div>
</footer><!--footer-->
</body>
</html>