@media  (max-width: 1200px) {

.hero header nav{
      width: 380px;
      height: 100%;
      background: #4b66ff;
      margin: 0; padding: 50px;

      position: absolute;
      top: 0px;
      right: -380px;
      bottom: 0px;
      z-index: 100;
      transition: 0.5s right;
}

.nav_box.check{right: 0;}
.nav_box ul li{display: flex; line-height: 20px;}
.nav_box ul li:not(:last-child) a{
font-size: 1.3em; margin: 0 0 20px;}
.nav_box ul li:last-child a{margin: 10px 10px 0;}
.nav_box ul li a.btn{
padding: 12px 30px;
transition: 0.3s box-shadow;
background: transparent;
border: 2px solid #fff;
border-radius: 30px;
}

.hamb{
width: 35px; height: 25px;
position: absolute;
top: 50px;
right: 5%;

z-index: 200;
}

.hamb span{
display: block;
width: 100%;
height: 4px;
background: #ffffff;
}

.hamb span.mid{margin: 8px 0;}
.hero .details{width: 100%;}
.bg{display: none;}

}/* 끝.. 절대지우지마 */