/* BASIC css start */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
html { width:100%; height:auto; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:middle; }
table { border:0; border-spacing:0; border-collapse:collapse; }
th,td { border:0; }


::selection { background:#c39562; color:#fff; }
.cboth { clear:both;*zoom:1 }
.cboth:after { content:" "; display:block; clear:both; }
.fleft {float:left;}
.fright {float:right !important;}
.left { text-align: left; }
.center { text-align: center; }
.top { caption-side: top; }
.right { text-align: right; }
.bold { font-weight: bold; }
.none { display:none; }

.pdr5 {padding-right:5px;}
.pdr10 {padding-right:10px;}
.pdr15 {padding-right:15px;}
.pdr20 {padding-right:20px;}

.pdt5 {padding-top:5px;}
.pdt10 {padding-top:10px;}
.pdt15 {padding-top:15px;}
.pdt20 {padding-top:20px;}
.pdt30 {padding-top:30px;}
.pdt40 {padding-top:40px;}
.pdt50 {padding-top:50px;}
.pdt60 {padding-top:60px;}
.pdt70 {padding-top:70px;}
.pdt80 {padding-top:80px;}
.pdt100 {padding-top:100px;}

.pdb10 {padding-bottom:10px;}
.pdb20 {padding-bottom:20px;}
.pdb15 {padding-bottom:15px;}

.mrt80 {margin-top:80px !important;}

.mrt5 {margin-top:5px;}
.mrt10 {margin-top:10px;}
.mrt15 {margin-top:15px;}
.mrt20 {margin-top:20px;}
.mrt25 {margin-top:25px;}
.mrt30 {margin-top:30px;}
.mrt35 {margin-top:35px;}
.mrt40 {margin-top:40px;}
.mrt50 {margin-top:50px;}
.mrt60 {margin-top:60px;}
.mrt70 {margin-top:70px;}
.mrt80 {margin-top:80px;}
.mrt90 {margin-top:90px;}
.mrt100 {margin-top:100px;}

/* 공통레이아웃 */
#header, #layerWrap, #contentWrap, #ftLink .link {width:auto;background-color:#fff;padding:0;margin:0 auto;}
.item-wrap,
#content {min-height:740px;margin:0 auto;}
#aside {margin:0 auto;}

#contentWrapper {width:1680px; margin:0 auto;}
.loc-navi {font-size:12px; text-align:right; border-bottom: 1px solid #e5e5e5; margin: 0px 0px 50px 0px; height:30px;line-height:30px; vertical-align:middle; padding: 20px 0px 20px 0px;}
.loc-navi a {height:30px;line-height:30px;}
.paging li a,
.paging li a:hover {font-weight:normal;letter-spacing:0;font-family:'Lato','Noto Sans KR',sans-serif;}
.paging li a:hover {color:#111;}
.paging li.now a {font-weight:bold;letter-spacing:0;}
.width1740 {width:1680px;margin:0 auto;position:relative;}
body, h1, h2, h3, h4, h5, h6, table, select, textarea, a, p {font-family:'Lato','Noto Sans KR',sans-serif;}


/* 게시판 상단 리스트 숨김 */
.bbs-hd {display:none;}

/* 상품리스트 (메인/검색/상품리스트)  */
.prd-list {max-width:1680px;margin:0px auto;}
.prd-list table td { border:0; vertical-align:top; text-align:center; padding-bottom:85px;}
.prd-list table td .box { }
.prd-list table .tb-center {margin:0 auto; padding:0 5px; text-align:center;position:relative; }
.prd-list table .info {position:relative; width:100%; padding:0; text-align:left;}
.prd-list .thumb { width:100%;height:100%;font-size:0;padding:0;line-height:0; position:relative; text-align: center; }
.prd-list .thumb:hover {border:0px solid #999;}
.prd-list .thumb a,
.prd-list .thumb img { display: block; width: 100%; height: 100%;}
.prd-list .thumb img {border:0;}
.prd-list .info {position:relative;}
.prd-list .dsc {margin-top:20px; color:#1b1b1b; font-size:14px; font-weight:400; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.prd-list .subname { color: #1b1b1b; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.03em; font-weight: 400; font-style: italic; }
.prd-list .price { position:relative; margin-top:10px; color:#000; font-size:15px; font-weight:700; text-align:left;}
.prd-list .consumer {margin-left:7px; color:#999; font-size:14px; font-weight:300; text-align:left; text-decoration:line-through;}
.prd-list .icon_list {position:absolute; bottom:0; right:0px; width:100%; opacity:0; -webkit-transition: .3s ease-in-out;transition:.3s ease-in-out;}
.prd-list .icon_list li {display:inline-block; margin:0 3px; vertical-align:top;}
.prd-list .icon_list .btn_opt img {border-radius:100%;}
.prd-list .btn_zoom {font-size:0px;text-align:center;}
.prd-list .btn_zoom a {display:inline-block;}
.prd-list .btn_zoom img {width:auto;height:auto;margin:0 auto;}
.prd-list .icon {margin-top:15px; font-size:0px;text-align:left;}
.prd-list .icon img {width:auto;height:auto;margin:0 6px 0 0;cursor:pointer;}
.prd-list .box:hover .icon_list,
.prd-list table td:hover .icon_list {bottom:20px;; opacity:1;}
.prd-list .nopadding td {padding:0;}
.mk_option_preview .mk_prd_option_list {font-size:12px;border:1px solid #999;font-family:'Noto Sans KR','Montserrat', sans-serif;}
.mk_option_preview .mk_prd_option_list .option-name {background-color:#f4f4f4;color:#333;border-left:0;padding:6px;}
.mk_option_preview .mk_prd_option_list li {margin:5px 14px;}
.prd-list .sale_bg { position:absolute; top:0; right:20px; color:#ff4800; font-size:14px; font-weight:bold; letter-spacing: -0.01em; }

/* 공통 애니메이션 css */
@keyframes blink { 0% {opacity:0.5;} 50% {opacity:1;} 100% {opacity:0.5;} }
@-webkit-keyframes blink { 0% {opacity:0.5;} 50% {opacity:1;} 100% {opacity:0.5;} }
   

/* 로그인화면 중앙정렬 */
#findIdPwd_result,
#findWrap,
#loginWrap {width:1100px;margin-right:auto;margin-left:auto}


/* 상품리뷰 */
.review_prd01 { text-align: left; font-size: 11px; padding-top: 5px; }
.review_prd02 { padding: 0px 5px; color: #999; }



/* 롤오버 */
a img.menuon {display:none;}
a img.menuoff {display:inline;}
a:hover img.menuon {display:inline;}
a:hover img.menuoff {display:none;}
.move {-webkit-transition: all 0.3s;   -moz-transition: all 0.3s;   -ms-transition: all 0.3s;   -o-transition: all 0.3s;   transition: all 0.3s;}

#header {position:relative; width:100%; margin:0; background: transparent;}
#comment_top button span,
#ss-pc-search-popup button span,
#mobile_allcate button span {
  visibility: visible !important;
}

/* Material Symbols 아이콘 폰트     아이콘그룹/검색팝업/전체메뉴패널이 공유하는 기반 클래스 */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}

/* 로고 다크/화이트 스왑 (기본 = 다크, 히어로 투명 헤더에서만 화이트로 전환) */
#ss-pc-logo { display: flex; align-items: center; flex-shrink: 0; }
#ss-pc-logo img { display: block; aspect-ratio: 239.74 / 13.27; height: auto; }
#ss-pc-logo .ss-logo-white { display: none; }

.ss-pc-header-bar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ebebeb;
  position: relative;
  z-index: 1000;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.3s ease;
}

.ss-pc-header-bar.ss-no-transition { transition: none !important; }
.ss-pc-header-inner {
  width: 1680px;
  margin: 0 auto;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
/* #comment_top = .ss-pc-header-bar와 동일 요소(id 유지)     sticky 시 흰 배경 고정 */
#comment_top {border-bottom:1px solid #ebebeb;}
#comment_top.fixed {position:fixed; top:0px; left:0%; right:0%; z-index:1000; background-color:#fff; width:100% !important; }
/* [2026-08] 아래로 스크롤 시 헤더 숨김(사이트 전역, js.txt가 스크롤 방향 감지해서 토글) */
#comment_top.fixed.is-hidden { transform: translateY(-100%); }

/* 카테고리 네비 */
#ss-pc-nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ss-pc-nav-list {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.ss-pc-nav-list a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.ss-pc-nav-list a::after {
  content: "";
  position: absolute;
  left: 0;

  bottom: -3px;
  width: 100%;
  height: 2px;
  background: #333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.ss-pc-nav-list a:hover { color: #333; }
.ss-pc-nav-list a:hover::after { transform: scaleX(1); }
.ss-pc-nav-trigger.is-active > a { color: #333; }
.ss-pc-nav-trigger.is-active > a::after { transform: scaleX(1); }
.ss-pc-nav-sep { width: 1px; height: 14px; background: #ddd; }
.ss-pc-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border-top: 1px solid #f0ede8;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
}
.ss-pc-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0s;
}
.ss-pc-panel-inner { position: relative; width: 1680px; margin: 0 auto; padding: 32px 0 44px; box-sizing: border-box; }
.ss-pc-panel-nav { height: 435px; overflow: hidden; }
.ss-pc-panel-nav .ss-pc-panel-inner { height: 100%; }
.ss-pc-nav-cols {
  position: absolute;
  top: 32px;
  bottom: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 30px 50px;
}

.ss-pc-nav-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.ss-pc-nav-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  flex: none;
  min-width: 110px;
}
.ss-pc-nav-col a {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
  text-decoration: none;
}
.ss-pc-nav-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px; /* padding-bottom:3px과 동일한 값     이유는 상단 nav 규칙 주석 참고 */
  width: 100%;
  height: 2px;
  background: #333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.ss-pc-nav-col a:hover { color: #333; }
.ss-pc-nav-col a:hover::after { transform: scaleX(1); }
.ss-pc-nav-collection { position: absolute; top: 32px; }
.ss-pc-nav-collection-grid { display: flex; gap: 24px; justify-content: space-between; margin-top: 38px; }
.ss-pc-thumb-item { display: block; width: 195px; flex: none; text-decoration: none; text-align: center; }
.ss-pc-thumb-imgwrap {
  width: 100%;
  aspect-ratio: 1;
  background-color: rgba(0, 0, 0, .02);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ss-pc-thumb-imgwrap img {
  max-width: 100%;
  max-height: 100%;
  mix-blend-mode: multiply;
  display: block;
  margin: 0 auto;
  transition: transform 0.4s ease;
}
.ss-pc-thumb-item:hover .ss-pc-thumb-imgwrap img { transform: scale(1.08); }
.ss-pc-thumb-item span {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  padding-bottom: 3px;
  font-size: 13px;
  color: #333;
  letter-spacing: 0.03em;
}
.ss-pc-thumb-item span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px; /* padding-bottom:3px과 동일한 값     이유는 상단 nav 규칙 주석 참고 */
  width: 100%;
  height: 2px;
  background: #333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.ss-pc-thumb-item:hover span { color: #333; }
.ss-pc-thumb-item:hover span::after { transform: scaleX(1); }

/* ============================================================
   [2026-08] 상단 아이콘 그룹     모바일과 동일한 시스템
   순서: 검색 → 위시리스트 → 마이페이지 → 장바구니 → 전체메뉴
   ============================================================ */
#ss-pc-actions ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
#ss-pc-actions ul li { padding-left: 15px; display: flex; align-items: center; }
#ss-pc-actions ul li:first-child { padding-left: 0px; }

.ss-pc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  position: relative;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
/* [2026-08] 라이브 사이트 기존 전체메뉴 닫기(X) 버튼의 호버 회전 효과를 그대로 이식
   (#mobile_allcate .mobile_allcate_Close:hover img { transform:rotate(180deg) }) -
   dehaze→close 아이콘이 같은 버튼을 재사용해서(js.txt openNav/closeNav), 열린 상태(.is-open,
   즉 close 아이콘일 때)에만 호버 회전이 걸리게 스코프 */
#ss-pc-nav-toggle .ss-pc-icon { transition: transform 0.3s ease-in-out; }
#ss-pc-nav-toggle.is-open:hover .ss-pc-icon { transform: rotate(180deg); }
.ss-pc-icon {
  font-size: 22px !important;
  color: #a88b68;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  transition: color 0.2s ease;
}
.ss-pc-icon-btn:hover .ss-pc-icon { color: #8f7658; }

/* 장바구니 수량 뱃지     기존 top_cart .basket_quant 스타일 재사용, 위치만 아이콘 버튼 기준으로 보정 */
.ss-pc-icon-btn .basket_quant {
    position: absolute;
    top: -3px;
    right: -5px;
    left: auto;
    margin-left: 0;
    min-width: 15px !important;
    height: 15px !important;
    line-height: 15px;
    font-size: 9px;
    font-weight: 600;
    color: #524233;
    background: #efe9df;
    border-radius: 16px;
    text-align: center;
    z-index: 2;
}

/* ============================================================
   [2026-08] 히어로 페이지 투명 헤더     색상 스왑
   body.ss-header-transparent는 JS가 히어로 페이지에서 스크롤 ≤10px일 때만 부여.
   #comment_top.fixed(기존 sticky 흰 배경)보다 우선해야 하므로 !important 사용.
   ============================================================ */
body.ss-header-transparent .ss-pc-header-bar,
body.ss-header-transparent .ss-pc-header-bar.fixed {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}
body.ss-header-transparent .ss-pc-nav-list a { color: #fff !important; }
body.ss-header-transparent .ss-pc-nav-sep { background: rgba(255,255,255,0.5) !important; }
body.ss-header-transparent .ss-pc-icon { color: #fff !important; }
body.ss-header-transparent #ss-pc-logo .ss-logo-dark { display: none !important; }
body.ss-header-transparent #ss-pc-logo .ss-logo-white { display: block !important; }

/* ============================================================
   [2026-08] 검색 오버레이 (전체 화면 마스크 + 중앙 검색 인풋)     모바일과 동일 구조
   ============================================================ */
#ss-pc-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100085;
}
#ss-pc-search-overlay.is-open { display: block; }

#ss-pc-search-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100090;
  align-items: center;
  justify-content: center;
}
#ss-pc-search-popup.is-open { display: flex; }

.ss-pc-search-popup-inner {
  width: 92%;
  max-width: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ss-pc-search-popup-inner form { flex: 1 1 auto; min-width: 0; }
#ss-pc-search-popup.is-open .ss-pc-search-popup-inner {
  animation: ssPcSearchIn 0.28s ease both;
}
@keyframes ssPcSearchIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ss-pc-search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #fff;
  margin: 0;
  padding: 0 0 10px;
}
.ss-pc-search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: 'Lato', 'Noto Sans KR', sans-serif;
  font-size: 18px;
  color: #fff;
  text-align: left;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
.ss-pc-search-field input::placeholder { color: rgba(255, 255, 255, 0.65); }

.ss-pc-search-popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.ss-pc-search-icon-popup {
  font-size: 24px !important;
  color: #fff !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important;
}

/* [2026-08] 검색 닫기(X) 버튼 - 재요청으로 화면 우상단 고정 배치로 되돌림(한때 검색창 옆
   인라인으로 옮겼었으나 다시 우상단 고정 요청). #ss-pc-search-popup이 position:fixed;
   inset:0 이라 absolute 기준점으로 바로 사용 가능. 기존 라이브 사이트 전체메뉴 닫기 버튼과
   동일한 호버 회전 효과도 함께 적용 */
.ss-pc-search-close {
  position: absolute; top: 30px; right: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
}
.ss-pc-search-close .material-symbols-outlined {
  font-size: 26px !important;
  color: #fff !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 26 !important;
  transition: transform 0.3s ease-in-out;
}
.ss-pc-search-close:hover .material-symbols-outlined { transform: rotate(180deg); }

.ss-pc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* [2026-08] 재구성 요청: 헤더와 전체메뉴가 겹쳐 보이는 문제 - 패널을 헤더 아래가 아니라
   전체 화면 높이(top:0)로 바꾸고, 마스크도 헤더까지 포함해 전체 화면을 덮게 함. 그 대신
   헤더에 있던 검색/위시리스트/마이페이지/장바구니 아이콘 + 닫기 버튼을 패널 자체 상단에
   복제해서(.ss-pc-nav-panel-head) 패널과 함께 오른쪽에서 슬라이드로 나오게 함 - 헤더가
   마스크에 가려도 아이콘들을 계속 쓸 수 있음. z-index는 우측 하단 플로팅 버튼
   (.right_fixed, 9999)보다 높게 잡아서 패널이 열렸을 때 그 버튼들 위로 확실히 덮이게 함 */
#mobile_allcate {width:340px;height:100%;margin:0;padding:0;font-size:12px;overflow:auto;background-color: #fff;overflow-x:hidden;}
#mobile_allcate.widepc {position:fixed;z-index: 10001;top:0;right:-340px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;transition: all 0.5s;text-align:left;}

/* 전체메뉴 배경 마스크 - 헤더 포함 전체 화면을 덮음(요청) */
#ss-pc-nav-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 10000;
}
#ss-pc-nav-overlay.is-open { display: block; }

/* 패널 자체 상단 아이콘 바 - 헤더의 #ss-pc-actions와 동일한 아이콘/순서를 패널에도
   복제(검색/위시리스트/마이페이지/장바구니/닫기). 헤더가 마스크에 가려도 패널이 열려있는
   동안엔 이 바로 계속 쓸 수 있음. [2026-08] 재수정: space-between으로 폭 전체에 펼쳤더니
   오히려 헤더보다 간격이 벌어져 보인다는 피드백 - 헤더(#ss-pc-actions ul li{padding-left:15px})와
   동일하게 오른쪽 정렬 + 15px 간격으로 되돌림(요청: 기존 헤더와 동일한 위치/간격) */
#mobile_allcate .ss-pc-nav-panel-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 19px;
  height: 91px; padding: 0px 24px 0px 40px; box-sizing: border-box;
  border-bottom: 1px solid #f0ede8; flex: 0 0 auto;
}
#mobile_allcate .ss-pc-nav-panel-head .ss-pc-icon-btn { width: 22px; height: 22px; }
#mobile_allcate .ss-pc-nav-panel-head .ss-pc-icon { font-size: 22px !important; }
/* [2026-08] 패널 자체 닫기 버튼(#ss-pc-nav-toggle과 별개 요소)에도 동일한 호버 회전 적용 -
   헤더 버튼과 달리 열림 상태가 항상 고정(패널이 열려있을 때만 보이는 버튼)이라 .is-open
   조건 없이 항상 호버 시 회전 */
#mobile_allcate .ss-pc-nav-panel-head .ss-pc-panel-close .ss-pc-icon { transition: transform 0.3s ease-in-out; }
#mobile_allcate .ss-pc-nav-panel-head .ss-pc-panel-close:hover .ss-pc-icon { transform: rotate(180deg); }
/* [2026-08] 문의 수정: 히어로 투명헤더 상태(body.ss-header-transparent)에서는 헤더 아이콘이
   흰색이 되는데(.ss-pc-icon{color:#fff!important}, 투명 배경 위 대비용), 같은 클래스를
   재사용한 패널 아이콘도 흰색이 돼서 패널의 흰 배경 위에서 안 보이는 문제 발생 - 패널
   안에서는 항상 원래 어두운 색을 유지하도록 더 구체적인 선택자로 덮어씀 */
body.ss-header-transparent #mobile_allcate .ss-pc-icon { color: #a88b68 !important; }

#mobile_allcate .ss-pc-slide { display: none; }
#mobile_allcate .ss-pc-slide.is-active { display: block; }
#mobile_allcate .ss-pc-slide-scroll { padding: 20px 24px 40px; }

#mobile_allcate .ss-pc-slide-header {
  display: flex; align-items: center; gap: 4px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid #f0ede8;
}
#mobile_allcate .ss-pc-back-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 0; }
#mobile_allcate .ss-pc-back-icon { font-size: 22px; color: #222222; }
#mobile_allcate .ss-pc-slide-title { font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 15px; letter-spacing: 0.05em; color: #222222; margin: 0 auto 0 4px; }

#mobile_allcate .ss-pc-nav-list-panel { list-style: none; margin: 0; padding: 6px 0 0; }
#mobile_allcate .ss-pc-nav-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 0; font-size: 15px; color: #222222; cursor: pointer; background: none; border: none; text-align: left;
  text-decoration: none; font-family: 'Lato', 'Noto Sans KR', sans-serif;
}
#mobile_allcate .ss-pc-arrow-right { font-size: 18px; color: #756e60; }

#mobile_allcate .ss-pc-cat-acc-panel { display: none; overflow: hidden; }
#mobile_allcate .ss-pc-cat-acc-list { list-style: none; margin: 0; padding: 2px 0 8px; }
#mobile_allcate .ss-pc-cat-acc-list li a { display: block; padding: 10px 0 10px 20px; font-size: 13px; color: #3b3b3b; text-decoration: none; }
#mobile_allcate .ss-pc-cat-acc-arrow { transition: transform 0.25s ease; }
#mobile_allcate .ss-pc-cat-acc-trigger[aria-expanded="true"] .ss-pc-cat-acc-arrow { transform: rotate(90deg); }

#mobile_allcate .ss-pc-section-divider { height: 1px; background: #eee; margin: 14px 0 20px; }
#mobile_allcate .ss-pc-bottom-label { display: flex; align-items: center; gap: 10px; font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; color: #000; }
#mobile_allcate .ss-pc-bottom-icon { font-size: 20px; }
#mobile_allcate .ss-pc-contact-trigger-btn {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; background: none; border: none; cursor: pointer; padding: 0;
}
#mobile_allcate .ss-pc-arrow-toggle { font-size: 18px; color: #756e60; transition: transform 0.25s ease; }
#mobile_allcate .ss-pc-contact-trigger-btn[aria-expanded="true"] .ss-pc-arrow-toggle { transform: rotate(180deg); }
#mobile_allcate .ss-pc-contact-accordion-panel { display: none; overflow: hidden; }
#mobile_allcate .ss-pc-contact-accordion-list { list-style: none; margin: 0; padding: 2px 0 8px; }
#mobile_allcate .ss-pc-contact-accordion-list li a { display: block; padding: 10px 0 10px 30px; font-size: 12px; color: #3b3b3b; text-decoration: none; }

#mobile_allcate .ss-pc-bottom-item { display: flex; align-items: center; justify-content: space-between; height: 40px; text-decoration: none; }

#mobile_allcate .ss-pc-nav-user-wrap { padding-top: 4px; }
#mobile_allcate .ss-pc-nav-user { display: flex; align-items: center; gap: 4px; min-height: 40px; font-size: 12px; color: #3b3b3b; }
#mobile_allcate .ss-pc-user-id,
#mobile_allcate .ss-pc-user-nim { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #000; }
#mobile_allcate .ss-pc-user-login { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #000; text-decoration: none; }
#mobile_allcate .ss-pc-user-btn { margin-left: auto; font-size: 10px; background: #c2b8a6; color: #fff; border-radius: 3px; padding: 6px 22px; text-decoration: none; }
#mobile_allcate .ss-pc-account-login-icon { font-size: 18px; }
#mobile_allcate .ss-pc-logout-icon { padding-left: 6px; font-size: 14px; color: #756260; }

#mobile_allcate .ss-pc-nav-boutique-foot { text-align: center; margin: 26px 0 10px; }
#mobile_allcate .ss-pc-boutique-img { position: relative; }
#mobile_allcate .ss-pc-boutique-img img { width: 100%; display: block; object-fit: cover; border-radius: 2px; }
#mobile_allcate .ss-pc-boutique-ctawrap {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.42) 100%); color: #fff;
}
#mobile_allcate .ss-pc-boutique-ctatitle { font-size: 15px; letter-spacing: 0.16em; margin: 0; font-family: 'Josefin Sans', sans-serif; }
#mobile_allcate .ss-pc-boutique-ctasubtitle { font-size: 12px; margin-top: 6px; }

/* Level 2 / 3 이미지 썸네일 그리드 */
#mobile_allcate .ss-pc-thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 6px 0 20px; }
#mobile_allcate .ss-pc-thumb-item { display: block; background: none; border: none; text-align: center; cursor: pointer; padding: 0; width: 100%; text-decoration: none; }
#mobile_allcate .ss-pc-thumb-img {
  width: 100%; aspect-ratio: 1; overflow: hidden; background-color: rgba(0, 0, 0, .02);
  display: flex; align-items: center; justify-content: center;
}
#mobile_allcate .ss-pc-thumb-img img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; display: block; margin: 0 auto; }
/* button 태그(하위 레벨 있는 웨딩밴드 등)는 전역 폰트 리셋 대상이 아니라서
   a 태그 항목들과 폰트가 달라 보이던 문제     문의하기(.ss-pc-bottom-label)와
   동일한 원인이라 여기도 직접 명시함 */
#mobile_allcate .ss-pc-thumb-label { display: block; font-family: 'Lato', 'Noto Sans KR', sans-serif; font-size: 13px; letter-spacing: 0.05em; color: #1a1a1a; margin-top: 10px; }
#mobile_allcate .ss-pc-btn-viewall { display: block; font-size: 13px; text-align: center; background: #c2b8a6; color: #fff; padding: 1rem 0; margin: 0 0 10px; text-decoration: none; }

/*플레인 상단 미디어쿼리 */
@media screen and (max-width: 1919px)
{
   #contentWrapper {width:1580px;}
    #contentWrap,
	.item-wrap, #content,
	.ss-pc-header-inner,
	.ss-pc-panel-inner {width:1580px;}

}

@media screen and (max-width: 1599px)
{
    #contentWrapper {width:1380px;}
	#contentWrap,
	.item-wrap, #content,
	.ss-pc-header-inner,
	.ss-pc-panel-inner {width:1380px;}

	.ss-pc-nav-list { gap: 22px; }
	.ss-pc-header-inner { gap: 24px; }
}



/* 에이앤 아더 미디어쿼리 적용 */
@media screen and (max-width: 1919px){
	/* 전체 레이아웃 */
	

	/* 공통 상품진열 스타일 */
	.prd-list table td .box { width:100%; }

	/* 추천 상품진열 스타일 */
	.recmd-prd-list {width:1620px;}
	.prd-list.best-prd-list table td.box,
	.prd-list.recmd-prd-list table td .box {max-width:365px; width:365px;}


	/* 메인 */
	.main_content {width:1580px;}

	/* 메인 우측 4단 상품진열 */
	.sp_product {width:1040px;}
	.sp_product.prd-list table .tb-center {width:233px;}
}


@media screen and (max-width: 1599px){

 .main_content { width: 1380px;}
	/* 공통 상품진열 스타일 */
	.prd-list table td .box { width:100%; }
	
	/* 추천 상품진열 스타일 */
	.recmd-prd-list {width:1320px;}
	.prd-list.best-prd-list table td.box,
	.prd-list.recmd-prd-list table td .box {max-width:290px; width:290px;}

	/* 메인 우측 4단 상품진열 */
	.sp_product {width:840px; padding-right: 20px;}
	.sp_product.prd-list table .tb-center {width:182px;}

	/* 메인 리스트그룹형 상품진열 스타일 */
	.br-main-prd .prd-list table .thumb {width:159px;}
}
/* BASIC css end */