@charset "utf-8";
/* ==========================================================================
   HWASHIN PRECISION — responsive.css
   ※ common.css / main.css 다음에 로드하세요.

   [ 대응 전략 ]
   1521px 이상  : 시안 1:1 (1rem = 10px, 콘텐츠 1440 고정 / 배경은 풀블리드)
   1520 ~ 1025  : 1rem = 100vw/152 → 시안 전체가 "비율 그대로" 축소 (레이아웃 변화 없음)
   1024 ~ 768   : 태블릿 — 1rem = 10px 로 복귀 후 레이아웃 재구성 (GNB → 전체메뉴)
   767 이하      : 모바일 — 1단 구성
   ========================================================================== */

/* =========================================================== 1520 ~ 1025 */
@media (max-width:1520px){
  html{ font-size:calc(100vw / 152); }   /* 1520px에서 10px, 그 이하는 비례 축소 */
}

/* ============================================================ ~ 1024 (태블릿) */
@media (max-width:1024px){
  html{ font-size:10px; }

  .inner,
  .footer__inner{ width:100%; padding:0 4rem; }

  /* ------------------------------------------------------------ HEADER */
  :root{ --header-h:8rem; }
  .header__inner{ padding:0 4rem; }
  .header__logo{ width:15rem; }
  .gnb{ display:none; }
  .header__util{ gap:0; }
  .langsel{ margin-left:1.6rem; }
  .hamburger{ margin-left:2rem; }

  .mobile-menu{ padding:3.2rem 4rem 8rem; }

  /* -------------------------------------------------------------- HERO */
  .hero{ height:60rem; }
  .hero__inner{
    display:flex; flex-direction:column; justify-content:center;
    padding-top:var(--header-h);
  }
  .hero__title{
    position:static; font-size:6.4rem; line-height:6.4rem;
  }
  .hero__title-2{ font-size:6.1rem; }
  .hero__desc{
    position:static; margin-top:2.4rem;
    font-size:1.8rem; line-height:2.9rem;
  }
  .hero__group{ left:4rem; width:19rem; height:5.6rem; }
  .hero__group-text{ font-size:1.9rem; }
  .hero__group-arrow{ margin-left:1.8rem; }
  .hero__nav{ bottom:2.4rem; }
  .hero__dot{ width:6rem; }

  /* ----------------------------------------------------------- COMPANY */
  .sec-company{ padding:9rem 0 10rem; }
  .company__head{ display:block; margin-top:1.6rem; }
  .company__title{ font-size:3.6rem; line-height:4.6rem; }
  .company__desc{ margin-top:3.2rem; }
  .company__text{ font-size:1.9rem; line-height:3rem; letter-spacing:-0.02em; }
  .company__text br{ display:none; }
  .company__tabs{ margin-top:3.2rem; }
  .tab-btn{ min-width:0; flex:1 1 0; height:5.4rem; font-size:1.6rem; }
  .company__band{ height:22rem; margin-top:4.8rem; }
  .company__band-txt span{ font-size:2.2rem; }
  .company__band-line{ width:12rem; margin:0 2rem; }

  /* --------------------------------------------------------------- R&D */
  .sec-rnd{ padding:0 0 10rem; }
  .rnd__wrap{ display:block; }
  .rnd__visual{ width:100%; height:34rem; }
  .rnd__body{ margin-top:4.8rem; }
  .rnd__body .sec-label{ margin-top:0; }
  .rnd__title{ margin-top:1.6rem; font-size:3.6rem; line-height:4.6rem; }
  .rnd__cards{ margin-top:4rem; gap:1.6rem; }
  .rnd-card{ height:22rem; padding:3rem 1rem 3.2rem; }
  .rnd-card__icon{ height:5.4rem; }
  .rnd-card__icon .ico-lab{    height:4.7rem; }
  .rnd-card__icon .ico-field{  height:5.4rem; }
  .rnd-card__icon .ico-result{ height:4.9rem; }
  .rnd-card__name{ margin-top:1.8rem; font-size:2rem; }
  .rnd-card .circle-arrow{ margin-top:1.8rem; width:4.4rem; height:4.4rem; }

  /* ----------------------------------------------------------- PRODUCT */
  .sec-product{ padding:8rem 0 8.4rem; }
  .sec-product .sec-title{ margin-top:1.6rem; font-size:3.4rem; line-height:4.4rem; }
  .product__cards{ margin-top:4rem; gap:1.6rem; }
  .product-card{ height:auto; padding:2rem 2rem 2rem; }
  .product-card__thumb{ height:0; padding-bottom:69%; }
  .product-card__thumb img{
    left:50%!important; top:50%!important; transform:translate(-50%,-50%);
    width:92%!important; height:auto!important;
  }
  .product-card__foot{ margin-top:2rem; }
  .product-card__info{ margin-bottom:0; }
  .product-card__name{ font-size:2.8rem; }
  .product-card__desc{ margin-top:1rem; font-size:1.4rem; line-height:2rem; }
  .product-card .circle-arrow{ width:4.4rem; height:4.4rem; }

  /* --------------------------------------------------------------- ESG */
  .sec-esg{ padding:10rem 0 9rem; }
  .esg__band{ height:auto; }
  .esg__list{ padding:5.4rem 0 5.6rem; }
  .esg__item + .esg__item::before{ top:0; height:100%; }
  .esg__item{ padding:0 1.6rem; }
  .esg__name{ font-size:2.4rem; }
  .esg__text{ font-size:1.4rem; line-height:2rem; }
  .esg__more{ margin-top:4.8rem; }

  /* ------------------------------------------------------------ FOOTER */
  .footer{ padding-top:8rem; }
  .footer__top{ width:8rem; height:8rem; top:-4rem; }
  .footer__row{ flex-wrap:wrap; row-gap:2.4rem; }
  .footer__logo{ width:15rem; }
  .fnb{ margin-left:3rem; }
  .fnb__list{ gap:3.2rem; }
  .fnb__link{ font-size:2rem; }
  .footer__addr{ margin-top:4.8rem; }
  .footer__contact{ margin-top:1.6rem; flex-wrap:wrap; row-gap:1.2rem; }
  .footer__contact > div:nth-child(1),
  .footer__contact > div:nth-child(2){ width:auto; margin-right:4rem; }
  .footer__contact dd{ margin-left:1.6rem; }
  .copyright{ margin-top:4.8rem; height:auto; padding:2.4rem 2.4rem; }
  .copyright__links{ gap:2.4rem; }
  .copyright__text,
  .copyright__links a{ font-size:1.4rem; }
}

/* ============================================================ ~ 767 (모바일) */
@media (max-width:767px){
  .inner,
  .footer__inner{ padding:0 2rem; }
  .header__inner{ padding:0 2rem; }
  .mobile-menu{ padding:2.4rem 2rem 6rem; }
  .mobile-menu__nav a{ font-size:2rem; padding:2rem 0; }

  /* 유틸 : KR/EN 은 전체메뉴 안으로 */
  .header__util > .lang{ display:none; }
  .langsel{ margin-left:0; }
  .langsel__btn{ width:auto; padding:0 1.2rem; }
  .langsel__text{ display:none; }
  .langsel__arrow{ margin-left:.8rem; }

  /* -------------------------------------------------------------- HERO
     가로 영상을 세로 화면에 cover 하면 좌우가 크게 잘리므로
     초점을 스핀들·가공물 쪽으로 옮기고 카피를 하단에 배치합니다. */
  .hero{ height:62rem; }
  .hero__inner{ justify-content:flex-end; padding-bottom:13rem; }
  .hero__bg img,
  .hero__bg video{ object-position:58% center; }
  .hero__bg::before{ display:none; }      /* 좌측 스크림 대신 아래 세로 그라데이션 사용 */
  .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.30) 0%, rgba(0,0,0,.16) 30%,
      rgba(0,0,0,.46) 66%, rgba(0,0,0,.62) 100%);
  }
  .hero__title{ font-size:3.8rem; line-height:4.4rem; }
  .hero__title-2{ font-size:3.6rem; }
  .hero__desc{ margin-top:1.8rem; font-size:1.5rem; line-height:2.4rem; }
  .hero__desc br{ display:none; }
  .hero__group{ left:2rem; width:16rem; height:5rem; padding-left:1.6rem; }
  .hero__group-symbol{ width:3rem; }
  .hero__group-text{ font-size:1.6rem; }
  .hero__group-arrow{ width:1.3rem; margin-left:1.2rem; }
  .hero__nav{ left:auto; right:2rem; transform:none; bottom:2.2rem; }
  .hero__dot{ width:4.4rem; height:.5rem; }

  /* ----------------------------------------------------------- COMPANY */
  .sec-company{ padding:6.4rem 0 7.2rem; }
  .sec-label{ font-size:1.8rem; }
  .company__title{ font-size:2.6rem; line-height:3.6rem; }
  .company__text{ font-size:1.6rem; line-height:2.6rem; }
  .company__tabs{ gap:.8rem; }
  .tab-btn{ height:4.8rem; font-size:1.4rem; padding:0 1rem; }
  .company__band{ height:16rem; margin-top:3.2rem; }
  .company__band-txt{ flex-direction:column; gap:1rem; }
  .company__band-txt span{ font-size:1.8rem; }
  .company__band-line{ width:6rem; margin:0; }

  /* --------------------------------------------------------------- R&D */
  .sec-rnd{ padding:0 0 7.2rem; }
  .rnd__visual{ height:24rem; }
  .rnd__body{ margin-top:3.2rem; }
  .rnd__title{ font-size:2.6rem; line-height:3.6rem; }
  .rnd__title br{ display:none; }

  /* 카드 : 1단 가로형으로 전환 */
  .rnd__cards{ grid-template-columns:1fr; gap:1rem; margin-top:3.2rem; }
  .rnd-card{
    flex-direction:row; align-items:center;
    height:8.4rem; padding:0 2rem;
  }
  .rnd-card__icon{ height:4rem; width:4.4rem; justify-content:flex-start; }
  .rnd-card__icon .ico-lab{    height:3.6rem; }
  .rnd-card__icon .ico-field{  height:4rem; }
  .rnd-card__icon .ico-result{ height:3.7rem; }
  .rnd-card__name{ margin:0 auto 0 1.6rem; font-size:1.8rem; }
  .rnd-card .circle-arrow{ margin:0; width:4rem; height:4rem; }

  /* ----------------------------------------------------------- PRODUCT */
  .sec-product{ padding:6.4rem 0 6.4rem; }
  .sec-product .sec-title{ font-size:2.4rem; line-height:3.4rem; }
  .product__cards{ grid-template-columns:1fr; gap:1.2rem; margin-top:3.2rem; }
  .product-card__thumb{ padding-bottom:58%; }
  .product-card__name{ font-size:2.6rem; }
  .product-card__desc{ font-size:1.3rem; }

  /* --------------------------------------------------------------- ESG */
  .sec-esg{ padding:7.2rem 0 6.4rem; }
  .esg__list{ grid-template-columns:1fr; padding:4rem 0; }
  .esg__item{ padding:3.2rem 0; }
  .esg__item + .esg__item::before{
    left:50%; top:0; transform:translateX(-50%);
    width:60%; height:1px;
  }
  .esg__icon{ height:4.4rem; }
  .esg__icon .ico-env{ height:4.4rem; }
  .esg__icon .ico-social{        height:4.3rem; }
  .esg__icon .ico-gov{    height:4rem; }
  .esg__name{ margin-top:1.4rem; font-size:2rem; }
  .esg__text{ margin-top:1.2rem; font-size:1.3rem; line-height:1.9rem; }
  .esg__more{ width:16rem; height:5.4rem; margin-top:3.2rem; }
  .esg__more-ico{ width:3.8rem; height:3.8rem; }
  .esg__more-text{ font-size:1.6rem; margin-left:1.2rem; }

  /* ------------------------------------------------------------ FOOTER */
  .footer{ padding-top:6.4rem; }
  .footer__top{ width:6.4rem; height:6.4rem; top:-3.2rem; }
  .footer__top img{ width:1.3rem; }
  .footer__row{ row-gap:2rem; }
  .fnb{ margin-left:0; width:100%; }
  .fnb__list{ gap:2.4rem; }
  .fnb__link{ font-size:1.7rem; }
  .family{ margin-left:0; width:100%; }
  .family__list{ bottom:auto; top:calc(100% + .8rem); }
  .footer__addr{ margin-top:3.2rem; line-height:1.6; }
  .footer__addr-name{ margin-left:.6rem; }
  .footer__contact{ flex-direction:column; align-items:flex-start; row-gap:.8rem; }
  .footer__contact > div:nth-child(1),
  .footer__contact > div:nth-child(2){ margin-right:0; }
  .footer__contact dt{ width:6rem; }
  .footer__contact dd{ margin-left:0; }
  .copyright{
    flex-direction:column; align-items:flex-start; gap:1.6rem;
    margin-top:3.2rem; padding:2rem; border-radius:1rem 1rem 0 0;
  }
  .copyright__links{ gap:1.6rem; flex-wrap:wrap; }
  .copyright__text,
  .copyright__links a{ font-size:1.3rem; }
}

/* ================================================ ~ 380 (소형 단말) */
@media (max-width:380px){
  .hero__title{ font-size:3.3rem; line-height:3.9rem; }
  .hero__title-2{ font-size:3.15rem; }
  .company__tabs{ gap:.6rem; }
  .tab-btn{ font-size:1.3rem; padding:0 .6rem; }
}

/* ------------------------------------------------- 서브페이지 (sub-sample) */
@media (max-width:1024px){
  .sub{ padding:14rem 0 10rem; }
  .sub__title{ font-size:3.2rem; line-height:4.2rem; }
}
@media (max-width:767px){
  .sub{ padding:12rem 0 8rem; }
  .sub__title{ font-size:2.4rem; line-height:3.4rem; }
  .sub__desc{ font-size:1.5rem; line-height:2.6rem; }
}