Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -rfd115e6312ba98f4f905333ebd8578db24d23194 -rf0cb38c21240d3e2c64db387f85a71c60e25f2a6
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision fd115e6312ba98f4f905333ebd8578db24d23194)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision f0cb38c21240d3e2c64db387f85a71c60e25f2a6)
@@ -2740,6 +2740,7 @@
 .visual-mobile {
 	display: none;
 	height: calc(100vh - 80px);
+	height: calc((var(--vh, 1vh) * 100) - 80px);
 	justify-content: center;
 	align-items: center;
 }
@@ -2749,6 +2750,7 @@
 	width: 100%;
 	max-width: 650px;
 	aspect-ratio: 4 / 3;
+	margin-bottom: 80px;
 }
 
 .content-item {
@@ -2852,6 +2854,7 @@
 
 	.navi-toggle {
 		display: block;
+		padding: 0;
 		position: absolute;
 		top: 25px;
 		right: 15px;
@@ -2865,6 +2868,11 @@
 		border-radius: 50px;
 		color: #fff;
 	}
+	.navi-toggle.active {
+		top: 20px;
+		right: 10px;
+		font-size: 40px;
+	}
 
 	.visual-web {
 		display: none;
Index: arms/html/pdService
===================================================================
diff -u -rfd115e6312ba98f4f905333ebd8578db24d23194 -rf0cb38c21240d3e2c64db387f85a71c60e25f2a6
--- arms/html/pdService	(.../pdService)	(revision fd115e6312ba98f4f905333ebd8578db24d23194)
+++ arms/html/pdService	(.../pdService)	(revision f0cb38c21240d3e2c64db387f85a71c60e25f2a6)
@@ -588,20 +588,40 @@
 		</footer>
 
 		<script>
-			const navToggle = document.querySelector(".navi-toggle");
+			let vh = window.innerHeight * 0.01;
+			const visualMobile = document.querySelector(".visual-mobile");
 			const navWrap = document.querySelector(".navi-wrap");
-			navToggle.onclick = function clicked(e) {
-				console.log("############ :::", e.target.classList.contains("bi-list"));
-				if (e.target.classList.contains("bi-list")) {
-					e.target.classList.remove("bi-list");
-					e.target.classList.add("bi-x");
+			const navToggle = document.querySelector(".navi-toggle");
+			const toggleIcon = document.querySelector(".mobile-nav-toggle");
+
+			function isMobile() {
+				return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+			}
+
+			function btnNavToggle() {
+				if (toggleIcon.classList.contains("bi-list")) {
+					navToggle.classList.add("active");
+					toggleIcon.classList.remove("bi-list");
+					toggleIcon.classList.add("bi-x");
 					navWrap.classList.add("on");
 				} else {
-					e.target.classList.remove("bi-x");
-					e.target.classList.add("bi-list");
+					navToggle.classList.remove("active");
+					toggleIcon.classList.remove("bi-x");
+					toggleIcon.classList.add("bi-list");
 					navWrap.classList.remove("on");
 				}
-			};
+			}
+
+			visualMobile.style.setProperty("--vh", `${vh}px`);
+			navToggle.addEventListener("click", btnNavToggle);
+			navWrap.addEventListener("click", btnNavToggle);
+
+			if (!isMobile()) {
+				navToggle.classList.remove("active");
+				toggleIcon.classList.remove("bi-x");
+				toggleIcon.classList.add("bi-list");
+				navWrap.classList.remove("on");
+			}
 		</script>
 	</body>
 </html>