.header {position: fixed; top: 0; right: 0; left: 0; z-index: 100; transition: var(--trans)}
.header:after {position: absolute; top: 100%; right: 0; left: 0; z-index: -1; display: block; height: 0; content:''; background-color: rgba(255,255,255,0.8); transition: var(--trans);}

.header-logo { position: absolute; top: 50%; left:4.7rem; transform:translateY(-50%)}
.header-logo__link {display: inline-block;}
.header-logo__img {width: 5.6875rem;}
@media(max-width:1536px){
    .header-logo {left: 2em;}
}
@media(max-width:1080px){
    .header {height: var(--hd-gap); display: flex;  justify-content: space-between; align-items: center; padding:0 2em;}
    .header-logo {position: static; transform:none;}
    .header-logo__img {width: 4.75rem;}
}
@media(max-width:600px){
    .header {flex-direction:column;}
    .header-logo {padding-top: 0.5em;}
}



.top-navi__list {display: flex; justify-content: center; align-items: center; gap:20.2em;}
.top-navi__item {position: relative;}
.top-navi__link {font-size: var(--para); font-weight: 800; display: flex; justify-content: center; align-items: center; height: var(--hd-gap); text-align: center; letter-spacing: -0.03em; border-bottom:3px solid transparent; transition: var(--trans);}
.top-navi__link[aria-current="page"] {color: var(--prm); border-color:var(--prm);}
.top-navi__toggle {position: absolute; left: 50%; transform:translateX(-50%); min-width:100%; padding:0.5em 0; text-align: center; opacity: 0; visibility: hidden; transition: var(--trans)}
.top-navi__sub {margin-bottom: 0.8em;}
.top-navi__sub:last-child {margin-bottom: 0;}
.top-navi__btn {display: inline-block; padding: 0.4em 0; font-size: 1.125em; font-weight: 700; white-space:nowrap; transition:var(--trans)}
.top-navi__btn,
.top-navi__btn:link,
.top-navi__btn:visited {color: #666;}
@media (max-width: 1536px){
    .top-navi {width: 100%;}
    .top-navi__list {gap:10em}
}
@media(max-width:768px){
    .top-navi__list {gap:5em;}
}
@media(max-width:600px){
    .top-navi__link {padding:0.5em 0; height: auto;}
}
@media(max-width:500px){
    .top-navi__list {gap:2.2em;}
}

@media(hover:hover){
    .top-navi__link:hover {border-color:var(--prm)}
    .top-navi__btn:hover {color: var(--prm);}
}


.toggle-menu {display: none; position: relative; width: 1.5rem; height: 1rem; margin-left: auto;}
.toggle-menu__bar {position: absolute; left: 0; width: 100%; height: 2px; background-color: #000; transition: var(--trans);}
.toggle-menu__bar:first-of-type {top: 0;}
.toggle-menu__bar:nth-of-type(2) {top: 50%; transform:translateY(-50%)}
.toggle-menu__bar:last-of-type {bottom: 0;}

.toggle-menu[aria-expanded="true"] .toggle-menu__bar:first-of-type {top: 50%; left: 50%; transform:translate(-50%, -50%) rotate(-45deg)}
.toggle-menu[aria-expanded="true"] .toggle-menu__bar:nth-of-type(2) {opacity: 0;}
.toggle-menu[aria-expanded="true"] .toggle-menu__bar:last-of-type {top: 50%; left: 50%; transform:translate(-50%, -50%) rotate(45deg)}

@media(max-width:1080px){
    .toggle-menu {display: block;}
}

.toggle-gnb {position: absolute; top: 0; right: 0; left: 0; height: 100dvh; padding-top: var(--hd-gap); background-color: rgba(255,255,255,0.95); transform:translateY(-50px); opacity: 0; visibility:hidden; z-index: -1; transition: var(--trans);}
.toggle-gnb--on {opacity: 1; visibility:visible; transform:translateY(0)}
.toggle-gnb__main-list {padding:3rem 0;}
.toggle-gnb__main-item {margin-bottom: 4rem; display: flex; align-items: center;}
.toggle-gnb__main-item:last-child {margin-bottom: 0;}
.toggle-gnb__main-btn {font-size: var(--tit); font-weight: 700; width: 7em; transition: var(--trans);}
.toggle-gnb__sub-list {flex:1; display: flex; flex-wrap:wrap; gap:0.5rem 2rem;}
.toggle-gnb__sub-btn {font-size: var(--para); font-weight: 500; transition: var(--trans);}

.toggle-gnb__main-btn[aria-current="page"] {color: var(--prm);}
@media(max-width:500px){
    .toggle-gnb__main-item {display: block; margin-bottom: 2.5rem;}
    .toggle-gnb__sub-list {margin-top: 1rem;}
}
@media(hover:hover){
    .toggle-gnb__main-btn:hover {color: var(--prm);}
    .toggle-gnb__sub-btn:hover {color: var(--prm);}
}


.header--on {box-shadow:0 4px 8px rgba(0,0,0,0.15)}

.header--open:after {height: 14rem;}
.header--open .top-navi__toggle {opacity: 1; visibility: visible; transition-delay:.075s}