#toparea {position:absolute; top:0px; height:80px; width:100%; padding: 0; box-sizing:border-box; 
 margin-left:auto; margin-right:auto;  }
#top {  border-bottom:0px solid #343848;   position: fixed; z-index: 99; width:100%;  }
#topBox { margin:0 auto; max-width:100% !important;  position:relative;}
aside.util {display:none; position:relative; margin:0 auto; font-size:15px; z-index:15 ;   }
aside.util a{  padding:0px 0px; border-left:0px solid #888;  }
aside.util a:after {content:"|";  padding:0 10px 0 12px; color:#ccc;  }
aside.util a:last-child:after {content:""}
aside.util a:hover {color:#333;}
aside.util a.first{ border-left:0px; }

#header {width:1200px; margin:0 auto; padding-top:10px; position: relative;}
#header div.left {display:none; position:absolute; left:0px; top:35px;}
#header div.logo { position:absolute; left:10px; top:0px; padding:3px 0px;   box-sizing:border-box; z-index: 90;  }
#header .logo p.topR {display:none;}
#header div.right {display:none; position:absolute; right:10px; top:35px;}
.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 { }

.large .logo_w,.small .logo_b {display:block;}
.large .logo_b,.small .logo_w {display:none;}
.large .gnb{  border-bottom:1px solid rgba(255,255,255,0.1); background-color:rgba(0,0,0,0.2);  transition: .3s all;}
.small .gnb{  border-bottom:1px solid rgba(0,0,0,0.2); background-color:rgba(255,255,255,1) ;
 box-shadow:0px 1px 2px rgba(0,0,0,0.3);  transition: .3s all;}
.gnb{ position:fixed; top:0px ;  left:0; width:100%;  z-index:13; margin:0px auto 0 auto;  }
.gnb:before{content:""; width:100%; height:82px; position:absolute; top:0;  z-index: -1; }
.small .gnb .depth1 a,
.small .gnb:hover .depth1 a{  color:#333 ;}

.gnb:hover a {color:#fff;}
.gnb:hover .depth1 a{  color:#fff ;}
.gnb .menu:hover {background-color:#fff;  color:#333 !important; }
.gnb .menu:hover  a{  color:#333}
.gnb .menu:hover .depth1 a{  border-bottom:0px solid #333; color:#187ece !important;  padding-bottom:7px; }
.gnb .menu:hover .depth1 a,.gnb .menu:hover .depth2 ul{color:#333}
.gnb .menu:hover .depth2 ul li a {border-bottom:0;  font-weight:400; }
.gnb .menu:hover .depth2 ul li a:hover {/*text-decoration:underline;*/ color:#187ece}
.gnb:hover .depth2 {}
.logo a:hover .gnb:hover {background:#fff; color:#333; }

.gnb > nav{ list-style-type:none; width:1200px; margin:0 auto; padding-left:400px;  padding-right:0px;  box-sizing:border-box; margin:0 auto; }
.gnb .depth1.side {display:none;}
.gnb .depth1{padding:0; font-size:18px;  letter-spacing:-0.3px; text-align:center; margin:0 auto; padding:0px 10px 2px 10px; 
display:block;  line-height:80px; box-sizing:border-box; height:82px; position:relative;}
.gnb .menu:hover .depth1:after {content:""; position:absolute; width:70%; height:3px; background-color:#7fd6f7;
 left:50%; bottom:0; transform:translate(-50%,0%)}
.gnb .depth1 a{color:#fff; font-weight:500;}
#toparea nav > ul > li {  float: left;  width: 25%;  height: 82px;   position: relative;  text-transform: uppercase;  
font-size: 14px;  color: rgba(0, 0, 0, 0.8);  cursor: pointer;}
#toparea nav > ul > {width:100%;}
#toparea nav > ul > li > a {display:block; font-size:19px; line-height:20px; font-weight:400; letter-spacing:-1px;  height: 72px; padding-top:25px;   }
#toparea nav > ul > li > a:hover {color:#28afc4;}
#toparea nav > ul > li.line2 a{ padding-top:14px; }
#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-bottom:0px solid #dfdfdf; 
border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf;}
ul.drop-menu li:hover {position:relative;  /*background-color: #f5f5f5;*/ color:#0072bc;}
ul.drop-menu li:hover:before {content:""; z-index:999; width:0px; height:100%; position: absolute; left:0; top:0; 
background-color:#28afc4; }
ul.drop-menu li:last-child a{padding-bottom:25px !important; border-bottom:1px solid #dfdfdf !important; }
ul.drop-menu li:first-child a{padding-top:20px !important;}
.depth1:hover,.depth2 {box-shadow:1px 3px 3px rgba(0,0,0,0.3);}
.small .depth1:hover {box-shadow:0px 0px 0px rgba(0,0,0,0);}
ul.drop-menu li {  display: none;  transition: .3s all;}
ul.drop-menu li a{display:block; font-size:16px; height:auto; padding:8px 0; text-align:center;}
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;
}
li:hover  ul.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;
}
li:hover  ul.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: -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: 0px;
    right: 0px;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    top: 0px;
    right: 0px;
    transform: scale(1);
  }
}
@keyframes menu6-right {
  0% {
    opacity: 0;
    top: 0px;
    left: 0px;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    top: 0px;
    left: 0px;
    transform: scale(1);
  }
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#toparea {width:100%; top:0px; height:auto;padding:0 0px;   }
header.small #toparea {top:0px; width:100%; background-color:#fff; border-bottom:1px solid #dfdfdf; }
#header {width:100%; padding-top:0px; height:65px;}
#topBox { margin:0 auto; max-width:100% !important;  }
#top {overflow:hidden; background-color:#fff;}
header {  width:calc(100% - 0px); }
#header div.logo { position:relative; padding:3px 0 0 0px; left:0;  }
#header .logo p{float:left; text-align:center; padding-top:6px; }
#header .logo p.topL{text-align:left; width:20%; }
#header .logo p.topC{text-align:left; width:60%; text-align:center }
#header .logo p.topR {text-align:right; padding:12px 15px 0 0 ;  width:20%; display:block}
#header .logo p:last-child img {height:35px;}
#header .logo img {height:48px;}

.large .logo_b,.small .logo_b {display:block;}
.large .logo_w,.small .logo_w {display:none;}

aside.util {display:none; font-size:12px;   }
aside.util a:after {content:"|";  padding:0 5px 0 8px; color:#ccc;  }

.large #top{  border-bottom:0px solid #dfdfdf;}
.small #top{  border-bottom:1px solid #dfdfdf;}
.gnb{ display:none; }
.overlay div.contact {display:none; }
div.button_container div.txt{display:none;}
.button_container { display:block;  position: absolute;  }
.button_container {    top: 20px;  right: 20px; }

.depth1:hover,.depth2 {box-shadow:0px 0px 0px rgba(0,0,0,0);}
ul.drop-menu li {font-size:16px; height:42px; padding-top:2px; text-align:left;  display: block;}
ul.drop-menu li {position:relative;  background: none; border-top:1px solid #dfdfdf;}
li:hover  ul.drop-menu.menu-5 li {  opacity: 1;  transform-origin: top right;  position: relative;}
ul.drop-menu li:last-child a{padding-bottom:0px !important; border-bottom:0px solid #dfdfdf !important; }
ul.drop-menu li:first-child a{padding-top:0px !important;}
ul.drop-menu li a {text-align:left;}

@keyframes menu5 {
  0% {  opacity: 1;  right: 0px; }
  60% {   right: 0px; }
  100% {   opacity: 1;   right: 0px;  }
}

}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}