diff --git a/public/images/gab-animation/bg.png b/public/images/gab-animation/bg.png
new file mode 100644
index 0000000..241a98d
Binary files /dev/null and b/public/images/gab-animation/bg.png differ
diff --git a/src/scss/keyframes/pc/_gab-animation.scss b/src/scss/keyframes/pc/_gab-animation.scss
new file mode 100644
index 0000000..c7460b9
--- /dev/null
+++ b/src/scss/keyframes/pc/_gab-animation.scss
@@ -0,0 +1,78 @@
+@keyframes gab-animation__fall-frame {
+  0% { top: -100px; }
+  50% { top: calc(50% + 180px); transform: scale(1); }
+  60% { top: calc(50% + 180px); transform: scale(1.4, 0.8); }
+  70% { transform: scale(1); }
+  100% { top: calc(50% - 50px); }
+}
+@keyframes gab-animation__scale-frame {
+  0% { transform: scale(1); opacity: 1; }
+  25% { transform: scale(3,2); opacity: 0.5; }
+  50% { transform: scale(1); opacity: 1; }
+  75% { transform: scale(2,3); opacity: 0.5; }
+  100% { transform: scale(1); opacity:1; }
+}
+@keyframes gab-animation__open-frame {
+  from {
+    top: calc(50% - 50px); left: calc(50% - 50px);
+    width: 100px; height: 100px;
+    border-radius: 50%;
+  }
+  to {
+    top: 40px; left: 40px;
+    width: calc(100% - 80px); height: calc(100% - 80px);
+    border-radius: 0%;
+  }
+}
+
+@keyframes gab-animation__move-y1-area-1 {
+  from { transform: translate(0, 0); }
+  to   { transform: translate(0, -50px); }
+}
+@keyframes gab-animation__move-y2-area-1 {
+  from { transform: translate(calc(-100% + 5px), -50px); }
+  to   { transform: translate(calc(-100% + 5px), 100%); }
+}
+@keyframes gab-animation__move-y1-area-2 {
+  from { transform: translate(0, 0); }
+  to   { transform: translate(0, 50px); }
+}
+@keyframes gab-animation__move-y2-area-2 {
+  from { transform: translate(calc(100% - 5px), 50px); }
+  to   { transform: translate(calc(100% - 5px), -100%); }
+}
+@keyframes gab-animation__move-x-area-1 {
+  from { transform: translate(0, -50px); }
+  to   { transform: translate(calc(-100% + 5px), -50px); }
+}
+@keyframes gab-animation__move-x-area-2 {
+  from { transform: translate(0, 50px); }
+  to   { transform: translate(calc(100% - 5px), 50px); }
+}
+
+@keyframes gab-animation__move-y-area-bg-1 {
+  from { transform: translate(calc(-100% + 5px), -100%); }
+  to   { transform: translate(calc(-100% + 5px), 0%); }
+}
+@keyframes gab-animation__move-y-area-bg-2 {
+  from { transform: translate(calc(100% - 5px), 100%); }
+  to   { transform: translate(calc(100% - 5px), 0%); }
+}
+@keyframes gab-animation__move-x-area-bg-1 {
+  from { transform: translate(calc(-100% + 5px), 0%); }
+  to   { transform: translate(0, 0%); }
+}
+@keyframes gab-animation__move-x-area-bg-2 {
+  from { transform: translate(calc(100% - 5px), 0%); }
+  to   { transform: translate(0, 0%); }
+}
+
+@keyframes gab-animation__radius-frame {
+  from { border-radius: 0; }
+  to   { border-radius: 8px; }
+}
+
+@keyframes gab-animation__show-bg {
+  from { opacity: 0; }
+  to   { opacity: 0.2; }
+}
diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
index 27b9d09..163a3fc 100644
--- a/src/scss/modules/pc/_gab-animation.scss
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -5,6 +5,7 @@
     width: 100%; height: 100%;
     min-width: $min-width; min-height: $min-height;
     background-color: $theme-light-pink;
+    overflow: hidden;
     z-index: 1001;
   }
 
@@ -21,6 +22,47 @@
     }
   }
 
+  /*** frame ***/
+  .gab-animation__frame {
+    position: absolute;
+    top: -100px; left: calc(50% - 50px);
+    width: 100px; height: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+
+    .area {
+      position: relative;
+      float: left;
+      width: 50%; height: 100%;
+      overflow: hidden;
+
+      &::before,
+      &::after {
+        content: ""; display: block;
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+      }
+      &::before { background-color: $theme-light-pink; }
+      &::after  { background-color: $theme-purple; }
+    }
+    .area:nth-child(1) {
+      &::after { transform: translate(calc(-100% + 5px), -100%); }
+    }
+    .area:nth-child(2) {
+      &::after { transform: translate(calc(100% - 5px), 100%); }
+    }
+
+    &::after {
+      content: ""; display: block;
+      position: absolute;
+      width: 100%; height: 100%;
+      background-image: url(../images/gab-animation/bg.png);
+      background-size: 30px;
+      opacity: 0;
+    }
+  }
+
   /*************************************************************************************************
    * animation
    *************************************************************************************************/
@@ -35,5 +77,42 @@
       div:nth-child(7) { animation: slide-right 0.4s ease 0.6s forwards; }
       div:nth-child(8) { animation: slide-right 0.4s ease 0.7s forwards; }
     }
+
+    .gab-animation__frame {
+      animation:
+        gab-animation__fall-frame 0.5s ease-out 1.1s forwards,
+        gab-animation__scale-frame 0.7s ease-in-out 1.6s forwards,
+        gab-animation__open-frame 0.4s ease-in-out 2.3s forwards,
+        gab-animation__radius-frame 1s ease-in-out 3.8s forwards;
+
+      &::after { animation: gab-animation__show-bg 0.4s ease 3.8s forwards; }
+
+      .area:nth-child(1) {
+        &::before {
+          animation:
+            gab-animation__move-y1-area-1 0.3s ease 2.7s forwards,
+            gab-animation__move-x-area-1 0.4s ease 3s forwards,
+            gab-animation__move-y2-area-1 0.3s ease 3.4s forwards;
+        }
+        &::after {
+          animation:
+            gab-animation__move-y-area-bg-1 0.3s ease 3.5s forwards,
+            gab-animation__move-x-area-bg-1 0.4s ease 3.8s forwards;
+        }
+      }
+      .area:nth-child(2) {
+        &::before {
+          animation:
+            gab-animation__move-y1-area-2 0.3s ease 2.7s forwards,
+            gab-animation__move-x-area-2 0.4s ease 3s forwards,
+            gab-animation__move-y2-area-2 0.3s ease 3.4s forwards;
+        }
+        &::after {
+          animation:
+            gab-animation__move-y-area-bg-2 0.3s ease 3.5s forwards,
+            gab-animation__move-x-area-bg-2 0.4s ease 3.8s forwards;
+        }
+      }
+    }
   }
 }