header {position: absolute; top: 0; left: 0; width: 100%; height: 190px; background: var(--black); z-index: 8888;}
header.open {height: 100vh; overflow: hidden;}
header .container {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 190px;}
header .logo {position: relative; width: 101px; height: auto; z-index: 2;}
header .logo img {width: 100%; height: auto;}

header nav {}
header nav ul {display: flex; align-items: center; gap: 257px;}
header nav ul li {}
header nav ul li.home {display: none;}
header nav ul li a {font-size: 22px; font-weight: bold; color: var(--wt); text-transform: uppercase;}

header .menu-btn {position: relative; display: flex; align-items: center; justify-content: space-between; flex-flow: column; width: 44px; height: 17px;}
header .menu-btn span {width: 100%; height: 3px; background: var(--wt); transition: all .5s;}
/* header open 일때 */
header.open nav.on ul li.home {display: block;}
header.open nav.on {position: fixed; top: 0; left: unset; width: 1420px; height: 100vh; margin: 0 auto; background: transparent; z-index: 3;}
header.open nav.on ul {flex-flow: column; align-items: flex-start; justify-content: flex-end; gap: 65px; width: 653px; height: 100%;}
/* header.open nav.on ul li:nth-child(1) {animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
header.open nav.on ul li:nth-child(2) {animation: slide-right 0.5s .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
header.open nav.on ul li:nth-child(3) {animation: slide-right 0.5s .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
header.open nav.on ul li:nth-child(4) {animation: slide-right 0.5s .9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;} */
/* @keyframes slide-right {
  0% {
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
            opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
  }
} */

header.open nav.on ul li a {display: flex; align-items: flex-end; gap: 4px; font-size: 119px;}
header.open nav.on ul li a:after {content: ''; display: block; width: 32px; height: 25px; margin-bottom: 15px; background: var(--pr2);}

header.open nav.on:hover a {color: var(--wt);}
header.open nav.on ul:hover li a {color: #707070;}
header.open nav.on ul li a:hover {color: var(--wt); transition: all .3s;}


/* hover event */
header .menu-btn:hover span:nth-child(1) {transform: rotate(-10deg);}
header .menu-btn:hover span:nth-child(3) {transform: rotate(10deg);}

/* click event */
header.open:before {animation: hover_bf 1s linear both; position: absolute; top: 30px; right: 30px; content: ''; display: block; width: 100%; height: 100%; background: var(--black); z-index: 2; opacity: 0;}
@keyframes hover_bf {
  /* 0% {width: 0; height: 0;}
  20% {width: 200px; height: 200px;}
  100% {width: 200px; height: 200px; transform: scale(20);} */
  0% {opacity: 0;}
  100% {opacity: 1;}
}
header.open2:before {animation: hover_bf2 1s linear both; position: absolute; top: 30px; right: 30px; content: ''; display: block; width: 100%; height: 100%; background: var(--black); z-index: 2;}
@keyframes hover_bf2 {
  /* 0% {width: 200px; height: 200px; transform: scale(20);}
  20% {width: 200px; height: 200px;}
  100% {width: 0; height: 0;} */
  0% {opacity: 1;}
  100% {opacity: 0;}
}
header .menu-btn {z-index: 3;}
header .menu-btn.open span {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
header .menu-btn.open span:nth-child(2) {opacity: 0;}
header .menu-btn.open span:nth-child(1) {transform: rotate(-25deg);}
header .menu-btn.open span:nth-child(3) {transform: rotate(25deg);}