diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 7a2d2a4..392a0a7 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -265,7 +265,6 @@ body.zen-mode-enable {
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
-    --font-weight-extralight: 200;
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
@@ -621,6 +620,9 @@ body.zen-mode-enable {
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-12 {
     margin-inline: calc(var(--spacing) * 12);
   }
@@ -666,6 +668,9 @@ body.zen-mode-enable {
   .me-4 {
     margin-inline-end: calc(var(--spacing) * 4);
   }
+  .me-50 {
+    margin-inline-end: calc(var(--spacing) * 50);
+  }
   .prose {
     color: var(--tw-prose-body);
     max-width: 65ch;
@@ -1157,6 +1162,9 @@ body.zen-mode-enable {
   .mt-20 {
     margin-top: calc(var(--spacing) * 20);
   }
+  .mt-40 {
+    margin-top: calc(var(--spacing) * 40);
+  }
   .mt-90 {
     margin-top: calc(var(--spacing) * 90);
   }
@@ -1232,8 +1240,11 @@ body.zen-mode-enable {
   .mb-20 {
     margin-bottom: calc(var(--spacing) * 20);
   }
-  .mb-21 {
-    margin-bottom: calc(var(--spacing) * 21);
+  .mb-26 {
+    margin-bottom: calc(var(--spacing) * 26);
+  }
+  .mb-28 {
+    margin-bottom: calc(var(--spacing) * 28);
   }
   .mb-\[2px\] {
     margin-bottom: 2px;
@@ -1367,6 +1378,12 @@ body.zen-mode-enable {
   .h-\[150px\] {
     height: 150px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
+  .h-\[560px\] {
+    height: 560px;
+  }
   .h-\[680px\] {
     height: 680px;
   }
@@ -1475,6 +1492,9 @@ body.zen-mode-enable {
   .max-w-\[5rem\] {
     max-width: 5rem;
   }
+  .max-w-\[40vw\] {
+    max-width: 40vw;
+  }
   .max-w-\[64rem\] {
     max-width: 64rem;
   }
@@ -1484,6 +1504,9 @@ body.zen-mode-enable {
   .max-w-\[267px\] {
     max-width: 267px;
   }
+  .max-w-\[376px\] {
+    max-width: 376px;
+  }
   .max-w-\[1600px\] {
     max-width: 1600px;
   }
@@ -1538,6 +1561,9 @@ body.zen-mode-enable {
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1648,15 +1674,15 @@ body.zen-mode-enable {
   .items-end {
     align-items: flex-end;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1730,6 +1756,9 @@ body.zen-mode-enable {
   .self-center {
     align-self: center;
   }
+  .self-end {
+    align-self: flex-end;
+  }
   .\!overflow-hidden {
     overflow: hidden !important;
   }
@@ -2161,6 +2190,21 @@ body.zen-mode-enable {
   .pt-28 {
     padding-top: calc(var(--spacing) * 28);
   }
+  .pt-30 {
+    padding-top: calc(var(--spacing) * 30);
+  }
+  .pt-40 {
+    padding-top: calc(var(--spacing) * 40);
+  }
+  .pt-50 {
+    padding-top: calc(var(--spacing) * 50);
+  }
+  .pt-60 {
+    padding-top: calc(var(--spacing) * 60);
+  }
+  .pt-90 {
+    padding-top: calc(var(--spacing) * 90);
+  }
   .pt-\[2px\] {
     padding-top: 2px;
   }
@@ -2179,6 +2223,9 @@ body.zen-mode-enable {
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2191,24 +2238,9 @@ body.zen-mode-enable {
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pb-7 {
-    padding-bottom: calc(var(--spacing) * 7);
-  }
-  .pb-8 {
-    padding-bottom: calc(var(--spacing) * 8);
-  }
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
-  .pb-11 {
-    padding-bottom: calc(var(--spacing) * 11);
-  }
-  .pb-12 {
-    padding-bottom: calc(var(--spacing) * 12);
-  }
-  .pb-21 {
-    padding-bottom: calc(var(--spacing) * 21);
-  }
   .pb-24 {
     padding-bottom: calc(var(--spacing) * 24);
   }
@@ -2292,6 +2324,9 @@ body.zen-mode-enable {
   .text-\[0\.6rem\] {
     font-size: 0.6rem;
   }
+  .text-\[40px\] {
+    font-size: 40px;
+  }
   .text-\[60px\] {
     font-size: 60px;
   }
@@ -3038,11 +3073,26 @@ body.zen-mode-enable {
       transition-property: none;
     }
   }
+  .sm\:mx-12 {
+    @media (width >= 640px) {
+      margin-inline: calc(var(--spacing) * 12);
+    }
+  }
   .sm\:me-7 {
     @media (width >= 640px) {
       margin-inline-end: calc(var(--spacing) * 7);
     }
   }
+  .sm\:me-50 {
+    @media (width >= 640px) {
+      margin-inline-end: calc(var(--spacing) * 50);
+    }
+  }
+  .sm\:mt-0 {
+    @media (width >= 640px) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
   .sm\:mt-16 {
     @media (width >= 640px) {
       margin-top: calc(var(--spacing) * 16);
@@ -3058,6 +3108,11 @@ body.zen-mode-enable {
       display: block;
     }
   }
+  .sm\:flex {
+    @media (width >= 640px) {
+      display: flex;
+    }
+  }
   .sm\:hidden {
     @media (width >= 640px) {
       display: none;
@@ -3078,6 +3133,21 @@ body.zen-mode-enable {
       flex-direction: row;
     }
   }
+  .sm\:items-center {
+    @media (width >= 640px) {
+      align-items: center;
+    }
+  }
+  .sm\:items-end {
+    @media (width >= 640px) {
+      align-items: flex-end;
+    }
+  }
+  .sm\:justify-between {
+    @media (width >= 640px) {
+      justify-content: space-between;
+    }
+  }
   .sm\:self-end {
     @media (width >= 640px) {
       align-self: flex-end;
@@ -3119,6 +3189,11 @@ body.zen-mode-enable {
       line-height: var(--tw-leading, var(--text-lg--line-height));
     }
   }
+  .sm\:text-\[60px\] {
+    @media (width >= 640px) {
+      font-size: 60px;
+    }
+  }
   .sm\:last\:me-0 {
     @media (width >= 640px) {
       &:last-child {
@@ -3126,6 +3201,11 @@ body.zen-mode-enable {
       }
     }
   }
+  .md\:mx-12 {
+    @media (width >= 853px) {
+      margin-inline: calc(var(--spacing) * 12);
+    }
+  }
   .md\:-me-16 {
     @media (width >= 853px) {
       margin-inline-end: calc(var(--spacing) * -16);
@@ -3171,6 +3251,11 @@ body.zen-mode-enable {
       height: 200px;
     }
   }
+  .md\:h-\[680px\] {
+    @media (width >= 853px) {
+      height: 680px;
+    }
+  }
   .md\:h-\[880px\] {
     @media (width >= 853px) {
       height: 880px;
@@ -3201,6 +3286,11 @@ body.zen-mode-enable {
       justify-content: flex-start;
     }
   }
+  .md\:gap-11 {
+    @media (width >= 853px) {
+      gap: calc(var(--spacing) * 11);
+    }
+  }
   .md\:p-\[10vh\] {
     @media (width >= 853px) {
       padding: 10vh;
@@ -3216,6 +3306,11 @@ body.zen-mode-enable {
       padding-inline: calc(var(--spacing) * 24);
     }
   }
+  .md\:pt-90 {
+    @media (width >= 853px) {
+      padding-top: calc(var(--spacing) * 90);
+    }
+  }
   .md\:text-\[98px\] {
     @media (width >= 853px) {
       font-size: 98px;
@@ -3296,6 +3391,11 @@ body.zen-mode-enable {
       height: calc(var(--spacing) * 72);
     }
   }
+  .lg\:h-\[880px\] {
+    @media (width >= 1024px) {
+      height: 880px;
+    }
+  }
   .lg\:h-full {
     @media (width >= 1024px) {
       height: 100%;
@@ -3386,6 +3486,21 @@ body.zen-mode-enable {
       padding-inline-start: calc(var(--spacing) * 8);
     }
   }
+  .lg\:pt-60 {
+    @media (width >= 1024px) {
+      padding-top: calc(var(--spacing) * 60);
+    }
+  }
+  .lg\:pb-1 {
+    @media (width >= 1024px) {
+      padding-bottom: calc(var(--spacing) * 1);
+    }
+  }
+  .lg\:text-\[98px\] {
+    @media (width >= 1024px) {
+      font-size: 98px;
+    }
+  }
   .xl\:-mx-28 {
     @media (width >= 1280px) {
       margin-inline: calc(var(--spacing) * -28);
@@ -3396,11 +3511,21 @@ body.zen-mode-enable {
       margin-inline: calc(var(--spacing) * 28);
     }
   }
+  .xl\:h-\[880px\] {
+    @media (width >= 1280px) {
+      height: 880px;
+    }
+  }
   .xl\:w-1\/4 {
     @media (width >= 1280px) {
       width: calc(1/4 * 100%);
     }
   }
+  .xl\:w-\[376px\] {
+    @media (width >= 1280px) {
+      width: 376px;
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 1280px) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -3411,9 +3536,19 @@ body.zen-mode-enable {
       padding-inline: calc(var(--spacing) * 28);
     }
   }
-  .xl\:text-\[160px\] {
+  .xl\:pt-90 {
+    @media (width >= 1280px) {
+      padding-top: calc(var(--spacing) * 90);
+    }
+  }
+  .xl\:pb-2 {
+    @media (width >= 1280px) {
+      padding-bottom: calc(var(--spacing) * 2);
+    }
+  }
+  .xl\:text-\[152px\] {
     @media (width >= 1280px) {
-      font-size: 160px;
+      font-size: 152px;
     }
   }
   .\32 xl\:block {
diff --git a/assets/js/main.js b/assets/js/main.js
index 354875e..426dbb7 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -21,20 +21,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const typingSecondElement = document.getElementById("typingSecond");
     if (typingSecondElement) {
-        gsap.matchMedia().add({
-            // 1280px 초과 뷰포트
-            isDesktop: "(min-width: 1281px)",
-            // 1280px 이하 뷰포트
-            isMobile: "(max-width: 1280px)"
-        }, (context) => {
-            let { isDesktop } = context.conditions;
-
-            gsap.to(typingSecondElement, {
-                delay: 1.4,
-                duration: 1.5,
-                x: isDesktop ? 268 : 160, // 화면 너비에 따라 x값 변경
-                ease: "power2.inOut"
-            });
+        gsap.to(typingSecondElement, {
+            delay: 1.4,
+            duration: 1.5,
+            x: '10vw', // Use viewport width unit
+            ease: "power2.inOut"
         });
     }
 
@@ -147,6 +138,39 @@ document.addEventListener("DOMContentLoaded", () => {
     // 3.0초 ~ 3.733초 : 대각선 십자가 스핀 (원본 t=120~164, 315° 회전)
     tl.to("#diagonal", { rotation: 405, duration: 0.733, ease: "power4.inOut" }, 4.5);
 
+    // 메인 애니메이션 완료 후 실행
+    gsap.delayedCall(8.5, () => {
+        function rotateSequence() {
+            const tl = gsap.timeline({
+                onComplete: () => {
+                    gsap.delayedCall(3, rotateSequence); // 3초 후 다시 실행
+                }
+            });
 
+            // 1단계
+            tl.to(["#diagonal", "#leftClose"], {
+                rotation: "+=45",
+                duration: 0.4,
+                ease: "power2.inOut"
+            })
+                // 2초 대기
+                .to({}, { duration: 3 })
+                // 2단계
+                .to(["#diagonal", "#upClose"], {
+                    rotation: "+=45",
+                    duration: 0.4,
+                    ease: "power2.inOut"
+                })
+                // 2초 대기
+                .to({}, { duration: 3 })
+                // 3단계
+                .to(["#center", "#diagonal"], {
+                    rotation: "+=45",
+                    duration: 0.4,
+                    ease: "power2.inOut"
+                });
+        }
 
+        rotateSequence();
+    });
 });
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 11724ca..5882195 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,21 +1,23 @@
 {{ define "main" }}
 
-<div class="h-[680px] md:h-[880px]">
-  <div class="mt-90 mx-12 border-b-2 pb-10 border-stone-200 flex justify-between items-end">
-    <div>
-      <div class="font-ivymode xl:text-[160px] md:text-[98px] text-[60px] leading-none tracking-[-2px] text-stone-200"
+<div class="h-[560px] md:h-[680px] xl:h-[880px] m-0">
+  <div class="pt-60 xl:pt-90 sm:mx-12 pb-10 flex flex-col sm:flex-row sm:justify-between sm:items-end">
+    <div class="flex-shrink-0">
+      <div
+        class="font-ivymode xl:text-[152px] lg:text-[98px] sm:text-[60px] text-[40px] leading-none tracking-[-2px] text-stone-200"
         id="typing">
         Product
       </div>
       <div
-        class="mt-3 md:mt-3 flex items-center gap-11 font-futura font-medium xl:text-[160px] md:text-[98px] text-[60px] leading-none tracking-[-1px] text-stone-200"
+        class="mt-3 md:mt-3 flex sm:items-center gap-4 md:gap-11 font-futura font-medium xl:text-[152px] lg:text-[98px] sm:text-[60px] text-[40px] leading-none tracking-[-1px] text-stone-200"
         id="typingSecond">
         <span class="font-light" id="andMark">&</span>
         <span class="italic" id="rolling">Product</span>
       </div>
     </div>
-    <div class="">
-      <svg id="animated-svg" style="visibility: hidden;" width="376" height="376" viewBox="0 0 376 376" xmlns="http://www.w3.org/2000/svg">
+    <div class="flex-shrink max-w-[40vw] xl:pb-2 lg:pb-1 self-end">
+      <svg id="animated-svg" style="visibility: hidden;" class="w-full h-auto xl:w-[376px]" viewBox="0 0 376 376"
+        xmlns="http://www.w3.org/2000/svg">
         <defs>
           <g id="thinCross">
             <rect x="-1" y="-40" width="2" height="80" fill="#d9d9d9" />
@@ -57,6 +59,7 @@
 </div>
 
 
+
 <div class="flex -mx-6 xl:-mx-28 mb-8 ">
   <div class="relative flex-[1200] pt-28 pb-24 min-w-0 xl:px-28 border-r border-b border-zinc-900">
     <p class="text-4xl font-regular leading-snug text-zinc-900">
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index 36d30ec..7d0cdb8 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -7,7 +7,7 @@
 */}}
 {{ end }}
 
-<div class="full-width-bg overflow-hidden relative h-[680px] md:h-[880px]">
+<div class="full-width-bg overflow-hidden relative h-[560px] md:h-[680px] xl:h-[880px]">
   <div class="absolute inset-0 herobase"></div>
 
   <svg width="825" height="514" viewBox="-1000 -900 4474 3541" fill="none" xmlns="http://www.w3.org/2000/svg"
diff --git a/themes/blowfish/i18n/ko.yaml b/themes/blowfish/i18n/ko.yaml
index c95aac6..a615f72 100644
--- a/themes/blowfish/i18n/ko.yaml
+++ b/themes/blowfish/i18n/ko.yaml
@@ -48,7 +48,7 @@ error:
 footer:
   dark_appearance: "다크 모드로 전환"
   light_appearance: "라이트 모드로 전환"
-  powered_by: "{{ .Hugo }} &amp; {{ .Theme }} 로 제공됨"
+  powered_by: "Self published by 은석기"
 
 list:
   externalurl_title: "외부 사이트로 링크"