.menu-wrap{position:absolute;z-index:1001;width:400px;top:-1px;height:100vh;background:#373a47;padding:46px 68px 50px 35px;font-size:1.15em;-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0);-webkit-transition:-webkit-transform 0.4s;transition:transform 0.4s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}body.show-offcan{position:relative}body.show-offcan .offwrap{position:absolute;width:100%;background:#000;height:100%;top:0;bottom:0;z-index:9;opacity:.5}.offwrapcon::before{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:rgb(0 0 0 / .3);content:'';opacity:1;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-webkit-transition:opacity 0.4s,-webkit-transform 0s 0.4s;transition:opacity 0.4s,transform 0s 0.4s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}.icon-list{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.icon-list{-webkit-transition:-webkit-transform 0s 0.4s;transition:transform 0s 0.4s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}.show-offcan .menu-wrap{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 0.8s;transition:transform 0.8s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}.show-offcan .icon-list{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 0.8s;transition:transform 0.8s;-webkit-transition-timing-function:cubic-bezier(.7,0,.3,1);transition-timing-function:cubic-bezier(.7,0,.3,1)}.show-offcan .icon-list{-webkit-transition-duration:0.9s;transition-duration:0.9s}