Index: arms/html/pdService/content-container.html
===================================================================
diff -u -rb2515c105ed9e6b769c3b6556d45b2379d95776c -ra0c9382bf7b55b218fb092730043c323d803d758
--- arms/html/pdService/content-container.html	(.../content-container.html)	(revision b2515c105ed9e6b769c3b6556d45b2379d95776c)
+++ arms/html/pdService/content-container.html	(.../content-container.html)	(revision a0c9382bf7b55b218fb092730043c323d803d758)
@@ -464,19 +464,24 @@
 											</div>
 										</div>
 
-										<div id="product_detail_view_pdservice_detail_drawio_swiper" class="control-group" for="product_detail_view_pdservice_detail_drawio_swiper" style="display: none">
-											<label class="control-label font13">drawio 썸네일 :</label>
-											<div class="controls form-group input-group" style="margin-left: 180px;">
+
+										<div id="product_detail_view_pdservice_detail_drawio_swiper" class="control-group" for="product_detail_view_pdservice_detail_drawio_swiper" style="display: none; position: relative;">
+												<label class="control-label font13">drawio 썸네일 :</label>
+												<div class="controls form-group input-group" style="margin-left: 180px;">
 														<span class="input-group-addon">
 																<i class="glyphicon glyphicon-camera"></i>
 														</span>
-												<div class="swiper" id="product_detail_view_pdservice_detail_drawio_swiper_container">
-													<div class="swiper-wrapper"></div>
-													<div class="swiper-button-next"></div>
-													<div class="swiper-button-prev"></div>
-													<div class="swiper-pagination"></div>
+													<div class="swiper main-swiper" id="product_detail_view_pdservice_detail_drawio_swiper_container">
+														<div class="swiper-wrapper"></div>
+														<div class="swiper-button-next"></div>
+														<div class="swiper-button-prev"></div>
+														<div class="swiper-pagination"></div>
+													</div>
+													<div thumbsSlider="" class="swiper thumbnail-swiper" id="product_detail_view_pdservice_detail_drawio_swiper_container_thumbs">
+														<div class="swiper-wrapper">
+														</div>
+													</div>
 												</div>
-											</div>
 										</div>
 
 										<div class="control-group">
@@ -527,13 +532,15 @@
 													<span class="input-group-addon">
 															<i class="glyphicon glyphicon-camera"></i>
 													</span>
-													<div class="swiper" id="product_detail_update_pdservice_detail_drawio_swiper_container">
+													<div class="swiper main-swiper" id="product_detail_update_pdservice_detail_drawio_swiper_container">
 														<div class="swiper-wrapper"></div>
 														<div class="swiper-button-next"></div>
 														<div class="swiper-button-prev"></div>
 														<div class="swiper-pagination"></div>
 													</div>
-												</div>
+													<div thumbsSlider="" class="swiper thumbnail-swiper" id="product_detail_update_pdservice_detail_drawio_swiper_container_thumbs">
+														<div class="swiper-wrapper"></div>
+													</div>
 											</div>
 
 											<div class="control-group">
@@ -1151,12 +1158,15 @@
 								<span class="input-group-addon">
 										<i class="glyphicon glyphicon-camera"></i>
 								</span>
-								<div class="swiper" id="modal_product_detail_add_pdservice_detail_drawio_swiper_container">
+								<div class="swiper main-swiper" id="modal_product_detail_add_pdservice_detail_drawio_swiper_container">
 									<div class="swiper-wrapper"></div>
 									<div class="swiper-button-next"></div>
 									<div class="swiper-button-prev"></div>
 									<div class="swiper-pagination"></div>
 								</div>
+								<div thumbsSlider="" class="swiper thumbnail-swiper" id="modal_product_detail_add_pdservice_detail_drawio_swiper_container_thumbs">
+									<div class="swiper-wrapper"></div>
+								</div>
 							</div>
 						</div>
 
@@ -1301,12 +1311,15 @@
 								<span class="input-group-addon">
 										<i class="glyphicon glyphicon-camera"></i>
 								</span>
-								<div class="swiper" id="modal_product_detail_edit_pdservice_detail_drawio_swiper_container">
+								<div class="swiper main-swiper" id="modal_product_detail_edit_pdservice_detail_drawio_swiper_container">
 									<div class="swiper-wrapper"></div>
 									<div class="swiper-button-next"></div>
 									<div class="swiper-button-prev"></div>
 									<div class="swiper-pagination"></div>
 								</div>
+								<div thumbsSlider="" class="swiper thumbnail-swiper" id="modal_product_detail_edit_pdservice_detail_drawio_swiper_container_thumbs">
+									<div class="swiper-wrapper"></div>
+								</div>
 							</div>
 						</div>
 
@@ -1351,31 +1364,56 @@
 	<!-- /.modal-dialog -->
 </div>
 <style>
-    .swiper {
+    .main-swiper {
         width: 200px;
         height: 200px;
-				margin-left: 0;
-				margin-right: 0;
+        position: relative;
+        margin-left: 0;
+        margin-right: 0;
     }
 
+    .thumbnail-swiper {
+        width: 200px;
+        height: 50px;
+        margin-left: 0;
+        margin-right: 0;
+        padding: 10px 0;
+    }
+
     .swiper-slide {
         text-align: center;
         font-size: 18px;
-        background: #fff;
-        //background: #f0f0f0; /* 변경할 배경 색상 */
-
         display: flex;
         justify-content: center;
         align-items: center;
+        background-size: cover;
+        background: #fff center;
+        width: 100%;
+        height: 100%;
     }
 
     .swiper-slide img {
-        //display: block;
-        width: 200px;
-        height: 200px;
+        display: block;
+        width: 100%;
+        height: 100%;
         object-fit: contain;
     }
 
+    .thumbnail-swiper .swiper-slide img {
+        width: 25%;
+				opacity: 0.7;
+    }
+    .thumbnail-swiper .swiper-slide {
+        width: 25%;
+        margin-right: 2px;
+        margin-left: 2px;
+        opacity: 0.7;
+    }
+
+    .thumbnail-swiper .swiper-slide-thumb-active {
+        opacity: 1;
+    }
+
     .swiper-pagination-fraction,
     .swiper-pagination-fraction .swiper-pagination-current,
     .swiper-pagination-fraction .swiper-pagination-total {
Index: arms/js/pdService.js
===================================================================
diff -u -r68b497a67da5f2cdbf10f8297658746940c3770b -ra0c9382bf7b55b218fb092730043c323d803d758
--- arms/js/pdService.js	(.../pdService.js)	(revision 68b497a67da5f2cdbf10f8297658746940c3770b)
+++ arms/js/pdService.js	(.../pdService.js)	(revision a0c9382bf7b55b218fb092730043c323d803d758)
@@ -753,47 +753,69 @@
 }
 
 function addImageToSwiper(imageSrcArray, swiperContainerId) {
+	var mainSwiperContainer = document.querySelector('#' + swiperContainerId + ' .swiper-wrapper');
+	var thumbsSwiperContainer = document.querySelector('#' + swiperContainerId + '_thumbs' + ' .swiper-wrapper');
+
 	var swiperInstance = document.querySelector('#' + swiperContainerId).swiper;
+	var thumbsSwiperInstance = document.querySelector('#' + swiperContainerId + '_thumbs').swiper;
 
-	if (!swiperInstance) {
-		swiperInstance = new Swiper('#' + swiperContainerId, {
-			pagination: {
-				el: '.swiper-pagination',
-				// clickable: true,
-				type: "fraction",
-			},
-				slidesPerView: 1,
-				spaceBetween: 0,
-			navigation: {
-				nextEl: '.swiper-button-next',
-				prevEl: '.swiper-button-prev',
-			},
-		});
-	} else {
+	if (swiperInstance) {
 		swiperInstance.removeAllSlides();
 	}
 
+	if (thumbsSwiperInstance) {
+		thumbsSwiperInstance.removeAllSlides();
+	}
+
 	for (var i = 0; i < imageSrcArray.length; i++) {
-		var newSlideElement = document.createElement('div');
+		var mainSlide = document.createElement('div');
+		mainSlide.className = 'swiper-slide';
+		var mainImage = document.createElement('img');
+		mainImage.src = imageSrcArray[i];
+		mainSlide.appendChild(mainImage);
+		mainSwiperContainer.appendChild(mainSlide);
 
-		newSlideElement.className = 'swiper-slide';
+		var thumbsSlide = document.createElement('div');
+		thumbsSlide.className = 'swiper-slide';
+		var thumbsImage = document.createElement('img');
+		thumbsImage.src = imageSrcArray[i];
+		thumbsSlide.appendChild(thumbsImage);
+		thumbsSwiperContainer.appendChild(thumbsSlide);
+	}
 
-		var newImageElement = document.createElement('img');
+	thumbsSwiperInstance = new Swiper('#' + swiperContainerId + '_thumbs', {
+		spaceBetween: 0,
+		// slidesPerView: imageSrcArray.length,
+		slidesPerView: 4,
+		freeMode: true,
+		watchSlidesVisibility: true,
+		watchSlidesProgress: true,
+	});
 
-		newImageElement.src = imageSrcArray[i];
+	swiperInstance = new Swiper('#' + swiperContainerId, {
+		spaceBetween: 10,
+		pagination: {
+			el: '.swiper-pagination',
+			// clickable: true,
+			type: "fraction",
+		},
+		slidesPerView: 1,
+		navigation: {
+			nextEl: '.swiper-button-next',
+			prevEl: '.swiper-button-prev',
+		},
+		thumbs: {
+			swiper: thumbsSwiperInstance,
+		},
+	});
 
-		newSlideElement.appendChild(newImageElement);
-
-		swiperInstance.appendSlide(newSlideElement);
-	}
-
-	var slides = document.querySelectorAll('#' + swiperContainerId + ' .swiper-slide');
+	var slides = document.querySelectorAll("#" + swiperContainerId + " .swiper-slide");
 	if (slides.length === 1) {
-		document.querySelector('#' + swiperContainerId + ' .swiper-pagination').style.display = 'block';
-		document.querySelector('#' + swiperContainerId + ' .swiper-button-next').style.display = 'block';
-		document.querySelector('#' + swiperContainerId + ' .swiper-button-prev').style.display = 'block';
-		swiperInstance.navigation.nextEl.classList.add('swiper-button-disabled');
-		swiperInstance.navigation.prevEl.classList.add('swiper-button-disabled');
+		document.querySelector("#" + swiperContainerId + " .swiper-pagination").style.display = "block";
+		document.querySelector("#" + swiperContainerId + " .swiper-button-next").style.display = "block";
+		document.querySelector("#" + swiperContainerId + " .swiper-button-prev").style.display = "block";
+		swiperInstance.navigation.nextEl.classList.add("swiper-button-disabled");
+		swiperInstance.navigation.prevEl.classList.add("swiper-button-disabled");
 	}
 }