.header { position: fixed; left: 0; top: 0; width: 100%; z-index: 100000; padding-top: 30px; transition: opacity .6s .4s, visibility .6s .4s;}
.header.invisible {opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s;}
.header .wrap {display: flex; justify-content: space-between; align-items: flex-start;}
.header .wrap .logo {width: 228px; cursor: pointer;}
.header .wrap nav {position: relative;}
.header .wrap nav ul li {cursor: pointer; font-family: 'Montserrat'; text-align: right; color: #8c8c8c; font-size: 18px; letter-spacing: -0.025em; font-weight: 300; transition: color .8s;}
.header .wrap nav ul li.act {font-weight: 500; color: #000;}
.header .wrap nav ul li+li {margin-top: 10px;}

.header .wrap nav .hmbrBtn {width: 36px; height: 36px; border-radius: 50%; border: 1px solid transparent; background: transparent; position: relative; cursor: pointer; display: none;}
.header .wrap nav .hmbrBtn > div {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: .4s;} 
.header .wrap nav .hmbrBtn .default {opacity: 1;}
.header .wrap nav .hmbrBtn.act .default {opacity: 0;}
.header .wrap nav .hmbrBtn .default div {width: 50%; height: 2px; border-radius: 30px; background: #000; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); --gap: -6px;}
.header .wrap nav .hmbrBtn .default div:nth-child(1) {margin-top: var(--gap);}
.header .wrap nav .hmbrBtn .default div:nth-child(3) {margin-top: calc(var(--gap)*-1)}
.header .wrap nav .hmbrBtn .close {opacity: 0;}
.header .wrap nav .hmbrBtn.act .close {opacity: 1;}
.header .wrap nav .hmbrBtn .close div {width: 0px; height: 2px;  border-radius: 30px; background: #000; position: absolute; left: 50%; top: 50%; transition: .6s; transform-origin: center;}
.header .wrap nav .hmbrBtn .close div:nth-child(1) {transform: translate(-50%, -50%) rotate(45deg);}
.header .wrap nav .hmbrBtn .close div:nth-child(2) {transform: translate(-50%, -50%) rotate(-45deg);}
.header .wrap nav .hmbrBtn.act .close div:nth-child(1) {width: 50%; transition: .4s .4s;}
.header .wrap nav .hmbrBtn.act .close div:nth-child(2) {width: 50%; transition: .4s .6s;}


@media screen and (max-width: 820px) {
    .header {padding-top: 0px; padding: 5px 0 5px 5px; box-sizing: border-box; background: #aaaaaa72; backdrop-filter: blur(4px);}
    .header .wrap {align-items: center;}
    .header nav {position: relative;}
    .header nav ul {position: absolute; right: 0; top: 100%; display: none; margin-top: 20px; padding: 20px; background: #ffffffe8; border-radius: 0px; border: 1px solid #eee; }
    .header .wrap nav ul li.act {font-weight: 300; color: #8c8c8c;}
    .header .wrap nav .hmbrBtn {display: block;}
}
@media screen and (max-width: 500px) {
    .header .wrap .logo {width: 160px; display: flex; align-items: center;}
    .header .wrap nav .hmbrBtn {width: 30px; height: 30px;}
}