diff --git a/public/images/aboutImg1.png b/public/images/aboutImg1.png
index d80b1f3..9456db8 100644
Binary files a/public/images/aboutImg1.png and b/public/images/aboutImg1.png differ
diff --git a/public/images/about_banner.png b/public/images/about_banner.png
new file mode 100644
index 0000000..5a7c688
Binary files /dev/null and b/public/images/about_banner.png differ
diff --git a/src/components/TopButton.jsx b/src/components/TopButton.jsx
new file mode 100644
index 0000000..7507e67
--- /dev/null
+++ b/src/components/TopButton.jsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export default function TopButton() {
+ const [showTop, setShowTop] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => setShowTop(window.scrollY > 400);
+ window.addEventListener("scroll", handleScroll, { passive: true });
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ return (
+ <>
+ {showTop && (
+
+ )}
+ >
+ );
+}
diff --git a/src/css/common.css b/src/css/common.css
index cdb53ba..9b48073 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -449,6 +449,19 @@ body{overflow-x:hidden;}
}
+/* top btn */
+
+.top-btn { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: #1e2a5e; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 20px rgba(30,42,94,0.4); transition: all 0.2s; z-index: 9999; animation: top-btn-pulse 2s ease-in-out infinite; }
+.top-btn:hover { background: #2a3a7e; transform: translateY(-4px); animation: none; box-shadow: 0 8px 24px rgba(30,42,94,0.5); }
+
+@media (max-width: 768px) {
+ .top-btn { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 14px; }
+}
+@keyframes top-btn-pulse {
+ 0% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 0 rgba(30,42,94,0.3); }
+ 70% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 12px rgba(30,42,94,0); }
+ 100% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 0 rgba(30,42,94,0); }
+}
/*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);}
@@ -471,10 +484,10 @@ body{overflow-x:hidden;}
.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; object-position: 30% center; display: block; filter: brightness(0.85); }
+.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; 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-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 100% center; }
.about-tech-section { background: #0d1628; padding: 100px 0 120px; }
@@ -571,9 +584,11 @@ body{overflow-x:hidden;}
.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-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-section::after { content: ''; position: absolute; inset: 0; background: rgba(13, 22, 40, 0.6); z-index: 1; }
-.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
+.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; z-index: 2; }
+.about-cta-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.4; mix-blend-mode: normal; }
+.about-cta-inner { position: relative; z-index: 3; max-width: 600px; margin: 0 auto; }
.about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; }
@@ -592,9 +607,19 @@ body{overflow-x:hidden;}
@media (max-width: 768px) {
.about-img-side-wrap { display: none; }
.about-company-section { padding: 64px 0 80px; }
+ .about-company-heading { font-size: 26px; }
+ .about-company-body { font-size: 14px; }
.about-meaning-section { padding: 0 0 80px; }
+ .about-meaning-title { font-size: 22px; }
+ .about-meaning-card-title { font-size: 15px; }
+ .about-meaning-card-desc { font-size: 13px; }
.about-mission-section { padding: 64px 0 64px; }
+ .about-mission-title { font-size: 20px; }
+ .about-mission-desc { font-size: 13px; }
+ .about-mission-item-title { font-size: 15px; }
.about-cert-section { padding: 64px 0 80px; }
+ .about-cert-title { font-size: 22px; }
+ .about-cert-patents-desc { font-size: 12px; }
.about-meaning-cards { grid-template-columns: 1fr; }
.about-mission-inner { flex-direction: column; gap: 48px; }
.about-mission-left { min-width: unset; }
@@ -604,17 +629,20 @@ body{overflow-x:hidden;}
.about-company-text { min-width: unset; }
.about-img-group { width: 100%; max-width: unset; }
.about-stats-row { flex-direction: column; gap: 32px; }
+ .about-stat-num { font-size: 36px; }
.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-tech-heading { font-size: 26px; }
+ .about-tech-desc { font-size: 13px; }
+ .about-tech-card-title { font-size: 13px; }
.about-cta-section { padding: 80px 24px; }
- .about-cta-title { font-size: 28px; }
- .about-cta-btn { width: 100%; max-width: 280px; justify-content: center; }
-
- .about-cta-buttons { flex-direction: column; align-items: center; width: 100%; }
-
+ .about-cta-title { font-size: 26px; }
+ .about-cta-desc { font-size: 13px; }
+ .about-cta-btn { width: 100%; max-width: 280px; justify-content: center; }
+ .about-cta-buttons { flex-direction: column; align-items: center; width: 100%; }
+ .about-cta-img { background-position: 20% center; background-size: cover; }
}
-
@keyframes about-cta-move {
0% { transform: translate(0%, 0%); }
50% { transform: translate(-10%, 8%); }
@@ -622,6 +650,7 @@ body{overflow-x:hidden;}
}
+
/* ════════════════════════════════
FlightControlPage — common.css 추가분
════════════════════════════════ */
diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx
index 7d7127f..b32c298 100644
--- a/src/pages/company/AboutPage.jsx
+++ b/src/pages/company/AboutPage.jsx
@@ -5,6 +5,7 @@ import FloatingKeywords from "../../components/FloatingKeywords";
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
+import TopButton from "../../components/TopButton";
gsap.registerPlugin(ScrollTrigger);
const heroRight =
- Contact -