/* 이 파일의 규칙은 모두 #p-<화면이름> 안쪽에만 걸립니다.
   접두사를 떼면 특이도가 낮아져 base.css 의 반응형 규칙을 덮어쓰게 되므로 그대로 둡니다. */
#p-en-home h1, #p-en-home h2, #p-en-home h3, #p-en-home h4{margin:0;font-weight:700;line-height:.95;color:var(--ink)}
#p-en-home p{margin:0}
#p-en-home :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#p-en-home .display-xl{font-size:clamp(32px, 20.4px + 3.09vw, 56px);font-weight:700;line-height:1.2}
#p-en-home .display-lg{font-size:clamp(26px, 19.2px + 1.80vw, 40px);font-weight:700;line-height:1}
#p-en-home .display-md{font-size:clamp(22px, 17.2px + 1.29vw, 32px);font-weight:700;line-height:1}
#p-en-home .heading-lg{font-size:24px;font-weight:700;line-height:.95}
#p-en-home .subtitle{font-size:19.2px;font-weight:600;line-height:1.3}
#p-en-home .body-lg{font-size:18px;line-height:1.5}
#p-en-home .body-md{font-size:16px;line-height:1.4}
#p-en-home .body-sm{font-size:14px;line-height:1.57}
#p-en-home .caption{font-size:12px;line-height:1.4}
#p-en-home .overline{font-size:12px;font-weight:700;line-height:1.45;letter-spacing:0}
#p-en-home  
.band{padding:var(--s-section) 64px}
#p-en-home .band.light{background:var(--canvas)}
#p-en-home .band.soft{background:var(--surface-soft)}
#p-en-home .band.dark{background:var(--surface-dark);color:var(--on-dark)}
#p-en-home .band.dark h1, #p-en-home .band.dark h2, #p-en-home .band.dark h3{color:var(--on-dark)}
#p-en-home .inner{max-width:1152px;margin:0 auto}
@media(max-width:900px){#p-en-home .band{padding:96px 24px}}
#p-en-home .btn{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.144px;line-height:1;
  padding:14px 24px;border-radius:var(--r-xs);border:1px solid transparent;min-height:50px}
#p-en-home .btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#p-en-home .band.dark .btn-primary{background:var(--accent-on-dark);color:var(--ink);border-color:var(--accent-on-dark)}
#p-en-home .btn-outline-dark{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong);padding:13px 23px}
#p-en-home .btn-outline-light{background:var(--surface-dark);color:var(--on-dark);border-color:var(--on-dark);padding:13px 23px}
#p-en-home .btns{display:flex;flex-wrap:wrap;gap:var(--s-sm)}
#p-en-home .more{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
#p-en-home .band.dark .more{color:var(--on-dark);border-bottom-color:var(--on-dark)}
#p-en-home  
.hero{background:var(--surface-dark);color:var(--on-dark);padding:var(--s-section) 64px}
#p-en-home .hero .inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-xxxl)}
#p-en-home .hero .stack{display:flex;flex-direction:column;align-items:center;gap:var(--s-lg)}
#p-en-home .hero h1{color:var(--on-dark);max-width:18ch}
#p-en-home .hero .subtitle{color:var(--on-dark-mute);max-width:46ch}
@media(max-width:900px){#p-en-home .hero{padding:96px 24px}}
#p-en-home  
.filmband{background:var(--surface-dark);padding:0 64px var(--s-section)}
@media(max-width:900px){#p-en-home .filmband{padding:0 24px 96px}}
#p-en-home .film{max-width:1152px;margin:0 auto;height:542px;background:var(--surface-deep);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-lg)}
@media(max-width:900px){#p-en-home .film{height:340px}}
#p-en-home .film .lb{font-size:11px;color:rgba(255,255,255,.35)}
#p-en-home  
.logos{display:flex;flex-direction:column;align-items:center;gap:var(--s-xxl);text-align:center}
#p-en-home .logos .cap{font-size:15px;line-height:1.5;color:var(--mute);max-width:52ch}
#p-en-home .lrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s-xl) 64px;width:100%}
#p-en-home .lrow .c{font-size:26px;font-weight:700;line-height:1;color:var(--ash);letter-spacing:-.01em;
  transition:color .15s}
#p-en-home .lrow .c:hover{color:var(--charcoal)}
@media(max-width:900px){#p-en-home .lrow{gap:var(--s-lg) 40px}
#p-en-home .lrow .c{font-size:21px}}
@media(max-width:600px){#p-en-home .lrow{gap:var(--s-md) 28px}
#p-en-home .lrow .c{font-size:18px}
#p-en-home .logos{gap:var(--s-xl)}}
#p-en-home  
.frow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-xxxl)}
@media(max-width:900px){#p-en-home .frow{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-en-home .fcopy{display:flex;flex-direction:column;gap:var(--s-md)}
#p-en-home .fcopy .d{font-size:17px;line-height:1.6;color:var(--charcoal)}
#p-en-home .band.dark .fcopy .d{color:var(--on-dark-mute)}
#p-en-home .fcopy ul{list-style:none;margin:var(--s-xs) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-xs)}
#p-en-home .fcopy li{font-size:16px;font-weight:700;color:var(--ink);border-top:1px solid var(--hairline);padding-top:var(--s-xs)}
#p-en-home .band.dark .fcopy li{color:var(--on-dark);border-top-color:var(--divider-dark)}
#p-en-home .fimg{height:440px;background:var(--surface-soft);
  display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--s-md)}
#p-en-home .band.dark .fimg{background:var(--surface-deep)}
#p-en-home .fimg .lb{font-size:11px;color:var(--ash)}
#p-en-home .band.dark .fimg .lb{color:rgba(255,255,255,.35)}
@media(max-width:900px){#p-en-home .fimg{height:260px}
#p-en-home .frow.rev .fimg{order:-1}}
#p-en-home  
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xxxl);margin-top:var(--s-xxl)}
@media(max-width:767px){#p-en-home .nums{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-en-home .nums .n{border-top:1px solid var(--hairline-strong);padding-top:var(--s-md);display:flex;flex-direction:column;gap:var(--s-xs)}
#p-en-home .nums .v{font-size:40px;font-weight:700;line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums}
#p-en-home .nums .t{font-size:16px;font-weight:700;color:var(--ink);margin-top:4px}
#p-en-home .nums .d{font-size:14px;line-height:1.6;color:var(--mute)}
#p-en-home  
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-lg)}
#p-en-home .cta p{color:var(--on-dark-mute);max-width:50ch}
#p-en-home  
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-md);margin-top:var(--s-xxl)}
#p-en-home .gal a{display:flex;flex-direction:column;gap:var(--s-sm)}
#p-en-home .gal .ph{aspect-ratio:4/3;background:var(--surface-soft);display:flex;align-items:flex-end;
  padding:var(--s-sm);transition:background-color .15s}
#p-en-home .gal a:hover .ph{background:#ececec}
#p-en-home .gal .ph span{font-size:11px;color:var(--ash)}
#p-en-home .gal .t{font-size:19px;font-weight:700;line-height:1.1;color:var(--ink);
  display:inline-flex;align-items:center;gap:6px}
#p-en-home .gal a:hover .t{text-decoration:underline;text-underline-offset:4px}
#p-en-home .gal .d{font-size:14px;line-height:1.6;color:var(--mute)}
@media(max-width:1023px){#p-en-home .gal{grid-template-columns:repeat(2,1fr);gap:var(--s-xl) var(--s-md)}
#p-en-home .gal .t{font-size:22px}}
@media(max-width:600px){#p-en-home .gal{grid-template-columns:1fr}}
#p-en-home  
a{text-decoration:none;color:inherit}
#p-en-home .btn{transition:background-color .15s,color .15s,border-color .15s;cursor:pointer}
#p-en-home .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
#p-en-home .band.dark .btn-primary:hover{background:#e6e6e6;border-color:#e6e6e6}
#p-en-home .btn-outline-light:hover{background:var(--on-dark);color:var(--ink)}
#p-en-home .more{transition:opacity .15s}
#p-en-home .more:hover{opacity:.6}
#p-en-home  
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-md);margin-top:var(--s-xl);
  border-top:1px solid var(--hairline-strong);padding-top:var(--s-lg)}
@media(max-width:900px){#p-en-home .news{grid-template-columns:1fr;gap:0}}
#p-en-home .news a{display:flex;flex-direction:column;gap:var(--s-xs);padding-right:var(--s-lg)}
@media(max-width:900px){#p-en-home .news a{padding:var(--s-md) 0;border-bottom:1px solid var(--hairline)}}
#p-en-home .news .dt{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ash);font-variant-numeric:tabular-nums}
#p-en-home .news .h{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
#p-en-home .news a:hover .h{text-decoration:underline;text-underline-offset:4px}
#p-en-home .newshead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-lg);flex-wrap:wrap}
#p-en-home a{text-decoration:none;color:inherit}
/* 홈의 이익 세 칸 — 숫자 아래에 그 숫자가 뜻하는 바를 적고, 근거가 있는 화면으로 보냅니다.
   칸이 넷에서 셋으로 줄었으므로 넓은 화면에서 세 칸이 한 줄을 가득 채웁니다.
   좁아지면 두 칸으로 접지 않고 곧바로 한 칸으로 세웁니다. 세 칸을 둘로 접으면
   마지막 한 칸이 혼자 남아 줄이 비어 보이기 때문입니다. */
#p-en-home .nums{grid-template-columns:repeat(3,1fr);gap:var(--s-xxxl)}
@media(max-width:900px){#p-en-home .nums{grid-template-columns:1fr;gap:var(--s-xl)}}
#p-en-home .nums .d{margin-bottom:var(--s-md)}
#p-en-home .nums .lk{margin-top:auto;font-size:14px;font-weight:700;
  color:var(--ink);transition:opacity .15s}
#p-en-home .nums .lk:hover{opacity:.6}
/* 숫자와 단위를 따로 세웁니다. 숫자는 네 칸 모두 같은 서체로 서고,
   한글 단위만 국문 서체로 떨어져 한 줄의 결이 어긋나지 않습니다. */
#p-en-home .nums .v i{font-style:normal;font-weight:700}
#p-en-home .display-xl, #p-en-home .display-lg, #p-en-home .display-md{line-height:.95}
#p-en-home .hero{position:relative;overflow:hidden}
#p-en-home .hero .hbg{position:absolute;inset:0;z-index:0}
#p-en-home .hero .hbg::after{
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.6)}
#p-en-home .hero .inner{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#p-en-home .hero .hbg::after{background:rgba(0,0,0,.66)}}
/* 홈 갤러리 카드에 들어간 영상. 멈춰 있을 때는 사진 한 장처럼 보이고,
   손을 얹은 칸만 움직입니다. */
#p-en-home .gal .ph video{
  object-fit:cover!important;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){#p-en-home .gal a:hover .ph video{transform:scale(1.03)}}
/* 영문 홈의 고객사 줄. 회사 이름이 길어 한 줄에 넷이 들어가지 않는 폭에서
   3+1로 갈라졌습니다. 국문은 이름이 짧아 한 줄에 들어갑니다.
   한 줄이 안 되는 폭에서는 2+2로 가지런히 놓습니다. */
@media(max-width:1200px){#p-en-home .lrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;column-gap:48px;row-gap:var(--s-lg)}}
@media(max-width:600px){#p-en-home .lrow{grid-template-columns:1fr}}

/* ── 고객사 띠 ──────────────────────────────────────────────
   같은 벌을 두 번 이어 붙이고 왼쪽으로 절반만큼 밀면, 끝나는 순간
   처음 자리로 돌아와 끊김 없이 도는 것처럼 보입니다.
   밴드의 좌우 여백을 음수로 상쇄해 화면 끝까지 흐르게 합니다. */
/* 로고 띠는 밴드 하나를 다 쓰는 내용이 아니라 위아래 단락을 잇는 얇은
   띠입니다. 일반 밴드의 168px 여백을 그대로 쓰면 위 밴드의 아래 여백과
   더해져 280px 이 비어 버립니다. 절반으로 줄여 띠처럼 읽히게 합니다. */
#p-en-home #clients{padding-top:56px;padding-bottom:56px}
@media(max-width:900px){#p-en-home #clients{padding-top:40px;padding-bottom:40px}}
#p-en-home .marquee{position:relative;overflow:hidden;margin:0 -64px}
@media(max-width:900px){#p-en-home .marquee{margin:0 -24px}}
/* 양 끝은 바탕색으로 서서히 지워 띠가 잘린 느낌이 나지 않게 합니다. */
#p-en-home .marquee::before,#p-en-home .marquee::after{content:"";position:absolute;top:0;bottom:0;width:96px;z-index:1;
  pointer-events:none}
#p-en-home .marquee::before{left:0;background:linear-gradient(90deg,var(--canvas),transparent)}
#p-en-home .marquee::after{right:0;background:linear-gradient(270deg,var(--canvas),transparent)}
@media(max-width:600px){#p-en-home .marquee::before,#p-en-home .marquee::after{width:40px}}

#p-en-home .mtrack{display:flex;width:max-content;animation:liops-marquee 36s linear infinite}
/* 한 벌이 화면 폭보다 좁으면 절반을 밀었을 때 빈 구간이 보입니다.
   한 벌의 최소 폭을 화면 폭으로 두고 고르게 벌려 그 틈을 없앱니다. */
/* gap 은 한 벌 안에서만 걸리고 벌과 벌 사이에는 걸리지 않습니다.
   그대로 두면 이어 붙는 자리만 간격이 0 이 되어 두 로고가 붙어 보입니다.
   벌마다 뒤쪽에 같은 크기의 여백을 달아 두 벌의 폭을 똑같이 유지한 채
   이음매를 메웁니다. 폭이 같아야 절반을 밀었을 때 제자리로 돌아옵니다. */
#p-en-home .mset{--gap:64px;display:flex;align-items:center;justify-content:space-around;
  gap:var(--gap);padding-right:var(--gap);min-width:100vw}
@media(max-width:900px){#p-en-home .mset{--gap:44px}}
/* 로고마다 글자 크기와 여백이 달라 상자 높이를 그대로 맞추면 어떤 것은
   커 보이고 어떤 것은 작아 보입니다. 눈으로 보이는 크기가 비슷해지도록
   로고마다 높이를 따로 정하고, 좁은 화면에서는 그 비율을 그대로 줄입니다. */
#p-en-home .mset .c{--h:30px;height:var(--h);width:auto;max-width:none;flex:none;display:block;
  filter:grayscale(1);opacity:.62;transition:opacity .15s}
@media(max-width:900px){#p-en-home .mset .c{height:calc(var(--h) * .82)}}
@media(max-width:600px){#p-en-home .mset .c{height:calc(var(--h) * .72)}}
#p-en-home .mset .c-union{--h:28px}
#p-en-home .mset .c-geosoft{--h:28px}
#p-en-home .mset .c-daewon{--h:28px}
#p-en-home .mset .c-samsung-heavy{--h:28px}
#p-en-home .mset .c-hyundai-engineering{--h:26px}
#p-en-home .mset .c-jungsan{--h:34px}
#p-en-home .mset .c-fincantieri{--h:32px}
#p-en-home .mset .c-ffg-industries{--h:44px}
/* 러셀로보틱스 원본은 흰 잉크로 그려져 밝은 바탕에서는 보이지 않습니다.
   명암을 뒤집어 검은 잉크로 만든 뒤 같은 회색 톤에 맞춥니다. */
#p-en-home .mset .c-russell-robotics{--h:28px;filter:grayscale(1) invert(1)}
/* 손을 얹으면 멈춰서 읽을 수 있게 합니다. 손가락으로 쓰는 기기에는 걸지 않습니다. */
@media(hover:hover){
  #p-en-home .marquee:hover .mtrack{animation-play-state:paused}
  #p-en-home .mset .c:hover{opacity:1}
}
/* 움직임을 줄이도록 설정한 분에게는 돌지 않고 한 벌만 세워 둡니다. */
@media(prefers-reduced-motion:reduce){
  #p-en-home .mtrack{animation:none;width:auto;justify-content:center;flex-wrap:wrap}
  #p-en-home .mtrack .mset[aria-hidden]{display:none}
  #p-en-home .mset{flex-wrap:wrap;justify-content:center;row-gap:var(--s-lg);padding-right:0}
}
@keyframes liops-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}