.gnb ul.drop-menu {z-index:9;   position: absolute;  top: 100%;  left: 0%;  width: 100%;  padding: 0;}
.gnb ul.drop-menu li:first-child { border-top:0px solid #dfdfdf; }
.gnb ul.drop-menu li {position:relative; box-shadow:2px 2px 8px rgb(0,0,0,0);
  background-color: #0A355F; border-top:1px solid rgba(255,255,255,0.1); 
  /*border-right:1px solid #dfdfdf; border-left:1px solid #dfdfdf;*/}
.gnb ul.drop-menu li:hover {position:relative;  background-color: #1E7DCE;}
.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 {  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: 50px; }
  60% {   right: -10px; }
  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);
  }
}