.col { float: left; width: 1200px; padding-top:50px; padding-left: 249px;}
.menu { list-style: none; padding-left: 0; display: table; margin: 0 auto;}
.menu:after { content: " "; display: block; clear: both;}
.menu .menu-item { position: relative; float: left; z-index:2; font-family: 'NanumSquareR'; font-weight:bold;  font-size: 18px;}
.menu .menu-item a{ color:#57565b; }
.menu .menu-item a:hover{ color:#263369; }
/*.menu:hover .sub-menu {opacity: 1; z-index:2; }*/


/*.menu:hover a { background-color: rgba(255, 255, 255, 0.3);}*/
.menu .menu-item a { display: block; padding: 20px 35px; transition: .3s ease;}
/*.sub-menu { list-style: none; position: absolute; padding-left: 0; margin: 0; top: 100%; width: 100%; height:255px; border-left:1px solid #ddd;   background-color: #f8f8f8; transition: .3s ease; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0); transform: scale(0); opacity: 0;}
sub-menu .menu-item { float: none; transition: .3s ease; -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0;}*/
.sub-menu { list-style: none; position: absolute; padding-left: 0; margin: 0; top: 100%; width: 100%; height:357px; border-left:1px solid #ddd;   background-color: #f8f8f8; transition: .3s ease; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0;visibility:hidden;}
.sub-menu .menu-item { float: none; transition: .3s ease; -webkit-transform: translateY(0px); transform: translateY(0px); opacity: 1;}
.sub-menu .menu-item a { white-space: nowrap; font-family: 'notokr-regular'; font-size: 12px;  color: #282828; padding: 15px 15px; /*border-bottom: 1px solid #ededed;*/background-color: #f8f8f8;}
.sub-menu .sub-menu { left: 100%; top: 0;}

.sub-menu .menu-item a{position:relative; z-index:4; display:block; width:100%; height:51px; overflow:hidden; transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.sub-menu .menu-item a:before{content:""; z-index:-1; position:absolute; width:100%; height:100%; top:0; left:-100%; background:#263369; opacity: 0.9; transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out;}
.sub-menu .menu-item a:hover{color:#fff; }
.sub-menu .menu-item a:hover:before{left:0;}


/* Static Delay with CSS */
/*.css-transform:hover .sub-menu .menu-item {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.css-transform .sub-menu .menu-item:nth-child(1) {
  transition-delay: 100ms;
}
.css-transform .sub-menu .menu-item:nth-child(2) {
  transition-delay: 150ms;
}
.css-transform .sub-menu .menu-item:nth-child(3) {
  transition-delay: 200ms;
}
.css-transform .sub-menu .menu-item:nth-child(4) {
  transition-delay: 250ms;
}
.css-transform .sub-menu .menu-item:nth-child(5) {
  transition-delay: 300ms;
}
.css-transform .sub-menu .menu-item:nth-child(6) {
  transition-delay: 350ms;
}
.css-transform .sub-menu .menu-item:nth-child(7) {
  transition-delay: 400ms;
}
.css-transform .sub-menu .menu-item:nth-child(8) {
  transition-delay: 450ms;
}
.css-transform .sub-menu .menu-item:nth-child(9) {
  transition-delay: 500ms;
}
.css-transform .sub-menu .menu-item:nth-child(10) {
  transition-delay: 550ms;
}*/
.menu-bg {width: 1200px;background: #f8f8f8;display: block;height: 357px;position: absolute;z-index: 2;left: 50%;transform: translateX(-50%);bottom: -352px;opacity:0;visibility:hidden;}

.sub-menu.on{opacity: 1;visibility:visible;}
/*ul.menu li.menu01:hover .sub-menu.sb01.on:before{ position:absolute; top:0px; left:-270px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb01_bg.png'); background-size: contain ;}
ul.menu li.menu02:hover .sub-menu.sb02.on:before{ position:absolute; top:0px; left:-420px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb02_bg.png');  background-size: contain ;}
ul.menu li.menu03:hover .sub-menu.sb03.on:before{ position:absolute; top:0px; left:-570px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb03_bg.png');  background-size: contain ;}
ul.menu li.menu04:hover .sub-menu.sb04.on:before{ position:absolute; top:0px; left:-710px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb04_bg.png');  background-size: contain ;}
ul.menu li.menu05:hover .sub-menu.sb05.on:before{ position:absolute; top:0px; left:-860px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb05_bg.png');  background-size: contain ;}
ul.menu li.menu06:hover .sub-menu.sb06.on:before{ position:absolute; top:0px; left:-990px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb06_bg.png');  background-size: contain ;}*/
.menu-bg.on{opacity: 1;visibility:visible;}