nav{user-select:none;position:fixed;z-index:900;top:0;left:0;background-image:linear-gradient(var(--bg) 0,var(--bg) 70%,transparent 100%);padding:20px min(5%,50px);padding-bottom:60px;width:100vw}a.brand{height:44px;width:130px;display:block;display:flex;justify-content:center}a.brand img{height:100%;object-fit:contain}nav>.container{position:relative;width:100%;height:44px;background-color:var(--bg);display:flex;justify-content:space-between}nav>.container>.menu-wrap{padding-right:20px;font-family:Montserrat-Black,sans-serif;font-weight:400;font-size:15px;display:flex}nav .nav-item{position:relative}nav .nav-item>a{text-transform:uppercase;height:100%;display:flex;justify-content:center;align-items:center;color:var(--mg);padding:0 13px}nav .nav-item>a::before{content:"";display:block;position:absolute;width:8px;height:8px;border-radius:50%;background-color:var(--mg);top:2px;left:50%;transform:translateX(-50%);transition:.8s;opacity:0}nav .nav-item:hover>a::before{opacity:1}nav ul{font-family:Montserrat-Semi,sans-serif;display:flex;width:fit-content;position:absolute;border-radius:18px;top:85%;left:50%;z-index:10;opacity:0;transition:1s;transform:translateX(-50%);background-color:var(--y);pointer-events:none;display:flex;align-items:center}nav #hp{transform:translateX(-100%);left:100%}nav .nav-item:hover ul{opacity:1;padding:0 5px;pointer-events:all}nav .nav-item ul li a{text-wrap:nowrap;display:block;color:#fff;font-size:13px;padding:5px 20px;transition:.5s}nav .nav-item ul li a:hover{color:var(--mg)}nav .menu-btn{position:relative;top:6px;border:4px solid var(--mg);width:30px;height:30px;border-radius:50%;transition:.6s;transform:rotate(0);display:none}nav .menu-btn.show,nav .menu-btn:hover{border:4px solid var(--y)}nav .menu-btn.show:hover{border:4px solid var(--mg)}nav .menu-btn.show{transform:rotate(405deg)}nav .menu-btn::after,nav .menu-btn::before{content:"";display:block;position:absolute;width:3px;height:80%;background-color:var(--mg);bottom:10%;left:45%;transition:background-color 1s}nav .menu-btn::after{transform:rotate(90deg)}nav .menu-btn.show::after,nav .menu-btn.show::before{background-color:var(--y)}@media all and (max-width:700px),all and (max-aspect-ratio:2/3){#nav{width:100vw}#nav .container .menu-wrap{position:fixed;top:90px;left:0;height:calc(100vh - 90px);flex-direction:column;background-color:#fffdf7;justify-content:center;gap:3%;transform:rotate(-90deg);transform-origin:left bottom;transition:1s;transform-style:preserve-3d;opacity:1}#nav .container .menu-wrap::before{content:"";display:block;position:absolute;top:0;left:0;width:100vw;height:calc(100vh - 90px);background-color:rgba(0,0,0,.3);transform:translateZ(-10px);opacity:0;transition:opacity 1s}#nav .container .menu-wrap.show{transform:rotate(0);opacity:1}#nav .container .menu-wrap.show::before{opacity:1}nav .nav-item ul li a{font-size:5vw}nav .nav-item ul li{padding:10px 30px}nav ul{left:100%;top:10px;transform:translateY(-50%);border-radius:5px}nav #hp{transform:translateY(-50%)}nav .nav-item>a{font-size:5vw}nav .nav-item>a::before{top:50%;left:15px;transform:translateY(-50%)}nav .menu-btn{display:block}}@media all and (max-width:1100px){nav ul{flex-direction:column;padding:0;border-radius:10px}nav .nav-item ul li a{padding:10px 0;font-size:3vw}}