header {position: absolute; top: 0; left: 0; width: 100%; height: 136px; z-index: 10;}
header:before {position: absolute; top: 0; left: 0; content: ''; display: block; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.3); filter: blur(16px); -webkit-filter: blur(16px); transition: all .3s; z-index: -1;}
header.active:before {height: 100vh; backdrop-filter: blur(16px); -webkit-filter: blur(0); transition: all .3s;}
header .container {display: flex; align-items: flex-start; justify-content: space-between; width: 100%; height: 100%; padding-top: 60px;}
header .logo {width: 259px; height: auto; transition: all .3s;}
header.active .logo {opacity: 0; transition: all .3s;}
header .logo img {width: 100%; height: auto;}
header .menu-btn {width: 45px; height: auto; cursor: pointer;}
header.active .menu-btn {width: 20px; height: auto;}
header .menu-btn .mb {width: 100%; height: auto; cursor: pointer;}
header.active .menu-btn .mb {animation: jello-vertical1 0.9s both;}
header .menu-btn .mb.off {animation: jello-vertical2 0.9s both;}
@keyframes jello-vertical1 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical2 {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

header nav {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1800px; width: 100%; height: 0; display: flex; justify-content: flex-end; padding: 0; box-sizing: border-box; opacity: 0; z-index: -1; transition: all .3s;}
header.active nav {height: 100vh; margin: 120px 0; opacity: 1; transition: all .3s; z-index: 1;}
header nav ul {text-align: right;}
header nav ul li {margin-bottom: 10px;}
header nav ul li:last-of-type {margin-bottom: 0;}
header nav ul li a {position: relative; font-size: 20px; font-weight: bold; line-height: 1.2; color: var(--gray71);}
header nav ul li:nth-child(1) a.on {animation: topA .1s .5s alternate linear both;}
@keyframes topA {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}
header nav ul li:nth-child(2) a.on {animation: topA2 .3s .5s alternate linear both;}
@keyframes topA2 {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}
header nav ul li:nth-child(3) a.on {animation: topA3 .5s .5s alternate linear both;}
@keyframes topA3 {
  0% {
    opacity: 0;
    bottom: -30px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}

body .main-hd {position: fixed; background: transparent; z-index: 11;}
body .main-hd:before {display: none;}
body .main-hd .container {display: flex; align-items: center; justify-content: flex-end; max-width: 100%; padding: 0 60px;}
body .main-hd nav {max-width: 100%; padding-right: 60px;}
body .main-hd a {color: var(--white);}