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

#mask {width:100%;height:100%;position:fixed;top: 0;left:0;right:0;bottom:0;background-color: #111;z-index:1000;display:none;opacity: 0.7;}

#header { position:relative; width:100%; z-index:101 }
#header .gnbWrap { position:relative; height:53px }

#gnb { position:fixed; top:0; left:0; right:0; height:53px; width:100%; background:#fff }
#gnb .gnbact { position:relative; height:52px }
#gnb .gnbact .logo { position:absolute; top:0; left:15px; height:52px; line-height:52px }
#gnb .gnbact .logo a { font-size:26px; font-weight:bold; color:#2e2e2e; letter-spacing:-1px;}
#gnb .gnbact p { font-size:25px; color:#2e2e2e; line-height:57px; text-align:center }
#gnb .gnbact p.menuOpen { position:absolute; top:0; right:0; width:52px; height:52px; }
#gnb .gnbact p.cart { position:absolute; top:0; right:6px; width:52px; height:52px }
#gnb .gnbact p.cart .user_basket_quantity { font-size: 12px; position: absolute; top: 10px; right: 10px; color: #fff; background-color: #585858; width: 16px; height: 16px; border-radius: 50px; line-height: 16px;}
#gnb .gnbact .search {  position:absolute; top:0; right:45px; width:52%; margin:0 auto; }
#gnb .gnbact .search .searchBox {width:100%;}
#gnb .gnbact .search .searchBox input {width:82%; height:28px; border:0px none; margin-top:11px; padding: 0 5px 0 2px; border-bottom: 2px solid #2e2e2e;font-size:13px;font-weight:bold;}
#gnb .gnbact .search .btn_search { width:38px; line-height:46px; position:absolute; top:5px; right:0; color:#2e2e2e; text-align:center;font-size:25px;}

.leftMenu .menuCnt .search {width:69%; height:42px; margin:0 auto 30px; position:relative; padding-right:42px; text-align:center; }
.leftMenu .menuCnt .search .btn_search {width:38px; line-height:46px; position:absolute; top:0; right:0; color:#2e2e2e; text-align:center;font-size:30px;}

/* 하단메뉴 */
#headerBtmWrap {position:fixed;;bottom:0;left:0;right:0;z-index:200;height:46px;background: rgba(255,255,255,0.8);}
#headerBtmWrap .headerBtmInfo{position:relative;z-index:10;padding:0 10px;font-size:0;line-height:0;box-sizing:border-box;text-align:center;}
#headerBtmWrap .headerBtmInfo > a { position:absolute;width: 16%;height: 36px;text-align: center;vertical-align:top;display:inline-block;}
#headerBtmWrap .headerBtmInfo .menuOpen {top: 8px;left: 4%;font-size: 28px;}
#headerBtmWrap .headerBtmInfo .login {top: 8px;left: 23%;font-size: 28px;}
#headerBtmWrap .headerBtmInfo .home {top: 8px;left: 42%;font-size: 28px;}
#headerBtmWrap .headerBtmInfo .searchBtn {top: 8px;left: 62%;font-size: 26px;}
#headerBtmWrap .headerBtmInfo .viewPrd {top: 8px;right: 4%;font-size: 28px;}

/* 사이드 메뉴 */
.leftMenu{transition:all 0.3s;position:fixed;top:0;right:-100%;width:100%;bottom:0;-webkit-overflow-scrolling:touch;z-index:1001}
.leftMenu .topMenuArea { margin:8% auto 10%; width:90%; text-align:center; }
.leftMenu .topMenu { }
.leftMenu .topMenu li { display:inline-block;width:20%;text-align:center; position:relative; }
.leftMenu .topMenu li a { color:#2d2d2d;  font-size:28px; }
.leftMenu .topMenu li a span { font-size:13px;display:block;line-height:10px;}
.leftMenu .topMenu li a .user_basket_quantity { font-size: 12px; position: absolute; top: 6px; right: 12px; color: #fff; background-color: #2d2d2d; width: 16px; height: 16px; border-radius: 50px; line-height: 16px;}
.leftMenu.on{right:0;}
.leftMenu.on .shadow{display:block;}
.leftMenu .menuCnt{position:absolute;top:0;right:0;bottom:0;z-index:1;width:100%; overflow-y:auto; height:100%; background-color:#fff;}
.leftMenu .menuCnt .userInfo { margin: 8% auto 0; text-align:center; font-size:24px;font-weight:bold; }
.leftMenu .shadow{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);}
.leftMenu .loginBx{ position:relative; text-align:center; margin:8% auto 0; width:70%; }
.leftMenu .loginBx li { font-size:12px; float:left; width:48%; }
.leftMenu .loginBx li:first-child { margin-right:2%;}
.leftMenu .loginBx li .xi-user,
.leftMenu .loginBx li .xi-user-o { font-size:30px; margin:0 0 5px; }
.leftMenu .loginBx li a { font-size:14px;padding:6% 0; display:block; }
.leftMenu .loginBx li a.join { color:#3f3f3f; background-color:transparent; border:1px solid #c8c8c8; } 
.leftMenu .loginBx li a.login { color:#fff; background-color:#3f3f3f; border:1px solid #3f3f3f; } 
.leftMenu .asideClose{position:absolute;top:25px;right:18px;color:#414141;font-size:30px; z-index:100}

.leftMenu .menuListLinkArea{border-bottom:none; width:80%;margin:0 auto;text-align:center;}
.leftMenu .menuListLinkArea ul{ }
.leftMenu .menuListLinkArea .link{position:relative;z-index:1;display:block;font-size:16px;font-weight:700;height:34px;line-height:34px;color:#2d2d2d;}
.leftMenu .menuListLinkArea .link:after {content: ''; height:1px; width:15px; background:#000; margin:0 auto; display:block; }
.leftMenu .menuListWrap{ width:70%;margin:0 auto; padding:15px 0;}
.leftMenu .menuListWrap .menuList{display:none;}
.leftMenu .menuListWrap .menuList.on{display:block;}

.leftMenu .menuCnt .menuFooter { padding: 16px 0; text-align: center; font-size: 0; }
.leftMenu .menuCnt .menuFooter a { color: #111; display: inline-block; padding: 6px 16px; position: relative; font-size: 12px; border: 1px solid #ddd; margin: 0 2px; }

/* dorpdown */
.asideNav .list{}
.asideNav .list:after{content:"";display:block;clear:both;}
.asideNav .link{display:block;margin-right:53px;height:35px;line-height:35px;font-size:14px;color:#383838;text-align:left;}
.asideNav .link:focus{color:#ffb400;}
.asideNav .openBtn{border:0;background:none;float:right;text-align:center;width:53px;height:35px;padding-top:3px;box-sizing:border-box;color:#2c2c2c;font-size:13px;}
.asideNav .listWrap{clear:both;display:none;padding:4px 0; }
.asideNav .listWrap>.list:last-child{border-bottom:0;}
.asideNav .depth1>.link{padding-left:0;}
.asideNav .depth2>.link{padding-left:20px;}
.asideNav .link.last{margin-right:0;}
.asideNav .list.on>.listWrap{display:block;}
.asideNav .list.depth1.on>.link, .asideNav .list.depth1.on>.openBtn{}
.asideNav .list.depth1.on>.link{}
.asideNav .list.depth2 .link{font-size:12px;}
.asideNav .list.depth3{border-bottom:0;}
.asideNav .list.depth3 .link{}
.asideNav .line{ border-top:1px solid #eee; margin: 10px 0;}

/* BASIC css end */