@charset "utf-8";
/* 고향온(TPB 허브) 디자인 리뉴얼(renewal 테마) PC 지정기부사업 목록 전용
 * 출처: 고향온 허브 퍼블리싱/기부사업목록_pc.html (contents.css 의 "리뉴얼 답례품 목록(HB-02)" 구간, 품절 필터 제외)
 * 로드: page/donation/renewal/list.html (공통 리뉴얼 css 는 renewal-main-pc.css)
 */

/* ==============================
* 리뉴얼 답례품 목록 (HB-02)
* ============================== */
.renewalWrap .locationBox { margin-bottom:40px; }
.renewalWrap .locationBox ol { display:flex; align-items:center; gap:4px; }
.renewalWrap .locationBox li { display:flex; align-items:center; gap:4px; font-size:14px; line-height:20px; color:#999; }
.renewalWrap .locationBox .ico-chevron { width:12px; height:12px; opacity:.4; }
.renewalWrap .asideLayout { display:flex; align-items:flex-start; gap:40px; }
.renewalWrap .asideFilter { flex:0 0 180px; }
.renewalWrap .filterGroup { padding:12px 0 0; border-top:1px solid #e4e4e4; }
.renewalWrap .filterGroup + .filterGroup { margin-top:48px; }
.renewalWrap .filterGroup summary { display:flex; align-items:center; justify-content:space-between; list-style:none; cursor:pointer; font-size:18px; font-weight:600; line-height:28px; }
.renewalWrap .filterGroup summary::-webkit-details-marker { display:none; }
.renewalWrap .filterGroup summary .ico-chevron { transform:rotate(90deg); }
.renewalWrap .filterGroup[open] summary .ico-chevron { transform:rotate(-90deg); }
.renewalWrap .filterGroup ul { margin-top:12px; }
.renewalWrap .filterGroup li + li { margin-top:12px; }
.renewalWrap .filterGroup li a { display:block; font-size:16px; line-height:24px; color:#999; }
.renewalWrap .filterGroup li a.active { color:#0c0c0c; font-weight:500; }
.renewalWrap .filterGroup li a:hover { color:#ff7300; }
.renewalWrap .filterGroup li a span { color:#ff7300; }

.renewalWrap .layoutContent { min-width:0; flex:1; }

.renewalWrap .giftBanner { display:flex; height:220px; border-radius:24px; align-items:center; background:#d9d9d9; justify-content: center;}
.renewalWrap .giftBanner h2 { font-size:30px; line-height:42px; font-weight:600; color:#333; letter-spacing:-.6px; }
.renewalWrap .giftBanner img { width:100%; height:100%; object-fit: cover;}

.renewalWrap .giftListHead { display:flex; margin:48px 0 20px; align-items:center; justify-content:space-between; }
.renewalWrap .giftListHead h3 { font-size:16px; font-weight:400; }
.renewalWrap .giftListHead strong { font-weight:700; }

.renewalWrap .giftSort { position:relative; }
.renewalWrap .giftSort select { width:auto; height:24px; padding:0 24px 0 0; border:0; font-family:inherit; font-size:16px; cursor:pointer; background:transparent; }
.renewalWrap .giftSort .ico-chevron { position:absolute; top:4px; right:0; transform:rotate(90deg); pointer-events:none; }
.renewalWrap i.ico-chevron { display:inline-block; width:16px; height:16px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' stroke='%230c0c0c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }

/* 서브 전시 배너 스와이프 (페이지 표시는 메인 히어로와 같은 모양) */
.renewalWrap .giftBanner { position:relative; overflow:hidden; }
.renewalWrap .giftBanner .giftBannerSwiper { width:100%; height:100%; }
.renewalWrap .giftBanner .swiper-slide { height:100%; }
.renewalWrap .giftBanner .swiper-slide > a,
.renewalWrap .giftBanner .swiper-slide > div { display:block; width:100%; height:100%; }
.renewalWrap .giftBanner .heroPagination { position:absolute; left:auto; right:28px; bottom:28px; z-index:1; width:auto; min-width:77px; padding:8px 20px; border-radius:21px; color:#fff; font-size:16px; line-height:16px; text-align:center; pointer-events:none; background:rgba(0,0,0,.5); }
.renewalWrap .giftBanner .heroPagination .swiper-pagination-current { font-weight:600; }