diff --git a/layers/assets/css/components/_base-content.css b/layers/assets/css/components/_base-content.css
index d76c9f4..a77e595 100644
--- a/layers/assets/css/components/_base-content.css
+++ b/layers/assets/css/components/_base-content.css
@@ -18,6 +18,7 @@
   .use-base table {
     @apply w-full border-collapse;
   }
+  .use-base .fr-alternate-rows tr:nth-child(even),
   .use-base thead,
   .use-base tfoot {
     @apply bg-[#FAFAFA];
@@ -73,7 +74,11 @@
   }
 
   .use-base img {
-    @apply max-w-full h-auto my-4;
+    @apply max-w-full h-auto;
+  }
+
+  .use-base iframe {
+    @apply max-w-full h-auto aspect-video;
   }
 
   .use-base pre {
diff --git a/layers/assets/css/components/_layout.css b/layers/assets/css/components/_layout.css
index c2d3c1a..dff5bce 100644
--- a/layers/assets/css/components/_layout.css
+++ b/layers/assets/css/components/_layout.css
@@ -36,9 +36,9 @@
     @apply line-clamp-2 text-[16px] font-[500] tracking-[-0.48px] leading-[24px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.72px] md:line-clamp-1 md:text-[24px] md:leading-[34px];
   }
   .title-sm {
-    @apply text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:text-[20px] md:leading-[30px] md:tracking-[-0.6px];
+    @apply line-clamp-4 text-[15px] font-[500] leading-[24px] tracking-[-0.45px] drop-shadow-[0_2px_2px_rgba(0,0,0,0.6)] md:tracking-[-0.6px] md:line-clamp-3 md:text-[20px] md:leading-[30px];
   }
   .title-xs {
-    @apply text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
+    @apply line-clamp-1 text-[14px] font-[500] leading-[20px] tracking-[-0.42px] md:text-[18px] md:leading-[26px] md:tracking-[-0.54px];
   }
 }
diff --git a/layers/assets/css/components/_scrollbar.css b/layers/assets/css/components/_scrollbar.css
index 66b8c4f..5388f11 100644
--- a/layers/assets/css/components/_scrollbar.css
+++ b/layers/assets/css/components/_scrollbar.css
@@ -2,11 +2,11 @@ body ::-webkit-scrollbar-track {
   @apply bg-transparent;
 }
 body ::-webkit-scrollbar {
-  @apply w-5;
+  @apply w-[12px] h-[12px];
 }
 
 body ::-webkit-scrollbar-thumb {
-  @apply w-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-8;
+  @apply w-1 h-1 bg-[#D9D9D9] rounded-full bg-clip-padding border-solid border-transparent border-[4px];
 }
 
 .custom-theme-scrollbar::-webkit-scrollbar-thumb {
diff --git a/layers/assets/css/components/_splide.css b/layers/assets/css/components/_splide.css
index 8aae5ef..dbda97b 100644
--- a/layers/assets/css/components/_splide.css
+++ b/layers/assets/css/components/_splide.css
@@ -23,7 +23,7 @@
   }
   .splide-arrow {
     @apply absolute top-1/2 w-[40px] h-[40px] bg-cover bg-center bg-no-repeat -translate-y-1/2 cursor-pointer z-[5]
-    md:w-[40px] md:h-[40px]
+    md:w-[48px] md:h-[48px]
     after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:rounded-full after:bg-white after:transition-opacity after:duration-300 after:ease-in-out after:opacity-0
     hover:after:opacity-10;
   }
diff --git a/layers/components/atoms/loading/Full.vue b/layers/components/atoms/loading/Full.vue
index ef034d4..dfcee82 100644
--- a/layers/components/atoms/loading/Full.vue
+++ b/layers/components/atoms/loading/Full.vue
@@ -18,7 +18,7 @@ const { fullLoading } = storeToRefs(loadingStore)
   @apply fixed inset-0 bg-black pt-[96px] flex items-center justify-center sm:pt-[112px] z-[150];
 }
 .spinner {
-  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
+  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
 }
 
 [data-theme='light'] {
@@ -26,7 +26,7 @@ const { fullLoading } = storeToRefs(loadingStore)
     @apply bg-white/90;
   }
   .spinner {
-    @apply bg-[url('/images/common/publisning_template_loader_white.png')];
+    @apply bg-[url('/images/common/publisning_template_loader_black.png')];
   }
 }
 </style>
diff --git a/layers/components/atoms/loading/Local.vue b/layers/components/atoms/loading/Local.vue
index 50000f8..0a4ec5b 100644
--- a/layers/components/atoms/loading/Local.vue
+++ b/layers/components/atoms/loading/Local.vue
@@ -28,12 +28,12 @@ const canTeleport = (localId: string) => {
   @apply absolute inset-0  flex items-center justify-center z-[5];
 }
 .spinner {
-  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
+  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
 }
 
 [data-theme='light'] {
   .spinner {
-    @apply bg-[url('/images/common/publisning_template_loader_white.png')];
+    @apply bg-[url('/images/common/publisning_template_loader_black.png')];
   }
 }
 </style>
diff --git a/layers/components/blocks/Button/Sns.vue b/layers/components/blocks/Button/Sns.vue
index 91e87ea..4f9786e 100644
--- a/layers/components/blocks/Button/Sns.vue
+++ b/layers/components/blocks/Button/Sns.vue
@@ -43,17 +43,20 @@ const handleCopy = async () => {
 
 <template>
   <div v-if="Object.keys(snsList).length > 0" class="sns-container">
-    <AtomsButtonCircle
-      class="btn-sns"
-      sr-only="sns"
-      :style="{ backgroundColor: snsBackgroundColor }"
-      @click="handleMouseEnter"
-    >
-      <AtomsIconsShareLine class="icon-share" />
-    </AtomsButtonCircle>
+    <transition name="fade">
+      <AtomsButtonCircle
+        v-show="!showSnsList"
+        class="btn-sns"
+        sr-only="sns"
+        :style="{ backgroundColor: snsBackgroundColor }"
+        @click="handleMouseEnter"
+      >
+        <AtomsIconsShareLine class="icon-share" />
+      </AtomsButtonCircle>
+    </transition>
     <transition name="fade">
       <div
-        v-if="showSnsList"
+        v-show="showSnsList"
         class="sns-list"
         :style="{ backgroundColor: snsBackgroundColor }"
       >
@@ -96,13 +99,16 @@ const handleCopy = async () => {
 </template>
 
 <style scoped>
+.sns-container {
+  @apply relative h-[40px] md:h-[48px];
+}
+
 .btn-sns:hover .icon-share {
   @apply fill-white;
 }
 
 .sns-list {
-  @apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full
-  h-[40px] md:h-[48px] pl-4 pr-3
+  @apply absolute bottom-0 right-0 flex items-center justify-center gap-4 rounded-full h-full pl-4 pr-3
   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full;
 }
 .sns-item {
diff --git a/layers/components/blocks/DatePicker.vue b/layers/components/blocks/DatePicker.vue
index 2cf9dc2..68c82a6 100644
--- a/layers/components/blocks/DatePicker.vue
+++ b/layers/components/blocks/DatePicker.vue
@@ -626,7 +626,7 @@ body .date-picker-menu-wrap .dp__calendar_item {
   padding: 2px 4px !important;
 }
 body .date-picker-menu-wrap .dp__cell_inner {
-  padding: 8px !important;
+  padding: 0px !important;
   border-radius: 100% !important;
   outline: none !important;
   border: none !important;
diff --git a/layers/components/blocks/modal/Content.vue b/layers/components/blocks/modal/Content.vue
index c3dc606..da57633 100644
--- a/layers/components/blocks/modal/Content.vue
+++ b/layers/components/blocks/modal/Content.vue
@@ -151,6 +151,6 @@ watch(
 }
 
 .content-tex {
-  @apply overflow-y-auto mb-4 px-6 sm:mb-6 sm:px-8;
+  @apply overflow-y-scroll mb-4 pl-6 pr-3 sm:mb-6 sm:pl-8 sm:pr-5;
 }
 </style>
diff --git a/layers/components/blocks/slide/CenterFocus.vue b/layers/components/blocks/slide/CenterFocus.vue
index ebccaa2..076bc04 100644
--- a/layers/components/blocks/slide/CenterFocus.vue
+++ b/layers/components/blocks/slide/CenterFocus.vue
@@ -125,25 +125,34 @@ const handleMove = (
   width: var(--banner-width-mo);
   height: var(--banner-height-mo-active);
   margin-right: var(--banner-gap-mo);
-  opacity: 0.5;
-}
-.center-focus:deep(.splide__slide) .slide-inner {
-  width: var(--banner-width-mo);
-  height: var(--banner-height-mo);
-  opacity: 0.5;
+  transition: transform 0.6s ease-out;
+  opacity: 0.3;
 }
 .center-focus:deep(.splide__slide.is-active) {
   width: var(--banner-width-mo-container);
+}
+.center-focus:deep(.splide__slide.is-active),
+.center-focus:deep(.splide__slide.is-next),
+.center-focus:deep(.splide__slide.is-prev) {
   opacity: 1;
 }
+
+.center-focus:deep(.splide__slide) .slide-inner {
+  width: var(--banner-width-mo);
+  height: var(--banner-height-mo);
+  background-color: #191919;
+  transition: all 0.6s ease-out;
+}
 .center-focus:deep(.splide__slide.is-active) .slide-inner {
   width: var(--banner-width-mo-active);
   height: var(--banner-height-mo-active);
-  opacity: 1;
-  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.center-focus:deep(.splide__slide.is-next),
-.center-focus:deep(.splide__slide.is-prev) {
+
+.center-focus:deep(.splide__slide) .slide-inner .inner-content {
+  opacity: 0.5;
+  transition: all 0.6s ease-out;
+}
+.center-focus:deep(.splide__slide.is-active) .slide-inner .inner-content {
   opacity: 1;
 }
 
diff --git a/layers/components/blocks/slide/CenterHighlight.vue b/layers/components/blocks/slide/CenterHighlight.vue
index c28c0ac..3443c9b 100644
--- a/layers/components/blocks/slide/CenterHighlight.vue
+++ b/layers/components/blocks/slide/CenterHighlight.vue
@@ -131,6 +131,7 @@ const handleMove = (
 .center-highlight:deep(.splide__slide) .slide-inner {
   width: var(--banner-width-mo);
   height: var(--banner-height-mo);
+  transition: all 0.6s ease-out;
 }
 .center-highlight:deep(.splide__slide.is-active) {
   width: var(--banner-width-mo-container);
@@ -138,7 +139,6 @@ const handleMove = (
 .center-highlight:deep(.splide__slide.is-active) .slide-inner {
   width: var(--banner-width-mo-active);
   height: var(--banner-height-mo-active);
-  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* PC 스타일 */
diff --git a/layers/components/blocks/slide/Thumbnail.vue b/layers/components/blocks/slide/Thumbnail.vue
index e4de38b..af68031 100644
--- a/layers/components/blocks/slide/Thumbnail.vue
+++ b/layers/components/blocks/slide/Thumbnail.vue
@@ -173,8 +173,6 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.thumbnail-carousel {
-}
 .thumbnail-carousel:deep(img) {
   @apply w-full h-full object-cover;
 }
diff --git a/layers/components/layouts/EventNavigation.vue b/layers/components/layouts/EventNavigation.vue
index 92a3217..20d5970 100644
--- a/layers/components/layouts/EventNavigation.vue
+++ b/layers/components/layouts/EventNavigation.vue
@@ -96,7 +96,7 @@ onMounted(async () => {
   md:p-8 md:pt-6 md:pr-4;
 }
 .navigation-list {
-  @apply flex flex-col gap-4 h-full overflow-y-auto rounded-[20px] p-4 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out;
+  @apply flex flex-col gap-4 h-full overflow-y-scroll rounded-[20px] p-4 pr-1 bg-[rgba(25,25,25,0.5)] shadow-[0_2px_4px_0_rgba(0,0,0,0.06)] backdrop-blur-[25px] transition-opacity duration-300 ease-in-out;
 }
 .item-thumbnail {
   @apply overflow-hidden relative w-[148px] h-[75px] rounded-[10px]
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 8550e1d..28421ec 100644
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -119,7 +119,7 @@ onMounted(() => {
   @apply relative pt-[48px] md:pt-[64px];
 }
 .utile-wrap {
-  @apply fixed flex flex-col z-[100]
+  @apply fixed flex flex-col items-end z-[100]
   bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
 }
 .utile-wrap.is-stop {
diff --git a/layers/components/widgets/modal/Preregist.vue b/layers/components/widgets/modal/Preregist.vue
index 8462656..af83805 100644
--- a/layers/components/widgets/modal/Preregist.vue
+++ b/layers/components/widgets/modal/Preregist.vue
@@ -308,7 +308,7 @@ defineExpose({
             <!-- Marketing Detail Content -->
             <div
               v-if="isExpandedMarketing"
-              class="mt-4 max-h-[160px] overflow-y-auto rounded-lg bg-white/[0.04] px-4 py-3 custom-theme-scrollbar"
+              class="mt-4 max-h-[160px] overflow-y-scroll rounded-lg bg-white/[0.04] pl-4 pr-1 py-3 custom-theme-scrollbar"
             >
               <p
                 v-dompurify-html="tmWithGameName('Preregist_Agree_News_Info')"
diff --git a/layers/templates/FxCoupon01/index.vue b/layers/templates/FxCoupon01/index.vue
index fc882c0..b10b139 100644
--- a/layers/templates/FxCoupon01/index.vue
+++ b/layers/templates/FxCoupon01/index.vue
@@ -521,10 +521,6 @@ onMounted(async () => {
               @click="handleCouponUse"
             >
               <span>{{ tm('Coupon_Registration') }}</span>
-              <AtomsIconsCouponFill
-                :size="breakpoints.isMobile ? 16 : 20"
-                color="#FFFFFF"
-              />
             </AtomsButton>
           </div>
 
@@ -804,7 +800,7 @@ onMounted(async () => {
 <style scoped>
 /* Button Style */
 .btn-period {
-  @apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] before:content-none after:content-none
+  @apply border border-solid border-[#D9D9D9] rounded-[0] w-auto h-[40px] px-[16px] font-[700] before:content-none after:content-none
   transition-all duration-300 ease-in-out
   hover:z-[4] hover:!bg-[#FFFFFF] hover:border-[#404040] hover:!text-[#1F1F1F];
 }
diff --git a/layers/templates/FxDownload01/index.vue b/layers/templates/FxDownload01/index.vue
index 8b90349..481ca82 100644
--- a/layers/templates/FxDownload01/index.vue
+++ b/layers/templates/FxDownload01/index.vue
@@ -137,14 +137,17 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
       <WidgetsFixSubTitle :title="tm('Download_Section_Platform_Title')" />
 
       <div
-        class="relative flex flex-col-reverse sm:flex-row-reverse items-stretch justify-center gap-[20px] w-full md:flex-row"
+        class="relative flex flex-col-reverse items-stretch justify-center sm:flex-row-reverse gap-[20px] w-full md:grid md:grid-cols-12 md:grid-rows-1"
       >
         <div
           v-if="gameData?.platform_type !== '2'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-[2] md:pt-[24px] md:pb-0 lg:pt-[32px]"
+          class="relative flex flex-1 flex-col items-start justify-start h-[270px] py-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:pt-[24px] md:pb-0 lg:pt-[32px]"
+          :class="
+            gameData?.platform_type === '1' ? 'md:col-span-12' : 'md:col-span-8'
+          "
         >
           <div
-            class="relative flex flex-col items-start justify-start w-full max-w-[800px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
+            class="relative flex flex-col items-start justify-start w-full max-w-[880px] h-full px-[20px] mx-auto md:h-auto md:px-[28px] lg:px-[40px]"
           >
             <span
               v-if="!breakpoints.isMobile"
@@ -164,7 +167,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
             </span>
 
             <h4
-              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+              class="relative flex justify-left items-center w-full gap-[4px] text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
             >
               <span>{{ tm('Download_Box_PC_Title') }}</span>
 
@@ -208,7 +211,7 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
 
             <div
               v-if="breakpoints.isMobile"
-              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
+              class="relative flex items-center justify-center w-full h-auto min-h-[48px] py-[14px] px-[40px] mt-[48px] sm:mt-auto border border-solid border-[rgba(0,0,0,0.1)] rounded-[8px] bg-[#EBEBEB] text-center text-[#999999] text-[14px] font-[500] leading-[20px] tracking-[-0.42px]"
             >
               <span>{{ tm('Download_Button_PC_Mobile') }}</span>
             </div>
@@ -245,13 +248,16 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
 
         <div
           v-if="gameData?.platform_type !== '1'"
-          class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:py-[24px] md:px-[28px] lg:pt-[32px] lg:pb-[40px] lg:px-[40px]"
+          class="relative flex flex-1 flex-col items-start justify-start h-[270px] p-[20px] rounded-[12px] bg-white sm:h-auto md:flex-none md:py-[24px] md:px-[28px] lg:py-[32px] lg:px-[40px]"
+          :class="
+            gameData?.platform_type === '2' ? 'md:col-span-12' : 'md:col-span-4'
+          "
         >
           <div
-            class="relative flex flex-col items-start justify-start w-full max-w-[800px] mx-auto"
+            class="relative flex flex-col items-start justify-start w-full h-full max-w-[880px] mx-auto"
           >
             <h4
-              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[0.72px]"
+              class="relative flex justify-left items-center w-full text-left text-[#1F1F1F] text-[18px] font-bold leading-[26px] tracking-[-0.54px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px]"
             >
               <span>{{ tm('Download_Box_MOBILE_Title') }}</span>
             </h4>
@@ -299,27 +305,44 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
     <section ref="specPCRef" class="section-static">
       <WidgetsFixSubTitle :title="tm('Download_Section_PC_Title')" />
 
-      <table>
-        <thead>
-          <tr>
-            <th class="w-[80px] md:w-[172px]">
-              {{ tm('Download_Table_Item') }}
-            </th>
-            <th>{{ tm('Download_Table_Min_Spec') }}</th>
-            <th>{{ tm('Download_Table_Rec_Spec') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="tr in pcSpecList" :key="tr.id">
+      <div
+        class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
+      >
+        <table>
+          <thead>
             <tr>
-              <th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
-              <template v-for="td in tr.itemData" :key="td.display.text">
-                <td>{{ td.display.text }}</td>
-              </template>
+              <th class="w-[80px] md:w-[172px] !border-l-[0]">
+                {{ tm('Download_Table_Item') }}
+              </th>
+              <th>{{ tm('Download_Table_Min_Spec') }}</th>
+              <th>{{ tm('Download_Table_Rec_Spec') }}</th>
             </tr>
-          </template>
-        </tbody>
-      </table>
+          </thead>
+          <tbody>
+            <template v-for="(tr, trIdx) in pcSpecList" :key="tr.id">
+              <tr>
+                <th
+                  :class="[
+                    'w-[80px] md:w-[172px] !border-l-[0]',
+                    trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : '',
+                  ]"
+                >
+                  {{ tr.itemText }}
+                </th>
+                <template v-for="td in tr.itemData" :key="td.display.text">
+                  <td
+                    :class="
+                      trIdx === pcSpecList.length - 1 ? '!border-b-[0]' : ''
+                    "
+                  >
+                    {{ td.display.text }}
+                  </td>
+                </template>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
 
       <div
         v-if="!breakpoints.isMobile"
@@ -420,33 +443,50 @@ const handleMoveFocus = (target: 'pc' | 'mobile') => {
 
     <section ref="specMobileRef" class="section-static">
       <WidgetsFixSubTitle :title="tm('Download_Section_MOBILE_Title')" />
-      <table>
-        <thead>
-          <tr>
-            <th rowspan="2" class="w-[80px] md:w-[172px]">
-              {{ tm('Download_Table_Item') }}
-            </th>
-            <th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
-            <th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
-          </tr>
-          <tr>
-            <th>{{ tm('Download_Table_Device') }}</th>
-            <th>{{ tm('Download_Table_Os') }}</th>
-            <th>{{ tm('Download_Table_Device') }}</th>
-            <th>{{ tm('Download_Table_Os') }}</th>
-          </tr>
-        </thead>
-        <tbody>
-          <template v-for="tr in mobileSpecList" :key="tr.id">
+      <div
+        class="relative w-full border border-solid border-[#D9D9D9] rounded-[12px] overflow-hidden md:rounded-[16px]"
+      >
+        <table>
+          <thead>
             <tr>
-              <th class="w-[80px] md:w-[172px]">{{ tr.itemText }}</th>
-              <template v-for="td in tr.itemData" :key="td.display.text">
-                <td>{{ td.display.text }}</td>
-              </template>
+              <th rowspan="2" class="w-[80px] md:w-[172px] !border-l-[0]">
+                {{ tm('Download_Table_Item') }}
+              </th>
+              <th colspan="2">{{ tm('Download_Table_Min_Spec') }}</th>
+              <th colspan="2">{{ tm('Download_Table_Rec_Spec') }}</th>
             </tr>
-          </template>
-        </tbody>
-      </table>
+            <tr>
+              <th>{{ tm('Download_Table_Device') }}</th>
+              <th>{{ tm('Download_Table_Os') }}</th>
+              <th>{{ tm('Download_Table_Device') }}</th>
+              <th>{{ tm('Download_Table_Os') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-for="(tr, trIdx) in mobileSpecList" :key="tr.id">
+              <tr>
+                <th
+                  :class="[
+                    'w-[80px] md:w-[172px] !border-l-[0]',
+                    trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : '',
+                  ]"
+                >
+                  {{ tr.itemText }}
+                </th>
+                <template v-for="td in tr.itemData" :key="td.display.text">
+                  <td
+                    :class="
+                      trIdx === mobileSpecList.length - 1 ? '!border-b-[0]' : ''
+                    "
+                  >
+                    {{ td.display.text }}
+                  </td>
+                </template>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
     </section>
   </div>
 </template>
@@ -457,11 +497,11 @@ table {
   @apply w-full h-auto border-collapse border-spacing-0 table-fixed;
 }
 table th {
-  @apply py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FAFAFA] text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
+  @apply py-[8px] px-[12px] border-l border-b border-solid border-[#D9D9D9] bg-[#FAFAFA] text-center text-[#1F1F1F] text-[14px] font-bold leading-[24px] tracking-[-0.42px]
   md:py-[11px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
 }
 table td {
-  @apply h-[64px] py-[8px] px-[12px] border border-[#D9D9D9] bg-[#FFFFFF] text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
+  @apply h-[64px] py-[8px] px-[12px] border-l border-b border-[#D9D9D9] bg-[#FFFFFF] text-center text-[#666666] text-[14px] font-[400] leading-[24px] tracking-[-0.42px]
   md:h-[80px] md:py-[14px] md:px-[20px] md:text-[16px] md:leading-[26px] md:tracking-[-0.48px];
 }
 
diff --git a/layers/templates/FxPreregist01/index.vue b/layers/templates/FxPreregist01/index.vue
index 654d106..c488253 100644
--- a/layers/templates/FxPreregist01/index.vue
+++ b/layers/templates/FxPreregist01/index.vue
@@ -371,7 +371,10 @@ const handlePreregistClick = () => {
 </template>
 
 <style scoped>
-/* destroy되었을 때 (슬라이드 비활성화) 중앙 정렬 */
+.content-standard {
+  @apply max-w-[1024px] mx-auto;
+}
+
 .splide:not(.is-active):deep(.splide__list) {
   @apply flex justify-center gap-3 md:gap-4;
 }
diff --git a/layers/templates/FxSecure01/index.vue b/layers/templates/FxSecure01/index.vue
index 52025a9..1e1f103 100644
--- a/layers/templates/FxSecure01/index.vue
+++ b/layers/templates/FxSecure01/index.vue
@@ -171,15 +171,15 @@ onMounted(() => {
         </div>
 
         <!-- Secure Cards -->
-        <div class="grid grid-cols-1 sm:grid-cols-3 w-full gap-3 md:gap-5 mb-6">
+        <div class="grid grid-cols-1 md:grid-cols-3 w-full gap-3 md:gap-5 mb-6">
           <div
             v-for="card in secureCards"
             :key="card.id"
-            class="flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-4 bg-[#FFFFFF] rounded-2xl flex flex-col gap-3 transition-all duration-300 ease-in-out"
+            class="flex-1 min-h-[308px] md:min-h-[384px] p-[10px] md:p-3 lg:p-4 bg-[#FFFFFF] rounded-2xl flex flex-col gap-3 transition-all duration-300 ease-in-out"
           >
             <!-- Card Content -->
             <div
-              class="flex-1 p-[10px] md:p-8 flex flex-col gap-[8px] md:gap-3 text-left"
+              class="flex-1 p-[10px] md:p-3 lg:p-4 flex flex-col gap-[8px] md:gap-3 text-left"
             >
               <!-- Badge -->
               <div class="inline-flex">
diff --git a/layers/templates/GrBoard01/index.vue b/layers/templates/GrBoard01/index.vue
index 0f9abf0..70ffe8c 100644
--- a/layers/templates/GrBoard01/index.vue
+++ b/layers/templates/GrBoard01/index.vue
@@ -121,7 +121,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-md"
+        class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
       />
       <ClientOnly>
         <BlocksSlideDefault
@@ -156,7 +156,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="mt-[32px] md:mt-[48px]"
+        class="max-w-[944px] mt-[32px] mx-[20px] sm:mx-[40px] md:mt-[48px]"
       />
     </div>
   </section>
diff --git a/layers/templates/GrContents01/index.vue b/layers/templates/GrContents01/index.vue
index 29e96ec..6217536 100644
--- a/layers/templates/GrContents01/index.vue
+++ b/layers/templates/GrContents01/index.vue
@@ -36,12 +36,12 @@ const buttonListData = computed(() => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-xlg"
+        class="title-xlg max-w-[944px]"
       />
       <WidgetsSubTitle
         v-if="subTitleData"
         :resources-data="subTitleData"
-        class="title-sm mt-2"
+        class="title-sm max-w-[944px] mt-2"
       />
       <div v-if="imgListData" class="img-container">
         <div v-for="(item, index) in imgListData" :key="index" class="img-item">
@@ -62,7 +62,7 @@ const buttonListData = computed(() => {
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="mt-8"
+        class="max-w-[944px] mt-8"
       />
     </div>
   </section>
diff --git a/layers/templates/GrDetail01/index.vue b/layers/templates/GrDetail01/index.vue
index 9d12e30..445ec65 100644
--- a/layers/templates/GrDetail01/index.vue
+++ b/layers/templates/GrDetail01/index.vue
@@ -62,17 +62,17 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-lg"
+            class="title-lg max-w-[944px]"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+            class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
             :resources-data="getComponentGroup(item, 'description')"
-            class="mt-4 md:mt-6"
+            class="max-w-[944px] mt-4 md:mt-6"
           />
         </div>
       </SplideSlide>
@@ -124,15 +124,15 @@ 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 max-w-[184px] line-clamp-1 text-ellipsis whitespace-nowrap text-sm font-medium -translate-x-1/2 transition-[color] duration-300 ease-in-out md:block;
   color: var(--pagination-disabled);
 }
 .progress-bar {
-  @apply relative w-[68px] h-0.5 overflow-hidden md:w-[184px];
+  @apply relative w-[68px] h-[1px] overflow-hidden md:w-[184px];
   background-color: var(--pagination-disabled);
 }
 .progress-fill {
@@ -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);
 }
diff --git a/layers/templates/GrDetail02/index.vue b/layers/templates/GrDetail02/index.vue
index 8f67ae2..2e5adad 100644
--- a/layers/templates/GrDetail02/index.vue
+++ b/layers/templates/GrDetail02/index.vue
@@ -36,17 +36,17 @@ const paginationData = computed(() => {
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-lg"
+            class="title-lg max-w-[944px]"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-md mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
+            class="title-md max-w-[944px] mt-0.5 line-clamp-3 md:mt-1 md:line-clamp-2"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
             :resources-data="getComponentGroup(item, 'description')"
-            class="mt-4 md:mt-6"
+            class="max-w-[944px] mt-4 md:mt-6"
           />
         </div>
       </SplideSlide>
diff --git a/layers/templates/GrDetail03/index.vue b/layers/templates/GrDetail03/index.vue
index 5b4a6a1..7587294 100644
--- a/layers/templates/GrDetail03/index.vue
+++ b/layers/templates/GrDetail03/index.vue
@@ -59,28 +59,28 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
           :resources-data="getComponentGroup(item, 'foreground')"
         />
         <div
-          class="content-standard max-w-[1024px] mx-auto items-start pt-[48px] md:pt-0"
+          class="content-standard max-w-[335px] mx-auto items-start pt-[48px] md:max-w-[1024px] md:pt-0"
         >
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'category')"
             :resources-data="getComponentGroup(item, 'category')"
-            class="title-xs mb-2 line-clamp-1 text-left md:mb-5"
+            class="title-xs max-w-[540px] mb-2 line-clamp-1 text-left md:mb-5"
           />
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-lg line-clamp-1 text-left"
+            class="title-lg max-w-[540px] line-clamp-1 text-left"
           />
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
             tag="p"
-            class="title-md mt-1 line-clamp-1 text-left"
+            class="title-md max-w-[540px] mt-1 line-clamp-1 text-left"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
             :resources-data="getComponentGroup(item, 'description')"
-            class="mt-2 text-left md:mt-5"
+            class="max-w-[540px] mt-2 text-left md:mt-5"
           />
           <AtomsVideo
             v-if="hasComponentGroup(item, 'video')"
diff --git a/layers/templates/GrGallery01/index.vue b/layers/templates/GrGallery01/index.vue
index e1abcb6..d0d9ff2 100644
--- a/layers/templates/GrGallery01/index.vue
+++ b/layers/templates/GrGallery01/index.vue
@@ -125,7 +125,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-md"
+        class="title-md max-w-[944px]"
       />
       <BlocksSlideThumbnail
         ref="slideThumbnailRef"
@@ -170,7 +170,7 @@ const onArrowClick = (direction, targetIndex) => {
 
 <style scoped>
 .thumbnail-carousel {
-  @apply w-full max-w-[688px] md:max-w-[944px];
+  @apply w-full max-w-[944px];
 }
 .thumbnail-carousel:deep(.main-splide) {
   @apply overflow-hidden rounded-lg border border-white/10 shadow-[0_4px_20px_0_rgba(0,0,0,0.5)];
diff --git a/layers/templates/GrGallery02/index.vue b/layers/templates/GrGallery02/index.vue
index 4c04e90..9c48cba 100644
--- a/layers/templates/GrGallery02/index.vue
+++ b/layers/templates/GrGallery02/index.vue
@@ -69,7 +69,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-md mx-[20px] sm:mx-[40px]"
+        class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
       />
       <BlocksSlideCenterFocus
         v-if="slideData"
@@ -85,6 +85,7 @@ const onArrowClick = (direction, targetIndex) => {
             <BlocksVisualContent
               :resources-data="getComponentGroup(item, 'imgList')"
               object-fit="cover"
+              class="inner-content"
             />
           </div>
         </SplideSlide>
@@ -101,10 +102,7 @@ const onArrowClick = (direction, targetIndex) => {
 
 <style scoped>
 .section-standard {
-  @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] before:z-[5] 
-  after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
-}
-.slide-inner {
-  @apply bg-black;
+  @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l before:from-transparent before:to-[rgba(0,0,0,0.7)] before:z-[5] 
+  after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r after:from-transparent after:to-[rgba(0,0,0,0.7)];
 }
 </style>
diff --git a/layers/templates/GrGallery03/index.vue b/layers/templates/GrGallery03/index.vue
index 70da12f..c726e9f 100644
--- a/layers/templates/GrGallery03/index.vue
+++ b/layers/templates/GrGallery03/index.vue
@@ -78,7 +78,7 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="title-md mx-[20px] sm:mx-[40px]"
+        class="title-md max-w-[944px] mx-[20px] sm:mx-[40px]"
       />
       <BlocksSlideCenterHighlight
         v-if="slideData"
@@ -101,12 +101,12 @@ const onArrowClick = (direction, targetIndex) => {
       <WidgetsSubTitle
         v-if="imgTitleData"
         :resources-data="imgTitleData"
-        class="title-lg mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
+        class="title-lg max-w-[944px] mt-[32px] mx-[20px] line-clamp-2 sm:mx-[40px] md:line-clamp-1"
       />
       <WidgetsDescription
         v-if="descriptionData"
         :resources-data="descriptionData"
-        class="mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
+        class="max-w-[944px] mt-[8px] mx-[20px] sm:mx-[40px] md:mt-[16px]"
       />
       <WidgetsButtonList
         v-if="buttonListData"
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index fb51901..eed919e 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -51,16 +51,17 @@ const onArrowClick = direction => {
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="title-md"
+            class="title-md max-w-[944px]"
           />
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="title-xlg"
+            class="title-xlg max-w-[944px]"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
             :resources-data="getComponentGroup(item, 'description')"
+            class="max-w-[944px]"
           />
           <WidgetsButtonList
             v-if="hasComponentGroup(item, 'buttonList')"