diff --git a/src/scss/modules/pc/_gab-animation.scss b/src/scss/modules/pc/_gab-animation.scss
new file mode 100644
index 0000000..27b9d09
--- /dev/null
+++ b/src/scss/modules/pc/_gab-animation.scss
@@ -0,0 +1,39 @@
+@include pc-layout {
+  .gab-animation {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    min-width: $min-width; min-height: $min-height;
+    background-color: $theme-light-pink;
+    z-index: 1001;
+  }
+
+  /*** bg ***/
+  .gab-animation__bg {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+
+    div {
+      width: 100%; height:12.5%;
+      background-color: $theme-bg;
+      transform: translateX(-100%);
+    }
+  }
+
+  /*************************************************************************************************
+   * animation
+   *************************************************************************************************/
+  .gab-animation[data-state="start"] {
+    .gab-animation__bg {
+      div:nth-child(1) { animation: slide-right 0.4s ease 0s forwards; }
+      div:nth-child(2) { animation: slide-right 0.4s ease 0.1s forwards; }
+      div:nth-child(3) { animation: slide-right 0.4s ease 0.2s forwards; }
+      div:nth-child(4) { animation: slide-right 0.4s ease 0.3s forwards; }
+      div:nth-child(5) { animation: slide-right 0.4s ease 0.4s forwards; }
+      div:nth-child(6) { animation: slide-right 0.4s ease 0.5s forwards; }
+      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; }
+    }
+  }
+}
diff --git a/src/scss/modules/pc/_load-view.scss b/src/scss/modules/pc/_load-view.scss
index dde16df..42704cd 100644
--- a/src/scss/modules/pc/_load-view.scss
+++ b/src/scss/modules/pc/_load-view.scss
@@ -6,6 +6,7 @@
     min-width: $min-width; min-height: $min-height;
     background-color: $theme-pink;
     overflow: hidden;
+    z-index: 1000;
   }
 
   /**