/* BASIC css start */ /* 170414 morenvy */ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; } html { width:100%; height:100%;overflow-y:scroll; } li { list-style:none; } img,fieldset { border:none; vertical-align:top; } table { border:0; border-spacing:0; border-collapse:collapse; } th,td { border:0; } .cboth { clear:both;*zoom:1 } .cboth:after { content:" "; display:block; clear:both; } .fleft {float:left;} .fright {float:right !important;} .left { text-align: left; } .center { text-align: center; } .top { caption-side: top; } .right { text-align: right; } .bold { font-weight: bold; } .none { display:none; } .relative {position:relative;} .pdt5 {padding-top:5px;} .pdt10 {padding-top:10px;} .pdt15 {padding-top:15px;} .pdt20 {padding-top:20px;} .pdt30 {padding-top:30px;} .pdt40 {padding-top:40px;} .pdt50 {padding-top:50px;} .pdt60 {padding-top:60px;} .pdt80 {padding-top:80px;} .pdt130 {padding-top:130px;} .pdb10 {padding-bottom:10px;} .pdb20 {padding-bottom:20px;} .pdb15 {padding-bottom:15px;} .pdb40 {padding-bottom:40px;} .mrt20 {margin-top:20px;} /* 공통레이아웃 */ #header, #layerWrap, #contentWrap, #ftLink .link, #footer { width:1280px; } /* ── 페이지 배경 (2026-08) ── 배경은 화면 폭 전체로, 내용만 1280 가운데. 기본은 흰색이고, 회색 캔버스가 필요한 페이지(main · shopbrand)는 각 페이지 CSS에서 html,body 를 #f6f7f9 으로 덮어씀 */ html, body {background:#fff;} #contentWrap, #content {background:transparent; margin-left:auto; margin-right:auto;} #footer {width:100%;} /* 검정 푸터를 화면 끝까지 */ #footer .section3 {width:100%; max-width:1280px;} #content { width:1280px;min-height:600px;background-color:#fff;} #contentWrap {background-color:#fff;} body {min-width:1280px;font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif} a {selector-dummy: expression(this.hideFocus=true); text-decoration:none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} body, h1, h2, h3, h4, h5, h6, table, input, select, textarea, a {font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif} /* 게시판 상단 리스트 숨김 */ .bbs-hd {display:none;} /* ===== 카드 v3 (PC) 260810 — 부품표(card-and-sortbar.md) 기준 · 여기가 하나뿐인 기준이다 ===== PC 도 화면 84개 중 실제 쇼핑몰 화면은 전부 로 헤더를 부른다. 그래서 이 파일(header.1.css)이 전 화면 공통층이다. 카드 규칙은 여기 한 곳에만 둔다. ★★ 2026-08-11 큰 오류 정정 — 처음에 이 블록의 모든 규칙을 `#container` 로 시작했다. 그건 **모바일 이름**이다. PC 스킨 HTML 에는 `#container` 라는 칸이 아예 없다 (PC 는 `#wrap` > `#contentWrapper` > `#contentWrap` > `#content` 구조다). 그래서 8/10 에 올린 PC 카드 v3 는 **한 줄도 먹지 않고 있었다.** `#wrap` 으로 고쳤다. → 모바일 파일을 본떠 PC 를 짤 때는 **감싸는 칸 이름부터 확인한다.** ★ PC 는 화면마다 카드 클래스 이름이 다르다 (모바일은 .list_shoppingInfo 하나였다). 클래스를 통째로 바꾸면 HTML 6화면을 다 손봐야 하고 ajax 로 오는 카드가 깨진다. 그래서 이름을 바꾸지 않고 네 집안을 한 규칙에 같이 적는다. 메인·브랜드 .fw-card (.fw-thumb / .fw-brand / .fw-pname / .fw-consumer / .fw-sale …) 목록·검색 .fw-pcard (.fw-pthumb / .fw-pbrand / .fw-pname / .fw-pconsumer / .fw-psale …) 브랜드 글자 ul.info (.dsc / .name-en / .consumer / .price / .icon) 관심상품 .product-card (.product-image / .product-name / .product-price) 줄 순서 · 높이 브랜드16 / 상품명42 / 정가18 / 판매가26 / 별점18 / 적립금18 / 품절18 썸네일 정사각 · 흰 바탕 · 맞춰넣기(contain) · 모서리 10 열 수 · 간격 6열 · 가로 12 · 세로 24 (화면이 넓어져도 열을 늘리지 않는다) ------------------------------------------------------------------------------------ */ /* --- 썸네일 : 흰 바탕 · 맞춰넣기 · 모서리 10 (길쭉한 낚싯대가 잘리지 않게) --- */ #wrap .fw-thumb, #wrap .fw-pthumb, #wrap .thumb.salebox, #wrap .product-image {position:relative !important; aspect-ratio:1/1 !important; width:auto !important; height:auto !important; overflow:hidden !important; background:#fff !important; border:0 !important; border-radius:10px !important;} #wrap .fw-thumb img, #wrap .fw-pthumb img, #wrap .thumb.salebox img, #wrap .product-image img {width:100% !important; height:100% !important; object-fit:contain !important; display:block !important; border:0 !important;} #wrap .thumb.salebox a {display:block !important; width:100% !important; height:100% !important;} /* --- 뱃지 : NEW·재입고·순위는 왼쪽 위 8,8 / 할인율은 오른쪽 위 8,8 · 모서리 4 --- */ #wrap .fw-badge {top:8px !important; left:8px !important; right:auto !important; border-radius:4px !important; padding:2px 7px !important; font-size:10px !important; font-weight:800 !important;} #wrap .fw-badge.b-new {background:#F0D025 !important; color:#14181D !important;} #wrap .fw-badge.b-re, #wrap .fw-badge.b-rank {background:#14181D !important; color:#fff !important;} #wrap .fw-thumb .fw-rate, #wrap .fw-pthumb .fw-prate, #wrap .thumb.salebox .salebig {top:8px !important; right:8px !important; left:auto !important; min-width:0 !important; height:auto !important; line-height:1.35 !important; padding:3px 7px !important; border-radius:4px !important; background:#EF6253 !important; color:#fff !important; font-size:11px !important; font-weight:800 !important;} /* --- 품절 : 썸네일을 덮는 띠·덮개는 어떤 형태도 쓰지 않는다 (2026-08-10 확정) --- */ #wrap .fw-sold, #wrap .fw-psold {position:static !important; background:none !important; display:block !important; padding:0 !important; margin:0 !important; height:18px !important; line-height:18px !important; text-align:left !important; font-size:13px !important; font-weight:700 !important; color:#EF6253 !important;} /* --- 글자 상자 : 썸네일과 10 띄운다 --- */ #wrap .fw-cbody, #wrap .fw-pbody, #wrap .product-info, #wrap ul.info {padding:10px 0 0 !important; gap:0 !important;} /* 브랜드 16 */ #wrap .fw-brand, #wrap .fw-pbrand {display:block !important; height:16px !important; line-height:16px !important; overflow:hidden !important; font-family:'Space Grotesk',sans-serif; font-size:11px !important; font-weight:700 !important; letter-spacing:.03em !important; color:#8A9099 !important; text-transform:uppercase; white-space:nowrap; text-overflow:ellipsis;} /* 상품명 2줄 42 */ #wrap .fw-pname, #wrap ul.info .dsc, #wrap .product-name {display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:42px !important; overflow:hidden !important; margin:0 !important; padding:0 !important; font-size:15px !important; font-weight:400 !important; line-height:1.35 !important; color:#2B3138 !important;} /* 영문명·설명줄은 카드에서 뺀다 */ #wrap ul.info .name-en, #wrap .fw-psubname, #wrap .fw-pengname, #wrap .product-subname {display:none !important;} /* 정가 18 (취소선) */ #wrap .fw-consumer, #wrap .fw-pconsumer, #wrap ul.info .consumer {display:block !important; height:18px !important; line-height:18px !important; margin:0 !important; font-size:13px !important; color:#B3B9C0 !important; text-decoration:line-through !important;} /* 판매가 26 */ #wrap .fw-sale, #wrap .fw-psale, #wrap ul.info .price, #wrap .price-main {display:block !important; height:26px !important; line-height:26px !important; margin:0 !important; padding:0 !important; font-size:18px !important; font-weight:800 !important; color:#14181D !important; letter-spacing:-.2px;} #wrap .fw-price, #wrap .fw-pprice, #wrap .product-price {display:block !important; margin:0 !important; padding:0 !important; gap:0 !important;} #wrap .fw-pwon {font-size:18px !important; font-weight:800 !important; color:#14181D !important;} /* ★ 2026-08-11 : 판매가의 「원」이 좁은 카드에서 아래 줄로 밀렸다. 한 줄로 못 박고, 「원」은 숫자보다 조금 작게 붙인다. */ #wrap .fw-sale, #wrap .fw-psale, #wrap ul.info .price, #wrap .price-main {white-space:nowrap !important; overflow:hidden !important;} #wrap .fw-sale em, #wrap .fw-psale em, #wrap ul.info .price em, #wrap .price-main em {display:inline !important; font-style:normal !important; font-size:15px !important; font-weight:800 !important; letter-spacing:0 !important; margin-left:1px;} #wrap .fw-replace {display:block !important; height:26px !important; line-height:26px !important; font-size:15px !important; font-weight:700 !important; color:#8A9099 !important;} /* 별점·후기 18 — 파워리뷰가 준 값만 쓴다. 없으면 빈 줄로 남긴다 */ #wrap .fw-review, #wrap .fw-preview {display:flex !important; align-items:center !important; gap:4px !important; height:18px !important; overflow:hidden !important; margin:0 !important; font-size:12px !important; color:#E0A400 !important;} #wrap .fw-review .st img, #wrap .fw-preview .st img {height:13px !important; width:auto !important; vertical-align:-1px;} #wrap .fw-review .ct, #wrap .fw-preview .ct {font-size:12px !important; color:#8A9099 !important;} /* 적립금 18 — 언제나 원. % 는 쓰지 않는다 */ #wrap .fw-reserve, #wrap .fw-preserve {display:block !important; height:18px !important; line-height:18px !important; margin:0 !important; font-size:12px !important; font-weight:500 !important; color:#8A7207 !important;} /* 할인율 글자(카드 안) · 옛 아이콘 줄은 쓰지 않는다 */ #wrap .fw-dc, #wrap ul.info .icon, #wrap ul.info .closeup {display:none !important;} /* --- 담는 칸 : 6열 · 가로 12 · 세로 24 -------------------------------------- ★ 화면이 넓어져도 열을 늘리지 않는다. 상품목록이 5열이던 것은 부품표 위반이라 6열로 고친다. */ #wrap .fw-grid, #wrap .fw-pgrid, #wrap .product-grid {display:grid !important; grid-template-columns:repeat(6,1fr) !important; column-gap:12px !important; row-gap:24px !important;} /* ★ 2026-08-11 : 카드 자체는 바탕색을 넣지 않는다 (페이지 배경 #F6F7F9 가 그대로 보인다). 흰 바탕은 썸네일만 갖는다 — 부품표 ②. 전에는 여기에 background:#fff 가 있어서 연회색 페이지 위에 흰 사각형이 떠 보였다. */ #wrap .fw-card, #wrap .fw-pcard, #wrap .product-card {display:flex !important; flex-direction:column !important; width:auto !important; margin:0 !important; padding:0 !important; float:none !important; background:none !important; box-sizing:border-box !important;} /* ★ 2026-08-11 — 더보기로 감춘 카드는 감춰져 있어야 한다. 위 규칙이 display:flex !important 라서 main.css 의 .fw-card.is-hidden{display:none} 을 눌렀다. 그래서 상품이 전부 한 번에 보이고 더보기가 아무 의미가 없었다. */ #wrap .fw-card.is-hidden, #wrap .fw-pcard.is-hidden, #wrap .product-card.is-hidden {display:none !important;} /* 브랜드 화면은 카드 폭을 180 으로 못박아 뒀다 — 칸이 정하게 둔다 */ #wrap .tb-center, #wrap ul.info {width:auto !important; margin:0 !important;} /* --- 옛 테이블형 카드 규칙은 죽었다 (마크업이 없어졌다) --- common.css 와 이 파일 위쪽에 남아 있던 .prd-list .thumb 196x196 · 2px 테두리를 지운다. */ #wrap .prd-list .thumb {border:0 !important; width:auto !important; height:auto !important;} /* --- 더보기 단추 : 담는 칸이 폭 100% 일 때 좌우 안여백을 더하면 넘쳐 흐른다 (모바일에서 겪음) --- */ #wrap .fw-more, #wrap .fw-morebtn, #wrap .btn-more, #wrap .cf-btn-more {box-sizing:border-box !important; margin-left:auto !important; margin-right:auto !important;} /* --- 뒤로 버튼 (2026-08-11 신규 부품) — 모바일과 같은 부품, PC 크기 --- */ #wrap .fw-back {box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 14px; border:1px solid #DFE3E8; border-radius:10px; background:#fff; font-size:13px; font-weight:500; color:#14181D; text-decoration:none; white-space:nowrap; margin-right:12px; vertical-align:middle;} #wrap .fw-back:hover {border-color:#14181D;} #wrap .fw-back .ar {font-size:14px; line-height:1;} #wrap .fw-back[hidden] {display:none !important;} /* ===== 카드 v3 (PC) 260810 끝 ===== */ /* 롤오버 */ a img.menuon {display:none;} a img.menuoff {display:inline;} a:hover img.menuon {display:inline;} a:hover img.menuoff {display:none;} /* 하단 페이징 */ .paging {padding-bottom:20px;} .sliderkit {display:none;position:relative;} .sliderkit a, .sliderkit a:hover{text-decoration:none;} .sliderkit .sliderkit-nav{z-index:10;position:absolute;text-align:center;} .sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;} .sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;} .sliderkit .sliderkit-nav-clip ul li{float:left;} .sliderkit .sliderkit-nav-clip ul li a{display:block;overflow:hidden;} .sliderkit .sliderkit-btn{z-index:10;} .sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;} .sliderkit .sliderkit-panel-active{z-index:5;} .sliderkit .sliderkit-panel-old{z-index:4;} /* ✅ 상단배너: head_banner 가상태그로 교체되어 기존 #topbanner_area 스타일 제거됨 */ /* 상단 */ #header {width:100%;margin:0 auto 20px; padding:0;border-top:0;} #header .section {height:38px; background-color:#fafafa; width:100%; border-bottom:1px solid #eee; } #header .section .section_box {width:1280px;margin:0 auto;height:38px;line-height:38px;} #header .section .section_box .inner1 li {float:left;} #header .section .section_box .inner1 li a {color:#666; font-size:13px; display:block;line-height:38px;padding:0 10px;} #header .section .section_box .inner1 li a:hover {color:#111;text-decoration:none;} #header .section .section_box .inner1 li:first-child a {border-left:1px solid #eee; border-right:1px solid #eee; border-bottom:1px solid #fafafa;} #header .section .section_box .inner1 li.top_lan {width:65px;height:18px;line-height:18px;border:1px solid #dedede;color:#777;font-size:10px;margin-top:10px;cursor:pointer;position:relative;} #header .section .section_box .inner1 li.top_lan img {vertical-align:top;padding:2px 3px 0 3px;} #header .section .section_box .inner1 li.top_lan:hover {color:#333;} #header .section .section_box .inner1 li.top_lan .top_lan_list {float:left;} #header .section .section_box .inner1 li.top_lan .top_lan_btn {float:right;border-left:1px solid #dedede;} #header .section .section_box .inner1 li.top_lan .top_lan_btn img {padding:0;} #header .section .section_box .inner1 li.top_lan #top_lanmenu {display:none;border:1px solid #dedede;width:65px;position:absolute;z-index:1;top:18px;left:-1px;background-color:#fff;} #header .section .section_box .inner1 li.top_lan #top_lanmenu ul li {width:65px;height:23px;line-height:23px;} #header .section .section_box .inner1 li.top_lan #top_lanmenu ul li a {padding:0;line-height:23px;color:#777;font-size:10px;border:0;} #header .section .section_box .inner1 li.top_lan #top_lanmenu ul li a:hover {color:#222;} #header .section .section_box .inner1 li.top_lan #top_lanmenu ul li img {display:inline-block;padding:5px 3px 0 3px;} #header .section .section_box .inner2 {float:right;padding:0;height:38px;} #header .section .section_box .inner2 li {float:left;position:relative;background:none;} #header .section .section_box .inner2 li a {color:#666; font-size:13px; display:block;line-height:38px;padding:0 10px;} #header .section .section_box .inner2 li a:hover {color:#111;text-decoration:none;} #header .section .section_box .inner2 li:first-child {background:none;} #header .section .section_box .inner2 #point_icon {position:absolute; z-index:1; top:34px; left:2px; text-align:center; padding:0; } #header .section .section_box .inner2 #point_icon span {position:absolute;top:-5px;line-height:5px; left:50%;margin-left:-3px;color:#000;} #header .section .section_box .inner2 #point_icon > div {display:block; width:55px; margin:0; height:17px; line-height:16px;background:#111; border-radius:3px;font-size:10px;color:#fff; letter-spacing:1px;} #header .section .section_box .inner2 .top_sns {font-size:0;background:none;} #header .section .section_box .inner2 .top_sns a {display:inline-block;padding:0 3px;} #header .section .section_box .inner2 .top_sns a img {vertical-align:middle;border:1px solid #dedede;} #header .section .section_box .inner2 .top_sns a img:hover {border:1px solid #111;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} #header .section2 {width:1280px;margin:0 auto;height:84px;position:relative;} #header .section2 .top_logo {float:left;} #header .section2 .search {float:left;margin:20px 0 0 50px;background-color:#f4f4f5;border-radius:21px;padding:0 50px 0 20px;position:relative;} #header .section2 .search .MS_search_word {height:42px;line-height:42px;font-size:14px;width:300px; padding:0;margin:0;border:0;background:transparent;color:#111;outline:none;} #header .section2 .search .MS_search_word:focus {border:0;} #header .section2 .search .btn_sh2 {position:absolute;right:5px;top:5px;width:32px;height:32px;border-radius:50%;background-color:#111;text-align:center;display:block;} #header .section2 .search .btn_sh2 svg {margin-top:8px;vertical-align:top;} #header .section2 .search .btn_sh2:hover {background-color:#333;} #header .section2 .topcate {float:right;margin:28px 20px 0 0;} #header .section2 .topcate span {position:absolute;top:20px;right:10px;display:block;background-color:#111;color:#fff;border-radius:50%;width:20px;height:20px;text-align:center;line-height:20px;font-weight:bold;} #header .section3 {width:100%; height:44px; background-color:#fff; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;} #header .section3 .section_box {width:1279px;margin:0 auto; height:44px; position:relative; border-right:0;} #header .col {display: inline-block; float:left; text-align: center; height: auto;position: relative;height:44px; } #header .special-con {cursor: pointer; display:inline-block; width:38px; padding-top:11px; padding-bottom:12px; border:0; background-color:#fff; } #header .bar {display:block; height: 2px; width: 16px;background: #111; margin:4px auto; border-radius:1px; } #header .special-con {margin: 0 auto;-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;} #header .section3 #all_cate_area {overflow:hidden; display:none; z-index:50; position:absolute; top:44px; border:1px solid #eee; width:1278px; height:auto; margin:0px; padding:0px; font-size:0px; background-color:#fff;border-radius:0 0 12px 12px;box-shadow:0 15px 35px rgba(0,0,0,0.18);} #header .section3 #all_cate_area .all_cate_section01 {height:47px; width:1278px; border-bottom:1px solid #dedede; clear:both; } #header .section3 #all_cate_area .all_cate_close {float:left; background-color:#111; width:177px; height:47px; } #header .section3 #all_cate_area .all_cate_close a { color:#fff; font-size:14px; text-align:left; display:block; line-height:47px; padding-left:20px; background:url('/design/fishwiz/0704everday/close_bg.gif') no-repeat; background-position:149px 18px;} #header .section3 #all_cate_area .all_cate_comm {width:886px; background-color:#f0f0f0; float:left; text-align:left; height:47px; } #header .section3 #all_cate_area .all_cate_comm a {font-size:14px; color:#333; padding:15px; line-height:47px; height:47px; } #header .section3 #all_cate_area .all_cate_comm a:first-child {padding-left:22px;} #header .section3 #all_cate_area .all_cate_comm a:hover {color:#111;} #header .section3 #all_cate_area .all_cate_best a {float:left; width:214px; box-sizing:border-box; line-height:47px; text-align:center; background-color:#f9f9f9; display:block; height:47px; color:#333; font-size:14px; border-left:1px solid #dedede;} #header .section3 #all_cate_area .all_cate_sale a {float:left; width:91px; line-height:47px; text-align:center; background-color:#fff; display:block; height:47px; color:#333; font-size:14px; border-left:1px solid #dedede;} /* 전체 카테고리 */ #header .section3 #all_cate_area .all_cate_section02 {width:auto; clear:both; display:grid; grid-template-columns:repeat(6,1fr); background:url('/design/fishwiz/0704everday/all_cate_bg.gif') repeat-y ; min-height:0; margin-top:20px; margin-bottom:20px; } #header .section3 #all_cate_area .all_cate_section02 > ul {float:none;width:auto;min-height:0;margin:0;padding-bottom:28px;} /* ✅ 삭제됨: 15번째 이후 대분류 숨김(nth-child display:none) — 카테고리가 많아져 전체 표시로 변경 */ /* ✅ 변경됨: 창 높이 고정(600px) 해제 + 6열 그리드로 전환 — 대분류가 몇 개든 전부 표시, 화면보다 길면 창 안에서 스크롤 */ #header .section3 #all_cate_area .all_cate_section02 ul li {width:160px;margin:0 auto;} #header .section3 #all_cate_area .all_cate_section02 ul li.a_sub_title a {font-size:13px; color:#222; display:block;border-bottom:1px solid #222;text-align:left; font-weight:bold; padding-bottom:10px; margin-bottom:10px;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate {position:relative;height:24px;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate a {font-size:13px; color:#333; text-align:left; line-height:24px; display:block;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate a.sub_mouse_hover, #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate a:hover {color:#111;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .sub_cate_on_arrow {position:absolute;top:50%;right:5px;background:url('/design/fishwiz/0704everday/sub_cate_on.png') no-repeat;z-index:20;width:5px;height:8px;margin-top:-4px;-webkit-transition:-webkit-transform 150ms ease-out;-moz-transition:transform 150ms ease-out;-ms-transition:transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .sub_cate_on_arrow.rotateon {-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .all_cate_sub {display:none; position:absolute;top:-5px;left:100%;z-index:21;width:160px;background-color:#fff;border:0;padding:5px 10px;border-radius:10px;-webkit-border-radius:10px; -moz-border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.15);} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .all_cate_sub > li {width:auto;height:24px;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .all_cate_sub > li > a {text-align:left;display:block;line-height:24px;height:24px;font-size:12px;color:#777;padding:0;margin:0;text-indent:0;} #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate .all_cate_sub > li > a:hover {color:#111;} .box_sec2 {clear:both; height:auto; max-height:calc(100vh - 180px); overflow:hidden; overflow-y:auto;} #header .section3 .top_b_menu a {text-align:center; height:44px; border-right:0; display:block; width:68px; float:left; line-height:44px; font-size:14px; color:#111; font-weight:800; background:none !important;} #header .section3 .top_b_menu a:hover {background-color:rgba(0,0,0,0.05) !important; } #header .section3 #all_cate_area2 {display:none; z-index:2000; position:absolute; top:44px; border:1px solid #eee; width:1278px; height:554px; margin:0px; padding:0px; font-size:0px; background-color:#fff;border-radius:0 0 12px 12px;box-shadow:0 15px 35px rgba(0,0,0,0.18);} #header .section3 #all_cate_area2 .all_cate_section01 {height:47px; width:1278px; border-bottom:1px solid #dedede; clear:both; background-color:#f0f0f0; } #header .section3 #all_cate_area2 .all_cate_close {float:left; background-color:#111; width:177px; height:47px; } #header .section3 #all_cate_area2 .all_cate_close a { color:#fff; font-size:14px; text-align:left; display:block; line-height:47px; padding-left:20px; background:url(/design/fishwiz/0704everday/close_bg.gif) no-repeat; background-position:149px 18px;} /* 브랜드 카테고리 */ #header .section3 #all_cate_area2 .all_cate_section02_2 {width:1278px; clear:both; background:url(/design/fishwiz/0704everday/all_cate_bg.gif) repeat-y ; width:1278px; min-height:424px; margin-top:20px; margin-bottom:20px; } #header .section3 #all_cate_area2 .all_cate_section02_2 ul {margin-top:0px; clear:both;} #header .section3 #all_cate_area2 .all_cate_section02_2 ul li {float:left; width:332px; margin:0 16px;} #header .section3 #all_cate_area2 .all_cate_section02_2 ul li:first-child {float:left; width:332px; margin-left:20px;} #header .section3 #all_cate_area2 .all_cate_section02_2 .a_sub_title a {font-size:20px; color:#222; display:block; width:332px; border-bottom:1px solid #222; text-align:left; font-weight:bold; padding-bottom:10px; margin-bottom:10px;} #header .section3 #all_cate_area2 .all_cate_section02_2 .a_sub_cate a {font-size:13px; color:#333; text-align:left; line-height:28px; display:block;} #header .section3 #all_cate_area2 .all_cate_section02_2 .a_sub_cate a:hover {color:#111;} #header .section3 #all_cate_area2 .all_cate_section03 {width:1278px; clear:both; background:url('/design/fishwiz/0704everday/all_cate_bg.gif') repeat-y ; width:1278px; min-height:424px; margin-top:20px; margin-bottom:20px; } #header .section3 #all_cate_area2 .all_cate_section03 ul {margin-top:0px; clear:both;} #header .section3 #all_cate_area2 .all_cate_section03 ul li {float:left; width:150px; margin:0 16px;} #header .section3 #all_cate_area2 .all_cate_section03 ul li:first-child {float:left; width:150px; margin-left:20px;} #header .section3 #all_cate_area2 .all_cate_section03 .a_sub_title a {font-size:13px; color:#222; display:block; width:150px; border-bottom:1px solid #222; text-align:left; font-weight:bold; padding-bottom:10px; margin-bottom:10px;} #header .section3 #all_cate_area2 .all_cate_section03 .a_sub_cate a {font-size:13px; color:#333; text-align:left; line-height:24px; display:block;} #header .section3 #all_cate_area2 .all_cate_section03 .a_sub_cate a:hover {color:#111;} .contentslider-tab-cate { width:1280px; height:506px; text-align:center; float:left; clear:both;} .contentslider-tab-cate .sliderkit-nav { position:absolute; height:47px; top:-48px; left:177px; width:1100px;} .contentslider-tab-cate .sliderkit-nav-clip{ position:absolute; top:0px; left:0px;} .contentslider-tab-cate .sliderkit-nav-clip li{ display:block; padding:0px; margin:0px; width:100px; height:47px; font-size:15px; list-style:none; float:left ;border-right:1px solid #dedede; } .contentslider-tab-cate .sliderkit-nav-clip li:first-child {width:100px; border-left:1px solid #dedede;} .contentslider-tab-cate .sliderkit-nav-clip li a{ cursor:pointer; height:47px; color:#555; background-color:#f0f0f0; display:block; line-height:47px; font-weight:normal; font-size:13px; letter-spacing:-0.5px;} .contentslider-tab-cate .sliderkit-nav-clip li a:hover { color:#525252; background-color:#fff; display:block; font-weight:normal; } .contentslider-tab-cate .sliderkit-nav-clip li.sliderkit-selected a {color:#111; background-color:#fff; font-weight:bold; height:47px;} .contentslider-tab-cate .sliderkit-panels {width:1278px; height:506px;} .contentslider-tab-cate .sliderkit-panel {width:1278px; height:506px; overflow-y:scroll;} .contentslider-tab-cate .sliderkit-go-prev a{position:absolute;width:38px;height:46px;cursor:pointer;background:url("/design/fishwiz/0704everday/brand_cate_left.gif") no-repeat; z-index:2222; right:39px; top:0px; border-top:1px solid #dedede; border-left:1px solid #dedede;} .contentslider-tab-cate .sliderkit-go-next a{position:absolute; width:38px;height:46px;cursor:pointer;background:url("/design/fishwiz/0704everday/brand_cate_right.gif") no-repeat; z-index:2222; right:0px; top:0px; border-top:1px solid #dedede; border-left:1px solid #dedede;} #header .section3 #left_menu > li {padding:0;text-align:center;position:relative;display:inline-block;float:left;height:44px;padding-left:24px;} #header .section3 #left_menu > li:nth-child(15) {display:none;} #header .section3 #left_menu > li:nth-child(16) {display:none;} #header .section3 #left_menu > li:nth-child(17) {display:none;} #header .section3 #left_menu > li:nth-child(18) {display:none;} #header .section3 #left_menu > li:nth-child(19) {display:none;} #header .section3 #left_menu > li:nth-child(20) {display:none;} #header .section3 #left_menu > li:nth-child(21) {display:none;} #header .section3 #left_menu > li:nth-child(22) {display:none;} #header .section3 #left_menu > li:nth-child(23) {display:none;} #header .section3 #left_menu > li:nth-child(24) {display:none;} #header .section3 #left_menu > li:nth-child(25) {display:none;} #header .section3 #left_menu > li:nth-child(26) {display:none;} #header .section3 #left_menu > li:nth-child(27) {display:none;} #header .section3 #left_menu > li:nth-child(28) {display:none;} #header .section3 #left_menu > li:nth-child(29) {display:none;} #header .section3 #left_menu > li:nth-child(30) {display:none;} #header .section3 #left_menu > li:nth-child(31) {display:none;} #header .section3 #left_menu > li:nth-child(32) {display:none;} #header .section3 #left_menu > li:nth-child(33) {display:none;} #header .section3 #left_menu > li > a {display:block;font-size:14px; color:#444; font-weight:600; height:44px;line-height:44px;} #header .section3 #left_menu > li .mouse_hover, #header .section3 #left_menu > li > a:hover {box-shadow:0 -3px 0 0 #111111 inset;color:#000;} #header .section3 #left_menu > li .sub1 {background-color:#fff;display:none; position:absolute;top:44px;left:-1px;z-index:20;width:auto;min-width:150px;border:0;border-radius:0 0 10px 10px;box-shadow:0 10px 25px rgba(0,0,0,0.15);padding:6px;} #header .section3 #left_menu > li .sub1 > li {position:relative;height:38px;} #header .section3 #left_menu > li .sub1 > li .sub_cate_on_arrow {position:absolute;top:50%;right:2px;background:url('/design/fishwiz/0704everday/sub_cate_on.png') no-repeat;z-index:20;width:5px;height:8px;margin-top:-2px;-webkit-transition:-webkit-transform 150ms ease-out;-moz-transition:transform 150ms ease-out;-ms-transition:transform 150ms ease-out;-o-transition:transform 150ms ease-out;transition:transform 150ms ease-out} #header .section3 #left_menu > li .sub1 > li .sub_cate_on_arrow.rotateon {-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)} #header .section3 #left_menu > li .sub1 > li > a {text-align:left;display:block;border-top:0;border-radius:6px;line-height:38px; height:38px;font-size:13px;color:#555;padding:0 18px 0 12px;margin:0;white-space:nowrap;} #header .section3 #left_menu > li .sub1 > li > .sub_mouse_hover, #header .section3 #left_menu > li .sub1 > li > a:hover {color:#111;background-color:#f7f7f7;text-decoration:none;} #header .section3 #left_menu > li .sub1 > li:first-child > a {border:0;} #header .section3 #left_menu > li .sub1 > li .sub2 {display:none; position:absolute;top:-10px;left:100%;z-index:21;width:auto;min-width:140px;background-color:#fff;border:0;padding:6px;border-radius:10px;-webkit-border-radius:10px; -moz-border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.15);} #header .section3 #left_menu > li .sub1 > li .sub2 > li {height:38px;} #header .section3 #left_menu > li .sub1 > li .sub2 > li > a {text-align:left;display:block;border-top:0;border-radius:6px;line-height:38px; height:38px;font-size:13px;color:#555;padding:0 18px 0 12px;margin:0;white-space:nowrap;} #header .section3 #left_menu > li .sub1 > li .sub2 > li > a:hover {color:#111;background-color:#f7f7f7;text-decoration:none;} #header .section3 #left_menu > li .sub1 > li .sub2 > li:first-child > a {border:0;} /*#header .section3 #left_menu > li:first-child {margin:0;padding:0;} #header .section3 #left_menu > li:first-child > a {display:block;padding:0 10px;border-right:1px solid #dedede;} #header .section3 #left_menu > li:first-child .mouse_hover, #header .section3 #left_menu > li:first-child > a:hover {background-color:#f5f5f5;box-shadow:0 0 0 0 rgba(0,0,0,0) inset;}*/ /* 상단 카테고리(고정) */ #comment_top.fixed { position:fixed; top:0px; left:0px; z-index:222; background-color:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.08);} /* 다찾다 자동완성*/ .search-auto-complete-list { display:none; z-index:6; position:absolute; top:53px; left:236px; width:317px; border:1px solid #ddd; border-top:1px solid #000; line-height:14px; background:#fff; } .search-auto-complete-list ul { width:202px; padding:4px 0 6px; border-bottom:1px solid #ddd; } .search-auto-complete-list ul li { text-align:left; } .search-auto-complete-list ul li.on { background:#f3f3f3; } .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; } .search-auto-complete-list ul li a strong { color:#ab3e41; } .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } /* ===================================================== */ /* ✅ 무료배송 안내 띠 (헤더와 카테고리 바 사이) */ /* ===================================================== */ .freebar {width:100%; background-color:#111; color:#fff; text-align:center; font-size:13px; height:38px; line-height:38px; font-weight:600; letter-spacing:-0.2px;} /* ============================================================ FISHWIZ PC 헤더 블랙+골드 리스타일 (오버라이드) → 기존 header.1.css 맨 아래에 "추가"만 하면 됨. 원본 규칙 유지. 색: 블랙 #14181D · 골드 #F0D025 · 세일 주황 #C8420F · 화이트 폭 1280은 원본 그대로 유지. ============================================================ */ /* ── 1단 유틸리티 바 → 다크 ───────────────────────── */ #header .section { background-color:#14181d !important; border-bottom:0 !important; } #header .section .section_box .inner1 li a, #header .section .section_box .inner2 li a { color:#c9ced4 !important; } #header .section .section_box .inner1 li a:hover, #header .section .section_box .inner2 li a:hover { color:#F0D025 !important; } #header .section .top_sns img { filter:brightness(0) invert(1); opacity:.85; } /* ── 2단 검색창 → 블랙 테두리 필 ─────────────────── */ #header .section2 .search { background-color:#f1f3f6 !important; border:2px solid #14181d !important; } #header .section2 .search .btn_sh2 { background-color:#14181d !important; } /* ── 무료배송 스트립 (다크 통일) ─────────────────── */ .freebar { background-color:#14181d !important; color:#fff !important; } /* ── 3단 GNB 흰 배경 ─────────────────────────────── */ #header .section3 { background-color:#fff !important; } #header .section3 #all_cate_open .bar { background-color:#14181d !important; } /* 메인 GNB 링크 */ #header .section3 #left_menu > li > a { color:#41474e !important; font-weight:600 !important; } #header .section3 #left_menu > li:hover > a { color:#14181d !important; } /* GNB hover 시 골드 언더라인 */ #header .section3 #left_menu > li:hover > a::after { content:''; position:absolute; left:24px; right:0; bottom:0; height:3px; background:#F0D025; } /* GNB 드롭다운(2·3차) 카드 */ #header .section3 #left_menu .sub1, #header .section3 #left_menu .sub2 { background:#fff !important; border:1px solid #eef1f4 !important; box-shadow:0 20px 40px rgba(20,24,29,.12) !important; border-radius:0 0 12px 12px !important; } #header .section3 #left_menu .sub1 a:hover, #header .section3 #left_menu .sub2 a:hover { color:#8a7207 !important; } /* ── 전체 카테고리 메가패널 ──────────────────────── */ #header .section3 #all_cate_area { border:1px solid #e2e6ea !important; box-shadow:0 15px 35px rgba(20,24,29,.15) !important; } #header .section3 #all_cate_area .all_cate_close { background-color:#14181d !important; } #header .section3 #all_cate_area .all_cate_close a { background:none !important; color:#fff !important; } /* 옛 배경 gif 제거 → 깔끔한 흰 배경 */ #header .section3 #all_cate_area .all_cate_section02 { background:none !important; } #header .section3 #all_cate_area .all_cate_section02 ul li.a_sub_title a { color:#14181d !important; border-bottom:2px solid #F0D025 !important; } #header .section3 #all_cate_area .all_cate_section02 .a_sub_cate a:hover { color:#8a7207 !important; } /* ── 브랜드 버튼 (자리 유지, 다음 단계에서 메이크샵 브랜드 기능으로 교체) ── */ #header .section3 .top_b_menu a { color:#14181d !important; font-weight:700 !important; } /* ============================================================ 피시위즈 PC 헤더 v2.0 (2026-07-25) — 리디자인 v2 / 1a 확정안 이 블록만 헤더를 담당한다. 위쪽 구 헤더 규칙(.section / .section2 / .section3 / .freebar / #left_menu)은 마크업이 사라져 더 이상 매칭되지 않는다. ============================================================ */ #hdWrap {background:#fff;} #header {position:relative; background:#fff;} #header .hd-in {width:1280px; margin:0 auto; padding:0 28px; box-sizing:border-box;} /* ───── 1단 유틸바 ───── */ #header .hd-util {background:#14181d;} #header .hd-util .hd-in {height:38px; display:flex; align-items:center; justify-content:space-between;} #header .hd-promo {display:flex; align-items:center; gap:9px; margin:0; font-size:12px; color:#c3c9cf;} #header .hd-promo svg {width:15px; height:15px; flex:none;} #header .hd-promo b {color:#F0D025; font-weight:700;} #header .hd-links {display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;} #header .hd-links li {float:none;} #header .hd-links a {display:block; padding:0 11px; font-size:12px; color:#a8b0b8; line-height:38px;} #header .hd-links a:hover {color:#fff;} #header .hd-links a.is-gold {color:#F0D025; font-weight:600;} #header .hd-links .hd-sns {display:flex; align-items:center; gap:10px; margin-left:9px; padding-left:17px; border-left:1px solid #343b43;} #header .hd-links .hd-sns a {padding:0; line-height:0;} #header .hd-links .hd-sns svg {width:15px; height:15px;} #header .hd-links .hd-sns a:hover svg {stroke:#F0D025;} /* ───── 2단 로고 · 검색 · 퀵 ───── */ #header .hd-main .hd-in {display:flex; align-items:center; gap:34px; padding-top:19px; padding-bottom:19px;} #header .hd-logo {flex:none; line-height:0;} #header .hd-logo img {height:52px; width:auto; display:block;} /* 로고 : SVG 안에 위아래 빈 여백이 17/83 씩 있어서 52px 로 놓으면 글자가 31px 밖에 안 됐다. 그 여백만 잘라내 글자 높이를 검색창(46)과 같게 맞춘다. viewBox 0 0 186 83 · 글자 y17~66 → 46 ÷ 49 × 83 = 78, 위로 16 올려 잘라낸다. */ #header .hd-logo.hd-logo-fit {height:46px; overflow:hidden;} #header .hd-logo.hd-logo-fit a {display:block; height:46px; overflow:hidden;} #header .hd-logo.hd-logo-fit img {height:78px; width:auto; margin-top:-16px;} #header .hd-search {flex:1; max-width:560px; position:relative;} #header .hd-search fieldset {border:0; margin:0; padding:0; display:flex; align-items:center; gap:10px; height:46px; border:2px solid #14181d; border-radius:999px; padding:0 5px 0 20px; box-sizing:border-box;} #header .hd-search legend {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);} #header .hd-search .hd-sch-input, #header .hd-search input[type="text"] {flex:1; min-width:0; height:40px; border:0; outline:0; background:none; font-size:14px; color:#14181d; padding:0;} #header .hd-search input::placeholder {color:#9aa0a8;} #header .hd-sch-btn {width:36px; height:36px; border-radius:50%; background:#14181d; display:flex; align-items:center; justify-content:center; flex:none;} #header .hd-sch-btn svg {width:17px; height:17px;} #header .hd-sch-btn:hover {background:#2b3138;} #header .hd-search .search-auto-complete-list {display:none; position:absolute; z-index:120; top:52px; left:0; width:100%; background:#fff; border-radius:14px; box-shadow:0 10px 30px rgba(20,24,29,.14); overflow:hidden; text-align:left;} #header .hd-search .search-auto-complete-list ul {padding:6px 0; border-bottom:1px solid #eef1f4;} #header .hd-search .search-auto-complete-list li a {display:block; padding:10px 18px; font-size:13.5px; color:#14181d;} #header .hd-search .search-auto-complete-list li a:hover {background:#f6f7f9;} #header .hd-search .search-auto-complete-list li a strong {color:#c8420f;} #header .hd-search .search-auto-complete-list .search-list-close {display:block; padding:10px 18px; text-align:right; font-size:12px; color:#8a9099;} #header .hd-quick {margin-left:auto; display:flex; gap:30px;} #header .hd-quick > a {display:flex; flex-direction:column; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:#41474e; position:relative;} #header .hd-quick svg {width:26px; height:26px;} #header .hd-quick > a:hover {color:#14181d;} #header .hd-quick .hd-cnt {position:absolute; top:-5px; right:2px; background:#F0D025; color:#111; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:11px; font-style:normal; border-radius:10px; padding:1px 6px; line-height:1.4;} #header .hd-quick .hd-cnt:empty {display:none;} /* ───── 3단 GNB ───── */ #header .hd-gnb {position:relative; background:#fff; border-top:1px solid #eef1f4; border-bottom:2px solid #14181d; z-index:100;} #header .hd-gnb .hd-in {display:flex; align-items:stretch; position:relative;} #header .gnb-all {display:flex; align-items:center; gap:8px; height:52px; padding-right:20px; margin-right:6px; font-size:15px; font-weight:700; color:#14181d; flex:none;} #header .gnb-all svg {width:17px; height:17px;} #header .gnb-list {display:flex; align-items:stretch; list-style:none; margin:0; padding:0; flex:1; min-width:0;} #header .gnb-list > li {position:static; float:none;} #header .gnb-list .gnb-1 {display:flex; align-items:center; height:52px; padding:0 13px; font-size:15px; font-weight:600; color:#2b3138; white-space:nowrap;} #header .gnb-list > li:hover .gnb-1 {font-weight:700; color:#14181d; background:#f6f7f9; box-shadow:inset 0 -3px 0 #F0D025;} #header .gnb-brand {flex:none; align-self:center; margin-left:auto; border:1.5px solid #14181d; border-radius:999px; padding:7px 17px; font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:.09em; color:#14181d; white-space:nowrap;} #header .gnb-brand:hover {background:#14181d; color:#fff;} /* 메가메뉴 */ #header .gnb-mega {display:none; position:absolute; left:0; right:0; top:100%; z-index:110; grid-template-columns:1fr 264px; gap:30px; padding:26px 28px 30px; background:#fff; border-top:1px solid #eef1f4; box-shadow:0 22px 40px rgba(20,24,29,.13);} #header .gnb-list > li:hover .gnb-mega {display:grid;} /* 화면에 들어온 순간 커서가 이미 GNB 위에 있으면 메뉴가 저절로 열린다. 그래서 커서가 GNB 밖에서 안으로 들어올 때만 열리게 한다 (header.1.js). 표시는 class 가 아니라 data-nohover 로 한다 — 이 칸은 id 가 comment_top 이라 다른 스크립트가 class 를 다시 쓰면 잠금이 풀려 버린다. */ #header .hd-gnb[data-nohover] .gnb-list > li:hover .gnb-mega {display:none;} #header .hd-gnb[data-nohover] .gnb-list > li:hover .gnb-1 {font-weight:600; color:#2b3138; background:none; box-shadow:none;} #header .mega-cols {column-count:4; column-gap:26px;} #header .mega-col {break-inside:avoid; page-break-inside:avoid; display:flex; flex-direction:column; gap:11px; margin-bottom:24px;} #header .mega-col .mega-h {font-size:14px; font-weight:700; color:#14181d; padding-bottom:9px; border-bottom:1px solid #eef1f4;} #header .mega-col .mega-h:hover {color:#8a7207;} #header .mega-sub {display:flex; flex-direction:column; gap:8px;} #header .mega-sub a {font-size:13px; color:#5b6167;} #header .mega-sub a:hover {color:#14181d; text-decoration:underline; text-underline-offset:3px;} /* 패널이 길어질 때를 대비해 화면 안에서 스크롤 */ #header .gnb-mega {max-height:calc(100vh - 180px); overflow-y:auto;} #header .mega-side {display:flex; flex-direction:column; gap:14px; border-left:1px solid #eef1f4; padding-left:26px;} #header .mega-side-hd {display:flex; align-items:baseline; justify-content:space-between;} #header .mega-side-hd span {font-size:13px; font-weight:700; color:#14181d;} #header .mega-side-hd a {font-size:11.5px; color:#8a9099;} #header .mega-brands {display:grid; grid-template-columns:1fr 1fr; gap:7px;} #header .mega-brands a {height:36px; border:1px solid #eef1f4; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-size:11.5px; font-weight:600; color:#41474e; text-align:center; line-height:1.2;} #header .mega-brands a:hover {border-color:#14181d; color:#14181d;} #header .mega-sale {margin-top:2px; background:#14181d; border-radius:11px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:9px;} #header .mega-sale .ms-logo {width:150px; max-width:100%; height:auto; object-fit:contain;} /* 2:1 가로 워드마크 · 골드 원본 그대로 */ #header .mega-sale .ms-tag {font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:700; color:#F0D025; letter-spacing:.09em;} #header .mega-sale .ms-txt {font-size:13.5px; font-weight:600; color:#fff; line-height:1.45; text-align:center;} /* ───── 공지 스트립 롤링 ───── */ #header .hd-nt-roll {position:relative; flex:1; min-width:0; height:20px; overflow:hidden;} #header .hd-nt-roll .hd-nt-txt {position:absolute; left:0; right:0; top:0; height:20px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:0; transform:translateY(100%); transition:transform .38s ease, opacity .38s ease;} #header .hd-nt-roll .hd-nt-txt.is-on {opacity:1; transform:translateY(0);} #header .hd-nt-roll .hd-nt-txt.is-out {opacity:0; transform:translateY(-100%);} #header .hd-nt-dots {display:flex; gap:4px; flex:none; margin-left:10px;} #header .hd-nt-dots i {width:5px; height:5px; border-radius:50%; background:rgba(138,114,7,.3);} #header .hd-nt-dots i.on {background:#8a7207;} /* ───── 전체 카테고리 패널 ───── */ #header #all_cate_area {display:none; position:absolute; left:0; right:0; top:100%; z-index:115; width:auto; background:#fff; border-top:1px solid #eef1f4; box-shadow:0 22px 40px rgba(20,24,29,.13);} #header #all_cate_area .all_cate_section01 {display:flex; align-items:center; justify-content:space-between; padding:16px 28px; border-bottom:1px solid #eef1f4; background:#fff; width:auto; height:auto;} #header #all_cate_area .all_cate_close a {font-size:13px; font-weight:700; color:#14181d;} #header #all_cate_area .all_cate_comm {display:flex; gap:18px;} #header #all_cate_area .all_cate_comm a {font-size:13px; color:#5b6167;} #header #all_cate_area .box_sec2 {padding:24px 28px 30px;} #header #all_cate_area .all_cate_section02 {column-count:5; column-gap:26px; width:auto; height:auto;} #header #all_cate_area .all_cate_section02 ul {break-inside:avoid; margin:0 0 22px; padding:0; list-style:none; width:auto; float:none;} #header #all_cate_area .all_cate_section02 li {float:none; width:auto;} #header #all_cate_area .all_cate_section02 .a_sub_title {padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid #eef1f4;} #header #all_cate_area .all_cate_section02 .a_sub_title a {font-size:14px; font-weight:700; color:#14181d;} #header #all_cate_area .all_cate_section02 .a_sub_cate {position:relative; padding:4px 0;} #header #all_cate_area .all_cate_section02 .a_sub_cate > a {font-size:13px; color:#5b6167;} #header #all_cate_area .all_cate_section02 .a_sub_cate > a:hover {color:#14181d;} #header #all_cate_area .all_cate_sub {display:none; padding:5px 0 8px 10px;} #header #all_cate_area .all_cate_sub li a {font-size:12.5px; color:#8a9099; line-height:1.9;} #header #all_cate_area .all_cate_sub li a:hover {color:#14181d;} #header #all_cate_area .sub_cate_on_arrow {display:none;} /* ───── 브랜드 레이어 ───── */ #header #all_cate_area2 {display:none; position:absolute; left:0; right:0; top:100%; z-index:115; width:auto; background:#fff; border-top:1px solid #eef1f4; box-shadow:0 22px 40px rgba(20,24,29,.13);} #header #all_cate_area2 .all_cate_section01 {padding:16px 28px; border-bottom:1px solid #eef1f4; width:auto; height:auto;} #header #all_cate_area2 .all_cate_close a {font-size:13px; font-weight:700; color:#14181d;} #header #all_cate_area2 .contentslider-tab-cate {padding:20px 28px 28px;} #header #all_cate_area2 .sliderkit-nav-clip ul {display:flex; gap:8px; list-style:none; margin:0 0 18px; padding:0;} #header #all_cate_area2 .sliderkit-nav-clip li {float:none;} #header #all_cate_area2 .sliderkit-nav-clip li a {display:block; padding:8px 16px; border:1px solid #eef1f4; border-radius:999px; font-size:12.5px; font-weight:600; color:#5b6167; cursor:pointer;} #header #all_cate_area2 .sliderkit-nav-clip li.sliderkit-selected a {background:#14181d; border-color:#14181d; color:#fff;} #header #all_cate_area2 .all_cate_section02_2 > ul {display:grid; grid-template-columns:repeat(3,1fr); gap:26px; list-style:none; margin:0; padding:0;} #header #all_cate_area2 .all_cate_section02_2 li {float:none; width:auto;} #header #all_cate_area2 .a_sub_title {padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid #eef1f4;} #header #all_cate_area2 .a_sub_title a {font-size:15px; font-weight:800; color:#14181d;} #header #all_cate_area2 .a_sub_cate {display:flex; flex-wrap:wrap; gap:6px 14px;} #header #all_cate_area2 .a_sub_cate a {font-size:12.5px; color:#5b6167;} #header #all_cate_area2 .a_sub_cate a:hover {color:#14181d; text-decoration:underline; text-underline-offset:3px;} #header #all_cate_area2 .sliderkit-btn {display:none;} /* ───── 공지 스트립 ───── */ #header .hd-notice {background:#fdf6cf;} #header .hd-notice .hd-in {display:flex; align-items:center; gap:12px; height:40px;} #header .hd-notice .hd-nt-tag {flex:none; font-size:10.5px; font-weight:800; letter-spacing:.4px; background:#c8420f; color:#fff; border-radius:4px; padding:3px 7px;} #header .hd-notice .hd-nt-txt {font-size:13px; font-weight:600; color:#14181d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #header .hd-notice .hd-nt-bar {flex:none; width:1px; height:12px; background:#e2d9a8;} #header .hd-notice .hd-nt-more {flex:none; font-size:12.5px; color:#8a7207;} #header .hd-notice .hd-nt-close {margin-left:auto; flex:none; border:0; background:none; padding:0; cursor:pointer; line-height:0;} #header .hd-notice .hd-nt-close svg {width:14px; height:14px;} /* ───── GNB 스크롤 고정 ───── */ #header .hd-gnb.fixed {position:fixed; top:0; left:0; right:0; width:100%; background:#fff; box-shadow:0 6px 18px rgba(20,24,29,.10);} #header .hd-gnb.fixed .hd-in {width:1280px; margin:0 auto;} /* GNB 특가세일 슬롯 · 칸 수 늘어날 때 대비 */ #header .gnb-list > li.is-sale .gnb-1 {color:#c8420f; font-weight:700;} #header .gnb-list > li.is-sale:hover .gnb-1 {background:#fbeae4; box-shadow:inset 0 -3px 0 #c8420f;} #header .gnb-list > li:not([data-codes]):hover .gnb-1 {background:none; box-shadow:none;} #header .gnb-list .gnb-1 {padding:0 12px;} /* ───── 브랜드 레이어 : sliderkit 의존 제거 (탭은 header.1.js 가 직접 처리) ───── header.1.css 위쪽 전역 규칙 .sliderkit{display:none} 을 이 레이어에서만 되살린다. */ #header #all_cate_area2 .sliderkit {display:block; position:static;} #header #all_cate_area2 .sliderkit-nav {position:static;} #header #all_cate_area2 .sliderkit-nav-clip {position:static; width:auto; height:auto; overflow:visible;} #header #all_cate_area2 .sliderkit-panels {position:static; width:auto; height:auto; overflow:visible;} #header #all_cate_area2 .sliderkit-panel {display:none; position:static; width:auto; height:auto; float:none;} #header #all_cate_area2 .sliderkit-panel.is-on {display:block;} #header #all_cate_area2 .sliderkit-nav-clip li a {display:block; padding:8px 16px; border:1px solid #eef1f4; border-radius:999px; font-size:12.5px; font-weight:600; color:#5b6167; cursor:pointer; background:#fff;} #header #all_cate_area2 .sliderkit-nav-clip li.is-on a {background:#14181d; border-color:#14181d; color:#fff;} #header #all_cate_area2 .all_cate_section02_2 > ul.pdt30 {margin-top:26px;} /* 구형 sliderkit 스타일시트가 고정 폭·높이·overflow 를 박아둬서 기하값만 강제로 푼다 */ #header #all_cate_area2 .sliderkit, #header #all_cate_area2 .sliderkit-nav, #header #all_cate_area2 .sliderkit-nav-clip, #header #all_cate_area2 .sliderkit-panels, #header #all_cate_area2 .sliderkit-panel {width:auto !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; position:static !important; float:none !important; left:auto !important; top:auto !important;} #header #all_cate_area2 .sliderkit-nav-clip ul {height:auto !important; width:auto !important;} #header #all_cate_area2 .sliderkit-nav-clip li {width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; background:none !important;} #header #all_cate_area2 .sliderkit-panel {display:none !important;} #header #all_cate_area2 .sliderkit-panel.is-on {display:block !important;} /* 브랜드 레이어 : 구 스킨의 가운데 정렬·고정 line-height 정리 */ #header #all_cate_area2 .all_cate_section02_2, #header #all_cate_area2 .all_cate_section02_2 * {text-align:left;} #header #all_cate_area2 .all_cate_section02_2 > ul {align-items:start;} #header #all_cate_area2 .sliderkit-nav-clip li a {line-height:1.25 !important; height:auto !important; text-align:center;} #header #all_cate_area2 .a_sub_cate {align-content:flex-start;} /* ============================================================ v2.1 (2026-08-01) — 전체 카테고리 패널 · 브랜드 레이어 폭 1280 제한 left:0;right:0 이면 부모(전체 폭 GNB 바)를 그대로 따라 화면 끝까지 늘어난다. 화면이 1280보다 넓든 좁든 가운데 1280으로 고정한다. ============================================================ */ #header #all_cate_area, #header #all_cate_area2 {left:50%; right:auto; width:1280px; max-width:1280px; margin-left:-640px;} /* 발송 안내 띠 — 오늘 발송이 되는 날은 노란 강조, 마감 뒤·휴무일은 옅게 */ .freebar .fw-shipnow,.hd-promo .fw-shipnow{font-weight:800;color:#FFD400;} .freebar.fw-shipoff .fw-shipnow,.hd-promo.fw-shipoff .fw-shipnow{color:#c9ced4;} /* ============================================================ ★ 2026-08-11 — 좌측 카테고리가 길면 필터 칸이 밀려 내려간다 분류를 펼치면 카테고리 카드가 300px 을 넘고, 그만큼 필터가 아래로 밀려 쓰기 어려웠다. 카테고리 목록만 높이를 묶고 스크롤을 넣는다. 현재 분류는 header.1.js 가 보이는 자리로 끌어올린다. ============================================================ */ #wrap .fw-catlist {max-height:300px !important; overflow-y:auto !important; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#CFD5DC transparent;} #wrap .fw-catlist::-webkit-scrollbar {width:6px;} #wrap .fw-catlist::-webkit-scrollbar-thumb {background:#CFD5DC; border-radius:3px;} #wrap .fw-catlist::-webkit-scrollbar-track {background:transparent;} #wrap .fw-catlist > * {padding-right:2px;} /* BASIC css end */