/* 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: #111; z-index:1000; display:none; opacity: 0.7; } 
#header { position:relative; width:100%; z-index:101 } 
.headerFix #gnb { position:fixed; top:0; left:0; right:0; height:52px; } 
.headerFix .mnCate { position:fixed; top:54px; left:0; right:0; } 

#header .hdMenu { height:34px; background: #fff; } /* 상단바컬러 #fafafa; #b77c5a; */
#header .hdMenu ul {text-align: center; line-height:34px; }
#header .hdMenu ul li { width:100%; float:left; text-align:center; line-height:34px; } 
#header .hdMenu ul li a { font-size:11px; color:#000 } 
#header .hdMenu ul li a i { font-size:16px; vertical-align: middle; } 
/* 상단 */
#header { width:100%; height:90px; } 

#gnb { height:55px; width:100%; background:#000; } /* 상단로고바 색상 background:#fff; */
#gnb .gnbact { position:relative; } 
#gnb .gnbact .logo { text-align: center; height:55px; line-height:52px; } 
#gnb .gnbact .logo a { font-size:28px; font-weight:bold; color:#000; } 
#gnb .gnbact p { font-size:25px; color:#fff; line-height:60px; text-align:center } /* 햄버거 색상 color:#2e2e2e; */
#gnb .gnbact p.menuOpen { position:absolute; top:0; left:0; width:52px; height:55px; } 
#gnb .gnbact p.cart { position:absolute; top:0; right:0; width:52px; height:55px } 
#gnb .gnbact p.cart a { color:#fff } /* 카트아이콘 색상 */
#gnb .gnbact p.cart .user_basket_quantity { font-size: 12px; position: absolute; top: 10px; right: 10px; color: #fff; background-color: #a51e22; width: 16px; height: 16px; border-radius: 50px; line-height: 15px; } /* 카트에 동그라미 숫자표시 */
#gnb .gnbact .search { position:absolute; color:#fff; top:0; right:36px; width:52px; height:52px } 
#gnb .gnbact .search .searchBox { display:none; } 
#gnb .gnbact .search .searchBox a { color:#fff } 
#gnb .gnbact .search .btn_search { display:inline-block; width:52px; height:52px; font-size:25px; color:#fff; line-height:57px; text-align:center } /* 돋보기색상 color:#2e2e2e; */

#gnb .gnbact .searchArea { position: absolute; top: 51px; left:0; right:0; height: 65px; background-color: #000; text-align:center; display:none; z-index:10; } 
#gnb .gnbact .searchArea .searchBox { width:100%; } 
#gnb .gnbact .searchArea .searchBox input { width: 90%; height: 34px; color: #fff; border-width: 0 0 1px 0; padding: 0 5px; border-color: #fff; background: transparent; font-size: 14px; font-weight: bold; } /* 돋보기클릭시 라인과 박스에 관한 정보 텍스트 color: #fff; */
#gnb .gnbact .searchArea .btn_search { position: absolute; top:0; right: 2%; text-align:center; } 
#gnb .gnbact .searchArea .btn_search i { width:45px; height: 30px; line-height: 30px; font-size: 24px; color:#fff; } /* 돋보기클릭시 라인 위의 돋보기아이콘 색상 */

/*상단 고정시*/
.headerFix #gnb .gnbact { position:relative; background:#000 } /* background:#2e2e2e */
.headerFix #gnb .gnbact i { color:#fff } /* 상단고정시 햄버거,돋보기,카트 색상 */
.headerFix #gnb .gnbact .logo a { color:#fff } /* { color:#fff } */
.headerFix #gnb .gnbact .searchArea { background:#000 } /* 검색창 배경색 { background:#2e2e2e } */
.headerFix #gnb .gnbact .searchArea .searchBox input { border-color: #fff; color:#fff } 

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

.leftMenu .loginBx { margin: 0 0 10px; } 
.leftMenu .loginBx .logo { font-size: 15px; font-weight: bold; padding: 0 0 3%; display: block; } 
.leftMenu .loginBx .tx { color:#777; display: block; } 
.leftMenu .loginBx .btnSt { margin-top: 8%; overflow:hidden; } 
.leftMenu .loginBx .btnSt li { float:left; width:48%; } 
.leftMenu .loginBx .btnSt li:first-child { margin-right: 2%; } 
.leftMenu .loginBx .btnSt li i { font-size:16px; vertical-align: middle; } 
.leftMenu .loginBx .btnSt li a { width:100%; text-align:center; display: inline-block; background-color:#e7e7e7; color:#2e2e2e; height: 34px; line-height: 34px; font-weight:bold; font-size:14px; } 
.leftMenu .loginBx .btnSt li:first-child a { background-color:#7d7d7d; color:#fff } 
.leftMenu .loginBx .status { color:#1c1c1c; font-weight:bold; } 

/* 사이드 메뉴 - util menu */
.leftMenu .utilMenu ul { zoom:1; overflow:hidden; margin: 25px 0; } 
.leftMenu .utilMenu .list { width:25%; float:left; } 
.leftMenu .utilMenu .link { text-align:center; display:block; height:51px; font-size:28px; line-height:1; } 
.leftMenu .utilMenu i { padding-top:3px; } 
.leftMenu .utilMenu .title { color:#111; font-size: 12px; display:block; padding-top:3px; } 
.leftMenu .utilMenu .basket { position:relative; } 
.leftMenu .utilMenu .basket .quan { position:absolute; top: 2px; left: 50%; margin-left: 3px; color:#fff; font-size:11px; display:block; min-width:16px; box-sizing:border-box; height:16px; line-height:16px; background-color:#a51e22; border-radius:50%; } /*햄버거메뉴 안 장바구니 동그라미색  */

aside .asideTop { text-align:center; } 
aside .asideTop a { width:33.33%; height: 36px; display:inline-block; border-bottom: 1px solid #ddd; color:#8f8f8f; line-height: 36px; font-size:14px; } 
aside .asideTop a.act { color: #111; border-bottom: 1px solid #111; font-weight:bold; } 
aside nav { padding: 14px 0; 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: 34px; line-height: 34px; padding: 0 0 0 25px; margin-right: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#111; font-size:14px; } 
aside nav li .fa { position: absolute; top:0; right: 5px; width: 40px; text-align: center; height: 30px; line-height: 30px; font-size:16px; } 
aside nav li > ul { background-color: #fff; display:none; padding: 5px 0; background: #f8f8f8; } 
aside nav li > ul > li a { padding: 0 40px 0 34px; 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:#2c2c2c; font-size:1.333em; font-weight:bold; display: block; } /* 돋보기 검색어 입력후 클릭시 화면 color:#ab3e41; */
aside .asideBottom .fa-stack { color:#000; margin-top: -5px; } 
aside .asideBottom .copyright { margin-top:10px; } 
aside .navCommunity { display:none; } 
aside .navMypage { display:none; } 

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


/* 상하단 버튼 */
.btn_toggle_area { display: none; position: fixed; bottom: 22px; right: 49px; z-index: 100; } 
.btn_toggle_area a { display: block; width: 36px; height: 36px; line-height: 38px; color:#111; font-size: 18px; text-align: center; background-color: rgba( 255, 255, 255, 0.8 ); border:1px solid #ddd; border-radius: 100%; } 
.btn_toggle_area a.btn_up { position: absolute; bottom: 42px; } 
.btn_toggle_area a.btn_down { position: absolute; bottom: 0; } 


#footer .snsArea { text-align:center; margin: 20px 20px 0px; border-top: 1px solid #ddd; } 
#footer .snsArea a { background-color:#f2f2f2; width: 40px; height: 40px; line-height: 45px; display: inline-block; border-radius: 100%; margin: 0 1%; } 
#footer .snsArea a i { font-size:20px; padding-top: 17px; } 


/* HJ 리뉴얼 231106 */
#container {padding-top: 68px;}

/* 메뉴리스트 */
.grid4 { display: flex; flex-wrap: wrap; background: #fff; } 
.grid4 li {width: 33.333%;overflow: hidden;} 
.grid4 li a { display: block; line-height: 34px; height: 34px; border: 1px solid #cbcbcb; border-width: 0 1px 1px 0; text-align: center; font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 

/* 좌측 하단 팝업 */
.pop_wrap { position: fixed; bottom: 8px; left: 8px; z-index: 999; width: 50px; height: 50px; border-radius: 15px; overflow: hidden; } 
.small-image { cursor: pointer; width: 100%; } 
.fixed_popup { position: fixed; bottom: 8px; left: 8px; background-color: white; width: 0; height: 0; overflow: hidden; transition: all 0.5s ease-in-out, opacity 0.5s ease-in-out; opacity: 0; border-radius: 15px; } 
.fixed_popup.show { width: 80%; height: auto; opacity: 1; }   /*  width: 60%; 팝업사이즈 조정   */
.close-button { position: absolute; top: 10px; right: 10px; font-size: 30px; cursor: pointer; color: #000; z-index: 999; width: 30px; height: 30px; } 
.close-button img { vertical-align: baseline; } 
.swiper-container { width: 100%; height: 100%; } 
.swiper-slide { } 
.swiper-slide img { width: 100%; height: auto; } 

/* BASIC css end */


/* BASIC css end */