/* BASIC css start */
/******************************************************* Header *******************************************************/
/* main.css 의 header와 함께 수정되어야 합니다.*/

#header{position:fixed; left:0; top:0; width:100%; min-width:955px; z-index:1000; transition: .35s ease-in-out; border-color:#fff;}
#header .leftArea{position:absolute; left:70px; top:70px; transition: .35s ease-in-out;}
#header .rightArea{position:absolute; right:81px; top:73px; transition: .35s ease-in-out;}

/* 로고 */
#header .leftArea .logo{}
#header .leftArea .logo a{display:block; width:172px; height:26px; background: url('/design/eatology/onedesign/images/logo.png') no-repeat center; transition: .35s ease-in-out;}

/* 삼선열렸을때 */
#header .leftArea .logo a.open{background: url('/design/eatology/onedesign/images/logo_white.png') no-repeat center;}

/* 삼선메뉴 */
#menu{position:relative; float:left; z-index:1000;}
#menu a{display:block; width:26px; height:26px; overflow:hidden; position:relative; transform: rotate(0deg); transition: .3s ease-in-out, transform .22s;}
#menu a span{display:block; width:100%; height:2px; opacity: 1; position:absolute; right:0; background:#444; font-size:0; transition: top .35s ease-in-out, width .25s ease-in-out, transform .35s ease-in-out, background .25s ease-in-out;}
#menu a span:first-child{width:100%; top:8px;}
#menu a span:nth-child(2){width:75%; top:19px;}

/* 호버효과 */
#menu a:hover span:first-child{width:80%;}
#menu a:hover span:nth-child(2){width:95%;}

/* 클릭했을때 */
#menu.open a span{background:#efefef;}
#menu.open a span:first-child{top:11px; width:100%; transform: rotate(45deg);}
#menu.open a span:nth-child(2){top:11px; width:100%; transform: rotate(-45deg);}







/************************************ 0~1200px// ************************************/
@media screen and (max-width:1200px){

	/* header */
	#header{height:80px !important; opacity:1; visibility:visible; background: #fff; box-shadow: 2px 2px 10px rgba(20,20,20,0.05);}
	#header .leftArea{top:30px; left:40px;}
	#header .rightArea{top:29px; right:40px;}
	#header.fixed .leftArea{height:80px !important; top:30px; left:40px;}
	#header.fixed .rightArea{top:29px; right:40px;}
	#header .leftArea .logo a.open{color:#444;}
	#menu.open a span{background:#444;}

}
/************************************ //0~1200px ************************************/
/* BASIC css end */