nav.nav-top{position:fixed;z-index:20;width:100%;padding:0;background-color:#000;min-height:50px;color:#fff}nav.nav-top .logo{position:absolute;width:150px;left:50%;transform:translate(-50%,0)}nav.nav-top .logo img{max-width:100%}nav.nav-top .logIn{top:50%;transform:translate(0,-50%);position:absolute;right:20vw;width:80px;height:25px;display:block;padding:0 4px;border:solid 2px #ffd400;border-radius:15px;text-align:center;font-size:16px;line-height:23px;color:#ffd400;transition:all .25s ease-in-out}@media (max-width:768px){nav.nav-top .logIn{right:1vw}}nav.nav-top .logIn:hover{background-color:#ffd400;color:#ffff}nav.nav-left{position:fixed;width:150px;height:100%;top:0;background-color:#333;z-index:1000;transition:.3s all;left:-150px;transform:translateX(0);display:flex;flex-direction:column;align-items:center}nav.nav-left img{max-width:100%;margin:0}nav.nav-left.open{transform:translateX(100%)}nav.nav-left a.logo{width:100%;text-align:center;height:70px;line-height:70px}nav.nav-left a.download{width:100%;height:37px;transition:.3s all}nav.nav-left a.download:hover{filter:brightness(1.5)}nav.nav-left a{font-size:14px;display:inline-block;text-align:center;font-weight:600}nav.nav-left .nav_box2{width:100%;line-height:27px;height:35px;margin-bottom:2px}nav.nav-left .nav_box2 a{background:#ffd800;font-size:16px;width:50%;color:#000;transition:.3s linear}nav.nav-left .nav_box2 a:hover{color:#ffff;background:#000}nav.nav-left .nav_box3{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;text-align:center;height:40px;transition:.3s all}nav.nav-left .nav_box3 a{width:33%;display:inline-block;border-right:2px solid #d8d8d8;opacity:.5}nav.nav-left .nav_box3 a:hover{opacity:1}nav.nav-left .nav_box3 a:nth-child(3){border-right:none}nav.nav-left .nav_leftWrap{height:calc(100% - 170px);overflow-y:scroll;scrollbar-width:none}nav.nav-left .nav_leftWrap .nav_box{position:relative;width:130px;height:160px;border-top:2px solid #676767;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;opacity:.5;transition:.3s all}nav.nav-left .nav_leftWrap .nav_box:hover{opacity:1}nav.nav-left .nav_leftWrap .nav_box .txt{color:#fff}nav.nav-left #nav_toggler{position:absolute;width:50px;height:50px;background-color:#333;right:-50px;top:0;cursor:pointer}nav.nav-left #nav_toggler span{position:absolute;width:20px;height:2px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:1px;background:#fbff00;transition:1s all}nav.nav-left #nav_toggler span:nth-of-type(1){transform:translate(-50%,calc(-50% + 5px))}nav.nav-left #nav_toggler span:nth-of-type(3){transform:translate(-50%,calc(-50% - 5px))}nav.nav-left #nav_toggler.open span:nth-of-type(1){transform:translate(-50%,-50%) rotate(-135deg)}nav.nav-left #nav_toggler.open span:nth-of-type(2){width:0}nav.nav-left #nav_toggler.open span:nth-of-type(3){transform:translate(-50%,-50%) rotate(135deg)}