#header {position: fixed; top: 0;left: 0;width: 100%;z-index: 100;transition: .4s;}
#header.on {backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);background: rgba(0,0,0,.5);}
#header > div {display: flex;align-items: center;height: 100rem;}
.header__logo {font-size: 24rem;font-weight: 900; letter-spacing: 0;font-family: var(--font-secondary-eng);}
.header__nav {margin-left: auto;}
.header__nav > ul {display: flex;align-items: center; gap: 60rem;}
.header__nav > ul > li {font-size: 18rem;line-height: 1.4; letter-spacing: 0;cursor: pointer;}
.header__gnb-button {display: none;}
.header__gnb-button > img {vertical-align: middle;}


#side {position: fixed;top: 0;right: -100%;width: 80%;max-width: 300rem; height: calc(var(--vh, 1vh)* 100);padding: 20rem 16rem 60rem; background: var(--color-neutral-6);transition: .4s;z-index: 999;}
#side.on {right: 0;}
#side > div {display: flex;flex-direction: column;height: 100%;}
.side__close {width: 24rem;margin-left: auto;margin-bottom: 100rem;cursor: pointer;}
.side__close > svg {width: 100%;}
.side__nav {}
.side__nav > ul {text-align: center;}
.side__nav > ul > li {margin-bottom: 30rem;;font-size: 24rem;font-weight: 500;}
.side__nav > ul > li:last-child {margin-bottom: 0;}
.side__buttons {margin-top: auto;}
.side__buttons > a {margin: 0 auto 10rem ;}




@media all and (max-width:1023px) {
    .header__nav {display: none;}
    .header__gnb-button {display: block; margin-left: auto;} 
}

@media all and (max-width:860px) {
    #header > div {height: 60rem;}
    .header__logo {font-size: 20rem;}
}