@charset "utf-8";
/* CSS Document */
/* index.css 에서 상속 되고, 변경 부분만 수정 */
/* tablet/mobile menu  */
body .allSection{width:100%;}
header .close,
header .all,
header .left > div > div,
header h2{display:block;}  /* 복구 시킴  */

header h1{float:none; position: absolute; left:50%; top: 2.1875rem; transform:translateX(-50%);padding: 0 ;} /*2) logo float-left 제거 가운데로  */
header .left{padding:3.0625rem 0 0 1.875rem; }
/* 메뉴 바  */
header .all{display:block;position:relative; width: 2rem; height:0.875rem; border-top:2px solid #2b2e57; border-bottom: 2px solid #2b2e57; color:transparent;}
header .all:before{content:""; position: absolute; left:0; top: 50%; width: 100%; height:2px;background: #2b2e57; margin-top: -1px;} /* 전체 메뉴 icon 그리기  */
header .left > div{float:none;} /*1) display:none; nav 부분, 테블릿/모바일 애니메이션위해 제거   */

header > ul{ padding:2.5rem 2.5rem 0 0;}
header > ul li a{width:4.375rem; }  /* 테블릿에서  96->70px로 작게 만든다  */ 

header .nav{ position:absolute; left:-120%; top:0; z-index: 101; transition:left 0.8s; padding:0.9375rem 1.5rem 0.9375rem 1.375rem; width:calc(100% - 2rem); height:100% ; background: #fff; box-sizing: border-box; } /* nav를 없애기   2rem는 우축 모서리, dim 효과:  뛰우는 대상 101로,  */
header .nav.on{left:0;}  /* 왼쪽에서  오른쪽으로 animation효과 */
header .nav.on nav{padding : 0 0 2.75rem; border-top:1px solid #2b2e57;} /* .nav 아래 ul/li를 아래로 여백주어 내려주기 */
header .nav.on nav a{height:2.5rem; line-height: 2.5rem; color:#2b2e57;;}
header .nav.on nav a:before{display:none;}  /* 마우스대면 선보요주기  없애기  */
/*header .nav li:nth-child(5):hover p{color:#31DB2B; } */

header .left > div  nav li{float:none; border-bottom: 1px solid #eee;}  float-left를 없애 li block요소로 세로로 떨러뜨리기
header .nav.on div{display:flex; border:1px solid #eee; background: #2b2e57;} /* 신상품/인기상품 영역 */
header .nav.on div a{flex: 1; height:2.375rem; line-height: 2.375rem; border-left: 1px solid #eee; text-align:center; color:#fff; font-size:0.8125rem; font-weight:bold; }
header .nav.on div a:first-child{border-left:none;}  /* 왼쪽선 곁침 제거 */
header .nav.on .close{position:absolute; right:1.5rem; top:1.5rem; width:1rem; height:1rem; color:transparent;  }
/*  p-abs안에 abd는 부모 따라감 . x 위치 와 크기 지정  */ 
header .nav.on .close:before{content:"";position:absolute; left:45%; top:0; width:1px; height:100%; background: #2b2e57;transform: rotate(45deg);}  /* /  */
header .nav.on .close:after{content:"";position:absolute; right:45%; top:0; width:1px; height:100%; background: #2b2e57;transform: rotate(-45deg);} /* X  */
header .nav.on h2{margin: 0 0 1.6875rem 2rem;  display:block;width:6.25rem; height:3.125rem; background: url("../images/suhwoo_02.png")no-repeat ; color:transparent;}
		/* .nav .on시 로고 아래로 마진 75px 주어 nav요소와 간격 주기 */
.dim{display: none; position: fixed;left:0; top:0; z-index:100;  width:100%; height:100%; background: rgba(0,0,0, 0.5);}
/* 검은색 채우기,display: none햇다가 dim on시 실행,  z-index 100으로 주면 대상은 더높게 101로 */



/* article > div.adv > ul.left li:last-child em{display: block; } */