Index: arms/css/index.css
===================================================================
diff -u -r6347a402ea5907bff6bbb9c93c2176e16dd04be0 -rc4e736c93c6951941915033802c546c564364bc3
--- arms/css/index.css	(.../index.css)	(revision 6347a402ea5907bff6bbb9c93c2176e16dd04be0)
+++ arms/css/index.css	(.../index.css)	(revision c4e736c93c6951941915033802c546c564364bc3)
@@ -72,10 +72,11 @@
 section .inner {
     width: 100%;
     height: 100%;
-    overflow-y: hidden;
+    overflow-y: auto;
 }
 section .bg {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     position: absolute;
@@ -84,6 +85,7 @@
     top: 0;
     background-size: cover;
     background-position: center;
+    background-attachment: scroll;
 }
 section .bg h2 {
     z-index: 2;
@@ -190,6 +192,7 @@
     background-color: rgba(229, 96, 59, 0.5);
 }
 
+
 /*--------------------------------------------------------------
 # 버튼 에니메이션
 --------------------------------------------------------------*/
Index: arms/html/pdService
===================================================================
diff -u -r6347a402ea5907bff6bbb9c93c2176e16dd04be0 -rc4e736c93c6951941915033802c546c564364bc3
--- arms/html/pdService	(.../pdService)	(revision 6347a402ea5907bff6bbb9c93c2176e16dd04be0)
+++ arms/html/pdService	(.../pdService)	(revision c4e736c93c6951941915033802c546c564364bc3)
@@ -511,10 +511,9 @@
 
 <section class="second">
     <div class="outer">
-        <div class="inner">
-            <div class="bg">
+        <div class="inner bg">
 
-                <div    class="wrap"
+            <div    class="wrap"
                         style="margin-left: 0px; width: 100% !important; height: auto; top: auto;">
 
                     <div    class="content container">
@@ -756,17 +755,15 @@
 
                 </div>
 
-            </div>
         </div>
     </div>
 </section>
 
 <section class="third">
     <div class="outer">
-        <div class="inner">
-            <div class="bg">
+        <div class="inner bg">
 
-                <div    class="wrap"
+            <div    class="wrap"
                         style="margin-left: 0px; width: 100% !important; height: auto; top: auto;">
 
                     <div    class="content container">
@@ -1008,17 +1005,15 @@
 
                 </div>
 
-            </div>
         </div>
     </div>
 </section>
 
 <section class="fourth">
     <div class="outer">
-        <div class="inner">
-            <div class="bg">
+        <div class="inner bg">
 
-                <div    class="wrap"
+            <div    class="wrap"
                         style="margin-left: 0px; width: 100% !important; height: auto; top: auto;">
 
                     <div    class="content container">
@@ -1260,17 +1255,15 @@
 
                 </div>
 
-            </div>
         </div>
     </div>
 </section>
 
 <section class="fifth">
     <div class="outer">
-        <div class="inner">
-            <div class="bg">
+        <div class="inner bg">
 
-                <div    class="wrap"
+            <div    class="wrap"
                         style="margin-left: 0px; width: 100% !important; height: auto; top: auto;">
 
                     <div    class="content container">
@@ -1512,17 +1505,15 @@
 
                 </div>
 
-            </div>
         </div>
     </div>
 </section>
 
 <section class="sixth">
     <div class="outer">
-        <div class="inner">
-            <div class="bg">
+        <div class="inner bg">
 
-                <div    class="wrap"
+            <div    class="wrap"
                         style="margin-left: 0px; width: 100% !important; height: auto; top: auto;">
 
                     <div    class="content container">
@@ -1764,7 +1755,6 @@
 
                 </div>
 
-            </div>
         </div>
     </div>
 </section>
Index: arms/js/index.js
===================================================================
diff -u -r9f29174f63bd40f6435644752d0d80f2044a8ce3 -rc4e736c93c6951941915033802c546c564364bc3
--- arms/js/index.js	(.../index.js)	(revision 9f29174f63bd40f6435644752d0d80f2044a8ce3)
+++ arms/js/index.js	(.../index.js)	(revision c4e736c93c6951941915033802c546c564364bc3)
@@ -13,72 +13,79 @@
 gsap.set(innerWrappers, { yPercent: -100 });
 
 function gotoSection(index, direction) {
-	animating = true;
+  animating = true;
 
-	const fromTop = direction === -1;
-	const dFactor = fromTop ? -1 : 1;
-	const tl = gsap.timeline({
-		defaults: { duration: 1, ease: 'power1.inOut' },
-		onComplete: () => (animating = false),
-	});
+  const fromTop = direction === -1;
+  const dFactor = fromTop ? -1 : 1;
+  const tl = gsap.timeline({
+    defaults: { duration: 1, ease: 'power1.inOut' },
+    onComplete: () => (animating = false),
+  });
 
-	if (currentIndex >= 0) {
-		gsap.set(sections[currentIndex], { zIndex: 0 });
+  if (currentIndex >= 0) {
+    gsap.set(sections[currentIndex], { zIndex: 0 });
 
-		tl.to(images[currentIndex], { yPercent: -15 * dFactor })
-			.set(sections[currentIndex], { autoAlpha: 0 })
-			.fromTo(
-				images[currentIndex],
-				{ scale: 1, autoAlpha: 1 },
-				{ scale: 0.5, autoAlpha: 0 },
-				0
-			);
+    tl.to(images[currentIndex], { yPercent: -15 * dFactor })
+      .set(sections[currentIndex], { autoAlpha: 0 })
+      .fromTo(
+        images[currentIndex],
+        { scale: 1, autoAlpha: 1 },
+        { scale: 0.5, autoAlpha: 0 },
+        0
+      );
 
-		dots[currentIndex].classList.remove('active');
-	}
+    dots[currentIndex].classList.remove('active');
+  }
 
-	gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });
-	gsap.set(images[index], { scale: 1, autoAlpha: 1 });
+  gsap.set(sections[index], { autoAlpha: 1, zIndex: 1 });
+  gsap.set(images[index], { scale: 1, autoAlpha: 1 });
 
-	tl.fromTo(
-		[outerWrappers[index], innerWrappers[index]],
-		{
-			yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor),
-		},
-		{
-			yPercent: 0,
-		},
-		0
-	).fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0);
+  tl.fromTo(
+    [outerWrappers[index], innerWrappers[index]],
+    {
+      yPercent: (i) => (i ? -100 * dFactor : 100 * dFactor),
+    },
+    {
+      yPercent: 0,
+    },
+    0
+  ).fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0);
 
-	dots[index].classList.add('active');
+  dots[index].classList.add('active');
 
-	currentIndex = index;
+  currentIndex = index;
 }
 
 Observer.create({
-	type: 'wheel,touch,pointer',
-	wheelSpeed: -1,
-	onDown: () => {
-		if (animating) return;
-		if (currentIndex - 1 < 0) return;
+  type: 'wheel,touch,pointer',
+  wheelSpeed: -1,
+  onDown: () => {
+    if (animating) return;
+    if (currentIndex - 1 < 0) return;
+    if (sections[currentIndex].querySelector('.inner').scrollTop > 0) return;
 
-		gotoSection(currentIndex - 1, -1);
-	},
-	onUp: () => {
-		if (animating) return;
-		if (currentIndex + 1 >= sections.length) return;
+    gotoSection(currentIndex - 1, -1);
+  },
+  onUp: () => {
+    if (animating) return;
+    if (currentIndex + 1 >= sections.length) return;
+    if (
+      sections[currentIndex].querySelector('.inner').scrollTop +
+        sections[currentIndex].querySelector('.inner').offsetHeight <
+      sections[currentIndex].querySelector('.inner').scrollHeight
+    )
+      return;
 
-		gotoSection(currentIndex + 1, 1);
-	},
-	tolerance: 10,
-	preventDefault: true,
+    gotoSection(currentIndex + 1, 1);
+  },
+  tolerance: 10,
+  preventDefault: false,
 });
 
 [].forEach.call(document.querySelectorAll('.btn'), (btn, i) => {
-	btn.addEventListener('click', () =>
-		gotoSection(i, currentIndex > i ? -1 : 1)
-	);
+  btn.addEventListener('click', () =>
+    gotoSection(i, currentIndex > i ? -1 : 1)
+  );
 });
 
 gotoSection(0, 1);