*{box-sizing: border-box}
body{font-family: 'Noto Sans KR', sans-serif;font-size: 14px;
background: #627ad0;}

header{position: fixed;width: 100%;height: 63px;box-shadow: 0 0 3px #666;z-index: 10;
background: #fff;overflow: hidden;}
header h1{float: left;margin: 10px 0 0 30px}
header .headernav{float: right}
header .headernav ul li{float: left;width: 100px;text-align: center}
header .headernav a{display: block;padding: 22px 0;}
header .headernav ul a:hover{background: #666;color: #fff}

.nav{position: fixed;width: 200px;z-index: 5;background: #fff}
.nav h2{margin-top: 113px;background: url(../12_11/lotte_img/btn_hamburg.gif)no-repeat left center;
text-indent: 50px;color: #0040b5;cursor: pointer;}
.nav .navlist{margin: 10px 0}
.nav .navlist li{width: 100%;font-size: 16px}
.nav .navlist a{display: block;padding: 20px;}
.nav .navlist a:hover{background: #0040b5;color: #fff}


.contents{overflow: hidden;padding-left: 250px;padding-top: 100px}
section{background: #fff url(../12_11/lotte_img/img-sub-a380.png)no-repeat right bottom;
padding: 15px;margin-bottom: 10px}
section img{width: 100%;}
section p{font-size: 2em}
section .pink{color: pink}
section .orange{color: orange}
section .yellow{color: #f0ec66}

footer{margin-left: 200px;background: #fff;}
footer p{padding: 20px 0;margin-left: 10px}

@media only screen and (max-width: 480px){
header h1{float: none;margin: 10px auto;width: 121px;}
header .headernav{display: none;}
#mainnav{display: none}
#mainnav:target{display: block;}
.nav{width: 100%;border-bottom: 3px solid #0040b5}
.nav .navlist li{float: left;width: 49%;text-align: center}
.contents{padding: 450px 0 50px 0;}
footer{margin: 0}

}
@media only screen and (min-width:481px) and (max-width: 799px){
.contents{padding-left: 210px}
section{max-width: 99%}
.nav{height: 100%}
}

@media only screen and (min-width: 800px){
section{float: left;max-width: 49%}
section:nth-child(odd){margin-right: 1%}
.nav{height: 100%}

}