.hamburger{position:absolute;right:12px;top:14px;width:20px;height:20px;cursor:pointer;z-index:300}.hamburger__line{position:absolute;width:20px;height:1px;right:0;background-color:#000;transition:all .5s}.hamburger__line--1{top:1px}.hamburger__line--2{top:8px}.hamburger__line--3{top:16px}.open .hamburger{position:fixed;right:12px;top:14px}.open .hamburger__line--1{transform:rotate(-45deg);top:11px;background-color:#fff}.open .hamburger__line--2{opacity:0;background-color:#fff}.open .hamburger__line--3{transform:rotate(45deg);top:11px;background-color:#fff}.sp-nav{position:fixed;right:-100%;top:0;max-width:260px;width:60%;height:100vh;background-color:#fff;transition:all .5s;z-index:200;overflow-y:auto}.open .sp-nav{right:0}.black-bg{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:5;background-color:#000;opacity:0;visibility:hidden;transition:all .5s;cursor:pointer;z-index:100}.open .black-bg{opacity:.3;visibility:visible}