diff --git a/public/images/aboutIcon1.png b/public/images/aboutIcon1.png
new file mode 100644
index 0000000..b114ac6
Binary files /dev/null and b/public/images/aboutIcon1.png differ
diff --git a/public/images/aboutIcon2.png b/public/images/aboutIcon2.png
new file mode 100644
index 0000000..806acba
Binary files /dev/null and b/public/images/aboutIcon2.png differ
diff --git a/public/images/aboutIcon3.png b/public/images/aboutIcon3.png
new file mode 100644
index 0000000..8ef89c3
Binary files /dev/null and b/public/images/aboutIcon3.png differ
diff --git a/public/images/aboutIcon4.png b/public/images/aboutIcon4.png
new file mode 100644
index 0000000..e72666d
Binary files /dev/null and b/public/images/aboutIcon4.png differ
diff --git a/public/images/aboutIcon5.png b/public/images/aboutIcon5.png
new file mode 100644
index 0000000..8b33ac5
Binary files /dev/null and b/public/images/aboutIcon5.png differ
diff --git a/public/images/aboutImg1.png b/public/images/aboutImg1.png
new file mode 100644
index 0000000..d80b1f3
Binary files /dev/null and b/public/images/aboutImg1.png differ
diff --git a/public/images/aboutImg2.png b/public/images/aboutImg2.png
new file mode 100644
index 0000000..50715cd
Binary files /dev/null and b/public/images/aboutImg2.png differ
diff --git a/src/css/common.css b/src/css/common.css
index c236f1a..9b730d2 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -452,8 +452,8 @@ body{overflow-x:hidden;}
/*ab about page*/
.ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;}
.ab-eyebrow--light{color:rgba(255,255,255,.3);}
-.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895C0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
-.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1E2A5E; }
+.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895c0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1e2a5e; }
.about-section-label--light { color: rgba(255,255,255,0.4); }
.about-section-label--light::before { background: rgba(255,255,255,0.4); }
@@ -463,20 +463,20 @@ body{overflow-x:hidden;}
.about-company-text { flex: 1; min-width: 420px; }
-.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1A1A2E; margin-bottom: 32px; }
-.about-company-heading .blue { color: #1E2A5E; }
+.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1a1a2e; margin-bottom: 32px; }
+.about-company-heading .blue { color: #1e2a5e; }
.about-company-body { font-size: 16px; color: #555; line-height: 2.1; margin-bottom: 20px; }
.about-img-group { flex-shrink: 0; width: 42vw; max-width: 580px; display: flex; gap: 16px; align-items: flex-start; }
-.about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #F4F5FB; will-change: transform, border-radius; }
-.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #f4f5fb; will-change: transform, border-radius; }
+.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; display: block; filter: brightness(0.85); }
-.about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #EEF0F8; will-change: transform, border-radius; }
-.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #eef0f8; will-change: transform, border-radius; }
+.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 90% center; filter: brightness(0.85);}
-.about-tech-section { background: #0D1628; padding: 100px 0 120px; }
+.about-tech-section { background: #0d1628; padding: 100px 0 120px; }
.about-stats-row { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 72px; margin-bottom: 80px; }
@@ -509,67 +509,68 @@ body{overflow-x:hidden;}
.about-tech-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; }
-.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #F0F0F0; }
+.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #f0f0f0; }
-.about-meaning-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 36px; }
+.about-meaning-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 36px; }
.about-meaning-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
-.about-meaning-card { border: 1px solid #E8EAF3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
-.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1E2A5E; }
-.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
+.about-meaning-card { border: 1px solid #e8eaf3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
+.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1e2a5e; }
+.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
-.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #EEF0F8; display: flex; align-items: center; justify-content: center; color: #1E2A5E; font-size: 20px; margin-bottom: 14px; }
+.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef0f8; display: flex; align-items: center; justify-content: center; color: #1e2a5e; font-size: 20px; margin-bottom: 14px; }
-.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1A1A2E; margin-bottom: 12px; }
+.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
.about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; }
-.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
+.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
.about-mission-inner { display: flex; gap: 100px; align-items: flex-start; }
.about-mission-left { flex: 1; min-width: 360px; padding-top: 8px; }
-.about-mission-title { font-size: 30px; font-weight: 700; color: #1A1A2E; line-height: 1.5; margin-bottom: 24px; }
+.about-mission-title { font-size: 30px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 24px; }
.about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; }
.about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; }
-.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #F0F0F0; }
+.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #f0f0f0; }
.about-mission-item:first-child { border-top: none; }
.about-mission-item:last-child { border-bottom: none; }
-.about-mission-item-num { font-size: 13px; font-weight: 700; color: #D0D4E8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
+.about-mission-item-num { font-size: 13px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
.about-mission-item-body { flex: 1; }
.about-mission-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
-.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1A1A2E; }
+.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1a1a2e; }
-.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 3px 8px; }
+.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 3px 8px; }
.about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; }
-.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
+.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
-.about-cert-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 28px; }
+.about-cert-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 28px; }
-.about-cert-patents { background: #F8F9FC; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
+.about-cert-patents { background: #f8f9fc; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
.about-cert-patents-desc { font-size: 14px; color: #666; line-height: 1.9; }
.about-cert-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
-.about-cert-card { border: 1px solid #E8EAF3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
+.about-cert-card { border: 1px solid #e8eaf3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
-.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #EEF0F8; margin-bottom: 8px; }
+.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #eef0f8; margin-bottom: 8px; padding: 8px; }
-.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895C0; letter-spacing: 0.05em; }
+.about-cert-card-icon img { width: 100%; height: 100%; object-fit: contain; }
+.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895c0; letter-spacing: 0.05em; }
-.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1A1A2E; line-height: 1.4; }
+.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1a1a2e; line-height: 1.4; }
.about-cert-card-desc { font-size: 13px; color: #888; line-height: 1.7; }
-.about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0D1628; }
+.about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0d1628; }
.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; }
.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
@@ -582,43 +583,42 @@ body{overflow-x:hidden;}
.about-cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
-.about-cta-btn--primary { background: #fff; color: #0D1628; }
-.about-cta-btn--primary:hover { background: #EEF0F8; }
+.about-cta-btn--primary { background: #fff; color: #0d1628; }
+.about-cta-btn--primary:hover { background: #eef0f8; }
.about-cta-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.about-cta-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
@media (max-width: 768px) {
- .about-img-side-wrap { display: none; }
- .about-company-section { padding: 64px 0 80px; }
- .about-meaning-section { padding: 0 0 80px; }
- .about-mission-section { padding: 64px 0 64px; }
- .about-cert-section { padding: 64px 0 80px; }
- .about-meaning-cards { grid-template-columns: 1fr; }
- .about-mission-inner { flex-direction: column; gap: 48px; }
- .about-mission-left { min-width: unset; }
- .about-cert-cards { grid-template-columns: 1fr 1fr; }
- .about-slogan-line { font-size: 36px; }
- .about-company-inner { flex-direction: column; }
- .about-company-text { min-width: unset; }
- .about-img-group { width: 100%; max-width: unset; }
- .about-stats-row { flex-direction: column; gap: 32px; }
- .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
- .about-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
- .about-tech-cards { grid-template-columns: 1fr 1fr; }
- .about-cta-section { padding: 80px 24px; }
- .about-cta-title { font-size: 28px; }
- .about-cta-buttons { flex-direction: column; align-items: center; }
+ .about-img-side-wrap { display: none; }
+ .about-company-section { padding: 64px 0 80px; }
+ .about-meaning-section { padding: 0 0 80px; }
+ .about-mission-section { padding: 64px 0 64px; }
+ .about-cert-section { padding: 64px 0 80px; }
+ .about-meaning-cards { grid-template-columns: 1fr; }
+ .about-mission-inner { flex-direction: column; gap: 48px; }
+ .about-mission-left { min-width: unset; }
+ .about-cert-cards { grid-template-columns: 1fr 1fr; }
+ .about-slogan-line { font-size: 36px; }
+ .about-company-inner { flex-direction: column; }
+ .about-company-text { min-width: unset; }
+ .about-img-group { width: 100%; max-width: unset; }
+ .about-stats-row { flex-direction: column; gap: 32px; }
+ .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+ .about-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
+ .about-tech-cards { grid-template-columns: 1fr 1fr; }
+ .about-cta-section { padding: 80px 24px; }
+ .about-cta-title { font-size: 28px; }
+ .about-cta-buttons { flex-direction: column; align-items: center; }
}
@keyframes about-cta-move {
- 0% { transform: translate(0%, 0%); }
- 50% { transform: translate(-10%, 8%); }
- 100% { transform: translate(10%, -8%); }
+ 0% { transform: translate(0%, 0%); }
+ 50% { transform: translate(-10%, 8%); }
+ 100% { transform: translate(10%, -8%); }
}
-
/* ════════════════════════════════
FlightControlPage — common.css 추가분
════════════════════════════════ */
diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx
index 49f956b..7d7127f 100644
--- a/src/pages/company/AboutPage.jsx
+++ b/src/pages/company/AboutPage.jsx
@@ -5,7 +5,6 @@ import FloatingKeywords from "../../components/FloatingKeywords";
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
-
gsap.registerPlugin(ScrollTrigger);
const heroRight = ;
@@ -47,6 +46,8 @@ const TECH_CARDS = [
];
export default function AboutPage() {
+ const basePath = import.meta.env.BASE_URL;
+
const ref = useRef(null);
const meaningCardsRef = useRef([]);
const missionItemsRef = useRef([]);
@@ -242,8 +243,18 @@ export default function AboutPage() {
-
-
+
+
{" "}
+
+
+
+
- {/* 아이콘 자리 */}
+
{item.title}