@charset "utf-8";
/* ==========================================================================
   브랜드 페이지 공통 (/product/brand/{id})
   - 기준 폰트 크기는 product.css와 동일하게 html { font-size: 36px } 전제
     (px / 36 = rem)
   ========================================================================== */

/* --------------------------------------------------------------------------
   공통 헤더(GNB)
   - 상단 KV 를 걷어내면서 헤더 뒤가 흰 바탕이 됐다. 공통 헤더는 KV 위에 얹히는
     흰 글자가 기본이라(common-2022.css) 그대로 두면 GNB 가 보이지 않고,
     마우스를 올렸을 때만 ui.common_2020.js 가 .sub_open .scroll 을 붙여 나타난다.
   - 그 스크립트는 스크롤 위치에 따라 두 클래스를 계속 떼었다 붙였다 하므로
     JS 로 고정할 수 없다. brand.css 는 브랜드 상세에서만 불러오니 여기서
     기본 상태 자체를 .scroll 과 같은 값으로 덮는다(값이 같아 충돌하지 않는다).
   - 헤더는 position:fixed 90px 라, 본문도 그만큼 내려야 breadcrumb 이 가려지지 않는다.
   -------------------------------------------------------------------------- */
header.renewal22 {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
header.renewal22 #gnb .main li > a {
  color: #333;
}
/* 기본 로고(main2020/common/logo.png)는 흰 글자판이라 흰 헤더에서 사라진다.
   .scroll 이 쓰는 검정 로고로 바꾼다. */
header.renewal22 ._logo a {
  background-image: url('../../Images/main2020/common/logo_scroll.png');
}
header.renewal22 #gnb .main li.depth1 > a:after {
  display: none;
}
header.renewal22 .quick-gnb a.uff:after {
  background-image: url('../../images/renewal2022/header/uff-c.svg');
}
header.renewal22 .quick-gnb .dm-mall-box .dm-mall {
  color: #d8282e;
  background-image: url('../../images/renewal2022/header/ico-dm-mall-r.png');
}
#contents.renewal22 .brand-bread {
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-bread {
  background: #fff;
  border-bottom: 1px solid #ddd;
}
#contents.renewal22 .brand-bread .brand-bread-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 38.88888889rem;
  margin: 0 auto;
  padding: 0.5rem 0;
  box-sizing: border-box;
}
#contents.renewal22 .brand-bread .brand-bread-back {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
}
#contents.renewal22 .brand-bread .brand-bread-back img {
  width: 0.5rem;
  height: 0.5rem;
}
#contents.renewal22 .brand-bread .brand-bread-path {
  display: flex;
  align-items: center;
  gap: 0.27777778rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#contents.renewal22 .brand-bread .brand-bread-path li {
  display: flex;
  align-items: center;
  gap: 0.27777778rem;
  font-size: 0.44444444rem;
  line-height: 1.5;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  list-style: none;
}
#contents.renewal22 .brand-bread .brand-bread-path li a {
  color: #666;
}
#contents.renewal22 .brand-bread .brand-bread-path li + li:before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.33333333rem;
  height: 0.33333333rem;
  background: url(/Images/renewal2022/brand/ico-chevron.svg) no-repeat 50% 50%;
  background-size: 0.33333333rem 0.33333333rem;
}
#contents.renewal22 .brand-bread .brand-bread-path li.current {
  font-weight: 700;
  color: #111;
}

/* --------------------------------------------------------------------------
   Depth Bar (브랜드 간 이동)
   - 시안 배경은 흰 사각형 + 1px #ddd 하단선이라 CSS로 재현한다.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-depth {
  height: 2.22222222rem;
  background: #fff;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
#contents.renewal22 .brand-depth .brand-depth-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 38.88888889rem;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
#contents.renewal22 .brand-depth .brand-depth-inner .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.5rem;
  line-height: 1.2;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  box-sizing: border-box;
}
#contents.renewal22 .brand-depth .brand-depth-inner .btn.current {
  font-weight: 700;
  color: #009fe3;
  border-bottom-color: #009fe3;
}

/* --------------------------------------------------------------------------
   레이아웃 공통
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page {
  color: #111;
}
/* product.css의 `#contents.renewal22 section` 기본값(min-height: 100vh 상당)이
   브랜드 페이지의 섹션마다 적용되는 것을 막는다. */
#contents.renewal22 .brand-page section.brand-sec {
  min-height: 0;
  padding: 2.77777778rem 0;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-inner {
  width: 38.88888889rem;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 01 브랜드 스토리 : 브랜드 로고 ------------------------------------------
   상단 KV 를 걷어내고 브랜드 로고를 본문 오른쪽에 둔다(시안 Group 1, 466 x 260).
   제목·본문 묶음과 세로 가운데를 맞추고, 아트워크 비율이 브랜드마다 달라
   박스 안에 비율 그대로 맞춰 넣는다. */
#contents.renewal22 .brand-page .brand-story-top {
  display: flex;
  align-items: center;
  gap: 1.11111111rem;
}
#contents.renewal22 .brand-page .brand-story-top .brand-story-txt {
  flex: 1 1 auto;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-story-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.94444444rem;
  height: 7.22222222rem;
}
#contents.renewal22 .brand-page .brand-story-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
/* 시안에서 배경이 연한 하늘색인 섹션. 나머지는 흰 배경.
   디펜드: 02 좋은 케어 / 04-1 제품 파인더 / 06 사이즈 가이드
   뽀삐  : 02 지켜 온 약속 / 05 제품 관리 기준
   스카트: 02 세 가지 약속 / 04 공간별 사용 TIP
   마이비데: 02 라인업 / 04 사용법 / 06 FAQ
   크리넥스: 02 세 가지 약속 / 04 제품별 가이드 / 06 FAQ
   화이트: 02 라인업 / 04 라이프스타일 추천 / 06 FAQ
   포레스트서울: 02 피부 컨디션 / 04 스킨케어 순서 / 06 FAQ
   굿나이트: 01 브랜드 스토리 / 04 속옷처럼 편안하게 / 07 안전 기준 (FAQ 는 흰 배경)
   좋은느낌: 02 라인업 / 03 소재 / 인증 / 06 캠페인 (흰-틴트 교대, FAQ 는 흰 배경)
   베베그로우: 02 라인업 / 04 젖꼭지 / 06 호환성 / 08 세척·소독 / 10 FAQ (흰-틴트 교대)
   그린핑거: 02 스킨케어 / 04 구강케어 / 06 물티슈 / 08 FAQ (흰-틴트 교대)
   하기스: 02 기저귀 / 04 단계와 사이즈 / 06 성분과 안전 / 08 FAQ (흰-틴트 교대)
   섹션 프레임 fill 이 아니라 상위 프레임의 배경 사각형에서 오는 경우가 있어,
   전체 페이지 렌더를 픽셀 측정해 확인한 값. */
#contents.renewal22 .brand-page section.brand-care,
#contents.renewal22 .brand-page section.brand-finder,
#contents.renewal22 .brand-page section.brand-size,
#contents.renewal22 .brand-page section.brand-promise,
#contents.renewal22 .brand-page section.brand-quality,
#contents.renewal22 .brand-page section.brand-space,
#contents.renewal22 .brand-page section.brand-mlineup,
#contents.renewal22 .brand-page section.brand-howto,
#contents.renewal22 .brand-page section.brand-pguide,
#contents.renewal22 .brand-page section.brand-wlineup,
#contents.renewal22 .brand-page section.brand-wselect,
#contents.renewal22 .brand-page section.brand-fcondition,
#contents.renewal22 .brand-page section.brand-froutine,
#contents.renewal22 .brand-page section.brand-gstory,
#contents.renewal22 .brand-page section.brand-gcomfort,
#contents.renewal22 .brand-page section.brand-gsafety,
#contents.renewal22 .brand-page section.brand-gflineup,
#contents.renewal22 .brand-page section.brand-gfmaterial,
#contents.renewal22 .brand-page section.brand-gfcert,
#contents.renewal22 .brand-page section.brand-gfcsr,
#contents.renewal22 .brand-page section.brand-bglineup,
#contents.renewal22 .brand-page section.brand-bgnipple,
#contents.renewal22 .brand-page section.brand-bgcompat,
#contents.renewal22 .brand-page section.brand-bgcare,
#contents.renewal22 .brand-page section.brand-grskin,
#contents.renewal22 .brand-page section.brand-groral,
#contents.renewal22 .brand-page section.brand-grwipes,
#contents.renewal22 .brand-page section.brand-hgdiaper,
#contents.renewal22 .brand-page section.brand-hgsize,
#contents.renewal22 .brand-page section.brand-hgquality,
#contents.renewal22 .brand-page section.brand-faq.is-tinted {
  background: rgba(0, 159, 227, 0.05);
}

/* 섹션 헤드 : 아이브로우 + 타이틀 + 리드문 */
#contents.renewal22 .brand-page .brand-eyebrow {
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #009fe3;
  letter-spacing: 0;
}
#contents.renewal22 .brand-page .brand-sec-tit {
  font-size: 1rem;
  line-height: 1.55555556rem;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-sec-desc {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}
#contents.renewal22 .brand-page .brand-sec-head .brand-eyebrow,
#contents.renewal22 .brand-page .brand-sec-head .brand-sec-tit {
  margin-bottom: 0.69444444rem;
}

/* --------------------------------------------------------------------------
   Section / 01 브랜드 스토리
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-story .brand-eyebrow {
  margin-bottom: 0.69444444rem;
}
#contents.renewal22 .brand-page .brand-story .brand-story-cont {
  display: flex;
  align-items: center;
  gap: 0.52777778rem;
}
#contents.renewal22 .brand-page .brand-story .brand-story-txt {
  flex: 1 1 auto;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-story .brand-sec-tit {
  margin-bottom: 1.27777778rem;
}
/* 브랜드 스토리 본문 (20px / 34px). 디펜드·뽀삐 공통 */
#contents.renewal22 .brand-page .brand-story-desc {
  font-size: 0.55555556rem;
  line-height: 0.94444444rem;
  font-weight: 500;
  color: #111;
}
#contents.renewal22 .brand-page .brand-story .brand-story-visual {
  flex: 0 0 auto;
  width: 16.66666667rem;
  height: 8.33333333rem;
}
#contents.renewal22 .brand-page .brand-story .brand-story-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Section / 02 상황별 케어 카드
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-care .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-care-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.88888889rem;
}
/* 시안은 카드 높이를 500px로 고정하고 넘치는 내용을 잘라내지만, 브라우저 폰트
   메트릭 차이로 국문 본문이 잘릴 수 있어 min-height로 둔다. 같은 행의 카드는
   flex line의 stretch로 서로 높이가 맞는다. */
#contents.renewal22 .brand-page .brand-care-card {
  width: calc(50% - 0.44444444rem);
  min-height: 13.88888889rem;
  padding: 1.11111111rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-care-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  margin-bottom: 0.66666667rem;
  border-radius: 50%;
  background: #009fe3;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-care-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page .brand-care-tit {
  margin-bottom: 0.66666667rem;
  font-size: 0.61111111rem;
  line-height: 1.65;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-care-txt {
  margin-bottom: 0.66666667rem;
  font-size: 0.44444444rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}
#contents.renewal22 .brand-page .brand-care-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-care-list li {
  font-size: 0.44444444rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-care-list li:before {
  content: "\00B7";
  margin-right: 0.11111111rem;
  color: #009fe3;
}

/* --------------------------------------------------------------------------
   제품 라인업 공통 (Section 03 / Section 04)
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-lineup .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
/* 카테고리·중간 삽입 블록 사이는 어느 조합이든 시안 기준 64px */
#contents.renewal22 .brand-page .brand-cat + .brand-cat,
#contents.renewal22 .brand-page .brand-cat + .brand-why,
#contents.renewal22 .brand-page .brand-why + .brand-cat {
  margin-top: 1.77777778rem;
}
#contents.renewal22 .brand-page .brand-cat-head {
  display: flex;
  align-items: center;
  gap: 0.33333333rem;
  margin-bottom: 0.66666667rem;
}
#contents.renewal22 .brand-page .brand-cat-tit {
  font-size: 0.61111111rem;
  line-height: 1.65;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
}
#contents.renewal22 .brand-page .brand-cat-chip {
  padding: 0.16666667rem 0.38888889rem;
  border-radius: 100px;
  background: #009fe3;
  font-size: 0.38888889rem;
  line-height: 1.65;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
#contents.renewal22 .brand-page .brand-cat-desc {
  margin-bottom: 0.66666667rem;
  font-size: 0.44444444rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-prd-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-prd {
  width: 9.05555556rem;
}
/* 라인업 3종을 한 컷에 담은 제품 이미지(디펜드 스타일 라이너 · 패드)는 가로가 길어
   기본 카드 폭(326px)에서 max-width 에 걸려 높이가 줄어든다. 제품 높이 227px 를
   유지하도록 해당 카드만 폭을 넓힌다. 한 줄 합계 432+432+326+gap64 = 1254 < 1400. */
#contents.renewal22 .brand-page .brand-prd.is-lineup {
  width: 12rem;
}
/* 시안의 이미지 박스 폭은 제품마다 다르지만(285/188/226 …) 모두 높이 260px 기준의
   원본 이미지 비율과 일치한다. 높이만 고정하고 폭은 비율에 맡겨 시안을 재현한다. */
/* 시안 실측(142:3377 등 7개 노드): 이미지 박스 260 안에서 제품 이미지는 높이 227px,
   상단 y19 에 놓인다(하단 246 + 여백 14 = 제목 274). 박스 높이·하단 여백은 기존과 동일.
   시안 폭(249/158/196/131/145/245/237/221/213/233/311/173/63/63/227/227)이
   '에셋 원본 비율 x 227px' 과 16개 중 15개 ±0.4px 로 일치해 에셋 트림은 불필요하다. */
#contents.renewal22 .brand-page .brand-prd-img {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 7.22222222rem;
  padding-top: 0.52777778rem;
  margin-bottom: 0.38888889rem;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-prd-img img {
  width: auto;
  max-width: 100%;
  height: 6.30555556rem;
  object-fit: contain;
}
#contents.renewal22 .brand-page .brand-prd-tit {
  margin-bottom: 0.38888889rem;
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-prd-txt {
  font-size: 0.44444444rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-cat-note {
  margin-top: 0.66666667rem;
  font-size: 0.41666667rem;
  line-height: 1.65;
  font-weight: 300;
  color: #666;
}

/* 라인업 중간 삽입 블록 : 요실금 전용 제품이 필요한 이유
   (상단 간격은 위의 인접 형제 규칙에서 처리) */
#contents.renewal22 .brand-page .brand-why-tit {
  margin-bottom: 0.69444444rem;
  font-size: 0.61111111rem;
  line-height: 1.55555556rem;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-why-desc {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}
#contents.renewal22 .brand-page .brand-why-points {
  display: flex;
  gap: 0.66666667rem;
  margin-top: 1rem;
}
#contents.renewal22 .brand-page .brand-why-point {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.55555556rem;
  padding: 1.11111111rem 0.66666667rem;
  border: 1px solid #ccc;
  background: #fff;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-why-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  border-radius: 50%;
  background: #009fe3;
}
#contents.renewal22 .brand-page .brand-why-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page .brand-why-point-txt {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 700;
  color: #111;
  text-align: center;
}
#contents.renewal22 .brand-page .brand-why .brand-cat-note {
  margin-top: 0.94444444rem;
}

/* --------------------------------------------------------------------------
   Section / 04-1 나에게 맞는 디펜드 찾기
   - 섹션 헤드 이하 모든 블록 간격은 시안 기준 60px 일정
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-finder .brand-sec-head,
#contents.renewal22 .brand-page .brand-finder .brand-step,
#contents.renewal22 .brand-page .brand-finder .brand-fblock {
  margin-bottom: 1.66666667rem;
}

/* Step 공통 헤드 */
#contents.renewal22 .brand-page .brand-step-head {
  display: flex;
  align-items: flex-start;
  gap: 0.44444444rem;
  margin-bottom: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-step-no {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0.94444444rem;
  height: 0.94444444rem;
  border-radius: 50%;
  background: #009fe3;
  font-size: 0.5rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
#contents.renewal22 .brand-page .brand-step-tit h3 {
  margin-bottom: 0.16666667rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-step-tit p {
  font-size: 0.44444444rem;
  line-height: 1.2;
  font-weight: 500;
  color: #666;
}

/* Step 1 : 착용 방식 선택 카드 */
#contents.renewal22 .brand-page .brand-opts {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-opt {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  min-height: 8.02777778rem;
  padding: 0.88888889rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-opt-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  margin-bottom: 0.55555556rem;
  border-radius: 50%;
  background: #009fe3;
  font-size: 0.55555556rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
/* 제목이 1줄인 카드(A)만 본문이 위로 올라오므로 2줄분 높이를 확보한다 */
#contents.renewal22 .brand-page .brand-opt-tit {
  margin-bottom: 0.55555556rem;
  min-height: 1.33333333rem;
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-opt-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-opt-link {
  display: block;
  margin-top: 0.55555556rem;
  font-size: 0.44444444rem;
  line-height: 1.2;
  font-weight: 700;
  color: #009fe3;
}
#contents.renewal22 .brand-page .brand-opt-link:after {
  content: "\00A0\00A0\2192";
}

/* Step 2 : 사용 대상 카드 (h252, p32, 타이틀 20px Bold) */
#contents.renewal22 .brand-page .brand-tcards {
  display: flex;
  gap: 0.88888889rem;
}
/* 아이콘·제목을 카드 간 같은 높이로 맞춘다. 내용을 세로 가운데 정렬하면
   설명문이 있는 카드만 아이콘·제목이 위로 밀리므로 위에서부터 쌓고,
   상단 여백은 설명문 없는 카드의 기존 위치(64px)를 그대로 쓴다.
   높이는 min-height 로 바꿔 설명문이 넘치지 않게 한다(flex stretch 로 전 카드 동일 높이). */
#contents.renewal22 .brand-page .brand-tcard {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55555556rem;
  min-height: 7rem;
  padding: 1.77777778rem 0.88888889rem 0.88888889rem;
  background: #e6f5fc;
  text-align: center;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-tcard-ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  border-radius: 50%;
  background: #009fe3;
}
#contents.renewal22 .brand-page .brand-tcard-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page .brand-tcard-tit {
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-tcard-txt {
  font-size: 0.41666667rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}

/* Step 3 : 흡수량 카드 (h174, px20 py28, 라벨 16px Medium — Step 2 와 다름) */
#contents.renewal22 .brand-page .brand-tcards.is-level {
  gap: 0.66666667rem;
}
#contents.renewal22 .brand-page .brand-tcards.is-level .brand-tcard {
  justify-content: flex-start;
  min-height: 4.83333333rem;
  padding: 0.77777778rem 0.55555556rem;
}
/* 높이를 고정하지 않는다 — 시안의 Icons 프레임이 내용 높이(물방울 20px / 야간 28px)를
   따르므로, 고정하면 물방울 카드에서 아이콘·텍스트 간격이 벌어진다. */
#contents.renewal22 .brand-page .brand-tcard-drops {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.11111111rem;
}
#contents.renewal22 .brand-page .brand-tcard-drops img {
  width: 0.55555556rem;
  height: 0.55555556rem;
}
#contents.renewal22 .brand-page .brand-tcard-drops img[src*="ico-night"],
#contents.renewal22 .brand-page .brand-tcard-drops img[src*="ico-mom"] {
  width: 0.77777778rem;
  height: 0.77777778rem;
}
#contents.renewal22 .brand-page .brand-tcards.is-level .brand-tcard-tit {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
}

/* 표 블록 A~D */
#contents.renewal22 .brand-page .brand-fblock-head {
  display: flex;
  align-items: center;
  gap: 0.33333333rem;
  margin-bottom: 0.66666667rem;
}
#contents.renewal22 .brand-page .brand-fblock-letter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0.94444444rem;
  height: 0.94444444rem;
  border-radius: 50%;
  background: #009fe3;
  font-size: 0.47222222rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
#contents.renewal22 .brand-page .brand-fblock-tit {
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
/* 04-1 표는 하단 테두리가 #111 이 아니라 행 구분선(#ddd)으로 끝난다 */
#contents.renewal22 .brand-page .brand-finder-table {
  border-bottom-color: #ddd;
}
#contents.renewal22 .brand-page .brand-finder-table thead th {
  padding-top: 0.44444444rem;
  padding-bottom: 0.44444444rem;
}
#contents.renewal22 .brand-page .brand-finder-table tbody th {
  font-weight: 700;
  text-align: center;
}
/* C·D 표는 1열이 사용 상황 문장이라 본문과 같은 서식 */
#contents.renewal22 .brand-page #brand-finder-c .brand-finder-table tbody th,
#contents.renewal22 .brand-page #brand-finder-d .brand-finder-table tbody th {
  font-weight: 500;
  text-align: left;
}
#contents.renewal22 .brand-page .brand-finder-table .brand-col-target {
  width: 4.44444444rem;
}
#contents.renewal22 .brand-page .brand-finder-table .brand-col-amount {
  width: 5.55555556rem;
}
#contents.renewal22 .brand-page .brand-finder-table .brand-col-prd {
  width: 11.11111111rem;
}
#contents.renewal22 .brand-page .brand-finder-table .brand-col-case-d {
  width: 22.22222222rem;
}
#contents.renewal22 .brand-page .brand-drops {
  display: inline-flex;
  align-items: center;
  gap: 0.11111111rem;
}
#contents.renewal22 .brand-page .brand-drops img {
  width: 0.61111111rem;
  height: 0.61111111rem;
}
#contents.renewal22 .brand-page .brand-drops.is-two {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05555556rem;
}
#contents.renewal22 .brand-page .brand-drops-row {
  display: inline-flex;
  align-items: center;
  gap: 0.11111111rem;
}
#contents.renewal22 .brand-page .brand-night {
  display: inline-flex;
  align-items: center;
  gap: 0.22222222rem;
}
#contents.renewal22 .brand-page .brand-night img {
  width: 0.72222222rem;
  height: 0.72222222rem;
}
#contents.renewal22 .brand-page .brand-night-txt {
  font-size: 0.44444444rem;
  color: #666;
}
#contents.renewal22 .brand-page .brand-fprd {
  display: flex;
  align-items: center;
  gap: 0.44444444rem;
}
#contents.renewal22 .brand-page .brand-fprd img {
  flex: 0 0 auto;
  width: 2.22222222rem;
  height: 2.22222222rem;
  object-fit: contain;
}
/* 시안에서 표 B 1행 제품명만 whitespace-nowrap 으로 작성돼 한 줄로 놓인다.
   (해당 셀에 overflow-clip 이 없어 시안에서도 열 폭을 넘어간다) */
#contents.renewal22 .brand-page .brand-fprd-tit.is-nowrap {
  white-space: nowrap;
}

/* 하단 가이드 */
#contents.renewal22 .brand-page .brand-guide {
  display: flex;
  gap: 0.83333333rem;
  padding: 0.97222222rem;
  background: #f5f5f5;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-guide-note {
  flex: 0 0 auto;
  width: 12.22222222rem;
  padding-right: 0.83333333rem;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-guide-forms {
  flex: 1 1 auto;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-guide-tit {
  margin-bottom: 0.66666667rem;
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-guide-note ul {
  margin: 0;
  padding-left: 0.66666667rem;
  list-style: disc;
}
#contents.renewal22 .brand-page .brand-guide-note li {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
  list-style: disc;
}
#contents.renewal22 .brand-page .brand-forms {
  display: flex;
  gap: 0.55555556rem;
}
#contents.renewal22 .brand-page .brand-form {
  flex: 1 1 0;
  min-width: 0;
}
/* 시안 일러스트 박스는 높이 132px 기준. 깔개매트만 가로가 열 폭에 맞고 높이가 작다. */
#contents.renewal22 .brand-page .brand-form-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.66666667rem;
  margin-bottom: 0.38888889rem;
}
#contents.renewal22 .brand-page .brand-form-img img {
  width: auto;
  height: 3.66666667rem;
  object-fit: contain;
}
#contents.renewal22 .brand-page .brand-form-img.is-wide img {
  width: 100%;
  height: auto;
}
#contents.renewal22 .brand-page .brand-form-tit {
  margin-bottom: 0.22222222rem;
  font-size: 0.44444444rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-form-txt {
  font-size: 0.41666667rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}

/* --------------------------------------------------------------------------
   아이콘 카드 3단 (뽀삐 02 지켜 온 약속) — 브랜드 공통으로 재사용 가능
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-promise .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-icards {
  display: flex;
  gap: 0.88888889rem;
}
/* 시안은 높이를 353px 로 고정하지만, 국문 본문이 잘리지 않도록 min-height 로 둔다.
   같은 행이므로 flex stretch 로 서로 높이가 맞는다. */
#contents.renewal22 .brand-page .brand-icard {
  flex: 1 1 0;
  min-width: 0;
  min-height: 9.80555556rem;
  padding: 1.11111111rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-icard-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  margin-bottom: 0.66666667rem;
  border-radius: 50%;
  background: #009fe3;
}
#contents.renewal22 .brand-page .brand-icard-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page .brand-icard-tit {
  margin-bottom: 0.66666667rem;
  font-size: 0.61111111rem;
  line-height: 1.7;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-icard-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}

/* --------------------------------------------------------------------------
   제품 비교 표 + 하위 블록 (뽀삐 04 내게 맞는 뽀삐 화장지 고르기)
   - 셀 여백(px24)·행높이·line-height(1.7) 가 디펜드 표와 달라 별도 변형으로 둔다.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-cmp .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-cmp-table {
  border-bottom-color: #ddd;
}
#contents.renewal22 .brand-page .brand-cmp-table th,
#contents.renewal22 .brand-page .brand-cmp-table td {
  padding: 0.5rem 0.66666667rem;
  line-height: 1.7;
}
#contents.renewal22 .brand-page .brand-cmp-table thead th {
  padding-top: 0.44444444rem;
  padding-bottom: 0.44444444rem;
}
#contents.renewal22 .brand-page .brand-cmp-table .brand-col-prd-name {
  width: 10rem;
}
#contents.renewal22 .brand-page .brand-cmp-table .brand-col-ply {
  width: 5rem;
}
#contents.renewal22 .brand-page .brand-sub-tit {
  margin-bottom: 0.69444444rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-sub-desc p {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}

/* --------------------------------------------------------------------------
   제품 그리드 4열 (스카트클리닝 03 청소용품 라인업)
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-lineup-grid .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-grid-row {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-grid-row + .brand-grid-row {
  margin-top: 1.33333333rem;
}
/* 시안은 컨테이너에 items-center 를 두어 이미지 박스(260px)만 중앙에 오고,
   텍스트는 min-w-full 로 폭 100% 라 좌측 정렬이다. */
#contents.renewal22 .brand-page .brand-gprd {
  width: 9.05555556rem;
}
/* 시안 이미지 박스 폭은 제품마다 다르지만(260/183/89/274 …) 모두 높이 260px
   기준의 원본 비율과 일치한다. 폭은 비율에 맡긴다. */
/* 제품 이미지 높이 통일 — 디펜드(.brand-prd-img)와 같은 규격을 쓴다.
   시안(브랜드 디자인 파일 109:272 등)은 에셋을 260px 높이에 그대로 얹어서
   캔버스 여백이 제품마다 달라 실제 제품이 103~259px 로 들쭉날쭉했다.
   에셋을 내용 경계로 트림했으므로 height 227px 한 줄로 통일된다.
   (박스 260 = 위 19 + 제품 227 + 아래 14) */
#contents.renewal22 .brand-page .brand-gprd-img {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 7.22222222rem;
  padding-top: 0.52777778rem;
  margin-bottom: 0.44444444rem;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-gprd-img img {
  width: auto;
  max-width: 100%;
  height: 6.30555556rem;
  object-fit: contain;
}
/* 납작한 제품(물티슈·비데티슈·유리물티슈)은 227px 로 키우면 박스 폭 326 을
   넘어서 폭 기준으로 맞춘다. 트림 후 높이는 158/189/144px 로 박스 안에 들어온다. */
#contents.renewal22 .brand-page .brand-gprd-img.is-wide {
  align-items: center;
  padding-top: 0;
}
#contents.renewal22 .brand-page .brand-gprd-img.is-wide img {
  width: 100%;
  height: auto;
}
/* 물걸레 청소포만 원본이 박스보다 가로로 길어 시안에서 크롭돼 있다.
   시안 크롭값이 center cover 와 동일하므로 그렇게 재현한다. */
#contents.renewal22 .brand-page .brand-gprd-img.is-cover {
  width: 8.94444444rem;
  margin-left: auto;
  margin-right: auto;
}
#contents.renewal22 .brand-page .brand-gprd-img.is-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
#contents.renewal22 .brand-page .brand-gprd-tit {
  margin-bottom: 0.44444444rem;
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-gprd-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-gprd-note {
  font-size: 0.36111111rem;
  line-height: 2;
  font-weight: 300;
  color: #666;
}

/* --------------------------------------------------------------------------
   공간별 가이드 (스카트클리닝 04) — 표 + 구분선으로 나뉜 하위 블록
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-space .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-space-table .brand-col-space {
  width: 7.22222222rem;
}
#contents.renewal22 .brand-page .brand-sub.is-divided {
  padding-top: 1.11111111rem;
  border-top: 1px solid #ddd;
}
/* .brand-sub-desc p 보다 특정성이 낮으면 본문 서식에 덮이므로 p 를 함께 명시한다. */
#contents.renewal22 .brand-page .brand-sub-desc p.brand-sub-note {
  font-size: 0.41666667rem;
  line-height: 2;
  font-weight: 300;
  color: #111;
}

/* --------------------------------------------------------------------------
   스카트클리닝 개별 보정 — 공용 컴포넌트와 값이 다른 부분만
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-scott .brand-icard {
  min-height: 9.5rem;
}
#contents.renewal22 .brand-page.brand-scott .brand-icard-tit {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-scott .brand-cmp-table th,
#contents.renewal22 .brand-page.brand-scott .brand-cmp-table td {
  line-height: 1.65;
}
#contents.renewal22 .brand-page.brand-scott .brand-faq-q-txt {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-scott .brand-faq-a-txt p {
  font-size: 0.5rem;
}

/* --------------------------------------------------------------------------
   섹션 하단 안내문 (#666) — .brand-sec-desc(#111) 와 색만 다르다
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-sec-note {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}

/* --------------------------------------------------------------------------
   제품 그리드 3열 · 이미지 전폭 (마이비데 02 라인업)
   - 시안은 절대배치로 타이틀을 항상 y=356 에 두므로, 이미지 영역을 356px 밴드로
     잡고 제품별 상단 여백만 달리한다. 이미지 폭은 열 전폭이고 높이는 비율로 결정.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-mlineup .brand-sec-head,
#contents.renewal22 .brand-page .brand-howto .brand-sec-head,
#contents.renewal22 .brand-page.brand-mybidet .brand-intro .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-mgrid-row {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-mgrid-row + .brand-mgrid-row {
  margin-top: 1.33333333rem;
}
#contents.renewal22 .brand-page .brand-mgrid-row + .brand-sec-desc {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-mprd {
  flex: 1 1 0;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-mprd-img {
  height: 9.88888889rem;
  padding-top: 1.88888889rem;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-mprd-img.is-t64 {
  padding-top: 1.77777778rem;
}
#contents.renewal22 .brand-page .brand-mprd-img.is-t76 {
  padding-top: 2.11111111rem;
}
#contents.renewal22 .brand-page .brand-mprd-img img {
  width: 100%;
  height: auto;
}
#contents.renewal22 .brand-page .brand-mprd-tit {
  margin-bottom: 0.47222222rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-mprd-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-mprd-note {
  font-size: 0.36111111rem;
  line-height: 2;
  font-weight: 300;
  color: #666;
}

/* --------------------------------------------------------------------------
   단계 카드 4열 (마이비데 04 사용법)
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-stepcards {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-stepcard {
  flex: 1 1 0;
  min-width: 0;
  min-height: 8.69444444rem;
  padding: 1.11111111rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-stepcard-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.22222222rem;
  height: 1.22222222rem;
  margin-bottom: 0.66666667rem;
  border-radius: 50%;
  background: #009fe3;
  font-size: 0.55555556rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
}
/* 시안은 2·3·4 단계 타이틀에 빈 줄을 넣어 2줄 높이를 맞춘다 → min-height 로 대체 */
#contents.renewal22 .brand-page .brand-stepcard-tit {
  min-height: 1.33333333rem;
  margin-bottom: 0.66666667rem;
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-stepcard-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}

/* --------------------------------------------------------------------------
   마이비데 개별 보정
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-mybidet .brand-icard {
  min-height: 8rem;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-icard-tit {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-cmp-table th,
#contents.renewal22 .brand-page.brand-mybidet .brand-cmp-table td {
  line-height: 1.65;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-cmp-table .brand-col-div {
  width: 8.33333333rem;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-cmp-table .brand-col-mine {
  width: 15.27777778rem;
}
/* 시험기관 각주 — 04 본문의 인라인 괄호 표기를 각주로 옮겼다. 포레스트 서울 각주와 같은 규격 */
#contents.renewal22 .brand-page.brand-mybidet .brand-fnote {
  margin-top: 0.94444444rem;
  font-size: 0.41666667rem;
  line-height: 0.94444444rem;
  font-weight: 300;
  color: #666;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-cmp-table .brand-col-std2 {
  width: 10rem;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-flush .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-mybidet .brand-safety .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-faq-q-txt {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-mybidet .brand-faq-a-txt p {
  font-size: 0.5rem;
}

/* --------------------------------------------------------------------------
   크리넥스
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-promise .brand-sec-head,
#contents.renewal22 .brand-page .brand-pguide .brand-sec-head,
#contents.renewal22 .brand-page .brand-sustain .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
/* 아이콘 카드 안 각주 — 마이비데 제품 각주(Light)와 달리 Medium */
#contents.renewal22 .brand-page .brand-icard-note {
  font-size: 0.36111111rem;
  line-height: 2;
  font-weight: 500;
  color: #666;
}
/* 제품별 상세 가이드 : 하위 블록 6개가 모두 구분선 + 상단 여백을 가진다 */
#contents.renewal22 .brand-page .brand-pguide .brand-inner > * + *,
#contents.renewal22 .brand-page .brand-sustain .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-sustain-note {
  font-size: 0.41666667rem;
  line-height: 1.95;
  font-weight: 300;
  color: #111;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-icard {
  min-height: 9.08333333rem;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-icard-tit {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-cmp-table th,
#contents.renewal22 .brand-page.brand-kleenex .brand-cmp-table td {
  line-height: 1.65;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-cmp-table .brand-col-mark {
  width: 10rem;
}
/* 시안에서 표 1행의 '의미' 셀만 16px #666 lh1.7 로 다르게 작성돼 있다 */
#contents.renewal22 .brand-page.brand-kleenex .brand-cmp-table td.is-alt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  color: #666;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-faq-q-txt {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-faq-a-txt p {
  font-size: 0.5rem;
}
/* 라인업 이미지 : 열 전폭 크롭 / 전폭 자연높이 (시안 top37 반영) */
#contents.renewal22 .brand-page.brand-kleenex .brand-gprd-img.is-cover {
  width: 9.05555556rem;
  margin-left: auto;
  margin-right: auto;
}
#contents.renewal22 .brand-page.brand-kleenex .brand-gprd-img.is-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* --------------------------------------------------------------------------
   화이트
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-wlineup .brand-sec-head,
#contents.renewal22 .brand-page .brand-ptype .brand-sec-head,
#contents.renewal22 .brand-page .brand-wselect .brand-sec-head,
#contents.renewal22 .brand-page .brand-wquality .brand-sec-head,
#contents.renewal22 .brand-page.brand-white .brand-intro .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
/* 라인업 3열 — 이미지가 열 전폭(445x340), 국문 타이틀 + 영문 라벨(파랑) + 설명 */
#contents.renewal22 .brand-page .brand-wprds {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page .brand-wprd {
  flex: 1 1 0;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-wprd-img {
  margin-bottom: 0.44444444rem;
}
#contents.renewal22 .brand-page .brand-wprd-img img {
  width: 100%;
  height: auto;
}
#contents.renewal22 .brand-page .brand-wprd-tit {
  margin-bottom: 0.44444444rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-wprd-eng {
  margin-bottom: 0.44444444rem;
  font-size: 0.44444444rem;
  line-height: 1.2;
  font-weight: 700;
  color: #009fe3;
}
#contents.renewal22 .brand-page .brand-wprd-txt {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
/* 섹션 05 본문 — 다른 본문 블록과 달리 문단 사이에 25px 간격이 있다 */
#contents.renewal22 .brand-page .brand-wq-body p {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}
#contents.renewal22 .brand-page .brand-wq-body p + p {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-white .brand-icard {
  min-height: 8rem;
}
#contents.renewal22 .brand-page.brand-white .brand-icard-tit {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-white .brand-cmp-table th,
#contents.renewal22 .brand-page.brand-white .brand-cmp-table td {
  line-height: 1.65;
}
#contents.renewal22 .brand-page.brand-white .brand-cmp-table .brand-col-type2 {
  width: 8.33333333rem;
}
#contents.renewal22 .brand-page.brand-white .brand-cmp-table .brand-col-line {
  width: 12.77777778rem;
}
#contents.renewal22 .brand-page.brand-white .brand-cmp-table .brand-col-cert {
  width: 11.66666667rem;
}
/* 섹션 02·05 는 블록이 여러 개라 60px 간격, 섹션 03·04 는 표 하나뿐 */
#contents.renewal22 .brand-page.brand-white .brand-wlineup .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-white .brand-wquality .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page.brand-white .brand-faq-q-txt {
  line-height: 1.2;
}
#contents.renewal22 .brand-page.brand-white .brand-faq-a-txt p {
  font-size: 0.5rem;
}

/* --------------------------------------------------------------------------
   표 공통 (Section 05 선택 기준 / Section 06 사이즈 가이드)
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-table {
  width: 100%;
  border-top: 2px solid #111;
  border-bottom: 1px solid #111;
  border-collapse: collapse;
  table-layout: fixed;
}
#contents.renewal22 .brand-page .brand-table th,
#contents.renewal22 .brand-page .brand-table td {
  padding: 0.5rem 0.55555556rem;
  font-size: 0.5rem;
  line-height: 1.5;
  color: #111;
  vertical-align: middle;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-table thead th {
  border-bottom: 1px solid #111;
  font-weight: 700;
  text-align: center;
}
#contents.renewal22 .brand-page .brand-table tbody th {
  font-weight: 700;
  text-align: center;
}
#contents.renewal22 .brand-page .brand-table tbody td {
  font-weight: 500;
  text-align: left;
}
/* 세로 구분선: 마지막 열 제외 */
#contents.renewal22 .brand-page .brand-table th:not(:last-child),
#contents.renewal22 .brand-page .brand-table td:not(:last-child) {
  border-right: 1px solid #ddd;
}
/* 가로 구분선: 첫 행은 헤더 하단선과 겹치므로 제외 */
#contents.renewal22 .brand-page .brand-table tbody tr + tr > th,
#contents.renewal22 .brand-page .brand-table tbody tr + tr > td {
  border-top: 1px solid #ddd;
}
#contents.renewal22 .brand-page .brand-table-note {
  margin-top: 0.55555556rem;
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}

#contents.renewal22 .brand-page .brand-table td.is-center {
  text-align: center;
}
/* 1열이 행 머리글이 아니라 열 데이터인 표(하기스 물티슈) — 정렬은 두고 굵기만 본문과 같게 */
#contents.renewal22 .brand-page .brand-table.is-firstmedium tbody th {
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Section / 05 요실금 정도·생활 상태·대상별 선택 기준
   - 사이즈 가이드 표와 달리 1열이 Bold 가 아니라 본문과 같은 Medium, 좌측 정렬.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-select .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-select-table tbody th {
  font-weight: 500;
  text-align: left;
}
#contents.renewal22 .brand-page .brand-select-table .brand-col-sel-form {
  width: 5.55555556rem;
}
#contents.renewal22 .brand-page .brand-select-table .brand-col-sel-who {
  width: 3.61111111rem;
}
#contents.renewal22 .brand-page .brand-select-table .brand-col-sel-state,
#contents.renewal22 .brand-page .brand-select-table .brand-col-sel-case {
  width: 10.22222222rem;
}
#contents.renewal22 .brand-page .brand-select-table .brand-col-sel-prd {
  width: 9.27777778rem;
}
#contents.renewal22 .brand-page .brand-select-table td.is-prd {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Section / 06 카테고리별 사이즈 선택 가이드
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-size .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
#contents.renewal22 .brand-page .brand-size-table .brand-col-type {
  width: 6.66666667rem;
}
#contents.renewal22 .brand-page .brand-size-table .brand-col-std {
  width: 16.11111111rem;
}

/* --------------------------------------------------------------------------
   Section / 07 자주 묻는 질문
   - 시안이 전부 펼침 상태(chevron up)라 details 를 open 으로 둔다.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-faq .brand-sec-head {
  margin-bottom: 1.66666667rem;
}
/* 시안 Section Head 프레임 높이에는 마지막 요소 뒤 간격이 포함되지 않는다.
   FAQ 헤드는 전 브랜드가 아이브로우 + 타이틀 구성이라 타이틀 margin-bottom(25px)이
   위 60px 에 덧붙어 85px 이 되던 것을 바로잡는다. */
#contents.renewal22 .brand-page .brand-faq .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page .brand-faq-list {
  border-top: 2px solid #111;
}
#contents.renewal22 .brand-page .brand-faq-item {
  padding: 0.77777778rem 0;
  border-bottom: 1px solid #e5e5e5;
}
/* 기본 마커(삼각형) 제거 */
#contents.renewal22 .brand-page .brand-faq-item > summary {
  list-style: none;
}
#contents.renewal22 .brand-page .brand-faq-item > summary::-webkit-details-marker {
  display: none;
}
#contents.renewal22 .brand-page .brand-faq-q {
  display: flex;
  align-items: center;
  gap: 0.44444444rem;
  cursor: pointer;
}
#contents.renewal22 .brand-page .brand-faq-badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 0.94444444rem;
  height: 0.94444444rem;
  border-radius: 50%;
  background: #009fe3;
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page .brand-faq-badge.is-a {
  background: #f5f5f5;
  color: #666;
}
#contents.renewal22 .brand-page .brand-faq-q-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.55555556rem;
  line-height: 1.7;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page .brand-faq-arrow {
  flex: 0 0 auto;
  width: 0.66666667rem;
  height: 0.66666667rem;
  background: url(/Images/renewal2022/brand/ico-chevron-up.svg) no-repeat 50% 50%;
  background-size: 0.66666667rem 0.66666667rem;
}
/* 접힌 상태에서는 화살표를 뒤집는다 */
#contents.renewal22 .brand-page .brand-faq-item:not([open]) .brand-faq-arrow {
  transform: rotate(180deg);
}
#contents.renewal22 .brand-page .brand-faq-a {
  display: flex;
  align-items: flex-start;
  gap: 0.44444444rem;
  margin-top: 0.55555556rem;
}
#contents.renewal22 .brand-page .brand-faq-a-txt {
  flex: 1 1 auto;
  min-width: 0;
}
#contents.renewal22 .brand-page .brand-faq-a-txt p {
  font-size: 0.47222222rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page .brand-faq-a-txt p.brand-faq-note {
  font-size: 0.38888889rem;
  line-height: 2;
}

/* 답변에 불릿 목록이 들어가는 경우 (디펜드 FAQ 1-1 / 3-4 / 4-2).
   시안은 본문과 불릿 사이에 빈 줄 한 칸(=29px, 17px * 1.7)을 둔다. */
#contents.renewal22 .brand-page .brand-faq-a-txt > * + * {
  margin-top: 0.80555556rem;
}
#contents.renewal22 .brand-page .brand-faq-blist {
  padding: 0;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-faq-blist li {
  font-size: 0.47222222rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-faq-blist strong {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   KV 로고 (포레스트서울) — 영문명 라인 대신 로고가 국문명 위에 붙는다.
   원본 로고 이미지에 여백이 있어 시안에서 세로로 크롭돼 있고,
   그 크롭이 center cover 와 0.5px 차이로 일치하므로 object-fit 으로 재현한다.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   포레스트서울
   01 브랜드 스토리 / 02 피부 컨디션 / 03 제품 라인업 /
   04 스킨케어 순서 / 05 핵심 성분 / 06 FAQ
   시안 섹션 직속 블록 간격은 전부 60px, 하위 블록(Sub) 안쪽은 25px 이다.
   -------------------------------------------------------------------------- */
/* 시안 Section Head 프레임 높이에는 마지막 요소 뒤 간격이 포함되지 않는다.
   헤드가 타이틀로 끝나는 섹션(01·05·06)에서 타이틀 margin-bottom 이
   섹션 간격에 덧붙지 않도록 지운 뒤, 헤드 자체에 간격을 준다. */
#contents.renewal22 .brand-page.brand-forestseoul .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-intro .brand-sec-head {
  margin-bottom: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-fcondition .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-forestseoul .brand-flineup .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-forestseoul .brand-froutine .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-forestseoul .brand-fingr .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
/* 01 각주 — 시안은 본문과 각주 사이를 빈 줄(20px/34px) 한 줄로 띄운다 */
#contents.renewal22 .brand-page.brand-forestseoul .brand-fnote {
  margin-top: 0.94444444rem;
  font-size: 0.41666667rem;
  line-height: 0.94444444rem;
  font-weight: 300;
  color: #666;
}
/* 02 케어 카드 3열 — 공용 .brand-icard 와 카드 높이·타이틀 행간만 다르다 */
#contents.renewal22 .brand-page.brand-forestseoul .brand-icard {
  min-height: 8.75rem;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-icard-tit {
  line-height: 1.2;
}
/* 03 · 04 제품 4열 — 이미지 박스 326x260 전폭 */
#contents.renewal22 .brand-page.brand-forestseoul .brand-pcards {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-pcard {
  flex: 1 1 0;
  min-width: 0;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-pcard-img {
  position: relative;
  height: 7.22222222rem;
  margin-bottom: 0.44444444rem;
  overflow: hidden;
}
/* 시안 크롭은 균등 배율(cover)이 아니라 가로는 박스 전폭에 맞추고 세로만 눌러
   놓은 형태다. object-fit: cover 로 재현하면 원본 비율을 지키느라 시안보다
   확대돼 보이므로, 시안의 이미지 박스 크기·위치를 그대로 쓴다.
   height / top 은 제품마다 달라 마크업에서 인라인으로 지정한다. */
#contents.renewal22 .brand-page.brand-forestseoul .brand-pcard-img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  max-width: none;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-pcard-tit {
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
/* 표 1열 폭 : 03 라인업 300px / 04 화잘먹 치트키 420px */
#contents.renewal22 .brand-page .brand-cmp-table .brand-col-line2 {
  width: 8.33333333rem;
}
#contents.renewal22 .brand-page .brand-cmp-table .brand-col-cheat {
  width: 11.66666667rem;
}
/* 04 단계 카드 4열 — 공용 .brand-stepcard 와 카드 높이만 다르고
   타이틀이 전부 1줄이라 2줄 확보용 min-height 를 없앤다. */
#contents.renewal22 .brand-page.brand-forestseoul .brand-stepcard {
  min-height: 8.02777778rem;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-stepcard-tit {
  min-height: 0;
}
/* 04 화잘먹 치트키 : 하위 블록 안쪽 간격 25px */
#contents.renewal22 .brand-page.brand-forestseoul .brand-sub > .brand-pcards,
#contents.renewal22 .brand-page.brand-forestseoul .brand-sub > .brand-cmp-table {
  margin-top: 0.69444444rem;
}
/* 05 하단 각주 — 구분선 뒤 14px 여백, 본문과 크기는 같고 색만 #666 */
#contents.renewal22 .brand-page.brand-forestseoul .brand-fingr-note {
  min-height: 1.86111111rem;
  padding-top: 0.38888889rem;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page.brand-forestseoul .brand-fingr-note p {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}

/* --------------------------------------------------------------------------
   불릿 목록 (굿나이트 02 / 06 / 07)
   시안은 파란 가운뎃점 + 공백 + 본문 한 줄 구성이고 항목 간격은 12px 이다.
   기존 .brand-care-list(16px / #666)와 크기·색이 달라 별도 컴포넌트로 둔다.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page .brand-blist {
  margin: 0;
  padding: 0;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-blist li {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
  list-style: none;
}
#contents.renewal22 .brand-page .brand-blist li + li {
  margin-top: 0.33333333rem;
}
#contents.renewal22 .brand-page .brand-blist li:before {
  content: "\00B7";
  margin-right: 0.22222222rem;
  color: #009fe3;
}

/* --------------------------------------------------------------------------
   굿나이트
   화면 순서 : 02 야뇨증이란 / 01 브랜드 스토리 / 03 일반 기저귀와의 차이 /
              04 속옷처럼 편안하게 / 06 사이즈와 흡수량 / 07 안전 기준 / 08 FAQ
   (시안 레이어 이름과 배치 순서가 어긋나 있어 배치 순서를 따랐다)
   시안 섹션 직속 블록 간격은 전부 60px, 하위 블록(Sub) 안쪽은 25px 이다.
   -------------------------------------------------------------------------- */
/* 시안 Section Head 프레임 높이에는 마지막 요소 뒤 간격이 포함되지 않는다.
   헤드가 타이틀로 끝나는 FAQ 섹션에서 타이틀 margin-bottom 이 덧붙지 않게 한다. */
#contents.renewal22 .brand-page.brand-goodnites .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-gabout .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-gstory .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-gdiff .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-gcomfort .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-gsize .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-gsafety .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
/* 하위 블록 안쪽 간격은 25px 로 일정하다. 타이틀은 자체 margin-bottom 대신
   형제 간격 규칙을 쓰도록 0 으로 되돌린다. */
#contents.renewal22 .brand-page.brand-goodnites .brand-sub > * + *,
#contents.renewal22 .brand-page.brand-goodnites .brand-sub-head > * + * {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-sub-tit {
  margin-bottom: 0;
}
/* 02 하단 안내문 — 본문과 크기는 같고 색만 #666 */
#contents.renewal22 .brand-page.brand-goodnites .brand-gnote {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
/* 01 특징 카드 3열 — 공용 .brand-icard 와 카드 높이·타이틀 행간만 다르다 */
#contents.renewal22 .brand-page.brand-goodnites .brand-icard {
  min-height: 8rem;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-icard-tit {
  line-height: 1.2;
}
/* 03 비교 표 열폭 (240 / 400 / 나머지) */
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gdiv {
  width: 6.66666667rem;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gbaby {
  width: 11.11111111rem;
}
/* 06 사이즈 표 열폭 (220 / 180 / 180 / 160 / 나머지) */
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gsize {
  width: 6.11111111rem;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gwt,
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gunder {
  width: 5rem;
}
#contents.renewal22 .brand-page.brand-goodnites .brand-table .brand-col-gsex {
  width: 4.44444444rem;
}

/* 표 전체 열이 가운데 정렬인 경우 (굿나이트 06 사이즈 표 · 흡수량 표) */
#contents.renewal22 .brand-page .brand-table.is-all-center tbody td {
  text-align: center;
}

/* --------------------------------------------------------------------------
   좋은느낌
   01 브랜드 스토리 / 02 라인업 / 제품 형태 / 03 소재 / 04 선택 가이드 /
   인증 / 05 상황별 / 06 캠페인 / 07 FAQ  (흰 배경과 틴트가 교대로 배치된다)
   섹션 직속 블록 간격 60px, 하위 블록(Sub) 안쪽 25px.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-goodfeel .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfstory .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gflineup .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gftype .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfmaterial .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfselect .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfcert .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfsituation .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfcsr .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
/* 제품 형태 · 인증 섹션 타이틀은 시안에서 행간이 56px 이 아니라 기본값이다 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-gftype .brand-sec-tit,
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfcert .brand-sec-tit {
  line-height: 1.2;
}

/* 01 : 본문 각주(17px) / 카드 아래 각주(13px) */
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfnote {
  margin-top: 0.69444444rem;
  font-size: 0.47222222rem;
  line-height: 2;
  font-weight: 300;
  color: #111;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfcards > * + * {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfnote-sm {
  font-size: 0.36111111rem;
  line-height: 3;
  font-weight: 300;
  color: #111;
}
/* 카드 1 안쪽 각주 — 시안은 본문과 각주 사이를 빈 줄 한 줄(27px)로 띄운다.
   공용 .brand-icard-note 는 Medium 이라 좋은느낌만 Light 로 둔다. */
#contents.renewal22 .brand-page.brand-goodfeel .brand-icard-note {
  margin-top: 0.75rem;
  font-weight: 300;
}
/* 카드 타이틀이 2줄인 항목이 있어 행간을 기본값으로 둔다 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-icard-tit {
  line-height: 1.2;
}

/* 02 제품 라인업 4열 × 3행 — 이미지 원본이 박스(326x260)와 정확히 같아 크롭이 없다 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfgrid > * + * {
  margin-top: 1.33333333rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfrow {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd {
  flex: 0 0 auto;
  width: 9.05555556rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-img {
  width: 9.05555556rem;
  height: 7.22222222rem;
  margin-bottom: 0.44444444rem;
  overflow: hidden;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-tit {
  margin-bottom: 0.44444444rem;
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
/* 무표백 100% 유기농 순면커버만 한 줄에 담기도록 시안에서 19px 로 줄여 놓았다 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-tit.is-sm {
  font-size: 0.52777778rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-desc p {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfprd-desc p.brand-gfprd-note {
  font-size: 0.36111111rem;
  line-height: 2;
  font-weight: 300;
}

/* 표 열폭 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-cmp-table .brand-col-gf300 {
  width: 8.33333333rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-cmp-table .brand-col-gf420 {
  width: 11.66666667rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-cmp-table .brand-col-gf280 {
  width: 7.77777778rem;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-cmp-table .brand-col-gf460 {
  width: 12.77777778rem;
}
/* 셀 안쪽 각주 (인증 표 1행) */
#contents.renewal22 .brand-page.brand-goodfeel .brand-gfcell-note {
  font-size: 0.41666667rem;
  line-height: 1.95;
  font-weight: 300;
}

/* 04 · 05 하위 블록 각주 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-sub-desc p.brand-gfsub-note {
  font-size: 0.41666667rem;
  line-height: 1.95;
  font-weight: 300;
  color: #111;
}
#contents.renewal22 .brand-page.brand-goodfeel .brand-sub-desc p.brand-gfsub-plain {
  margin-top: 0.69444444rem;
}
/* 센서티브스킨 블록만 시안 상단 여백이 60px 이다 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-sub.is-pt60 {
  padding-top: 1.66666667rem;
}
/* 05 불릿 목록 아래 안내문 */
#contents.renewal22 .brand-page.brand-goodfeel .brand-blist + .brand-sec-note {
  margin-top: 0.69444444rem;
}

/* 1열이 세로 가운데 정렬인 표 (좋은느낌 소재 구조 · 인증) */
#contents.renewal22 .brand-page .brand-table.is-vmiddle tbody th {
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   베베그로우
   01 브랜드 스토리 / 02 라인업 / 03 젖병 / 04 젖꼭지 / 05 빨대컵 /
   06 호환성 / 07 안심 소재 / 08 세척·소독 / 09 출산 준비 / 10 FAQ
   (홀수 섹션 흰 배경, 짝수 섹션 틴트로 완전히 교대된다)
   섹션 직속 블록 간격 60px, 하위 블록(Sub) 안쪽 25px.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-bebegrow .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgstory .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bglineup .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgbottle .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgnipple .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgcup .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgcompat .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgsafety .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgcare .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
/* 하위 블록 안쪽 간격 25px — 타이틀은 자체 margin 대신 형제 간격 규칙을 쓴다 */
#contents.renewal22 .brand-page.brand-bebegrow .brand-sub > * + * {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-sub-tit {
  margin-bottom: 0;
}
/* 01 특징 카드 3열 — 공용 .brand-icard 와 카드 높이·타이틀 행간만 다르다 */
#contents.renewal22 .brand-page.brand-bebegrow .brand-icard {
  min-height: 8rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-icard-tit {
  line-height: 1.2;
}
/* 02 제품 4열 × 2행 — 이미지 원본이 박스(326x260)와 정확히 같아 크롭이 없다.
   좋은느낌과 달리 이미지 아래 설명문 없이 제품명만 붙는다. */
#contents.renewal22 .brand-page.brand-bebegrow .brand-bggrid > * + * {
  margin-top: 1.33333333rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgrow {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgprd {
  flex: 0 0 auto;
  width: 9.05555556rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgprd-img {
  width: 9.05555556rem;
  height: 7.22222222rem;
  margin-bottom: 0.44444444rem;
  overflow: hidden;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgprd-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgprd-tit {
  font-size: 0.55555556rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
/* 표 + 하단 안내문 묶음 (02) */
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgtblwrap > * + * {
  margin-top: 0.69444444rem;
}
/* 07 목록 + 각주 묶음 — 시안은 목록과 같은 12px 간격이고 각주만 13px #666 이다 */
#contents.renewal22 .brand-page.brand-bebegrow .brand-bglist-wrap > * + * {
  margin-top: 0.33333333rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-bgnote-sm {
  padding-left: 0.38888889rem;
  font-size: 0.36111111rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
/* 표 열폭 */
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg380 {
  width: 10.55555556rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg240 {
  width: 6.66666667rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg220 {
  width: 6.11111111rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg200 {
  width: 5.55555556rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg180 {
  width: 5rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg140 {
  width: 3.88888889rem;
}
#contents.renewal22 .brand-page.brand-bebegrow .brand-cmp-table .brand-col-bg420 {
  width: 11.66666667rem;
}

/* --------------------------------------------------------------------------
   그린핑거
   01 브랜드 스토리 / 02 스킨케어 / 03 선케어 / 04 구강케어 /
   05 세탁·주방세제 / 06 물티슈·소독티슈 / 07 지속가능성 / 08 FAQ
   (홀수 섹션 흰 배경, 짝수 섹션 틴트로 완전히 교대된다)
   섹션 직속 블록 간격 60px, 하위 블록(Sub) 안쪽 25px.
   시안의 Images 프레임 3개(01·04·07)는 hidden 상태라 반영하지 않았다.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-greenfinger .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstory .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-grskin .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-grsun .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-groral .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-grhome .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-grwipes .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-greenfinger .brand-grsustain .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-sub > * + * {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-sub-tit {
  margin-bottom: 0;
}
/* 01 지표 카드 3열 — 아이콘 배지 + 라벨(18px) + 값(파랑 22px) */
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstats {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 6.69444444rem;
  padding: 1.11111111rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  margin-bottom: 0.44444444rem;
  border-radius: 50%;
  background: #009fe3;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat-label {
  margin-bottom: 0.44444444rem;
  font-size: 0.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat-value {
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #009fe3;
}
/* 시안은 각주 별표를 값 텍스트보다 2px 위, 18px 크기로 붙여 놓았다 */
#contents.renewal22 .brand-page.brand-greenfinger .brand-grstat-ast {
  position: relative;
  top: -0.05555556rem;
  font-size: 0.5rem;
}
/* 03 · 05 · 06 전폭 이미지 (1400x750) — 원본이 박스보다 세로로 길어 크롭된다.
   크롭 위치는 섹션마다 달라 object-position 을 마크업에서 지정한다. */
#contents.renewal22 .brand-page.brand-greenfinger .brand-grimg {
  width: 38.88888889rem;
  height: 20.83333333rem;
  overflow: hidden;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 02 이미지 + 본문 2단 (이미지 670x445 고정, 본문이 남은 폭) */
#contents.renewal22 .brand-page.brand-greenfinger .brand-grmedia {
  display: flex;
  gap: 1.66666667rem;
  align-items: flex-start;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grmedia-img {
  flex: 0 0 auto;
  width: 18.61111111rem;
  height: 12.36111111rem;
  overflow: hidden;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grmedia-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contents.renewal22 .brand-page.brand-greenfinger .brand-grmedia .brand-sub {
  flex: 1 1 0;
  min-width: 0;
}
/* 05 표 하단 각주 (13px) — 시안은 공백 4칸으로 들여쓰기돼 있다 */
#contents.renewal22 .brand-page.brand-greenfinger .brand-grnote-sm {
  padding-left: 0.38888889rem;
  font-size: 0.36111111rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
/* 표 열폭 */
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr220 { width: 6.11111111rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr240 { width: 6.66666667rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr280 { width: 7.77777778rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr320 { width: 8.88888889rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr380 { width: 10.55555556rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr420 { width: 11.66666667rem; }
#contents.renewal22 .brand-page.brand-greenfinger .brand-cmp-table .brand-col-gr480 { width: 13.33333333rem; }

/* --------------------------------------------------------------------------
   하기스
   01 브랜드 스토리 / 02 기저귀 / 03 젠더핏 / 04 단계와 사이즈 /
   05 선택 가이드 / 06 성분과 안전 / 07 물티슈 / 08 FAQ
   (홀수 섹션 흰 배경, 짝수 섹션 틴트로 완전히 교대된다)
   섹션 직속 블록 간격 60px, 하위 블록(Sub) 안쪽 25px.
   -------------------------------------------------------------------------- */
#contents.renewal22 .brand-page.brand-huggies .brand-sec-head > *:last-child {
  margin-bottom: 0;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstory .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hgdiaper .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hggenderfit .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hgsize .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hgguide .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hgquality .brand-inner > * + *,
#contents.renewal22 .brand-page.brand-huggies .brand-hgwipes .brand-inner > * + * {
  margin-top: 1.66666667rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-sub > * + * {
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-sub-tit {
  margin-bottom: 0;
}
/* 제품별 사이즈표 탭 (시안 712:987 / 712:1367)
   시안 실측: 탭리스트 h47 gap6 / 탭 패딩 좌우 16 · 텍스트-chevron 간격 12 · chevron 12x12
   세로: 탭리스트 -> 25 -> 단계 설명 -> 25 -> 표.
   비활성 패널도 DOM 에 남겨 표 10개가 모두 색인되도록 한다. */
#contents.renewal22 .brand-page.brand-huggies .brand-hgtablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.16666667rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.33333333rem;
  height: 1.30555556rem;
  padding: 0 0.44444444rem;
  border: 1px solid #aaa;
  border-radius: 0;
  background-color: #fff;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.5rem;
  line-height: normal;
  font-weight: 500;
  color: #111;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* chevron 12x12 — 별도 에셋을 두지 않고 인라인 SVG 로 넣는다.
   레이아웃 폭이 시안 아이콘과 같은 12px 여서 탭 폭이 '텍스트 + 56' 으로 시안과 일치한다. */
#contents.renewal22 .brand-page.brand-huggies .brand-hgtab:after {
  content: '';
  display: block;
  flex: 0 0 auto;
  width: 0.33333333rem;
  height: 0.33333333rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5L6 8.5L10 4.5' fill='none' stroke='%23111111' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtab.is-on {
  border-color: #009fe3;
  background-color: #009fe3;
  font-weight: 700;
  color: #fff;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtab.is-on:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 7.5L6 3.5L10 7.5' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 표 행 수가 제품마다 달라(5~8행) 탭을 바꿀 때마다 아래 블록이 밀리는 문제.
   패널 전부를 같은 그리드 셀에 겹쳐 두면 행 높이가 '가장 큰 패널' 로 고정되어
   어느 탭을 눌러도 높이가 변하지 않는다. 값을 박지 않으므로 표가 늘거나 줄어도 따라간다. */
#contents.renewal22 .brand-page.brand-huggies .brand-hgpanels {
  display: grid;
  margin-top: 0.69444444rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtabpanel {
  grid-column: 1;
  grid-row: 1;
}
/* hidden 패널도 자리를 차지해야 높이가 유지되므로 display 대신 visibility 로 숨긴다.
   (스타일이 로드되지 않으면 hidden 기본값 display:none 이 적용되어 첫 표만 보인다) */
#contents.renewal22 .brand-page.brand-huggies .brand-hgtabpanel[hidden] {
  display: block;
  visibility: hidden;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtabpanel .brand-hgsub-note {
  margin-top: 0;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgtabpanel .brand-table {
  margin-top: 0.69444444rem;
}
/* 01 지표 카드 3열 — 그린핑거와 달리 값(파랑 22px)이 먼저, 라벨(18px Medium)이 뒤 */
#contents.renewal22 .brand-page.brand-huggies .brand-hgstats {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstat {
  flex: 1 1 0;
  min-width: 0;
  min-height: 6.91666667rem;
  padding: 1.11111111rem;
  background: #e6f5fc;
  box-sizing: border-box;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.22222222rem;
  height: 2.22222222rem;
  margin-bottom: 0.44444444rem;
  border-radius: 50%;
  background: #009fe3;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstat-ico img {
  width: 1.11111111rem;
  height: 1.11111111rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstat-value {
  margin-bottom: 0.44444444rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #009fe3;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgstat-label {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #111;
}
/* 02 브랜드 카드 3+2 — 이미지 445x340, 시안이 대부분 contain 이고 보송보송만 cover */
#contents.renewal22 .brand-page.brand-huggies .brand-hggrid > * + * {
  margin-top: 1.33333333rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgrow {
  display: flex;
  gap: 0.88888889rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard {
  flex: 0 0 auto;
  width: 12.36111111rem;
}
/* 시안 실측(138:1538): 이미지 박스 445x340 안에서 제품 이미지는 높이 200px 로 통일되고
   세로 가운데 정렬된다(y70~268). 폭은 제품 비율에 맡긴다 — 시안 폭 299/253/327/422/362 가
   '에셋 여백을 트림한 내용비율 x 200px' 과 ±2px 로 일치한다.
   높이를 박스에 맞추면(contain) 에셋별 여백 차이로 200~340px 로 들쭉날쭉해진다. */
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.36111111rem;
  height: 9.44444444rem;
  margin-bottom: 0.44444444rem;
  overflow: hidden;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-img img {
  width: auto;
  max-width: 100%;
  height: 5.55555556rem;
  object-fit: contain;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-tit {
  margin-bottom: 0.44444444rem;
  font-size: 0.61111111rem;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-desc p {
  font-size: 0.44444444rem;
  line-height: 1.7;
  font-weight: 500;
  color: #666;
}
/* 시안은 "* 함유" 만 15px 로 한 단계 작다 */
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-sup {
  font-size: 0.41666667rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgcard-desc p.brand-hgcard-note {
  font-size: 0.36111111rem;
  line-height: 2;
  font-weight: 300;
}
/* 각주 : 02 브랜드 비교표 아래(15px Light) / 07 헤드(14px #666) / 07 생분해(15px Light) */
#contents.renewal22 .brand-page.brand-huggies .brand-hgnote {
  font-size: 0.41666667rem;
  line-height: 1.65;
  font-weight: 300;
  color: #111;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgnote-sm {
  font-size: 0.38888889rem;
  line-height: 2.2;
  font-weight: 500;
  color: #666;
}
#contents.renewal22 .brand-page.brand-huggies .brand-sub-desc p.brand-hgsub-ast {
  font-size: 0.41666667rem;
  line-height: 2;
  font-weight: 300;
}
/* 04 · 05 제품 블록 부제 — 타이틀 바로 아래 18px #666 */
#contents.renewal22 .brand-page.brand-huggies p.brand-hgsub-note {
  font-size: 0.5rem;
  line-height: 1.65;
  font-weight: 500;
  color: #666;
}
/* 07 물티슈 — QA(09.11): 이미지가 너무 크고 가운데 정렬이 안 맞아 좌우 2단으로 바꾼다.
   시안 실측(컨테이너 1400 기준): 왼쪽 텍스트단 560 / 오른쪽 이미지 620x254 · 둘 다 상단 정렬.
   라인업 표는 아래 전체 폭. 이미지는 원본 비율(1854x758)을 그대로 쓰므로 크롭이 없다. */
#contents.renewal22 .brand-page.brand-huggies .brand-hgwipes .brand-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 1.66666667rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgwipes .brand-inner > * + * {
  margin-top: 0;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgwipes .brand-sec-head {
  max-width: 15.55555556rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgimg {
  width: 17.22222222rem;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgimg img {
  width: 100%;
  height: auto;
}
#contents.renewal22 .brand-page.brand-huggies .brand-hgwipes .brand-sub {
  grid-column: 1 / -1;
  margin-top: 1.66666667rem;
}
/* 표 열폭 */
#contents.renewal22 .brand-page.brand-huggies .brand-cmp-table .brand-col-hg220 { width: 6.11111111rem; }
#contents.renewal22 .brand-page.brand-huggies .brand-cmp-table .brand-col-hg260 { width: 7.22222222rem; }
#contents.renewal22 .brand-page.brand-huggies .brand-cmp-table .brand-col-hg340 { width: 9.44444444rem; }
#contents.renewal22 .brand-page.brand-huggies .brand-cmp-table .brand-col-hg420 { width: 11.66666667rem; }
#contents.renewal22 .brand-page.brand-huggies .brand-cmp-table .brand-col-hg760 { width: 21.11111111rem; }