[optimize] btn next line in cfp introd

src/assets/scss/CFP/intro.scss

@@ -244,7 +244,6 @@ $fontColor: $mid-blue;
       .introd-text {
         top: 120px;
       }
-
       .past-sitcon {
         .thumbnails {
           .thumb-wrapper {
@@ -634,4 +633,70 @@ $fontColor: $mid-blue;
       }
     }
   }
+}
+
+@media screen and (max-width: 800px) {
+  .cfp-deadline-content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 600px;
+    height: 120px;
+  }
+  #cfp-intro{
+  .box-back2 {
+    // width: 760px;
+    font-family: $fontFamily;
+    color: $fontColor;
+
+    width: 900px;
+    padding: 20px 20px 168px 20px;
+    height: 2350px;
+
+    .about-topic {
+      margin-bottom: 2em;
+      position: relative;
+      bottom: 35px;
+      z-index: 2;
+      left: 50px;
+    }
+
+    .second-box {
+      transform: rotate(15deg);
+      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+      border-radius: 30px;
+      position: relative;
+      bottom: 1100px;
+      right: 120px;
+      z-index: 0;
+    }
+
+    .cfp-deadline {
+      margin-bottom: 2em;
+      margin-bottom: 2em;
+      position: relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 55px;
+      .cfp-deadline-content {
+        margin-top: -1.5em;
+        display: flex;
+        flex-direction: row;
+        align-items: flex-end;
+      }
+    }
+    
+    .give-me-money {
+      position: relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 55px;
+      .whisper {
+        font-weight: 900;
+        font-size: 1.25em;
+        margin-bottom: 0.5em;
+      }
+    }
+  }
+}
 }

src/components/CFP/Intro.vue

@@ -91,17 +91,20 @@
           <div class="cfp-deadline">
             <h3>徵稿時間</h3>
             <div class="cfp-deadline-content">
-              <span class="h3">01/20 ～ 02/22</span
+            <div>
-              ><span class="ml-2 mr-2">詳細時程請見</span
+              <span class="h3">01/20 ～ 02/22</span>
-              ><a class="btn btn-primary mr-2" rel="noopener" href="/2021/cfp/news"
+              <span class="ml-2 mr-2">詳細時程請見</span>
-                >投稿資訊</a
+            </div>
-              ><a
+              <div>
+              <a class="btn btn-primary mr-2" rel="noopener" href="/2021/cfp/news">投稿資訊</a>
+              <a
                 class="btn btn-primary"
                 rel="noopener"
                 target="_blank"
                 href="https://forms.gle/XoXJSD2P8dL8X8s2A"
                 >我知道了，快讓我投稿！</a
               >
+              </div>
             </div>
           </div>
           </div>