Index: arms/css/index.css
===================================================================
diff -u -rc0858004fdc143b1c3a1cdd075c6ebe3b9e406ab -r2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc
--- arms/css/index.css	(.../index.css)	(revision c0858004fdc143b1c3a1cdd075c6ebe3b9e406ab)
+++ arms/css/index.css	(.../index.css)	(revision 2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc)
@@ -195,14 +195,14 @@
     padding-right: 0;
 }
 
-.btn {
+.section-scroll-dots-navigation .list .dot > .dot-btn {
     border: none;
     padding: 5px;
     border-radius: 50%;
     background-color: rgba(51, 51, 51, 0.5);
 }
 
-.list li.active > .btn {
+.section-scroll-dots-navigation .list .dot.active > .dot-btn {
     background-color: rgba(229, 96, 59, 0.5);
 }
 
Index: arms/html/pdService
===================================================================
diff -u -rc0858004fdc143b1c3a1cdd075c6ebe3b9e406ab -r2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc
--- arms/html/pdService	(.../pdService)	(revision c0858004fdc143b1c3a1cdd075c6ebe3b9e406ab)
+++ arms/html/pdService	(.../pdService)	(revision 2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc)
@@ -1757,27 +1757,27 @@
 <div class="section-scroll-dots-navigation">
     <ul class="list list-unstyled">
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
 
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
 
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
 
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
 
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
 
         <li class="dot">
-            <button type="button" class="btn"></button>
+            <button type="button" class="dot-btn"></button>
         </li>
     </ul>
 </div>
Index: arms/js/index.js
===================================================================
diff -u -rc4e736c93c6951941915033802c546c564364bc3 -r2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc
--- arms/js/index.js	(.../index.js)	(revision c4e736c93c6951941915033802c546c564364bc3)
+++ arms/js/index.js	(.../index.js)	(revision 2429ae7b09dac608bb81a5a59cbc4e57f1aa04dc)
@@ -1,10 +1,10 @@
 gsap.registerPlugin(Observer);
 
-const sections = document.querySelectorAll('section');
-const images = document.querySelectorAll('.bg');
-const dots = document.querySelectorAll('.dot');
-const outerWrappers = gsap.utils.toArray('.outer');
-const innerWrappers = gsap.utils.toArray('.inner');
+const sections = document.querySelectorAll("section");
+const images = document.querySelectorAll(".bg");
+const dots = document.querySelectorAll(".dot");
+const outerWrappers = gsap.utils.toArray(".outer");
+const innerWrappers = gsap.utils.toArray(".inner");
 
 let animating;
 let currentIndex = -1;
@@ -13,88 +13,82 @@
 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);
+	console.log(index);
 
-  dots[index].classList.add('active');
+	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);
 
-  currentIndex = index;
+	dots[index].classList.add("active");
+
+	currentIndex = index;
 }
 
 Observer.create({
-  type: 'wheel,touch,pointer',
-  wheelSpeed: -1,
-  onDown: () => {
-    if (animating) return;
-    if (currentIndex - 1 < 0) return;
-    if (sections[currentIndex].querySelector('.inner').scrollTop > 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;
-    if (
-      sections[currentIndex].querySelector('.inner').scrollTop +
-        sections[currentIndex].querySelector('.inner').offsetHeight <
-      sections[currentIndex].querySelector('.inner').scrollHeight
-    )
-      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: false,
+		gotoSection(currentIndex + 1, 1);
+	},
+	tolerance: 10,
+	preventDefault: false
 });
 
-[].forEach.call(document.querySelectorAll('.btn'), (btn, i) => {
-  btn.addEventListener('click', () =>
-    gotoSection(i, currentIndex > i ? -1 : 1)
-  );
+[].forEach.call(document.querySelector(".section-scroll-dots-navigation").querySelectorAll(".dot-btn"), (btn, i) => {
+	btn.addEventListener("click", () => gotoSection(i, currentIndex > i ? -1 : 1));
 });
 
 gotoSection(0, 1);
 
 $(function () {
 	// 사이드 메뉴 색상 설정
-	$('.widget').widgster();
+	$(".widget").widgster();
 });
 
-
 // original: https://codepen.io/BrianCross/pen/PoWapLP
 // horizontal version: https://codepen.io/GreenSock/pen/xxWdeMK