diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx
index 4aa47b4..8985766 100644
--- a/src/components/main/MainUam.jsx
+++ b/src/components/main/MainUam.jsx
@@ -11,6 +11,7 @@ function MainAirspaceTransition() {
const lineRef = useRef([]);
const dotRef = useRef(null);
const uamImageRef = useRef(null); // ← 추가
+ const isMobile = window.innerWidth <= 768;
useEffect(() => {
const ctx = gsap.context(() => {
@@ -19,7 +20,12 @@ function MainAirspaceTransition() {
gsap.set(dotRef.current, { x: -320, opacity: 0, scale: 1 });
gsap.set(".airspace-uam-content", { opacity: 0, y: 36 });
gsap.set(uamImageRef.current, { opacity: 0 }); // ← 추가
-
+ // dot 초기 x 이동거리
+ gsap.set(dotRef.current, {
+ x: isMobile ? -160 : -320,
+ opacity: 0,
+ scale: 1,
+ });
const tl = gsap.timeline({
scrollTrigger: {
trigger: sectionRef.current,
@@ -72,11 +78,10 @@ function MainAirspaceTransition() {
tl.to(dotRef.current, {
x: 0,
y: 0,
- scale: 52,
+ scale: isMobile ? 42 : 52,
duration: 1.2,
ease: "power2.inOut",
});
-
// airspace-uam-content + UAM 이미지 동시 등장 ← 수정
tl.to(
[".airspace-uam-content", uamImageRef.current],
@@ -102,7 +107,11 @@ function MainAirspaceTransition() {
UAM SYSTEM
-
도심 항공 네트워크로
+
+ 도심 항공
+
+ 네트워크로
+
diff --git a/src/css/main.css b/src/css/main.css
index ddc35c0..0cca8e6 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -221,10 +221,18 @@ body{overflow-x:hidden;}
.airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;}
.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(58,64,129,.28));animation:float-uam 5s ease-in-out infinite;will-change:transform;}
-
-@media (max-width:768px){.airspace-panel{padding:0 28px;}
-.airspace-panel h2{font-size:44px;}
-.airspace-line{left:28px;}
+.airspace-mobile-br{display:none;}
+
+@media (max-width:768px){
+ .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);}
+ .airspace-dot-uam{width:150px;}
+ .airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;}
+ .airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
+ .airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;}
+ .airspace-dot-image img{width: 16px;height:16%}
+ .airspace-dot-image{
+ transform:translateX(-5%);
+ }
}
@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}