diff --git a/layers/templates/GrDetail01/index.vue b/layers/templates/GrDetail01/index.vue
index a20f063..f15dd24 100644
--- a/layers/templates/GrDetail01/index.vue
+++ b/layers/templates/GrDetail01/index.vue
@@ -124,11 +124,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
   @apply flex items-center;
 }
 .item-bullet {
-  @apply block w-3 h-3 rounded-full transition-all duration-300;
+  @apply block w-3 h-3 rounded-full transition-[background] duration-300 ease-in-out;
   background-color: var(--pagination-disabled);
 }
 .item-title {
-  @apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium md:block;
+  @apply hidden absolute -bottom-[46px] left-1/2 -translate-x-1/2 whitespace-nowrap text-sm font-medium transition-[color] duration-300 ease-in-out md:block;
   color: var(--pagination-disabled);
 }
 .progress-bar {
@@ -141,9 +141,11 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
 }
 
 /* 활성화 상태 (현재 슬라이드) */
+.btn-pagination:hover .item-bullet,
 .is-active .item-bullet {
   background-color: var(--pagination-active);
 }
+.btn-pagination:hover .item-title,
 .is-active .item-title {
   color: var(--pagination-active);
 }