.navBox{clip-path:polygon(calc(100% - 2.375rem) 2.375rem,calc(100% - 1rem) 2.375rem,calc(100% - 1rem) 2.5rem,calc(100% - 2.375rem) 2.5rem);background-color:#fff;width:100%;height:100vh;position:fixed;top:0;left:0;overflow-y:auto}.active .navBox{color:#020e07;clip-path:polygon(101% -1%,101% 101%,-1% 101%,-1% -1%);background-color:#f5f5f5!important}.contents{opacity:0;flex-direction:column;align-items:center;display:flex;transform:translateY(-1.25rem)}.active .contents{opacity:1;transition:transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(0)}.close-bars{stroke:#fff;transition:stroke .4s cubic-bezier(.4,0,.2,1)}.active .close-bars{stroke:#020e07!important}.closeSvg{pointer-events:none;position:absolute;top:0;right:0}.bar{transition:transform .4s cubic-bezier(.4,0,.2,1)}.bar1{transform-origin:12rem .3125rem}.bar2{transform-origin:11.875rem .71875rem}.bar3{opacity:0}.active .bar1{transform:translateY(.5375rem)rotate(45deg)}.active .bar2{transform:rotate(-47deg)}.active .bar3{opacity:0;animation-name:none;transform:translateY(1rem)}@supports (-webkit-touch-callout:none){.navBox{color:#0000!important;background:0 0!important}.bar3{opacity:0;animation:1s forwards showBar}@keyframes showBar{to{opacity:1}}}