<!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, maximum-scale=2.0, minimum-scale=1.0, user-scalable=no">
<title>mobile</title>
<style>
* {margin: 0; padding: 0;}
li {list-style: none;}
a {color: black; text-decoration: none;}
.header {
width: 100%; height: 50px;
background-color: #8d0000;
color: white;
text-align: center;
line-height: 50px;
position: relative;
}
#ham_chk {display: none;}
#ham_chk:checked ~ .lnb01 {display: block;}
.lnb01 {display: none;}
.lnb02 {display: none;}
.header .ham {
width: 32px; height: 32px;
background-image: url(./images/ham_btn.png);
position: absolute;
top: 7px; left: 7px;
text-indent: -9999px;
}
.lnb01 {
position: absolute;
top: 50px; left: 0;
}
.lnb01 li {
width: 100px; height: 32px;
text-align: center;
line-height: 32px;
background-color: brown;
color: white;
}
@media all and (min-width:321px) and (orientation:landscape) {
.ham {display: none;}
.lnb02 {display: block;}
.lnb01 li {display: none;}
}
.lnb02 li {
width: 20%; height: 30px;
background-color: #ccc;
font-weight: bold;
text-align: center;
line-height: 30px;
float: left;
}
.visual_main {
height: 300px;
background-color: rosybrown;
text-align: center;
line-height: 300px;
}
.event .eve {
height: 100px;
border: 1px solid black; box-sizing: border-box;
}
.notice .not {
overflow: hidden;
}
.notice .not div {
width: 50%; height: 150px;
border: 1px solid black; box-sizing: border-box;
float: left;
}
@media all and (min-width:321px) and (orientation:landscape) {
.event {overflow: hidden;}
.event .eve {
width: 50%;
float: left;
}
.notice {overflow: hidden;}
.notice .not {
width: 50%;
float: left;
}
.notice .not div {
width: 50%;
}
}
.footer {
width: 100%; height: 60px;
background-color: black;
font-weight: bold;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<input type="checkbox" id="ham_chk">
<header class="header">
<label class="ham" for="ham_chk">ham</label>
<h2>header</h2>
</header>
<ul class="lnb01">
<a href="#!"><li>lnb01</li></a>
<a href="#!"><li>lnb02</li></a>
<a href="#!"><li>lnb03</li></a>
<a href="#!"><li>lnb04</li></a>
<a href="#!"><li>lnb05</li></a>
</ul>
<ul class="lnb02">
<a href="#!"><li>lnb01</li></a>
<a href="#!"><li>lnb02</li></a>
<a href="#!"><li>lnb03</li></a>
<a href="#!"><li>lnb04</li></a>
<a href="#!"><li>lnb05</li></a>
</ul>
<section class="visual_main">
<h2>visual_main</h2>
</section>
<section class="event">
<div class="eve01 eve">event01</div>
<div class="eve02 eve">event02</div>
</section>
<section class="notice">
<div class="notice0102 not">
<div class="not01">notice01</div>
<div class="not02">notice02</div>
</div>
<div class="notice0304 not">
<div class="not03">notice03</div>
<div class="not04">notice04</div>
</div>
</section>
<footer class="footer">
copyright
</footer>
</body>
</html>