#header {position: fixed; z-index: 100; top: 1rem; right: 1rem;}
#header .header {display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem; border-radius: 5rem; background-color: rgba(117,91,77,.8); backdrop-filter: blur(5px);}
#header .header a {padding: 1.1rem 0; line-height: 1; display: block; color: var(--white); font-family: var(--pointfont); text-transform: uppercase; position: relative;}
#header .header a:after {content:''; width: 0; height: 1px; background-color: var(--white); position: absolute; left: 0; right:0; bottom: 1rem; margin: auto;  transition: width .3s;}
#header .header a:hover:after {width: 100%; transition: width .3s;}


@media(max-width:600px) {
    #header {top: auto; right: auto; left: 10%; bottom: calc(1rem + env(safe-area-inset-bottom)); width: fit-content; transform: translateX(0);} 
    #header .header a {font-size: 1.3rem; font-weight: 500;}
}


.naverBtn {display: flex; align-items: center; gap: .625rem; padding: .7rem 1.2rem; background-color: rgba(3,207,93,.8); color: var(--white); backdrop-filter: blur(10px);/*  border: 1px solid var(--white); */ position: fixed; bottom: 2rem; right:1rem; z-index: 9; border-radius: 3.125rem;}
@media (max-width: 600px) {
    .naverBtn {padding: 1.1rem 1.5rem; right: 10%; bottom: calc(1rem + env(safe-area-inset-bottom));}
    .naverBtn img {height: 10px;}
}