@charset "utf-8";
/* ==========================================================================
   HWASHIN PRECISION — main.css
   메인 페이지 전용 (HERO / COMPANY / R&D / PRODUCT / ESG)
   기준 : 디자인 캔버스 1920 · 콘텐츠 영역 1440 · 1rem = 10px
   ========================================================================== */

/* =============================================================== 1. HERO */
.hero{
  position:relative;
  height:80rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; overflow:hidden; background:#0b1116;
  pointer-events:none;                 /* 배경 레이어는 클릭을 가로채지 않음 */
}
.hero__bg img,
.hero__bg video{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:60% center;          /* 스핀들·가공물이 화면에 오도록 */
}
.hero__bg::after{ content:""; position:absolute; inset:0; background:var(--dim); }
/* 불꽃 위 흰 카피 가독성 보강 (좌측 스크림) */
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(0,0,0,.60) 0%, rgba(0,0,0,.38) 34%, rgba(0,0,0,.12) 62%, rgba(0,0,0,0) 80%);
}

.hero__inner{ position:relative; z-index:2; height:100%; }   /* 영상·딤·스크림보다 항상 위 */

.hero__title{
  position:absolute; left:-0.6rem; top:26.8rem;
  font-family:var(--f-en); font-weight:700;
  font-size:9.6rem; line-height:9.0667rem; letter-spacing:0;
  color:var(--c-white);
  text-shadow:0 2px 14px rgba(0,0,0,.45);   /* 영상 위 가독성 */
}
.hero__title-2{ font-size:9.0667rem; }
.hero__desc{
  position:absolute; left:0; top:46.8rem;
  font-size:2.1333rem; font-weight:600; line-height:3.4667rem;
  color:var(--c-white);
  text-shadow:0 2px 12px rgba(0,0,0,.45);   /* 영상 위 가독성 */
}

/* 화신그룹 바로가기 207 x 62 / r8 8 0 0 */
.hero__group{
  position:absolute; left:0; bottom:0;
  display:flex; align-items:center;
  width:20.7rem; height:6rem; padding:0 0 0 2.2rem;
  background:var(--c-blue); border-radius:.8rem .8rem 0 0;
  color:var(--c-white);
  transition:background .3s;
}
.hero__group:hover{ background:var(--c-navy); }
.hero__group-symbol{ width:3.8rem; height:auto; flex:0 0 auto; }
.hero__group-text{
  margin-left:.8rem; font-size:2.1333rem; font-weight:800;
  letter-spacing:-0.025em; line-height:1;
}
.hero__group-arrow{ width:1.5rem; height:auto; margin-left:2.7rem; transition:transform .3s; }
.hero__group:hover .hero__group-arrow{ transform:translate(.3rem,-.3rem); }

/* 슬라이드 인디케이터 82 x 6 */
.hero__nav{
  position:absolute; left:50%; bottom:3.1rem; transform:translateX(-50%);
  display:flex; gap:.6rem;
}
.hero__dot{
  width:8.2rem; height:.6rem; border-radius:.2rem;
  background:rgba(255,255,255,.20);
  transition:background .3s;
}
.hero__dot.is-active{ background:var(--c-white); }

/* ============================================================ 2. COMPANY */
.sec-company{ padding:14rem 0 19.2rem; }

.company__head{ display:flex; margin-top:2rem; }
.company__title{ flex:0 0 72rem; }
.company__desc{ flex:1 1 auto; min-width:0; }

.company__text{
  font-size:2.9333rem; font-weight:500; line-height:4rem;
  letter-spacing:-0.028em; color:var(--c-black);
}

/* 탭 버튼 186 x 62 / r30 */
.company__tabs{ display:flex; gap:1.1rem; margin-top:4.3rem; }
.tab-btn{
  display:flex; align-items:center; justify-content:center;
  min-width:18.6rem; height:6.2rem; padding:0 2rem;
  border:1px solid var(--c-line-2); border-radius:3.1rem;
  font-size:1.8667rem; font-weight:600; line-height:1; color:var(--c-black);
  transition:background .3s, border-color .3s, color .3s;
}
.tab-btn:hover{ border-color:var(--c-navy); color:var(--c-navy); }
.tab-btn.is-active{ background:var(--c-navy); border-color:var(--c-navy); color:var(--c-white); }

/* 비주얼 밴드 1440 x 306 / r13 */
.company__band{
  position:relative; overflow:hidden;
  height:30.6rem; margin-top:6.8rem;
  border-radius:1.3rem;
}
.company__band img{ width:100%; height:100%; object-fit:cover; display:block; }
.company__band::after{ content:""; position:absolute; inset:0; background:var(--dim); }
.company__band-txt{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-white);
}
.company__band-txt span{
  font-family:var(--f-en); font-weight:700; font-size:3.2rem; line-height:1;
  white-space:nowrap;
}
.company__band-line{
  width:45.2rem; height:1px; background:rgba(255,255,255,.9);
  margin:0 2.3rem 0 3.5rem;
}

/* ================================================================ 3. R&D */
.sec-rnd{ padding:0 0 19.7rem; }
.rnd__wrap{ display:flex; gap:11.8rem; align-items:flex-start; }

.rnd__visual{
  position:relative; overflow:hidden;
  flex:0 0 60.2rem; height:58.1rem; border-radius:1.2rem;
}
.rnd__visual img{ width:100%; height:100%; object-fit:cover; display:block; }
.rnd__visual::after{ content:""; position:absolute; inset:0; background:var(--dim); }

.rnd__body{ flex:1 1 auto; min-width:0; }
.rnd__body .sec-label{ display:block; margin-top:-.2rem; }
.rnd__title{ margin-top:2.3rem; }

/* 카드 228 x 264 / r13 / gap 19 */
.rnd__cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.9rem;
  margin-top:8.9rem;
}
.rnd-card{
  display:flex; flex-direction:column; align-items:center;
  height:26.4rem; padding:3.7rem 1rem 4.1rem;
  background:var(--c-bg-soft); border-radius:1.3rem;
  transition:background .3s, box-shadow .3s;
}
.rnd-card:hover{ box-shadow:0 1rem 2.4rem rgba(42,91,183,.12); }
.rnd-card:hover .circle-arrow{ background:var(--c-blue); border-color:var(--c-blue); }
.rnd-card:hover .circle-arrow .ico-blue{ display:none; }
.rnd-card:hover .circle-arrow .ico-white{ display:block; }
.rnd-card__icon{ height:6.7rem; display:flex; align-items:center; justify-content:center; }
.rnd-card__icon img{ width:auto; }
/* 아이콘 원본 비율 유지 (기술연구소 69x58 / 연구개발 66x67 / 연구성과 68x60) */
.rnd-card__icon .ico-lab{    height:5.8rem; }
.rnd-card__icon .ico-field{  height:6.7rem; }
.rnd-card__icon .ico-result{ height:6rem; }
.rnd-card__name{
  margin-top:2.1rem;
  font-size:2.5333rem; font-weight:600; line-height:1; color:var(--c-black);
}
.rnd-card .circle-arrow{ margin-top:2.1rem; }

/* ============================================================ 4. PRODUCT */
.sec-product{
  position:relative; overflow:hidden;
  padding:10.6rem 0 11rem;
}
.sec-product__bg{ position:absolute; inset:0; }
.sec-product__bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.sec-product__bg::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.30); }
.sec-product .inner{ position:relative; z-index:2; }

.sec-product .sec-label{ color:var(--c-white); text-align:center; }
.sec-product .sec-title{ color:var(--c-white); text-align:center; margin-top:2.3rem; }

/* 카드 467 x 429 / r13 / gap 20 */
.product__cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  margin-top:4.5rem;
}
.product-card{
  display:flex; flex-direction:column;
  height:42.9rem; padding:2.6rem 2.6rem 2.5rem;
  background:var(--c-bg-soft); border-radius:1.3rem;
  transition:background .35s;
}
.product-card__thumb{
  position:relative; overflow:hidden;
  height:28.6rem; border-radius:.6rem; background:var(--c-white);
}
.product-card__thumb img{
  position:absolute; display:block;
}
.product-card__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex:1 1 auto;
}
.product-card__info{ display:block; margin-bottom:1rem; }
  .product-card__name{
  display:block;
  font-family:var(--f-en); font-weight:700; font-size:3.7333rem; line-height:1;
  color:var(--c-navy); transition:color .35s;
}
.product-card__desc{
  display:block; margin-top:.8rem;
  font-size:1.6rem; font-weight:400; line-height:1; color:var(--c-black);
  letter-spacing:-0.01em; transition:color .35s;
}
.product-card .circle-arrow{ flex:0 0 auto; }

/* 활성 / 호버 상태 : 카드 블루 + 원형 버튼 반전 */
.product-card.is-active,
.product-card:hover{ background:var(--c-blue); }
.product-card.is-active .product-card__name,
.product-card:hover .product-card__name,
.product-card.is-active .product-card__desc,
.product-card:hover .product-card__desc{ color:var(--c-white); }
.product-card.is-active .circle-arrow,
.product-card:hover .circle-arrow{ background:var(--c-white); border-color:var(--c-white); }
.product-card.is-active .circle-arrow .ico-white,
.product-card:hover .circle-arrow .ico-white{ display:none; }
.product-card.is-active .circle-arrow .ico-blue,
.product-card:hover .circle-arrow .ico-blue{ display:block; }

/* 카드별 제품 이미지 위치 (원본 시안 배치 기준) */
.product-card__thumb--chassis img{ left:2.2rem; top:.8rem; width:36rem;   height:27.9rem; }
.product-card__thumb--body    img{ left:.2rem;  top:.5rem; width:40.5rem; height:26.6rem; }
.product-card__thumb--eco     img{ left:2.5rem; top:.6rem; width:37rem;   height:26.9rem; }

/* ================================================================ 5. ESG */
.sec-esg{ padding:17.8rem 0 14.8rem; }

.esg__band{
  position:relative; overflow:hidden;
  height:38.4rem; border-radius:1.3rem;
}
.esg__band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.esg__band::after{ content:""; position:absolute; inset:0; background:var(--dim); }

.esg__list{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr);
  height:100%; align-content:start;
  padding-top:10.4rem;
}
.esg__item{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; color:var(--c-white);
}
.esg__item + .esg__item::before{
  content:""; position:absolute; left:0; top:-2.3rem;
  width:1px; height:22.3rem; background:rgba(255,255,255,.30);
}
.esg__icon{ height:5.1rem; display:flex; align-items:center; justify-content:center; }
.esg__icon img{ width:auto; }
/* 아이콘 원본 비율 유지 (환경 51x51 / 사회 51x50 / 지배구조 50x46) */
.esg__icon .ico-env{ height:5.1rem; }
.esg__icon .ico-social{        height:5rem; }
.esg__icon .ico-gov{    height:4.6rem; }
.esg__name{
  margin-top:1.7rem;
  font-family:var(--f-en); font-weight:700; font-size:3.2rem; line-height:1;
}
.esg__text{
  margin-top:1.8rem;
  font-size:1.6rem; font-weight:400; line-height:2.1333rem;
}

/* view more 186 x 62 / r30 */
.esg__more{
  display:flex; align-items:center; justify-content:center;
  width:18.6rem; height:6.2rem; margin:8.3rem auto 0; padding:0 0 0 .9rem;
  justify-content:flex-start;
  border:1px solid var(--c-line); border-radius:3.1rem;
  background:var(--c-white);
  transition:border-color .3s, box-shadow .3s;
}
.esg__more:hover{ border-color:var(--c-blue); box-shadow:0 .6rem 1.8rem rgba(14,125,255,.16); }
.esg__more-ico{
  display:flex; align-items:center; justify-content:center;
  width:4.3rem; height:4.3rem; border-radius:50%;
  background:var(--c-blue); flex:0 0 auto;
}
.esg__more-ico img{ width:1.4rem; height:auto; transition:transform .3s; }
.esg__more:hover .esg__more-ico img{ transform:translateX(.3rem); }
.esg__more-text{
  margin-left:1.6rem;
  font-family:var(--f-en); font-weight:600; font-size:1.8667rem; line-height:1;
  color:var(--c-black);
}