@charset "utf-8";
/* CSS Document */
/**
* custom css 입니다. 추가적인 css 는 여기에 작성을 해주세요.
*/
/* ===========================================================
footer 개편 (2026-10-02)
대상: outline/footer/standard.html
custom.css 는 layout.css 뒤에 로드되므로 여기 규칙이 우선합니다.
정렬 방식: layout.css 가 .content_info / .foot_cont 에 width:1200px; margin:0 auto
를 주고 있으나, 내부 블록이 float:left 라 1200px 안에서 왼쪽에 몰렸습니다.
float 을 걷어내고 inline-block + text-align:center 로 묶음 자체를 가운데 정렬합니다.
(부모 font-size:0 은 inline-block 사이 공백 제거용 — 자식에서 다시 지정)
=========================================================== */
/* --- 상단 정보 3단 (CS CENTER / BANK INFO / NOTICE) --- */
.content_info_wrap{background:#f7f7f7; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}
.content_info{overflow:hidden; padding:28px 0 22px 0; text-align:left; font-size:0;}
.content_info h3{padding:0 0 12px 0; color:#333333; font-size:12px; font-weight:bold; letter-spacing:0.08em;}
.content_info .cs_center,
.content_info .bank_info,
.content_info .notice_list{float:none; display:inline-block; vertical-align:top; text-align:left; font-size:12px;}
.content_info .cs_center{width:140px; padding:0 30px 0 0;}
.content_info .bank_info{width:205px; padding:0 30px; border-left:1px solid #e0e0e0;}
.content_info .cs_center,
.content_info .bank_info,
.content_info .notice_list{min-height:112px;}
.content_info .notice_list{width:400px; padding:0 0 0 30px; border-left:1px solid #e0e0e0;}
/* 전화번호 / 계좌번호 - 굵은 검정 큰 글씨 */
.content_info .cs_center strong,
.content_info .bank_info strong{display:block; padding:0 0 10px 0; color:#1a1a1a; font-size:23px; font-weight:bold; letter-spacing:-0.02em; line-height:1.1;}
.content_info .cs_center p,
.content_info .bank_info p{color:#a8a8a8; font-size:11px; line-height:1.35;}
.content_info .bank_info em{font-style:normal; font-weight:normal;}
/* NOTICE 목록 - 앞에 가운데점 */
.content_info .notice_list h3 > a{color:#333333;}
.content_info .notice_list li{padding:1px 0; color:#999999; font-size:11px; line-height:1.35;}
.content_info .notice_list li:before{content:"\00B7"; padding:0 6px 0 0; color:#999999;}
.content_info .notice_list li span{display:none;} /* NEW 아이콘 자리 비움 */
.content_info .notice_list a{display:inline; overflow:visible; width:auto; color:#666666; white-space:normal;}
/* --- 하단 회사정보 --- */
#footer_wrap{border-top:0 none;}
#footer{overflow:hidden; padding:0 0 6px 0; background:#ffffff;}
.foot_cont{overflow:hidden; padding:18px 0 6px 0; color:#b0b0b0; font-size:0; line-height:1.35; text-align:left;}
/* 로고 칸 폭 = 상단 CS CENTER 칸(140+30) + 구분선(1) + BANK INFO 왼쪽여백(30) = 201px
→ 아래 메뉴·주소 블록이 BANK INFO 와 같은 선에서 시작합니다. */
.foot_cont .foot_logo{float:none; display:inline-block; vertical-align:top; width:201px; padding:26px 0 0 0; text-align:left; font-size:12px;}
.foot_cont .foot_logo img{max-width:200px; height:auto;}
.foot_cont .foot_info{float:none; display:inline-block; vertical-align:top; width:auto; max-width:760px; text-align:left; font-size:12px;}
/* 메뉴 줄 */
.foot_cont .foot_list{border-bottom:0 none; padding:0 0 12px 0;}
.foot_cont .foot_list ul{overflow:hidden; width:auto; margin:0;}
.foot_cont .foot_list ul li{float:left; padding:0 28px 0 0;}
.foot_cont .foot_list ul li a{padding:0; color:#333333; font-size:12px; border-left:0 none;}
.foot_cont .foot_list ul li a strong{font-weight:bold; color:#222222;}
.foot_cont .foot_list ul li a:hover{text-decoration:underline;}
/* 주소 블록 */
.foot_cont address{display:block; font-style:normal; color:#b0b0b0; font-size:11px; line-height:1.35;}
.foot_cont address a{color:#999999;}
.foot_cont address .bar{padding:0 4px; color:#d5d5d5;}
.foot_cont address .btn_licensee_info{color:#333333; font-weight:bold; text-decoration:none;}
.foot_cont address .btn_licensee_info:hover{text-decoration:underline;}
/* 카피라이트 - 도메인만 강조 */
.foot_cont .copyright{clear:none; float:none; width:auto; padding:6px 0 0 0; color:#bdbdbd; font-size:11px; line-height:1.35;}
.foot_cont .copyright strong{color:#888888; font-weight:bold;}
/* 인증마크 영역 */
.foot_certify{padding:4px 0 0 0; text-align:center;}
.foot_certify span{display:inline-block; vertical-align:middle; margin:0 6px;}
/* ===========================================================
헤더 디자인 (2026-10-02) - 도매몰 참고 이미지 기준
대상: outline/header/standard.html
카테고리 항목과 로고 이미지는 관리자 등록분을 그대로 받아 이 스타일이 입혀집니다.
=========================================================== */
/* --- 상단 유틸바는 아래 "최상단 유틸바 재구성" 블록에서 정의합니다 --- */
/* --- 로고 / 검색 줄 --- */
#header .header_search{border-bottom:0 none; background:#ffffff;}
#header .header_search_cont{min-height:94px;}
/* 검색창 - 좌측 배치 + 축소
기본 스킨(layout.css)이 .top_text_cont{width:333px} 와
.top_text_cont .top_srarch_text{width:100%; height:33px} 로 잡고 있어
같은 선택자 깊이로 덮어써야 합니다. 테두리도 .top_search 쪽에 있습니다.
입력창과 버튼 높이를 30px 로 통일해 아래 선이 어긋나지 않게 맞췄습니다. */
#header .top_search{top:20px; left:0; right:auto; border:1px solid #17b3a3;}
#header .top_search .top_text_cont{width:320px; background:#ffffff;} /* 가로 길이는 이 값 */
#header .top_search .top_text_cont .top_srarch_text{width:100%; height:30px; padding:0 40px 0 10px; border:0 none; font-size:12px; line-height:30px; box-sizing:border-box;}
#header .top_search .top_text_cont .btn_top_srarch{width:32px; height:30px; margin:0; padding:0; background:#17b3a3; border-left:0 none;}
/* 고객센터 번호 - 검색창 아래, 위쪽 여백 확보 */
#header .header_cs{position:absolute; top:66px; left:0; margin:0; line-height:1;}
#header .header_cs span{color:#999999; font-size:11px;}
#header .header_cs strong{color:#222222; font-size:14px; font-weight:bold; letter-spacing:-0.01em;}
/* --- GNB 바 --- */
#header .header_gnb{background:#2f3b45;}
#header .gnb{height:40px;}
/* ALL CATEGORY 버튼 (청록) */
#header .gnb .gnb_all{position:relative; display:inline-block; vertical-align:top; width:190px; height:40px; background:#17b3a3;}
#header .gnb .gnb_all strong{display:block; padding:0 0 0 48px; color:#ffffff; font-size:14px; font-weight:bold; line-height:40px; letter-spacing:0.02em;}
#header .gnb .gnb_all .btn_all_menu_open{position:absolute; top:0; left:0; width:190px; height:40px; padding:0; background-color:transparent; line-height:40px; text-align:left; font-size:0;}
#header .gnb .gnb_all .btn_all_menu_open img{display:none;} /* 48x49 PNG 제거 - 아래에서 CSS 로 그림 */
/* 햄버거 아이콘 - CSS 로 그려 어떤 배율에서도 선명하고 글씨와 겹치지 않음 (20~38px, 글씨는 48px 부터) */
#header .gnb .gnb_all:before{content:""; position:absolute; top:50%; left:20px; width:18px; height:2px; margin-top:-1px; background:#ffffff; box-shadow:0 -6px 0 #ffffff, 0 6px 0 #ffffff; pointer-events:none; z-index:1;}
/* 전체카테고리 닫기(X) 버튼 - 흰 패널 안쪽 우측 상단.
기준 요소가 패널이 아니라 .gnb(검정 바, 높이 40px) 라서 40 + 12 = 52px 로 내려야 패널 안으로 들어갑니다. */
.btn_all_menu_close{top:52px; left:auto; right:12px; width:34px; height:34px; background-image:none; background-color:#17B3A3; border:0 none; z-index:10; cursor:pointer;}
.btn_all_menu_close:hover{background-color:#149c8e;}
.btn_all_menu_close:before,
.btn_all_menu_close:after{content:""; position:absolute; top:50%; left:50%; width:16px; height:2px; margin:-1px 0 0 -8px; background:#ffffff;}
.btn_all_menu_close:before{transform:rotate(45deg);}
.btn_all_menu_close:after{transform:rotate(-45deg);}
/* 상단 카테고리 메뉴 */
#header .gnb .gnb_menu_box{display:inline-block; vertical-align:top;}
#header .gnb .gnb_menu_box ul.depth0 > li{display:inline-block; vertical-align:top;}
#header .gnb .gnb_menu_box ul.depth0 > li > a{display:block; padding:0 26px; color:#ffffff; font-size:15px; font-weight:bold; line-height:40px;}
#header .gnb .gnb_menu_box ul.depth0 > li > a:hover{color:#17b3a3; text-decoration:none;}
/* 참고 이미지에 좌우 화살표가 없어 숨김 (카테고리가 많아져 넘칠 경우 되살리세요) */
#header .gnb .gnb_left,
#header .gnb .gnb_right{display:none;}
/* 전체카테고리 펼침 패널 - GNB 바 바로 아래로 */
#header .gnb_allmenu{top:40px; border:1px solid #d8d8d8; border-top:0 none;}
/* 로그인 회원 마일리지 안내 - 로고 우측 */
#header .header_mileage{position:absolute; top:52px; right:0; margin:0; color:#333333; font-size:14px; line-height:1;}
#header .header_mileage strong{color:#222222; font-weight:bold;}
#header .header_mileage strong.num{color:#1a6fd4; font-size:15px; font-weight:bold;}
/* ===========================================================
로그인 페이지 (2026-10-02)
대상: member/login.html
기존 스킨의 포인트색 #25B8A9(자주) / #666(회색) → #17B3A3 로 통일
=========================================================== */
/* 안내 이미지 - 테두리 박스 바깥, 가운데 (타이틀 h2 는 기본 텍스트 유지) */
/* 로그인 안내문 - 텍스트로 교체 (2026-10-06). 위아래 여백 확보 */
.member_wrap .login_need_txt{margin:30px 0 28px 0; text-align:center;}
.member_wrap .login_need_txt strong{display:block; color:#333333; font-size:20px; font-weight:bold; letter-spacing:-0.03em; line-height:1.3;}
.member_wrap .login_need_txt p{margin:9px 0 0 0; color:#999999; font-size:13px; line-height:1.4;}
/* 로그인 버튼 */
.member_cont .member_login_box .login_input_sec button{border:1px solid #17B3A3; background:#17B3A3;}
.member_cont .member_login_box .login_input_sec button:hover{border:1px solid #149c8e; background:#149c8e;}
/* 회원가입 */
.btn_member_join{border:1px solid #17B3A3; background:#17B3A3;}
.btn_member_join:hover{border:1px solid #149c8e; background:#149c8e; color:#ffffff;}
/* 아이디/비밀번호 찾기 - 외곽선형 */
.btn_member_white{color:#17B3A3; border:1px solid #17B3A3;}
.btn_member_white:hover{color:#149c8e; border:1px solid #149c8e;}
/* 비회원 주문하기 */
.btn_member_black{border:1px solid #17B3A3; background:#17B3A3;}
.btn_member_black:hover{border:1px solid #149c8e; background:#149c8e;}
/* 비회원 주문조회 확인 버튼 */
.member_cont .nonmember_order_box .order_input_sec button{border:1px solid #17B3A3; color:#17B3A3;}
.member_cont .nonmember_order_box .order_input_sec button:hover{border:1px solid #149c8e; color:#149c8e;}
/* 입력란 포커스 */
.member_cont .login_input_sec input:focus,
.member_cont .order_input_sec input:focus{border:1px solid #17B3A3; color:#333333;}
/* --- 로그인 페이지 수직 여백 축소 (2026-10-02) ---
기본 스킨 값: .member_cont padding 70/60, 입력란 margin 15/10, 버튼 height 91
입력란 간격을 줄인 만큼 로그인 버튼 높이도 같이 줄여야 두 입력란과 높이가 맞습니다.
입력란 2개 span = 36 + 10(사이) + 36 = 82px */
.member_wrap{margin:14px auto 30px auto;}
.member_tit h2{margin:0 0 12px 0; font-size:24px;}
/* (안내문 여백은 위 "로그인 안내문" 블록에서 정의) */
.member_cont{padding:38px 50px;}
.member_cont h3{font-size:16px; line-height:1.3;}
.member_cont .member_login_box .login_input_sec input,
.member_cont .nonmember_order_box .order_input_sec input{margin:10px 0 0 0;}
.member_cont .member_login_box .login_input_sec button,
.member_cont .nonmember_order_box .order_input_sec button{height:82px; margin:10px 0 0 0;}
.member_cont .member_login_box .id_chk{padding:12px 0 0 0;}
.member_cont .member_login_box .id_chk p{padding:4px 0 0 0;}
.member_cont .btn_login_box{margin:16px 0 0 0; padding:14px 0 0 0;}
.member_cont .nonmember_join_box,
.member_cont .nonmember_order_box{margin:26px 0 0 0;}
.member_cont .nonmember_join_box .btn_member_black{margin:12px 0 0 0;}
/* 본문 줄간격 */
.member_wrap, .member_cont{line-height:1.45;}
/* 비회원 영역 숨김 (2026-10-02)
비로그인 접근을 _header.html 에서 차단했으므로 "비회원 주문하기 / 주문조회"는 노출하지 않습니다.
되살리려면 이 블록만 지우면 됩니다. 템플릿(member/login.html)은 손대지 않았습니다. */
.member_cont .nonmember_join_box,
.member_cont .nonmember_order_box{display:none;}
/* ===========================================================
최상단 유틸바 재구성 (2026-10-02)
=========================================================== */
#header .header_top{position:relative; height:26px; border-bottom:1px solid #ececec; background:#F8F8F8;}
#header .header_top_cont{position:relative; height:26px;}
/* 즐겨찾기 추가 - 좌측 외곽선 박스 */
#header .top_favorite{position:absolute; top:3px; left:140px;}
#header .top_favorite a{display:inline-block; padding:0 9px; border:1px solid #e3e3e3; color:#888888; font-size:11px; line-height:18px; background:#ffffff;}
#header .top_favorite a:hover{color:#333333; border-color:#c8c8c8; text-decoration:none;}
/* 우측 메뉴 - flex 로 세로 가운데 정렬 (font-size/line-height 와 무관하게 정확히 중앙) */
#header .top_member_box{float:right; display:flex; align-items:center; position:relative; height:26px; margin:0 -40px 0 0; padding:0; line-height:1; z-index:150;}
#header .top_member_box > li{display:flex; align-items:center; height:26px;}
#header .top_member_box > li a{display:flex; align-items:center; height:26px; color:#888888; font-size:11px; line-height:1;}
#header .top_member_box > li a:hover{color:#333333;}
#header .top_member_box .txt_bar{display:block; width:1px; height:9px; margin:0 6px; background:#dcdcdc;}
/* 장바구니 아이콘 */
#header .top_member_box .top_cart .ico_cart{width:12px; height:11px; margin:0 4px 0 0; vertical-align:middle;}
/* 로고 - 가로 280px 만 지정 (세로는 비율대로 자동) */
#header .h1_logo img{width:280px;}
/* 로고 줄 여백 축소 (2026-10-06) - 기본 스킨은 padding:30px 0 30px 0 */
#header .h1_logo{padding:18px 0 16px 0;}
/* TOP 버튼 위치 (2026-10-06)
화면 하단에 고정(fixed). 가로 위치는 기존 우측 배너 칼럼과 동일하게 맞춤
콘텐츠가 85% 유동폭이므로 우측 여백(7.5%) 기준으로 붙입니다. 높이는 bottom 값. */
#scroll_right .btn_scroll_top{position:fixed; bottom:5%; left:auto; right:7.5%; margin-left:0; width:112px; padding:0; text-align:center; z-index:150;}
/* ===========================================================
상품목록 카테고리 헤더 (2026-10-06)
대상: goods/goods_list.php (goods/goods_list.html)
구버전 y_joy_2016 스킨의 구조를 이식:
3px 포인트 바 → 회색 제목줄(아이콘 + 카테고리명) → 하위 카테고리 → 3px 포인트 바
포인트색은 구버전 #43c8be 대신 현 사이트 색 #17B3A3 으로 통일했습니다.
아이콘(/img2/icon_submenu.gif)은 CSS 도형으로 대체해 배율과 무관하게 선명합니다.
=========================================================== */
/* 제목줄 - 상단 3px 바 + 회색 배경 */
.goods_list_item_tit{position:relative; margin:0; padding:0; border-top:3px solid #17B3A3; background:#F5F5F5; font-size:14px;}
.goods_list_item_tit h2{position:relative; margin:0; padding:10px 10px 8px 30px; color:#333333; font-size:17px; font-weight:bold; line-height:1.4;}
/* 아이콘 - 구버전 icon_submenu.gif 자리. 청록 삼각형 */
.goods_list_item_tit h2:before{content:""; position:absolute; top:50%; left:12px; width:0; height:0; margin-top:-4px; border-left:7px solid #17B3A3; border-top:4px solid transparent; border-bottom:4px solid transparent;}
/* 하위 카테고리 - 아래 3px 바로 묶음을 닫음 */
.goods_list_item_tit + .list_item_category{margin-top:0;}
.list_item_category{margin:0 0 30px 0; padding:12px 6px; border:0 none; border-bottom:3px solid #17B3A3; background:#ffffff;}
.list_item_category ul{display:block; width:100%; padding:0; font-size:0;}
.list_item_category li{display:inline-block; width:20%; font-size:13px; text-align:left; vertical-align:top;}
.list_item_category li a{display:block; padding:4px 10px; color:#555555; line-height:20px;}
.list_item_category li a:hover{color:#17B3A3; text-decoration:underline;}
.list_item_category li em{color:#999999;}
.list_item_category li.on a{color:#17B3A3;}
.list_item_category li.on,
.list_item_category li.on em{font-weight:bold;}
/* ===========================================================
상품목록 정렬 바 (2026-10-06) - 구버전 레이아웃으로
대상: goods/goods_list.html 의 .goods_pick_list
구버전: 청록 가로선 + 얇은 테두리 박스 안에
"정렬방식 : A : B : C"(좌) / "목록수 : [셀렉트]"(우), 한 줄 높이 34px
=========================================================== */
/* "상품 N 개" 줄 - 구버전에는 없는 요소라 숨김. 되살리려면 이 줄만 삭제 */
.goods_pick_list .pick_list_num{display:none;}
/* 바 본체 */
/* overflow:hidden 을 쓰면 Chosen 플러그인의 드롭다운(.chosen-drop)이 잘립니다.
float 정리는 clearfix 로 대신합니다. */
.goods_pick_list .pick_list_box{height:auto; min-height:34px; margin:0 0 6px 0; padding:0 10px; border:1px solid #dcdcdc; border-top:2px solid #17B3A3; background:#ffffff; overflow:visible;}
.goods_pick_list .pick_list_box:after{content:""; display:block; clear:both;}
/* 좌측 정렬 옵션 */
.goods_pick_list .pick_list_box .pick_list{display:block; float:left; padding:0;}
.goods_pick_list .pick_list_box .pick_list:before{content:"정렬방식 :"; float:left; padding:0 16px 0 0; color:#999999; font-size:12px; line-height:34px;}
.goods_pick_list .pick_list_box .pick_list li{float:left; margin:0 22px 0 0; padding:0; background:none;}
/* 항목 사이 : 구분자 제거 - 간격(margin)으로만 구분 */
.goods_pick_list .pick_list_box .pick_list li:before{display:none;}
.goods_pick_list .pick_list_box .pick_list label{padding:0; background:none; color:#777777; font-size:12px; line-height:34px; cursor:pointer;}
.goods_pick_list .pick_list_box .pick_list label:hover{color:#333333;}
/* 선택된 항목 - 구버전에는 체크 아이콘이 없어 배경 아이콘을 끄고 색으로만 표시 */
.goods_pick_list .pick_list_box .pick_list label.on{padding:0; background:none; color:#17B3A3; font-weight:bold;}
/* 우측 목록수
Chosen 은 .chosen-container 에 인라인 width 를 박고 .chosen-single span 에
text-overflow:ellipsis 를 걸어서, 폭이 모자라면 "20개씩..." 으로 잘립니다.
그래서 width 는 !important 로 덮고 말줄임을 끕니다. 높이는 22px. */
.goods_pick_list .pick_list_box .choice_num_view{position:relative; float:right; padding:5px 0 0 0; z-index:120;}
.goods_pick_list .pick_list_box .choice_num_view:before{content:"목록수"; float:left; padding:0 8px 0 0; color:#999999; font-size:12px; line-height:22px;}
/* Chosen 미적용(네이티브 select) 일 때 */
.goods_pick_list .pick_list_box .choice_num_view select{width:auto; height:22px; padding:0 4px; border:1px solid #d2d2d2; color:#666666; font-size:12px;}
/* Chosen 적용 시 */
/* common.css 의 #wrap .chosen-single{height:31px} 가 ID 선택자라 우선순위가 높습니다.
그래서 아래 규칙들도 #wrap 을 붙여 같은 수준 이상으로 올립니다. */
#wrap .goods_pick_list .pick_list_box .choice_num_view .chosen-container{width:112px !important; font-size:12px;}
#wrap .goods_pick_list .pick_list_box .choice_num_view .chosen-container-single .chosen-single{height:22px; padding:0 0 0 8px; line-height:20px; border:1px solid #d2d2d2; border-radius:0; background:#ffffff; box-shadow:none; color:#666666;}
#wrap .goods_pick_list .pick_list_box .choice_num_view .chosen-container-single .chosen-single > span{margin-right:18px; overflow:visible; text-overflow:clip; line-height:20px;}
#wrap .goods_pick_list .pick_list_box .choice_num_view .chosen-container-single .chosen-single div{top:0; width:16px; height:20px;}
#wrap .goods_pick_list .pick_list_box .choice_num_view .chosen-container-single .chosen-single div b{background-position:0 -1px;}
.goods_pick_list .pick_list_box .choice_num_view .chosen-drop{z-index:130;}
.goods_pick_list .pick_list_box .choice_num_view .chosen-results li{padding:5px 8px; font-size:12px; line-height:1.3;}
/* ===========================================================
상품목록 하단 페이징 (2026-10-06) - 구버전 형태로
구사이트(esimplz.co.kr /shop, y_joy_2016) 실제 마크업:
|
| 1 [2] |
→ 2px 구분선 + 높이 50px 가운데 정렬, 현재 페이지는 굵은 글씨(배경 없음),
나머지는 [N] 대괄호 링크. 구버전 링크색 #666666 / 호버 #007FC8 을 따름.
=========================================================== */
/* 그리드 아래 선과 겹쳐 두꺼운 바로 보여서 페이징 위 선도 제거 */
.goods_list + .pagination,
.pagination{margin:0; padding:0; border-top:0 none;}
.pagination ul{padding:0; text-align:center; line-height:50px;}
.pagination li{display:inline-block; min-width:0; margin:0 4px; vertical-align:middle;}
/* 숫자 - 동그란 배경/고정 크기 제거하고 글자만 */
.pagination li a,
.pagination li span{display:inline; width:auto; height:auto; padding:0 !important; color:#666666; font-size:13px; line-height:50px;}
.pagination li a:hover{color:#007FC8; text-decoration:none;}
/* 숫자 링크에 대괄호 - 현재 페이지에는 붙이지 않음 */
.pagination li:not(.on):not(.btn_page) a:before{content:"[";}
.pagination li:not(.on):not(.btn_page) a:after{content:"]";}
/* 현재 페이지 - 배경 없이 굵은 검정 */
.pagination li.on span,
.pagination .on{color:#333333; font-weight:bold; background:none; border-radius:0;}
/* 처음/이전/다음/끝 - 테두리 버튼 대신 기호만 */
.pagination .btn_page{min-width:0; border:0 none; background:none;}
.pagination .btn_page a{min-width:0; width:auto; background-image:none !important; padding:0 6px !important; color:#888888;}
.pagination .btn_page a:hover{color:#007FC8;}
/* ===========================================================
상품목록 그리드 (2026-10-06) - 구버전 형태로
구사이트 실제 마크업 기준:
4열(25%) 가운데 정렬 / 이미지 width=200 / 상품명 검정 / "판매가 : 229,000원"
그리드 위아래 1px #DDDDDD 구분선
.goods_list_item 안으로 한정해 메인·검색 등 다른 페이지에는 영향이 없게 합니다.
=========================================================== */
/* 그리드 위아래 구분선 */
/* 정렬 바(.pick_list_box)가 이미 아래 테두리를 갖고 있어 그리드 위 선은 제거 - 선이 겹쳐 보임 */
.goods_list_item .goods_list{padding:0; border-top:0 none; border-bottom:0 none;}
/* 항목 - 가운데 정렬 */
.goods_list_item .item_gallery_type > ul{overflow:hidden;}
/* width:20%(5개) 에 좌우 패딩이 더해지면 한 줄에 4개만 들어갑니다.
이 스킨은 box-sizing 이 input/textarea 에만 걸려 있어 여기서 직접 지정합니다. */
.goods_list_item .item_gallery_type > ul > li{box-sizing:border-box; padding:0 5px 22px 5px; text-align:center;}
.goods_list_item .item_cont{text-align:center;}
/* 이미지 - 구버전 width=200 */
.goods_list_item .item_photo_box{text-align:center;}
.goods_list_item .item_photo_box img{max-width:200px; width:100%; height:auto;}
/* 상품명 - 검정, 가늘게 */
.goods_list_item .item_info_cont{padding:8px 0 0 0;}
.goods_list_item .item_tit_box{padding:0 4px;}
.goods_list_item .item_name{display:block; color:#000000; font-size:12px; font-weight:normal; line-height:1.45;}
.goods_list_item .item_tit_box a:hover .item_name{text-decoration:underline;}
/* 가격 - 구버전의 "판매가 : 229,000원" 형태 */
.goods_list_item .item_money_box{padding:5px 0 0 0;}
.goods_list_item .item_price{color:#555555; font-size:12px; font-weight:normal;}
.goods_list_item .item_price:before{content:"도매가 : "; color:#777777;}
.goods_list_item .item_price span{color:#222222; font-weight:bold;}
/* ===========================================================
상품목록 좌측 카테고리 사이드바 (2026-10-06)
구버전 .aside-category / .left-category 구조 이식:
폭 180px, 좌우·아래 1px 테두리, 1depth 회색 바(#eeeeee),
hover 시 하위 카테고리가 우측에 레이어로 펼쳐짐
=========================================================== */
/* 2026-10-07 좌측메뉴는 outline/_header.html (.sub_content 최상단) 에 공통으로 들어갑니다.
본문은 side_body 로 감싸(_footer 에서 닫음) 페이지 종류와 무관하게 옆에 배치됩니다. */
/* 메인은 main.css 가 #contents .sub_content{width:100%} 로 1200px 틀을 풀어버립니다.
그래서 사이드바+본문을 side_row 로 감싸 모든 페이지에서 같은 위치가 되도록 합니다. */
.side_row{position:relative; width:100%; margin:0;}
.side_row:after{display:block; clear:both; content:"";}
.side_row > .list_side_cate{float:left; width:190px; margin:0 20px 0 0; position:relative; z-index:10; background:#ffffff;}
.side_row > .side_body{overflow:hidden; padding:45px 0 45px 45px;}
/* --- 갤러리형 tpl 기준 추가 (2026-10-06) ---
구버전 goods/list 갤러리 tpl 의 항목 구성을 따릅니다.
코드/브랜드 파란색(#556fb9) → 상품명(검정) → 도매가 → 짧은설명(#717fa7) */
/* 상품코드·브랜드 자리 - 구버전의 파란 코드 줄 */
.goods_list_item .item_brand{display:block; padding:2px 0; color:#556fb9; font-size:12px; font-weight:normal; line-height:1.4;}
.goods_list_item .item_brand strong{color:#556fb9; font-weight:normal;}
/* 상품명 앞 말머리 - [전국무료배송] 같은 굵은 표기 */
.goods_list_item .item_name strong,
.goods_list_item .item_name b{font-weight:bold;}
/* 짧은 설명 - 구버전 font:11px dotum; color:#717fa7; width:85% */
.goods_list_item .item_name_explain{display:block; width:85%; margin:2px auto 0 auto; color:#717fa7; font-size:11px; line-height:1.4;}
/* 쿠폰 - 구버전 빨강 굵게 */
.goods_list_item .item_coupon{color:#e01f1f; font-weight:bold; font-size:12px;}
.goods_list_item .item_coupon strong{color:#e01f1f;}
/* 마일리지·아이콘 줄 */
.goods_list_item .item_mileage{display:inline-block; padding:2px 0 0 0; color:#999999; font-size:11px;}
.goods_list_item .item_icon_box{padding:3px 0 0 0;}
/* jdev.20261019 갤러리 카드의 자체상품코드 줄 (구버전 esimplz 의 파란 코드 줄) */
.goods_list_item .item_cd_box{padding:2px 0 0 0; line-height:1.4;}
.goods_list_item .item_cd_box .item_gcd{color:#556fb9; font-size:12px;}
.goods_list_item .item_cd_box a:hover .item_gcd{text-decoration:underline;}
.goods_list_item .item_icon_box img{vertical-align:middle;}
/* 품절 오버레이 */
.goods_list_item .item_soldout_bg{font-size:0; line-height:0;}
/* 행 간격 - 구버전은 행 사이 로 띄움 */
.goods_list_item .item_gallery_type > ul > li{box-sizing:border-box; padding-bottom:28px;}
/* --- 정렬·색상 보정 (2026-10-06) ---
list.css 가 .item_cont / .item_info_cont 에 text-align:left 를,
.item_money_box .item_price 에 color:#25B8A9 를 더 깊은 선택자로 걸고 있어
같은 깊이 이상으로 맞춰 덮습니다. */
.goods_list_item .item_gallery_type .item_cont{padding:0 6px; text-align:center;}
.goods_list_item .item_gallery_type .item_info_cont{display:block; padding:8px 0 0 0; text-align:center;}
.goods_list_item .item_gallery_type .item_tit_box{padding:0; text-align:center;}
.goods_list_item .item_gallery_type .item_tit_box .item_brand{display:block; color:#556fb9; text-align:center;}
.goods_list_item .item_gallery_type .item_tit_box .item_name{display:block; padding:2px 0 0 0; color:#000000; font-size:12px; font-weight:normal; text-align:center;}
.goods_list_item .item_gallery_type .item_tit_box .item_name_explain{display:block; width:85%; margin:2px auto 0 auto; padding:0; color:#717fa7; font-size:11px; text-align:center;}
/* 가격 - 자주색(#25B8A9) 대신 구버전 형태 */
.goods_list_item .item_gallery_type .item_money_box{padding:5px 0 0 0; text-align:center;}
.goods_list_item .item_gallery_type .item_money_box .item_price{display:block; padding:0; color:#555555; font-size:12px; font-weight:normal; text-align:center;}
.goods_list_item .item_gallery_type .item_money_box .item_price span{color:#222222; font-weight:bold;}
.goods_list_item .item_gallery_type .item_money_box del{display:block; text-align:center;}
/* 아이콘·마일리지 줄도 가운데 */
.goods_list_item .item_gallery_type .item_icon_box,
.goods_list_item .item_gallery_type .item_number_box{text-align:center;}
/* ===========================================================
좌측메뉴 (2026-10-06) - 구버전 v4 outline/side/* 이식
상품 페이지: 카테고리 항상 펼침
그 외(게시판): "상품 카테고리 ▾" 토글 + 페이지별 서브메뉴
=========================================================== */
.side_menu_wrap{width:190px;}
/* 상품 카테고리 */
.side_menu_wrap .side_cate{position:relative; z-index:10; background:#ffffff;}
.side_menu_wrap .side_cate_tit{padding:14px 0 0 15px; height:38px; border:1px solid #dddddd; border-bottom:0 none; background:#ffffff; color:#45c5bb; font-size:15px; font-weight:bold; cursor:default;}
.side_menu_wrap .side_cate_tit .arr{position:absolute; top:13px; right:14px;}
.side_menu_wrap .side_cate_list .sub_menu_box{border:1px solid #ddddd8; border-top:0 none;}
/* 2026-10-07 카테고리는 기본 노출. (v4 는 게시판에서 접어뒀으나 항상 보이도록 변경) */
.side_menu_wrap .side_cate.is_fold .side_cate_list{display:block; position:static; width:190px;}
/* 1depth */
.side_menu_wrap .sub_depth0 > li{position:relative; border-bottom:1px solid #ddddd8; background:#eeeeee;}
.side_menu_wrap .sub_depth0 > li:last-child{border-bottom:0 none;}
.side_menu_wrap .sub_depth0 > li > a{display:block; padding:6px 10px 6px 18px; color:#333333; font-size:12px; font-weight:bold; line-height:25px; text-decoration:none;}
.side_menu_wrap .sub_depth0 > li > a:hover{color:#0d8b9a;}
/* 2depth - 우측 레이어 */
.side_menu_wrap .sub_depth1{display:none; position:absolute; top:0; left:190px; width:250px; padding:8px 0; background:#ffffff; border:1px solid #c6c6c6; z-index:90;}
.side_menu_wrap .sub_depth0 > li:hover > .sub_depth1{display:block;}
.side_menu_wrap .sub_depth1 li{border:0 none; background:none;}
.side_menu_wrap .sub_depth1 li a{display:inline-block; padding:3px 15px; color:#2e2e2e; font-size:12px; font-weight:normal; line-height:1.5;}
.side_menu_wrap .sub_depth1 li a:hover{color:#0d8b9a;}
/* 페이지별 서브메뉴 - 구버전 .company 박스 */
.side_menu_wrap .side_sub{width:188px; margin:10px 0 0 0; padding:0 0 20px 0; border:1px solid #dddddd; background:#f8f8f8;}
.side_menu_wrap .side_sub_tit{padding:14px 0 10px 15px; color:#45c5bb; font-size:15px; font-weight:bold;}
.side_menu_wrap .side_sub ul{padding:0; margin:0;}
.side_menu_wrap .side_sub li{padding:0 0 0 15px; margin:10px 0 0 0;}
.side_menu_wrap .side_sub li a{color:#333333; font-size:12px; font-weight:bold;}
.side_menu_wrap .side_sub li a:hover{color:#0d8b9a;}
.side_menu_wrap .side_sub li.on a{color:#0d8b9a;}
/* 게시판 본문 - 사이드바 폭만큼 밀기 */
/* 게시판 서브메뉴 - 기본은 감추고, 주소의 bdId 에 맞는 블록만 스크립트가 노출 */
.side_menu_wrap .side_sub{display:none;}
/* 상단 여백 통일 (2026-10-07)
layout.css 는 .sub_content{padding:45px 0 0 0} 인데 main.css 가 메인에서만 padding:0 으로
덮어써서, 메인은 GNB 바에 붙고 다른 페이지는 45px 떠 있었습니다. 전 페이지를 메인 기준으로 맞춥니다. */
#contents .sub_content{padding-top:0;}
/* 상단바-본문 간격 축소 (2026-10-07)
.sub_content 패딩은 이미 0. 남은 공백은 페이지 제목 줄의 과한 line-height(62px) 입니다. */
.side_body .order_tit ol,
.side_body .member_tit ol{line-height:40px;}
.side_body .order_tit h2,
.side_body .member_tit h2{line-height:40px;}
/* 회원 관련 페이지(로그인·회원가입·아이디/비밀번호 찾기) 검색창·좌측메뉴 숨김 (2026-10-07)
고도몰이 공통으로 body-member 를 붙여주므로 /member/ 전체가 한 번에 걸립니다. */
body.body-member #header .top_search{display:none;}
body.body-member .side_row > .list_side_cate{display:none;}
body.body-member .side_row > .side_body{padding-left:0;}
/* 서비스 페이지 좌측메뉴 (2026-10-07)
이용안내·개인정보처리방침·이용약관 3개만 좌측메뉴 비노출(로그인 페이지와 동일),
나머지 /service/ 페이지는 카테고리 대신 "고객센터" 서브메뉴로 교체해 노출합니다.
고도몰이 처럼 페이지별 클래스를 붙여줍니다. */
body.body-guide .side_row > .list_side_cate,
body.body-private .side_row > .list_side_cate,
body.body-agreement .side_row > .list_side_cate{display:none;}
body.body-guide .side_row > .side_body,
body.body-private .side_row > .side_body,
body.body-agreement .side_row > .side_body{padding-left:0;}
/* 단계 표시 화살표 (2026-10-07)
icon_join_step_on/off.png 이미지라 CSS 로 색을 못 바꿉니다.
이미지를 숨기고 같은 자리에 CSS 꺾쇠를 그려 포인트색을 따르게 합니다. */
.member_tit ol li span + span img,
.order_tit ol li span + span img{display:none;}
.member_tit ol li span + span:after,
.order_tit ol li span + span:after{content:""; display:inline-block; width:7px; height:7px; margin:0 12px; border-top:2px solid #cfcfcf; border-right:2px solid #cfcfcf; transform:rotate(45deg); vertical-align:middle;}
.member_tit ol li.page_on span + span:after,
.order_tit ol li.page_on span + span:after{border-color:#25B8A9;}
/* 푸터 두 줄 좌측 끝 맞추기 (2026-10-07)
상단 3단과 하단(로고+회사정보)의 폭이 달라 각각 가운데 정렬하면 좌측 끝이 어긋납니다.
두 줄을 같은 폭으로 묶어 가운데 정렬하고, 내부는 왼쪽 정렬해 끝선을 맞춥니다. */
.content_info,
.foot_cont{width:870px; margin:0 auto;}
.foot_cont .foot_info{max-width:669px;}
/* 푸터 로고 좌측 끝선 보정 (2026-10-08)
로고 JPG 안쪽에 흰 여백이 있어 컨테이너에 붙여도 글자가 안쪽에서 시작합니다.
CS CENTER 와 같은 선에 오도록 그만큼 당깁니다. 투명 PNG 로 교체하면 이 값은 빼세요. */
.foot_cont .foot_logo img{margin-left:-14px;}
/* ===========================================================
메인 게시판 2단 (2026-10-08) - 공지사항 / 질문과 답변
=========================================================== */
.main_board_zone{overflow:hidden; padding:30px 0 10px 0;}
.main_board_zone .main_board_box{float:left; width:48%; margin:0 4% 0 0;}
.main_board_zone .main_board_box:last-child{margin-right:0;}
.main_board_zone h3{padding:0 0 12px 0; border-bottom:1px solid #d8d8d8; font-size:22px; font-weight:bold; color:#333333;}
.main_board_zone h3 a{color:#333333;}
.main_board_zone ul{padding:10px 0 0 0;}
.main_board_zone li{overflow:hidden; padding:7px 0; border-bottom:1px solid #f0f0f0; font-size:13px; line-height:1.4;}
.main_board_zone li:before{content:"\00B7"; float:left; padding:0 6px 0 2px; color:#aaaaaa;}
.main_board_zone li > span:first-of-type{display:none;} /* NEW 아이콘 자리 */
.main_board_zone li a{display:block; overflow:hidden; color:#555555; white-space:nowrap; text-overflow:ellipsis;}
.main_board_zone li a:hover{color:#25B8A9; text-decoration:underline;}
.main_board_zone li .bd_date{float:right; padding:0 0 0 10px; color:#aaaaaa; font-size:12px;}
/* 푸터 NOTICE 에서는 날짜 숨김 (제목에 날짜가 포함돼 있음) */
.content_info .notice_list .bd_date{display:none;}
/* 게시판 위젯 - 글이 없을 때 (2026-10-08) */
.bd_no_data{color:#999999; font-size:13px; text-align:center;}
.main_board_zone li.bd_no_data{padding:24px 0; border-bottom:0 none;}
.main_board_zone li.bd_no_data:before{content:none;}
.content_info .notice_list li.bd_no_data{text-align:left; font-size:12px;}
.content_info .notice_list li.bd_no_data:before{content:none;}
/* ============================================================
상품상세(goods_view) — 구 사이트(esimplz.co.kr) 디자인 이식 + 반응형 (2026-10-12)
구사이트 실측 비율: 라벨:값 = 86:394 (= 18% : 82%), 글자 12px, 셀 padding 3px
음영그룹 #f7f7f7 + 1px solid #ddd
2단 비율: 좌측 이미지 52% / 우측 정보 48% (고정 px 없음)
============================================================ */
/* ---- 2단 배치 (52 : 48) ---- */
#wrap .item_photo_view_box{box-sizing:border-box; float:left; width:52%; padding:0 2.5% 0 0;}
#wrap .item_info_box{box-sizing:border-box; float:left; width:48%; margin:0;}
/* 이미지 박스: 정사각 고정 대신 폭 100% + 이미지 비율대로 높이 자동 */
#wrap .item_photo_view{display:block; width:100%;}
#wrap .item_photo_big{display:block; box-sizing:border-box; position:relative; width:100%; height:auto; padding:0; text-align:center; border:1px solid #ebebeb;}
#wrap .item_photo_big span{display:block; width:100%;}
#wrap .item_photo_big img{max-width:100%; max-height:none; height:auto;}
#wrap .item_photo_slide{width:100%;}
#wrap .item_photo_slide .slider_goods_nav{width:100%;}
/* ---- 상품명 ---- */
#wrap .item_info_box .item_detail_tit{padding:0 0 10px 0; border-bottom:1px solid #666666;}
#wrap .item_info_box .item_detail_tit h3{width:auto; padding:0; font-size:16px; font-weight:bold; line-height:1.45; color:#222222;}
/* ---- 라벨/값 그리드 (18% : 82% = 구사이트 86:394 비율) ---- */
#wrap .item_info_box .item_detail_list{display:flex; flex-direction:column; margin:0; border-bottom:0 none;}
#wrap .item_info_box .item_detail_list dl{float:none; width:100%; min-height:0; padding:0; overflow:hidden;}
#wrap .item_info_box .item_detail_list dt,
#wrap .item_info_box .item_detail_list dd{box-sizing:border-box; float:left; padding:3px; margin:0; font-size:12px; line-height:19px; color:#000000;}
#wrap .item_info_box .item_detail_list dt{width:18%; text-align:right; font-weight:normal;}
#wrap .item_info_box .item_detail_list dt:after{content:" :";}
#wrap .item_info_box .item_detail_list dd{width:82%; text-align:left;}
/* ---- 노출 항목 제한: 전부 숨기고 지정한 행만 노출 ---- */
#wrap .item_info_box .item_detail_list dl{display:none !important;}
#wrap .item_info_box .item_detail_list dl.item_price:not(.regular_goods_elements),
#wrap .item_info_box .item_detail_list dl.es_row{display:block !important;}
/* jdev.20261019 옵션 선택 dl 은 위 숨김 대상에서 제외 (item_add_option_box 안의 dl 은 클래스가 없어 같이 숨겨졌음) */
#wrap .item_info_box .item_detail_list .item_add_option_box dl{display:flow-root !important;}
/* jdev.20261019 옵션 박스는 설명(도매가~제품상태, order 1~5) 아래로 */
#wrap .item_info_box .item_detail_list .item_add_option_box{order:10;}
/* jdev.20261019 옵션 select(chosen) 드롭다운이 잘리지 않게
614행 / 658행의 overflow:hidden 은 dt/dd 가 float 라 높이를 잡으려고 건 것이므로,
클리핑 없이 같은 효과를 내는 display:flow-root 로 대체한다. */
#wrap .item_info_box .item_detail_list .item_add_option_box,
#wrap .item_info_box .item_detail_list .item_add_option_box dl,
#wrap .item_info_box .item_add_option_box dl{overflow:visible !important;}
/* 펼쳐진 드롭다운이 아래 옵션 줄 위로 올라오게 */
#wrap .item_info_box .item_add_option_box dl{position:relative;}
#wrap .item_info_box .item_add_option_box .chosen-container{position:relative;}
#wrap .item_info_box .item_add_option_box .chosen-container.chosen-with-drop{z-index:1200;}
#wrap .item_info_box .item_add_option_box .chosen-container .chosen-drop{z-index:1200;}
/* ---- 행 순서 (도매가 → 적립금 → 제품코드 → 원산지 → 제품상태) ---- */
#wrap .item_info_box .item_detail_list dl.item_price{order:1;}
#wrap .item_info_box .item_detail_list dl.es_mileage{order:2;}
#wrap .item_info_box .item_detail_list dl.es_goodscd{order:3;}
#wrap .item_info_box .item_detail_list dl.es_origin{order:4;}
#wrap .item_info_box .item_detail_list dl.es_state{order:5;}
/* ---- 음영 그룹 1 : 도매가 + 적립금 ---- */
#wrap .item_info_box .item_detail_list dl.item_price,
#wrap .item_info_box .item_detail_list dl.es_mileage{box-sizing:border-box; background:#f7f7f7; border-left:1px solid #dddddd; border-right:1px solid #dddddd;}
#wrap .item_info_box .item_detail_list dl.item_price{border-top:1px solid #dddddd;}
#wrap .item_info_box .item_detail_list dl.es_mileage{border-bottom:1px solid #dddddd;}
/* 도매가 : 라벨만 굵게, 값은 검정 굵게, (VAT별도) 는 빨강 보통 */
#wrap .item_info_box .item_detail_list dl.item_price dt{font-weight:bold;}
#wrap .item_info_box .item_detail_list dl.item_price dd{margin:0; font-size:12px; font-weight:bold; color:#000000;}
#wrap .item_info_box .item_detail_list dl.item_price dd strong{font-size:12px; font-weight:bold; color:#000000;}
#wrap .item_info_box .item_detail_list dl.item_price dd .vat_note{color:#ff0000; font-size:12px; font-weight:normal; font-style:normal;}
/* ---- 제품상태 아이콘 ---- */
#wrap .item_info_box .item_detail_list dl.es_state dd img{vertical-align:middle;}
/* jdev.20261020 설명 블록(제품코드~제품상태) 위아래 + 행 간격 */
#wrap .item_info_box .item_detail_list dl.es_goodscd{margin-top:12px;}
#wrap .item_info_box .item_detail_list dl.es_state{margin-bottom:8px;}
#wrap .item_info_box .item_detail_list dl.es_goodscd dt,
#wrap .item_info_box .item_detail_list dl.es_goodscd dd,
#wrap .item_info_box .item_detail_list dl.es_origin dt,
#wrap .item_info_box .item_detail_list dl.es_origin dd,
#wrap .item_info_box .item_detail_list dl.es_state dt,
#wrap .item_info_box .item_detail_list dl.es_state dd{padding-top:5px; padding-bottom:5px;}
#wrap .item_info_box .item_detail_list dl.es_state .prd_icon{display:inline-block;}
/* ---- 옵션 영역 : 음영 그룹 2, 같은 라벨 그리드 ---- */
#wrap .item_info_box .item_add_option_box{float:none; box-sizing:border-box; width:100%; margin:10px 0 0 0; padding:0; border:1px solid #dddddd; background:#f7f7f7;}
#wrap .item_info_box .item_add_option_box dl{overflow:hidden; padding:3px 0;}
#wrap .item_info_box .item_add_option_box dt{box-sizing:border-box; float:left; width:20%; margin:0; text-align:center; color:#000000; font-size:12px; font-weight:normal; line-height:26px;}
#wrap .item_info_box .item_add_option_box dt:after{content:" :";}
#wrap .item_info_box .item_add_option_box dd{box-sizing:border-box; float:left; width:80%; padding:3px; margin:0;}
/* jdev.20261020 옵션 라벨 : 콜론 제거 / 굵게 / 셀렉트와 간격 */
#wrap .item_info_box .item_add_option_box dt:after{content:none;}
#wrap .item_info_box .item_add_option_box dt{font-weight:bold;}
#wrap .item_info_box .item_add_option_box dd{padding-left:0;}
#wrap .item_info_box .item_add_option_box select{width:100%; height:26px; font-size:12px;}
#wrap .item_info_box .item_add_option_box .chosen-container{width:100% !important;}
/* ---- 구매 버튼: 한 줄 유지 (27.5% + 1.5% + 27.5% + 1.5% + 42% = 100%)
font-size:0 은 inline-block 사이 공백문자 제거용 ---- */
#wrap .item_info_box .btn_choice_box{padding:14px 0 0 0; text-align:left; font-size:0; letter-spacing:0;}
#wrap .item_info_box .btn_choice_box > div{font-size:0;}
#wrap .item_info_box .btn_add_cart,
#wrap .item_info_box .btn_add_wish{box-sizing:border-box; width:27.5%; margin:0 1.5% 0 0; padding:0 4px; font-size:15px;}
#wrap .item_info_box .btn_add_order{box-sizing:border-box; width:42%; margin:0; padding:0 4px; font-size:15px;}
#wrap .item_info_box .btn_disabled_order{box-sizing:border-box; width:100%; margin:0; font-size:15px;}
/* ---- 하단 합계(총 상품금액/총 합계금액) : 구사이트에 없어 숨김 ---- */
#wrap .item_info_box .item_price_cont{display:none !important;}
/* ---- 선택상품 목록의 [쿠폰적용] 배지 제거 ---- */
#wrap .item_info_box .cart_btn_box{display:none !important;}
/* ---- 상품명 옆 공유 버튼 제거 ---- */
#wrap .item_info_box .btn_qa_share_box{display:none !important;}
/* 상품명 위 아이콘 영역 숨김 - 제품상태 행에서 같은 아이콘을 보여주므로 중복 방지 */
#wrap .item_info_box .item_detail_tit .prd_icon{display:none !important;}
/* ============================================================
전체 콘텐츠 폭 유동화 — 고정 px 제거 (2026-10-12)
layout.css 가 .gnb / .sub_content / .main_goods_cont 등을 1200px 로 묶어둠.
창 크기와 무관하게 항상 85% 가운데 정렬이 되도록 전부 덮어씀.
#wrap 의 min-width 는 skin 원본값(1450px)을 그대로 둠 — 그 아래로 내려가면
좌측 카테고리(190px) 와 상품상세 2단이 들어갈 자리가 없어
레이아웃이 깨지므로, 그때는 가로 스크롤로 처리됩니다.
============================================================ */
#wrap .gnb,
#wrap .header_top_cont,
#wrap .header_search_cont,
#wrap .main_goods_cont,
#wrap .sub_content,
#wrap .location_wrap .location_cont,
#wrap .scroll_wrap,
#shop_cart_wrap .btn_shop_cart_box,
#shop_cart_wrap .cart_tab_list,
.cart_tab_box{width:85%; margin:0 auto;}
#contents .sub_content{width:85%; margin:0 auto;} /* main.css 의 width:100% 덮어쓰기 */
#wrap .side_row{width:100%; margin:0;}
/* ---- 푸터도 동일하게 85% 가운데 정렬 (2026-10-12) ----
밴드는 85% 로 넓게 두되, 안쪽 내용은 좌우 15% 씩 들여써서 가운데에 모읍니다.
(밴드를 꽉 채우면 NOTICE 가 남는 폭을 전부 먹어 내용이 왼쪽에 몰려 보임)
.content_info 와 .foot_cont 에 같은 들여쓰기를 줘서 3단 밴드와
로고줄의 좌측 끝선이 창 크기와 무관하게 항상 맞습니다. */
.content_info,
.foot_cont,
.foot_certify{box-sizing:border-box; width:85%; margin:0 auto;}
.content_info{display:flex; align-items:stretch; padding:28px 15% 22px 15%;}
.foot_cont{padding:18px 15% 6px 15%;}
.content_info .cs_center{flex:0 0 auto; width:180px; padding:0 50px 0 0;}
.content_info .bank_info{flex:0 0 auto; width:260px; padding:0 50px;}
.content_info .notice_list{flex:1 1 auto; width:auto; padding:0 0 0 50px;}
/* ---- 상품상세 하단 탭 + 본문 영역 반응형 (2026-10-12) ----
goods.css 가 .item_goods_tab ul 을 870px, li 를 174px 로 고정(5탭 기준).
flex 로 바꿔 탭 개수와 창 폭에 상관없이 본문 전체를 균등 분할합니다.
align-items:flex-start 는 기존 float 과 같은 높이 계산을 유지하기 위한 것
(선택된 탭의 margin-top:-16px 가 그대로 동작) */
#wrap .item_goods_tab ul{display:flex; align-items:flex-start; float:none; width:100%; margin:0;}
#wrap .item_goods_tab li{float:none; flex:1 1 0; width:auto;}
/* 상품설명/배송안내/교환반품 등 관리자 입력 본문의 이미지·표가
폭을 넘지 않도록 (관리자 HTML 에 width 가 px 로 박혀 있는 경우 대비) */
#wrap .item_goods_sec .detail_cont img,
#wrap .item_goods_sec .delivery_cont img,
#wrap .item_goods_sec .exchange_cont img,
#wrap .item_goods_sec .detail_explain_box img,
#wrap .item_goods_sec .admin_msg img{max-width:100%; height:auto;}
#wrap .item_goods_sec .detail_cont table,
#wrap .item_goods_sec .delivery_cont table,
#wrap .item_goods_sec .exchange_cont table,
#wrap .item_goods_sec .detail_explain_box table,
#wrap .item_goods_sec .admin_msg table{max-width:100%;}
/* ============================================================
상품목록 반응형 (2026-10-12)
5열 분할은 스킨이 li 에 style="width:20%" 를 인라인으로 박아 이미 유동적임
(관리자 '진열 라인수' 설정값 = themeInfo.lineCnt).
남아있던 고정값 두 가지를 품:
1) 이미지 max-width:200px 상한 -> 칸을 꽉 채우게 (원본 썸네일 600x600 이라 확대해도 안 깨짐)
2) 글자 고정 px -> clamp(최소, vw, 최대) 로 창 폭 따라 커지고 작아지게
clamp 의 최소값은 기존 크기라, 창이 좁아져도 지금보다 작아지지는 않습니다.
============================================================ */
#wrap .goods_list_item .item_photo_box{width:100%;}
#wrap .goods_list_item .item_photo_box a{display:block; width:100%;}
#wrap .goods_list_item .item_photo_box img{max-width:100%; width:100%; height:auto;}
#wrap .goods_list_item .item_name,
#wrap .goods_list_item .item_gallery_type .item_tit_box .item_name{font-size:clamp(12px, 0.72vw, 15px); line-height:1.45;}
#wrap .goods_list_item .item_price,
#wrap .goods_list_item .item_gallery_type .item_money_box .item_price{font-size:clamp(12px, 0.72vw, 15px);}
#wrap .goods_list_item .item_brand{font-size:clamp(12px, 0.72vw, 15px);}
#wrap .goods_list_item .item_name_explain,
#wrap .goods_list_item .item_gallery_type .item_tit_box .item_name_explain{font-size:clamp(11px, 0.64vw, 13px);}
#wrap .goods_list_item .item_mileage{font-size:clamp(11px, 0.60vw, 13px);}
#wrap .goods_list_item .item_coupon{font-size:clamp(12px, 0.70vw, 14px);}
#wrap .goods_list_item_tit h2{font-size:clamp(16px, 1.00vw, 21px);}
/* ---- 선택상품 표 반응형 (2026-10-12) ----
스킨 colgroup 이 로 상품명 칸을 고정해 둬서,
정보 패널이 좁아지면 수량칸이 눌려 +/- 버튼이 입력칸 아래로 떨어집니다.
col 폭을 % 로 덮고 수량 묶음은 줄바꿈 금지. */
#wrap .item_info_box .item_choice_list table{table-layout:auto; width:100%;}
#wrap .item_info_box .item_choice_list col:nth-child(1){width:auto;}
#wrap .item_info_box .item_choice_list col:nth-child(2){width:auto;}
#wrap .item_info_box .item_choice_list col:nth-child(3){width:auto;}
#wrap .item_info_box .item_choice_list col:nth-child(4){width:auto;}
#wrap .item_info_box .item_choice_list .count,
#wrap .item_info_box .item_choice_list .goods_qty{white-space:nowrap;}
#wrap .item_info_box .item_choice_list .cart_prdt_name{word-break:break-all;}
/* ---- 상품명 키우기 + 옵션/수량선택 간격 축소 (2026-10-12) ---- */
#wrap .item_info_box .item_detail_tit h3{font-size:clamp(19px, 1.3vw, 25px); line-height:1.35;}
/* 수량선택(선택상품) 행: 스킨 td 패딩이 20px/12px 라 옵션 블록과 떨어져 보임 */
#wrap .item_info_box .item_choice_list td{padding-top:7px; padding-bottom:7px;}
/* 옵션 박스와 수량선택 사이도 같이 좁힘 */
#wrap .item_info_box .item_add_option_box{margin-top:4px;}
/* 상품명 ↔ 수량선택 가로 간격 축소: 수량 칸을 좌측 정렬해 상품명 쪽으로 붙임 */
#wrap .item_info_box .item_choice_list td:nth-child(2){text-align:left;}
#wrap .item_info_box .item_choice_list .count{display:inline-block; width:auto;}
/* 상품명 칸은 글자 길이만큼만 차지하게 해서 수량칸이 바로 옆에 붙게 함.
말줄임 없이 전체 상품명을 그대로 노출하고, 남는 폭은 가격 칸이 흡수. */
#wrap .item_info_box .item_choice_list td.cart_prdt_name{width:1%; white-space:nowrap; padding-left:0; padding-right:14px;}
#wrap .item_info_box .item_choice_list td:nth-child(2){width:1%; white-space:nowrap;}
#wrap .item_info_box .item_choice_list td.item_choice_price{width:auto; text-align:right;}
#wrap .item_info_box .item_choice_list .cart_tit_box,
#wrap .item_info_box .item_choice_list .item_choice_tit{display:block; overflow:visible; white-space:nowrap; text-overflow:clip;}
/* 수량 입력칸 + 증감버튼: 내부가 float 이라 칸이 좁아지면 버튼이 아래로 떨어짐.
flex 로 묶어 어떤 폭에서도 가로로 붙어 있게 함(table-layout:auto 의 최소폭 계산에도 반영됨). */
#wrap .item_info_box .item_choice_list .goods_qty{display:inline-flex; align-items:center; width:auto;}
#wrap .item_info_box .item_choice_list .goods_qty > input,
#wrap .item_info_box .item_choice_list .goods_qty > span{float:none; flex:0 0 auto;}
/* 선택상품 행을 위 도매가 밴드의 안쪽 여백에 맞춤 (2026-10-12)
좌우 동일하게 8% 들여씀.
배경(#f5f5f5)이 table 에 걸려 있어, 패딩을 table 에 주면 회색 밴드는 밴드와
같은 너비를 유지한 채 안쪽 내용만 들여써집니다.
(td 에 % 패딩을 주면 셀 최소폭 계산이 깨져 상품명이 잘립니다) */
#wrap .item_info_box .item_choice_list table{box-sizing:border-box; padding-left:8%; padding-right:8%;}
/* ============================================================
상품상세 하단(탭 영역) — simplz 디자인 이식 (2026-10-12)
simplz goods.css 와의 차이분만 반영:
.item_goods_sec 상단 margin 100px 제거
.item_goods_tab 위 패딩 80 -> 50, 아래 margin 80px
ul 높이 42 -> 36
선택 탭의 강조 숫자색 #25B8A9 -> #e40021
상세 이미지 최대폭 860px, 관련상품 목록 위로 당김
탭 폭은 앞서 넣은 flex 균등분할 규칙이 그대로 적용됩니다.
============================================================ */
#wrap .item_goods_sec{margin-top:0;}
#wrap .item_goods_tab{padding:50px 0 0 0; margin-bottom:80px;}
#wrap .item_goods_tab ul{height:36px;}
#wrap .item_goods_tab li a strong{color:#e40021;}
#wrap .item_goods_sec .detail_cont img{max-width:860px;}
#wrap .item_goods_sec .detail_explain_box .goods_list_cont{margin-top:-40px;}
/* 배송정보 탭 배송안내 이미지 — 구 사이트와 동일하게 폭 65% 가운데 정렬 */
#wrap .item_goods_sec .es_delivery_img{width:100%; padding:40px 0 20px 0; text-align:center;}
#wrap .item_goods_sec .es_delivery_img img{width:65%; max-width:100%; height:auto;}
/* ---- 장바구니/주문 상품 썸네일 — simplz 와 동일하게 (2026-10-12) ----
esimplz order.css : .pick_add_img{width:38px} img{border:1px solid #dbdbdb}
simplz order.css : .pick_add_img{width:45px} img{width:100%} (테두리 주석처리)
칸을 45px 로 넓히고 이미지가 칸을 꽉 채우며 테두리는 제거. */
#wrap .order_table_type .pick_add_cont .pick_add_img{width:45px;}
#wrap .order_table_type .pick_add_cont .pick_add_img img{width:100%; border:0 none;}
/* ---- 장바구니 수량칸 — simplz 와 동일하게 (2026-10-12) ----
esimplz 에는 정기배송용 regular_delivery.css 가 있는데(simplz 는 그 파일이 없음/404),
거기의 `.cart_cont th, .cart_cont td{padding:10px}` 가 order.css 보다 뒤에 로드되어
수량칸 안쪽 표(input / 증감버튼 / 수정)까지 좌우 10px 씩 벌려 놓습니다.
order.css 의 의도대로 좌우 패딩 0 으로 되돌립니다. */
#wrap .order_table_type .td_order_ea .count td{padding:10px 0;}
/* ---- 견적서 레이어 딤 전체화면 처리 (2026-10-12) ----
cart.html 인라인 스타일이 #estimateViewLayer 를 position:absolute 로 두는데,
좌측메뉴 정렬용으로 넣은 .side_row{position:relative} 가 포함블록이 되어
딤이 본문 영역(1399x661)만 덮었습니다. 뷰포트 전체를 덮도록 fixed 로 고정. */
#wrap #estimateViewLayer{position:fixed !important; top:0; left:0; width:100%; height:100%; z-index:1000;
overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
/* 인라인이 top:230px/left:50%/transform 으로 absolute 배치하면
스크롤 높이에 포함되지 않아 긴 견적서가 잘립니다. 흐름에 두고 margin 으로 가운데 정렬. */
#wrap #estimateViewLayer .layer_wrap_cont{position:relative !important; top:0 !important; left:0 !important;
transform:none !important; -webkit-transform:none !important;
width:max-content !important; max-width:96% !important;
margin:60px auto !important;}
/* 견적서 첨부파일 추가 행의 '삭제' 링크 - 세로로 줄바꿈되지 않게 */
#wrap #estimateViewLayer #kf_estmt_file td{white-space:nowrap;}
#wrap #estimateViewLayer .kf_estmt_del{float:left; margin-left:12px; line-height:31px; color:#666666; text-decoration:underline; white-space:nowrap;}
/* ---- 주문서/장바구니 표 셀 좌우 여백 복구 (2026-10-12) ----
regular_delivery.css 의 `.order_wrap th/td{padding:10px}` 를 주석 처리하면서
order.css 원래값(`padding:10px 0`)으로 돌아가 내용이 테두리에 붙었습니다.
세로 여백과 테두리는 order.css(=simplz) 값 그대로 두고 좌우만 되살립니다. */
#wrap .order_wrap .order_table_type th,
#wrap .order_wrap .order_table_type td{padding-left:10px; padding-right:10px;}
/* ---- 주문 단계표시(01 장바구니 > 02 주문서작성/결제 > 03 주문완료) 색상 (2026-10-12) ----
simplz order.css 를 그대로 가져오면서 활성 단계가 simplz 브랜드 와인색(#ab3e55)이 됐습니다.
화살표는 검정, 활성 단계 글씨는 esimplz 민트(#25B8A9)로. */
#wrap .order_wrap .order_tit .page_on{color:#25B8A9;}
#wrap .order_tit ol li span + span:after,
#wrap .order_tit ol li.page_on span + span:after{border-top-color:#000000; border-right-color:#000000;}
/* ---- 금액 강조색: simplz 와인색 -> 검정 (2026-10-12) ----
order.css(simplz) 의 .price_total dd = #9b344a, .payment_final_total dd = #ab3e55 */
#wrap .price_sum_cont .price_sum_list .price_total dd,
#wrap .price_sum_cont .price_sum_list .price_total dd strong{color:#000000;}
#wrap .payment_final_total dd,
#wrap .payment_final_total dd strong{color:#000000;}
/* ---- 주문 제목 아래 여백 (2026-10-12) ----
regular_delivery.css 의 .order_tit{border-bottom; margin-bottom:30px} 를 주석 처리하면서
제목과 '주문상세내역' 이 딱 붙었습니다(틈 0px). 구분선 없이 여백만 복구. */
#wrap .order_wrap .order_tit{margin-bottom:24px;}
/* ===== jdev.20261020 상품상세 옵션/합계 영역 정리 ===== */
/* 1) 옵션 셀렉트 : 높이는 기본값 유지, 가로폭만 축소 */
#wrap .item_info_box .item_add_option_box .chosen-container{width:100% !important;}
/* 2) 선택 완료된 옵션 영역 : 흰 배경 / 테두리 없음 / 글씨 크고 굵게 */
#wrap .item_info_box .item_choice_list{background:#ffffff; border:0 none; margin-top:8px;}
#wrap .item_info_box .item_choice_list table{padding-left:10px; padding-right:10px;}
#wrap .item_info_box .item_choice_list td{font-size:13px;}
#wrap .item_info_box .item_choice_list .cart_tit{font-size:13px; font-weight:bold; color:#000000;}
#wrap .item_info_box .item_choice_list .cart_tit_box,
#wrap .item_info_box .item_choice_list .item_choice_tit{white-space:normal;}
/* 3) 옵션 / 수량 / 금액 열 정리 (옵션명이 길어도 금액 칸이 찌그러지지 않게) */
#wrap .item_info_box .item_choice_list td.cart_prdt_name{width:auto; white-space:normal; word-break:break-all; padding:10px;}
#wrap .item_info_box .item_choice_list td:nth-child(2){width:1%; white-space:nowrap; /* padding-left:10px; */ text-align:center;}
#wrap .item_info_box .item_choice_list td.item_choice_price{width:1%; min-width:90px; white-space:nowrap; text-align:center; /* padding-left:10px; */ color:#000000; font-size:13px; font-weight:bold;}
/* 4) 최종 금액 : 숨겨져 있던 블록 노출 + 합계 한 줄만 + 테두리 제거 */
#wrap .item_info_box .item_price_cont{display:block !important;}
#wrap .item_info_box .item_price_cont dl.total_goods{display:none;}
/* #wrap .item_info_box .item_price_cont dl.total_amount{border-top:0 none;} */ /* jdev.20261020 goods.css 의 border-top 살림 */
/* ===== jdev.20261020 끝 ===== */
/* ===== jdev.20261020 상단/좌측 카테고리 ===== */
/* GNB 공지 롤링 : 어두운 바(#2f3b45) 위에 글씨가 #333 이라 안 읽힘 */
#header .gnb .notice_rolling a{color:#c9d2d9;}
#header .gnb .notice_rolling a:hover{color:#ffffff; text-decoration:none;}
/* 전체카테고리 패널 : 높이가 395px 로 고정돼 있어 내부 스크롤바가 생김.
내용만큼 늘어나되 화면을 넘지 않도록 상한만 둠. */
#header .gnb_allmenu_box{height:auto; max-height:70vh;}
/* 좌측 카테고리 행 : 위아래 여백 축소 (46px -> 30px, 이나무4와 동일)
layout.css 의 .sub_menu_box.layer_type .sub_menu0 > li > a{padding:10px...} 가
같은 클래스 3개라 custom.css 486줄을 눌렀습니다. #wrap 을 붙여 넘깁니다. */
#wrap .side_menu_wrap .sub_depth0 > li > a{padding:2px 10px 2px 18px; line-height:25px;}
/* 좌측 카테고리 배경 : 기본 흰색, 1·2번째와 맨 아래만 회색 */
#wrap .side_menu_wrap .sub_depth0 > li{background:#ffffff;}
#wrap .side_menu_wrap .sub_depth0 > li:nth-child(1),
#wrap .side_menu_wrap .sub_depth0 > li:nth-child(2),
#wrap .side_menu_wrap .sub_depth0 > li:last-child{background:#eeeeee;}
/* 좌측 카테고리 '상품 카테고리' 제목줄 제거.
제목줄이 메뉴 박스의 윗 테두리를 대신하고 있었으므로(custom.css 476/478)
숨기면서 sub_menu_box 에 border-top 을 되돌려 줍니다. */
#wrap .side_menu_wrap .side_cate_tit{display:none;}
#wrap .side_menu_wrap .side_cate_list .sub_menu_box{border-top:1px solid #ddddd8;}
/* ===== jdev.20261020 끝 ===== */
/* ===== jdev.20261020 좌측 2차 카테고리(레이어) ===== */
/* 1차 메뉴에 딱 붙이기.
layout.css 301 의 .sub_menu_box.layer_type .sub_depth1{left:200px} 이
메뉴 폭(190px)보다 10px 더 밀어내고 있었습니다(클래스 3개라 custom.css 490 을 눌렀음).
1차 항목의 오른쪽 끝에 바로 붙입니다. */
#wrap .side_menu_wrap .sub_depth1{left:100%;}
/* 마우스 오버 : 글자 폭이 아니라 칸 전체에 색, 글씨는 흰색.
custom.css 493 의 display:inline-block 때문에 글자 영역만 칠해졌고,
custom.css 494 의 color:#0d8b9a 가 layout.css 296 의 흰색을 눌러
청록 배경에 청록 글씨가 됐었습니다. */
#wrap .side_menu_wrap .sub_depth1 li a{display:block; padding:5px 15px;}
#wrap .side_menu_wrap .sub_depth1 li a:hover{background:#25B8A9; color:#ffffff;}
/* ===== jdev.20261020 끝 ===== */
/* ===== jdev.20261020 상단 2차 카테고리(드롭다운) ===== */
/* 상단바에 딱 붙이기.
layout.css 219 의 #header .gnb .depth1{top:48px} 은 원래 GNB 높이 49px 기준입니다.
custom.css 112 에서 바 높이를 40px 로 줄였기 때문에 8px 이 떠 있었습니다.
바 높이를 바꿔도 따라오도록 top:100% 로 둡니다. */
#header .gnb .gnb_menu_box .depth1{top:100%;}
/* ===== jdev.20261020 끝 ===== */
/* ===== jdev.20261021 마이페이지 좌측메뉴 타이틀 이미지 ===== */
/* 기본 .side_sub_tit 은 글자 기준(padding:14px 0 10px 15px)이라 이미지에는 안 맞습니다.
좌측 박스 안쪽 폭은 186px(188px - 좌우 border 1px), 이미지는 178x79px 입니다. */
.side_menu_wrap .side_sub_tit.side_sub_tit_img{padding:0 0 4px 0; font-size:0; line-height:0; text-align:center;}
.side_menu_wrap .side_sub_tit.side_sub_tit_img img{display:inline-block; max-width:100%; height:auto; vertical-align:top;}
/* ===== jdev.20261021 끝 ===== */
/* ===== jdev.20261026 관련상품 금액 검정 ===== */
/* goods/list.css 56 의 .item_money_box .item_price{color:#25B8A9} 가
상품상세 하단 관련상품 영역까지 걸려 금액이 청록으로 나옵니다.
상품목록(.goods_list_item)과 달리 여기엔 덮는 규칙이 없어 같은 깊이로 맞춰 검정으로 둡니다. */
#related .item_money_box .item_price,
#related .item_money_box .item_price span,
#related .item_money_box .item_price strong,
#related .item_money_box del{color:#000000;}
/* ===== jdev.20261026 끝 ===== */
/* ===== jdev.20261027 ALL CATEGORY 전체메뉴 레이어 ===== */
/* layout.css 의 기본값(제목 16px / 하위 14px / 칸 간격 30px / 안쪽 여백 40px 20px)이
카테고리가 12개로 늘어난 지금은 너무 성겨서 3줄로 넘치고 스크롤이 생깁니다.
글자와 여백을 줄이고 한 줄 5칸 -> 6칸으로 바꿔 12개가 2줄에 들어오게 합니다. */
/* 레이어가 본문 위젯에 덮이던 문제.
기본값 z-index:100 은 목록수 선택(.choice_num_view 120) / chosen 드롭(130) /
상단 TOP 버튼(.btn_scroll_top 150)보다 낮아 그것들이 메뉴를 뚫고 보였습니다.
모달 딤(#layerDim 200)보다는 낮게 둬야 팝업이 정상으로 덮습니다. */
#header .gnb_allmenu{z-index:190;}
#header .gnb_allmenu_box{padding:16px 12px; max-height:70vh;}
#header .gnb_allmenu_box > ul{margin-top:-14px;}
/* li 의 width:20% 는 gd_ui.js 가 인라인으로 박아 넣으므로(gd_btn_all_menu_open)
CSS 로 이기려면 !important 가 필요합니다. JS 는 건드리지 않았습니다. */
#header .gnb_allmenu_box > ul > li{width:16.6666%!important; margin-top:14px;}
#header .gnb_allmenu_box .all_menu_cont{padding:0 10px;}
#header .gnb_allmenu_box .all_menu_cont > a{font-size:13px; line-height:15px; padding:4px 0 3px;}
#header .gnb_allmenu_box .all_depth1 > li > a{font-size:12px; line-height:14px; padding:2px 0;}
#header .gnb_allmenu_box .all_depth2 li a{font-size:11px; line-height:14px; padding:1px 0;}
#header .gnb_allmenu_box .all_depth3 li a{font-size:11px; line-height:14px; padding:1px 0;}
/* 닫기(X)가 첫 줄 카테고리 제목 위에 걸쳐 있어 오른쪽 위 모서리로 옮깁니다. */
#header .gnb_allmenu .btn_all_menu_close{top:8px; right:8px;}
/* ===== jdev.20261027 끝 ===== */
/* ===== jdev.20261027b 로그인·아이디찾기·비밀번호찾기 안내문 =====
마크업: member/_find_notice.html (세 페이지가 includeFile 로 공유)
위치: 각 페이지 박스 안, 버튼 줄 바로 아래.
색·크기를 바꾸려면 .find_help_notice 의 color / font-size 만 고치면 됩니다. */
.find_help_notice{margin:22px 0 10px; padding:0 10px; text-align:center;
color:#ec2b4e; font-size:15px; line-height:1.6; letter-spacing:-0.3px; word-break:keep-all;}
.find_help_notice p{margin:0; color:inherit;}
.find_help_notice b{font-weight:700; color:inherit;}
.find_help_notice .fhn_call{font-weight:500;}
.find_help_notice .fhn_tel{display:block; margin-top:2px;
font-size:17px; font-weight:700; color:inherit; text-decoration:none;}
.find_help_notice .fhn_tel:hover{text-decoration:underline;}
.find_help_notice .fhn_pw{margin-top:20px; font-weight:500;}
.find_help_notice .fhn_ex{display:block; margin-top:2px; font-weight:700;}
.find_help_notice .fhn_note{margin-top:6px; font-size:13px; letter-spacing:-0.5px;}
@media screen and (max-width:720px){
.find_help_notice{font-size:14px;}
.find_help_notice .fhn_tel{font-size:16px;}
}
/* 비밀번호찾기: '아이디를 모르시나요?' 와 '다음' 버튼 사이가 너무 떠서 좁힙니다.
(원래 css/member/member.css 의 .member_cont .btn_center_box{margin:35px 0 0 0}) */
.member_cont .find_password_box .btn_center_box{margin-top:0;}
/* ===== jdev.20261027b 끝 ===== */
/* ===== jdev.20261030 좌측 1차 카테고리 '>' 화살표 ===== */
/* gd_ui.js 98행이 마우스오버 때 1차 에 .active 를 붙이고,
layout.css 281 의 .sub_menu_box .sub_depth0 > li > a.active 가
btn_gnb_list_over.png('>' 15x40) 를 오른쪽에 깔기 때문에
2차 카테고리가 없는 항목에도 화살표가 떴습니다.
proc/_category_side.html 에서 자식이 있는 li 에만 .has_sub 를 붙이도록 했고,
없는 항목은 배경 이미지만 지웁니다(회색 하이라이트 #f8f8f8 는 유지). */
#wrap .side_menu_wrap .sub_depth0 > li:not(.has_sub) > a.active{background-image:none;}
/* ===== jdev.20261030 끝 ===== */
|