#menu-bar{z-index:1;cursor:pointer;flex-direction:column;justify-content:center;row-gap:4px;width:35px;height:40px;display:flex}.bar{background-color:#fff;border-radius:5px;height:4px;transition:all .3s;display:block}.nav{width:200px;transition:all .3s;display:none}.nav ul{z-index:100;position:relative}.nav li{padding:6px 0;list-style:none}.nav li a{color:#000;font-size:20px;text-decoration:none}.nav li a:hover{font-weight:700}#bg-layout{background:rgba(0,0,0,.44);width:100%;height:100%;display:none;position:fixed;top:0;bottom:0;left:0;right:0}#bg-layout.change{display:block}.menu-bg,#menu{flex-direction:column;align-items:end;display:flex}.change{display:block}.change .bar{background-color:#000}.change #bar1{transform:translateY(4px)rotate(-45deg)}.change #bar2{opacity:0}.change #bar3{transform:translateY(-11px)rotate(45deg)}