/* BASIC css start */
/******************************************************* Header *******************************************************/

#header{width:100%; min-width:1500px; position:fixed; left:0; top:0; z-index:9999;}

/* 로고 */
#header .logo{position:absolute; right:65px; top:65px;}
#header .logo a{display:inline-block; padding:5px; font-size: 35px; letter-spacing:1px; 
/* 회전 */
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
/* 회전 */
}



/* 삼선메뉴 */
#header #menu{position:absolute; left:70px; top:70px;}
#header #menu a{display:block; width:25px; height:19px; overflow:hidden; position:relative; transform: rotate(0deg); transition: .3s ease-in-out, transform .22s;}
#header #menu a span{display:block; width:100%; height:2px; opacity: 1; position:absolute; background:#333; text-indent:-9999px;
transition: top .3s ease-in-out,width .2s ease-in-out,left .3s ease-in-out,transform .3s ease-in-out,background 0s ease-in-out; z-index:9999;}

/* 호버효과 */
#header #menu a:hover span:first-child{width:90%;}
#header #menu a:hover span:last-child{width:70%;}

/* 위치 */
#header #menu a span:first-child{top:0px;}
#header #menu a span:nth-child(2){top:8px;}
#header #menu a span:nth-child(3){top:8px;}
#header #menu a span:last-child{top:16px;}

/* 클릭했을때 */
#header #menu.open a span:first-child{top:-5px;}
#header #menu.open a span:nth-child(2){transform: rotate(45deg);}
#header #menu.open a span:nth-child(3){transform: rotate(-45deg);}
#header #menu.open a span:last-child{top:21px;}
/* BASIC css end */