header {
 height: 120px;
}

.logo{
 width: 14.5vw;
}

.hd_nav{
 width: 80%;
}

.hd_nav a {
 position: relative;
 display: inline-block;
 padding: 5px 10px;
 overflow: hidden;
 margin-left:2%;
 font-size:1vw;
}

.hd_nav a.on {
 background-color: black;
 color: white;
}

.hd_nav a::before {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 z-index: -1;
 transform: translateX(-101%);
 transition: transform 0.3s ease;
}

.hd_nav a:hover::before {
 transform: translateX(0);
}

.hd_nav a:hover {
 color: white;
}


.menu_box {
 display: none;
}

.menu_box.show {
 transform: translateX(0);
}

.menu_box {
 width: 70%;
 height: calc(100% - 60px);
 position: fixed;
 bottom: -8px;
 left: 0;
 z-index: 999;
 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 transform: translateX(-110%);
 transition: transform 1s;
}

.menu_box .close {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 top: 20px;
 right: 20px;
}

.menu_box .close i {
 font-size: 20px;
}

.menu_box ul.m_main_menu>li {
 width: 100%;
 margin-bottom: 40px;
}

.menu_box ul.m_main_menu>li p {
 width: max-content;
 position: relative;
 font-size: 1.5em;
}

.menu_box ul.m_main_menu>li p:after {
 content: " ";
 width: 5px;
 height: 5px;
 border-radius: 5px;
 position: absolute;
 top: 50%;
 left: -13px;
 transform: translateY(-50%);
}

.menu_overlay {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
}


/* mobile */
@media screen and (max-width: 767px) {
 header {
  height: 68px;
 }

 header .logo {
  width: 50%;
 }

 header ul:not(.m_main_menu) {
  display: none;
 }

 header .menu_box {
  display: flex;
 }

 header .hd_m_nav i {
  font-size: 25px;
 }
}



/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
 header {
  height: 88px;
 }

 header ul:not(.m_main_menu) {
  display: none;
 }

 header .menu_box {
  display: flex;
 }

 header .hd_m_nav i {
  font-size: 25px;
 }
}