#header{
width: 100%;
height: 100px;
background:rgba(42,65,95,0.45);
position: fixed;
top:0px;
z-index:998;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}

.menu-toggle{
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #FFF;
font-size: 2.5rem;
cursor: pointer;
z-index: 90;
display: none;
}

#nav_menu{
min-width: 100%;
padding-top:20px;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.6rem;
white-space : nowrap;
}
.brand{
margin-left: 10px;
font-size:2rem;
transform: translateX(-77rem);
animation: slideIn .5s forwards;
font-family: 'PyeongChangPeace-Bold', sans-serif;
white-space : nowrap;
padding: 0;
margin: 0;
z-index: 90;
}
.brand a{
color: #FFF;
}
.brand .homemog{
font-size:1.75rem;
padding: 0;
margin: 0;
}
.brand .hottxt{
color: crimson;
}

#nav_menu ul{
display: flex;
margin-right: 23px !important;
}

#nav_menu ul li{
list-style: none;
transform: translateX(77rem);
animation: slideIn .5s forwards;
white-space : nowrap;
}
#nav_menu ul li:nth-child(1){
animation-delay: 0s;
}
#nav_menu ul li:nth-child(2){
animation-delay: .15s;
}
#nav_menu ul li:nth-child(3){
animation-delay: .3s;
}
#nav_menu ul li:nth-child(4){
animation-delay: .45s;
}
#nav_menu ul li:nth-child(5){
animation-delay: .6s;
}
#nav_menu ul li:nth-child(6){
animation-delay: .75s;
}
#nav_menu ul li:nth-child(7){
animation-delay: .9s;
}
#nav_menu ul li:nth-child(8){
animation-delay: 1.05s;
}
#nav_menu ul li:nth-child(9){
animation-delay: 1.2s;
}
#nav_menu ul li a{
font-family:"Tenada","NEXON Lv1 Gothic OTF","Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight: 500;
font-size: 1.25rem;
color: #FFF;
padding: 10px 0;
margin: 0 20px;
position: relative;
}

#nav_menu ul li a:last-child{
margin-right: 0;
}
#nav_menu ul li a::before,
#nav_menu ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, transparent, #FFF, transparent);
  left: 0;
  top: calc(100% - 10px);
  transform: scaleX(0);
  transform-origin: center;
  transition: all .5s;
}

#nav_menu ul li a::before{
top: 1px;
transform-origin: left;
}

#nav_menu ul li a::after{
bottom: 1px;
transform-origin: right;
}

.overlay{
background-color: rgba(0,0,0,0.8);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}

#nav_menu ul li a:hover::before,
#nav_menu ul li a:hover::after{
transform: scaleX(1);
}

@keyframes slideIn {
from{
}
to{
transform: translateX(0);
}
}

@media screen and (max-width: 768px){
.menu-toggle{
display: block;
}
.menu-toggle i{
position: relative;
top:-10px;
right:-15px;
}
#nav_menu{
padding-top:35px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
#nav_menu ul{
flex-direction: column;
margin: 50px 0 0 0;
display: none;
}
#nav_menu ul li{
margin-top: 10px;
white-space : nowrap;
}
#nav_menu ul li::before {
content: "🍀";
font-family: "FontAwesome";
font-weight: 500;
margin:0px;
font-size: 1rem;
}
#nav_menu ul li::after {
content: "🍀";
font-family: "FontAwesome";
font-weight: 500;
margin:0px;
font-size: 1rem;
}
#nav_menu ul li a{
margin: 0;
font-size: 1.25rem !important;
}
.brand{
position:absolute;
top:33px;
left:7px;
font-size:2rem;
transform: translateX(-77rem);
animation: slideIn .5s forwards;
font-family: 'PyeongChangPeace-Bold', sans-serif;
}
.overlay.menu-open,
#nav_menu ul.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
}