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

#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:#fff; z-index:1000; opacity:0.7 }
#wrap { position:relative; width:100%; min-width:320px; overflow:hidden }
#header {position:fixed; top:0; left:0; right:0; width:100%; z-index:101 }

#gnb { height:60px; -webkit-transition:background-color 0.5s; transition:background-color 0.5s; }
#gnb.fix { background:rgba(255,255,255,0.8); -webkit-transition:background-color 1s; transition:background-color 1s }
#gnb .logo { margin-left:-55px; position:absolute; top:20px; left:50%;  z-index:10; }
#gnb .logo a { display:block; font-size:25px; font-weight:800 }
#gnb p.asideOpen { position:absolute; top:17px; left:10px; z-index:10 }
#gnb p.asideOpen i { font-size:24px }
#gnb p.topCart { position:absolute; top:17px; right:10px }
#gnb p.topCart i { font-size:24px }
#gnb p.topCart a .num { position:absolute; right:-5px; bottom:18px; padding:1px 7px 2px; color:#000; line-height:12px; border-radius:5px; background:#e4e4e4 }
 
/* 사이드 메뉴 */
aside { position:fixed; top:0; left:-100%; right:0; width:80%; height:100%; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:1001; -webkit-box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.2); box-shadow: 3px 0px 5px 0px rgba(0,0,0,0.2); }
aside .inner { padding:15px 10px }
aside .asideTop { margin:15px 0 15px; position:relative }
aside .asideTop .search { border-radius:20px; border:1px solid #c3c3c3; width: 96%; margin: 0 auto 10px }
aside .asideTop .searchBox { margin: 3px 10px }
aside .asideTop .searchBox input { padding: 0 5px; width: 85%; height: 29px; border: 0 none; vertical-align: middle }
aside .asideTop .btn_search { position: absolute; top: 5px; right: 7px; width: 35px; height: 29px; line-height: 29px; font-size: 25px; color: #383838}
aside .asideTop li { position:relative; float:left; width:46%; margin:0 5px }
aside .asideTop li a { display:block; font-weight:bold; line-height:35px; height:35px; text-align:center; border-radius:20px; background-color:#e9e9e9; color:#383838 }
aside .asideTop li a.black { background-color:#676767; color:#fff }

aside .loginInfo { text-align:center; margin: 0 0 20px }

aside .asideQuick ul { *zoom:1 }
aside .asideQuick ul:after { display:block; clear:both; content:'' }
aside .asideQuick ul li { position:relative; margin-left:1px; float:left; width:32.33%; background-color:#f4f4f4; padding: 0 0 8px }
aside .asideQuick ul li a { display:block; text-align:center; color: #6f6f6f }
aside .asideQuick ul li a i { margin-top:10px; font-size:28px; color:#383838 }
aside .asideQuick ul li a .num { position:absolute; right:20px; top:8px; padding:1px 7px 2px; color:#000; line-height:12px; border-radius:5px; background:#e4e4e4 }

aside .asideCate { position:relative; margin:20px 0 0 }

aside .asideNav { height:40px; text-align:center; font-size:0; border-bottom: 1px solid #383838 }
aside .asideNav a { display:inline-block; width:33.33%; height:37px; font-size:13px; color:#8d8d8d; font-weight:bold; line-height:37px }
aside .asideNav a .fa { margin-top:10px }
aside .asideNav a.act { color: #383838; border-bottom: 3px solid #383838 }
aside .navCategory {  }
aside nav li { margin-top:-1px; position:relative }
aside nav li a { display:block; height:40px; line-height:40px; padding:0 40px 0 20px; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
aside nav li:first-child a { border-top:none }
aside nav li i {position: absolute; top:0; right: 0; width:40px; text-align: center; height:40px; line-height:40px; z-index:10; font-size:16px }
aside nav li > ul { display:none;}
aside nav li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > a { padding:0 40px 0 30px; margin: 0; border-top:1px solid #fff }
aside nav li > ul > li > ul {border-top:0px none;}
aside nav li > ul > li > ul > li {border-bottom:0px none;}
aside nav li > ul > li > ul > li > a {padding:0 0 0 45px;margin: 0;  border-top:none; border-bottom:none; background:#e9e9e9 }

aside .navCommunity {display:none;}
aside .navToday {display:none; margin:15px 0; position:relative }
aside .navToday .viewWrap { margin:0 13px }
aside .navToday .viewWrap ul { margin: 0 0 15px }
aside .navToday .viewWrap li { margin:0 1%; float:left; width:31.33% }
aside .navToday .viewWrap li a { display:block; font-size:11px; text-align:center }
aside .navToday .viewWrap li a img { width:100%; margin: 0 0 5px }
aside .navToday .viewBtn { margin:10px 15px 0; padding-bottom:3px }
aside .navToday .viewBtn a { display:block; font-size:11px; color:#ababab; line-height:17px; background-color:#f4f4f4; text-align:center; padding:5px; width:35%; margin:0 auto }
aside .navToday .viewBtn a i { font-size:14px; vertical-align:-2px }

#asideClose { position:fixed; top:21px; left:-82%; font-size:24px; cursor:pointer; z-index: 1001; }

.btn_toggle_area { display: none; position: fixed;bottom: 12px; right: 49px;z-index: 999;}
.btn_toggle_area a { display: block; width: 36px; height: 36px; line-height: 36px; color:#111; font-size: 16px; text-align: center; background-color: rgba( 255, 255, 255, 0.8 );border:1px solid #ddd; border-radius:3px }
.btn_toggle_area a.btn_up { position: absolute; bottom: 47px;}
.btn_toggle_area a.btn_down { position: absolute; bottom: 0; }


/* BASIC css end */