#top                    { max-width: 100%; overflow-x: hidden; padding-top: 100px; }

#header                 { height: 80px; position: fixed; width: calc(100% - 40px); top: 0; z-index: 2000; }
#header .logo           { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); }
#header .right          { display: none; }
#header .nav            { position: fixed; left: -110vw; top: 0; width: 80vw; height: 100vh; overflow-y: auto; transition: all .5s; background: #57606F; }
#header .nav            { text-align: left; padding: 30px 20px; z-index: 2000; box-shadow: 0 0 20px rgba(0,0,0,0.3); }
#header .nav li         { display: block; }
#header .nav a          { color: #fff; }
#header .nav.open       { left: 0; }

#header .mobile_btn             { color: var(--color-main); position: absolute; top: 15px; z-index: 20; display: block; }
#header .mobile_btn:before      { font-family: 'Font Awesome 5 Pro'; font-size: 24px; font-weight: bold; color: var(--color-main); }
#header .mobile_menu            { left: 20px; }
#header .mobile_menu:before     { content: '\f0c9'; }
#header .mobile_login           { right: 20px; }
#header .mobile_login:before    { content: '\f007'; }
#header .menu_close             { left: auto; right: 20px; }
#header .menu_close:before      { content: '\f00d'; font-weight: 100; color: rgba(255,255,255,0.5); }