@charset "utf-8"; /* 필수값 지우지말것 */ 
header nav .h-n { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } 
header { box-shadow: -2px 1px 5px #3f3f3f26; position: relative; width: 100%; background-color: #fff; z-index: 9999; } 
header h1 { width: 250px; padding: 10px; } 
header h1 img { width: 100%; } 
header .h-n li { display: inline-block; font-size: 18px; } 
header .h-m a { padding: 25px 30px; cursor: pointer; display: block; font-weight: bold; } header .h-m .menu_event { color:#7c5427; } 
.h-b{ display:none; overflow:hidden; } 
header .h-b a { padding: 0; font-weight: normal; } 
header .h-n li ul li { font-size: 20px; padding: 20px; } 
header .h-n li ul { position: absolute; background-color: #efefef; left: 0; top: 70px; width: 100%; text-align: center; display: none; } 
header nav li:last-child { border-right: 0; padding-right: 0; } 

/* 햄버거 메뉴 */ 
.ham-btn { cursor: pointer; padding: 10px 15px; display: none; position: absolute; z-index: 99999; } 
.ham-btn span { display: block; width: 30px; height: 3px; background-color: #242424; border-radius: 100px; cursor: pointer; transition: 0.3s; } 
.ham-btn span:nth-child(2) { margin: 5px 0; } 
.ham-nav { position: fixed; background-color: #fbfbfb; text-align: right; width: 90%; height: 100vh; right: -100%; text-align: center; transition: all 0.3s; cursor: pointer; } 
.ham-nav.on { opacity: 1; right: 0; } 
.ham-nav.active { opacity: 1; translate: all 0.2s; } 
.ham-nav li { font-size: 20px; font-weight: bold; margin: 30px 0; } 

.ham-nav li .h-b li { font-size: 16px; margin: 10px 0; font-weight: normal; } 
.ham-nav li .h-b1 li { font-size: 16px; margin: 10px 0; font-weight: normal; } 
.ham-btn.on span:first-child { transform: translate(20px) rotate(-45deg); translate: -20px 3px; } 
.ham-btn.on span:nth-child(2) { opacity: 0; } 
.ham-btn.on span:last-child { transform: translateY(-20px) rotate(45deg); translate: 0px 6px; } 
@media screen and (max-width:1200px) { 
    header h1 { width: 200px; } 
    header .h-n li { font-size: 16px; padding:0; } 
    header nav .h-n { justify-content: space-around; max-width: 924px; } 
    header .h-n li ul { top: 65px; } 
} 
@media screen and (max-width:1024px) { 
    header h1 { width: 200px; } 
    header .h-n li { font-size: 16px; padding: 0 15px; } 
    header nav .h-n { justify-content: space-around; max-width: 1024px; } 
    header .h-m a { padding: 10px 30px; cursor: pointer; display: block; font-weight: bold; } 
    header nav .h-n ul { display: none; } 
    .ham-btn { display: block; right:50px; top:15px; } 
} 
    
@media screen and (max-width:768px) { 
    header h1 { padding-top: 20px; width: 200px; } 
    .ham-btn { right: 20px; top: 18px; } 
}