@charset "utf-8";
/* ============================================================================
   HWASHIN GROUP — global.css
   글로벌 네트워크 > 해외사업장 지도 · 기준 아트보드 1920 × 1913
   공통 히어로/브레드크럼/글래스 내비게이션은 sub-common.css를 그대로 사용
   ========================================================================== */

.global-page{background:#fff;}

/* ------------------------------------------------------------ SUB HERO */
.sub-hero--global .sub-hero__building{object-position:center center;}

/* --------------------------------------------------------- INTRO / TABS */
.global-intro{height:452px;background:#fff;}
.global-intro__inner{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.global-intro__head{padding-top:128px;}
.global-kicker{
  margin:0;
  color:var(--blue);
  font-family:'Poppins',sans-serif;
  font-size:21.333px;
  font-weight:700;
  line-height:1;
}
.global-intro__head h2{
  margin:34px 0 0;
  font-size:53.333px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.045em;
  word-break:keep-all;
}
.global-tabs{
  width:500px;
  height:68px;
  margin-top:65px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-radius:999px;
  background:#f3f7f9;
}
.global-tabs span,
.global-tabs a{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#555;
  font-size:18.667px;
  font-weight:700;
  line-height:1;
}
.global-tabs a.is-active,
.global-tabs a[aria-current="page"]{background:var(--cyan);color:#fff;}

/* --------------------------------------------------------------- MAP */
.network-map{min-height:901px;background:#f8f8f8;overflow:hidden;}
.network-map__inner{position:relative;height:901px;}
.network-map__scroller{
  width:100%;height:100%;
  overflow:visible;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,91,172,.35) transparent;
}
.network-map__scroller:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;}
.network-map__stage{position:relative;width:100%;height:100%;}
.network-map__image{
  position:absolute;
  left:0;top:11.875%;
  width:100%;height:auto;
  pointer-events:none;
  user-select:none;
}
.map-pin{
  position:absolute;z-index:2;
  width:36px;height:42px;
  padding:0;border:0;
  transform-origin:50% 100%;
  transition:transform .18s ease,filter .18s ease;
}
.map-pin img{width:100%;height:100%;}
.map-pin:hover,
.map-pin:focus-visible,
.map-pin.is-active{
  transform:translateY(-2px) scale(1.08);
  filter:drop-shadow(0 5px 7px rgba(0,91,172,.24));
}
.map-pin:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%;}

/* PSD 위치아이콘 레이어 좌표를 1440 × 901 지도영역 비율로 환산 */
.map-pin--india-chennai{left:22.917%;top:45.394%;}
.map-pin--india-pune{left:25.139%;top:48.835%;}
.map-pin--beijing{left:30.764%;top:50.055%;}
.map-pin--vietnam{left:32.708%;top:39.512%;}
.map-pin--alabama{left:76.319%;top:44.173%;}
.map-pin--georgia{left:78.750%;top:41.843%;}
.map-pin--brazil{left:89.028%;top:67.925%;}

/* --------------------------------------------------------- OFFICE CARD */
.office-card{
  position:absolute;z-index:3;
  left:47.639%;top:40.067%;
  width:383px;height:458px;
  overflow:hidden;
  border-radius:8px;
  background:#fff;
  box-shadow:0 12px 36px rgba(27,45,63,.06);
}
.office-card__photo{width:100%;height:194px;object-fit:cover;object-position:center;}
.office-card__body{position:relative;padding:20px 25px 19px;}
.office-card__category{
  margin:0;
  color:#111;
  font-size:24px;
  font-weight:700;
  line-height:1.1;
}
.office-card__name{
  margin:10px 0 0;
  color:var(--blue);
  font-size:18.667px;
  font-weight:700;
  line-height:1.2;
}
.office-card__address{
  min-height:50px;
  margin:7px 0 0;
  color:#8a8a8a;
  font-family:'Poppins','Noto Sans KR',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.35;
  letter-spacing:-.02em;
  word-break:normal;
}
.office-card__facts{
  margin:14px 0 0;
  color:#858585;
  font-size:16px;
  font-weight:400;
  line-height:1.55;
}
.office-card__facts > div{display:flex;align-items:flex-start;}
.office-card__facts dt{width:54px;flex:0 0 auto;color:#555;font-weight:700;}
.office-card__facts dd{
  min-width:0;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.office-card__link{
  position:absolute;
  right:25px;top:13px;
  width:43px;height:43px;
  padding:0;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--blue);
  transition:background-color .2s ease,transform .2s ease;
}
.office-card__link:hover,
.office-card__link:focus-visible{background:var(--cyan);transform:translateY(-2px);}
.office-card__link:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.office-card__link img{width:11px;height:11px;}
.office-card__link[aria-disabled="true"]{opacity:.42;cursor:default;}
.office-card__link[aria-disabled="true"]:hover{background:var(--blue);transform:none;}

/* ------------------------------------------------------ FLUID / TABLET */
@media (max-width:1519px){
  .network-map__inner{height:min(62.569vw,901px);}
  .network-map{min-height:min(62.569vw,901px);}
  .office-card{width:26.597%;height:auto;aspect-ratio:383/458;}
  .office-card__photo{height:42.358%;}
  .office-card__body{padding:1.389vw 1.736vw 1.319vw;}
  .office-card__category{font-size:clamp(16px,1.579vw,24px);}
  .office-card__name{font-size:clamp(14px,1.228vw,18.667px);}
  .office-card__address,
  .office-card__facts{font-size:clamp(10px,1.053vw,16px);}
  .office-card__link{
    right:1.736vw;top:13px;
    width:clamp(34px,2.829vw,43px);height:clamp(34px,2.829vw,43px);
  }
  .map-pin{width:clamp(28px,2.368vw,36px);height:auto;aspect-ratio:36/42;}
}

@media (max-width:1280px){
  .global-intro__head h2{font-size:44px;}
}

@media (max-width:1100px){
  .global-tabs{width:min(500px,64vw);}
  .office-card__body{padding-top:14px;}
  .office-card__category{font-size:15px;}
  .office-card__name{margin-top:7px;font-size:13px;}
  .office-card__address{min-height:38px;margin-top:5px;}
  .office-card__facts{margin-top:8px;}
  .office-card__facts dt{width:42px;}
}

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

  .global-intro{height:auto;}
  .global-intro__inner{padding-bottom:72px;}
  .global-intro__head{padding-top:72px;}
  .global-kicker{font-size:14px;}
  .global-intro__head h2{margin-top:22px;font-size:32px;line-height:1.35;}
  .global-tabs{width:100%;height:54px;margin-top:42px;padding:6px;}
  .global-tabs span,
  .global-tabs a{font-size:14px;}

  .network-map{min-height:0;padding:46px 0 72px;}
  .network-map__inner{height:auto;}
  .network-map__scroller{
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .network-map__stage{width:760px;height:476px;}
  .map-pin{width:30px;height:35px;}

  .office-card{
    position:relative;
    left:auto;top:auto;
    width:100%;height:auto;
    aspect-ratio:auto;
    margin-top:28px;
    box-shadow:0 12px 32px rgba(27,45,63,.09);
  }
  .office-card__photo{height:auto;aspect-ratio:383/194;}
  .office-card__body{padding:22px 22px 24px;}
  .office-card__category{font-size:18px;}
  .office-card__name{margin-top:10px;font-size:16px;}
  .office-card__address{min-height:0;margin-top:8px;padding-right:46px;font-size:12px;line-height:1.45;}
  .office-card__facts{margin-top:18px;font-size:12px;line-height:1.7;}
  .office-card__facts dt{width:52px;}
  .office-card__link{right:22px;top:22px;bottom:auto;width:43px;height:43px;}
}

@media (max-width:420px){
  .global-intro__head h2{font-size:29px;}
  .global-tabs span,
  .global-tabs a{font-size:13px;}
}

/* Production interaction: card is revealed only by a pin; PSD pin assignments. */
.office-card[hidden]{display:none!important;}
.map-pin--india-pune{left:22.917%;top:45.394%;}
.map-pin--india-chennai{left:25.139%;top:48.835%;}
.map-pin--beijing{left:32.708%;top:39.512%;}
.map-pin--vietnam{left:30.764%;top:50.055%;}
.office-card{height:auto;min-height:458px;aspect-ratio:auto;overflow:hidden;}
.office-card__photo-frame{position:relative;width:100%;aspect-ratio:381/192;overflow:hidden;}
.office-card__photo-frame .office-card__photo{position:absolute;width:100%;height:100%;max-width:none;left:0;top:0;object-fit:fill;aspect-ratio:auto;}
.office-card__facts dd{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;}
.office-card__address{overflow-wrap:break-word;}
@media(min-width:769px){.office-card{width:clamp(290px,26.597%,383px);min-height:0;}.office-card__body{padding-bottom:26px;}}
@media(max-width:768px){.office-card{min-height:0;}.office-card__photo-frame{aspect-ratio:381/192;}}
@media(prefers-reduced-motion:reduce){.map-pin,.office-card__link{transition:none;}}