:root{--bar-bg:#fff}.menu-icon{cursor:pointer;height:24px;position:relative;width:24px}.menu-icon .menu-icon__cheeckbox{-webkit-touch-callout:none;cursor:pointer;display:block;height:100%;opacity:0;position:absolute;width:100%;z-index:2}.menu-icon div{bottom:0;height:12px;left:0;margin:auto;position:absolute;right:0;top:0;width:22px}.menu-icon span{background-color:var(--bar-bg,#000);border-radius:1px;display:block;height:2px;position:absolute;transition:all .2s cubic-bezier(.1,.82,.76,.965);width:100%}.menu-icon span:first-of-type{top:0}.menu-icon span:last-of-type{bottom:0}.menu-icon .menu-icon__cheeckbox:checked+div span:first-of-type,.menu-icon.active span:first-of-type{top:5px;transform:rotate(45deg)}.menu-icon .menu-icon__cheeckbox:checked+div span:last-of-type,.menu-icon.active span:last-of-type{bottom:5px;transform:rotate(-45deg)}.menu-icon.active:hover span:first-of-type,.menu-icon.active:hover span:last-of-type,.menu-icon:hover .menu-icon__cheeckbox:checked+div span:first-of-type,.menu-icon:hover .menu-icon__cheeckbox:checked+div span:last-of-type{width:22px}@media (min-width:1024px){.menu-icon:hover span:first-of-type{width:26px}.menu-icon:hover span:last-of-type{width:12px}}.v-enter-active[data-v-fe91864c],.v-leave-active[data-v-fe91864c]{transition:.5s ease}.v-enter-from[data-v-fe91864c],.v-leave-to[data-v-fe91864c]{opacity:0;transform:translateY(-10%)}