@charset "utf-8";
/* brand — 브랜드 3개 페이지(소개 · 연구·성분 · 회사소개) 디자인.

   되어 있었고, 치수도 스크롤 고정(pin) 연출을 전제로 크게 잡혀 있었다.
   닥터스랩은 일반 브랜드 페이지로 쓰므로 여기서 다시 정의한다.

   읽는 순서: theme.css -> base-*.css -> skin-*.css -> brand.css (맨 마지막) */

/* ---------- 공통 ---------- */
body.brandpage{ padding-top:var(--sp-page-top); }
body.brandpage .brand{ padding-top:0; }
body.brandpage .sustain_wrap{ display:block; }

body.brandpage .inner,
body.brandpage .brand > section > .txt_box{ max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad); }

/* 페이지 대표 제목 */
body.brandpage .txt_box .tit{
  display:block; text-align:center; font-size:var(--fs-page); font-weight:700;
  letter-spacing:-0.12rem; line-height:1.2; margin:0 0 2.8rem; color:var(--fontColor);
}
/* 본문 중간 섹션 제목 */
body.brandpage .txt_box .sec_tit{
  display:block; text-align:center; font-size:var(--fs-sec); font-weight:700;
  letter-spacing:-0.08rem; margin:0 0 1.8rem; color:var(--fontColor);
}
body.brandpage .txt_box .sec_tit.en::after{
  content:""; display:block; width:4rem; height:2px; margin:2.4rem auto 0;
  background:var(--mainColor);
}
body.brandpage .txt_box .des{
  text-align:center; font-size:var(--fs-body); line-height:1.95; color:var(--fontProDesc);
  margin:0 0 .6rem;
}
body.brandpage .txt_box .des.ft_b{ font-weight:600; color:var(--fontColor); font-size:var(--fs-h3); }

/* 섹션 사이 간격 — 제목 블록이 본문 중간에 올 때.
   회사소개는 한 <section> 안에 글상자와 카드묶음이 번갈아 들어간다. */
body.brandpage .sustain_wrap + .txt_box,
body.brandpage #sec01 .sustain_wrap + .txt_box{ margin-top:var(--sp-section); }
body.brandpage .txt_box + .sustain_wrap{ margin-top:5rem; }
body.brandpage .brand > section > .txt_box:first-child + .sustain_wrap{ margin-top:7rem; }

/* ---------- 이미지 + 글 (ver2) ---------- */
body.brandpage .sustain_box{ display:grid; }
body.brandpage .sustain_box.ver2{
  grid-template-columns:1fr 1fr; align-items:center;
  max-width:140rem; margin:0 auto; background:var(--white);
}
body.brandpage .sustain_box.ver2 .img_box{ overflow:hidden; aspect-ratio:4/3; }
body.brandpage .sustain_box.ver2 .img_box img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.2s ease;
}
body.brandpage .sustain_box.ver2:hover .img_box img{ transform:scale(1.04); }
body.brandpage .sustain_box.ver2 .txt_box{ padding:5rem 7rem; }
body.brandpage .sustain_box.ver2.alt-side .img_box{ order:2; }
body.brandpage .sustain_box.ver2.alt-side .txt_box{ order:1; }

/* ---------- 글만 (ver3) ---------- */
body.brandpage .sustain_box.ver3{ grid-template-columns:1fr; }
body.brandpage .sustain_box.ver3 .txt_box{
  max-width:96rem; margin:0 auto; padding:5rem 6rem;
  background:var(--mainBgColor); border-radius:.8rem;
}

/* ---------- 박스 안 글자 ---------- */
body.brandpage .sustain_box .txt_box{ display:block; }
body.brandpage .sustain_box .sustain_num{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.2em;
  /* 네온(--mainColor)은 연한 배경 위에서 대비가 1.6:1 이라 거의 안 보인다.
     진한 색을 옅게 쓰는 쪽이 읽히면서도 조용하다. 제품 상세의 번호와 같은 처리. */
  
  color:var(--subColor); opacity:1; margin-bottom:1.2rem;
}
body.brandpage .sustain_box .sustain_tit{
  font-size:var(--fs-lead); font-weight:700; letter-spacing:-0.04rem;
  color:var(--fontColor); margin-bottom:2rem; line-height:1.3;
}
body.brandpage .sustain_box .sustain_desc{ opacity:1; }
body.brandpage .sustain_box .sustain_desc span{
  display:block; font-size:var(--fs-body); line-height:1.9; color:var(--fontProDesc);
  margin-bottom:.6rem; opacity:1;
}
body.brandpage .sustain_wrap .sustain_box + .sustain_box{ margin-top:3rem; }

/* ---------- 회사정보 표 ---------- */
body.brandpage .sustain_desc span strong{
  display:inline-block; min-width:13rem; font-weight:700; color:var(--fontColor);
}
body.brandpage .sustain_desc a{ color:var(--subColor); text-decoration:underline; }

/* ---------- 인증·시험 표식 ---------- */
body.brandpage .sustain_mark{ display:flex; margin-top:2.6rem; gap:.8rem; flex-wrap:wrap; }
body.brandpage .sustain_mark .mark_box p{
  border:1px solid var(--mainColor); border-radius:3rem;
  padding:.7rem 1.8rem; font-size:var(--fs-sm); color:var(--subColor); white-space:nowrap;
}

/* ---------- About 전용 ---------- */
/* 섹션 번호(#sec02…)로 고르지 않는다.
   id 선택자는 우선순위가 높아서, 뒤에 오는 '마지막 섹션' 규칙이 아무리 자세해도
   클래스만으로는 못 이긴다. 그래서 위치로 고른다. */
body.brandpage.page-brand-about #sec01{ padding:0; }
body.brandpage.page-brand-about .rotate-section > section{
  /* 섹션 위아래에 --sp-section 을 그대로 주면 이웃한 두 섹션 사이가 두 배(약 200px)로 벌어져
     페이지가 비어 보인다. 절반씩 나눠 주어 섹션 사이 총합이 --sp-section 이 되게 한다.
     제품 상세(.detail_sec 의 margin-top)와 같은 리듬이다. */
  height:auto; min-height:0; max-height:none; position:static;
  padding:calc(var(--sp-section) / 2) 0;
}
/* 배경 띠가 깔리는 섹션은 띠 안쪽이 답답해지므로 조금 더 준다. */
body.brandpage.page-brand-about #sec03{ padding:var(--sp-section) 0; }
/* 마지막 섹션의 아래 여백은 뺀다. 페이지 아래 여백은 #contents 가 따로 준다. */
body.brandpage.page-brand-about .rotate-section > section:last-child{ padding-bottom:0; }
body.brandpage .sec01_banner{ margin-top:5rem; }
body.brandpage .sec01_banner .img_box img{ width:100%; display:block; }

/* 선언문 */
body.brandpage.page-brand-about #sec02 .txt_box h3{
  font-size:var(--fs-sec); font-weight:700; line-height:1.5; text-align:center;
  margin-bottom:2.6rem; letter-spacing:-0.08rem; color:var(--fontColor);
}
body.brandpage.page-brand-about #sec02 .txt_box p{
  font-size:var(--fs-body); line-height:1.95; text-align:center; color:var(--fontProDesc);
}

/* Logo & Symbol */
body.brandpage.page-brand-about #sec03{ background:var(--gray1); text-align:center; }
body.brandpage.page-brand-about #sec03 .sec03_tit{
  display:block; font-size:var(--fs-sec); font-weight:700; margin-bottom:1.6rem; color:var(--fontColor);
}
body.brandpage.page-brand-about #sec03 .sec03_tit::after{
  content:""; display:block; width:4rem; height:2px; margin:2.4rem auto 5rem; background:var(--mainColor);
}
body.brandpage.page-brand-about #sec03 .top{
  display:inline-flex; align-items:center; justify-content:center;
  padding:5rem 8rem; background:var(--white); border-radius:1rem;
  box-shadow:0 2px 24px rgba(0,0,0,.05); margin-bottom:5rem;
}
body.brandpage.page-brand-about #sec03 .desc_box .desc_tit{
  font-size:var(--fs-h3); font-weight:700; margin-bottom:1.6rem; color:var(--fontColor);
}
body.brandpage.page-brand-about #sec03 .desc_box .desc_txt{
  font-size:var(--fs-body); line-height:1.95; color:var(--fontProDesc);
}

/* Brand Color */
body.brandpage .brand_color{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2rem;
  max-width:96rem; margin:5rem auto 0;
}
body.brandpage .brand_color .color_box{
  aspect-ratio:5/2; border-radius:.8rem; display:flex; flex-direction:column;
  align-items:flex-start; justify-content:flex-end; padding:2.8rem; color:#fff;
}
body.brandpage .brand_color .color_box p{
  font-size:1.5rem; font-weight:700; letter-spacing:.12em; line-height:1.7;
}

/* Our Principles — 세 칸으로 나란히 */
body.brandpage.page-brand-about #sec05 .sustain_wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  max-width:var(--page-max); margin:5rem auto 0; padding:0 var(--page-pad);
}
body.brandpage.page-brand-about #sec05 .sustain_box{ margin:0 !important; }
body.brandpage.page-brand-about #sec05 .sustain_box .txt_box{
  max-width:none; margin:0; height:100%; padding:4.5rem 3.5rem;
}

/* ---------- 등장 효과 ---------- */
body.brandpage .ani_load{
  transition:transform .8s ease, opacity .8s ease, filter .8s ease;
  opacity:0; filter:blur(10px); transform:translateY(24px);
}
body.brandpage .ani_load.ani_view{ opacity:1; filter:blur(0); transform:translateY(0); }

/* 로고 이미지 — symbol_default 대신 쓰는 클래스. */
body.brandpage.page-brand-about #sec03 .brand_logo{ height:18rem; display:block; }

/* ---------- About 히어로 ----------
   제목만 놓고 아래에 사진을 두면 가운데가 비어 보인다는 지적.
   제목에 한 줄을 붙이고, 사진 위에 영문 문구를 얹어 채운다. */
.brand_about #sec01 .txt_box .tit_sub{
  margin-top:1.8rem; font-size:var(--fs-body); letter-spacing:-0.03rem; color:var(--subColor);
  font-weight:500; text-align:center;
}

.brand_about #sec01 .txt_box{ padding-bottom:0; }
.brand_about #sec01 .sec01_banner{ position:relative; margin-top:7rem; }
.brand_about #sec01 .banner_copy{
  position:absolute; top:50%; left:7%; transform:translateY(-50%);
  z-index:2; text-align:left; max-width:48rem; pointer-events:none;
}
.brand_about #sec01 .banner_copy::before{
  content:''; position:absolute; inset:-5rem -7rem; z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0) 100%);
}
.brand_about #sec01 .banner_copy .eyebrow{
  font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:.34em; color:var(--subColor);
  margin-bottom:2rem;
}
.brand_about #sec01 .banner_copy .line{
  font-size:var(--fs-hero); font-weight:700; line-height:1.18; letter-spacing:-0.09rem;
  color:var(--btnBlack);
}

/* ==================== 휴대폰 ==================== */
@media (max-width:1023px){
  /* 다른 서브 페이지(.sub_page 7rem + 제목 여백 5rem)와 제목 높이를 맞춘다. */
  body.brandpage{ padding-top:12rem; }

  /* 구역 사이 여백이 PC 기준(위아래 20rem)이라, 좁은 화면에서는 글 한 줄 보려고
     빈 화면을 두 번 넘겨야 한다. 전부 --sp-section(6rem) 으로 맞춘다.
     같은 아이디를 쓰되 body 까지 얹어 이긴다. */
  body.brandpage #sec02, body.brandpage #sec03,
  body.brandpage #sec04, body.brandpage #sec05,
  body.brandpage #sec06, body.brandpage #sec07{
    padding-top:var(--sp-section); padding-bottom:var(--sp-section);
  }
  body.brandpage #sec01{ padding-top:0; }
  /* 글상자가 화면 끝에 딱 붙는다. 구역 바로 밑의 글상자에만 좌우 여백을 준다.
     (.brand > section 으로 잡았더니 실제 부모가 .rotate-section 이라 하나도 안 걸렸다) */
  body.brandpage section.section > .txt_box,
  body.brandpage section.section > .desc_box{ padding-left:var(--page-pad); padding-right:var(--page-pad); }
  /* 본문은 왼쪽 정렬로 내린다.
     가운데 정렬은 한 줄짜리 문구일 때 쓰는 것인데, 390px 에서는 같은 문단이
     세 줄 네 줄로 늘어난다. 줄마다 시작점이 달라 눈이 매번 줄 머리를 찾아야 한다.
     제목과 밑줄은 가운데를 유지해 화면의 중심선은 그대로 둔다. */
  body.brandpage .txt_box .des,
  body.brandpage.page-brand-about #sec02 .txt_box p,
  body.brandpage.page-brand-about #sec03 .desc_box{ text-align:left; }
  /* 한 줄로 끝나는 리드 문구는 가운데가 어울린다 */
  body.brandpage .txt_box .des.ft_b{ text-align:center; }

  /* PC 폭에 맞춰 손으로 넣은 <br> 이 좁은 화면에서는 한 줄을 두 동강 낸다.
     줄바꿈을 지우고 글이 스스로 흐르게 둔다. */
  body.brandpage .txt_box .des br,
  body.brandpage .desc_txt br,
  body.brandpage.page-brand-about #sec02 .txt_box p br{ display:none; }

  /* 제목과 본문 사이가 PC 기준 6.3rem 이라 휴대폰에서는 둘이 따로 노는 것처럼 보인다. */
  body.brandpage section.section > .txt_box > p,
  body.brandpage #sec01 .txt_box > p, body.brandpage #sec02 .txt_box > p,
  body.brandpage #sec03 .txt_box > p, body.brandpage #sec04 .txt_box > p,
  body.brandpage #sec05 .txt_box > p, body.brandpage #sec06 .txt_box > p{
    padding-top:0; margin-top:1.6rem;
  }

  /* 대제목 ~ 부제 ~ 배너 사이가 각각 48 / 18 / 70px 로 벌어져 첫 화면이 제목만으로 찬다. */
  body.brandpage #sec01 .tit{ padding-bottom:0; margin-bottom:1.2rem; }
  body.brandpage #sec01 .tit_sub{ margin-top:0; }
  body.brandpage #sec01 .sec01_banner{ margin-top:3.4rem; }

  /* 사진 + 글이 좌우로 놓이던 상자를 위아래로 */
  body.brandpage .sustain_box.ver1,
  body.brandpage .sustain_box.ver2{ display:block; max-width:none; }
  body.brandpage .sustain_box .img_box img{ width:100%; display:block; }
  body.brandpage .sustain_box.ver2 .txt_box,
  body.brandpage .sustain_box.ver1 .txt_box{ padding:2.4rem var(--page-pad) 3rem; }
  body.brandpage .sustain_box.ver3{ max-width:none; padding:0; margin:0 var(--page-pad); }
  /* 좁은 화면에서는 글이 상자 한가운데쯤에서 시작하는 것처럼 보였다. */
  body.brandpage .sustain_box.ver3 .txt_box{
    max-width:none; margin:0; padding:2.8rem 2.2rem 3rem; padding-left:2.2rem;
  }
  body.brandpage .sustain_wrap .sustain_box + .sustain_box{ margin-top:2rem; }

  /* About 히어로 */
  .brand_about #sec01 .banner_copy{ left:var(--page-pad); right:var(--page-pad); max-width:none; }
  .brand_about #sec01 .banner_copy .line{ font-size:var(--fs-hero); }
  .brand_about #sec01 .banner_copy::before{ inset:-2rem -2.4rem; }
  body.brandpage .sec01_banner{ margin-top:3.4rem; }
  body.brandpage .sec01_banner .img_box img{ aspect-ratio:4/3; object-fit:cover; }

  /* 로고 카드 — 좌우 8rem 여백이 좁은 화면에서는 너무 크다 */
  body.brandpage.page-brand-about #sec03 .top{ padding:3rem 2rem; margin-bottom:3rem; width:100%; }
  /* 가로로 긴 워드마크라, 카드 안쪽 여백까지 꽉 채우면 답답해 보인다. */
  body.brandpage .brand_logo{ height:auto; width:auto; max-width:76%; }

  /* 색 견본 2칸 → 1칸 */
  body.brandpage .brand_color{ grid-template-columns:1fr; gap:1.2rem; margin-top:3rem; padding:0 var(--page-pad); }
  body.brandpage .brand_color .color_box{ aspect-ratio:3/1; padding:2rem; }

  /* Our Principles 3칸 → 1칸 */
  body.brandpage.page-brand-about #sec05 .sustain_wrap{ grid-template-columns:1fr; gap:1.2rem; margin-top:3rem; }
  body.brandpage.page-brand-about #sec05 .sustain_box .txt_box{ padding:2.6rem 2.2rem 3rem; }
  body.brandpage .sustain_mark{ margin-top:2rem; }
}

/* ==================== 태블릿 (768 ~ 1023px) ==================== */
@media (min-width:768px) and (max-width:1023px){
  body.brandpage .brand_color{ grid-template-columns:repeat(2,1fr); }
  body.brandpage.page-brand-about #sec05 .sustain_wrap{ grid-template-columns:repeat(3,1fr); }
  body.brandpage .sustain_box.ver2{ display:grid; grid-template-columns:1fr 1fr; }
  body.brandpage .sustain_box.ver2 .txt_box,
  body.brandpage .sustain_box.ver1 .txt_box{ padding:3rem 3.4rem; }
}