[Fix] CFP rwd

src/assets/scss/CFP/bg.scss

@@ -105,7 +105,7 @@ $zm-third-card: -6;
         top: 240px;
         right: 240px;
         width: 1500px;
-        height: 1200px;
+        height: 1800px;
       }
     }
   }
@@ -201,17 +201,13 @@ $zm-third-card: -6;
         p {
           padding-top: 20px;
           padding-left: 180px;
-          z-index: $zm-blue-bar;
         }
       }
 
       .card2-wrapper {
-        z-index: $zm-second-card;
-
         .second-card {
-          z-index: $zm-second-card;
           position: relative;
-          height: 1000px;
+          height: 950px;
           top: 198px;
           right: 90px;
         }
@@ -220,6 +216,123 @@ $zm-third-card: -6;
   }
 }
 
+@media screen and (max-width: 540px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1450px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 880px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #cfp-bg {
+    .cards {
+      .card2-wrapper {
+        .second-card {
+          height: 960px;
+        }
+      }
+    }
+  }
+}
+
+@include xs {
+  #cfp-bg {
+    .korea-fish {
+      .sitcon-apple {
+        margin-top: 216px;
+        width: 120px;
+      }
+      .ellipse {
+        margin-top: 180px;
+        width: 240px;
+      }
+      .radial {
+        margin-top: -180px;
+        width: 1666px;
+      }
+    }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: -180px;
+        right: 180px;
+        height: 1400px;
+      }
+
+      .blue-bar {
+        position: relative;
+        right: 160px;
+        top: 60px;
+      }
+
+      .card2-wrapper {
+        margin-top: -600px;
+
+        .second-card {
+          position: relative;
+          height: 940px;
+          top: 318px;
+          right: 90px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 380px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1400px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1050px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1400px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1000px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1500px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1050px;
+        }
+      }
+    }
+  }
+}
+
 /*
 @media screen and (min-width: 1921px) {
   #cfp-bg {

src/assets/scss/CFP/intro.scss

@@ -1,7 +1,5 @@
 @import "../hyperpoint";
 @import "../color";
-$fontFamily: Noto Sans TC;
-$fontColor: $mid-blue;
 
 // General settings:
 //    font-size and paragraph spacing for headers and paragraph text
@@ -63,7 +61,7 @@ $fontColor: $mid-blue;
   padding-top: 72px;
   padding-bottom: 72px;
   padding-left: 135px;
-  color: $fontColor;
+  color: $mid-blue;
 
   .box-back {
     padding-top: 180px;
@@ -156,7 +154,6 @@ $fontColor: $mid-blue;
     padding-bottom: 144px;
     padding-left: 0px;
     padding-right: 0px;
-    color: $fontColor;
 
     .box {
       width: 632px;
@@ -184,9 +181,15 @@ $fontColor: $mid-blue;
     }
 
     .box-back2 {
-      padding-top: 280px;
+      padding-top: 320px;
 
       .topic-intro {
+        .about-topic {
+          h1,
+          h2 {
+            text-align: right;
+          }
+        }
         .cfp-deadline {
           .cfp-deadline-content {
             display: initial;
@@ -201,17 +204,31 @@ $fontColor: $mid-blue;
   }
 }
 
+@media screen and (max-width: 768px)  {
+  #cfp-intro {
+    .box-back2 {
+
+      .topic-intro {
+        .cfp-deadline {
+          .cfp-deadline-content {
+          }
+        }
+      }
+
+      .give-me-money {
+        margin-top: 200px;
+      }
+    }
+  }
+}
+
 @include sm {
   #cfp-intro {
     padding-top: 96px;
     padding-bottom: 60px;
     padding-left: 36px;
     padding-right: 36px;
-    color: $fontColor;
-
-    p {
     font-size: 0.9em;
-    }
 
     .box {
       width: initial;
@@ -221,7 +238,7 @@ $fontColor: $mid-blue;
     .box-back {
       padding-top: 0px;
       padding-bottom: 90px;
-      height: 1240px;
+      // height: 1240px;
 
       .past-sitcon {
         .cfp-img {
@@ -247,6 +264,66 @@ $fontColor: $mid-blue;
     .box-back2 {
       padding-top: 380px;
 
+      .give-me-money {
+        margin-top: 140px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 540px)  {
+  #cfp-intro {
+    .box-back2 {
+      padding-top: 360px;
+
+      .give-me-money {
+        margin-top: 180px;
+      }
+    }
+  }
+}
+
+@include xs {
+  #cfp-intro {
+    padding-top: 126px;
+    padding-bottom: 60px;
+    padding-left: 24px;
+    padding-right: 24px;
+
+    .box {
+      width: initial;
+      margin: 0;
+    }
+
+    .box-back {
+      padding-top: 0px;
+      padding-bottom: 90px;
+      // height: 1240px;
+
+      .past-sitcon {
+        .cfp-img {
+          width: 180px; //225
+          height: 121px; //152
+        }
+
+        .thumbnails {
+          display: flex;
+          flex-direction: column;
+          align-items: start;
+
+          .thumb-wrapper {
+            &:not(:last-child) {
+              margin-right: 0;
+              margin-bottom: 1em;
+            }
+          }
+        }
+      }
+    }
+
+    .box-back2 {
+      padding-top: 300px;
+
       .topic-intro {
         .cfp-deadline {
           .cfp-deadline-content {
@@ -256,7 +333,19 @@ $fontColor: $mid-blue;
       }
 
       .give-me-money {
-        margin-top: 140px;
+        margin-top: 180px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  #cfp-intro {
+    .box-back2 {
+      padding-top: 240px;
+
+      .give-me-money {
+        margin-top: 180px;
       }
     }
   }

src/assets/scss/hyperpoint.scss

@@ -37,13 +37,13 @@ $w414: 414px;
 }
 
 .desktop-only {
-  @media screen and (max-width: $w1366 - 1px) {
+  @media screen and (max-width: $w1024 - 1px) {
     display: none;
   }
 }
 
 .mobile-only {
-  @media screen and (min-width: $w1366) {
+  @media screen and (min-width: $w1024) {
     display: none;
   }
 }

src/assets/scss/util.scss

@@ -1,4 +1,5 @@
 @import 'color';
+@import 'hyperpoint';
 
 .text-center {
   text-align: center;
@@ -40,6 +41,10 @@
   display: inline-block;
   padding: 0.85em 1.25em;
 
+  @include sm {
+    padding: 0.5em 0.85em;
+  }
+
   font-size: 1.1em;
   font-weight: 900;
   border: none;