@charset "utf-8";
/* ============================================================================
   HWASHIN GROUP — technology.css
   기술혁신 > 제품소개 · 기준 아트보드 1920 × 5031 · 콘텐츠 1440
   ========================================================================== */

.product-page{background:#fff;}
.product-overview{background:#fff;}

/* ------------------------------------------------------------ PAGE HEADING */
.product-overview__head{
  padding-top:128px;
  text-align:center;
}
.product-kicker{
  margin:0;
  color:var(--blue);
  font-family:'Poppins',sans-serif;
  font-size:21.333px;
  font-weight:700;
  line-height:1;
}
.product-overview__head h2{
  margin:34px 0 0;
  font-size:53.333px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.045em;
}

/* ------------------------------------------------------------------- TABS */
.product-tabs{
  width:742px;
  height:68px;
  margin:65px auto 0;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-radius:999px;
  background:#f3f7f9;
}
.product-tabs button{
  min-width:0;
  border-radius:999px;
  color:#444;
  font-family:'Poppins',sans-serif;
  font-size:18.667px;
  font-weight:700;
  line-height:1;
}
.product-tabs button.is-active,
.product-tabs button[aria-selected="true"]{
  background:var(--cyan);
  color:#fff;
}

/* -------------------------------------------------------------- HERO IMAGE */
.product-hero{
  position:relative;
  width:100%;
  height:320px;
  margin:71px 0 0;
  overflow:hidden;
  border-radius:8px;
  background:#0f2c3e;
}
.product-hero::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(0,0,0,.1);
}
.product-hero img{
  width:100%;height:100%;
  object-fit:cover;
}
.product-hero figcaption{
  position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:46.667px;
  font-weight:700;
  line-height:1;
  letter-spacing:.01em;
}

/* ---------------------------------------------------------- CHASSIS INTRO */
.chassis-intro{
  min-height:144px;
  margin-top:54px;
  display:grid;
  grid-template-columns:480px 706px;
  column-gap:241px;
  align-items:start;
}
.chassis-intro h3{
  margin:0;
  font-size:37.333px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.025em;
  word-break:keep-all;
}
.chassis-intro p{
  margin:0;
  color:#555;
  font-size:18.667px;
  font-weight:400;
  line-height:1.9;
  letter-spacing:-.025em;
  word-break:keep-all;
}

/* ------------------------------------------------------ FEATURED PRODUCT */
.product-feature{
  position:relative;
  width:100%;
  height:583px;
  margin-top:125px;
  border-radius:8px;
  background:#f3f7f9;
}
.product-feature__visual{
  position:absolute;
  left:64px;top:66px;
  width:600px;height:456px;
  background:#f3f7f9;
  isolation:isolate;
}
.product-feature__visual img{
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.product-feature__content{
  position:absolute;
  left:790px;top:70px;
  width:584px;
}
.product-feature__kicker{
  margin:0;
  color:var(--cyan);
  font-family:'Poppins',sans-serif;
  font-size:21.333px;
  font-weight:600;
  line-height:1;
}
.product-feature__content > h3{
  margin:11px 0 0;
  font-family:'Poppins',sans-serif;
  font-size:40px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.025em;
}
.product-spec{
  border-radius:8px;
  background:#fff;
}
.product-spec--description{
  height:218px;
  margin-top:20px;
  padding:25px 40px 20px;
}
.product-spec h4{
  margin:0;
  color:#444;
  font-size:18.667px;
  font-weight:700;
  line-height:1.5;
}
.product-spec ul{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  color:#7d7d7d;
  font-size:18.667px;
  font-weight:400;
  line-height:2.15;
  letter-spacing:-.02em;
}
.product-spec li::before{
  content:"·";
  display:inline-block;
  width:16px;
}
.product-spec--models{
  height:72px;
  margin:8px 0 0;
  padding:0 40px;
  display:flex;
  align-items:center;
  color:#7d7d7d;
  font-size:18.667px;
  line-height:1.4;
}
.product-spec--models dt{
  width:104px;
  flex:0 0 auto;
  color:#444;
  font-weight:700;
}
.product-spec--models dd{margin:0;font-weight:400;}

/* ------------------------------------------------------------- PRODUCTS */
.products{
  margin-top:124px;
  padding-bottom:153px;
}
.products > h3{
  margin:0;
  font-family:'Poppins',sans-serif;
  font-size:37.333px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
}
.products-grid{
  margin-top:38px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:22px;
  row-gap:60px;
}
.product-card{min-width:0;min-height:429px;}
.product-card__visual{
  position:relative;
  height:344px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:8px;
  background:#f3f7f9;
  isolation:isolate;
}
.product-card.is-active .product-card__visual{
  border-color:var(--cyan);
  background:#fff;
}
.product-card__visual img{
  max-width:96%;
  max-height:92%;
  width:auto;height:auto;
  object-fit:contain;
}
.product-card:not(.is-active) .product-card__visual img{
  mix-blend-mode:multiply;
}
.product-card.is-active .product-card__visual img{
  align-self:flex-start;
  max-height:80%;
  margin-top:19px;
}
.product-card h4{
  margin:22px 0 0;
  font-family:'Poppins',sans-serif;
  font-size:24px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.02em;
}
.product-card__more{
  position:absolute;
  left:50%;bottom:24px;
  width:63px;height:63px;
  padding:0;
  display:grid;place-items:center;
  transform:translateX(-50%);
  border-radius:50%;
  background:var(--cyan);
}
.product-card__more span,
.product-card__more span::after{
  display:block;
  width:18px;height:2px;
  background:#fff;
}
.product-card__more span{position:relative;}
.product-card__more span::after{
  content:"";
  position:absolute;left:0;top:0;
  transform:rotate(90deg);
}

/* ------------------------------------------------------ FLUID / TABLET */


@media (max-width:1519px){
  .chassis-intro{
    grid-template-columns:33.333% 49.028%;
    column-gap:17.639%;
  }
  .product-feature__visual{left:4.445%;width:41.667%;}
  .product-feature__content{left:54.862%;width:40.556%;}
}

@media (max-width:1280px){
  .product-overview__head h2{font-size:44px;}
  .chassis-intro h3{font-size:32px;letter-spacing:-.045em;}
  .chassis-intro p{font-size:16px;}
  .product-feature__content > h3{font-size:34px;}
  .product-spec ul,.product-spec--models{font-size:15px;}
  .product-card h4{font-size:18px;}
}

@media (max-width:1024px){
  .product-overview__head{padding-top:96px;}
  .product-tabs{width:min(742px,100%);}
  .product-hero{height:auto;aspect-ratio:4.5/1;margin-top:58px;}
  .chassis-intro{
    min-height:0;
    grid-template-columns:1fr;
    row-gap:32px;
  }
  .chassis-intro p br{display:none;}

  .product-feature{
    height:auto;
    padding:48px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(340px,1fr);
    gap:44px;
  }
  .product-feature__visual,
  .product-feature__content{
    position:relative;
    left:auto;top:auto;
    width:auto;
  }
  .product-feature__visual{height:auto;aspect-ratio:1.31/1;}
  .product-feature__content{align-self:center;}
  .product-spec--description{height:auto;min-height:190px;}
  .product-spec--models{height:auto;min-height:72px;}

  .products-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .product-card{min-height:390px;}
  .product-card__visual{height:auto;aspect-ratio:1/1;}
}

/* ---------------------------------------------------------------- MOBILE */
@media (max-width:768px){
  .sub-hero--technology .sub-hero__building{object-position:54% center;}

  .product-overview__head{padding-top:72px;}
  .product-kicker{font-size:14px;}
  .product-overview__head h2{
    margin-top:22px;
    font-size:32px;
    line-height:1.35;
    word-break:keep-all;
  }
  .product-tabs{
    height:54px;
    margin-top:42px;
    padding:6px;
  }
  .product-tabs button{font-size:12px;}

  .product-hero{
    aspect-ratio:16/6;
    margin-top:42px;
  }
  .product-hero figcaption{font-size:28px;}

  .chassis-intro{margin-top:42px;row-gap:24px;}
  .chassis-intro h3{font-size:27px;line-height:1.4;word-break:normal;}
  .chassis-intro p{font-size:15px;line-height:1.9;word-break:normal;}

  .product-feature{
    margin-top:72px;
    padding:26px 20px 24px;
    grid-template-columns:1fr;
    gap:30px;
  }
  .product-feature__visual{aspect-ratio:1.31/1;}
  .product-feature__kicker{font-size:15px;}
  .product-feature__content > h3{margin-top:10px;font-size:28px;}
  .product-spec--description{margin-top:20px;padding:22px 20px;}
  .product-spec h4{font-size:15px;}
  .product-spec ul{font-size:14px;line-height:1.8;}
  .product-spec--models{
    padding:16px 20px;
    align-items:flex-start;
    font-size:14px;
  }
  .product-spec--models dt{width:78px;}

  .products{margin-top:72px;padding-bottom:84px;}
  .products > h3{font-size:27px;font-weight:600;}
  .products-grid{
    margin-top:32px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:12px;
    row-gap:34px;
  }
  .product-card{min-height:0;}
  .product-card h4{margin-top:15px;font-size:13px;line-height:1.45;}
  .product-card__more{width:42px;height:42px;bottom:12px;}
  .product-card__more span,
  .product-card__more span::after{width:13px;height:1.5px;}
}

@media (max-width:420px){
  .product-overview__head h2{font-size:29px;}
  .product-tabs button{font-size:11px;}
  .chassis-intro h3{font-size:24px;}
  .product-card h4{font-size:11.5px;}
}

/* Shared product interaction. Dimensions follow the 1440px PSD content frame. */
.product-tabs a{display:grid;place-items:center;min-width:0;border-radius:999px;color:#444;font-family:'Poppins',sans-serif;font-size:18.667px;font-weight:700;line-height:1;text-decoration:none;}
.product-tabs a[aria-current="page"]{background:var(--cyan);color:#fff;}
.product-tabs a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.product-feature{height:auto;min-height:583px;padding:70px 4.5833% 70px 4.4444%;display:grid;grid-template-columns:minmax(0,600fr) minmax(0,584fr);gap:9.6183%;align-items:center;scroll-margin-top:120px;}
.product-feature__visual,.product-feature__content{position:static;left:auto;top:auto;width:100%;}
.product-feature__visual{width:min(580px,100%);height:auto;aspect-ratio:580/441;justify-self:center;}
.product-feature__visual img{object-fit:contain;}
.product-feature__content > h3{min-height:92px;white-space:pre-line;overflow-wrap:anywhere;}
.product-spec--description{height:auto;min-height:218px;}
.product-spec li{position:relative;padding-left:16px;white-space:pre-line;overflow-wrap:anywhere;}
.product-spec li::before{position:absolute;left:0;}
.product-spec--models{height:auto;min-height:72px;padding-top:16px;padding-bottom:16px;}
.product-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.product-card__visual img{mix-blend-mode:multiply;transition:transform .2s ease;}
.product-card__more{opacity:0;transition:opacity .2s ease;pointer-events:none;}
.product-card:hover .product-card__visual,.product-card:focus-within .product-card__visual{background:#fff;border-color:var(--cyan);}
.product-card:hover .product-card__more,.product-card:focus-within .product-card__more{opacity:1;pointer-events:auto;}
.product-card__more:focus-visible{outline:3px solid var(--blue);outline-offset:4px;}
.product-card__visual{transition:background-color .2s ease,border-color .2s ease;}
[data-product-category="body"] .product-hero img{position:absolute;left:-.625%;top:-2.1875%;width:101.4583%;height:132.1875%;max-width:none;object-fit:fill;}
[data-product-category="eco-car"] .product-hero img{position:absolute;left:-.625%;top:-52.1875%;width:101.8056%;height:305.3125%;max-width:none;object-fit:fill;}

@media(max-width:1280px){.product-feature__content > h3{min-height:78.2px;}}
@media(max-width:1024px){
 .product-feature{padding:48px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
 .product-feature__content > h3{font-size:28px;min-height:64.4px;}
 .product-spec--description,.product-spec--models{padding-left:20px;padding-right:20px;}
 .product-spec--models dt{width:78px;}
}
@media(max-width:768px){
 .product-tabs a{font-size:12px;}
 .product-feature{padding:26px 20px 24px;grid-template-columns:minmax(0,1fr);gap:30px;min-height:583px;}
 .product-feature__content > h3{min-height:64.4px;}
 .product-feature__visual{aspect-ratio:580/441;}
}
@media(hover:none),(pointer:coarse){.product-card__more{opacity:1;pointer-events:auto;}}
@media(max-width:420px){.product-tabs a{font-size:11px;}}
@media(prefers-reduced-motion:reduce){.product-card__visual,.product-card__visual img,.product-card__more{transition:none;}}

/* Per-product layer placement from the supplied PSD artboards. */
[data-product-category="body"] .product-card:nth-child(1){--px:1.46199%;--py:6.14035%;--pw:97.36842%;--ph:69.00585%;}
[data-product-category="body"] .product-card:nth-child(2){--px:2.92398%;--py:20.17544%;--pw:93.85965%;--ph:61.98830%;}
[data-product-category="body"] .product-card:nth-child(3){--px:0.00000%;--py:14.91228%;--pw:90.64327%;--ph:72.51462%;}
[data-product-category="body"] .product-card:nth-child(4){--px:0.29240%;--py:15.49708%;--pw:89.76608%;--ph:71.92982%;}
[data-product-category="body"] .product-card:nth-child(5){--px:1.75439%;--py:35.08772%;--pw:97.07602%;--ph:26.90058%;}
[data-product-category="body"] .product-card:nth-child(6){--px:2.92398%;--py:27.48538%;--pw:95.02924%;--ph:56.43275%;}
[data-product-category="body"] .product-card:nth-child(7){--px:2.92398%;--py:35.08772%;--pw:94.73684%;--ph:38.01170%;}
[data-product-category="body"] .product-card:nth-child(8){--px:2.33918%;--py:15.78947%;--pw:85.96491%;--ph:70.46784%;}
[data-product-category="eco-car"] .product-card:nth-child(1){--px:2.92398%;--py:6.72515%;--pw:95.90643%;--ph:68.42105%;}
[data-product-category="eco-car"] .product-card:nth-child(2){--px:3.21637%;--py:27.19298%;--pw:94.44444%;--ph:48.53801%;}
[data-product-category="eco-car"] .product-card:nth-child(3){--px:3.50877%;--py:24.26901%;--pw:93.85965%;--ph:54.38596%;}
[data-product-category="eco-car"] .product-card:nth-child(4){--px:2.33918%;--py:29.53216%;--pw:97.07602%;--ph:41.22807%;}
[data-product-category="eco-car"] .product-card:nth-child(5){--px:1.46199%;--py:13.45029%;--pw:96.49123%;--ph:68.71345%;}
[data-product-category="eco-car"] .product-card:nth-child(6){--px:7.01754%;--py:19.00585%;--pw:85.38012%;--ph:62.28070%;}
[data-product-category="eco-car"] .product-card:nth-child(7){--px:4.38596%;--py:20.46784%;--pw:87.42690%;--ph:61.40351%;}
[data-product-category="eco-car"] .product-card:nth-child(8){--px:5.84795%;--py:19.29825%;--pw:87.71930%;--ph:64.03509%;}
[data-product-category="eco-car"] .product-card:nth-child(9){--px:3.80117%;--py:16.37427%;--pw:92.10526%;--ph:66.95906%;}
[data-product-category="eco-car"] .product-card:nth-child(10){--px:0.29240%;--py:17.54386%;--pw:94.73684%;--ph:65.78947%;}
/* Square source canvases contain white top/bottom margins; retain product scale. */
.product-feature__visual{display:flex;align-items:center;overflow:hidden;}
.product-feature__visual img[src*="REINF-SIDE-OUTER"],.product-feature__visual img[src*="AL-FRONT-CROSS"]{height:auto;max-height:none;flex:0 0 100%;}
[data-product-category="body"] .product-hero::after,[data-product-category="eco-car"] .product-hero::after{background:rgba(0,0,0,.302);}

/* Native PSD hero window exported at 1440×320; cover preserves proportions. */
[data-product-category="body"] .product-hero img,[data-product-category="eco-car"] .product-hero img{position:static;width:100%;height:100%;object-fit:cover;object-position:center;}

/* Product List: native source ratio and normalized PSD placement at every width. */
@media(min-width:1281px){.chassis-intro h3{white-space:nowrap;}}
.product-card__visual{height:auto;aspect-ratio:1/1;}
.product-card__visual img{position:absolute;left:var(--list-x);top:var(--list-y);width:var(--list-w);height:auto;max-width:none;max-height:none;margin:0;object-fit:contain;mix-blend-mode:multiply;}
[data-product-category="chassis"] .product-card:nth-child(1){--list-x:2.61700000%;--list-y:7.69089694%;--list-w:94.76700000%;}
[data-product-category="chassis"] .product-card:nth-child(2){--list-x:3.48800000%;--list-y:25.05964390%;--list-w:93.31400000%;}
[data-product-category="chassis"] .product-card:nth-child(3){--list-x:2.61700000%;--list-y:23.05523923%;--list-w:94.76700000%;}
[data-product-category="chassis"] .product-card:nth-child(4){--list-x:1.45300000%;--list-y:30.65041489%;--list-w:97.09300000%;}
[data-product-category="chassis"] .product-card:nth-child(5){--list-x:8.64798016%;--list-y:11.62800000%;--list-w:77.47203968%;}
[data-product-category="chassis"] .product-card:nth-child(6){--list-x:-0.87200000%;--list-y:16.50531818%;--list-w:97.38400000%;}
[data-product-category="chassis"] .product-card:nth-child(7){--list-x:0.00000000%;--list-y:18.08314691%;--list-w:96.80200000%;}
[data-product-category="chassis"] .product-card:nth-child(8){--list-x:1.45300000%;--list-y:28.69244898%;--list-w:95.64000000%;}
[data-product-category="chassis"] .product-card:nth-child(9){--list-x:0.58100000%;--list-y:26.51331108%;--list-w:94.18600000%;}
[data-product-category="chassis"] .product-card:nth-child(10){--list-x:11.62800000%;--list-y:17.56672532%;--list-w:74.41900000%;}
[data-product-category="chassis"] .product-card:nth-child(11){--list-x:3.19800000%;--list-y:33.52458717%;--list-w:94.76700000%;}
[data-product-category="chassis"] .product-card:nth-child(12){--list-x:4.65100000%;--list-y:19.29682877%;--list-w:90.98800000%;}
[data-product-category="chassis"] .product-card:nth-child(13){--list-x:20.64000000%;--list-y:22.25229469%;--list-w:59.01200000%;}
[data-product-category="body"] .product-card:nth-child(1){--list-x:1.46198830%;--list-y:6.14035088%;--list-w:97.36842105%;}
[data-product-category="body"] .product-card:nth-child(2){--list-x:2.92397661%;--list-y:20.17543860%;--list-w:93.85964912%;}
[data-product-category="body"] .product-card:nth-child(3){--list-x:0.00000000%;--list-y:14.91228070%;--list-w:90.64327485%;}
[data-product-category="body"] .product-card:nth-child(4){--list-x:0.29239766%;--list-y:15.49707602%;--list-w:89.76608187%;}
[data-product-category="body"] .product-card:nth-child(5){--list-x:1.75438596%;--list-y:35.08771930%;--list-w:97.07602339%;}
[data-product-category="body"] .product-card:nth-child(6){--list-x:2.92397661%;--list-y:27.48538012%;--list-w:95.02923977%;}
[data-product-category="body"] .product-card:nth-child(7){--list-x:2.92397661%;--list-y:35.08771930%;--list-w:94.73684211%;}
[data-product-category="body"] .product-card:nth-child(8){--list-x:2.33918129%;--list-y:15.78947368%;--list-w:85.96491228%;}
[data-product-category="eco-car"] .product-card:nth-child(1){--list-x:2.92397661%;--list-y:6.72514620%;--list-w:95.90643275%;}
[data-product-category="eco-car"] .product-card:nth-child(2){--list-x:3.21637427%;--list-y:27.19298246%;--list-w:94.44444444%;}
[data-product-category="eco-car"] .product-card:nth-child(3){--list-x:3.50877193%;--list-y:24.26900585%;--list-w:93.85964912%;}
[data-product-category="eco-car"] .product-card:nth-child(4){--list-x:2.33918129%;--list-y:29.53216374%;--list-w:97.07602339%;}
[data-product-category="eco-car"] .product-card:nth-child(5){--list-x:1.46198830%;--list-y:13.45029240%;--list-w:96.49122807%;}
[data-product-category="eco-car"] .product-card:nth-child(6){--list-x:7.01754386%;--list-y:19.00584795%;--list-w:85.38011696%;}
[data-product-category="eco-car"] .product-card:nth-child(7){--list-x:4.38596491%;--list-y:20.46783626%;--list-w:87.42690058%;}
[data-product-category="eco-car"] .product-card:nth-child(8){--list-x:5.84795322%;--list-y:19.29824561%;--list-w:87.71929825%;}
[data-product-category="eco-car"] .product-card:nth-child(9){--list-x:3.80116959%;--list-y:16.37426901%;--list-w:92.10526316%;}
[data-product-category="eco-car"] .product-card:nth-child(10){--list-x:0.29239766%;--list-y:17.54385965%;--list-w:94.73684211%;}

/* Description groups retain their outer rhythm; wrapped lines stay together. */
.product-spec--description > ul{line-height:1.55;}
.product-spec--description > ul > li{white-space:normal;}
.product-spec--description > ul > li + li{margin-top:.6em;}
.product-spec__details{margin-top:.25em;padding-left:12px;font-size:.86em;line-height:1.5;}
.product-spec__details > span{display:block;}
.product-spec__details > span + span{margin-top:.18em;}
.product-card__visual img{transform:none;transition:none;}
@media(max-width:768px){
 .product-spec--description > ul{line-height:1.45;}
 .product-spec--description > ul > li + li{margin-top:.35em;}
 .product-spec__details{padding-left:8px;}
}

/* Every product starts centered and rises smoothly to reveal the detail button. */
.product-card__visual img{left:50%;top:50%;height:auto;max-height:none;transform:translate(-50%,-50%);transition:transform .28s cubic-bezier(.2,.7,.2,1);}
.product-card__more{opacity:0;pointer-events:none;transition:opacity .22s ease;}
.product-card:hover .product-card__visual img,
.product-card:focus-within .product-card__visual img,
.product-card.is-revealed .product-card__visual img{transform:translate(-50%,calc(-50% - var(--product-lift,20px)));}
.product-card:hover .product-card__more,.product-card:focus-within .product-card__more,.product-card.is-revealed .product-card__more{opacity:1;pointer-events:auto;}
.product-card.is-revealed .product-card__visual{background:#fff;border-color:var(--cyan);}
@media(prefers-reduced-motion:reduce){.product-card__visual img,.product-card__more{transition:none;}}