diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss
index e69de29..bfb456e 100644
--- a/src/scss/keyframes/pc/_calling.scss
+++ b/src/scss/keyframes/pc/_calling.scss
@@ -0,0 +1,8 @@
+@keyframes calling__show-btn-1 {
+  from { transform: rotate(180deg) scale(2); opacity: 0; }
+  to   { transform: rotate(180deg) scale(1); opacity: 1; }
+}
+@keyframes calling__show-btn-2 {
+  from { transform: rotate(45deg) scale(2); opacity: 0; }
+  to   { transform: rotate(45deg) scale(1); opacity: 1; }
+}
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
index 8b04d16..620bf1a 100644
--- a/src/scss/modules/pc/_calling.scss
+++ b/src/scss/modules/pc/_calling.scss
@@ -31,6 +31,69 @@
     &::after { content: ""; display: block; clear: both; }
   }
 
+  /*** controls-btn ***/
+  .calling__controls-btn {
+    position: absolute;
+    bottom: 200px; left: calc(50% - 250px);
+    width: 500px; height: 80px;
+
+    .btn {
+      position: absolute; top: 0;
+      width: 80px; height: 80px;
+      overflow: hidden;
+      border-radius: 15px;
+      transform: rotate(45deg);
+
+      .fa-phone {
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        font-size: 45px;
+        text-align: center;
+        line-height: 80px;
+        display: block;
+        opacity: 0;
+      }
+      
+      div {
+        position: absolute;
+        &::after {
+          content: ""; display: block;
+          width: 100%; height: 100%;
+          background-color: rgba(255,255,255,0.6);
+        }
+      }
+      div:nth-child(1),
+      div:nth-child(3) { left: 0; width: 100%; height: 2px; }
+      div:nth-child(2),
+      div:nth-child(4) { top: 0; width: 2px; height: 100%; }
+      div:nth-child(1) {
+        top: 0;
+        &::after { transform: translateX(100%); }
+      }
+      div:nth-child(2) {
+        left: 0;
+        &::after { transform: translateY(-100%); }
+      }
+      div:nth-child(3) {
+        bottom: 0;
+        &::after { transform: translateX(-100%); }
+      }
+      div:nth-child(4) {
+        right: 0;
+        &::after { transform: translateX(100%); }
+      }
+    }
+    .btn-1 {
+      left: 0;
+      .fa-phone { color: #af5853; transform: rotate(180deg); }
+    }
+    .btn-2 {
+      right: 0;
+      .fa-phone { color: #6C9A7B; transform: rotate(45deg); }
+    }
+  }
+
   .calling[data-state="start"] {
     /*** bg ***/
     .calling__bg {
@@ -51,5 +114,23 @@
       div:nth-child(15):after,
       div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
     }
+
+    /*** controls-btn ***/
+    .calling__controls-btn {
+      .btn-1 {
+        div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
+        div:nth-child(3):after { animation: slide-right 0.6s ease 0.7s forwards; }
+        div:nth-child(4):after { animation: slide-top 0.6s ease 0.7s forwards; }
+        .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
+      }
+      .btn-2 {
+        div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; }
+        div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; }
+        div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; }
+        div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; }
+        .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
+      }
+    }
   }
 }