/* 위젯 공용 — 슬라이드 앞뒤 화살표(표시/바탕) 규칙 */ [data-arrow="off"] .prev, [data-arrow="off"] .next {display:none !important;} [data-arrow="hover"] .prev, [data-arrow="hover"] .next {opacity:0; pointer-events:none; transition:opacity .2s ease;} [data-arrow="hover"]:hover .prev, [data-arrow="hover"]:hover .next {opacity:1; pointer-events:auto;} [data-arrow-bg="on"] .prev, [data-arrow-bg="on"] .next {background-color:#fff !important; box-shadow:1px 2px 2px rgba(0,0,0,0.2) !important;} [data-arrow-bg="off"] .prev, [data-arrow-bg="off"] .next {background-color:transparent !important; border-color:transparent !important; box-shadow:none !important;} /* 단일 메인 비주얼 배너 (full_main_visual_banner) 배너 한 장이 가로 100% */ .full-main-visual {position:relative; width:100%;} .full-main-visual .fmv-slider {position:relative; width:100%;} .full-main-visual .swiper-container {position:relative; width:100%;} .full-main-visual ul.swiper-wrapper {height:auto; margin:0; padding:0; font-size:0; list-style:none;} .full-main-visual ul.swiper-wrapper > li.swiper-slide {width:100%; height:var(--fmv-h, auto); margin:0; padding:0; background-color:#fff;} .full-main-visual ul.swiper-wrapper > li.swiper-slide > a {display:block; width:100%; height:100%;} /* 높이를 지정하면 잘라 채우고(cover), 미지정이면 원본 비율 그대로 */ .full-main-visual ul.swiper-wrapper > li.swiper-slide img {display:block; width:100%; height:var(--fmv-h, auto); object-fit:cover; border:0;} /* 초기화 전 첫 배너만 — Swiper 로드 전 세로로 쌓였다 접히는 튐 방지 */ .full-main-visual .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.swiper-slide:not(:first-child) {display:none;} /* 페이지 표시(점) — 배너 안쪽 아래 ── */ .full-main-visual .pager {position:absolute; z-index:5; left:0; right:0; bottom:var(--fmv-dot-bottom, 30px); width:100%; text-align:center; line-height:0;} .full-main-visual .pager .swiper-pagination-bullet {width:9px; height:9px; margin:0 5px; opacity:1; background:rgba(0,0,0,0.22); transition:background .2s, width .2s;} .full-main-visual .pager .swiper-pagination-bullet-active {background:rgba(0,0,0,0.65);} /* 어두운 배너용 밝은 점 */ .full-main-visual.dot-light .pager .swiper-pagination-bullet {background:rgba(255,255,255,0.45);} .full-main-visual.dot-light .pager .swiper-pagination-bullet-active {background:rgba(255,255,255,0.95);} /* 좌우 화살표(선택) — 정본 패턴(흰 원 + 그림자 + 동일 셰브론) ── */ .full-main-visual .prev, .full-main-visual .next { position:absolute; z-index:5; top:50%; margin-top:-24px; width:48px; height:48px; border-radius:var(--arrow-radius, 100%); background-color:rgba(255,255,255,0.9); background-repeat:no-repeat; background-size:10px 20px; box-shadow:1px 2px 2px rgba(0,0,0,0.2); text-indent:-9999px; outline:none; cursor:pointer; } .full-main-visual .prev {left:30px; right:auto; background-position:18px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .full-main-visual .next {left:auto; right:30px; background-position:20px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .full-main-visual .prev:hover, .full-main-visual .next:hover {background-color:rgba(255,255,255,1);} /* 히어로 캡션(문구 + 버튼) 배너 이미지에는 링크를 걸지 않는다(화면을 꽉 채우는 비주얼이라 아무 데나 눌리면… */ .full-main-visual .swiper-slide {position:relative;} .full-main-visual .fmv-img {display:block; width:100%;} /* 버튼 없는 배너의 이미지 링크 — 인라인이면 baseline 여백이 생겨 이미지 아래 띠가 깔린다 */ .full-main-visual .fmv-link {display:block; width:100%; line-height:0;} .full-main-visual .fmv-caption { position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:flex-start; /* center → flex-start: 박스를 왼쪽으로 */ pointer-events:none; padding:0 20px; text-align:left; /* center → left: 글자도 왼쪽 정렬 */ } .full-main-visual .fmv-caption-inner { max-width:var(--fmv-caption-max, 900px); margin-left:calc((100% - 1000px) / 2); /* LNB 컨테이너(보통 1200px) 시작선에 맞춤 */ } .full-main-visual .fmv-t1, .full-main-visual .fmv-t2, .full-main-visual .fmv-t3 {margin:0 0 10px; color:var(--fmv-text, #111); line-height:1.35; word-break:keep-all;} .full-main-visual .fmv-t1 {font-size:var(--fmv-t1-size, 2.6rem); font-weight:700;} .full-main-visual .fmv-t2 {font-size:var(--fmv-t2-size, 1.5rem); font-weight:500;} .full-main-visual .fmv-t3 {font-size:var(--fmv-t3-size, 1.05rem); font-weight:400;} .full-main-visual .fmv-t3:last-child {margin-bottom:0;} .full-main-visual .fmv-btn { pointer-events:auto; /* 캡션은 통과시키고 버튼만 클릭을 받는다 */ display:inline-block; margin-top:18px; padding:13px 34px; border:1px solid var(--fmv-btn-border, #111); border-radius:var(--fmv-btn-radius, 999px); background:var(--fmv-btn-bg, transparent); color:var(--fmv-btn-color, #111); font-size:1rem; line-height:1.2; text-decoration:none; cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; } .full-main-visual .fmv-btn:hover {background:var(--fmv-btn-hover-bg, #111); color:var(--fmv-btn-hover-color, #fff);} /* 링크가 없는 버튼(글자만 넣고 URL 을 비운 경우) — 눌리는 것처럼 보이지 않게 */ .full-main-visual span.fmv-btn {cursor:default; pointer-events:none;} /* 페이드는 슬라이드를 한자리에 겹쳐 두므로, 버튼의 pointer-events:auto 가 투명한 다른 슬라이드 버튼까지 살려 맨 위(마지막) 슬라이드 링크만 눌린다: 활성 슬라이드 버튼만 받게 한다 */ .full-main-visual .swiper-container-fade .swiper-slide:not(.swiper-slide-active) .fmv-btn {pointer-events:none;} /* 어두운 배너(dark) = 흰 글자 */ .full-main-visual .swiper-slide[data-text-tone="dark"] .fmv-caption { --fmv-text:#fff; --fmv-btn-border:#fff; --fmv-btn-color:#fff; --fmv-btn-hover-bg:#fff; --fmv-btn-hover-color:#111; } @media (max-width:768px) { .full-main-visual .fmv-t1 {font-size:1.6rem;} .full-main-visual .fmv-t2 {font-size:1.1rem;} .full-main-visual .fmv-t3 {font-size:0.95rem;} .full-main-visual .fmv-btn {margin-top:12px; padding:10px 24px; font-size:0.95rem;} } .horizontal-design-banner {} .horizontal-design-banner a, .horizontal-design-banner .banner-nolink {float:left; display:block;} .horizontal-design-banner a:first-child, .horizontal-design-banner .banner-nolink:first-child {position:relative; z-index:1; margin-right:-1px; border-right:1px solid #eaeaea;} .horizontal-design-banner a img, .horizontal-design-banner .banner-nolink img {display:block; width:600px; height:auto;} /* 배너 모서리 (위젯 설정 배너 모서리 라운드) — 폴백 0 = 지금 디자인 */ .horizontal-design-banner a, .horizontal-design-banner .banner-nolink {border-radius:var(--mvab-radius, 0); overflow:hidden;} /* 위젯 공용 — Swiper 안에서 위로 뜨는 호버 효과가 잘리는 것을 막는다 */ .wfx-lift .swiper-container { padding:var(--wfx-lift, 16px) var(--wfx-lift-x, var(--wfx-lift, 16px)); margin:calc(var(--wfx-lift, 16px) * -1) calc(var(--wfx-lift-x, var(--wfx-lift, 16px)) * -1); } /* 타일 아이콘 배너 (icon_tile_banner) 라운드 사각 타일 + 아이콘, 그 아래 배너 제목 */ .icon-tile-banner {position:relative; width:100%;} .icon-tile-banner .itb-inner { box-sizing:border-box; max-width:var(--itb-body, 1200px); margin:0 auto; --itb-slide-w:calc((100% - (var(--itb-gap, 20px) * (var(--itb-per, 9) - 1))) / var(--itb-per, 9)); } /* wfx-lift-x = 호버 그림자가 잘리지 않게 .swiper-container 에 주는 좌우… */ .icon-tile-banner .itb-slider {position:relative; --wfx-lift-x:min(16px, var(--itb-gap, 20px));} /* 타이틀/간략설명 타이포는 다른 배너 위젯(.icon-banner .main-title)과 동일 */ .icon-tile-banner .main-title {display:flex; margin-bottom:1rem;} .icon-tile-banner .main-title.title-left {justify-content:flex-start;} .icon-tile-banner .main-title.title-right {justify-content:flex-end;} .icon-tile-banner .main-title.title-center {justify-content:center;} .icon-tile-banner .main-title.title-left .title-group {text-align:left;} .icon-tile-banner .main-title.title-right .title-group {text-align:right;} .icon-tile-banner .main-title.title-center .title-group {text-align:center;} .icon-tile-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .icon-tile-banner .main-title h3 span {color:var(--point-color);} .icon-tile-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 한 칸 ── */ .icon-tile-banner ul.swiper-wrapper {margin:0; padding:0; list-style:none;} .icon-tile-banner li.itb-item {height:auto; margin:0; padding:0;} .icon-tile-banner li.itb-item > a, .icon-tile-banner li.itb-item > .banner-nolink {display:block; text-decoration:none; color:inherit;} /* 타일 — 정사각 */ .icon-tile-banner .itb-box { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1; overflow:hidden; background-color:#f5f5f5; border-radius:var(--itb-radius, 24px); transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* 아이콘 — 크기 미지정이면 타일의 절반(칸이 커져도 비율이 유지된다) */ .icon-tile-banner .itb-box img { display:block; width:var(--itb-icon, 50%); height:var(--itb-icon, 50%); object-fit:var(--itb-fit, contain); border:0; transition:transform .2s ease; } .icon-tile-banner .itb-label { display:block; margin-top:10px; text-align:center; font-size:0.875rem; line-height:1.35; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .2s ease; } /* 마우스오버 효과 (위젯 설정 마우스오버 효과 = value3) itb-fx-none 은 아무 규칙도 안 붙는다 */ .icon-tile-banner .itb-fx-lift li.itb-item > a:hover .itb-box { background-color:#fff; box-shadow:0 6px 18px rgba(0, 0, 0, 0.10); transform:translateY(-3px); } .icon-tile-banner .itb-fx-zoom li.itb-item > a:hover .itb-box img {transform:scale(1.14);} .icon-tile-banner .itb-fx-lift li.itb-item > a:hover .itb-label, .icon-tile-banner .itb-fx-zoom li.itb-item > a:hover .itb-label {color:#111;} /* 초기화 전 폭 선점 Swiper 최종폭과 같은 값을 미리 깔아 로딩 튐 제거 */ .icon-tile-banner .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.itb-item { box-sizing:border-box; flex:0 0 auto; width:var(--itb-slide-w); margin-right:var(--itb-gap, 20px); } .icon-tile-banner .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.itb-item:last-child {margin-right:0;} /* 배너가 한 줄 개수보다 적으면 가운데로 모은다(왼쪽에 몰려 허전해 보이지 않게) */ .icon-tile-banner .itb-slider.is-static .swiper-wrapper {justify-content:center;} /* 좌우 화살표 정본 화살표(.normal-slide .prev/.next, initialize.css)와 같은… */ .icon-tile-banner .itb-slider .prev, .icon-tile-banner .itb-slider .next { position:absolute; z-index:2; top:50%; transform:translateY(calc(-50% - 14px)); margin:0; padding:10px; width:40px; height:40px; border-radius:var(--arrow-radius, 100%); background-repeat:no-repeat; background-size:10px 20px; background-color:rgba(255, 255, 255, 0.9); box-shadow:1px 2px 2px rgba(0, 0, 0, 0.2); text-indent:-9999px; outline:none; cursor:pointer; } .icon-tile-banner .itb-slider .prev {left:-14px; background-position:14px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .icon-tile-banner .itb-slider .next {right:-14px; background-position:16px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .icon-tile-banner .itb-slider .prev:hover, .icon-tile-banner .itb-slider .next:hover {background-color:#fff;} /* 모션 최소화 선호 사용자 — 호버 효과 전환을 끈다 */ @media (prefers-reduced-motion: reduce) { .icon-tile-banner .itb-box, .icon-tile-banner .itb-box img, .icon-tile-banner .itb-label {transition:none;} } /* 뱃지: 슬라이드 영역이 잘리지 않게 윗 여백을 확보한다 */ .zw-icon_tile_banner .itb-slider.has-badge .itb-item {position:relative; padding-top:30px;} .zw-icon_tile_banner .itb-badge {position:absolute; top:0; left:50%; z-index:2; padding:3px 12px; border-radius:6px; background:var(--point-color); font-size:0.75rem; font-weight:800; color:#fff; white-space:nowrap; transform:translateX(-50%);} .zw-icon_tile_banner .itb-badge:after {content:''; position:absolute; left:50%; bottom:-5px; margin-left:-5px; border:5px solid transparent; border-bottom:0; border-top-color:var(--point-color);} /* 소개 사이드 상품목록 (intro_side_product) 위젯이 인라인 style 로 넘기는 변수… */ .intro-side-product {} /* 타이틀 — 다른 상품목록 위젯과 같은 규칙 */ .intro-side-product .main-title {display:flex;} .intro-side-product .main-title.title-left {justify-content:flex-start;} .intro-side-product .main-title.title-right {justify-content:flex-end;} .intro-side-product .main-title.title-center {justify-content:center;} .intro-side-product .main-title.title-left .title-group {text-align:left;} .intro-side-product .main-title.title-right .title-group {text-align:right;} .intro-side-product .main-title.title-center .title-group {text-align:center;} .intro-side-product .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .intro-side-product .main-title h3 span {color:var(--point-color, #32c0b6);} .intro-side-product .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 좌우 배치 ── 왼쪽은 고정폭, 오른쪽이 남는 폭을 전부 쓴다 */ .intro-side-product .isp-wrap {display:flex; align-items:stretch; gap:30px; margin-top:20px;} .intro-side-product .isp-wrap[data-side="right"] {flex-direction:row-reverse;} .intro-side-product .isp-aside { flex:0 0 var(--isp-side, 200px); width:var(--isp-side, 200px); min-width:0; display:flex; flex-direction:column; } /* 소개 제목 — 굵고 크게 */ .intro-side-product .isp-name {display:block; font-size:1.25rem; font-weight:700; line-height:1.35; color:var(--point-color, #32c0b6); word-break:keep-all;} .intro-side-product .isp-name a {color:inherit; text-decoration:none;} .intro-side-product .isp-name a:hover {text-decoration:underline;} .intro-side-product .isp-desc {margin:12px 0 0; font-size:0.9375rem; line-height:1.6; color:#666; word-break:keep-all; white-space:pre-line;} /* 인기키워드 — 아래쪽에 붙인다(소개글과 상품 격자 높이가 달라도 바닥 정렬) */ .intro-side-product .isp-keys {margin-top:auto; padding-top:28px;} .intro-side-product .isp-keys-title {display:block; margin-bottom:10px; font-size:0.875rem; font-weight:700; color:#333;} .intro-side-product .isp-key { display:block; margin-top:6px; padding:7px 12px; border:1px solid #e5e7eb; border-radius:var(--isp-key-radius, 999px); font-size:0.875rem; color:#555; text-decoration:none; background:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .15s, color .15s; } .intro-side-product .isp-key:hover {border-color:var(--point-color, #32c0b6); color:var(--point-color, #32c0b6);} .intro-side-product .isp-goods {flex:1 1 auto; min-width:0;} .intro-side-product .isp-goods .product.list.thumb {margin:0;} /* 첫 줄 위 여백 상쇄 — 테마 상품카드는 줄 간격을 li.item 의 margin-top(전 테마… */ /* ※ 선택자에 .product.list.thumb 를 반드시 끼운다 — 테마의… */ .intro-side-product .isp-goods .product.list.thumb ul.grid {margin-top:calc(-1 * var(--isp-row-gap, 20px));} /* 상품 썸네일 모서리 (위젯 설정) 공용 상품카드 파셜을 여러 위젯이 공유한다 */ /* 라운드는 실제로 잘라내는 상자에 건다. a.link 가 칸을 채우지 않는 화면에서는 .thumbnail 이 자르므로 여기에도 같은 값을 준다. */ .zw-intro_side_product ul.grid > li.item .thumbnail {overflow:hidden; border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} .zw-intro_side_product ul.grid > li.item .thumbnail a.link {border-radius:var(--card-thumb-radius, var(--product-thumb-radius, 0));} /* 위젯설정 > 테마변수 > 직각 */ /* 전체 박스 모서리 (위젯 설정) 외곽선·배경은 관리자 박스디자인 이 인라인으로 넣는다 */ .intro-side-product.isp-boxed {border-radius:var(--isp-box-radius, 0); overflow:hidden;} /* 모바일 — 위아래로 쌓고 상품은 2열 ── */ @media (max-width:767px) { .intro-side-product .isp-wrap, .intro-side-product .isp-wrap[data-side="right"] {display:block;} .intro-side-product .isp-aside {width:100%; flex:none; margin-bottom:18px;} .intro-side-product .isp-keys {margin-top:14px; padding-top:0;} /* 좁은 화면에선 키워드를 가로로 흘려 담는다(세로로 길어지는 것 방지) */ .intro-side-product .isp-keys {display:flex; flex-wrap:wrap; gap:6px; align-items:center;} .intro-side-product .isp-keys-title {width:100%; margin-bottom:4px;} .intro-side-product .isp-key {display:inline-block; margin-top:0;} .intro-side-product .isp-goods .product.list.thumb ul.grid > li.item {width:50%;} } /* 위젯 공용 — 상품이 없을 때 위젯이 납작해지지 않게 자리를 지킨다 */ /* 카드 한 줄 높이. 기본 테마 실측(PC 298px · 모바일 257px)에서 조금 낮춰 최소값으로 쓴다. */ :root {--zw-empty-slot-h:300px;} @media (max-width:768px) {:root {--zw-empty-slot-h:260px;}} /* 상품이 하나도 없어 목록을 아예 안 그릴 때 스킨이 대신 넣는 빈 상자 */ .zw-empty-slot {min-height:var(--zw-empty-slot-h);} /* 목록 상자는 그렸는데 안이 빈 경우. 탭 하나만 0건이거나 비동기로 채우기 전이다. */ /* :empty 는 태그 사이 줄바꿈까지 내용으로 세어 안 맞는다. 자식 요소 유무로 본다. */ [id^="widget-"] .product.list ul.grid:not(:has(> *)), [id^="widget-"] .product.list .swiper-wrapper:not(:has(> *)), [id^="widget-"] .mosaic-grid:not(:has(> *)), [id^="widget-"] ul.bp-items:not(:has(> *)) {min-height:var(--zw-empty-slot-h);} /* 일반 배너 (normal_banner) 배너그룹 이미지를 CSS Grid 격자로 나열 */ /* 타이틀/간략설명 타이포는 스페셜 배너(.special-design-banner .main-title)와… */ .normal-banner .main-title {display:flex; margin-bottom:1rem;} .normal-banner .main-title.title-left {justify-content:flex-start;} .normal-banner .main-title.title-right {justify-content:flex-end;} .normal-banner .main-title.title-center {justify-content:center;} .normal-banner .main-title.title-left .title-group {text-align:left;} .normal-banner .main-title.title-right .title-group {text-align:right;} .normal-banner .main-title.title-center .title-group {text-align:center;} .normal-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .normal-banner .main-title h3 span {color:var(--point-color);} .normal-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 격자 ── */ .normal-banner .nb-grid { display:grid; grid-template-columns:repeat(var(--nb-cols, 4), 1fr); column-gap:var(--nb-col-gap, 20px); row-gap:var(--nb-row-gap, 20px); } /* 히어로 — 명시 배치 */ .normal-banner .nb-grid .nb-hero { grid-column:var(--nb-hero-col, 1) / span var(--nb-hero-cols, 1); grid-row:1 / span var(--nb-hero-rows, 2); } /* 한 칸 = 통이미지 ── */ .normal-banner .nb-item {display:block; text-decoration:none; border-radius:var(--nb-radius, 0); overflow:hidden;} .normal-banner .nb-item img {display:block; width:100%; height:auto; border:0; border-radius:var(--nb-radius, 0);} /* 비율을 지정하면 이미지 로드 전에도 칸 높이가 잡힌다 */ .normal-banner .nb-grid[style*="--nb-ratio"] .nb-item img {height:100%; aspect-ratio:var(--nb-ratio); object-fit:contain;} /* 히어로는 여러 줄을 차지하므로 칸 높이에 맞춰 늘어난다(비율 지정 여부와 무관). */ .normal-banner .nb-grid .nb-hero {display:block;} .normal-banner .nb-grid .nb-hero img {width:100%; height:100%; object-fit:contain; aspect-ratio:auto;} /* 위젯 공용 — 상품 슬라이드 초기화 전 레이아웃 */ .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper { margin-left: 0 !important; /* 정본 ul.grid 의 -2rem 거터 제거(= .normal-slide.on 과 동일) */ } .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.item { flex-shrink: 0; padding-left: 0 !important; /* 정본 li 의 2rem 거터 제거(= .normal-slide.on 과 동일) */ width: calc((100% - (var(--slide-gap, 0px) * (var(--slide-spv, 4) - 1))) / var(--slide-spv, 4)) !important; /* !important 필수 — 정본 `.product.list.thumb ul.grid li.item… */ margin-right: var(--slide-gap, 0px) !important; } .normal-slide .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.item:last-child { margin-right: 0 !important; } .normal-slide {} .normal-slide:after {content: ''; display:block; clear:both; height:1px;} /* 초기화 전 레이아웃(FOUC) 규칙은 _shared/assets/css/slide_preinit.css 로… */ .normal-slide .main-title {display:flex;} .normal-slide .main-title.title-left {justify-content:flex-start;} .normal-slide .main-title.title-right {justify-content:flex-end;} .normal-slide .main-title.title-center {justify-content:center;} .normal-slide .main-title.title-left .title-group {text-align:left;} .normal-slide .main-title.title-right .title-group {text-align:right;} .normal-slide .main-title.title-center .title-group {text-align:center;} .normal-slide .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .normal-slide .main-title h3 span {color:var(--point-color);} .normal-slide .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .normal-slide .pager span.swiper-pagination-bullet-active {background:var(--point-color,#000);} .normal-slide .prev { position:absolute; z-index:1; top:50%; left:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:var(--arrow-radius, 100%); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 14px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .next { position:absolute; z-index:1; top:50%; right:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 16px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .normal-slide .prev:hover, .normal-slide .next:hover {background-color:rgba(255,255,255,1.0);} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-slider_product ul.grid > li.item .thumbnail a.link… */ /* 집중 슬라이드 배너 (focus_slide_banner) 배경 띠는 가로… */ /* 배경색은 관리자 디자인박스(배경색)가 인라인 style 로 덮어쓴다 — 여기 값은 기본 톤. */ .focus-slide-banner {position:relative; width:100%; padding:40px 0; background-color:#f5f5f7;} .focus-slide-banner .fsb-inner {display:flex; align-items:center;} /* 왼쪽: 타이틀 + 설명 + 앞뒤 버튼 ── */ .focus-slide-banner .fsb-head {flex:0 0 auto; box-sizing:border-box; width:var(--fsb-head, 260px); padding-right:30px;} /* 타이틀/간략설명 타이포는 스페셜 배너(.special-design-banner .main-title)와… */ .focus-slide-banner .fsb-title {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .focus-slide-banner .fsb-title span {display:block; color:var(--point-color);} .focus-slide-banner .fsb-desc {margin:12px 0 0; padding:0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .focus-slide-banner .fsb-nav {position:relative; display:flex; gap:12px; margin-top:26px;} /* 오른쪽: 카드 슬라이드 ── */ .focus-slide-banner .fsb-body {flex:1 1 auto; min-width:0;} .focus-slide-banner .fsb-body .swiper-container {width:100%;} .focus-slide-banner ul.fsb-list {height:auto; margin:0; padding:0; font-size:0; list-style:none;} /* 초기화 전 폭 선점: swiper 가 계산할 최종 폭과 같은 값을 미리 깔아 로딩 튐을… */ .focus-slide-banner .swiper-container:not(.swiper-container-initialized):not(.swiper-initialized) .swiper-wrapper > li.swiper-slide { box-sizing:border-box; /* swiper-wrapper 는 flex 라 float 불필요 — 폭+간격만 미리 깐다 */ width:calc((100% - (var(--fsb-gap, 20px) * (var(--fsb-per, 4) - 1))) / var(--fsb-per, 4)); margin-right:var(--fsb-gap, 20px); } .focus-slide-banner ul.fsb-list > li.swiper-slide {height:auto;} /* 슬라이드 1칸 = 배너 이미지 1장(통이미지) */ .focus-slide-banner .fsb-item {display:block; text-decoration:none;} /* fsb-ratio 를 지정하면 이미지 로드 전에도 높이가 잡혀 화면이 안 밀린다 */ .focus-slide-banner .fsb-item img {display:block; width:100%; height:auto; border:0;} .focus-slide-banner .fsb-inner[style*="--fsb-ratio"] .fsb-item img {height:100%; aspect-ratio:var(--fsb-ratio); object-fit:contain;} /* 앞뒤 버튼 — 정본 패턴(.normal-slide .prev/.next)과 동일 톤 */ .focus-slide-banner .fsb-nav .prev, .focus-slide-banner .fsb-nav .next { position:relative; top:auto; left:auto; right:auto; margin:0; z-index:1; width:44px; height:44px; border-radius:var(--arrow-radius, 100%); background-color:rgba(255,255,255,0.9); background-repeat:no-repeat; background-size:9px 18px; box-shadow:1px 2px 2px rgba(0,0,0,0.2); text-indent:-9999px; outline:none; cursor:pointer; } .focus-slide-banner .fsb-nav .prev {background-position:16px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=');} .focus-slide-banner .fsb-nav .next {background-position:19px center; background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K');} .focus-slide-banner .fsb-nav .prev:hover, .focus-slide-banner .fsb-nav .next:hover {background-color:rgba(255,255,255,1);} .special-design-banner {} .special-design-banner .main-title {display:flex; margin-bottom:1rem;} .special-design-banner .main-title.title-left {justify-content:flex-start;} .special-design-banner .main-title.title-right {justify-content:flex-end;} .special-design-banner .main-title.title-center {justify-content:center;} .special-design-banner .main-title.title-left .title-group {text-align:left;} .special-design-banner .main-title.title-right .title-group {text-align:right;} .special-design-banner .main-title.title-center .title-group {text-align:center;} .special-design-banner .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .special-design-banner .main-title h3 span {color:var(--point-color);} .special-design-banner .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} .special-design-banner ul {margin:0 0 0 -8px; padding:0; font-size:0;} /* 잘라내는 상자는 li 다. 여기에 라운드가 없으면 호버 확대로 이미지가 상자 밖으로 나가는 순간 모서리가 직각으로 보인다. */ .special-design-banner ul li {position:relative; overflow:hidden; border-radius:var(--sb2-radius, 0); display:inline-block; margin:0 0 8px 8px; padding:0; font-size:1rem; vertical-align:bottom;} .special-design-banner ul li a img, .special-design-banner ul li .banner-nolink img { display:block; width:100%; height:auto; /* img 의 width·height 속성이 원본 높이로 고정되지 않게 폭에 맞춰 비율을 지킨다 */ opacity:1.0; transition: -webkit-transform .3s cubic-bezier(.25,.1,.25,1); transition: transform .3s cubic-bezier(.25,.1,.25,1); transition: transform .3s cubic-bezier(.25,.1,.25,1),-webkit-transform .3s cubic-bezier(.25,.1,.25,1); image-rendering: -webkit-optimize-contrast; } .special-design-banner ul li:hover a img { transform: scale(1.05); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform:scale(1.05); } /* 배너 모서리 라운드 (위젯 설정) — 폴백 0 = 지금 그대로(각진 모서리) */ /* a 는 기본이 인라인이라 overflow 와 border-radius 가 먹지 않는다. 상자로 만들어야 자기 라운드로 자른다. */ .special-design-banner ul li a img, .special-design-banner ul li a, .special-design-banner ul li .banner-nolink img, .special-design-banner ul li .banner-nolink {border-radius:var(--sb2-radius, 0); overflow:hidden;} .special-design-banner ul li a, .special-design-banner ul li .banner-nolink {display:block;} .tab-product-list {} .tab-product-list .main-title {display:flex;} .tab-product-list .main-title.title-left {justify-content:flex-start;} .tab-product-list .main-title.title-right {justify-content:flex-end;} .tab-product-list .main-title.title-center {justify-content:center;} .tab-product-list .main-title.title-left .title-group {text-align:left;} .tab-product-list .main-title.title-right .title-group {text-align:right;} .tab-product-list .main-title.title-center .title-group {text-align:center;} .tab-product-list .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .tab-product-list .main-title h3 span {color:var(--point-color);} .tab-product-list .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 탭 메뉴 양끝 정렬 고정 */ .tab-product-list .tp-tabs { display:flex; justify-content:flex-start; align-items:stretch; /* 여백도 Fomantic 원본값이다(실측 margin:16px 0 10px) */ margin:16px 0 10px; padding:0; border-bottom:1px solid #d4d4d5; background:none; font-size:1rem; } .tab-product-list .tp-tab { flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:0.92857143em 0.7em; border-left:1px solid transparent; border-right:1px solid transparent; border-top:2px solid transparent; border-bottom:none; background:none; color:rgba(0, 0, 0, 0.87); font-weight:400; line-height:1; text-align:center; text-decoration:none; overflow:hidden; cursor:pointer; user-select:none; /* Fomantic 은 활성 탭만 둥글다 — 기본 폴백을 그렇게 맞춘다(비활성은 0) */ border-radius:var(--tp-tab-radius, 0); transition:background .1s ease, color .1s ease; } .tab-product-list .tp-tab:hover {color:rgba(0, 0, 0, 0.8);} .tab-product-list .tp-tab.active { background:#fff; color:rgba(0, 0, 0, 0.95); font-weight:700; border-top-width:1px; border-color:#d4d4d5; margin-bottom:-1px; border-radius:var(--tp-tab-radius, 0.28571429rem 0.28571429rem 0 0); } /* 탭 내용 — Fomantic .ui.tab 의 표시/숨김만 옮긴다(테두리 없는 원본 그대로) */ .tab-product-list .tp-pane {display:none;} .tab-product-list .tp-pane.active {display:block;} /* 탭 안 슬라이딩(value3=slide) 슬라이더 상품목록(slider_product) 위젯과 동일한 공용… */ .tab-product-list .normal-slide {position:relative;} .tab-product-list .normal-slide:after {content:''; display:block; clear:both; height:1px;} /* 초기화 전 레이아웃(FOUC) 규칙은 _shared/assets/css/slide_preinit.css 로… */ .tab-product-list .prev { position:absolute; z-index:1; top:50%; left:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:var(--arrow-radius, 100%); background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9Ijg3LjUsMTc1IDkyLjUsMTcwLjEgOS45LDg3LjUgOTIuNSw1IDg3LjUsMCAwLDg3LjUgCSIvPg0KPC9nPg0KPC9zdmc+DQo=') no-repeat 14px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .tab-product-list .next { position:absolute; z-index:1; top:50%; right:5px; margin-top:-60px; padding:10px; width:40px; height:40px; border-radius:100%; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCA5Mi41IDE3NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgOTIuNSAxNzU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtkaXNwbGF5Om5vbmU7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDo3O3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCjwvc3R5bGU+DQo8cG9seWxpbmUgaWQ9IlhNTElEXzNfIiBjbGFzcz0ic3QwIiBwb2ludHM9Ii0yMDQuMSwyLjUgLTExOSw4Ny41IC0yMDQuMSwxNzIuNiAiLz4NCjxnIGlkPSJYTUxJRF8yXyI+DQoJPHBvbHlnb24gaWQ9IlhNTElEXzRfIiBwb2ludHM9IjUsMTc1IDAsMTcwLjEgODIuNiw4Ny41IDAsNSA1LDAgOTIuNSw4Ny41IAkiLz4NCjwvZz4NCjwvc3ZnPg0K') no-repeat 16px center; text-indent:-9999px; outline:none; background-size: 10px 20px; background-color:rgba(255,255,255,0.9); box-shadow:1px 2px 2px rgba(0,0,0,0.2);} .tab-product-list .prev:hover, .tab-product-list .next:hover {background-color:rgba(255,255,255,1.0);} .tab-product-list .normal-slide .hide {display:none;} /* 페이징(점)을 슬라이드 아래에 in-flow 로 배치 */ .tab-product-list .normal-slide .pager.swiper-pagination {position:static; margin-top:20px; text-align:center;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-tab_product ul.grid > li.item .thumbnail a.link… */ /* 탭 라벨 — 말줄임은 반드시 이 span 이 한다 */ .tab-product-list .tp-tab .tp-tab-label {min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* 셀렉터는 반드시 위젯 훅(.zw-basic_product) 아래에 둔다 */ .zw-basic_product .product-list {} .zw-basic_product .product-list .main-title {display:flex;} .zw-basic_product .product-list .main-title.title-left {justify-content:flex-start;} .zw-basic_product .product-list .main-title.title-right {justify-content:flex-end;} .zw-basic_product .product-list .main-title.title-center {justify-content:center;} .zw-basic_product .product-list .main-title.title-left .title-group {text-align:left;} .zw-basic_product .product-list .main-title.title-right .title-group {text-align:right;} .zw-basic_product .product-list .main-title.title-center .title-group {text-align:center;} .zw-basic_product .product-list .main-title h3 {margin:0; padding:0; font-size:var(--w-title-size, calc(1.429rem * var(--w-title-scale, 1))); font-weight:700; color:#333; font-family:'Lato', 'Noto Sans KR', sans-serif;} .zw-basic_product .product-list .main-title h3 span {color:var(--point-color);} .zw-basic_product .product-list .main-title p {margin:0; padding:3px 0 0 0; font-size:calc(1rem * var(--w-title-scale, 1)); color:#555;} /* 상품 썸네일 모서리 (위젯 설정 상품 썸네일 모서리) 공용 상품카드… */ /* .zw-basic_product ul.grid > li.item .thumbnail a.link… */ @charset "utf-8"; /* 전체 카테고리 레이어 — 3단 전용 (대분류 > 중분류 > 소분류) 2단 정본(common.css 의… */ /* 레이어 본체 — 크기·테두리는 정본(.category-layer)에서 상속받고, 내부 배치만 다시 잡는다 */ .category-all .category-layer-3depth { padding: 0; overflow: hidden; height: auto; min-height: 600px; max-height: calc(100vh - 180px); } /* 높이는 테마의 .category-layer 사본을 반드시 이겨야 한다 */ .category-all .c3-backdrop .category-layer.category-layer-3depth { height: auto; min-height: 600px; max-height: calc(100vh - 180px); } /* 독자(모달형) 레이어 — 대분류 15개 초과(JS 가 data-category-count 를 세어… */ .category-all .c3-backdrop { display: contents; } .category-all .c3-backdrop.c3-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background: rgba(0, 0, 0, .6); overflow-y: auto; /* 백드롭이 스크롤 주체 */ -webkit-overflow-scrolling: touch; /* 레이어 위아래 최소 여백을 백드롭 padding 으로 갖는다(예전엔 레이어 margin 이었다) */ padding: 56px 0 60px; box-sizing: border-box; } /* flex + margin:auto 로 세로·가로 중앙 */ .category-all .c3-backdrop.c3-modal.open { display: flex; } body.c3-modal-open { overflow: hidden; } /* 모달 열림 동안 body 스크롤 잠금 */ /* 모달형 레이어 — 백드롭 안 중앙, 높이 제한 없음(내부 스크롤 없음, 디자인 동일) */ .category-all .c3-backdrop.c3-modal .category-layer-3depth { position: relative; top: auto !important; left: auto; transform: none; /* 드롭다운용 가운데 정렬(left:50% + translateX(-50%))을 쓰는 테마가 있다: 백드롭이 이미 가운데로 두므로 풀지 않으면 폭 절반만큼 왼쪽으로 밀린다 */ flex: 0 0 auto; /* 폭 1200px 고정 — 좁은 화면에서 flex 가 줄이지 않게 */ margin: auto; /* 화면이 더 크면 세로(가로) 중앙, 레이어가 더 크면 0 으로 풀려 위에서부터 */ height: auto; max-height: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); overflow: visible; /* 왼쪽 상단 밖 X 버튼이 잘리지 않게 */ } .category-all .c3-backdrop.c3-modal .category-layer-3depth .c3-nav { max-height: none; } /* 모달형 닫기 X — 레이어 왼쪽 상단 밖, 보더와 같은 색 배경 + 흰 X */ .category-all .category-layer-3depth .c3-close { display: none; } .category-all .category-layer-3depth.c3-standalone .c3-close { display: flex; align-items: center; justify-content: center; position: absolute; top: -40px; left: -2px; /* 레이어 테두리(2px) 바깥 라인에 맞춤 */ width: 40px; height: 40px; padding: 0; background: var(--point-color); color: #fff; border: 0; border-radius: 0; /* 라운드 없음(각짐) */ font-size: 24px; line-height: 1; cursor: pointer; } .category-all .category-layer-3depth.c3-standalone .c3-close:hover { filter: brightness(.92); } /* 좌측: 대분류 세로탭 */ .category-all .category-layer-3depth .c3-nav { width: 240px; min-height: 596px; /* 대분류가 적어도 좌측 배경이 레이어 바닥까지 (min-height 600 - 테두리 4px) */ max-height: calc(100vh - 184px); /* 레이어 max-height - 테두리 4px */ background: #fafafa; border-right: 1px solid #e8e8e8; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; /* 활성 탭의 margin-right:-1px 오버행이 가로 스크롤바를 만들지 않게 */ } .category-all .category-layer-3depth .c3-nav-link { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 38px; /* 앵커형·모달형 공통 한 칸 높이 */ font-size: 0.9375rem; font-weight: 500; /* 대분류 굵기 한 단계 낮춤(600 → 500) */ color: #444; border-bottom: 1px solid #f0f0f0; box-sizing: border-box; } .category-all .category-layer-3depth .c3-nav-icon { flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; border-radius: 4px; } .category-all .category-layer-3depth .c3-nav-name { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-nav-arrow { flex: 0 0 auto; font-size: 1.125rem; color: #bbb; } /* 앵커형(대분류 15개 이하) — 고정 px 을 버리고 세로를 균등 분배해 레이어 안을 정확히 채운다 */ .category-all .category-layer-3depth:not(.c3-standalone) .c3-nav { display: flex; flex-direction: column; } .category-all .category-layer-3depth:not(.c3-standalone) .c3-item { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 30px; max-height: 38px; } .category-all .category-layer-3depth:not(.c3-standalone) .c3-nav-link { height: auto; flex: 1 1 auto; } /* 활성 대분류 — 흰 배경으로 우측 패널과 이어 붙은 것처럼 보이게 하고 우측 경계선을 지운다 */ .category-all .category-layer-3depth .c3-item.active .c3-nav-link, .category-all .category-layer-3depth .c3-nav-link:hover { background: #fff; color: var(--point-color); font-weight: 600; /* 활성 대분류도 한 단계 낮춤(700 → 600) */ } .category-all .category-layer-3depth .c3-item.active .c3-nav-link { margin-right: -1px; border-right: 1px solid #fff; } .category-all .category-layer-3depth .c3-item.active .c3-nav-arrow { color: var(--point-color); } /* 우측: 중분류/소분류 패널 */ .category-all .category-layer-3depth .c3-panel { display: none; position: absolute; left: 240px; top: 0; right: 0; bottom: 0; padding: 18px 22px 24px; overflow-y: auto; background: #fff; box-sizing: border-box; } .category-all .category-layer-3depth .c3-item.active .c3-panel { display: block; } .category-all .category-layer-3depth .c3-panel-head { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #eee; } .category-all .category-layer-3depth .c3-panel-head a { display: inline-flex; align-items: center; font-size: 1.0625rem; font-weight: 500; color: #222; } /* 패널 제목도 500 으로 */ .category-all .category-layer-3depth .c3-panel-head a i { font-size: 1.25rem; color: #999; } .category-all .category-layer-3depth .c3-panel-head a:hover { color: var(--point-color); } .category-all .category-layer-3depth .c3-panel-head a:hover i { color: var(--point-color); } /* 카테고리 상품 광고 — 컬럼 그리드 위 큰 배너 타일 */ .category-all .category-layer-3depth .c3-ads { display: grid; grid-template-columns: repeat(5, 1fr); /* c3-cols 와 같은 5열·열간격 → 컬럼 폭에 자연 정렬 */ gap: 10px 18px; margin: 0 0 16px; } .category-all .category-layer-3depth .c3-ad { display: block; min-width: 0; } /* 노출 개수 상한(data-ad-show) 밖으로 밀린 광고 — JS 가 hidden 을 건다 */ .category-all .category-layer-3depth .c3-ad[hidden] { display: none; } .category-all .category-layer-3depth .c3-ad-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #eee; border-radius: 6px; } /* 중분류 = 컬럼 */ .category-all .category-layer-3depth .c3-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 18px; align-items: start; } .category-all .category-layer-3depth .c3-col { min-width: 0; padding: 0 0 14px; } .category-all .category-layer-3depth .c3-col-head { display: block; padding: 7px 8px; margin: 0 0 4px; font-size: 0.9375rem; font-weight: 600; /* 중분류 굵기 한 단계 낮춤(700 → 600) */ color: #222; background: #f6f6f6; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-col-head:hover { color: var(--point-color); background: #f0f0f0; } /* 소분류 */ .category-all .category-layer-3depth .c3-list { margin: 0; padding: 0; list-style: none; } .category-all .category-layer-3depth .c3-list li { margin: 0; padding: 0; } .category-all .category-layer-3depth .c3-list li a { display: block; padding: 4px 8px; font-size: 0.875rem; font-weight: 500; color: #666; line-height: 1.45; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .category-all .category-layer-3depth .c3-list li a:hover { color: #000; background: #f7f7f7; } .category-all .category-layer-3depth .c3-star { padding-left: 4px; font-size: 0.8125rem; color: #faa828; } .category-all .category-layer-3depth .c3-empty { margin: 20px 0 0; font-size: 0.875rem; color: #999; } /* 스크롤바 — 패널·좌측 탭 다 가늘게(레이어 전체 스크롤은 정본 그대로) */ .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar { width: 6px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-thumb, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-track, .category-all .category-layer-3depth .c3-nav::-webkit-scrollbar-track { background: transparent; } /* 좁은 화면 — 레이어 폭이 줄면 컬럼 수를 낮춘다(광고 타일도 같은 열수 유지) */ @media (max-width: 1280px) { .category-all .category-layer-3depth .c3-cols { grid-template-columns: repeat(4, 1fr); } .category-all .category-layer-3depth .c3-ads { grid-template-columns: repeat(4, 1fr); } } /* 카테고리 아이콘 — 단계마다 크기를 달리해 위계를 지킨다(대 22 / 중 18 / 소 15) */ .category-all .category-layer-3depth .c3-col-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-right: 6px; object-fit: contain; border-radius: 3px; vertical-align: -4px; } .category-all .category-layer-3depth .c3-leaf-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 5px; object-fit: contain; border-radius: 3px; vertical-align: -3px; } /* 컬럼 머리는 아이콘이 붙으면 줄바꿈 없이 한 줄을 유지해야 해서 flex 로 전환 */ .category-all .category-layer-3depth .c3-col-head { display: flex; align-items: center; } /* 스크롤바 custom css */ .category-all .category-layer-3depth .c3-panel { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; /* Firefox: 평소엔 투명 */ } .category-all .category-layer-3depth .c3-panel:hover { scrollbar-color: #eee transparent; /* Firefox: 마우스 올리면 보임 */ } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar { width: 6px; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-track { background: transparent; } /* 화살표 버튼 완전 제거 */ .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:single-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:start, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:end, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:start:decrement, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:vertical:end:increment, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:horizontal:start, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button:horizontal:end { display: none !important; width: 0 !important; height: 0 !important; } .category-all .category-layer, .category-all .category-layer-3depth, .category-all .category-layer-3depth .c3-panel { scrollbar-width: thin; } .category-all .category-layer::-webkit-scrollbar-button, .category-all .category-layer-3depth::-webkit-scrollbar-button, .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; } .category-all .category-layer-3depth .c3-panel::-webkit-scrollbar-thumb { background: transparent; /* 평소엔 투명 */ border-radius: 10px; } .category-all .category-layer-3depth .c3-panel:hover::-webkit-scrollbar-thumb { background: #ccc; /* 마우스 올리면 보임 */ } .category-all .category-layer-3depth .c3-panel:hover::-webkit-scrollbar-thumb:hover { background: #bbb; /* 스크롤바 자체에 마우스 올리면 더 진하게 */ }