/* BASIC css start */
/* BASIC css start */
/* BASIC css start */
/* 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:#3c3c3c; z-index:1000; display:none; opacity: 0.6; } 
#allWrap { height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; } 
#wrap { position:relative; width:100%; min-width:320px; overflow:hidden } 
#header {position:relative;width:100%;z-index:101;} 

#gnb {position:relative;width: 100%;height: auto;background: #414141;} 
/* 공지사항 */ 
#gnb.act .hd_notice { display:none; } 
#gnb .hd_notice { position:relative; background-color: #c8c8c8; height: 34px; text-align:center; } 
#gnb .hd_notice a { line-height: 34px; font-size: 13px; color: #000; font-weight: bold; } 
/* 최상단 영역 */
#gnb .hdTop {background: #2d2b4c;position: relative;zoom: 1;height: 50px;} 
#gnb .hdTop .logo { position:absolute; top: 8px; left:50%; margin-left: -100px; line-height: 36px; z-index:10; text-align:center; width: 200px; } 
#gnb .hdTop .logo img {width: 70px;vertical-align: middle;} 
#gnb .hdTop .menuBtn {position:absolute;top: 7px;left: 10px;width: 36px;height: 36px;line-height: 36px;text-align: center;font-size: 24px;color: #fff;} 
#gnb .hdTop .cartBtn { position:absolute; top: 8px; right: 10px; z-index:10; width: 36px; height: 36px; line-height: 36px; text-align: center; font-size: 24px; color: #000; } 
#gnb .hdTop .cartBtn .quan { position:absolute; top: 3px; left: 50%; margin-left: 2px; background-color: #850e84; color: #fff; font-size:11px; font-weight: bold; display:block; padding:0 2px; min-width:14px; box-sizing:border-box; height:14px; text-align:center; line-height:14px; border-radius:8px; } 

/* 검색 영역 */
#gnb .searchArea {height: auto;text-align:center;z-index:10;position: relative;padding: 0px 15px 16px;background: #2d2b4c;} 
#gnb .searchArea .searchBox { position: relative; width:100%; background: #f5f5f5; height: 32px; box-sizing: border-box; } 
#gnb .searchArea .searchBox input { width: 100%; height: 32px; padding: 0 5px; background: #f4f4f4; border: none; } 
#gnb .searchArea .btn_search { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); text-align:center; line-height: 1; } 
#gnb .searchArea .btn_search i { width: 35px; height: 32px; line-height: 32px; font-size: 20px; color: #113e00; } 
/* 카테고리 */
#gnb .hdBtm { position: relative; height: 38px; background: #c8c8c8; } 
#gnb .hdBtm.act { position:fixed; top:0; left:0; right:0; } 
#gnb .hdBtm .hdMenuBtn { display:none; position:absolute; left:0; top:0; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; } 
#gnb .hdBtm .hdMenuBtn a { display:block; width: 40px; height: 38px; line-height:40px; text-align:center; font-size:24px; background: #0060d0; color: #fff; } 
#gnb .hdBtm .listWrap { width: 100%; display: flex; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; justify-content: space-around; align-items: center; } 
#gnb .hdBtm.act .listWrap {margin-left: 38px;width: 90%;} 
#gnb .hdBtm .listWrap li { height: 38px; line-height: 38px; text-align:center; font-size:13px; } 
#gnb .hdBtm .listWrap li a { color: #000; font-weight: bold; } 
#gnb .hdBtm .menuBtn { display: none; position: absolute; background: #000; width: 38px; height: 38px !important; left: 0; } 
#gnb .hdBtm.act .menuBtn {display: block;position: absolute;background: #000;width: 10%;height: 38px !important;left: 0;} 
#gnb .hdBtm .menuBtn i { color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; } 
#gnb.act { position: fixed; top:0; left:0; right:0; } 

/* 사이드 메뉴 */
.sideMenu { -webkit-transition:all 0.3s; transition:all 0.3s; position:fixed; top:0; left: -100%; width:100%; bottom:0; height:100%; z-index:1001; } 
.sideMenu.on { left: 0; } 
.sideMenu.on .shadow { display:block; } 
.sideMenu .menuCnt { position:absolute; top:0; left: 0; bottom:0; z-index:1; width:80%; box-sizing:border-box; background-color: #fff; overflow-y:auto; -webkit-overflow-scrolling:touch; } 
.sideMenu .shadow { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,0.75); } 
.sideMenu .asideClose { position:absolute; top: 5px; left: 80%; bottom:0; z-index:1; width: 50px; height: 50px; line-height: 50px; box-sizing:border-box; color:#fff; font-size:24px; text-align:center; } 

.sideMenu .loginBx { margin: 17px 10px 10px; } 
.sideMenu .loginBx .tx { color:#777; display: block; line-height: 20px; text-align: center; } 
.sideMenu .loginBx .btnSt { margin-top: 10px; overflow:hidden; } 
.sideMenu .loginBx .btnSt li { float:left; width:50%; margin-right: -2px; } 
.sideMenu .loginBx .btnSt li i { font-size:16px; vertical-align: middle; } 
.sideMenu .loginBx .btnSt li a { width:100%; text-align:center; display: inline-block; border: 1px solid #dbdbdb; background-color:#fff; color:#393939; height: 34px; line-height: 34px; } 
.sideMenu .loginBx .status { color:#1c1c1c; font-weight:bold; } 

/* 사이드 메뉴 - util menu */
.sideMenu .utilMenu ul { zoom:1; overflow:hidden; padding: 7px 0; margin: 0 10px; } 
.sideMenu .utilMenu .list { width:25%; float:left; } 
.sideMenu .utilMenu .link { text-align:center; display:block; height:51px; font-size:28px; line-height:1; } 
.sideMenu .utilMenu i { padding-top:3px; } 
.sideMenu .utilMenu .title { color:#5b5b5b; font-size: 12px; display:block; padding-top:3px; } 
.sideMenu .utilMenu .basket { position:relative; } 
.sideMenu .utilMenu .basket .quan {position:absolute;top: 2px;left: 50%;margin-left: 3px;background-color: #ffcc33;font-size:11px;display:block;padding:0 2px;min-width:16px;box-sizing:border-box;height:16px;text-align:center;line-height:16px;border-radius:8px;color: #000;font-weight: bold;} 

aside .asideTop { text-align:center; margin: 0 10px; } 
aside .asideTop a { width:33.33%; height: 36px; display:inline-block; border-bottom: 1px solid #ddd; color:#8f8f8f; line-height: 36px; } 
aside .asideTop a.act { color: #111; border-bottom: 1px solid #111; font-weight:bold; } 
aside nav { padding: 4px 0; margin: 0 10px; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } 
aside nav li { position:relative; } 
aside nav li a { display: block; height: 32px; line-height: 32px; padding: 0 0 0 15px; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
aside nav li .fa { position: absolute; top:0; right: 0; width: 40px; text-align: center; height: 30px; line-height: 30px; } 
aside nav li > ul { background-color: #fff; display:none; padding: 5px 0; background: #f8f8f8; } 
aside nav li > ul > li a { padding: 0 40px 0 20px; margin: 0; } 
aside nav li > ul > li > ul { background-color:#e6e6e6; } 
aside nav li > ul > li > ul > li a { padding:0 0 0 25px; margin: 0; } 
aside .asideBottom { padding:20px 22px; } 
aside .asideBottom .tel { color:#ab3e41; font-size:1.333em; font-weight:bold; display: block; } 
aside .asideBottom .fa-stack { color:#000; margin-top: -5px; } 
aside .asideBottom .copyright { margin-top:10px; } 
aside .navCommunity { display:none; } 
aside .navMypage { display:none; } 

/* 사이드 메뉴 - 하단 link */
.sideMenu .menuFooter { padding: 12px 0; text-align:center; font-size:0; } 
.sideMenu .menuFooter a { color:#777; display:inline-block; padding: 3px 14px; position:relative; font-size:12px; border: 1px solid #ddd; margin: 0 2px; } 

/* BASIC css end */


/* BASIC css end */


/* BASIC css end */


/* BASIC css end */

