/* BASIC css start */
#container{background:#fff !important;}
#footer{margin-top:0px !important;}
img {max-width:100%;}

/********** 메인 배너 (관리자연동) **********/
.mainBannerText { position: absolute;height: 82px;left: 0;top: calc(50% - 41px);display: inline-block;text-align: center;width: 100%;vertical-align: middle;z-index:99}
.mainBannerText h2{ display: block;font-size: 24px;font-weight: 200;letter-spacing: 0.3px;padding: 0 0 7px;color: rgb(255,255,255);font-family: Nunito;height: 30px;}
.mainBannerText span{ display: block;font-size: 11px;font-weight: 300;line-height: 22px;letter-spacing: 0;color: rgba(255, 255, 255, 0.84);text-shadow: 0px 0px 2px rgba(97, 97, 97, 0.58);}

/* 롤링배너 */
#event{position:relative;}
#event .MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .event-imgs { position: relative; }
#event .MS_img-area { float: left; }
#event .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-area img { width: 100%; }
#event .pagination { position: absolute; left: 0; bottom:0; text-align: center; width: 100%; padding:10px 0;}
#event .pagination .swiper-pagination-switch { display: inline-block; margin: 0 4px; text-indent: -9999px; width: 8px; height: 8px; border-radius:8px; background:rgba(255,255,255,0.5);}
#event .pagination .swiper-active-switch { background:rgba(255,255,255,0.8); }
/* //롤링배너 */

/********** 공지사항 **********/
.notiMain { text-align: Center;padding: 26px 0 32px;background: #f5f5f5;}
.notiMain ul li { display: block;height: 22px;line-height:22px;}
.notiMain ul li a { display: block;color: #808080;font-weight: 300;font-size: 11px;font-family: '맑은 고딕';}
.notiMain .more { color: #bdb9b6;display: block;padding-top: 10px;font-size: 0.8em;}

/******** 페이드배너 ********/
.fadeBanner { clear: both;position: relative;margin: 0 auto;margin: 0px 0 25px;background: #fff;box-sizing: border-box;padding:17px;}
.fadeBanner #bx-pager { padding: 10px 0 30px 0;}
.fadeBanner #bx-pager a { display: inline-block;margin-right: 6px;border-radius: 30px;border: 1px solid #d8d8d8;text-align: center;font-size: 11px;line-height: 11px;padding: 8px 14px 6px 14px;color: #989898;}
.fadeBanner #bx-pager a.active { background: #a09f94;border: 1px solid #a09f94;color: #fff;}
.fadeBanner ul > div { position: relative;background:#fff}
.fadeBanner ul > div > h1 { display: block;font-weight: normal;font-size: 0.8em;color: #a74e4e;padding: 0 0 3px 3px;}
.fadeBanner ul > div > h2 { display: block;font-size: 18px;font-weight: normal;font-family: nunito,'맑은 고딕';padding-bottom: 13px;letter-spacing: 0.3px;color: #211f1d;}
.fadeBanner ul > div > span { display: block;font-size: 11px;line-height: 19px;color: #737373;padding-bottom: 26px;font-weight: 300;}
.fadeBanner ul > div > a { margin: 19px 0 2px;text-align: center;display: block;border: 1px solid #c7c7c7;padding: 7px;font-size: 11px;font-weight: 300;color: #7d7d7d;}

/********** 미들배너 **********/
.middleBanner { position:relative; background: #b6b2ae;margin-bottom: 25px;}
.middleBanner h2 { display: block;height: 54px;font-size: 15px;color: #fff;font-weight: 100;font-family: Nunito;padding: 20px 0 ;letter-spacing: 5px;text-align: center;box-sizing: border-box;}
.middleBanner h2 a { margin-top: 12px;display: block;background: #a5a19d;color: #ffffff;font-size: 18px;letter-spacing: 2px;font-family: Nunito;font-weight: 300;text-transform: uppercase;position: absolute;right: 11px;top: 0;border-radius: 100%;line-height: 30px;width: 30px;height: 30px;box-sizing: border-box;}
.middleBanner h2 b { font-weight:300}
.middleBanner h2 a i { padding: 5px 0 0 3px;color: rgba(255, 255, 255, 0.64);}

/********** 탭상품 **********/
#tabBox {}
#tabBox:after {content:"";display:block;clear:both;}
#tabBox .tabMenu { clear:both;}
#tabBox .tabMenu > ul { font-size:0; line-height:0; background:#f0f0f0;}
#tabBox .tabMenu > ul:after { content:"";clear:both;display:block;}
#tabBox .tabMenu > ul > li { margin-left:-1px}
#tabBox .tabMenu > ul > li a { cursor:pointer; float:left; width:calc(100% / 3); font-size:11px; line-height:13px; padding:12px 0; text-align:center; margin-left:-1px;}
#tabBox .tabMenu > ul > li:last-child a { width:calc(100% / 3); border-right:0;}
#tabBox .tabMenu > ul > li a.active { background:#fff; font-weight:bold; border:1px solid #fff; border-top:1px solid #000; width:calc(100% / 3); box-shadow:3px 2px 6px rgba(0,0,0,0.07);}
#tabBox .tabMenu > ul > li:last-child a.active { width:calc(100% / 3);}
#tabBox .tabCons_wrap > ul { width:500%;}
#tabBox .tabCons { float:left; height:auto; width:calc(100% / 3);}
#tabBox .tabCons .items { background:#fff; padding:6px 4px; box-sizing:border-box; box-shadow:5px 3px 4px rgba(0,0,0,0.03);}

#tabBox .ec-base-product .grid3 > li { position:relative; width:32.33%; margin:0 1.505% 1.505% 0;}
#tabBox .ec-base-product .grid3 > li { border-bottom:0; padding-bottom:0;}
#tabBox .ec-base-product .grid3 > li:nth-child(3n){margin-right:0;}
#tabBox .tabCons .items .description { opacity:0; visibility:hidden; position:absolute; left:0; bottom:0; z-index:2; width:100%; height:100%; text-align:center; background:#fff9; box-sizing:border-box;}
#tabBox .tabCons .items .description.active {opacity:1; visibility:visible;}
#tabBox .tabCons .items .thumbnail .wish {display:none;}
#tabBox .ec-base-product .thumbnail { margin:0;}
#tabBox .ec-base-product .thumbnail img {width:100%;}
#tabBox .ec-base-product [class*="grid"] { padding:0;}
#tabBox .ec-base-product .description .name {font-weight:normal;font-size:11px;margin-bottom:0;}
#tabBox .ec-base-product .description .price {padding-top:5px}
#tabBox .ec-base-product .description .price span { font-size:12px !important; color:#272727 !important; font-family:nunito !important;}

#tabBox .ec-base-product .cart,
#tabBox .ec-base-product .likeButton,
#tabBox .ec-base-product .icon,
#tabBox .ec-base-product span span {display:none;}

#tabBox .tabCons .items a.description{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:9; display:block;
  opacity:0;
  visibility:visible !important;
  text-decoration:none; color:inherit;
}

/********** 배너 **********/
.bnMain { margin-bottom:5px;}
.bnMain .bx-wrapper .bx-pager {right: 0;bottom: 0px;width: 98px;text-align: center;height: 20px;background: rgba(74,71,67,0.34);padding: 6px 0;color: #fff;font-weight: normal;font-size: 11px;line-height: 20px;letter-spacing: 0;}
.bnMain .bx-wrapper .bx-pager:after {content:"전체보기";padding-left:9px;}

.bnMain .hidden { opacity:0; visibility:hidden; position:fixed; z-index:999; left:0; top:0; background:rgba(53,53,53,0.95); width:100%; height:100%; box-sizing:border-box; padding:6px;}
.bnMain .hidden h2 { display:block; padding:8px 0 12px; position:relative; color:#fff; font-weight:300; text-align:center; font-size:16px;}
.bnMain .hidden h2 i { position:absolute; right:7px; top:8px; font-size:16px;}
.bnMain .hidden.active {opacity:1; visibility:visible;}
.bnMain .hidden > div.bin {position:absolute; left:0; top:0; width:100%; height:100%; background:transparent; z-index:8;}
.bnMain .hidden > ul {overflow-y:auto; height:100%; position:relative; z-index:9;}
.bnMain .hidden > ul a { display:block; margin-bottom:6px;}
.bnMain .hidden > ul a:last-child{margin-bottom:0;}

/********** WeeklyBest **********/
.weeklyBest.ec-base-product { background:#fff; padding:14px; background-size:cover; margin-bottom:20px;}
.weeklyBest.ec-base-product .description .name { margin-bottom:3px;}

/********** 공통 상품 타이틀 영역 수정 **********/
.ec-base-product .title{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  box-sizing:border-box;
  padding:12px 16px 8px !important;
  text-align:left !important;
  width:100% !important;
}
.ec-base-product .title h4{
  margin:0 !important;
  padding:0 !important;
  font-size:16px !important;
  font-weight:700 !important;
  letter-spacing:-0.2px;
  color:#111 !important;
  flex:0 1 auto !important;
  text-align:left !important;
}
/* 제목을 링크(<a>)로 감싸도 기존 타이포 그대로 보이게 */
.ec-base-product .title h4 a{
  display: inline;           /* 줄바꿈/간격 변화 방지 */
  color: inherit;            /* 원래 제목 색상 유지 */
  text-decoration: none;     /* 밑줄 제거 */
  font: inherit;             /* 폰트, 크기, 굵기 모두 상속 */
  line-height: inherit;      /* 행간 유지 */
  letter-spacing: inherit;   /* 자간 유지 */
  -webkit-tap-highlight-color: transparent; /* 모바일 하이라이트 제거 */
}
/* 상태에 따라 색/밑줄 바뀌지 않게 고정 */
.ec-base-product .title h4 a:hover,
.ec-base-product .title h4 a:focus,
.ec-base-product .title h4 a:active,
.ec-base-product .title h4 a:visited{
  color: inherit;
  text-decoration: none;
}

.ec-base-product .title .section-more,
.ec-base-product .title .more{
  display:inline-block !important;
  margin-left:auto !important;
  font-size:13px !important;
  color:#8a8f98 !important;
  text-decoration:none !important;
  white-space:nowrap !important;
}
.ec-base-product .title .section-more::after,
.ec-base-product .title .more::after{
  content:' :';
  margin-left:4px;
}

.ec-base-product .title h3 {font-weight:normal; color:#999}
.ec-base-product li figure {margin:0; padding:0;}

/*카테고리*/
#topcate {position:relative; clear:both; border-bottom:1px solid #222; margin-top:35px;}
#topcate ul.cate {border-top:1px solid #ddd; text-align:center; padding:0; margin:0;}
#topcate li {display:inline-block; float:none; margin:0 10px; line-height:35px;}
#topcate li a {font-weight:500; font-size:11px; color:#222; letter-spacing:0.10em; line-height:35px; font-family:"arial","Dotum";}
#topcate a.hide_com { font-weight:700; color:#646464; }
#topcate li a.active { color:#d00; font-weight:700; border-bottom:2px solid #d00; }

.highlighted-section { margin-top:30px; }
.highlighted-title { background:linear-gradient(to right,#ff7e5f,#feb47b); padding:15px; border-radius:5px; text-align:center; }
.highlighted-title h4 { font-size:24px; color:#fff; font-weight:bold; margin:0; }

/* 기본 앵커 스타일 */
a.description { display:block; text-decoration:none; color:inherit; }

/* [안전추가] 배너 래퍼가 #event '안쪽'이든, #event '자체'든 둘 다 지원 */
#event .MS_img-wrap, #event.MS_img-wrap { position: relative; width: 100%; overflow: hidden; }
#event .MS_img-wrap .event-imgs, #event.MS_img-wrap .event-imgs { position: relative; }
#event .MS_img-wrap .MS_img-area, #event.MS_img-wrap .MS_img-area { float: left; }
#event .MS_img-wrap .MS_img-area:not(:first-child), #event.MS_img-wrap .MS_img-area:not(:first-child) { display: none; }
#event .MS_img-wrap .MS_img-area img, #event.MS_img-wrap .MS_img-area img { width: 100%; }
#event .MS_img-wrap .pagination, #event.MS_img-wrap .pagination {
  position: absolute; left: 0; bottom: 0; text-align: center; width: 100%; padding: 10px 0;
}

/* BASIC css end */