#toparea {top:0px; height:120px; width:100%; padding: 0; box-sizing:border-box;  margin-left:auto; margin-right:auto; }
#top {  border-bottom:0px solid #343848;   position:relative;   }
#topBox { margin:0 auto; max-width:100% !important;  position:relative;}
div.top_mask {width:100%; } 
aside.util {display:none; position:relative; width:100%; margin:0 auto; font-size:13px;  z-index:15 ; 
 border-bottom:0px solid #dfdfdf; height:30px; background-color:#f2eef4;   }
div.util_Area {  width:1200px;   margin:0 auto;  text-align:right; padding:4px 0px 0 0; box-sizing:border-box; }
aside.util div.util_Area a{  padding:0px 0px; border-left:0px solid #888;  }
aside.util div.util_Area a:after {content:"|";  padding:0 10px 0 12px; }
aside.util div.util_Area a:last-child:after {content:""}
aside.util div.util_Area a:hover {color:#333;}
aside.util div.util_Area a.first{ border-left:0px; }

#header .logo {width:1200px; margin:0 auto; padding-top:27px; text-align:center;}
#header div.logo { position:relative; left:0;  top:25px ; padding:0px 10px;   box-sizing:border-box;   z-index:123 ; }
#header .logo .topR {position:absolute; right:0; top:18px;}
#header .logo .topL {position:absolute; left:0; top:8px;}
.button_container {display:none;}

/* Header */
header {  background-color: #fff;}
header a {  color: #222;  text-decoration: none;  text-transform: uppercase;}
header a.active,header a:hover {  color: #3d3d3d;}
header li { }

.gnb{ position:absolute; top:120px ;  border-top:1px solid #dfdfdf;/* border-bottom:1px solid #b397ca;*/
 left:0; width:100%;  z-index:13; margin:0px auto 0 auto; background-color:rgba(255,255,255,0.7);  
 background-repeat:repeat-x; background-position: center 100px; }
.gnb:before{content:""; width:100%; height:72px; position:absolute; top:0; background-color:#fff; z-index: -1; }


#toparea nav { 
  padding: 0px; height:72px;
  text-align: center;
}
#toparea nav > ul { width:1200px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
}
#toparea nav > ul > li {
  float: left;
  width: 12.5%;
  height: 72px; 
  position: relative;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}
#toparea nav > ul > li a {}
#toparea nav > ul > li > a {display:block; font-size:19px; line-height:24px; font-weight:500; letter-spacing:-1px;  height: 72px; padding-top:25px;   }
#toparea nav > ul > li > a:hover {color:#28afc4;}
#toparea nav > ul > li.line2 a{ padding-top:8px; }
#toparea nav > ul > li:hover { color:#28afc4;  background: #fff; }
#toparea nav > ul > li:hover ul.drop-menu {color:#333;}

ul.drop-menu {z-index:9;
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  padding: 0;
}
ul.drop-menu li {position:relative;
  background-color: #fff; border-top:1px solid #dfdfdf;
}
ul.drop-menu li:hover {position:relative;  background-color: #f5f5f5;}
ul.drop-menu li:hover:before {content:""; z-index:999; width:4px; height:100%; position: absolute; left:0; top:0; 
background-color:#28afc4; }
ul.drop-menu li:last-child {
}

ul.drop-menu li {font-size:16px; height:44px; padding-top:10px;
  display: none;
}
li:hover > ul.drop-menu li {
  display: block;
}

li:hover > ul.drop-menu.menu-1 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-1 li {
  opacity: 0;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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 > ul.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 > ul.drop-menu.menu-2 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-2 li {
  opacity: 0;
  transform-origin: top center;
}
li:hover > ul.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 > ul.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 > ul.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 > ul.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 > ul.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 > ul.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 > ul.drop-menu.menu-3 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-3 li {
  opacity: 0;
  transform-origin: top center;
}
li:hover > ul.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 > ul.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 > ul.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 > ul.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 > ul.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 > ul.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 > ul.drop-menu.menu-4 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-4 li {
  opacity: 0;
  transform-origin: top right;
}
li:hover > ul.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 > ul.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 > ul.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 > ul.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 > ul.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 > ul.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);
  }
}
li:hover > ul.drop-menu.menu-5 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-5 li {
  opacity: 0;
  transform-origin: top right;
  position: relative;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}
li:hover > ul.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;
}

@keyframes menu5 {
  0% {  opacity: 0;  right: 50px; }
  60% {   right: -8px; }
  100% {   opacity: 1;   right: 0px;  }
}
li:hover > ul.drop-menu.menu-6 {
  perspective: 1000px;
}
li:hover > ul.drop-menu.menu-6 li {
  opacity: 0;  transform-origin: top right;
  position: relative;
}
li:hover > ul.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);
  }
}