.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 { -webkit-transform: scale(1); transform: scale(1); opacity: 1; z-index:2; }
.menu:hover .sub_background:after { content: " "; display: block; clear: both; width:1200px; background:/*url('../img/menu_bg.png')*/ #f8f8f8 no-repeat; background-size: 170px ; background-position: 80px 27px ; margin-top: -255px; margin-left: -287px; height:358px; z-index:1;}

ul.menu li.menu01:hover .sb01: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 .sb02:before{ position:absolute; top:0px; left:-440px; 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 .sb03:before{ position:absolute; top:0px; left:-590px; 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 .sb04:before{ position:absolute; top:0px; left:-730px; 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 .sb05:before{ position:absolute; top:0px; left:-900px; 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 .sb06:before{ position:absolute; top:0px; left:-1000px; z-index:20; content: " "; display: block; clear: both; width:270px; height:245px; background:url('../img/sb06_bg.png');  background-size: contain ;}
/*.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:358px; 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 .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;
}