@charset "UTF-8";

/* =========================================================
   0) RESET / BASE (공통)
========================================================= */
/* 터치 하이라이트 제거 */
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

/* 포커스 아웃라인 제거(너 스타일) */
a:focus, button:focus, button:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* 버튼 기본 렌더링 제거 */
button{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:0;
  font:inherit; color:inherit;
}
button::-moz-focus-inner{ border:0; padding:0; }

/* 헤더 fixed 헤어라인 완화(선택) */
header{
  transform: translateZ(0);
  backface-visibility: hidden;
  border-bottom: 0;
}

html, body{ height:100%; }

/* reset */
*{ box-sizing:border-box; }
body, input, button, select, textarea{ font-family:"Pretendard"; }

body{
  margin:0;
  color:#333;
  font-size:16px;
  line-height:1.5;
}

a{ color:#333; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
img{ vertical-align:top; max-width:100%; }
address{ font-style:normal; }
.en{ text-transform:uppercase; }

.hidden{
  position:absolute; left:-99999999%; top:-99999999%;
  width:.1%; height:.1%;
  font-size:.1%; line-height:.1%;
  overflow:hidden;
}

.rozi{ font-family:"Paperozi"; }

/* =========================================================
   1) TOKENS / LAYOUT WRAP (공통)
========================================================= */
:root{
  --header-h: 80px;
}

body{
  font-size:15px;
  line-height:1.6;
}

/* 페이지 상단 고정헤더 높이만큼 밀기 (각 페이지 body에 클래스 주면 더 좋음)
   - 기존에 .index에만 있던 걸 "공통으로 쓰려면" 보통 body에 page class를 줌.
   - 일단 너 구조대로 .index 유지.
*/
body.index{
  padding-top: var(--header-h);
}

.wrap{
  margin-left: 18px;
  margin-right: 18px;
}

/* 데스크탑 공통 */
@media (min-width:1025px){
  :root{ --header-h:110px; }
  html{ scroll-padding-top: var(--header-h); }

  .wrap{
    width:1200px;
    margin:0 auto;
  }

  .snap{
    min-height:100vh;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
}

/* =========================================================
   2) HEADER + GNB (공통)
========================================================= */
header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:9999;
  background:#fff;
  transition: box-shadow .25s, border-bottom-color .25s;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  border-bottom-color:#e9e9e9;
}

header .wrap{
  display:flex;
  height: var(--header-h);
  justify-content: space-between;
  align-items:center;
}

header h1 img{ display:block; }

/* GNB base */
.gnb{ position:relative; }
.gnb .menu{ display:none; }

/* hamburger */
.hamburger{
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  overflow:visible;
}
.hamburger span{
  position:absolute;
  left:50%; top:50%;
  width:24px; height:2px;
  background:#1d2088;
  border-radius:999px;
  transform: translate(-50%,-50%);
  transform-origin:center;
  transition: transform .22s ease, opacity .18s ease;
}
.hamburger span:nth-child(1){ transform: translate(-50%,-50%) translateY(-7px); }
.hamburger span:nth-child(2){ transform: translate(-50%,-50%); }
.hamburger span:nth-child(3){ transform: translate(-50%,-50%) translateY(7px); }

.gnb.is-open .hamburger span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); }
.gnb.is-open .hamburger span:nth-child(2){ opacity:0; }
.gnb.is-open .hamburger span:nth-child(3){ transform: translate(-50%,-50%) rotate(-45deg); }

/* 모바일 오버레이(HTML에서 header 밖에 있어도 동작) */
.gnb-backdrop{
  position:fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .22s ease;
  z-index:9000;
}
body.is-menu-open .gnb-backdrop{
  opacity:1;
  pointer-events:auto;
}

/* =========================
   Mobile menu panel (<=1024)
========================= */
@media (max-width:1024px){
  .gnb .menu{
    display:block;
    position:fixed;
    top: var(--header-h);
    right:18px;

    width: min(50vw, 360px);
    max-width: calc(100vw - 36px);
    max-height: calc(100vh - var(--header-h) - 18px);
    overflow-y:auto;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:18px;
    box-shadow:0 14px 30px rgba(0,0,0,.18);

    transform: translateY(-12px);
    opacity:0;
    pointer-events:none;
    transition: transform .22s ease, opacity .22s ease;
    z-index:10001;
  }

  .gnb.is-open .menu{
    transform: translateY(12px);
    opacity:1;
    pointer-events:auto;
  }

  .gnb .menu > li > a{
    display:block;
    padding:16px 18px;
    font-size:18px;
    font-weight:500;
    border-bottom:1px solid #eee;
  }

  .gnb .sub{
    display:none;
    background:#fafafa;
    padding:6px 0;
    border-bottom:1px solid #eee;

    max-height: 45vh;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .gnb .sub a{
    display:block;
    padding:12px 22px;
    font-size:16px;
  }
  .gnb .menu > li.open > .sub{ display:block; }

  body.is-menu-open{ overflow:hidden; }
}

/* =========================
   Desktop GNB (>=1025)
========================= */
@media (min-width:1025px){
  .hamburger{ display:none; }
  .gnb-backdrop{ display:none; }

  .gnb ul.menu{
    display:flex;
    font-weight:500;
    font-size:20px;
    opacity:1;
  }

  .menu > li{
    position:relative;
    width:180px;
    text-align:center;
    height: var(--header-h);
    line-height:normal;
  }

  .gnb .menu > li > a{
    height: var(--header-h);
    display:flex;
    align-items:center;
    justify-content:center;
    transition: .3s;
  }

  .menu > li:hover > a{
    color:#1d2088;
    font-weight:600;
  }
  .menu > li:hover::after{
    content:"";
    width:150px;
    height:1px;
    background:#888;
    position:absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
  }

  /* 2차(드랍다운) */
  .menu > li > ul{
    display:none;
    position:absolute;
    top: var(--header-h);
    left:50%;
    transform: translateX(-50%);
    width:100%;
    background:#fff;
    box-shadow: 0 2px 10px #00000049;
    padding:0;
    margin:0;
  }
  .menu > li:hover > ul{ display:block; }

  .menu > li > ul > li{ height:50px; }
  .gnb .menu > li > ul.sub > li > a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:50px;
    padding:0 12px;
    font-size:18px;
    color:#333;
    transition: background-color .2s, color .2s, font-weight .2s;
  }
  .gnb .menu > li > ul.sub > li > a:hover{
    background:#ccc;
    color:#1d2088;
    font-weight:600;
  }

  /* ✅ 2차 메뉴가 길면 내부 스크롤 */
  .gnb .menu > li > ul.sub{
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .gnb .menu > li > ul.sub::-webkit-scrollbar{ width: 10px; }
  .gnb .menu > li > ul.sub::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,.18);
    border-radius: 999px;
    border: 3px solid #fff;
  }
}

/* =========================================================
   3) FOOTER (공통)
========================================================= */
footer{
  background:#4a4a4a;
  color:#fff;
  padding:22px 18px 26px;
}

.footer1{
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius:14px;
  padding:16px 16px 14px;

  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}

.footer1 .service{
  font-size:14px;
  font-weight:500;
  opacity:.95;
  letter-spacing:-0.02em;
}
.footer1 .tel{
  font-size:30px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.footert2{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.logo2 img{
  display:block;
  height:34px;
  width:auto;
  opacity:.95;
}
.footert2 address{
  font-size:12px;
  line-height:1.6;
  opacity:.9;
  letter-spacing:-0.01em;
  word-break: keep-all;
  overflow-wrap:anywhere;
}

@media (max-width:360px){
  .footer1 .tel{ font-size:27px; }
}

/* 데스크탑 footer */
@media (min-width:1025px){
  footer{
    min-height:230px;
    padding: 0 clamp(80px, 8.5vw, 180px);
    display:flex;
    align-items:center;
    justify-content: space-between;
  }

  .footer1{
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
    gap:10px;
  }
  .footer1 .service{ font-size:25px; }
  .footer1 .tel{ font-size:40px; }

  .footert2{
    width:520px;
    margin:0 !important;
    padding:0 !important;
    align-items:flex-end;
    text-align:right;
    gap:8px;
  }
  .logo2{
    width:100%;
    display:flex;
    justify-content:flex-end;
  }
  .logo2 img{ height:44px; }
  .footert2 address{
    font-size:14px;
    line-height:1.75;
    opacity:.92;
    width:100%;
    text-align:right;
  }

  .snap--footer{
    min-height:auto !important;
    padding-top:60px;
  }
}

/* =========================================================
   4) QUICK BAR (공통: 데스크탑만)
========================================================= */
.biolab-qb{ display:none; }

@media (min-width:1025px){
  .biolab-qb{ display:block; }

  :root{
    --qb-w: 100px;
    --qb-h: 350px;
    --qb-radius: 18px;
    --qb-safe: 10px;
    --qb-offset: 70px;

    --qb-scale: min(
      1,
      calc((100vw - (var(--qb-safe) * 2)) / var(--qb-w)),
      calc((100vh - (var(--qb-safe) * 2)) / var(--qb-h))
    );
  }

  .biolab-qb{
    position:fixed;
    top:50%;
    transform: translateY(-50%) scale(var(--qb-scale));
    transform-origin: right center;
    z-index:9999;

    right: max(var(--qb-safe), calc(50% - 960px + var(--qb-offset)));
    width: var(--qb-w);
    height: var(--qb-h);
    border-radius: var(--qb-radius);
    background:#006b63;
    box-shadow:0 14px 30px rgba(0,0,0,.4);
    overflow:hidden;
  }

  .biolab-qb__inner{
    position:relative;
    width:100%;
    height:100%;
    color:#fff;
    text-align:center;
    word-break: keep-all;
  }
  .biolab-qb *{ box-sizing:border-box; }

  .biolab-qb__logo{
    position:absolute;
    left:50%;
    top:15%;
    transform: translateX(-50%);
    width:50px;
    height:34px;
  }
  .biolab-qb__logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
  }

  .biolab-qb__title{
    position:absolute;
    top:45%;
    left:50%;
    transform: translateX(-50%);
    width:100%;
    text-shadow: 0 2px 0 rgba(0,0,0,.28);
  }
  .biolab-qb__title .en{
    font-family:"KOTRA_BOLD", sans-serif;
    font-weight:700;
    font-size:14px;
    line-height:1.05;
    letter-spacing:-0.4px;
    white-space:nowrap;
  }
  .biolab-qb__title .ko{
    margin-top:0;
    font-family:"KOTRA_BOLD", sans-serif;
    font-weight:700;
    font-size:10px;
    letter-spacing:-0.8px;
    white-space:nowrap;
  }

  .biolab-qb__desc{
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    width:100%;
    top:245px;
    font-weight:500;
    font-size:10px;
    line-height:1.25;
    text-shadow: 0 2px 0 rgba(0,0,0,.25);
    white-space:nowrap;
  }

  .biolab-qb__btn{
    position:absolute;
    left:50%;
    top:290px;
    transform: translateX(-50%);
    width:86px;
    height:24px;
    border-radius:999px;
    background:#fff;
    color:#111;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    box-shadow: 0 5px 0 rgba(0,0,0,.18);
  }
  .biolab-qb__btn .txt{
    font-weight:700;
    font-size:10px;
    white-space:nowrap;
  }
  .biolab-qb__btn .arrow{
    font-size:11px;
    font-weight:900;
    color:#006b63;
    line-height:1;
    white-space:nowrap;
  }
  .biolab-qb__btn:hover{
    transform: translateX(-50%) translateY(-1px);
  }

  @media (max-width:1400px){
    :root{ --qb-offset:20px; }
  }
}



/* =========================================================
   A) MAIN PAGE ONLY (index 전용)
========================================================= */

/* ✅ 메인 배경: index에서만 */
body.index{
  background: url("../img/hero.jpg") center top / cover no-repeat fixed;
}

/* 메인 섹션 간격(메인에만 쓰는 클래스들) */
.promise,
.song,
.strength{
  margin-top: 26px;
  margin-bottom: 26px;
}

/* =========================================================
   1) HERO (메인)
========================================================= */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  height: calc(100vh - var(--header-h));
  min-height: calc(100vh - var(--header-h));
  padding:0;
}
.hero > *{ position:relative; z-index:1; }

.s1{
  color:#e5fb50;
  font-size:30px;
  font-weight:bold;
  line-height:1.12;
  letter-spacing:-0.02em;
  text-shadow:
    0 2px 0 rgba(0,0,0,.28),
    0 6px 0 rgba(0,0,0,.20),
    0 16px 24px rgba(0,0,0,.35);
  margin:0;
}
.s2{
  font-weight:500;
  color:#fff;
  font-size:16px;
  text-shadow: 0 10px 16px rgba(0,0,0,.45);
  line-height:1.45;
  margin-top:12px;
}

@media (min-width:1025px){
  .hero{ min-height:100vh; height:100vh; }
  .s1{ font-size:75px; }
  .s2{ font-size:33px; }
}

/* =========================================================
   2) PROMISE (vision)
========================================================= */
.promise{
  --box-pad-x: 20px;
  --box-pad-y: 26px;
  --col-gap: 10px;
  --inner-gap: 10px;

  --content-w: 280px;
  --img-h: 200px;

  background-color:#f9f5ec;
  border-radius:15px;
  text-align:center;
  box-shadow:1.9px 2.3px 6px 1.5px rgba(0,0,0,.247);
  padding: var(--box-pad-y) var(--box-pad-x);
  margin-top:0;
}

.promise h1{
  color:#0f2e3f;
  font-size:24px;
  font-weight:600;
  line-height:1.25;
}
.promise h2{
  color:#2e5e4f;
  font-size:24px;
  font-weight:700;
  margin-top:6px;
}
.promise h3{
  color:#2b2b2b;
  font-size:18px;
  font-weight:600;
  margin-top:6px;
}

.value{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr;
  justify-items:center;
  gap: var(--col-gap);
}
.value > div{
  width: min(100%, var(--content-w));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: var(--inner-gap);
}
.value > div img{
  width:100%;
  height: var(--img-h);
  object-fit: cover;
  border-radius:14px;
  margin-top:8px;
  display:block;
}
.value > div p{
  width:100%;
  max-width:100%;
  line-height:1.55;
  letter-spacing:-0.06em;
  font-size:16px;
  color:#2b2b2b;
  word-break: keep-all;
  overflow-wrap:anywhere;
}

@media (min-width:1025px){
  .promise{
    /* 박스 높이 시안과 동일 */
    height:650px;

    /* 기존 값 조정(너무 크던 여백/간격 축소) */
    --content-w: 300px;
    --img-h: 280px;        /* 220 -> 210 (조금만 줄여 높이 맞추기) */
    --col-gap: 70px;
    --inner-gap: 10px;     /* 14 -> 10 */

    border-radius:30px;
    margin:155px auto;
    padding:48px 75px;     /* 60 -> 48 (세로 여백 축소) */
    overflow:hidden;       /* 혹시 넘치면 깔끔하게 */
  }

  .promise h1{
    font-size:45px;
    line-height:1.15;
    margin:0 0 18px;       /* 타이틀 아래 간격 통제 */
  }

  .promise h2{
    font-size:40px;
    margin:0;              /* ★ 50px 제거(세로 벌어짐 원인) */
    line-height:1.05;
  }

  .promise h3{
    font-size:25px;
    margin:8px 0 0;        /* h2-h3 간격만 적당히 */
    line-height:1.2;
  }

  .value{
    grid-template-columns: repeat(3, var(--content-w));
    justify-content: space-between;
    align-items:start;
    gap: var(--col-gap);
    margin-top:0;
  }

  .value > div{
    gap: var(--inner-gap);
  }

  .value > div img{
    height: var(--img-h);
    margin-top:10px;       /* 8px 정도로 관리 */
  }

  .value > div p{
    font-size:16px;
    margin:0;              /* 문단 기본 margin 제거 */
    line-height:1.45;      /* 1.55 -> 1.45로 살짝 압축 */
  }
}
/* =========================
   PROMISE - MOBILE TWEAK
   (1025px 미만에서만 적용)
   ========================= */
@media (max-width:1024px){

  /* 1) h2-h3 간격: 더 타이트하게 */
  .promise h2{ margin-top: 6px; margin-bottom: 0; }
  .promise h3{ margin-top: 2px; }  /* ← 6px -> 2px (원하면 0~4px로 조절) */

  /* 2) .value 내부 div(카드) 사이 간격: 더 넓게 */
  .promise{ --col-gap: 22px; }     /* ← 10px -> 22px (원하면 18~28px 추천) */
}

/* ========================================================= 
   3) SONG (logo song / video)
========================================================= */
.song{
  background-color:#f9f5ec;
  border-radius:15px;
  text-align:center;
  box-shadow:1.9px 2.3px 6px 1.5px rgba(0,0,0,.247);
  padding:40px;
}
.song h1{
  color:#0f2e3f;
  font-size:24px;
  font-weight:600;
  line-height:1.25;
}
.song p .songsub{
  color:#2b2b2b;
  font-size:15px;
}
.songsub .dreamtnc{ font-weight:bold; }
.songend{
  color:#2e5e4f;
  font-size:18px;
  font-weight:600;
  margin-top:10px;
}

/* video */
.video-wrap{
  position:relative;
  margin-top:16px;
  border-radius:16px;
  overflow:hidden;
}
.preview-video{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border-radius:16px;
  object-fit:cover;
  object-position: center 30%;
}

/* overlay UI */
.video-title{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:2;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:16px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
}
.video-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  display:none;
}
.video-play{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index:4;
  width:74px;
  height:74px;
  border-radius:999px;
  border:0;
  background: rgba(0,0,0,.55);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.video-play__icon{
  width:0; height:0;
  border-left: 20px solid #fff;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left:4px;
}
.video-wrap.is-playing .video-play{
  opacity:0;
  pointer-events:none;
}

.video-mute{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:6;
  width:52px;
  height:52px;
  border-radius:999px;
  border:0;
  background: rgba(0,0,0,.55);
  cursor:pointer;
  display:grid;
  place-items:center;

  /* ✅ 표시를 버튼 위에 얹기 위한 기준 */
  overflow:visible;
}
.video-mute.is-hidden{ display:none; }
.video-mute svg{
  width:26px;
  height:26px;
  display:block;
}

/* =========================================================
   ✅ 음소거 상태 표시(/)
   - .video-wrap 에 is-muted 클래스가 있으면 / 가 보임
========================================================= */

/* / 기본(숨김) */
.video-mute::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;

  width:18px;              /* 길이 */
  height:1.5px;            /* ✅ 선 굵기(가늘게) */
  background: rgba(255,255,255,.92);
  border-radius:999px;

  transform: translate(-50%, -50%) rotate(-25deg); /* ✅ / 모양 */
  text-shadow: 0 2px 10px rgba(0,0,0,.55);

  opacity:0;
  transition: opacity .15s ease;
  pointer-events:none; /* 클릭 방해 X */
}

/* 음소거일 때만 / 표시 */
.video-wrap.is-muted .video-mute::after{
  opacity:1;
}

/* 음소거일 때 스피커 아이콘 살짝 흐리게(선택) */
.video-wrap.is-muted .video-mute svg{
  opacity:.55;
}

/* expanded modal */
.video-wrap.is-expanded{
  position:fixed;
  inset:0;
  width:auto; height:auto;
  margin:0;
  padding:24px;
  background: rgba(0,0,0,.72);
  z-index:10000;
  display:grid;
  place-items:center;
}
.video-wrap.is-expanded .video-title{ display:none; }
.video-wrap.is-expanded .video-close{ display:block; }
.video-wrap.is-expanded .preview-video{
  border-radius:18px;
  object-fit: contain;
}

@media (min-width:1025px){
  .song{
    height:650px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:30px;
    gap:20px;
    margin:155px auto;
  }
  .song h1{ font-size:38px; }
  .song p .songsub{ font-size:18px; }
  .songend{ font-size:26px; }

  .video-wrap{
    width:1050px;
    height:338px;
    margin:0 auto;
  }
  .preview-video{
    width:100%;
    height:100%;
    display:block;
    border-radius:18px;
    object-fit: cover;
  }

  .video-title{
    padding:14px 20px;
    font-size:26px;
  }

  /* 데스크탑: 레터박스 없이 꽉차게 */
  .video-wrap.is-expanded{ padding:0; }
  .video-wrap.is-expanded .preview-video{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius:18px;
  }
}


/* =========================================================
   4) STRENGTH (메인)
========================================================= */
.strength{
  text-align:center;
  padding-top:10px;
}
.strh1 h1{
  font-size:26px;
  font-weight:600;
  color:#fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.6), 2px 2px 6px rgba(0,0,0,.6);
  line-height:1.2;
  margin-bottom:14px;
}
.strcon{
  display:grid;
  gap:18px;
}
.str{
  background:#f9f5ec;
  border-radius:18px;
  box-shadow: 10px 18px 30px rgba(0,0,0,.14), 3px 6px 12px rgba(0,0,0,.10);
  text-align:center;
  overflow:hidden;

  padding:34px 0 0;
  display:flex;
  flex-direction:column;
  min-height:480px;
}
.str h2{
  color:#0f2e3f;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 14px;
  padding:0 18px;
}
.str p{
  color:#2b2b2b;
  font-size:14px;
  line-height:1.65;
  margin-top:20px;
  padding:0 22px;
}
.str > img:first-of-type{
  height:64px;
  margin:0 auto 14px;
  display:block;
}
.str > img:last-of-type{
  margin-top:auto;
  width:100%;
  height:210px;
  object-fit:cover;
  object-position:center 20%;
  display:block;
}

@media (min-width:1025px){
  .strength{
    height:650px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:20px;
    margin:155px auto;
  }
  .strh1 h1{ font-size:48px; }
  .strcon{
    display:flex;
    justify-content:center;
    gap:80px;
    margin-top:55px;
  }
  .str{
    width:360px;
    height:520px;
    border-radius:28px;
    box-shadow: 10px 18px 30px rgba(0,0,0,.14);
    align-items:center;
    padding-top:34px;
  }
  .str h2{ font-size:20px; }
  .str p{
    font-size:16px;
    margin-top:20px;
    margin-bottom:26px;
    line-height:1.55;
  }
  .str > img:first-of-type{
    height:80px;
    margin:10px 0 18px;
  }
  .str > img:last-of-type{
    height:230px;
    object-fit:cover;
  }
}

/* =========================================================
   5) LINEUP (메인)
========================================================= */
.lineup{
  margin: 30px 0;
  text-align:center;
}

.luh1{ margin-bottom:14px; }
.luh1 h1{
  font-size:24px;
  font-weight:600;
  color:#fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.55), 2px 2px 10px rgba(0,0,0,.35);
  line-height:1.2;
}

/* 모바일: 카드 박스 */
.lucon{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;

  background:#f9f5ec;
  border-radius:16px;
  box-shadow: 0 10px 18px rgba(0,0,0,.16);
  padding:12px 12px 78px;
  margin-top:16px;

  position:relative;
  overflow: visible;
}

.item{ display:block; color:inherit; text-decoration:none; }

.lucon > .item img{
  width:100%;
  aspect-ratio: 1 / 1.414;
  object-fit: contain;
  border-radius:12px;
  display:block;
}

.lucon .item p{
  margin-top:10px;
  font-weight:600;
  color:#0f2e3f;
  font-size:14px;
  line-height:1.3;
  letter-spacing:-0.02em;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* + 버튼 */
.lineup-more{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  width:38px;
  height:38px;
  border-radius:999px;
  background: rgba(0,0,0,.42);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 10px 18px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  z-index:6;
}
.lineup-more::before,
.lineup-more::after{
  content:"";
  position:absolute;
  width:18px;
  height:2.3px;
  background:#fff;
  border-radius:999px;
}
.lineup-more::after{ transform: rotate(90deg); }

.gotoshop{
  display:block;
  width: min(220px, 62%);
  margin:14px auto 0;
}
.gotoshop img{ width:100%; height:auto; display:block; }



@media (min-width:1025px){
  .lineup{
    margin:155px auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:100px;
  }

  .luh1{ margin:0; }
  .luh1 h1{
    font-size:48px;
    font-weight:700;
    text-shadow:
      0 3px 0 rgba(0,0,0,.55),
      0 10px 22px rgba(0,0,0,.45);
  }

  .lucon{
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:0;
    margin:0;

    display:grid;
    grid-template-columns: repeat(4, 210px) 56px;
    column-gap:52px;
    align-items:start;
    justify-content:center;
  }

  .lucon > .item{
    width:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .lucon > .item img{
    width:210px;
    height:297px;
    aspect-ratio: 210 / 297;
    object-fit: cover;
    border-radius:0 !important;
    background:#fff;
    box-shadow: 0 18px 36px rgba(0,0,0,.35);
  }

  .lucon .item p{
    margin-top:18px;
    font-size:16px;
    color: rgba(255,255,255,.9);
    text-shadow:
      0 1px 2px rgba(0,0,0,.55),
      0 4px 8px rgba(0,0,0,.45),
      0 10px 18px rgba(0,0,0,.35);

    display:block;
    overflow:visible;
  }

  .lineup-more{
    position: static;
    transform:none;
    width:48px;
    height:48px;
    justify-self:end;
    align-self:center;
  }

  .gotoshop{
    margin:0;
    width:255px;
  }
}
.seo-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}