@charset "utf-8";
@import url('goods.css?ver=20260814001');

.header > .navigation > h1 {text-align:left;}

.transparency .header > .navigation {position:fixed; left:0; top:0; min-width:320px; border-bottom-style:none; background-color:transparent;}
.transparency .header.banner > .navigation {top:43px;}
.transparency .header > .navigation > h1,
.transparency .header > .navigation > a {filter:brightness(0) invert(1);}
.transparency .header > .navigation > h1 {text-align:left;}
.transparency .header > .navigation > a.icon.icon-cart > em {display:none;}
.transparency .header > .navigation > em {position:absolute; right:7px; top:25px; display:inline-block; min-width:18px; height:18px; padding:0 4px; font-size:10px; font-weight:600; line-height:18px; text-align:center; color:#fff; background-color:#fa6c6c; border-radius:9px; box-sizing:border-box;}
.transparency .fixed .header > .navigation {top:0; border-bottom-style:solid;}
.transparency .fixed .header > .navigation > h1,
.transparency .fixed .header > .navigation > a {filter:unset;}
.transparency .fixed .header > .navigation > a.icon.icon-cart > em {display:inline-block;}
.transparency .fixed .header > .navigation > em {display:none;}

.header > .navigation > a.icon.icon-back {display:none;}
.header > .navigation > a.icon.icon-home {display:none;}
.header > .navigation > a.icon.icon-search {display:block;}
.header > .navigation > a.icon.icon-cart {display:block}

.main > .module {padding-bottom:32px;}
.main > .module > div {position:relative;}
/* 에디토리얼 카드 자동 배치를 위한 2컬럼 그리드 전환 (2026-08). 기본은 모든 자식이 2컬럼 전체를 차지하므로
   기존처럼 모듈 하나당 한 줄 전체(세로 쌓임) 그대로 유지되고, 이미지 등록된 에디토리얼 카드만 아래에서
   반칸(span 1)으로 예외 처리해 그리드 auto-placement가 자동으로 짝을 맞춰 나란히 배치한다. */
.main > .module {display:grid; grid-template-columns:repeat(2, 1fr);}
.main > .module > div {grid-column:1 / -1;}
.main > .module > div + div,
.main > .module > div + * + div {margin-top:32px;}
.main > .module > div > h2 {font-size:20px; font-weight:600; line-height:28px;}
.main > .module > div > h3 {font-size:13px; font-weight:400; line-height:16px; color:#666;}
.main > .module > div > .head {font-size:11px; font-weight:400; line-height:13px; color:#999;}
.main > .module > div > h2 + h3 {margin-top:6px;}
.main > .module > div > .head + h2 {margin-top:4px;}
.main > .module > div:first-child > h2,
.main > .module > div:first-child > h3 {margin-top:16px;}
.main > .module > div:first-child > .head {margin-top:16px;}
.main > .module > div:first-child > h2 + h3 {margin-top:6px;}
.main > .module > div > a.more {display:block; margin-top:16px; font-size:12px; line-height:32px; text-align:center; border:1px solid #ddd; border-radius:16px;}
.main > .module > .goods,
.main > .module > .image,
.main > .module > .html {padding:0 16px;}
.main > .module > .goods.full,
.main > .module > .image.full,
.main > .module > .html.full {padding:0;}
.main > .module > .goods.full > a.more,
.main > .module > .image.full > a.more {margin-left:16px; margin-right:16px;}

/* 상품 */
.main > .module > .goods.full h2,
.main > .module > .goods.full h3,
.main > .module > .goods.full .head {padding:0 16px;}
.main > .module > .goods > .category-tab {display:flex; align-items:center; margin-top:8px; overflow-x:auto;}
.main > .module > .goods > .category-tab::-webkit-scrollbar {display:none; width:0;}
.main > .module > .goods > .category-tab > a {position:relative; display:inline-block; line-height:16px; color:#888; white-space:nowrap;}
.main > .module > .goods > .category-tab > a + a {margin-left:8px;}
.main > .module > .goods > .category-tab > a.on {padding:7px 16px; font-weight:600; color:#fff; text-decoration:none; background-color:var(--cont-nm-color, #111); border-radius:999px;}
/* 비활성 카테고리 탭 아웃라인 필 (2026-08, pc.png/mo.png 시안 기준: 채워진 .on 필과 같은 크기의
   테두리만 있는 알약 형태). .on과 정렬이 어긋나지 않도록 padding/border-radius를 .on과 동일하게
   맞추고, 테두리만 추가한다(시안 실측 결과 테두리는 옅은 반투명 검정 1px). */
.main > .module > .goods > .category-tab > a:not(.on) {padding:7px 16px; border:1px solid rgba(17, 17, 17, 0.2); border-radius:999px;}
.main > .module > .goods > .list {margin-top:4px;}
.main > .module > .goods > .list.swiper-container {margin-top:12px !important;}
.main > .module > .goods > .list.swiper-container > ul {height:auto !important; flex-wrap:unset !important;}
.main > .module > .goods > .list.swiper-container > ul > li {width:200px !important; margin-top:0 !important; margin-left:0 !important; margin-right:16px !important;}
.main > .module > .goods > .list.swiper-container > ul > li:last-child {margin-right:0 !important;}
.main > .module > .goods > .list.swiper-container > ul > li > a > .img {height:calc(200px * var(--prdt_img_rate)) !important;}
.main > .module > .goods > .list.category {display:none;}
.main > .module > .goods > .list.category.on {display:block;}

/* 이미지 */
.main > .module > .image > img,
.main > .module > .image > * > img {display:block; max-width:100%; margin:0 auto;}
.main > .module > .image > h2 ~ img,
.main > .module > .image > h3 ~ img,
.main > .module > .image > .head ~ img,
.main > .module > .image > h2 ~ * > img,
.main > .module > .image > h3 ~ * > img,
.main > .module > .image > .head ~ * > img,
.main > .module > .image > h2 + div.list,
.main > .module > .image > h3 + div.list,
.main > .module > .image > .head + div.list {margin-top:12px;}
.main > .module > .image > div > ul > li {position:relative; text-align:center; overflow:hidden;}
.main > .module > .image > div > ul > li > a {display:block;}
.main > .module > .image > div > ul > li > div {position:absolute; left:16px; bottom:32px; text-align:left;}
.main > .module > .image > div > ul > li > div > strong {display:block; font-size:22px; line-height:24px; color:#fff;}
.main > .module > .image > div > ul > li > div > span {display:block; margin-top:8px; font-size:15px; color:#fff;}
.main > .module > .image > div > ul > li > img,
.main > .module > .image > div > ul > li > * > img {display:block; width:100%;}
.main > .module > .image > div > .swiper-pagination > a {margin:0; margin-right:4px; font-size:0; line-height:0;}
.main > .module > .image > div > .swiper-pagination > a:last-child {margin-right:0;}
.main > .module > .image > div > .swiper-pagination > a.swiper-pagination-bullet-active {background-color:#333;}
.main > .module > .image > div > .swiper-notification {display:none; left:auto; right:0; top:unset; bottom:0; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(0, 0, 0, 0.2); z-index:10;}
.main > .module > .image + .goods.item {margin-top:16px;}

.main > .module > .image.full > div > .swiper-pagination {display:none;}
.main > .module > .image.full > div > .swiper-notification {display:inline-block;}
.main > .module > .image.full + .image.full {margin-top:0;}

/* 팝업 */
.main > .popup {display:none; position:fixed; left:0; top:0; width:100%; min-width:320px; height:100%; text-align:center; color:#333; font-weight:bold; background-color:#333; background-color:rgba(0, 0, 0, 0.5); z-index:999; box-sizing:border-box;}
.main > .popup.on {display:block;}
.main > .popup > .swiper-container {position:absolute; left:0; bottom:0; width:100%; background-color:#fff; background-color:rgba(255, 255, 255, 0.95); border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide {position:relative; padding:0; text-align:left; font-weight:normal; box-sizing:border-box;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image {width:100%; min-height:30vh; max-height:calc(100vh - 57px - 42px - 47px); border-style:none; overflow-y:auto; box-sizing:border-box; border-radius:8px 8px 0 0;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .image > a > img {display:block; max-width:100%; margin:0 auto;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today {padding:16px 20px; line-height:15px; text-align:right; background-color:#fff;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .today > a {display:inline-block; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-wrapper > .swiper-slide > .close {display:inline-block; position:absolute; left:20px; bottom:16px; font-size:13px; line-height:15px; color:#111;}
.main > .popup > .swiper-container > .swiper-notification {display:inline-block; left:auto; right:16px; top:16px; padding:0 11px; line-height:25px; opacity:1; text-align:right; color:#fff; font-size:11px; font-weight:500; letter-spacing:2px; background-color:#333; background-color:rgba(255, 255, 255, 0.2); border-radius:12.5px; z-index:1000;}

/* 미리보기 */
.preview .main > .module > * {margin-top:16px !important;}
.preview .main > .module > .image.full {margin-top:0 !important;}

/** PC */
@media all and (min-width:760px) {
	.transparency .header > .navigation {position:static !important;}
	.transparency .header > .navigation > em {display:none;}
	.transparency .fixed .header > .navigation {position:fixed !important;}
	
	.main > .module > div + div,
	.main > .module > div + * + div {margin-top:56px;}
	.main > .module > div > h2 {font-size:26px; line-height:38px;}
	.main > .module > div > h3 {font-size:16px; line-height:28px;}
	.main > .module > div > .head {font-size:13px; line-height:16px;}
	.main > .module > div > a.more {position:absolute; right:0; top:0; height:38px; padding-right:12px; margin-top:0; font-size:13px; line-height:38px; border-style:none; background:url(../images/icon-go-2.png) no-repeat right center; background-size:auto 13px;}
	.main > .module > div > a.more.full {position:static; width:250px; margin:32px auto 0 auto !important; line-height:32px; border:1px solid #ddd; background-image:none; border-radius:16px;}
	/* a.more(더보기)를 노출제목(h2)과 세로중심 정렬 (2026-08-14, 실측 기반).
	   .head 유무에 따라 h2의 top이 달라지므로(head 없으면 0, 있으면 head높이16px + margin-top:4px = 20px,
	   PC 기준 head line-height:16px(129행)/head+h2 margin-top:4px(37행) 고정값 실측 확인) a.more의 top도
	   동일하게 분기한다. height/line-height는 h2 실측 높이(38px, font-size:26px/line-height:38px, 127행)와
	   동일하게 맞춰 텍스트가 h2와 같은 세로 중심에 오게 한다. */
	.main > .module > div:has(> .head) > a.more {top:20px;}
	.main > .module > .goods,
	.main > .module > .image,
	.main > .module > .html {width:1180px; padding:0; margin-left:auto; margin-right:auto;}
	.main > .module > .image.full {width:100%;}
	.main > .module > .goods:has(.list.keyword) {width:100%; padding:0 calc((100% - 1180px) / 2); box-sizing:border-box;}
	.main > .module > .goods.full > a.more,
	.main > .module > .image.full > a.more {margin-left:0; margin-right:0;}
	
	.main > .module > .goods.full h2,
	.main > .module > .goods.full h3,
	.main > .module > .goods.full .head {padding:0;}
	.main > .module > .goods > .list.swiper-container > ul > li {width:300px !important;}
	.main > .module > .goods > .list.swiper-container > ul > li > a > .img {height:calc(300px * var(--prdt_img_rate)) !important;}
	.main > .module > .goods > .list.swiper-container > ul > li > a.adult > .img:after {background-size:50px;}
	
	.main > .module > .image.full > div > ul > li > div {left:32px;}
	.main > .module > .image.full > div > ul > li > div {left:calc((100% - 1180px) / 2);}
	
	.main > .module > .image > div > ul > li > div > strong {font-size:34px; line-height:46px;}
	.main > .module > .image > div > ul > li > div > span {margin-top:12px; font-size:18px; line-height:20px;}
	.main > .module > .image > div > .swiper-notification {right:calc((100% - 1180px) / 2); bottom:32px; border-radius:12.5px;}
	.main > .module > .image + .goods.item {margin-top:32px;}
	
	.main > .popup > .swiper-container {left:calc((100% - 500px) / 2); top:50%; bottom:auto; transform:translateY(-50%); width:500px; border-radius:5px;}
}

/* ===== skin02 신규 디자인 (2026-08 리뉴얼) ===== */

/* 히어로 (module 첫번째 = 04 슬라이드) */
.main > .module > div:first-child {position:relative; overflow:hidden; margin-top:0 !important; background-color:#111;}
.main > .module > div:first-child > .head {display:none;}
.main > .module > div:first-child > h2 {position:absolute; left:20px; bottom:74px; z-index:5; max-width:82%; margin:0; font-size:30px; font-weight:700; line-height:1.18; letter-spacing:-0.03em; color:#fff; text-shadow:0 6px 24px rgba(0, 0, 0, 0.35);}
.main > .module > div:first-child > h3 {position:absolute; left:20px; bottom:42px; z-index:5; max-width:78%; margin:0; font-size:12px; font-weight:400; line-height:18px; color:rgba(255, 255, 255, 0.9); text-shadow:0 2px 12px rgba(0, 0, 0, 0.3);}
.main > .module > div:first-child:after {content:''; position:absolute; left:0; right:0; bottom:0; height:60%; z-index:2; pointer-events:none;}
/* 슬라이드형(04) 모듈은 모듈 공통 h2/h3 대신 슬라이드별 li > div > strong/span 으로 캡션이 내려온다 */
.main > .module > div:first-child > .list.swiper-container > ul > li > div {left:20px !important; right:20px !important; bottom:42px !important; z-index:5;}
.main > .module > div:first-child > .list.swiper-container > ul > li > div > strong {font-size:34px !important; font-weight:700 !important; line-height:1.18 !important; letter-spacing:-0.03em; text-shadow:0 6px 24px rgba(0, 0, 0, 0.35);}
.main > .module > div:first-child > .list.swiper-container > ul > li > div > span {margin-top:14px !important; font-size:13px !important; font-weight:400; line-height:1.5 !important; color:rgba(255, 255, 255, 0.9); text-shadow:0 2px 12px rgba(0, 0, 0, 0.3);}
.main > .module > div:first-child > .list.swiper-container {position:relative; z-index:1; margin-top:0 !important; height:calc(100vh - 67px);}
#wrap:has(.header-banner) .main > .module > div:first-child > .list.swiper-container {height:calc(100vh - 42px - 67px);}
.main > .module > div:first-child > .list.swiper-container > ul > li {height:100% !important;}
.main > .module > div:first-child > .list.swiper-container > ul > li > img,
.main > .module > div:first-child > .list.swiper-container > ul > li > * > img {height:100%; object-fit:cover;}
/* 히어로 페이징: 디자인 파일(heroPager)과 동일하게 "현재 페이지 - 진행률 바 - 총 페이지" 형태로 표시 (2026-08-14) */
.main > .module > div:first-child > .list.swiper-container > .swiper-notification {display:none !important;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager {position:absolute; left:20px; right:20px; bottom:21px; transform:translateY(50%); z-index:6; display:flex; align-items:center; font-size:10px; color:#fff;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-track {order:1; display:flex; align-items:center; height:1px; background-color:rgba(255, 255, 255, 0.35);}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-track > .hero-pager-seg {display:block; height:1px; background-color:transparent; flex-shrink:0;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-track > .hero-pager-seg.on {background-color:#fff;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-current {order:2; margin-left:auto;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-current::after {content:'/'; margin:0 2px;}
.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-total {order:3;}

/* 인트로 텍스트 (03=이미지, 이미지 미등록) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) {box-sizing:border-box; padding:56px 16px !important; text-align:center; background-color:#f7f6f2;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > .head {display:block; font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > h2 {font-size:26px; font-weight:700; letter-spacing:-0.03em; line-height:1.3; color:#111;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > h3 {max-width:520px; margin-left:auto !important; margin-right:auto !important; font-size:13px; line-height:22px; color:#666;}
/* 이미지 없는 이미지모듈(URL 등록 시) "자세히 보기" 링크 (2026-08-14). 아래 HOT KEYWORD "자세히 보기"
   (.goods .list.keyword > .txt > .detail)와 시각적으로 동일한 스타일로 맞춘다. */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > .detail {display:inline-block; padding-bottom:4px; margin-top:16px; font-size:13px; font-weight:500; line-height:17px; color:#111; border-bottom:1px solid #111;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > .detail:after {content:'→'; margin-left:4px;}

/* 에디토리얼 카드 (03=이미지, 이미지 등록 2건)
   2026-08 후속 조정: .head/h2/h3를 개별 top/bottom 절대좌표로 따로 띄우던 방식을 버리고, 카드를
   flex 세로축(justify-content:flex-end)으로 만들어 마크업 순서(.head > h2 > h3) 그대로 하단에
   쌓이도록 재구성. 좌우/하단 여백은 각 텍스트가 아니라 카드 전체의 padding으로 일괄 관리한다.
   img/a>img는 flex 아이템이 되면 안 되므로(카드 전체를 덮는 배경 레이어 역할) position:absolute로
   빼서 flex 흐름에서 완전히 제외하고, 카드는 min-height로 높이를 고정해 이미지 종횡비에 따라
   카드 높이가 들쭉날쭉해지는 것을 방지한다(:has() 중첩 금지 규칙은 이 블록에서도 그대로 준수). */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) {position:relative; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; box-sizing:border-box; padding:0 20px 24px !important; margin-top:0 !important; min-height:320px; background-color:#eee;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > .head,
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h2,
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h3 {position:relative; z-index:3; margin:0;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > .head {padding:0; font-size:10px; font-weight:600; letter-spacing:0.14em; color:#fff; text-transform:uppercase; background-color:transparent;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > .head + h2 {margin-top:8px;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h2 {font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-0.02em; color:#fff; text-shadow:0 4px 16px rgba(0, 0, 0, 0.35);}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h2 + h3 {margin-top:6px;}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h3 {font-size:12px; line-height:18px; color:rgba(255, 255, 255, 0.85); text-shadow:0 2px 10px rgba(0, 0, 0, 0.3);}
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > img,
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > a > img {display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; margin:0; object-fit:cover;}

/* 에디토리얼 카드 연속 개수별 자동 레이아웃 (2026-08)
   규칙: 연속된 에디토리얼 카드가 짝수개면 처음부터 전부 50/50 페어, 홀수개면 첫 카드만 100% 단독 +
   나머지(짝수개)는 50/50 페어. 아래에서 기본값으로 모든 에디토리얼 카드를 반칸(span 1)으로 깔아두면
   짝수개 연속은 자동으로 두 개씩 짝지어 배치된다. 그 위에 "홀수 길이 연속 구간의 첫 카드"만 다시
   전체폭(1 / -1)으로 되돌리면, 남는 카드 수가 짝수가 되어 나머지가 정확히 50/50 페어로 맞아떨어진다.
   "홀수 길이 연속 구간의 첫 카드" 판별 방법:
     1) 바로 앞 형제가 에디토리얼 카드가 아니어야 함 (:not(같은선택자 + *)) → 연속 구간의 시작점
     2) 그 뒤로 이어지는 에디토리얼 카드가 정확히 0/2/4/6개(짝수) → 자신을 포함하면 총 1/3/5/7개(홀수)
   주의(중요): 2)를 구현할 때 "뒤에 N개가 있다"를 :has(+ 카드선택자 + 카드선택자 ...) 형태로 그대로
   체이닝하면 안 된다 — 카드선택자 자체가 :has(.swiper-container)/:has(img)를 포함하고 있어서, 그걸
   또 다른 :has() 안에 넣으면 "has() 안에 has() 중첩"이 되어 CSS 스펙상 무효 선택자가 되고 브라우저가
   해당 규칙 전체를 조용히 무시해버린다(개발 중 실제로 이 문제로 강제폭 규칙이 전혀 동작하지 않는 걸
   확인함). 그래서 :has() 내부에서 "뒤에 오는 형제가 진짜 에디토리얼 카드인지"를 판별할 때는 has()
   없이 ":not(:first-child)"(범용 마커) + 자식결합자 "> img" / "> a > img"(마지막 위치에서만 이미지
   존재를 확인)로 표현하고, 각 순번(1번째, 2번째, ...)마다 별도의 :has()를 나란히(중첩이 아니라 병렬로)
   붙여서 전부 AND로 만족되게 한다. */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) {grid-column:span 1;}

/* 뒤에 에디토리얼 카드가 0개 (자기 혼자 = 연속 1개) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(:has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img)) {grid-column:1 / -1;}

/* 뒤에 에디토리얼 카드가 정확히 2개 (연속 3개) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) {grid-column:1 / -1;}

/* 뒤에 에디토리얼 카드가 정확히 4개 (연속 5개) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) {grid-column:1 / -1;}

/* 뒤에 에디토리얼 카드가 정확히 6개 (연속 7개) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) {grid-column:1 / -1;}

/* 에디토리얼 카드 연속 구간의 "첫 줄"은 이전 모듈과의 정상 간격을 유지해야 함 (2026-08 후속 조정)
   - 위치1(RunStart, 연속 구간의 첫 카드)은 연속 길이가 홀수(혼자 한 줄)든 짝수(위치2와 페어)든 항상
     첫 줄이므로 연속 길이와 무관하게 무조건 정상 간격을 복원한다.
   - 위치2는 RunStart 바로 다음 카드다. RunStart 뒤로 정확히 1/3/5개(홀수개)가 더 이어질 때만
     (=자신을 포함한 총 연속 길이가 2/4/6, 즉 짝수일 때만) 위치1과 나란히 첫 줄을 이루므로 그 경우에만
     정상 간격을 복원한다. 연속 길이가 홀수(3/5/7)일 때의 위치2는 위치3과 짝을 이루는 "둘째 줄"이므로
     margin-top:0을 그대로 유지해야 한다.
   정상 간격 값은 위 24행(모바일 div+div 간격 32px)과 동일하게 맞춘다.
   단, RunStart가 인트로(이미지 없음) 모듈 바로 다음일 때는 위치2도 margin-top:0으로 맞춰
   좌우 카드 정렬을 유지한다(RunStart만 0이고 위치2가 정상 간격으로 복원되면 같은 그리드 행에서
   좌우 카드 높이가 어긋나던 버그, 2026-08-13 수정).
   RunStart가 비쥬얼(첫 모듈) 바로 다음일 때도 위치2를 동일하게 margin-top:0으로 맞춘다(2026-08-13). */
/* 위치1: RunStart (연속 길이 무관, 항상 첫 줄) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *) {margin-top:32px !important;}

/* 이미지 있는 카드 다음에 인트로(이미지 없음) 카드가 올 경우도 간격 제거 (반대 방향, 2026-08-13).
   반대 방향(이미지 없음 다음에 이미지 있음)은 바로 위 규칙에 :not() 조건을 추가해 처리했다. */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) + .image:not(:has(.swiper-container)):not(:has(img)) {margin-top:0;}

/* 비쥬얼(첫 모듈) 바로 다음에 인트로(이미지 없음) 카드가 올 경우도 상단 margin 제거 (2026-08-13) */
.main > .module > div:first-child + .image:not(:has(.swiper-container)):not(:has(img)) {margin-top:0;}

/* HOT KEYWORD 바로 다음에 인트로(이미지 없음) 카드가 올 경우도 상단 margin 제거 (2026-08-13).
   HOT KEYWORD는 배경색 밴드로 이미 100% 폭을 차지하는 모듈이고 인트로 카드도 항상 100%
   폭(.image.full)이므로, 두 100% 폭 모듈이 만나는 지점의 간격을 없앤다. */
.main > .module > .goods:has(.list.keyword) + .image:not(:has(.swiper-container)):not(:has(img)) {margin-top:0;}

/* HOT KEYWORD 바로 다음에 이미지 있는 에디토리얼 카드가 올 경우도 상단 margin 제거 (2026-08-19).
   RunStart 규칙(위 263/413행)에 HOT KEYWORD 인접 예외를 추가했으니, 여기서 실제 0 값을 확정한다. */
.main > .module > .goods:has(.list.keyword) + .image:not(:has(.swiper-container)):has(img) {margin-top:0;}

/* 위치2: RunStart 바로 다음 카드이며, RunStart 뒤로 정확히 1/3/5개(홀수)가 이어짐 = 총 연속 길이 2/4/6(짝수) */
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img),
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img),
.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img) {margin-top:32px !important;}

/* 슬라이드(04)/이미지(03) 제외 나머지 전 유형 - 카테고리(NEW ARRIVALS/HOT KEYWORD), 상품(스크롤형·리스트형),
   HTML - 제목헤더(.head)/h2 톤 통일 (2026-08). 기존에 NEW ARRIVALS/하단상품 2곳에 이미 쓰이던
   font-weight:700; letter-spacing:-0.02em; color:#111(h2) / letter-spacing:0.1em(.head)를 표준값으로 삼아
   HOT KEYWORD(기존 h2 font-weight만 있고 letter-spacing/color, .head 규칙 자체가 없었음)와
   HTML(h2 규칙이 아예 없어 33행 공통 기본값(600)에만 머물렀음)에도 동일하게 적용한다. */
.main > .module > .goods:has(.list.category) > .head,
.main > .module > .goods:has(.list.keyword) > .head,
.main > .module > .goods:not(:has(.category-tab)) > .head,
.main > .module > .html > .head {letter-spacing:0.1em; text-transform:uppercase;}
.main > .module > .goods:has(.list.category) > h2,
.main > .module > .goods:has(.list.keyword) > h2,
.main > .module > .goods:not(:has(.category-tab)) > h2,
.main > .module > .html > h2 {font-weight:700; letter-spacing:-0.02em; color:#111;}

/* 하단 미매핑 모듈 (01 상품 스크롤형/리스트형) 배경 */
.main > .module > .goods:not(:has(.category-tab)) {background-color:#fff;}

/* HOT KEYWORD는 항상 배경(색상 밴드) 스타일을 기본으로 한다 (2026-08 통합).
   전에는 "관리자가 배경색상(BG_COLOR)을 지정했는지"에 따라 [style*="background-color"] 속성
   셀렉터로 상하 padding/margin을 조건부로 갈랐으나(goods.css의 .img/.txt 톤·패딩도 동일한 이유로
   통합했다), 이제는 그 "배경 있음" 레이아웃 하나로 통일한다. 관리자가 색상을 지정하면 main.html의
   th:styleappend가 .goods에 style="background-color:...;" 인라인을 심어주고, 인라인 style은 항상
   외부 스타일시트보다 우선하므로 아래 기본값만 깔아두면 미지정 시엔 기본값이, 지정 시엔 인라인이
   자연스럽게 이긴다(속성 셀렉터 분기 불필요). */
.main > .module > .goods:has(.list.keyword) {background-color:#f7f6f2;}

/* HOT KEYWORD 바로 앞이 이미지형 모듈(에디토리얼 카드 등)일 때 두 모듈 사이 간격 제거 (2026-08).
   클래스 4개 이상 조합이라 24/31행의 기본 div+div 간격 규칙(클래스 2개)보다 특이도가 훨씬 높아
   모바일/PC 공통으로 한 번만 추가하면 항상 이긴다(값이 0이라 반응형 분기 불필요). */
.main > .module > .image + .goods:has(.list.keyword) {margin-top:0;}

/* HOT KEYWORD 상하 패딩(모바일) (2026-08, 2026-08-13 좌우 패딩 유지로 정정). 배경이 항상 있으므로
   조건 없이 적용한다. 좌우는 건드리지 않는다 - .goods는 .head/h2/h3/.category-tab의 공통 부모라
   여기서 좌우를 0으로 만들면 텍스트/탭까지 화면 끝에 붙어버리기 때문이다(원광님 요청으로 정정).
   좌우는 43행 공통 기본값(16px)을 그대로 받아 .head/h2/h3/.category-tab의 16px 인셋을 유지하고,
   .list.keyword 카드만 goods.css의 negative margin + width calc로 부모 패딩을 상쇄해 edge-to-edge
   처리한다("패딩 있는 부모 안에서 자식만 밖으로 빼기" 패턴). top/bottom만 별도 롱핸드로 쓰는 이유는
   padding:32px 0 같은 셔츠핸드를 쓰면 43행이 지정한 좌우 16px을 다시 덮어써 버리기 때문이다. */
.main > .module > .goods:has(.list.keyword) {padding-top:32px; padding-bottom:32px;}

/* HOT KEYWORD 카드 스타일 (goods.css에서 이동, 2026-08-14 — goods.css는 쇼핑몰 전반 상품목록 공용
   파일이라 메인페이지 전용 스타일은 이 파일에서 관리한다) */
.main > .module > .goods > .list.keyword {margin-top:16px;}
.goods .list.keyword {display:none;}
.goods .list.keyword.on {display:flex; flex-direction:column; padding:0;}
/* HOT KEYWORD 모바일 카드 이미지 padding. 카드가 다시 .goods 16px 패딩 안쪽에 인셋되므로
   edge-to-edge 전용으로 축소했던 40px을 원래 56px로 복원한다 (2026-08-13). */
.goods .list.keyword > .img {position:relative; width:100%; height:calc(100vw * var(--prdt_img_rate)); overflow:hidden; padding:56px; box-sizing:border-box; background-color:#e9e7e0;}
.goods .list.keyword > .img > img {position:absolute; left:56px; top:56px; width:calc(100% - 112px); height:calc(100% - 112px); object-fit:cover;}
.goods .list.keyword > .txt {padding:28px 32px; box-sizing:border-box; background-color:#fff;}
.goods .list.keyword > .txt > .icon {margin-bottom:8px;}
.goods .list.keyword > .txt > .icon > em {display:inline-block; padding:0 6px; margin-right:2px; font-style:normal; font-size:10px; font-weight:500; line-height:18px; letter-spacing:-0.5px; color:#000; background-color:#e4e2e0; border-radius:3px; vertical-align:middle;}
.goods .list.keyword > .txt > .icon > em.timesale {color:#e279b6; border:1px solid #f5bcde; background-color:#fff;}
.goods .list.keyword > .txt > h4 {font-size:18px; font-weight:600; line-height:24px; color:#111;}
.goods .list.keyword > .txt > p {margin-top:6px; font-size:13px; line-height:20px; color:#666;}
.goods .list.keyword > .txt > h4 + p {margin-top:6px;}
.goods .list.keyword > .txt > .detail {display:inline-block; padding-bottom:4px; margin-top:16px; font-size:13px; font-weight:500; line-height:17px; color:#111; border-bottom:1px solid #111;}
.goods .list.keyword > .txt > .detail:after {content:'→'; margin-left:4px;}

/* NEW ARRIVALS (contTpCd = 03) 카드 톤 (goods.css에서 이동, 2026-08-14) */
.goods .list.category > ul > li > a > .img {background-color:#f4f3ef;}
.goods .list.category > ul > li > a > .txt > strong {font-size:10px; font-weight:600; letter-spacing:0.08em; color:#999; text-transform:uppercase;}
.goods .list.category > ul > li > a > .txt > .price > strong {font-weight:600; color:#111;}
.goods .list.category > ul > li > a > .txt > .price > em {color:#e83a23;}
.goods .list.category > ul > li > a.wish.on {background-color:#e83a23;}

/** PC 톤 확장 (신규 디자인) */
@media all and (min-width:760px) {
	/* HOT KEYWORD 상하 패딩(PC 확대값). 위 모바일 규칙(padding-top/bottom:32px)과 선택자/특이도가
	   완전히 동일하므로 이 규칙이 소스 순서상 더 뒤에 와야만(첫번째 PC 미디어쿼리(121행)에 두면
	   모바일 규칙이 더 뒤에 있어 오히려 그쪽이 이겨버리는 걸 실제로 확인함) PC에서 56px로 이긴다.
	   좌우는 137행에서 이미 PC 전용으로 calc((100% - 1180px) / 2) 인셋을 지정하고 있어(2026-08-13
	   이후 모바일 쪽 규칙도 좌우를 건드리지 않으므로) 여기서 다시 복원할 필요는 없지만, 137행과
	   동일한 값을 명시적으로 한 번 더 선언해 이 블록만 보고도 PC 톤(상하 56px, 좌우 calc 인셋)을
	   한눈에 알 수 있게 둔다. */
	.main > .module > .goods:has(.list.keyword) {padding-top:56px; padding-bottom:56px; padding-left:calc((100% - 1180px) / 2); padding-right:calc((100% - 1180px) / 2);}
	
	/* HOT KEYWORD의 a.more(더보기)는 .goods 자체에 padding-top:56px(위 331행)이 별도로 있어 h2가
	   그만큼 더 아래로 밀린다(실측: .head 없으면 56px, .head 있으면 56 + 16(head 높이) + 4(head+h2
	   margin-top) = 76px). 일반 모듈용 137행 규칙(top:20px)보다 선택자 특이도가 높아 항상 우선 적용된다. */
	.main > .module > .goods:has(.list.keyword) > a.more {top:56px;}
	.main > .module > .goods:has(.list.keyword):has(> .head) > a.more {top:76px;}
	.main > .module > .goods:has(.list.keyword) > a.more {right:calc((100% - 1180px) / 2);}
	
	/* HOT KEYWORD 카드 PC 스타일 (goods.css에서 이동, 2026-08-14) */
	.goods .list.keyword.on {flex-direction:row; align-items:stretch;}
	/* PC 이미지 영역 확대 (2026-08, pc.png 대비 사진을 더 크게). 35% -> 40%로, 늘어난 만큼
	   텍스트 영역(flex:1)은 자동으로 좁아진다. */
	.goods .list.keyword > .img {width:40%; flex-shrink:0; aspect-ratio:1 / var(--prdt_img_rate); height:auto; padding:80px;}
	.goods .list.keyword > .img > img {left:80px; top:80px; width:calc(100% - 160px); height:calc(100% - 160px);}
	.goods .list.keyword > .txt {display:flex; flex-direction:column; justify-content:center; flex:1; margin-left:0; padding:0 64px;}
	.goods .list.keyword > .txt > h4 {font-size:24px; line-height:32px;}
	.goods .list.keyword > .txt > p {font-size:14px; line-height:22px;}
	.goods .list.keyword > .txt > .detail {align-self:flex-start; margin-top:20px;}
	
	/* 슬라이드(04)/이미지(03) 제외 나머지 전 유형 - 제목헤더(.head)/노출문구(h3) PC 톤 조정 (2026-08-14) */
	.main > .module > .goods:has(.list.category) > .head,
	.main > .module > .goods:has(.list.keyword) > .head,
	.main > .module > .goods:not(:has(.category-tab)) > .head,
	.main > .module > .html > .head {font-size:12px; font-weight:500; line-height:13px;}
	.main > .module > .goods:has(.list.category) > h3,
	.main > .module > .goods:has(.list.keyword) > h3,
	.main > .module > .goods:not(:has(.category-tab)) > h3,
	.main > .module > .html > h3 {font-size:14px;}
	.main > .module > .goods:has(.list.category) > h2 + h3,
	.main > .module > .goods:has(.list.keyword) > h2 + h3,
	.main > .module > .goods:not(:has(.category-tab)) > h2 + h3,
	.main > .module > .html > h2 + h3 {margin-top:0;}
	
	.main > .module > div:first-child > .head {display:none;}
	.main > .module > div:first-child > h2 {left:5vw; bottom:120px; max-width:760px; font-size:clamp(44px, 4.2vw, 72px);}
	.main > .module > div:first-child > h3 {left:5vw; bottom:70px; max-width:480px; font-size:15px; line-height:24px;}
	.main > .module > div:first-child > .list.swiper-container > .hero-pager {left:5vw; right:5vw; bottom:clamp(20px, 5vw, 72px); transform:translateY(0%);}
	.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-track,
	.main > .module > div:first-child > .list.swiper-container > .hero-pager > .hero-pager-track > .hero-pager-seg {height:2px;}
	.main > .module > div:first-child > .list.swiper-container {height:100vh;}
	#wrap:has(.header-banner) .main > .module > div:first-child > .list.swiper-container {height:calc(100vh - 42px);}
	.main > .module > div:first-child > .list.swiper-container > ul > li > div {left:5vw !important; right:auto !important; bottom:120px !important;}
	.main > .module > div:first-child > .list.swiper-container > ul > li > div > strong {max-width:760px; font-size:clamp(44px, 4.2vw, 72px) !important; line-height:1.1 !important;}
	.main > .module > div:first-child > .list.swiper-container > ul > li > div > span {max-width:480px; margin-top:20px !important; font-size:15px !important; line-height:24px !important;}
	
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) {padding:120px 5vw !important;}
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > h2 {font-size:46px;}
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) > .detail {margin-top:20px;}
	
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) {width:100%; min-height:520px; margin-left:0; margin-right:0; padding-left:5% !important; padding-right:5% !important;}
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h2 {font-size:38px;}
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img) > h3 {font-size:13px;}
	
	/* 에디토리얼 카드 연속 구간의 "첫 줄"(위치1=RunStart, 위치2=짝수 길이 런일 때만) 정상 간격 복원 (PC).
	   판별 로직은 상단(모바일) 동일 규칙 참고. PC 정상 간격 값은 122행(div + div PC 56px)과 동일하게 맞춘다. */
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *) {margin-top:56px !important;}
	
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img),
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img),
	.main > .module > .image:not(:first-child):not(:has(.swiper-container)):has(img):not(.image:not(:first-child):not(:has(.swiper-container)):has(img) + *):not(.image:not(:first-child):not(:has(.swiper-container)):not(:has(img)) + *):not(div:first-child + *):not(.goods:has(.list.keyword) + *):has(+ .image:not(:first-child) > img, + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img):not(:has(+ .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > img, + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) + .image:not(:first-child) > a > img)) + .image:not(:first-child):not(:has(.swiper-container)):has(img) {margin-top:56px !important;}
}