/* BASIC css start */
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}

.shopbrandCate li:nth-child(12){}
.shopbrandCate li:nth-child(11){border-right:1px solid #f1f1f1;}
.shopbrandCate li:nth-child(13){border-right:0;}


/******************************************************* Header *******************************************************/

#header{width:100%; height:60px; position:fixed; left:0; top:0; z-index:99996; }

/* 삼선메뉴 */
#header #menu{position:absolute; left:5%; top:27%;}
#header #menu a{display:block; width:20px; height:20px; overflow:hidden; position:relative; }
#header #menu a span{display:block; width:100%; height:2px; opacity: 1; position:absolute; background:#5d5d5e; text-indent:-9999px;
z-index:99999;}

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

/* 로고 */
#header .logo{position:absolute; right:30%; left:15%; top:19%;}
#header .logo a{display:block; padding:5px; color:#181818; font-size:12px; line-height:1; letter-spacing:0;}
#header .logo a img {height : 23px;}

#header .headerBottom {padding:0 5px; position:absolute;right:5%}
#header .headerBottom h1 {font-size:12px;}
#header .headerBottom .headerBottomLeft {float:left; margin-top: 22px;}
#header .headerBottom .headerBottomRight {float:right; margin-top: 20px;}
#header .headerBottom .headerBottomRight a {margin-left:13px; color:#181818;}
#header .headerBottom .headerBottomRight a span { color: #181818; font-size: 12px; }
#header .headerBottom .headerBottomRight a .fa-bookmark-o {color:#f1494d;}
#header .headerBottom .headerBottomRight .cart {position:relative;}
#header .headerBottom .headerBottomRight .cart sup {width:12px; height:12px;  color:#fff; border-radius:6px; position:absolute; top:-12px; right:-5px; text-align: center; line-height: 12px;}
#header .headerBottom .headerBottomRight .fa-2x {font-size:12px !important;}


#header .search {height:42px; position:absolute; top:58px; left:0; right:0;   text-align:center; display:none; z-index:10;    border-top: 1px solid #c1c1c1;}
#header .search .searchBox {width:100%;}
#header .search .searchBox input {width:96%; height:30px; border:0px none; margin-top: 6px; padding: 0 5px;border-bottom: 2px solid #c1c1c1; padding-right: 36px;}
#header .search .btn_search span {font-size:12px;}
#header .search .btn_search {width:45px; height:42px; line-height:50px;  position:absolute; top:0; right:0; color:#ddd; text-align:center;}


/***************** search drop ******************/
.searchheader { display: none;position: fixed;z-index: 200;padding: 0 18px 18px;left: 0;top: 60px; background:#fff;}
.searchheader .searchForm { position:relative; width:100%; margin-top:18px;}
.searchheader #keyword { width:calc(80% - 1px); height:38px; padding:0 8px; border:1px solid #181818;}
.searchheader .btnDelete { position:absolute; right:0px; top:0px; border:0; border-radius:5px; background:#fff; padding:6px 8px 5px;}
.searchheader .btnDelete i{width:18px; height:18px; line-height:18px; font-size:12px; background:#eee; border-radius:20px;text-align:center;}
.searchheader .btnClose {display:none !important; position:absolute; right:18px; top:-46px; padding:5px; font-size:12px; background:#fbfbfb; border:0;}

/* 인기검색어 */
.searchheader .search-hotkeyword {background: #fff;margin-top: 20px;}
.searchheader .search-hotkeyword ul { overflow-y:auto; max-height:100px; padding:7px; text-align:left; font-size:0; line-height:0;}
.searchheader .search-hotkeyword li { position:relative; display:inline-block; vertical-align:top;}
.searchheader .search-hotkeyword li a { display:inline-block; padding:5.5px 10px; background:#f7f7f7; border-radius:30px; color:#181818; font-size:12px; margin:3px; }


/******************************************************* Side *******************************************************/

#side{position:fixed; left:0; top:0; min-width: 225px; width: 87%; height:100%; font-size: 12px; background-color: #fff; padding: 15px;
box-sizing: border-box;  visibility: hidden; transform: translateX(-100%); transition: transform .4s ease-in-out, visibility .4s ease-in-out; overflow-y:auto; z-index:99998;}
#side.open{visibility:visible; transform:translateX(0%);}

/* 외부 클릭 시 닫히는효과 */
#mask{position:fixed; left:0; top:0; width:100%; height:100%; background: rgba(51,51,51,0.2); z-index:99997; display:none;}
#mask.show{display:block;}

/* 닫기 버튼 */
#side .btnClose { position:absolute; top:15px; right:15px; display:block; padding:5px; }
#side .btnClose img { width:15px; }

/* 로그인 메뉴 */
#memberBox {padding:5px 0;}
#memberBox p{font-size:12px; color:#555; margin-bottom:15px; line-height:20px;}
#memberBox p i{font-size:12px; vertical-align:top; line-height:20px;}
#memberBox p strong{font-size:12px; color:#181818; font-weight:600; letter-spacing:0;}
#memberBox ul{font-size:0; line-height:0; letter-spacing:0;}
#memberBox ul li{margin-bottom:7px; position: relative; }
#memberBox ul li a{text-align:center;}
#memberBox ul li strong{letter-spacing:0; font-weight:600; font-size:12px;}
#memberBox ul li:nth-child(1),
#memberBox ul li:nth-child(2){display:inline-block; width:49%;}
#memberBox ul li:nth-child(1){margin-right:1%;}
#memberBox ul li:nth-child(2){margin-left:1%;}
#memberBox ul li:nth-child(3){display:inline-block; width:49%;}
#memberBox ul li:nth-child(3){margin-right:1%;}
#memberBox ul li:nth-child(4){display:inline-block; width:49%;}
#memberBox ul li:nth-child(4){margin-left:1%;}
#memberBox ul li:nth-child(3) .circle{display:inline-block; width:5px; height:5px; border-radius:5px; background:#f76f59; vertical-align:5px; margin-right:4px;}


/* 리스트 */
#listBox{margin-top:15px;}
#listBox .list_01 a,
#listBox .list_01 h2{display:block; padding: 7px 10px; box-sizing:border-box; position:relative; left:0; transition: left .3s ease-in-out; color:#181818; font-size:12px; font-weight:normal;}
#listBox .list_01 .sidereview{margin-bottom:25px;}

/* 서브카테고리 */
#listBox .list_02{margin:10px 0; display:none;}
#listBox .list_02 a{ display:block;font-size:12px; padding:7px 20px;}

/* 회원가입 말풍선 */
#joinpoint{position:absolute; bottom:-20px; left:calc(50% + 15px); background:#e35a48; width:52px; text-align:center; line-height:20px; border-radius:3px; z-index: 999; color: #fff; font-size: 12px; text-align: center; }
#joinpoint .tail{position:absolute; left:23px; top:-5px; border-bottom:5px solid #e35a48; border-right :5px solid transparent; border-left :5px solid transparent;}


.sideComm { margin-top:30px; }
.sideCscenter {    padding: 30px 0 30px 12px; color:#ddd}
.sideCscenter b {    display: block;padding: 15px 0;font-weight: 600;font-size: 12px; color: #181818;}
.sideCscenter b:first-child{padding-top:0;}
.sideCscenter span{color:#181818; font-size:12px; font-weight:600; display:block; padding-bottom:6px;}


li.m_header_nav_item {width: 1.5rem; height: 1.5rem;  display:inline-block; vertical-align:top; margin-right:4px; text-align:center;}
li.m_header_nav_item:last-child {margin-right:0;}
li.m_header_nav_item img {display:inline-block;}

#btn-wishlist {margin-left: 10px; position:relative;}
#btn-wishlist svg {transform:scale(1.1);}
#btn-wishlist span {position:absolute; font-size:10px; left:50%; top:10%; transform:translate(-50%, -50%) scale(0.98); }

/* BASIC css end */