/* BASIC css start */
.wrapper {padding:0 15px; box-sizing:border-box; width:100%; position:relative; }
.swiper {overflow:hidden; position:relative}
.dn {display:none;}
button {background:none; border:none; }
img {max-width:100%}
.shopdetail_header {display:none; }

/* 최상단 배너 */
#headerBanner.TBI{ position:relative; width:100%; height:5%; overflow:hidden;background-color:#2f3529; }
#headerBanner {position:relative; width:100%; height:34px; overflow:hidden;background-color:#2f3529; z-index:999;/* margin-bottom:10px; */}
#headerBanner .hdBannerTxt { position:relative; width:100%; height:34px }
#headerBanner .hdBannerTxt a { display:block;color:#fff;line-height:34px;text-align:center; }
#headerBanner .hdBannerImg { position: relative; width: 100%;}
#headerBanner .topbanner{width:100%;}
#headerBanner .bnClose { position:absolute; top:0; right:0 }
#headerBanner .bnClose a { display:block; width:33px; height:33px; font-size:22px; text-align:center; line-height:35px;color:#fff; }

.header_box {position:fixed; left:0; width:100%; display:block; text-align:center; box-sizing:border-box;z-index:100; /*background:#2b3244;*/}
.header_box .animated {  }
.header_box .wrapper {height:100%; padding:10px 0;}
/*.header_box .menu_btn {position:absolute; left:15px; top:calc(50% - 8px);  width:22px; height:16px; text-align:center;  }
.header_box .menu_btn span { display: block; width:100%; height: 2px; background:#fff; margin-bottom:4px; }
.header_box .menu_btn span:last-child {margin-bottom:0}
.header_box .search_show {width: 32px;height: 32px; position:absolute;right: 15px;top: calc(50% - 17px);}
.header_box .logo {display:inline-block;}
.header_box .logo img {height:24px}
.header_box .basket_btn { position:absolute;top: calc(50% - 18px);right: 48px;width: 32px;}
.header_box .basket_btn .ic_basket { display:inline-block; position:relative; }
.header_box .basket_btn .ic_basket .count {position:absolute; bottom:-2px; right:-4px; width:16px; height:16px; border-radius:100%; background:#fff; color:#000; font-size:8px; text-align:center; line-height:16px; }
*/

.header_box  {background:rgba(255,255,255,0.5); }
.header_box .wrapper { padding:17px 16px; box-sizing:border-box; display:flex;justify-content: space-between; /*justify-content:center; */ align-items: center;}
.header_box .wrapper .WH {display:none; }
.header_box .wrapper img {height: 32px;}

.header_box .wrapper .left {display:flex; } 
.header_box .wrapper .left .menu_btn {margin-right:10px; }
.header_box .wrapper .right {display:flex;justify-content: center;align-items: center;}
.header_box .wrapper .basket_btn {margin-right:10px;  position:relative; }
.header_box .wrapper .my_btn {margin-left:6px; }
.header_box .wrapper .my_btn img {height: 24px;}
.header_box .basket_btn .count {position:absolute; bottom:-2px; right:-4px; width:16px; height:16px; border-radius:100%; background:#000; color:#fff; font-size:8px; text-align:center; line-height:16px; }
.header_box .wrapper .logo img {height: 18px;}
.scroll_menu_box {display:none; }


.search_area_box {display:none; position:fixed; top:0; left:0; width: 100%; height:100%; box-sizing:border-box; background:rgba(0,0,0,0.6); padding-top:46px; z-index:10 }
.search_area_box .search_area {position:relative; display:inline-block; width:100%; padding:17px; box-sizing:border-box; }
.search_area_box .search_area input {border-radius:30px; width:100%; box-sizing:border-box; padding:0 48px 0 16px  }
.search_area_box .search_btn {position:absolute; top:calc(50% - 11px); right:32px; width:22px}


.animated { -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 
#header.slideDown .animated{ -webkit-animation-name:slideDown; animation-name:slideDown;  } 
#header.slideUp .animated { -webkit-animation-name:slideUp; animation-name:slideUp; height:0; opacity: 0; visibility: hidden; } 
#header.slideDown .scroll_menu_box {  position:static; top:auto;  } 
#header.slideUp .scroll_menu_box  {position:fixed; top:0; } 
#header.headroom--not-top .header_box { top:0 }
#header.headroom--not-top .scroll_menu_box  {border-bottom:1px solid #ddd;}


/* SlideDown for headroom */ 
@-webkit-keyframes slideDown{ 
	0% {-webkit-transform:translateY(-100%);} 
	100% {-webkit-transform:translateY(0);  } 
} 
@keyframes slideDown{ 
	0% {transform:translateY(-100%);} 
	100% {transform:translateY(0);} 
} 

/* SlideUp for headroom */ 
@-webkit-keyframes slideUp{ 
	0% {-webkit-transform:translateY(0);} 
	100% {-webkit-transform:translateY(-100%);} 
} 
@keyframes slideUp{ 
	0% {transform:translateY(0);} 
	100% {transform:translateY(-100%);} 
} 


.menu_box { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: #fff; z-index: 9999; overflow-y: auto; transition: 0.3s; font-family: 'Noto Sans KR', sans-serif; }
.menu_box.active { left: 0; }

.menu_hd_box { display: flex; justify-content: space-between; align-items: center; padding: 25px; }
.menu_hd_box .logo { height: 22px; }
.menu_closed { font-size: 24px; background: none; border: 0; color: #000; }

.menu_welcome { padding: 16px 16px 12px;}
.menu_welcome .welcome_msg { text-align: left; font-size: 12px; color: #666; margin-bottom: 15px;font-weight:bold; }
.btn_group { display: flex; justify-content: space-between; width: 60%;gap:5px;margin-bottom:5px; }
.btn { height: 35px; line-height: 35px; font-size: 12px; font-weight: 600; border-radius: 20px; text-align: center; display: inline-block; padding: 0 12px; white-space: nowrap; }
.btn.brown { background: #2b3244; color: #fff; border: none; }
.btn.outline { background: #fff; border: 1px solid #2b3244; color: #2b3244; }


.side_top_box { display: flex; justify-content: space-around; padding: 14px 0; background: #f9f9f9; font-size: 12px;align-items: center;margin:0px 16px;}
.side_top_box a { text-align: center; color: #333; position: relative; }
.side_top_box i { font-size: 28px; display: block; margin-bottom: 4px; }
.side_top_box .badge {position: absolute;top:-4px;right:-0px;background: red;color: #fff;font-size: 10px;width:18px;height:18px;border-radius: 100%;display: flex;justify-content: center;align-items: center;}

.menu_tab_box {padding: 25px 16px 7px; background: #fff; border-bottom: none; }
.tab_btn { flex: 1; font-size: 15px; font-weight: bold; color: #999; background: transparent; border: none; border-bottom: none; text-align: left; position: relative; padding-right: 20px; }
.tab_btn.active { color: #000; }
.tab_btn .xi { font-size: 10px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

.tab_content { display: none; }
.tab_content.active { display: block; }

.category_list { margin: 16px; border: 1px solid #ddd;overflow: hidden; }
.category_list li { border-bottom: 1px solid #eee; background: #fff; }
.category_list li:last-child { border-bottom: none; }
.category_list li a { display: block; padding: 14px 16px; font-size: 14px; color: #222; text-align: left; }


.best_keyword_box { padding: 16px; }
.keyword_list { list-style: none; padding: 0; margin: 0; border: 1px solid #ddd; overflow: hidden; }
.keyword_list li { border-bottom: 1px solid #eee; background: #fff; }
.keyword_list li:last-child { border-bottom: none; }
.keyword_list li a { display: block; padding: 12px 14px; font-size: 13px; color: #222; line-height: 1.5; }
.keyword_list li a strong { font-weight: bold; margin-right: 6px; }

.benefit_info_box { padding: 16px; }
.benefit_info_box li {border-top:1px solid #ddd }
.benefit_info_box li:last-child {border-bottom:1px solid #ddd }
.benefit_info_box li a {padding:10px 0;display: flex;justify-content: flex-start;align-items: center;}
.benefit_info_box li a .icon {width:60px; text-align:center}
.benefit_info_box li a .icon img {height:32px}
.benefit_info_box li a .txt {width:calc(100% - 60px); box-sizing:border-box; padding-left:20px; font-size:13px; color:#000; font-weight:600 }
.benefit_info_box li a .txt strong {display:block; font-weight:400; margin-top:6px; }

/* 스크롤 메뉴 */
.scroll_menu_box {background:#fff; }
.scroll_menu_list {padding:0 5px}
.scroll_menu_list li {width:auto;  text-align:center; height:42px; }
.scroll_menu_list li a { display:inline-block; height:100%; font-size:13px; line-height:42px; padding:0 6px; }
.scroll_menu_list li .ic_new {position:relative; } 
.scroll_menu_list li .ic_new:after {content: ""; display: inline-block;width: 6px;height: 6px;line-height: 14px;background:#f1191f; box-sizing:border-box; position: absolute;top: 7px;right: -5px; border-radius: 100%;}
.scroll_menu_list li .point {color:#f1191f}


/* 사이드 메뉴 */
.leftMenu{transition:all 0.3s;animation-direction: reverse ;position:fixed;top:0;right:100%;width:100%;bottom:0;-webkit-overflow-scrolling:touch;z-index:1001}
.leftMenu .topMenuArea { margin: 6% auto; text-align: center; }
.leftMenu .topMenu span.point-ico img {width:20px}
.leftMenu .topMenu .order-ico img {} 
.leftMenu .topMenu .coupon-ico img{width: 28px;vertical-align: middle;}
.leftMenu .topMenu .cart-ico img {width:26px}
.leftMenu .topMenu .lnr-user{font-size:22px}
.leftMenu .topMenu { }
.leftMenu .topMenu span {display:block}
.leftMenu .topMenu em{display:block; margin-top:5px}
.leftMenu .topMenu img {width:24px }
.leftMenu .topMenu li { display:inline-block;width:30%;text-align:center; position:relative;}
.leftMenu .topMenu li.login{width:24%;}
.leftMenu .topMenu li a span{color:#2d2d2d;font-size:24px;display:block;line-height: 12px;padding-bottom:5px;vertical-align:top;}
.leftMenu .topMenu li a span.lnr{margin-bottom:10px;}
.leftMenu .topMenu li a span.lnr-heart{margin-bottom:12px !important;}
#jjimCnt{top:7px !important;}

.leftMenu .topMenu li a span.icoCnt{position:relative;top: 9pt;left: 52%;width: 15px;height: 10px;background-color:#aa957e; color:#ffffff;font-size:8px;line-height:15px;border-radius:100%; margin-top: 10px;}
.leftMenu .topMenu li a .user_basket_quantity{color:#ffffff;font-size:8px;line-height:15px;}
.leftMenu .topMenu li a { font-size:13px;}
/*.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 {text-align: left;font-size: 13px;padding: 23px 20px 12px;}
.leftMenu .menuCnt .userInfo li {display:inline-block}
.leftMenu .menuCnt .userInfo li a.login { padding-right:12px; border-right:#ddd 1px solid; font-weight:500}
.leftMenu .menuCnt .userInfo li a.join {padding-left:12px;color: #8e929c;font-weight: 500;}
.leftMenu .shadow{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.6);}
.leftMenu .asideClose{position:absolute;top: 15px;right: 10px;color:#414141;font-size:30px;z-index:100;}


/*좌측 MD 배너 */
.leftMenu .asideBestSlideArea {padding-left: 18px;padding-top:20px;padding-bottom: 20px;overflow:hidden;margin-right: 0px;background: #f3ece8;}
.leftMenu .asideBestSlideArea h3 { height:65px; font-size:22px; color:#333; font-weight:600; line-height:65px }
.leftMenu .asideBestSlideArea .swiper-slide { width:38% }
.leftMenu .asideBestSlideArea .thumbBox { position:relative; width:100%; height:100% }
.leftMenu .asideBestSlideArea .thumbBox .thumb {width:100%;height: auto;border-radius: 20px;overflow:hidden;/* line-height: 100%; */}
.leftMenu .asideBestSlideArea .thumbBox .thumb img { width:100% }
.leftMenu .asideBestSlideArea .thumbBox .thumb .thumbMask {position:absolute;top:0;left:0;right:0;height:100%;background: rgba(83,42,23,0.10);border-radius: 20px;z-index:10;}
.leftMenu .asideBestSlideArea .txt {margin-top: 10px;position: relative;top: 50%;left:0;right:0;font-size:13px;color: #000;font-weight: 500;text-align:center;z-index:11;}


/*좌측 3단메뉴 */
.leftMenu .aside4Area {margin:0px;text-align:center;border-bottom: 6px solid #f9f9f9;border-top: 6px solid #f9f9f9;}
.leftMenu .aside4Area:after{clear:both; display:block; content:'';}
.leftMenu .aside4Area li {display:inline-block;text-align:left;width: 33.3%;float: left;padding: 17px 0px;}
.leftMenu .aside4Area li a{/* padding-left: 48px; */font-size:14px;font-weight:bold;border-right: 1px solid #ddd;display: block;/* height: 50px; *//* line-height: 50px; */text-align: center;/* padding: 16px 0; */}
.leftMenu .aside4Area li p{display:inline-block; position:relative; left:15%; font-size:15px; }
.leftMenu .aside4Area li:last-child a {border-right:none}

/*좌측 4단메뉴 */
.leftMenu .boardArea {margin-top: 20px;text-align:center;border-bottom: 6px solid #f9f9f9;border-top: 6px solid #f9f9f9;}
.leftMenu .boardArea:after{clear:both; display:block; content:'';}
.leftMenu .boardArea li{display:inline-block;text-align:left;width: 25%;float: left;padding: 17px 0px;}
.leftMenu .boardArea li a{font-size:14px;font-weight: 500;border-right: 1px solid #ddd;display: block;text-align: center;}
.leftMenu .boardArea li:last-child a {border-right:none}

/* 사이드 메뉴 - navArea */
.leftMenu .navArea{background-color:#fff;margin-top: 16px;}
.leftMenu .navArea:after{content:"";display:block;clear:both;}
.leftMenu .navArea .left{width:50%;float:left;}
.leftMenu .navArea .right{width:50%;float:left;}

.pageNav .cateList{position:relative;/* margin-bottom: 20px; */}
.pageNav .cateList a {display: block;height: 40px;line-height: 40px;padding: 0 0px 0 20px;margin-right: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color:#333;font-size: 16px;font-weight: 500;}
.pageNav .xi {position: absolute;top:0;right: 6px;width: 40px;text-align: center;height: 40px;line-height: 40px;font-size: 20px;color: #000;}
.pageNav .depth1>ul {display:none;margin-bottom: 20px;}
.pageNav .depth2 {border-bottom:0px none;display: inline-block;width: 31%;}
.pageNav .depth2:first-child {border-top:0px none;}
.pageNav .depth2 a {padding: 6px 0px 0px 20px;margin: 0;font-size: 13px;color: #999;font-weight: 400;height: 28px;line-height: 28px;}
.pageNav .depth2 > ul{border-top:0px none; display:none;}
.pageNav .depth3 {border-bottom:0px none;}
.pageNav .depth3 a {padding:0 0 0 40px;margin: 0;background-color: #dfdfdf;}
.pageNav.noDepth .cateList a{margin-right:5px;}

/*최근본상품*/

.todayViewArea {margin: 40px 20px 30px 20px;/* padding-bottom: 30px; */}
.todayViewArea .todayTitle { padding-bottom:11px; position:relative; *zoom:1 }
.todayViewArea .todayTitle:after { display:block; clear:both; content:'' }
.todayViewArea .todayTitle h3 {float:left;font-size: 14px;font-weight: 500;}
.todayViewArea .todayTitle .todayMore { float:right; font-size:20px}
.todayViewArea .list { position:relative; float:left; width:100% }
.todayViewArea .list a { display:block; margin:0 1px }
.todayViewArea .list .thumb img { width:100% }
.todayViewArea .list .listName {padding: 5px 3px 0 0;font-size: 13px;}
.todayViewArea .list .thumb .listPic {width: 100%;}
.todayViewArea .today-pagination { margin:16px auto 0; position:relative; left:0; bottom:0; width:50% }
.todayViewArea .swiper-slide {width: 42%;}
.todayViewArea .swiper-slide img { width:100% }

.todayViewArea .whotPaginationWrap {margin: 0px auto 0;position:relative;width:100%}
.todayViewArea .today-pagination {display:table;position:relative !important;table-layout:fixed;width:100% !important;height:2px;background:#c3c3c3;border-radius:0;margin-top: 30px;}
.todayViewArea .today-pagination .swiper-pagination-bullet { display:table-cell; width:auto; margin:0 !important; height:2px !important; opacity:0; border-radius:0; vertical-align:top }
.todayViewArea .today-pagination .swiper-pagination-bullet-active { background:rgba(0,0,0,1) !important; opacity:1 }


.scroll_menu_list {padding-right:42px; position:relative; }
.menuShow {position:absolute;top:0;right:0;width:42px;height: 42px;background:#fff;z-index: 1; font-size:18px;}
.menuShow i {font-weight:bold}
.menuShow.on i {transform:rotate(180deg);}
.hide_menu_box {display:none}
.hide_menu_list {background:#fff;display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;box-sizing:border-box;align-items: center;border-top: 1px solid #eee;}
.hide_menu_list li {width:25%;height: 35px;line-height: 35px;font-size: 11px;box-sizing: border-box;border-right: 1px solid #eeeeee;border-bottom: 1px solid #eee;}
.hide_menu_list li.w100 {width:100%; }
.hide_menu_list li.w100 a {width:100%; height:100%; display:block; }

#header.slideUp .menuShow {position:fixed }
#header.slideUp .hide_menu_list {padding-top:43px; border-top:none}


.navBox {position:fixed; bottom:0; left:0; width:100%; z-index: 100; background:#fff; box-sizing:border-box; border-top:1px solid #f0f0f0 }
.navBox ul {display: flex;align-items: center;justify-content: space-between;}
.navBox ul li {width:20%; text-align:center;  }
.navBox ul li a {display:block; box-sizing:border-box; padding:8px 0 4px; text-align:center; }
.navBox ul li a .icon {margin-bottom:4px;  display:inline-block; position:relative; }
.navBox ul li a .icon span {font-size:24px}
.navBox ul li a .icon img {height:22px }
.navBox ul li a .icon em {position: absolute;top:-4px;right:-10px;background: red;color: #fff;font-size: 10px;width:18px;height:18px;border-radius: 100%;display: flex;justify-content: center;align-items: center;}
.navBox ul li a .txt {font-size:10px; display:block  }

.shopdetail_header {display:none; padding:14px 16px; box-sizing:border-box;align-items: center; justify-content: center; position:relative; }
.shopdetail_header .back {position:absolute; top:14px; left:16px; color:#424242; font-size:23px; }
.shopdetail_header .right  {display:flex; align-items: center; justify-content:center;  position:absolute; right: 16px; top:14px }
.shopdetail_header .right a {display:block; margin-left:12px; }
.shopdetail_header .right a img{height:20px; }
.shopdetail_header .basket_btn {position:relative; }
.shopdetail_header .basket_btn .count {background: red; color:#fff; }
.shopdetail_header .logo img {height: 18px;}

/* BASIC css end */