:root {
  --gutter: clamp(64px, 8vw, 160px);
  --gutter-base: clamp(48px, 8vw, 160px);
  --gutter-x3: calc(var(--gutter-base) * 3);
}

.sub-sub03.page02 #header .gnb > li > a{color: #000}

.bg-activer-wr{padding: 12.4rem 0 12.7rem}
.bg-activer-wr .sub-tit-wr span{color: #000;font-size: 1.8rem;font-weight: 400;letter-spacing: -0.9px;}
.bg-activer-wr .c-txt{font-size: var(--fontSize-20);font-weight: 300;line-height: 33px;letter-spacing: -1px;margin-top: 7.2rem;}
.img-gridBx{grid-gap: 4rem;margin-top: 3.5rem;}


.sub3-pg1 .cont1, .sub3-pg1 .cont2{background-color: #000;}

.sub3-pg1 .cont2 .sub-tit-wr span{text-align: center;}
.sub3-pg1 .cont2{padding: 20rem 0 44rem}
.sub3-pg1 .cont2 .top-fx{align-items: flex-start;justify-content: center;gap: 34rem;margin-top: 5.7rem;}
.sub3-pg1 .cont2 .top-fx p{font-size: var(--fontSize-35);color: #fff;font-weight: bold;line-height: 55px;letter-spacing: -0.8px;}
.sub3-pg1 .cont2 .line-list{position: relative;z-index: 2; margin-top: 31rem;padding: 0 var(--inner-pd)}
.sub3-pg1 .cont2 .line-list .icon{width: 18rem}
.sub3-pg1 .cont2 .box-img{width: 50rem;height: 30rem;}
.sub3-pg1 .cont2 .contBx{position: relative;}
.sub3-pg1 .cont2 .bg-wr{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 1;display: flex;align-items: center;justify-content: center;}
.sub3-pg1 .cont2 .bg-img{display: block;transform: scale(0.25); transform-origin: 50% 50%;will-change: transform; }

.sub3-pg1 .bg-ani-wr{}
.sub3-pg1 .sec-menu {position: fixed;top: 12.7rem;left: 5.1rem;z-index: 100;list-style: none;opacity: 0;transform: translateY(-8px);pointer-events: none;transition: opacity .4s ease, transform .4s ease;}
.sub3-pg1 .sec-menu.is-visible {opacity: 1;transform: translateY(0);pointer-events: auto;}
.sub3-pg1 .sec-menu > li{font-family: "Poppins", sans-serif;font-size: var(--fontSize-15);color: #fff;letter-spacing: -0.75px;transition: color 0.3s ease;cursor: pointer;}
.sub3-pg1 .sec-menu > li:not(:last-child){padding-bottom: .5rem;}
.sub3-pg1 .sec-menu > li.current{color: #000000;}
.bg-ani-wr {transition: background-color 0.8s ease;}


.sub3-pg1 .cont6 {padding: 21.1rem 0 20rem;overflow: hidden;position: relative;}
.sub3-pg1 .cont6 .cont-bx{gap: clamp(80px, 8vw, 240px);width: max-content;padding-left: var(--gutter-x3);padding-right: var(--gutter-x3);box-sizing: content-box;will-change: transform; }
.sub3-pg1 .cont6 .img-fx{gap: 90rem}
.sub3-pg1 .cont6 .img-fx .img{max-width: 100%; display:block; height:auto; }
.sub3-pg1 .cont6 .img-fx1{}
.sub3-pg1 .cont6 .img-fx2{margin-left: 33rem;}
.sub3-pg1 .cont6 p{font-family: "Poppins", sans-serif;font-size: 28rem;line-height: 281px;letter-spacing: 10.73px;font-weight: 100;white-space: nowrap;}


/* ********************************** */
.sub3-pg2 { overflow: visible; }
.sub3-pg2 .cont1{
  position:relative; height: 100svh; overflow:hidden;
  background:#fff; isolation:isolate; touch-action: pan-y;
}

/* 텍스트 */
.ani-txtBx{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.ani-txtBx .line{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:center;
  font-size:5rem; font-weight:900; line-height:1; letter-spacing:-.02em; color:#111;
}
.ani-txtBx .line{ z-index:3; }

/* 대체문자 O */
.inline-o{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:inherit; font-weight:900; opacity:0; line-height:normal}

/* 하트 */
.o-wrap{position:relative; display:inline-block; width:30px; height:34px; line-height:0; vertical-align:baseline; overflow:visible}
.o-wrap .icon-spot{position:absolute; inset:0; z-index:2}
.o-wrap .heart-svg{position:absolute; inset:0; width:30px; height:34px; display:block; overflow:visible; pointer-events:none}

/* 하트 라인 */
#heartShape{
  fill:#fff; stroke:#EA0029; stroke-width:6; vector-effect:non-scaling-stroke; paint-order:stroke fill;
  stroke-linecap:round; stroke-linejoin:round; shape-rendering:geometricPrecision;
}
#heartG{ transform-origin:50% 50% }

/* 화이트 카드 래퍼(클립 확장만) */
.white-window{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; pointer-events:none}
.white-window__inner{
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:#fff; border-radius:0; box-shadow:none; opacity:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  clip-path:inset(var(--clipT,35%) var(--clipR,35%) var(--clipB,35%) var(--clipL,35%) round var(--clipRad,24px));
  -webkit-clip-path:inset(var(--clipT,35%) var(--clipR,35%) var(--clipB,35%) var(--clipL,35%) round var(--clipRad,24px));
  will-change: clip-path, opacity; -webkit-backface-visibility: hidden; transform: translateZ(0);
}

/* 내부 컨텐츠 카드: 기본은 '보임' */
.active-wr{
  opacity:1; border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.16);
  transition:border-radius .2s linear, box-shadow .2s linear;
}
.active-wr .txtBx{display:flex; flex-direction:column; align-items:center; padding:0 24px; text-align:center}
.active-wr .txt{font-size:5.5rem; font-weight:700; line-height:97px; color:#111; letter-spacing:0; word-spacing:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap}
.active-wr .img{
  display:inline-block; margin:0 1rem; vertical-align:middle; overflow:hidden;
  width:auto; opacity:1; will-change: width, opacity;
}

/* 타임라인 활성 구간에서만 '숨김 시작 상태' 적용 */
.sub3-pg2 .cont1.is-active .active-wr{ opacity:0; }
.sub3-pg2 .cont1.is-active .active-wr .img{ width:0; opacity:0; }


/* ********************************** */


.sub3-pg2 .cont2{padding: 20rem 0;position: relative;overflow: hidden;height: 100vh;background-color: #fff}
.sub3-pg2 .cont2 .pdt-list{gap: 15rem;padding-left: var(--gutter);padding-right: var(--gutter);transition: transform 0.1s linear;transition: transform 0.1s linear;will-change: transform;width: max-content; }
.sub3-pg2 .cont2 .pdt-list strong{display: block;font-size: 6rem;font-weight: bold;line-height: 80px;letter-spacing: -1.4px;margin-left: -5rem;margin-bottom: -3rem;position: relative;z-index: 1;}

.sub3-pg2 .cont3{padding: 20rem 0 71rem;position: relative;}
.sub3-pg2 .cont3 .top-fx h2{color: #000;width: 60%}
.sub3-pg2 .cont3 .top-fx .icon{width: 25rem;margin: 0 auto}
.sub3-pg2 .cont3 .bx{display: flex;align-items: flex-end;justify-content: flex-end;flex-direction: column;}
.sub3-pg2 .cont3 p{font-size: var(--fontSize-20);line-height: 30px;letter-spacing: -0.99px;text-align: left;display: flex;align-items: flex-end;flex-direction: column;justify-content: flex-end;}
.sub3-pg2 .cont3 .lineBx{margin-right: 28rem;margin-top: -1.5rem;}
.sub3-pg2 .cont3 .btm-bx{flex-direction: column;justify-content: center;margin-left: -35rem;padding-top: 3rem;}
.sub3-pg2 .cont3 .btm-bx span{display: block;font-size: var(--fontSize-20);color: #EA0029;font-weight: bold;}

.sub3-pg2 .cont3 .contBx{position: absolute; display: flex;align-items: center;flex-direction: column;justify-content: flex-end;right: 38rem;margin-top: -1.6rem;}
.sub3-pg2 .cont3 svg{width: 40.1rem;height: 44rem;}


@media all and (max-width:1800px) {
  .sub3-pg1 .cont2 .top-fx{gap: 20rem}

}
@media all and (max-width:1400px) {
  .sub3-pg1 .cont2 .top-fx{gap: 4rem}
  .sub3-pg1 .cont2 .top-fx p{font-size: 3.3rem;}

  .sub3-pg1 .sec-menu{background-color: #ffffffa1;border-radius: 1rem;padding: 1rem;left: initial;right: 3rem;}
  .sub3-pg1 .sec-menu > li{color: #8d8d8d;}
  .sub3-pg1 .sec-menu > li.current{font-weight: bold;}

  .active-wr .txt{font-size: 3.5rem;line-height: 80px;}
  .sub3-pg2 .cont3 .contBx{right: 26rem;}
  .sub3-pg2 .cont3 .top-fx h2{width: 50%}
  .sub3-pg2 .cont3 .top-fx .icon{width: 17rem;margin: 0}
}
@media all and (max-width:980px) {
  .active-wr .txt{line-height: 51px}
    .sub3-pg2 .cont3 .top-fx h2{width: auto;}
}
@media all and (max-width:960px) {
  .sub3-pg1 .cont2{padding: 10rem 0 15rem}
  .sub3-pg1 .cont2 .top-fx{flex-direction: column;align-items: center;}
  .sub3-pg1 .cont2 .top-fx p{font-size: 3rem;line-height: 43px;text-align: center;}

  .sub3-pg1 .cont2 .line-list{margin-top: 10rem;display: grid;grid-template-columns: repeat(2,1fr);}
  .sub3-pg1 .cont2 .line-list::after{display: none;}

  .bg-activer-wr{padding: 10rem 0}
  .bg-activer-wr .c-txt{margin-top: 4rem;}
  .img-gridBx{grid-gap:2rem}

  .sub3-pg1 .cont6 .img-fx{gap: 55rem}
  .sub3-pg1 .cont6 p{font-size: 20rem;line-height: 250px;}

  :root {
    --gutter: clamp(64px, 8vw, 100px);
    --gutter-base: clamp(48px, 8vw, 160px);
    --gutter-x3: calc(var(--gutter-base) * 3);
  }


  .active-wr .txt{font-size: 2.8rem;line-height: 63px;}
  img.img.at-img1, img.img.at-img3{height: 50px !important;}
  img.img.at-img2{width: 3.5rem !important;}
  img.img.at-img4{width: 5rem !important;}
  img.img.at-img5, img.img.at-img6{width: 6rem !important;}
  img.img.at-img7{width: 8.5rem !important;}

  .sub3-pg2 .cont1 .ani-txtBx p{font-size: 4.5rem;}

  .sub3-pg2 .cont2 .pdt-list strong{font-size: 5rem;line-height: 56px;margin-bottom: -2rem;}
  .sub3-pg2 .cont2 .pdt-list .box-img{width: 35rem;}
  .sub3-pg2 .cont2 .pdt-list .box-img .img{width: 100%;height: 100%;object-fit: cover;object-position: center;}

  .sub3-pg2 .cont3 .top-fx{padding-bottom: 8rem;}
  .sub3-pg2 .cont3 .top-fx .icon{width: 12rem;}
  .sub3-pg2 .cont3 p{justify-content: flex-start;align-items: flex-start;}

}
@media all and (max-width:860px) {
  .sub3-pg2 .cont3 .contBx{right: var(--inner-pd)}
}
@media all and (max-width:768px) {
  .sub3-pg2 .cont3{padding: 12rem 0 65rem}
  .sub3-pg2 .cont3 .top-fx{flex-direction: column-reverse;align-items: flex-start;padding-bottom: 3rem;}
  .sub3-pg2 .cont3 .top-fx .icon{margin: 0;width: 5rem;}

  .active-wr .txt{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;text-align: center;font-size: 2.3rem;line-height:36px;}
  .active-wr .txt br.br_mo{display: inline-block;}
  .active-wr .img{margin: 0 .5rem}
  img.img.at-img1, img.img.at-img3{width: 10rem !important;height: 30px !important;object-position: center;object-fit: cover;}
  img.img.at-img2{width: 3rem !important;}
  img.img.at-img4{width: 4rem !important;}
  img.img.at-img5, img.img.at-img6{width: 4rem !important;}
  img.img.at-img7{width: 6.5rem !important;}

  .sub3-pg2 .cont2 .pdt-list{gap: 12rem}
  .sub3-pg2 .cont2 .pdt-list .box-img{width: 28rem}
  .sub3-pg2 .cont2 .pdt-list strong{font-size: 4rem;line-height: 54px;}

  .bg-activer-wr .c-txt{margin-top: 2rem}
  .bg-activer-wr .sub-tit-wr span{font-size: 1.4rem}



  /* ******************* */
  .sub3-pg2 { overflow: visible; }
  .sub3-pg2 .cont1{position: relative;height: auto;overflow: visible;}
  .sub3-pg2 .cont1 .ani-txtBx{
    position: relative;
    inset: auto;
    height: 100vh;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    z-index: 0;
  }
  .shape-stage,
  .ani-txtBx.ani-txtBx--white.ani-mask{display: none;}
  .sub3-pg2 .cont1 .white-window{
    position: relative;
    inset: auto;
    height: 100svh;
    display:flex; align-items:center; justify-content:center;
    z-index: 0;
    pointer-events: auto;
  }
  .sub3-pg2 .cont1 .white-window__inner{
    position: relative;
    width: 100%; height: 100%;
    opacity: 1;
    clip-path: none;
    -webkit-clip-path: none;
    border-radius: 0;
    box-shadow: none;
    will-change: auto;
    overflow: hidden;
  }
  .sub3-pg2 .cont1 .active-wr{opacity: 0;box-shadow: none;border-radius: 0;}
  .active-wr .txtBx{padding: 0;}
  .sub3-pg2 .cont1.is-active .active-wr,
  .sub3-pg2 .cont1.is-active .active-wr .img{opacity: inherit;width: auto;}
  .sub3-pg2 .cont1 .o-wrap .heart-svg{transform: none !important;}

}
@media all and (max-width:640px) {
  .sub3-pg1 .cont2{padding: 6rem 0 12rem}
  .sub3-pg1 .cont2 .bg-wr{display: none;}
  .sub3-pg1 .cont2 .top-fx{gap: 3rem;margin-top: 3rem;}
  .sub3-pg1 .cont2 .top-fx p{font-size: 2.2rem;line-height: 34px;}
  .sub3-pg1 .cont2 .line-list{margin-top: 0;grid-gap: 4rem 1rem;}
  .sub3-pg1 .cont2 .line-list .icon{width: 8rem;}
  .sub3-pg1 .cont2 .line-list p.txt{margin-top: 2rem;min-height: 72px;}
  .sub3-pg1 .cont2 .line-list p.txt br.br_pc{display: none;}

  .sub3-pg1 .sec-menu{display: none;}

  :root {
    --gutter-x3: calc(var(--gutter-base) * 1.5);
  }

  .bg-activer-wr{padding: 6rem 0}
  .bg-activer-wr .c-txt{line-height: 26px;}
  .img-gridBx{grid-gap: 1rem}
  .sub3-pg1 .cont6{padding: 6rem 0}
  .sub3-pg1 .cont6 .img-fx .img{width: 16rem;}
  .sub3-pg1 .cont6 p{font-size: 13rem;line-height: 152px;}
  .sub3-pg1 .cont6 .img-fx{gap: 32rem}

  .sub3-pg2 .cont2 .pdt-list strong{font-size: 3rem;line-height: 36px;margin-left: -2rem;}

  .sub3-pg2 .cont3{padding: 6rem 0 36rem}
  .sub3-pg2 .cont3 svg{width: 18rem;height: 20rem;}
  .sub3-pg2 .cont3 .btm-bx{margin-left: -15rem;padding-top: 1.5rem;}
  .sub3-pg2 .cont3 .btm-bx img{width: 6rem;}
  .sub3-pg2 .cont3 p{line-height: 28px}

  .sub3-pg2 .cont1{padding: 0 var(--inner-pd)}
  .active-wr .txt{font-size: 2rem;}
  img.img.at-img1, img.img.at-img3{width: 7rem !important;height: 28px !important;}
  img.img.at-img2{width: 2rem !important;}
  img.img.at-img4{width: 3rem !important;}
  img.img.at-img5, img.img.at-img6{width: 3rem !important;}
  img.img.at-img7{width: 4.5rem !important;}

  .sub3-pg2 .cont1 .ani-txtBx p{font-size: 3.6rem;}

}
@media all and (max-width:360px) {
 .sub3-pg2 .cont1 .ani-txtBx p{font-size: 3.4rem;}
}



@media (max-width: 768px) {

}