/* BASIC css start */
/********************************* header *********************************/


/* 로고라인 */
#header { position: fixed;left: 0;top: 0;width: 100%;padding: 40px 100px;box-sizing: border-box;background:transparent;;z-index: 888;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
#header {background:transparent;}
body.scroll #header {background:rgba(255,255,255,0.9);padding:10px 100px;}
#header .logoArea { position:relative;display:table;width:100%;height:50px;padding:30px 0;margin:0 auto;box-sizing:border-box;padding:0; box-sizing:border-box; transition:.4s ease-in-out;}
#header .logoArea:after { content:""; clear:both; display:block;}
#header .logoArea .logo { display:table-cell; vertical-align:middle;}
#header .logoArea .logo a {     color: #312d2c;
    font-size: 24px;
    letter-spacing: -1px;
    font-weight: 500;
    display: block;
    font-family: noto sans kr;}
#header .logoArea_center { padding:0 0 0 0;text-align:left}

/* 카테고리 */
#header .category { display:table-cell; vertical-align:middle; position:relative; text-align:right; box-sizing:border-box; font-size:0; line-height:0; letter-spacing:0;padding-left:50px}
#header .category > ul { display:inline-block; vertical-align:middle;}
#header .category > ul > li { position:relative; display:inline-block; vertical-align:middle; position:relative;}
#header .category > ul > li > a { position: relative;padding: 0 16px;font-size: 15px;line-height: 50px;height: 50px;font-weight: 400;color: #3e3e3e;letter-spacing: -1px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
#header .category > ul > li:last-child > a { padding-right:0;}
#header .category > ul > li.etc.first { padding-left: 20px;}
#header .category > ul > li.etc.first:before { content: "";position: absolute;left: 7px;top: 17px;width: 1px;height: 16px;background: rgba(158, 158, 158, 0.63);}

#header .category .sub-category { position:absolute;left:0;top:57px; opacity:0;visibility:hidden;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;}
#header .category > ul > li:hover .sub-category { position:absolute;left:0;top:47px;opacity:1;visibility:visible;}
#header .category .sub-category > ul { background: #131516;padding: 15px 20px;width: 80px;}
#header .category .sub-category > ul > li { display:block;}
#header .category .sub-category > ul > li > a { display: block;color: #bdbdbd;line-height: 26px;font-size: 13px;text-align: left;}
#header .category .sub-category > ul > li:hover > a { color:#fff;}




/* 숨은메뉴 버튼 */
.btnAll { position: fixed;left: -230px;top: 20px;background: #212326;padding: 14px 14px 36px;z-index: 999999;width: 56px;box-sizing: border-box;-webkit-transition: all 0.6s;-moz-transition: all 0.6s;-o-transition: all 0.6s;transition: all 0.6s;}
.btnAll.active { left:22px;}
.btnAll ul { position:relative;}
.btnAll span { position: absolute;width: 100%;height: 1px;background: #fff;left: 0;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.btnAll span:nth-child(1) { top: 0px;}
.btnAll span:nth-child(2) { top: 10px;}
.btnAll span:nth-child(3) { top: 10px;}
.btnAll span:nth-child(4) { top: 20px;}

/* 클릭했을때 */
.btnAll.open span:first-child { top:0px;opacity:0;}
.btnAll.open span:nth-child(2) { height:2px;transform: rotate(45deg);}
.btnAll.open span:nth-child(3) { height:2px;transform: rotate(-45deg);}
.btnAll.open span:last-child { top:20px;opacity:0;}


/* 숨은메뉴 */
#hideMenu { position: fixed;z-index: 10011;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;visibility: hidden;background-color: rgba(33,35,38,.97);box-sizing: border-box;}
#hideMenu > div { display:table;width:100%;height:100%;transform:scale(1.3); -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
#hideMenu > div > ul { display:table-cell;vertical-align:middle;text-align:center;}
#hideMenu > div > ul li { display:block;}
#hideMenu > div > ul li a { display: block;padding: 34px 0;font-size: 44px;color: #fff;font-family: noto sans kr;font-weight: 600;}
#hideMenu.active { opacity:1;visibility:visible;}
#hideMenu.active > div { transform:scale(1);}
#hideMenu .sub-category { display:none;}



/* BASIC css end */