@charset "utf-8";
/* =========================================================
   KOREA MALL — 전자제품 리스트 카드 고급화 (electronics)
   theme/market · 상품진열 10 (.sct_20) 전용
   깔끔한 화이트 카드 + 테크블루 포인트, emart 스타일 가격
   ========================================================= */

:root{
    --ec-blue:#0071e3;
    --ec-blue-dark:#005bb5;
    --ec-ink:#1d1d1f;
    --ec-gray:#86868b;
    --ec-line:#ececf0;
    --ec-red:#e74c3c;
    --ec-radius:16px;
}

/* ---------- 리스트 ul · 카드 ----------
   bxSlider 레이아웃(float/width/margin)은 건드리지 않고
   시각 속성만 덮어쓰기 */
.sct.sct_20{
    padding:0; margin:0;
}
.sct.sct_20 .sct_li{
    border:1px solid var(--ec-line);
    background:#fff;
    border-radius:var(--ec-radius);
    box-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.05);
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
    float:left; display:inline-block;
}
.sct.sct_20 .sct_li:hover{
    border-color:#d6e6fa;
    transform:translateY(-5px);
    box-shadow:0 12px 30px rgba(0,113,227,.15);
}

/* hover 시 전통 빨간 배경 제거 → 화이트 유지 */
.sct.sct_20 .sct_li:hover .sct_cnt{ background:#fff; color:var(--ec-ink); }
.sct.sct_20 .sct_li:hover .sct_txt a, .sct.sct_20 .sct_li:hover .sct_cost{ color:var(--ec-ink); }
.sct.sct_20 .sct_li:hover .sct_discount{ color:#b0b0b6; }

/* ---------- 이미지 영역 ---------- */
.sct.sct_20 .sct_20_wrap{ width:100%; }
.sct.sct_20 .sct_img{
    background:#fff;
    padding:0; margin:0; overflow:hidden; aspect-ratio:1/1;
}
.sct.sct_20 .sct_img img{
    width:100%; height:100%; display:block; object-fit:contain; object-position:center;
    border-radius:0; transition:transform .3s ease;
}
.sct.sct_20 .sct_li:hover .sct_img img{ transform:scale(1.04); }

/* ---------- 내용(이름/부제/가격) ---------- */
.sct.sct_20 .sct_cnt{ padding:12px 14px 14px; text-align:left; }
.sct.sct_20 .sct_txt{
    padding:0; font-size:14px; font-weight:600; color:var(--ec-ink); line-height:1.42;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px;
}
.sct.sct_20 .sct_txt a{ color:var(--ec-ink); text-decoration:none; }
.sct.sct_20 .sct_basic{ font-size:12px; color:var(--ec-gray); line-height:1.4; margin:2px 0 8px; }

/* 가격: 현품가는 크게 검정, sct_discount(원가)는 작게 회색 취소선 */
.sct.sct_20 .sct_cost{ padding:2px 0 6px; font-size:17px; font-weight:800; color:var(--ec-ink); text-align:left; }
.sct.sct_20 .sct_discount{
    display:inline-block; margin:0 0 0 4px; color:#b0b0b6;
    font-size:12px; font-weight:400; text-decoration:line-through;
}

/* ---------- 아이콘 (히트/추천/최신/인기/할인/쿠폰/품절) ---------- */
.sct.sct_20 .sct_icon{
    position:static; display:flex; flex-wrap:wrap; gap:4px; width:auto;
    margin:8px 0 0; padding-top:10px; border-top:1px solid #f0f0f2;
    line-height:normal; text-indent:0;
}
.sct.sct_20 .shop_icon{
    border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; line-height:18px; margin:0;
}
.sct.sct_20 .shop_icon_soldout{
    position:static; width:auto; height:auto; border:0;
    color:#fff; background:#9a9aa0; border-radius:6px; padding:2px 8px;
    font-size:11px; font-weight:700; line-height:18px;
}

/* ---------- 장바구니 버튼 (hover 시 등장, 블루 원형) ---------- */
.sct.sct_20 .sct_btn{
    position:absolute; bottom:16px; left:0; width:100%; text-align:center; z-index:10;
}
.sct.sct_20 .sct_cart{
    background:var(--ec-blue); opacity:1; width:44px; height:44px; border-radius:50%;
    box-shadow:0 6px 16px rgba(0,113,227,.32);
    transition:background .2s, transform .2s;
}
.sct.sct_20 .sct_cart:hover{ background:var(--ec-blue-dark); transform:scale(1.08); }

/* ---------- 반응형(모바일) ---------- */
@media (max-width:767px){
    .sct.sct_20 .sct_li{ border-radius:12px; }
    .sct.sct_20 .sct_img{ padding:10px 10px 0; }
    .sct.sct_20 .sct_cnt{ padding:10px 12px 12px; }
    .sct.sct_20 .sct_txt{ font-size:13px; min-height:36px; }
    .sct.sct_20 .sct_cost{ font-size:15px; }
}

/* =========================================================
   상단 헤더 / 내비 / 카테고리 / 타이틀 통일 (electronics v3)
   ========================================================= */

/* 헤더 전체 */
#hd{ background:#fff; border-bottom:1px solid #eef0f3; padding-top:64px; }

/* 내비게이션 바 */
#gnb{ height:54px; }
#gnb #menu_open{
    background:transparent; color:#1d1d1f; border:0; font-size:14px; font-weight:700;
    height:54px; line-height:54px; padding:0 16px; cursor:pointer; vertical-align:top;
}
#gnb #menu_open:hover{ color:#0071e3; }

/* 분류 탭 (히트/추천/최신/인기/할인) */
#gnb .gnb_shortcut{ display:inline-block; float:left; }
#gnb .gnb_shortcut a{
    display:block; padding:0 15px; font-size:14px; font-weight:600; color:#1d1d1f;
    line-height:54px; text-decoration:none; position:relative; transition:color .2s;
}
#gnb .gnb_shortcut a:hover{ color:#0071e3; }
#gnb .gnb_shortcut a:hover::after{
    content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px;
    background:#0071e3; border-radius:3px 3px 0 0;
}

/* 기능 링크 (오른쪽) */
#gnb .tnb_right{ float:right; }
#gnb .tnb_right a{ color:#6e6e73; font-size:13px; font-weight:500; line-height:54px; }
#gnb .tnb_right a:hover{ color:#0071e3; }

/* 카테고리 드롭다운 */
#category{
    position:fixed; top:64px; left:0; right:0; z-index:999;
    border:0; border-top:1px solid #eef0f3; box-shadow:0 18px 44px rgba(0,0,0,.1);
}
#category .ct_wr{ padding:24px; }
#category .cate_li_1{ min-height:0; margin-bottom:18px; padding-right:24px; }
#category .cate_li_1_a{
    font-size:14px; font-weight:700; color:#1d1d1f;
    padding-bottom:10px; margin-bottom:8px; border-bottom:2px solid #0071e3;
}
#category .cate_li_2 a{ color:#555; font-size:13px; }
#category a:hover{ color:#0071e3; }
#category .close_btn{ top:-54px; background:#fff; color:#6e6e73; border:1px solid #eef0f3; border-bottom:0; }

/* 페이지 타이틀 */
#wrapper_title{ border-bottom:2px solid #eef0f3; padding:0 0 14px; margin:0 0 20px; }
#wrapper_title .wt{
    font-size:24px; font-weight:800; color:#1d1d1f; line-height:1.2;
    padding-left:12px; border-left:4px solid #0071e3;
}

/* 분류 이동 select */
#sct_location{ margin-bottom:14px; }
#sct_location .category1{
    border:1px solid #d6d6dc; border-radius:10px; padding:8px 14px; font-size:14px;
    color:#1d1d1f; background:#fff; cursor:pointer;
}

@media (max-width:767px){
    #wrapper_title .wt{ font-size:19px; }
    #sct_location .category1{ font-size:13px; }
}

/* =========================================================
   홈(main) 상품진열 30 (.sct_30) — 동일 카드 스타일 (electronics v4)
   ========================================================= */
.sct.sct_30{ padding:0; margin:0; }
.sct.sct_30 .sct_li{
    border:1px solid var(--ec-line); background:#fff; border-radius:var(--ec-radius);
    box-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 18px rgba(0,0,0,.05);
    overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
    float:left; display:inline-block;
}
.sct.sct_30 .sct_li:hover{
    border-color:#d6e6fa; transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,113,227,.15);
}
.sct.sct_30 .sct_li:hover .sct_cnt{ background:#fff; color:var(--ec-ink); }
.sct.sct_30 .sct_li:hover .sct_txt a, .sct.sct_30 .sct_li:hover .sct_cost{ color:var(--ec-ink); }
.sct.sct_30 .sct_20_wrap{ width:100%; }
.sct.sct_30 .sct_img{
    background:#fff; padding:0; margin:0; overflow:hidden; aspect-ratio:1/1;
}
.sct.sct_30 .sct_img img{
    width:100%; height:100%; display:block; object-fit:contain; object-position:center;
    border-radius:0; transition:transform .3s ease;
}
.sct.sct_30 .sct_li:hover .sct_img img{ transform:scale(1.04); }
.sct.sct_30 .sct_cnt{ padding:12px 14px 14px; text-align:left; }
.sct.sct_30 .sct_txt{
    padding:0; font-size:14px; font-weight:600; color:var(--ec-ink); line-height:1.42;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:40px;
}
.sct.sct_30 .sct_txt a{ color:var(--ec-ink); text-decoration:none; }
.sct.sct_30 .sct_basic{ font-size:12px; color:var(--ec-gray); line-height:1.4; margin:2px 0 8px; }
.sct.sct_30 .sct_cost{ padding:2px 0 6px; font-size:17px; font-weight:800; color:var(--ec-ink); text-align:left; }
.sct.sct_30 .sct_discount{
    display:inline-block; margin:0 0 0 4px; color:#b0b0b6; font-size:12px; font-weight:400; text-decoration:line-through;
}
.sct.sct_30 .sct_icon{
    position:static; display:flex; flex-wrap:wrap; gap:4px; width:auto;
    margin:8px 0 0; padding-top:10px; border-top:1px solid #f0f0f2;
    line-height:normal; text-indent:0;
}
.sct.sct_30 .shop_icon{
    border-radius:6px; padding:2px 8px; font-size:11px; font-weight:700; line-height:18px; margin:0;
}
.sct.sct_30 .sct_btn{
    position:absolute; bottom:16px; left:0; width:100%; text-align:center; z-index:10;
}
.sct.sct_30 .sct_cart{
    background:var(--ec-blue); opacity:1; width:44px; height:44px; border-radius:50%;
    box-shadow:0 6px 16px rgba(0,113,227,.32); transition:background .2s, transform .2s;
}
.sct.sct_30 .sct_cart:hover{ background:var(--ec-blue-dark); transform:scale(1.08); }
@media (max-width:767px){
    .sct.sct_30 .sct_li{ border-radius:12px; }
    .sct.sct_30 .sct_img{ padding:10px 10px 0; }
    .sct.sct_30 .sct_cnt{ padding:10px 12px 12px; }
    .sct.sct_30 .sct_txt{ font-size:13px; min-height:36px; }
    .sct.sct_30 .sct_cost{ font-size:15px; }
}

/* ---------- 상품 순위(1위/2위...) 숨김 (electronics v5) ---------- */
.sct.sct_20 .sct_rank,
.sct.sct_30 .sct_rank{ display:none !important; }

/* =========================================================
   추천상품(section.main2) 배경 이미지 (electronics v14)
   ========================================================= */
section.main2{
    background:#ffffff;
    padding:28px 22px 32px; border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}
section.main2 .main_tit{ color:#1d1d1f; }
section.main2 p{ color:#666; margin-bottom:14px; }

/* =========================================================
   상단 헤더 mallow 스타일 + 고정(sticky) (electronics v16)
   ========================================================= */
#hd_wrapper{
    position:fixed; top:0; left:0; right:0; z-index:1000; background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
}
#hd_wr{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    height:64px; padding:0 24px; max-width:1400px; margin:0 auto; box-sizing:border-box;
}
#hd_wr #logo{ flex:0 0 auto; }
#hd_wr #logo img{ max-height:40px; width:auto; display:block; }
#hd_wr #menu_open{
    flex:0 0 auto; width:40px; height:40px; margin-right:10px; border-radius:50%; border:0;
    background:#f5f7fa; color:#1d1d1f; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s;
}
#hd_wr #menu_open:hover{ background:#eef2f8; color:#0071e3; }

/* 상단 카테고리 내비 */
#cate_nav{ flex:1 1 auto; display:flex; justify-content:center; }
#cate_nav ul{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
#cate_nav li a{
    display:block; padding:8px 13px; font-size:15px; font-weight:700; color:#1d1d1f;
    font-family:'Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','NanumGothic',sans-serif;
    text-decoration:none; border-radius:8px; line-height:1.2; letter-spacing:-.3px;
    transition:color .2s, background .2s;
}
#cate_nav li a:hover{ color:#0071e3; background:#f5f7fa; }

/* 우측 util (검색/로그인/장바구니) */
#hd_util{ flex:0 0 auto; display:flex; align-items:center; gap:10px; }
#hd_util #hd_qnb{ margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:8px; }
#hd_util #hd_qnb li{ position:relative; }
#hd_util #hd_qnb .login_btn,
#hd_util #hd_qnb .join_btn{
    background:#ececee; color:#1d1d1f; border:0; border-radius:18px; padding:0 16px;
    height:34px; line-height:34px; font-size:13px; font-weight:600; cursor:pointer;
    text-decoration:none; display:inline-block; white-space:nowrap;
}
#hd_util #hd_qnb .login_btn:hover,
#hd_util #hd_qnb .join_btn:hover{ background:#e0e0e4; color:#000; }
#hd_util #hd_qnb .logout_btn{ color:#6e6e73; font-size:13px; text-decoration:none; }
#hd_util #hd_qnb .admin_btn{ color:#0071e3; font-size:13px; }
#hd_util #hd_qnb #member_menu{
    position:absolute; right:0; top:calc(100% + 6px); width:340px; z-index:9999; display:none;
}
#hd_util #hd_qnb .member_div{
    position:static; width:auto; max-height:none; margin:0; padding:16px; background:#fff;
    border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.12); box-sizing:border-box;
}
#hd_util #hd_qnb #member_menu .bg{ display:none; }
#hd_util #hd_qnb .member_div{
    position:static; top:auto; left:auto; width:auto; max-height:none;
    margin:0; padding:0; background:#fff; box-shadow:none; border-radius:0; text-align:left;
}
#hd_util #hd_qnb .bg{ display:none; }
#hd_util #hd_qnb .member_div .login_cls_btn{ position:absolute; right:6px; top:6px; border:0; background:transparent; color:#6e6e73; font-size:18px; z-index:10; }
#hd_util #hd_qnb .member_div .login_cls_btn:hover{ color:#f54947; }
#hd_cart{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; color:#1d1d1f; background:#f5f7fa;
    text-decoration:none; font-size:16px;
}
#hd_cart:hover{ background:#eef2f8; }
#hd_cart .cart-count{
    position:absolute; top:-4px; right:-4px; background:#e60012; color:#fff; font-size:11px; font-weight:700;
    min-width:18px; height:18px; line-height:18px; text-align:center; border-radius:9px; padding:0 4px;
    box-shadow:0 1px 3px rgba(0,0,0,.2);
}
/* 768px 이하: 카테고리 내비 축소 */
@media (max-width:1024px){
    #hd_wr{ padding:0 16px; }
    #cate_nav li a{ padding:8px 9px; font-size:14px; }
    #hd_util #hd_sch .sch_stx{ width:110px; }
}
@media (max-width:820px){
    #hd{ padding-top:58px; }
    #hd_wr{ height:58px; }
    #cate_nav li a{ padding:7px 6px; font-size:13px; }
    #hd_util #hd_sch{ display:none; }
}

/* =========================================================
   메인 prev/next 화살표 숨김 + 인기상품 간격 (electronics v20)
   ========================================================= */
.main .bx-prev, .main .bx-next,
.main2 .bx-prev, .main2 .bx-next,
.main3 .bx-prev, .main3 .bx-next,
.main4 .bx-prev, .main4 .bx-next{ display:none !important; }
.main{ margin-bottom:50px; }

/* =========================================================
   로그인 후 나의정보/로그아웃/관리자 작은 버튼 (electronics v21)
   ========================================================= */
#hd_util #hd_qnb .member_btn{
    background:#ececee; color:#1d1d1f; border:0; border-radius:13px; padding:0 12px;
    height:26px; line-height:26px; font-size:12px; font-weight:600; cursor:pointer;
    text-decoration:none; display:inline-block; white-space:nowrap;
}
#hd_util #hd_qnb .member_btn:hover{ background:#e0e0e4; color:#000; }

/* =========================================================
   햄버거 카테고리: 상단 가로 + 좌측 서브 드롭다운 (electronics v23)
   ========================================================= */
#category{ background:#fff; top:78px; box-shadow:0 20px 48px rgba(0,0,0,.14); }
#category .ct_wr{ padding:0; }
#category .cate{
    display:flex; align-items:stretch; margin:0; padding:0 32px;
    list-style:none; border-bottom:1px solid #eef0f3;
}
#category .cate_li_1{ float:none; width:auto; min-height:0; margin:0; padding:0; position:relative; }
#category .cate_li_1_a{
    display:block; padding:16px 26px; font-size:15px; font-weight:700;
    color:#1d1d1f; border-bottom:0; white-space:nowrap; margin:0;
}
#category .cate_li_1:hover .cate_li_1_a{ color:#0071e3; }
#category .sub_cate{
    display:none; position:absolute; left:0; top:100%;
    min-width:220px; background:#fff; box-shadow:0 18px 44px rgba(0,0,0,.12);
    padding:14px 0; margin:0; list-style:none; z-index:1000; border-radius:0 0 14px 14px;
}
#category .cate_li_1:hover .sub_cate{ display:block; }
#category .cate_li_2{ float:none; width:100%; line-height:1; }
#category .cate_li_2 a{ display:block; padding:10px 20px; color:#444; font-size:13px; }
#category .cate_li_2 a:hover{ color:#0071e3; background:#f5f7fa; }
#category a:hover{ color:#0071e3; }