.gnb ul.drop-menu {z-index:9; 
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  padding: 0;
}
.gnb ul.drop-menu li {position:relative; box-shadow:2px 2px 8px rgb(0,0,0,0.2);
  background-color: #fff; border-bottom:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-left:1px solid #dfdfdf;
}
.gnb ul.drop-menu li:hover {position:relative;  background-color: #f5f5f5;}
.gnb ul.drop-menu li:hover:before {content:""; z-index:999; width:0px; height:100%; position: absolute; left:0; top:0; 
background-color:#000; }
.gnb ul.drop-menu li:last-child {
}

.gnb ul.drop-menu li {padding:10px 0 12px 0;
  display: none;
}
.gnb li:hover  .drop-menu li {
  display: block;
}

.gnb li:hover  .drop-menu.menu-1 {
  perspective: 1000px;
}
.gnb li:hover  .drop-menu.menu-1 li {
  opacity: 0;
}
.gnb .gnb li:hover  .drop-menu.menu-1 li:nth-child(1) {
  animation-name: menu1;
  animation-duration: 200ms;
  animation-delay: 20ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-1 li:nth-child(2) {
  animation-name: menu1;
  animation-duration: 400ms;
  animation-delay: 40ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-1 li:nth-child(3) {
  animation-name: menu1;
  animation-duration: 600ms;
  animation-delay: 60ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-1 li:nth-child(4) {
  animation-name: menu1;
  animation-duration: 800ms;
  animation-delay: 80ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-1 li:nth-child(5) {
  animation-name: menu1;
  animation-duration: 1000ms;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-1 li:nth-child(6) {
  animation-name: menu1;
  animation-duration: 1200ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu1 {
  0% {
    opacity: 0;
    transform: rotateY(-90deg) translate(30px);
  }
  100% {
    opacity: 1;
    transform: rotateY(0deg) translate(0px);
  }
}
li:hover  .drop-menu.menu-2 {
  perspective: 1000px;
}
li:hover  .drop-menu.menu-2 li {
  opacity: 0;
  transform-origin: top center;
}
li:hover  .drop-menu.menu-2 li:nth-child(1) {
  animation-name: menu2;
  animation-duration: 200ms;
  animation-delay: 20ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-2 li:nth-child(2) {
  animation-name: menu2;
  animation-duration: 400ms;
  animation-delay: 40ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-2 li:nth-child(3) {
  animation-name: menu2;
  animation-duration: 600ms;
  animation-delay: 60ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-2 li:nth-child(4) {
  animation-name: menu2;
  animation-duration: 800ms;
  animation-delay: 80ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-2 li:nth-child(5) {
  animation-name: menu2;
  animation-duration: 1000ms;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-2 li:nth-child(6) {
  animation-name: menu2;
  animation-duration: 1200ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu2 {
  0% {
    opacity: 0;
    transform: rotateX(-90deg);
  }
  54% {
    transform: rotateX(41deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}
li:hover  .drop-menu.menu-3 {
  perspective: 1000px;
}
li:hover  .drop-menu.menu-3 li {
  opacity: 0;
  transform-origin: top center;
}
li:hover  .drop-menu.menu-3 li:nth-child(1) {
  animation-name: menu3;
  animation-duration: 200ms;
  animation-delay: 20ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-3 li:nth-child(2) {
  animation-name: menu3;
  animation-duration: 400ms;
  animation-delay: 40ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-3 li:nth-child(3) {
  animation-name: menu3;
  animation-duration: 600ms;
  animation-delay: 60ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-3 li:nth-child(4) {
  animation-name: menu3;
  animation-duration: 800ms;
  animation-delay: 80ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-3 li:nth-child(5) {
  animation-name: menu3;
  animation-duration: 1000ms;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-3 li:nth-child(6) {
  animation-name: menu3;
  animation-duration: 1200ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu3 {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-60px);
  }
  50% {
    transform: scale(1.2) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale() translateY(0px);
  }
}
li:hover  .drop-menu.menu-4 {
  perspective: 1000px;
}
li:hover  .drop-menu.menu-4 li {
  opacity: 0;
  transform-origin: top right;
}
li:hover  .drop-menu.menu-4 li:nth-child(1) {
  animation-name: menu4;
  animation-duration: 200ms;
  animation-delay: 20ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-4 li:nth-child(2) {
  animation-name: menu4;
  animation-duration: 400ms;
  animation-delay: 40ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-4 li:nth-child(3) {
  animation-name: menu4;
  animation-duration: 600ms;
  animation-delay: 60ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-4 li:nth-child(4) {
  animation-name: menu4;
  animation-duration: 800ms;
  animation-delay: 80ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-4 li:nth-child(5) {
  animation-name: menu4;
  animation-duration: 1000ms;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
li:hover  .drop-menu.menu-4 li:nth-child(6) {
  animation-name: menu4;
  animation-duration: 1200ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu4 {
  0% {
    opacity: 0;
    transform: rotate(-35deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}
.gnb li:hover  .drop-menu.menu-5 {
  perspective: 1000px;
}
.gnb li:hover  .drop-menu.menu-5 li {
  opacity: 0;
  transform-origin: top right;
  position: relative;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(1) {
  animation-name: menu5;
  animation-duration: 200ms;
  animation-delay: 20ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(2) {
  animation-name: menu5;
  animation-duration: 400ms;
  animation-delay: 40ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(3) {
  animation-name: menu5;
  animation-duration: 600ms;
  animation-delay: 60ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(4) {
  animation-name: menu5;
  animation-duration: 800ms;
  animation-delay: 80ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(5) {
  animation-name: menu5;
  animation-duration: 1000ms;
  animation-delay: 100ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(6) {
  animation-name: menu5;
  animation-duration: 1200ms;
  animation-delay: 120ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(7) {
  animation-name: menu5;
  animation-duration: 1400ms;
  animation-delay: 140ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.gnb li:hover  .drop-menu.menu-5 li:nth-child(8) {
  animation-name: menu5;
  animation-duration: 1600ms;
  animation-delay: 160ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu5 {
  0% {  opacity: 0;  right: 80px; }
  60% {   right: -11px; }
  100% {   opacity: 1;   right: 0px;  }
}
li:hover  .drop-menu.menu-6 {
  perspective: 1000px;
}
li:hover  .drop-menu.menu-6 li {
  opacity: 0;  transform-origin: top right;
  position: relative;
}
li:hover  .drop-menu.menu-6 li {
  animation-name: menu6-left;
  animation-duration: 0ms;
  animation-delay: 0ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes menu6-left {
  0% {
    opacity: 0;
    top: 80px;
    right: 80px;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    top: 0px;
    right: 0px;
    transform: scale(1);
  }
}
@keyframes menu6-right {
  0% {
    opacity: 0;
    top: 80px;
    left: 80px;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    top: 0px;
    left: 0px;
    transform: scale(1);
  }
}