diff --git a/src/components/SubHero.jsx b/src/components/SubHero.jsx
new file mode 100644
index 0000000..14ab6a9
--- /dev/null
+++ b/src/components/SubHero.jsx
@@ -0,0 +1,72 @@
+import { Link, useLocation } from "react-router-dom";
+
+const menuMap = {
+ "/company": "Company",
+ "/uam": "UAM / UATM",
+ "/business": "Business",
+ "/solution": "Solution",
+ "/contact": "Contact Us",
+};
+
+function ChevronIcon() {
+ return (
+
+ );
+}
+
+export default function SubHero({ label, title, desc, navItems }) {
+ const { pathname } = useLocation();
+
+ // 현재 경로에서 상위 메뉴 추출 ("/company/about" → "/company")
+ const topPath = "/" + pathname.split("/")[1];
+ const topLabel = menuMap[topPath] || "";
+
+ // 현재 페이지 label
+ const currentLabel = navItems?.find((n) => n.to === pathname)?.label || label;
+
+ return (
+ <>
+
+
+ {/* Breadcrumb */}
+
+
+ {label &&
{label}}
+
{title}
+ {desc &&
{desc}
}
+
+
+
+ {/* Sub Nav */}
+ {navItems && navItems.length > 1 && (
+
+
+
+ )}
+ >
+ );
+}
diff --git a/src/css/common.css b/src/css/common.css
index b734f8d..ab82693 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -17,270 +17,124 @@ body{overflow-x:hidden;}
.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
-/*main visual*/
-.main-page{width:100%;overflow:hidden;}
-.main-section{position:relative;height:100vh;}
-.main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
-.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:750px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
-.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
-/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
-.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
-.hero-video{width:100%;height:100%;object-fit:cover;}
-.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
-
-.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
-.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
-
-.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
-.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
-.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
-
-.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
-.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
-.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
-
-.main-visible-haze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,78vw);height:min(460px,40vw);z-index:2;pointer-events:none;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 16%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 64%);filter:blur(28px);opacity:.56;animation:visibleHaze 4.8s ease-in-out infinite;}
-
-.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
-
-.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
-
-.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
-
-.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
-
-.text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
-
-.main-text .text-change{opacity:0;}
-
-.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
-
-.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
-
-.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}
-.main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 14px rgba(255,255,255,.28);}
-
-.main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
-.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
-.main-scroll-text{font-size:11px;line-height:1;letter-spacing:.28em;font-weight:600;color:rgba(255,255,255,.78);}
-
-@keyframes scrollLine{
-0%{transform:translateY(0);opacity:.35;}
-50%{transform:translateY(6px);opacity:1;}
-100%{transform:translateY(0);opacity:.35;}
-}
-
-@keyframes visibleAtmo1{
-0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
-50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
-100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
-}
-
-@keyframes visibleAtmo2{
-0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
-50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
-100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
-}
-
-@keyframes visibleBeam1{
-0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
-8%{opacity:.32;}
-36%{opacity:.95;}
-58%{opacity:.48;}
-100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
-}
-
-@keyframes visibleBeam2{
-0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
-10%{opacity:.22;}
-40%{opacity:.72;}
-62%{opacity:.34;}
-100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
-}
-
-@keyframes visibleHaze{
-0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
-50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
-100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
-}
-
-@keyframes gridShift{
-0%{transform:translate3d(0,0,0);}
-100%{transform:translate3d(0,18px,0);}
-}
+/*sub common*/
+.sub-hero{position:relative;background:#f5f6fa;border-bottom:1px solid rgba(58,64,129,.08);overflow:hidden;}
+.sub-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(58,64,129,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 60% at 10% 80%,rgba(58,64,129,.04) 0%,transparent 60%);pointer-events:none;}
+.sub-hero-inner{position:relative;max-width:1440px;margin:0 auto;padding:calc(var(--header-height) + 56px) 80px 56px;z-index:1;}
+.sub-breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:24px;}
+.sub-breadcrumb-item{font-size:13px;font-weight:500;color:rgba(17,17,17,.4);text-decoration:none;transition:color .2s ease;line-height:1;}
+.sub-breadcrumb-item:hover{color:var(--color-primary);}
+.sub-breadcrumb-item.is-current{color:var(--color-primary);font-weight:600;}
+.sub-breadcrumb-sep{display:flex;align-items:center;color:rgba(17,17,17,.25);font-size:12px;}
+.sub-hero-label{display:inline-block;margin-bottom:14px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);}
+.sub-hero-title{margin:0 0 12px;font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.04em;color:#0d1117;}
+.sub-hero-desc{margin:0;font-size:clamp(15px,1.4vw,17px);font-weight:400;line-height:1.7;color:rgba(17,17,17,.55);max-width:560px;word-break:keep-all;}
+.sub-nav-wrap{position:sticky;top:var(--header-height);z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(17,17,17,.07);}
+.sub-nav{display:flex;max-width:1440px;margin:0 auto;padding:0 80px;gap:0;}
+.sub-nav-item{position:relative;display:inline-flex;align-items:center;height:56px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(17,17,17,.45);text-decoration:none;transition:color .2s ease;letter-spacing:-.01em;}
+.sub-nav-item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-primary);border-radius:2px 2px 0 0;transform:scaleX(0);transition:transform .25s ease;}
+.sub-nav-item:hover{color:var(--color-primary);}
+.sub-nav-item.is-active{color:var(--color-primary);}
+.sub-nav-item.is-active::after{transform:scaleX(1);}
+.sub-content{max-width:1440px;margin:0 auto;padding:80px 80px 120px;}
+.sub-section{margin-bottom:100px;}
+.sub-section:last-child{margin-bottom:0;}
+.sub-section-eyebrow{display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);}
+.sub-section-title{margin:0 0 16px;font-size:clamp(24px,2.4vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.03em;color:#0d1117;}
+.sub-section-lead{margin:0;font-size:16px;line-height:1.75;color:rgba(17,17,17,.6);max-width:640px;word-break:keep-all;}
+.sub-fade-in{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease;}
+.sub-fade-in.is-visible{opacity:1;transform:translateY(0);}
+
+/*sub about*/
+.about-overview{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:80px;}
+.about-overview-text .sub-section-lead{max-width:100%;}
+.about-overview-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;border:1px solid rgba(17,17,17,.08);border-radius:20px;overflow:hidden;}
+.about-stat{padding:32px 28px;background:#fafafa;}
+.about-stat:nth-child(1){background:var(--color-primary);}
+.about-stat:nth-child(1) .about-stat-num,.about-stat:nth-child(1) .about-stat-unit,.about-stat:nth-child(1) .about-stat-label{color:#fff;}
+.about-stat:nth-child(1) .about-stat-label{color:rgba(255,255,255,.7);}
+.about-stat-num{font-size:40px;font-weight:800;letter-spacing:-.04em;color:#0d1117;line-height:1;}
+.about-stat-unit{font-size:20px;font-weight:700;color:#0d1117;margin-left:2px;}
+.about-stat-label{display:block;margin-top:8px;font-size:13px;font-weight:500;color:rgba(17,17,17,.45);letter-spacing:.01em;}
+.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;}
+.about-value-card{padding:36px 32px;background:#fff;border:1px solid rgba(17,17,17,.07);border-radius:20px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
+.about-value-card:hover{border-color:rgba(58,64,129,.2);transform:translateY(-4px);box-shadow:0 20px 40px rgba(58,64,129,.08);}
+.about-value-icon{width:48px;height:48px;margin-bottom:20px;border-radius:14px;background:rgba(58,64,129,.07);display:flex;align-items:center;justify-content:center;}
+.about-value-icon svg{width:24px;height:24px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
+.about-value-card h3{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.02em;color:#0d1117;}
+.about-value-card p{margin:0;font-size:14px;line-height:1.75;color:rgba(17,17,17,.55);word-break:keep-all;}
+.about-awards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px;}
+.about-award-item{display:flex;align-items:flex-start;gap:16px;padding:24px;background:#fff;border:1px solid rgba(17,17,17,.07);border-radius:16px;}
+.about-award-dot{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--color-primary);margin-top:6px;}
+.about-award-item h4{margin:0 0 4px;font-size:15px;font-weight:700;color:#0d1117;letter-spacing:-.01em;}
+.about-award-item p{margin:0;font-size:13px;color:rgba(17,17,17,.5);line-height:1.6;}
+
+/*sub history*/
+.history-timeline{position:relative;margin-top:56px;}
+.history-year-group{margin-bottom:64px;}
+.history-year-group:last-child{margin-bottom:0;}
+.history-year{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;margin-bottom:28px;background:var(--color-primary);border-radius:999px;font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em;}
+.history-items{display:grid;grid-template-columns:1fr;gap:0;border-left:2px solid rgba(58,64,129,.12);margin-left:12px;padding-left:32px;}
+.history-item{position:relative;padding:0 0 28px;}
+.history-item:last-child{padding-bottom:0;}
+.history-item::before{content:"";position:absolute;left:-38px;top:6px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--color-primary);}
+.history-item-month{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--color-primary);}
+.history-item-text{font-size:15px;font-weight:500;color:#0d1117;line-height:1.6;letter-spacing:-.01em;word-break:keep-all;}
+
+/*sub partners*/
+.partners-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;}
+.partner-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:120px;padding:24px;background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:16px;transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;}
+.partner-card:hover{border-color:rgba(58,64,129,.2);transform:translateY(-3px);box-shadow:0 16px 32px rgba(58,64,129,.07);}
+.partner-card-name{font-size:14px;font-weight:700;color:rgba(17,17,17,.6);text-align:center;line-height:1.4;letter-spacing:-.01em;word-break:keep-all;}
+.partner-card-type{margin-top:4px;font-size:11px;font-weight:500;color:rgba(17,17,17,.35);letter-spacing:.06em;text-transform:uppercase;}
+
+/*sub location*/
+.location-wrap{display:grid;grid-template-columns:1fr 480px;gap:48px;align-items:start;margin-top:48px;}
+.location-map{border-radius:20px;overflow:hidden;background:#e8eaf0;aspect-ratio:16/10;border:1px solid rgba(17,17,17,.08);}
+.location-map iframe{width:100%;height:100%;border:0;display:block;}
+.location-info-card{background:#fff;border:1px solid rgba(17,17,17,.08);border-radius:20px;padding:36px 32px;}
+.location-info-card h3{margin:0 0 24px;font-size:20px;font-weight:800;letter-spacing:-.03em;color:#0d1117;}
+.location-info-list{list-style:none;padding:0;margin:0;}
+.location-info-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,17,17,.06);}
+.location-info-item:last-child{border-bottom:0;padding-bottom:0;}
+.location-info-icon{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:rgba(58,64,129,.07);display:flex;align-items:center;justify-content:center;}
+.location-info-icon svg{width:18px;height:18px;stroke:var(--color-primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
+.location-info-label{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(17,17,17,.35);}
+.location-info-value{font-size:14px;font-weight:500;color:#0d1117;line-height:1.6;word-break:keep-all;}
+.location-info-value a{color:var(--color-primary);text-decoration:none;transition:opacity .2s;}
+.location-info-value a:hover{opacity:.7;}
+.location-transport{margin-top:40px;}
+.location-transport-title{margin:0 0 20px;font-size:15px;font-weight:700;color:#0d1117;letter-spacing:-.01em;}
+.location-transport-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
+.location-transport-item{display:flex;align-items:flex-start;gap:12px;padding:16px;background:#f5f6fa;border-radius:12px;}
+.location-transport-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 10px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.04em;background:var(--color-primary);color:#fff;}
+.location-transport-text{font-size:13px;color:rgba(17,17,17,.65);line-height:1.6;word-break:keep-all;}
@media (max-width:1280px){
-.main-bg{width:calc(100vw - 48px);height:540px;}
-.main-grid{background-size:56px 56px;}
-.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
-.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
-.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
-.main-visible-beam{width:82%;}
-}
-
-@media (max-width:768px){
-.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
-.main-visible-atmo1{filter:blur(18px);opacity:.44;}
-.main-visible-atmo2{filter:blur(20px);opacity:.28;}
-.main-visible-beam{width:118%;}
-.main-visible-beam1{filter:blur(8px);}
-.main-visible-beam2{filter:blur(10px);}
-.main-visible-haze{width:90vw;height:42vw;filter:blur(22px);opacity:.46;}
-.main-grid{background-size:34px 34px;opacity:.12;}
-.text-left-bottom{left:24px;right:24px;bottom:96px;max-width:none;font-size:32px;}
-.text-center-hero{width:calc(100% - 40px);font-size:28px;line-height:1.34;}
-.main-progress{bottom:28px;width:180px;}
-.main-scroll-indicator{bottom:58px;}
-.main-scroll-line{height:22px;}
-.main-scroll-text{font-size:10px;letter-spacing:.22em;}
+ .sub-hero-inner,.sub-content{padding-left:48px;padding-right:48px;}
+ .sub-nav{padding-left:48px;padding-right:48px;}
+ .about-values{grid-template-columns:repeat(2,1fr);}
+ .about-overview{gap:48px;}
+ .partners-grid{grid-template-columns:repeat(3,1fr);}
}
-
-/*main utm*/
-
-:root{--header-height:100px;}
-
-.main-utm-section{background:#fff;}
-.main-utm-inner{max-width:1440px;margin:0 auto;padding:calc(var(--header-height) + 40px) 80px 120px;}
-
-.main-utm-head{max-width:800px;margin-bottom:100px;}
-.main-utm-eyebrow{font-size:14px;font-weight:700;letter-spacing:.2em;color:#3A4081;margin-bottom:12px;}
-.main-utm-title{font-size:clamp(36px,4vw,64px);font-weight:700;line-height:1.1;margin:0;}
-.main-utm-desc{font-size:18px;color:#555;margin-top:16px;}
-
-.main-utm-item{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;margin-bottom:160px;}
-.main-utm-item.reverse{direction:rtl;}
-.main-utm-item.reverse .main-utm-text{direction:ltr;}
-
-.main-utm-text{max-width:420px;}
-.main-utm-step{font-size:14px;color:#3A4081;font-weight:700;letter-spacing:.2em;}
-.main-utm-text h3{font-size:32px;margin:16px 0;}
-.main-utm-text p{font-size:16px;color:#555;line-height:1.6;}
-
-.main-utm-visual img{width:100%;border-radius:20px;}
-
-.main-utm-final{text-align:center;margin-top:120px;}
-.main-utm-final p{color:#3A4081;margin-bottom:12px;}
-.main-utm-final h3{font-size:clamp(28px,3vw,48px);}
-
@media (max-width:1024px){
-.main-utm-item{grid-template-columns:1fr;gap:40px;}
-.main-utm-item.reverse{direction:ltr;}
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*main uam*/
-
-.uam-section{position:relative;width:100%;height:100vh;background:#f7f9ff;overflow:hidden;}
-.uam-bg-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(58,64,129,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(58,64,129,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);opacity:.7;}
-.uam-bg-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(80px);}
-.uam-bg-glow--a{width:640px;height:640px;top:-120px;right:-80px;background:radial-gradient(circle,rgba(58,64,129,.12) 0%,rgba(58,64,129,0) 70%);}
-.uam-bg-glow--b{width:500px;height:500px;bottom:-100px;left:-60px;background:radial-gradient(circle,rgba(112,180,255,.1) 0%,rgba(112,180,255,0) 70%);}
-
-.uam-inner{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:0 40px;}
-.uam-header{position:absolute;top:clamp(48px,7vh,80px);left:50%;transform:translateX(-50%);text-align:center;z-index:4;pointer-events:none;width:min(760px,calc(100% - 80px));}
-.uam-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--color-primary);will-change:transform,opacity,filter;}
-.uam-eyebrow-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-primary);opacity:.7;}
-.uam-title{margin:0;font-size:clamp(32px,3.6vw,58px);font-weight:700;line-height:1.14;letter-spacing:-.05em;color:#0e1120;will-change:transform,opacity,filter;}
-.uam-title em{font-style:normal;color:var(--color-primary);}
-.uam-sub{margin:14px 0 0;font-size:15px;line-height:1.6;color:#7a8198;letter-spacing:-.01em;will-change:transform,opacity;}
-
-.uam-stage{position:absolute;inset:0;z-index:3;}
-.uam-aircraft-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-44%);z-index:5;will-change:transform,opacity;pointer-events:none;}
-.uam-aircraft-img{display:block;width:clamp(320px,42vw,640px);height:auto;object-fit:contain;filter:drop-shadow(0 32px 64px rgba(14,17,32,.18)) drop-shadow(0 8px 18px rgba(58,64,129,.14));user-select:none;}
-.uam-aircraft-shadow{position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);width:68%;height:28px;background:radial-gradient(ellipse,rgba(14,17,32,.16) 0%,transparent 72%);filter:blur(8px);border-radius:50%;}
-
-.uam-point-group{position:absolute;inset:0;pointer-events:none;}
-.uam-dot{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);z-index:6;will-change:transform,opacity;}
-.uam-dot-ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(58,64,129,.35);animation:uamDotPulse 2.4s ease-in-out infinite;}
-.uam-dot-core{position:absolute;inset:2px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px rgba(58,64,129,.5);}
-
-.uam-line{position:absolute;height:1px;width:44px;top:0;background:linear-gradient(90deg,var(--color-primary),rgba(58,64,129,.25));z-index:5;will-change:transform,opacity;}
-.uam-line--left{transform:translate(-44px,-50%);transform-origin:right center;}
-.uam-line--right{transform:translate(0,-50%);transform-origin:left center;}
-
-.uam-card{position:absolute;width:clamp(210px,16vw,264px);padding:18px 20px 20px;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);border:1px solid rgba(58,64,129,.1);box-shadow:0 4px 6px rgba(14,17,32,.04),0 16px 40px rgba(14,17,32,.08),inset 0 1px 0 rgba(255,255,255,.9);z-index:6;will-change:transform,opacity,filter;transition:box-shadow .3s ease;}
-.uam-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 60%);pointer-events:none;}
-.uam-card--left{transform:translate(calc(-100% - 30px),-50%);}
-.uam-card--right{transform:translate(30px,-50%);}
-
-.uam-card-index{display:inline-flex;align-items:center;justify-content:center;width:28px;height:18px;margin-bottom:10px;border-radius:999px;background:rgba(58,64,129,.08);font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--color-primary);}
-.uam-card-label{font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(58,64,129,.6);margin-bottom:6px;text-transform:uppercase;}
-.uam-card-title{display:block;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:#0e1120;margin-bottom:10px;}
-.uam-card-desc{margin:0 0 14px;font-size:12.5px;line-height:1.72;color:#667085;word-break:keep-all;}
-.uam-card-stat{display:flex;align-items:baseline;gap:7px;padding-top:12px;border-top:1px solid rgba(58,64,129,.08);}
-.uam-card-stat-value{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--color-primary);line-height:1;}
-.uam-card-stat-label{font-size:11px;font-weight:600;color:#a0a9bc;letter-spacing:.04em;}
-
-@keyframes uamDotPulse{
-0%{transform:scale(1);opacity:.5;}
-50%{transform:scale(1.6);opacity:0;}
-100%{transform:scale(1);opacity:.5;}
-}
-
-@media (max-width:1280px){
-.uam-aircraft-img{width:clamp(280px,40vw,520px);}
-.uam-card{width:clamp(190px,15vw,240px);padding:16px 18px 18px;}
-.uam-card--left{transform:translate(calc(-100% - 24px),-50%);}
-.uam-card--right{transform:translate(24px,-50%);}
-.uam-card-title{font-size:15px;}
-.uam-card-desc{font-size:12px;}
-.uam-card-stat-value{font-size:20px;}
-}
-
-@media (max-width:991px){
-.uam-title{font-size:clamp(28px,5vw,42px);}
-.uam-aircraft-img{width:clamp(240px,52vw,400px);}
-.uam-card{width:clamp(170px,22vw,210px);padding:14px 15px 16px;}
-.uam-card--left{transform:translate(calc(-100% - 18px),-50%);}
-.uam-card--right{transform:translate(18px,-50%);}
-.uam-card-title{font-size:14px;}
-.uam-card-desc{font-size:11.5px;line-height:1.62;}
-.uam-card-stat-value{font-size:18px;}
+ .sub-hero-inner,.sub-content{padding-left:32px;padding-right:32px;}
+ .sub-nav{padding-left:32px;padding-right:32px;}
+ .about-overview{grid-template-columns:1fr;gap:48px;}
+ .about-awards{grid-template-columns:1fr;}
+ .location-wrap{grid-template-columns:1fr;}
+ .location-map{aspect-ratio:16/9;}
}
@media (max-width:768px){
-.uam-inner{padding:0 16px;}
-.uam-header{top:clamp(36px,5vh,52px);width:calc(100% - 32px);}
-.uam-title{font-size:clamp(26px,7vw,36px);}
-.uam-sub{font-size:13px;margin-top:10px;}
-.uam-aircraft-img{width:clamp(200px,72vw,340px);}
-.uam-aircraft-wrap{top:50%;transform:translate(-50%,-46%);}
-.uam-dot{width:10px;height:10px;}
-.uam-line{width:26px;}
-.uam-line--left{transform:translate(-26px,-50%);}
-.uam-card{width:clamp(148px,38vw,180px);padding:12px 13px 14px;border-radius:16px;}
-.uam-card--left{transform:translate(calc(-100% - 12px),-50%);}
-.uam-card--right{transform:translate(12px,-50%);}
-.uam-card-index{width:24px;height:16px;font-size:9px;}
-.uam-card-label{font-size:9px;}
-.uam-card-title{font-size:12px;margin-bottom:7px;}
-.uam-card-desc{font-size:10.5px;line-height:1.58;margin-bottom:10px;}
-.uam-card-stat-value{font-size:16px;}
-.uam-card-stat-label{font-size:10px;}
+ .sub-hero-inner{padding:calc(var(--header-height) + 36px) 20px 40px;}
+ .sub-content{padding:48px 20px 80px;}
+ .sub-nav{padding:0 20px;}
+ .about-values{grid-template-columns:1fr;}
+ .about-overview-stats{grid-template-columns:1fr 1fr;}
+ .partners-grid{grid-template-columns:repeat(2,1fr);}
+ .history-year-group{margin-bottom:48px;}
+ .location-info-card{padding:24px 20px;}
}
\ No newline at end of file
diff --git a/src/css/main.css b/src/css/main.css
new file mode 100644
index 0000000..f6ae19f
--- /dev/null
+++ b/src/css/main.css
@@ -0,0 +1,129 @@
+:root{
+--header-height:96px;
+--color-primary:#3A4081;
+--color-primary-hover:#2F5DAA;
+--color-primary-light:#6B78B5;
+--color-primary-soft:rgba(58,64,129,.08);
+--color-primary-soft-strong:rgba(58,64,129,.12);
+--color-primary-soft-border:rgba(58,64,129,.16);
+--color-primary-border:rgba(58,64,129,.2);
+--color-primary-border-strong:rgba(58,64,129,.24);
+--color-primary-shadow:rgba(58,64,129,.18);
+}
+
+html{scrollbar-gutter:inherit;}
+body{overflow-x:hidden;}
+
+.main-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
+.sub-layout{min-height:calc(100vh - var(--header-height));padding-top:var(--header-height);}
+
+/*main visual*/
+.main-page{width:100%;overflow:hidden;}
+.main-section{position:relative;height:100vh;}
+.main-bg-wrap{position:relative;width:100%;height:100vh;display:flex;align-items:flex-start;justify-content:center;overflow:hidden;}
+.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:750px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
+
+.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
+/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
+.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
+.hero-video{width:100%;height:100%;object-fit:cover;}
+.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
+
+.main-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,10,24,.12) 0%,rgba(4,10,24,.24) 38%,rgba(4,10,24,.56) 100%),linear-gradient(90deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.05) 42%,rgba(0,0,0,.12) 100%);z-index:1;pointer-events:none;}
+.main-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 58%,rgba(255,255,255,.06) 0%,rgba(255,255,255,.024) 18%,rgba(255,255,255,0) 44%),radial-gradient(circle at 50% 78%,rgba(58,64,129,.16) 0%,rgba(58,64,129,.08) 20%,rgba(58,64,129,0) 44%);z-index:1;pointer-events:none;}
+
+.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
+.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
+.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
+
+.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
+.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
+.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
+
+.main-visible-haze{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,78vw);height:min(460px,40vw);z-index:2;pointer-events:none;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.24) 0%,rgba(255,255,255,.12) 16%,rgba(255,255,255,.05) 28%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 64%);filter:blur(28px);opacity:.56;animation:visibleHaze 4.8s ease-in-out infinite;}
+.main-grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(174,206,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,206,255,.08) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(0,0,0,.72) 52%,rgba(0,0,0,.18) 100%);animation:gridShift 10s linear infinite;}
+.main-text{position:absolute;inset:0;z-index:3;pointer-events:none;}
+.main-text .text{position:absolute;color:#fff;text-shadow:0 10px 30px rgba(0,0,0,.22);will-change:transform,opacity,filter;}
+.text-left-bottom{left:92px;bottom:124px;width:100%;max-width:760px;text-align:left;font-size:64px;line-height:1.12;font-weight:700;letter-spacing:-.05em;}
+.text-center-hero{left:50%;top:45%;transform:translate(-50%,-50%);width:min(1080px,calc(100% - 120px));text-align:center;font-size:56px;line-height:1.24;font-weight:700;letter-spacing:-.045em;}
+.main-text .text-change{opacity:0;}
+.main-kicker{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.22em;font-weight:600;color:rgba(255,255,255,.68);}
+.main-text .text-fill .fill-line{display:inline-block;color:rgba(255,255,255,.28);background:linear-gradient(90deg,#fff 0%,#fff 50%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 100%);background-size:220% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
+
+.main-progress{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(240px,calc(100% - 48px));height:2px;background:rgba(255,255,255,.22);z-index:3;overflow:hidden;border-radius:999px;}
+.main-progress-bar{display:block;width:0%;height:100%;background:#fff;border-radius:999px;box-shadow:0 0 14px rgba(255,255,255,.28);}
+
+.main-scroll-indicator{position:absolute;left:50%;bottom:72px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3;pointer-events:none;}
+.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
+.main-scroll-text{font-size:11px;line-height:1;letter-spacing:.28em;font-weight:600;color:rgba(255,255,255,.78);}
+
+@keyframes scrollLine{
+ 0%{transform:translateY(0);opacity:.35;}
+ 50%{transform:translateY(6px);opacity:1;}
+ 100%{transform:translateY(0);opacity:.35;}
+}
+
+@keyframes visibleAtmo1{
+ 0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
+ 50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
+ 100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
+}
+
+@keyframes visibleAtmo2{
+ 0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
+ 50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
+ 100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
+}
+
+@keyframes visibleBeam1{
+ 0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
+ 8%{opacity:.32;}
+ 36%{opacity:.95;}
+ 58%{opacity:.48;}
+ 100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
+}
+
+@keyframes visibleBeam2{
+ 0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
+ 10%{opacity:.22;}
+ 40%{opacity:.72;}
+ 62%{opacity:.34;}
+ 100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
+}
+
+@keyframes visibleHaze{
+ 0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
+ 50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
+ 100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
+}
+
+@keyframes gridShift{
+ 0%{transform:translate3d(0,0,0);}
+ 100%{transform:translate3d(0,18px,0);}
+}
+
+@media (max-width:1280px){
+ .main-bg{width:calc(100vw - 48px);height:540px;}
+ .main-grid{background-size:56px 56px;}
+ .text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
+ .text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
+ .main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
+ .main-visible-beam{width:82%;}
+}
+
+@media (max-width:768px){
+.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
+.main-visible-atmo1{filter:blur(18px);opacity:.44;}
+.main-visible-atmo2{filter:blur(20px);opacity:.28;}
+.main-visible-beam{width:118%;}
+.main-visible-beam1{filter:blur(8px);}
+.main-visible-beam2{filter:blur(10px);}
+.main-visible-haze{width:90vw;height:42vw;filter:blur(22px);opacity:.46;}
+.main-grid{background-size:34px 34px;opacity:.12;}
+.text-left-bottom{left:24px;right:24px;bottom:96px;max-width:none;font-size:32px;}
+.text-center-hero{width:calc(100% - 40px);font-size:28px;line-height:1.34;}
+.main-progress{bottom:28px;width:180px;}
+.main-scroll-indicator{bottom:58px;}
+.main-scroll-line{height:22px;}
+.main-scroll-text{font-size:10px;letter-spacing:.22em;}
+}
diff --git a/src/hooks/useFadeIn.js b/src/hooks/useFadeIn.js
new file mode 100644
index 0000000..df01cfe
--- /dev/null
+++ b/src/hooks/useFadeIn.js
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * useFadeIn
+ * className="sub-fade-in" 엘리먼트들을 IntersectionObserver로 감지해
+ * is-visible 클래스를 추가합니다.
+ *
+ * @param {string} selector - 감지할 셀렉터 (기본: ".sub-fade-in")
+ * @param {object} options - IntersectionObserver 옵션
+ */
+export default function useFadeIn(selector = ".sub-fade-in", options = {}) {
+ const containerRef = useRef(null);
+
+ useEffect(() => {
+ const root = containerRef.current || document;
+ const els = root.querySelectorAll(selector);
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add("is-visible");
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ { threshold: 0.12, ...options }
+ );
+
+ els.forEach((el) => observer.observe(el));
+
+ return () => observer.disconnect();
+ }, [selector, options]);
+
+ return containerRef;
+}
diff --git a/src/main.jsx b/src/main.jsx
index 39f371c..fd4a290 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -6,6 +6,7 @@ import "./css/reset.css";
import "./css/common.css";
import "./css/header.css";
import "./css/footer.css";
+import "./css/main.css";
ReactDOM.createRoot(document.getElementById("root")).render(
diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx
index 8d50265..a4697b0 100644
--- a/src/pages/company/AboutPage.jsx
+++ b/src/pages/company/AboutPage.jsx
@@ -1,25 +1,157 @@
-function AboutPage() {
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
+const COMPANY_NAV = [
+ { label: "회사소개", to: "/company/about" },
+ { label: "연혁", to: "/company/history" },
+ { label: "고객 및 협력사", to: "/company/partners" },
+ { label: "찾아오시는 길", to: "/company/location" },
+];
+
+const VALUES = [
+ {
+ title: "기술 혁신",
+ desc: "항공 데이터와 UTM 기술의 경계를 지속적으로 확장하며, 미래 모빌리티 시대를 선도합니다.",
+ icon: (
+
+ ),
+ },
+ {
+ title: "신뢰와 책임",
+ desc: "공공·항공 분야의 핵심 인프라를 다루는 만큼, 모든 서비스에 안전과 신뢰를 최우선으로 합니다.",
+ icon: (
+
+ ),
+ },
+ {
+ title: "파트너십",
+ desc: "고객사와 장기 파트너로서 구축부터 운영·유지보수까지 전 과정을 함께합니다.",
+ icon: (
+
+ ),
+ },
+ {
+ title: "전문성",
+ desc: "항공 IT 분야 10년 이상의 전문 인력이 SI, R&D, 솔루션 개발을 일관되게 수행합니다.",
+ icon: (
+
+ ),
+ },
+ {
+ title: "지속 성장",
+ desc: "UAM·UATM 등 차세대 항공 기술을 선행 연구하며, 산업 변화에 능동적으로 대응합니다.",
+ icon: (
+
+ ),
+ },
+ {
+ title: "사회적 가치",
+ desc: "안전한 하늘길과 신뢰 가능한 IT 인프라를 통해 사회 전반에 기여하는 기업으로 성장합니다.",
+ icon: (
+
+ ),
+ },
+];
+
+const AWARDS = [
+ { title: "인천 항공산업 선도기업 유망기업 선정", desc: "인천시 · 인천테크노파크" },
+ { title: "소프트웨어 품질인증 GS 인증 획득", desc: "한국정보통신기술협회(TTA)" },
+ { title: "기업부설연구소 인정", desc: "한국산업기술진흥협회" },
+ { title: "조달청 우수제품 지정", desc: "비행상황관제 시스템" },
+];
+
+export default function AboutPage() {
+ const ref = useFadeIn();
+
return (
-
-
-
-
회사소개
-
About PAL Networks
-
-
-
-
-
-
기업 철학과 핵심 가치
-
- PAL Networks는 항공 데이터와 통합 관제 기술을 기반으로
-
- 안전한 하늘길과 신뢰할 수 있는 IT 서비스를 만들어갑니다.
-
-
-
-
+
+
+
+
+
+ {/* 회사 개요 */}
+
+
+
+
About PAL Networks
+
항공산업의 기술혁신을
+선도하는 파트너
+
+ 팔네트웍스(PAL Networks)는 2010년 설립 이후 항공 예약 플랫폼, 비행상황관제 시스템, UTM(무인항공기 교통관리) 솔루션 등 항공 IT 분야의 핵심 기술을 개발·운영해 온 전문 기업입니다.
+
+
+ 공공·민간 고객사의 시스템 구축부터 장기 운영·유지보수까지 전 과정을 책임지며, 인천광역시 로봇랜드에 본사를 두고 항공 미래 모빌리티(UAM/UATM) 기술을 선행 연구하고 있습니다.
+
+
+
+
+
+ 2010
+ 설립연도
+
+
+ 50+
+ 완료 프로젝트
+
+
+ 15+
+ 주요 고객사
+
+
+ 10+
+ R&D 전문 인력
+
+
+
+
+
+ {/* 핵심 가치 */}
+
+ Core Values
+ 우리가 지키는 6가지 가치
+
+ {VALUES.map((v, i) => (
+
+
{v.icon}
+
{v.title}
+
{v.desc}
+
+ ))}
+
+
+
+ {/* 인증 및 수상 */}
+
+ Certifications & Awards
+ 인증 및 수상 이력
+
+ {AWARDS.map((a, i) => (
+
+ ))}
+
+
+
+
+
);
}
-
-export default AboutPage;
diff --git a/src/pages/company/HistoryPage.jsx b/src/pages/company/HistoryPage.jsx
index 04d7954..d13df14 100644
--- a/src/pages/company/HistoryPage.jsx
+++ b/src/pages/company/HistoryPage.jsx
@@ -1,21 +1,114 @@
-function HistoryPage() {
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
+const COMPANY_NAV = [
+ { label: "회사소개", to: "/company/about" },
+ { label: "연혁", to: "/company/history" },
+ { label: "고객 및 협력사", to: "/company/partners" },
+ { label: "찾아오시는 길", to: "/company/location" },
+];
+
+const HISTORY = [
+ {
+ year: "2024",
+ items: [
+ { month: "11월", text: "UAM 통합 교통관리 시스템(UATM) 1단계 연구개발 착수" },
+ { month: "06월", text: "KT G-cloud 인천 총판 계약 체결" },
+ { month: "03월", text: "비행상황관제 시스템 v3.0 고도화 완료" },
+ ],
+ },
+ {
+ year: "2023",
+ items: [
+ { month: "09월", text: "인천광역시 로봇랜드 14층 본사 이전" },
+ { month: "07월", text: "스마트 관광 예약 플랫폼 제주도관광공사 구축 완료" },
+ { month: "04월", text: "기업부설연구소 인정 (한국산업기술진흥협회)" },
+ { month: "01월", text: "UTM 드론 비행 승인 시스템 실증 사업 참여" },
+ ],
+ },
+ {
+ year: "2022",
+ items: [
+ { month: "11월", text: "인천 항공산업 선도기업 유망기업 선정" },
+ { month: "06월", text: "IBE(인터넷 부킹 엔진) v2 고도화 완료" },
+ { month: "03월", text: "국방부 산하 항공 운영 시스템 구축 SI 수주" },
+ ],
+ },
+ {
+ year: "2021",
+ items: [
+ { month: "10월", text: "비행상황관제 시스템 조달청 우수제품 지정" },
+ { month: "05월", text: "소프트웨어 품질인증 GS 인증 획득 (TTA)" },
+ ],
+ },
+ {
+ year: "2019",
+ items: [
+ { month: "08월", text: "인천국제공항공사 항공 운영 시스템 유지보수 계약" },
+ { month: "03월", text: "드론 관제 및 비행 계획 승인 시스템 프로토타입 개발" },
+ ],
+ },
+ {
+ year: "2017",
+ items: [
+ { month: "09월", text: "스마트 관광 예약 플랫폼 1.0 출시" },
+ { month: "04월", text: "IBE(인터넷 부킹 엔진) 첫 상용화" },
+ ],
+ },
+ {
+ year: "2015",
+ items: [
+ { month: "06월", text: "비행상황관제 시스템 초기 버전 개발 완료" },
+ { month: "02월", text: "한국공항공사 MRO 시스템 구축 참여" },
+ ],
+ },
+ {
+ year: "2010",
+ items: [
+ { month: "05월", text: "주식회사 팔네트웍스 설립" },
+ { month: "05월", text: "항공 IT 소프트웨어 개발 전문 기업으로 사업 시작" },
+ ],
+ },
+];
+
+export default function HistoryPage() {
+ const ref = useFadeIn();
+
return (
-
-
+
+
+
+
+
+ History
+ 연혁
-
-
-
주요 실적과 성장 과정
-
PAL Networks가 걸어온 길과 주요 성과를 소개합니다.
-
-
-
+
+ {HISTORY.map((group, gi) => (
+
+
{group.year}
+
+ {group.items.map((item, ii) => (
+
+
{item.month}
+
{item.text}
+
+ ))}
+
+
+ ))}
+
+
+
+
);
}
-
-export default HistoryPage;
diff --git a/src/pages/company/LocationPage.jsx b/src/pages/company/LocationPage.jsx
index 4794652..f86aa64 100644
--- a/src/pages/company/LocationPage.jsx
+++ b/src/pages/company/LocationPage.jsx
@@ -1,21 +1,188 @@
-function LocationPage() {
+import { useEffect } from "react";
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
+const COMPANY_NAV = [
+ { label: "회사소개", to: "/company/about" },
+ { label: "연혁", to: "/company/history" },
+ { label: "고객 및 협력사", to: "/company/partners" },
+ { label: "찾아오시는 길", to: "/company/location" },
+];
+
+// 아이콘 모음
+function IconPin() {
+ return (
+
+ );
+}
+function IconPhone() {
+ return (
+
+ );
+}
+function IconFax() {
+ return (
+
+ );
+}
+function IconMail() {
return (
-
-
-
-
-
-
위치 및 연락처 안내
-
PAL Networks 본사 위치와 연락처를 안내드립니다.
-
-
-
+
);
}
-export default LocationPage;
+const INFO = [
+ {
+ icon: ,
+ label: "주소",
+ value: "인천광역시 서구 로봇랜드로 155-11\n로봇랜드 14층 1401~2호",
+ },
+ {
+ icon: ,
+ label: "전화",
+ value: "032-727-5909",
+ href: "tel:032-727-5909",
+ },
+ {
+ icon: ,
+ label: "팩스",
+ value: "032-727-5908",
+ },
+ {
+ icon: ,
+ label: "이메일",
+ value: "help@palnet.co.kr",
+ href: "mailto:help@palnet.co.kr",
+ },
+];
+
+const TRANSPORT = [
+ {
+ badge: "지하철",
+ text: "인천 1호선 검암역 하차 → 도보 약 15분 또는 택시 5분 (로봇랜드 방면)",
+ },
+ {
+ badge: "버스",
+ text: "검암역 환승센터에서 서구 방면 버스 탑승 → 로봇랜드 하차",
+ },
+ {
+ badge: "자가용",
+ text: "제2경인고속도로 검단IC 진출 → 로봇랜드로 방면 직진 약 5분",
+ },
+];
+
+// 카카오맵 위도/경도: 인천 로봇랜드 좌표
+const MAP_SRC =
+ "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3161.8!2d126.6854!3d37.5613!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7f6e5a5cfc7f%3A0x0!2z7Iuc7LKc7Jy87Lanb-qzoOq1rOyGjA!5e0!3m2!1sko!2skr!4v1700000000000";
+
+export default function LocationPage() {
+ const ref = useFadeIn();
+
+ return (
+
+
+
+
+
+
+ {/* 지도 */}
+
+
+
+
+
+ {/* 교통편 */}
+
+
교통편 안내
+
+ {TRANSPORT.map((t) => (
+ -
+ {t.badge}
+ {t.text}
+
+ ))}
+
+
+
+
+ {/* 연락처 카드 */}
+
+
+
+
+
+ );
+}
diff --git a/src/pages/company/PartnersPage.jsx b/src/pages/company/PartnersPage.jsx
index d221519..3549e05 100644
--- a/src/pages/company/PartnersPage.jsx
+++ b/src/pages/company/PartnersPage.jsx
@@ -1,21 +1,142 @@
-function PartnersPage() {
+import SubHero from "../../components/SubHero";
+import useFadeIn from "../../hooks/useFadeIn";
+
+const COMPANY_NAV = [
+ { label: "회사소개", to: "/company/about" },
+ { label: "연혁", to: "/company/history" },
+ { label: "고객 및 협력사", to: "/company/partners" },
+ { label: "찾아오시는 길", to: "/company/location" },
+];
+
+const CLIENTS = [
+ { name: "인천국제공항공사", type: "공공기관" },
+ { name: "한국공항공사", type: "공공기관" },
+ { name: "국방부", type: "정부기관" },
+ { name: "인천광역시", type: "지방자치단체" },
+ { name: "제주도관광공사", type: "공공기관" },
+ { name: "항공안전기술원", type: "공공기관" },
+ { name: "한국항공우주연구원", type: "연구기관" },
+ { name: "국토교통부", type: "정부기관" },
+];
+
+const PARTNERS = [
+ { name: "KT", type: "클라우드 파트너" },
+ { name: "마이크로소프트", type: "기술 파트너" },
+ { name: "오라클", type: "기술 파트너" },
+ { name: "삼성SDS", type: "SI 파트너" },
+ { name: "한화시스템", type: "방산·항공" },
+ { name: "LG CNS", type: "SI 파트너" },
+];
+
+function PartnerCard({ name, type }) {
return (
-
-
-
-
고객 및 협력사
-
Clients & Partners
-
-
-
-
-
-
주요 고객과 협력 네트워크
-
다양한 산업의 고객사 및 협력사와 함께 성장하고 있습니다.
-
-
-
+
+ {name}
+ {type}
+
);
}
-export default PartnersPage;
+export default function PartnersPage() {
+ const ref = useFadeIn();
+
+ return (
+
+
+
+
+
+ {/* 주요 고객사 */}
+
+ Clients
+ 주요 고객사
+
+ 인천국제공항공사, 국방부 등 항공·공공 분야 핵심 기관들과 장기 파트너십을 유지하며 안정적인 IT 서비스를 제공합니다.
+
+
+
+ {CLIENTS.map((c, i) => (
+
+ ))}
+
+
+
+ {/* 협력사 */}
+
+ Partners
+ 기술 협력사
+
+ 국내외 선도 IT 기업들과의 협력을 통해 최적의 기술 솔루션을 고객에게 제공합니다.
+
+
+
+ {PARTNERS.map((p, i) => (
+
+ ))}
+
+
+
+ {/* 협력 제안 CTA */}
+
+
+
+
+ Become a Partner
+
+
+ 팔네트웍스와 함께 성장할
파트너를 찾습니다
+
+
+
+ 협력 문의하기
+
+
+
+
+
+
+ );
+}