.about-page { background: #fff; color: #1a1a1a; overflow: clip; font-family: "SUIT Variable", sans-serif; }
.about-page .about-main { width: 1920px; height: 4116.607px; position: relative; }
.about-page .about-main h1,
.about-page .about-main h2,
.about-page .about-main h3,
.about-page .about-main p { margin: 0; }

/* 88:2525–88:2524, 1920px Figma frame */
.about-hero { position: relative; width: 1920px; height: 1519.797px; overflow: hidden; }
.about-hero-copy { position: absolute; z-index: 1; left: 79px; top: 172.5px; width: 1762px; display: grid; grid-template-columns: 878px 884px; }
.about-hero-copy h1 { font-size: 60px; line-height: 66px; font-weight: 700; letter-spacing: -2px; }
.about-hero-copy > div { padding-left: 6px; }
.about-hero-copy h2 { font-size: 40px; line-height: 52px; font-weight: 700; letter-spacing: -2px; }
.about-hero-copy p { margin-top: 22px !important; font-size: 20px; line-height: 32px; font-weight: 500; letter-spacing: -.5px; }
.about-hero-copy u { color: #2f4882; text-underline-offset: 2px; }
.about-hero-photo { position: absolute; left: 0; top: 442.415px; width: 1920px; height: 1077.383px; max-width: none; object-fit: fill; }
.about-hero-fade { position: absolute; left: 0; top: 442.415px; width: 1920px; height: 803.278px; background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0)); pointer-events: none; }

/* 88:1716–88:1769 */
.about-content { position: relative; width: 1920px; height: 2596.81px; }
/* OUR VISION에 업종 확장 문단을 더해 카드 높이를 229px에서 320px로 늘리고 내용을 세로 중앙에 맞춘다. */
.about-company { position: absolute; z-index: 3; left: 0; top: 866.607px; width: 1920px; height: 320px; }
.about-company-cards { position: absolute; left: 55px; top: 0; width: 1810px; height: 320px; display: flex; align-items: stretch; }
.about-card { position: relative; height: 320px; border-radius: 10px; flex: none; }
.about-card-company { width: 674.75px; background: #2f4882; color: #fff; }
.about-card-vision { width: 674.75px; margin-left: 5px; background: #1a1a1a; color: #fff; }
.about-card-location { width: 443.5px; margin-left: 12px; background: #e9e9e9; color: #1a1a1a; }
.about-card h3 { position: absolute; left: 40px; top: 146.8px; height: 26.4px; color: #e9e9e9; font-size: 22px; line-height: 26.4px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; }
.about-card-location h3 { color: #2f4882; }
.about-card-copy { position: absolute; left: 201px; top: 83px; width: 434px; font-size: 16px; line-height: 22px; letter-spacing: -.5px; }
.about-card-vision .about-card-copy { left: 217px; top: 31px; }
.about-card-location .about-card-copy { left: 180.98px; top: 109.5px; width: 222.52px; }
.about-card-copy strong { display: block; font-size: 18px; line-height: 27px; font-weight: 700; white-space: nowrap; }
.about-card-copy p { font-size: 16px; line-height: 22px; font-weight: 400; white-space: nowrap; }
.about-card-copy strong + p { margin-top: 17px !important; }
.about-card-copy p + p { margin-top: 22px !important; }
.about-card-copy b { font-weight: 700; }
.about-card-location .about-card-copy strong + p { margin-top: 20px !important; }
.about-card-location .about-card-copy p { font-size: 18px; line-height: 27px; font-weight: 700; }

/* 88:1878–88:1987 */
.about-office { position: absolute; left: 0; top: 0; width: 1920px; height: 830.58px; }
.about-office-heading { position: absolute; left: 55px; top: 84px; width: 1810px; }
.about-office-heading > p { color: #2f4882; font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -.5px; }
.about-office-heading h2 { margin-top: 20px !important; font-size: 48px; line-height: 67.2px; font-weight: 700; letter-spacing: -2px; }
.about-map-space { position: absolute; left: 55px; top: 314px; width: 1810px; height: 260px; }
.about-office-bottom { position: absolute; left: 55px; top: 627.58px; width: 1810px; height: 119px; }
.about-office-visit { position: absolute; left: 13px; top: 30px; width: 867px; display: flex; flex-direction: column; gap: 15px; font-size: 16px; line-height: 23px; letter-spacing: -.5px; }
.about-office-visit p { display: flex; white-space: nowrap; }
.about-office-visit b { display: block; width: 156px; flex: none; font-weight: 700; }
.about-office-visit span { font-weight: 500; }
.about-office-visit .about-office-inquiry { display: inline-flex; align-items: center; gap: 8px; width: max-content; border-bottom: 1px solid currentColor; color: #2f4882; font-weight: 500; }
.about-office-email { position: absolute; left: 918px; top: 30px; display: flex; gap: 11px; font-size: 16px; line-height: 23px; letter-spacing: -.5px; white-space: nowrap; }
.about-office-email b { font-weight: 700; }
.about-office-email a { font-weight: 700; color: #2f4882; }
.about-office-cta { position: absolute; right: .5px; top: 0; width: 446px; height: 119px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-radius: 15px; background: #2f4882; color: #fff; }
.about-office-cta span { font-size: 30px; line-height: 20px; font-weight: 600; letter-spacing: -.5px; white-space: nowrap; }
.about-office-cta img { max-width: none; flex: none; }

/* 88:2545 and 95:621 */
.about-capability-heading { position: absolute; left: 101px; top: 956.013px; width: 1718px; text-align: center; }
.about-capability-heading p { color: #2f4882; font-size: 18px; line-height: 22px; font-weight: 700; letter-spacing: -.5px; }
.about-capability-heading h2 { margin-top: 36.01px !important; font-size: 48px; line-height: 67.2px; font-weight: 700; letter-spacing: -2px; }
.about-capability-visual { position: absolute; left: 0; top: 1260.405px; width: 1920px; height: 1336px; overflow: hidden; }
.about-capability-landscape { position: absolute; left: -40.128px; top: 0; width: 2004.096px; height: 1336px; max-width: none; }
.about-capability-fade { position: absolute; left: 3px; top: 0; width: 1913.333px; height: 660px; background: linear-gradient(to bottom, #fff, rgb(255 255 255 / 0)); }
.about-capability-wordmark { position: absolute; left: 157.81px; top: 56px; width: 1604px; color: #2f4882; font-size: 200px; line-height: 208px; font-weight: 700; letter-spacing: -11px; text-align: center; white-space: nowrap; }
.about-capability-light { position: absolute; left: 628px; top: 121.195px; width: 663.612px; height: 663.612px; max-width: none; mix-blend-mode: plus-lighter; }

/* 유리 푸터가 마지막 사진(사막) 위로 푸터 높이만큼 올라온다(--footer-h는 js/footer.js). */
.about-page .site-footer { position: relative; z-index: 1; margin-top: calc(-1 * var(--footer-h, 55px)); padding-top: 0; background: transparent; }

@media (prefers-reduced-motion: no-preference) {
  .about-hero-copy h1, .about-hero-copy h2, .about-hero-copy p { animation: about-enter .8s cubic-bezier(.22,1,.36,1) both; }
  .about-hero-copy h2 { animation-delay: .12s; }
  .about-hero-copy p { animation-delay: .24s; }
  .about-motion-ready .about-company-cards .about-card { opacity: 0; transform: translateY(80px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
  .about-motion-ready .about-company-cards.is-visible .about-card { opacity: 1; transform: translateY(0); }
  .about-motion-ready .about-company-cards .about-card:nth-child(2) { transition-delay: .18s; }
  .about-motion-ready .about-company-cards .about-card:nth-child(3) { transition-delay: .36s; }
  .about-motion-ready :is(.about-office-heading, .about-office-bottom, .about-capability-heading, .about-capability-visual) { opacity: 0; transform: translateY(48px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
  .about-motion-ready :is(.about-office-heading, .about-office-bottom, .about-capability-heading, .about-capability-visual).is-visible { opacity: 1; transform: translateY(0); }
}
@keyframes about-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 900px) {
  .about-page .about-main, .about-hero, .about-content { width: 100%; height: auto; }
  .about-page .about-main { overflow: hidden; }
  .about-hero { min-height: 1320px; padding: 110px 24px 0; }
  .about-hero-copy { position: relative; left: auto; top: auto; width: auto; display: block; z-index: 2; }
  .about-hero-copy h1 { font-size: 44px; line-height: 1.1; }
  .about-hero-copy > div { padding: 28px 0 0; }
  .about-hero-copy h2 { font-size: 30px; line-height: 1.3; }
  .about-hero-copy p { font-size: 17px; line-height: 1.6; word-break: keep-all; }
  .about-hero-copy p br { display: none; }
  .about-hero-photo { left: 0; top: 330px; width: 100%; height: 990px; object-fit: cover; }
  .about-hero-fade { left: 0; top: 330px; width: 100%; height: 320px; }
  .about-content { display: flex; flex-direction: column; }
  .about-office, .about-capability-heading, .about-capability-visual { position: relative; left: auto; top: auto; width: 100%; height: auto; }
  .about-company { position: absolute; left: 0; top: 530px; width: 100%; height: auto; padding: 0 24px; }
  .about-company-cards { position: relative; left: auto; top: auto; width: 100%; height: auto; display: grid; gap: 12px; }
  .about-card, .about-card-vision, .about-card-location { width: 100%; height: auto; min-height: 190px; margin: 0; padding: 28px; }
  .about-card h3, .about-card-copy, .about-card-vision .about-card-copy, .about-card-location .about-card-copy { position: static; width: auto; height: auto; }
  .about-card h3 { font-size: 18px; line-height: 1.3; }
  .about-card-copy { margin-top: 22px; }
  .about-card-copy strong, .about-card-copy p, .about-card-location .about-card-copy p { white-space: normal; font-size: 16px; line-height: 1.5; }
  .about-card-copy p br { display: none; }
  .about-office { padding: 30px 24px 90px; }
  .about-office-heading, .about-map-space, .about-office-bottom { position: relative; left: auto; top: auto; width: 100%; }
  .about-office-heading h2 { font-size: 30px; line-height: 1.35; }
  .about-office-heading h2 br { display: none; }
  .about-map-space { height: 140px; margin-top: 38px; }
  .about-office-bottom { height: auto; display: grid; gap: 24px; margin-top: 24px; }
  .about-office-visit, .about-office-email, .about-office-cta { position: static; width: 100%; }
  .about-office-visit { gap: 12px; font-size: 14px; }
  .about-office-visit p { display: block; white-space: normal; }
  .about-office-email { font-size: 15px; }
  .about-office-cta { height: 78px; padding: 0 22px; }
  .about-office-cta span { font-size: 21px; }
  .about-capability-heading { padding: 60px 24px 40px; }
  .about-capability-heading h2 { font-size: 30px; line-height: 1.35; }
  .about-capability-visual { height: 580px; overflow: hidden; }
  .about-capability-landscape { left: 50%; width: 870px; height: 580px; transform: translateX(-50%); }
  .about-capability-fade { left: 0; width: 100%; height: 260px; }
  .about-capability-wordmark { left: 0; top: 55px; width: 100%; font-size: clamp(38px, 10vw, 80px); line-height: .85; letter-spacing: -3px; }
  .about-capability-light { left: 50%; top: 85px; width: 300px; height: 300px; transform: translateX(-50%); }
  .about-page .site-footer { margin-top: calc(-1 * var(--footer-h, 32px)); }
}

/* Keep the 1920px art direction, then let the page flow at narrower widths. */
@media (min-width: 1920px) {
  .about-page .about-main { margin-inline: auto; }
}

@media (max-width: 1919px) {
  .about-page .about-main, .about-content { width: 100%; height: auto; }
  .about-hero { width: 100%; height: auto; min-height: 0; padding: clamp(88px, 9vw, 150px) clamp(24px, 4vw, 64px) 90px; }
  .about-hero-copy { position: relative; left: auto; top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .about-hero-copy > div { padding-left: 0; }
  .about-hero-copy h1 { font-size: clamp(44px, 3.3vw, 60px); }
  .about-hero-copy h2 { font-size: clamp(32px, 2.5vw, 40px); }
  .about-hero-copy p { font-size: clamp(17px, 1.2vw, 20px); word-break: keep-all; }
  .about-hero-photo { top: 300px; width: 100%; height: 750px; object-fit: cover; }
  .about-hero-fade { top: 300px; width: 100%; height: 520px; }
  .about-company { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 0; margin-top: clamp(420px, 36vw, 600px); }
  .about-company-cards { position: relative; left: auto; top: auto; width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .about-card, .about-card-company, .about-card-vision, .about-card-location { width: auto; height: auto; min-height: 220px; margin: 0; padding: 30px; }
  .about-card h3, .about-card-copy, .about-card-vision .about-card-copy, .about-card-location .about-card-copy { position: static; width: auto; height: auto; }
  .about-card h3 { font-size: 20px; }
  .about-card-copy, .about-card-location .about-card-copy { margin-top: 24px; }
  .about-card-copy strong, .about-card-copy p, .about-card-location .about-card-copy p { white-space: normal; word-break: keep-all; }
  .about-card-copy p br { display: none; }
  .about-card-location { grid-column: 1 / -1; min-height: 160px; }
  .about-office { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 80px clamp(24px, 4vw, 64px) 0; }
  .about-office-heading, .about-map-space, .about-office-bottom { position: relative; left: auto; top: auto; width: 100%; }
  .about-office-heading h2 { font-size: clamp(34px, 3.3vw, 48px); word-break: keep-all; }
  .about-map-space { height: clamp(180px, 16vw, 280px); margin-top: 54px; }
  .about-office-bottom { height: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); gap: 20px 28px; align-items: center; margin-top: 50px; }
  .about-office-visit, .about-office-email, .about-office-cta { position: static; width: auto; }
  .about-office-visit { min-width: 0; }
  .about-office-visit p { white-space: normal; gap: 12px; }
  .about-office-visit b { width: 140px; }
  .about-office-email { grid-column: 1; grid-row: 2; }
  .about-office-cta { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
  .about-office-cta span { font-size: clamp(21px, 2vw, 30px); }
  .about-capability { padding-top: clamp(120px, 11vw, 200px); }
  .about-capability-heading { position: relative; left: auto; top: auto; width: 100%; padding-inline: 24px; }
  .about-capability-heading h2 { font-size: clamp(34px, 3.3vw, 48px); }
  .about-capability-visual { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1920 / 1336; margin-top: 110px; }
  .about-capability-landscape { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .about-capability-fade { left: 0; top: 0; width: 100%; height: 50%; }
  .about-capability-wordmark { left: 0; top: 4%; width: 100%; font-size: clamp(100px, 10.42vw, 200px); line-height: .85; letter-spacing: -.045em; }
  .about-capability-light { left: 50%; top: 9%; width: 34.6%; height: auto; transform: translateX(-50%); }
}

@media (min-width: 1501px) and (max-width: 1919px) {
  .about-company-cards { grid-template-columns: 1.5fr 1.5fr 1fr; }
  .about-card-location { grid-column: auto; }
  .about-card { min-height: 250px; }
}

@media (max-width: 900px) {
  .about-hero { padding: 76px 24px 72px; }
  .about-hero-copy { display: block; }
  .about-hero-copy h1 { font-size: clamp(40px, 5vw, 48px); }
  .about-hero-copy > div { padding: 28px 0 0; }
  .about-hero-copy h2 { font-size: clamp(27px, 3.6vw, 34px); }
  .about-hero-copy p { font-size: 17px; }
  .about-hero-photo { top: 280px; height: 650px; }
  .about-hero-fade { top: 280px; height: 350px; }
  .about-company { margin-top: clamp(310px, 42vw, 390px); }
  .about-card, .about-card-company, .about-card-vision, .about-card-location { min-height: 0; padding: 28px; }
  .about-office { padding: 60px 24px 0; }
  .about-office-heading h2, .about-capability-heading h2 { font-size: clamp(28px, 3.5vw, 34px); }
  .about-map-space { height: 140px; margin-top: 38px; }
  .about-office-bottom { grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
  .about-office-email, .about-office-cta { grid-column: auto; grid-row: auto; }
  .about-office-cta { width: 100%; height: 78px; }
  .about-capability { padding-top: 125px; }
  .about-capability-heading { padding: 0 24px; }
  .about-capability-heading h2 { margin-top: 24px !important; }
  .about-capability-visual { height: 580px; aspect-ratio: auto; margin-top: 70px; }
  .about-capability-landscape { left: 50%; width: 870px; height: 580px; transform: translateX(-50%); }
  .about-capability-fade { height: 260px; }
  .about-capability-wordmark { top: 55px; font-size: clamp(38px, 10vw, 80px); }
  .about-capability-light { top: 85px; width: 300px; }
}

@media (max-width: 600px) {
  .about-hero { padding: 72px 20px 64px; }
  .about-hero-copy h1 { font-size: 40px; }
  .about-hero-copy h2 { font-size: 27px; }
  .about-hero-copy p { font-size: 16px; }
  .about-hero-photo { top: 330px; height: 600px; }
  .about-hero-fade { top: 330px; height: 310px; }
  .about-company { margin-top: 340px; }
  .about-company-cards { grid-template-columns: 1fr; }
  .about-card-location { grid-column: auto; }
  .about-card, .about-card-company, .about-card-vision, .about-card-location { padding: 26px 24px; }
  .about-office { padding: 58px 20px 0; }
  .about-office-heading > p, .about-capability-heading p { font-size: 16px; }
  .about-office-heading h2, .about-capability-heading h2 { font-size: 28px; }
  .about-map-space { height: 100px; }
  .about-office-visit p { display: block; }
  .about-office-visit b { margin-bottom: 4px; }
  .about-office-email { flex-wrap: wrap; font-size: 15px; }
  .about-capability { padding-top: 100px; }
  .about-capability-heading { padding-inline: 20px; }
  .about-capability-visual { height: 480px; margin-top: 56px; }
  .about-capability-landscape { width: 720px; height: 480px; }
  .about-capability-light { width: 245px; }
}