update

src/fe/mrna/css/all.css

@@ -13454,7 +13454,11 @@ p {
 .modal-research .modal-dialog {
   max-width: 40em;
 }
+.modal-research .modal-content {
+  box-shadow: 0.8em 0.8em 1em rgba(0, 0, 0, 0.3);
+}
 .modal-research .modal-body {
+  transition: 0.3s;
   padding: 2.5em 3em 2.3em;
 }
 .modal-research .modal-body h2 {
@@ -13589,6 +13593,12 @@ p {
   line-height: 1.4;
   font-size: 0.8em;
 }
+.modal-feature .modal__principle__text-pc {
+  display: block;
+}
+.modal-feature .modal__principle__text-mb {
+  display: none;
+}
 .modal-feature .modal__list {
   margin-top: 1em;
   display: flex;
@@ -13663,7 +13673,7 @@ p {
   font-weight: 400;
 }
 .modal-show .modal-body {
-  padding: 2.5em 2.5em 2.3em;
+  padding: 2.5em 2.3em 2.3em;
 }
 .modal-show .modal__title {
   margin-bottom: 0.5em;
@@ -13673,6 +13683,7 @@ p {
 }
 .modal-show .modal__operation {
   margin-top: 0.8em;
+  margin-bottom: 1.5em;
 }
 .modal-show .modal__operation__item {
   display: flex;
@@ -13700,9 +13711,274 @@ p {
 }
 .modal-show .modal__feature {
   display: flex;
-  height: 20em;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 7em;
+  margin-top: 0.8em;
+}
+.modal-show .modal__feature__item {
+  width: 19%;
+  height: 100%;
+  border-radius: 0.5em;
+  border: 0.1em solid rgba(134, 134, 134, 0.3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.modal-show .modal__feature__item p {
+  text-align: center;
+  font-size: 0.7em;
+}
+.modal-show .modal__feature__item p .red {
+  font-size: 1.3em;
+  color: #db1837;
 }
 
+.modal-test .modal-body {
+  padding: 2.5em 2.6em 2.3em;
+}
+.modal-test .modal__title {
+  margin-bottom: 0.4em;
+}
+.modal-test .modal__preface p {
+  color: #0699d2;
+}
+.modal-test .modal__game {
+  margin-top: 1.5em;
+}
+.modal-test .modal__game__item {
+  border-radius: 0.4em;
+  border: 0.1em solid #0699d2;
+  overflow: hidden;
+  margin-bottom: 0.8em;
+}
+.modal-test .modal__game__item.active .modal__game__ques {
+  padding: 0.5em 0.6em 0.6em;
+}
+.modal-test .modal__game__item.active .modal__game__btns {
+  display: none;
+}
+.modal-test .modal__game__ques {
+  position: relative;
+  background-color: #0699d2;
+  padding: 1em 0.6em 1.1em;
+}
+.modal-test .modal__game__ques p {
+  color: #ffffff;
+  line-height: 1;
+}
+.modal-test .modal__game__ques p .num {
+  font-size: 1.2em;
+  font-weight: 400;
+  margin-right: 0.7em;
+}
+.modal-test .modal__game__btns {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0.4em;
+  display: flex;
+}
+.modal-test .modal__game__btns__btn {
+  width: 2em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.3em;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.modal-test .modal__game__btns__btn img {
+  width: 65%;
+  height: auto;
+}
+.modal-test .modal__game__btns__btn:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+.modal-test .modal__game__ans {
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0.2em 0.6em 0.6em;
+  display: none;
+}
+.modal-test .modal__game__ans__icon {
+  width: 1.2em;
+  margin-right: 0.7em;
+}
+.modal-test .modal__game__ans__icon img {
+  width: 100%;
+  height: auto;
+}
+.modal-test .modal__game__ans__icon-circle {
+  width: 2em;
+}
+.modal-test .modal__game__ans p {
+  margin-top: 0.3em;
+}
+
+@media screen and (max-width: 992px) {
+  .modal-research .modal-dialog {
+    margin: 1.5em 0.7em;
+  }
+  .modal-research .modal-body {
+    padding: 2.5em 1em 1em;
+  }
+  .modal-research .modal-body h2 {
+    font-size: 1.2em;
+    font-weight: 600;
+  }
+  .modal-research .modal-body h3 {
+    font-size: 0.9em;
+    font-weight: 600;
+  }
+  .modal-research .modal-body h4 {
+    font-size: 0.8em;
+  }
+  .modal-research .modal-body p {
+    font-size: 0.7em;
+  }
+  .modal-proud {
+    flex: 0 0 3.5em;
+  }
+  .modal-proud .modal-body {
+    padding: 2.5em 1.5em 2em;
+  }
+  .modal-proud .modal__text h4 {
+    font-size: 0.8em;
+  }
+  .modal-proud .modal__text p {
+    font-size: 0.7em;
+    word-break: break-all;
+  }
+  .modal-proud .modal__pic {
+    flex: 0 0 3.5em;
+  }
+  .modal-proud .modal__additional__icon {
+    flex: 0 0 1.5em;
+    width: 1.5em;
+  }
+  .modal-feature .modal-body {
+    padding: 2.5em 1.3em 1em;
+  }
+  .modal-feature .modal__principle {
+    flex-wrap: wrap;
+  }
+  .modal-feature .modal__principle h3 {
+    font-size: 1em;
+    font-weight: 300;
+  }
+  .modal-feature .modal__principle__item {
+    width: 6.5em;
+    height: 6.5em;
+  }
+  .modal-feature .modal__principle__item-blue::before {
+    display: none;
+  }
+  .modal-feature .modal__principle__item {
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0.6em;
+  }
+  .modal-feature .modal__principle__item-blue {
+    padding: 0;
+  }
+  .modal-feature .modal__principle__title {
+    margin-bottom: 0;
+  }
+  .modal-feature .modal__principle__text p {
+    color: #868686;
+  }
+  .modal-feature .modal__principle__text-pc {
+    display: none;
+  }
+  .modal-feature .modal__principle__text-mb {
+    width: 8.5em;
+    display: block;
+  }
+  .modal-feature .modal__item {
+    width: 50%;
+    margin-bottom: 1em;
+  }
+  .modal-unlimit .modal-body {
+    padding: 2.5em 1em 1.3em;
+  }
+  .modal-unlimit .modal__preface {
+    margin-bottom: 1em;
+  }
+  .modal-unlimit .modal__intro {
+    display: block;
+    margin-top: 0;
+  }
+  .modal-unlimit .modal__intro__pic {
+    width: 65%;
+    margin-bottom: 2.2em;
+  }
+  .modal-unlimit .modal__intro ul {
+    width: 79%;
+    list-style: none;
+    padding-left: 1em;
+    margin-bottom: 0;
+  }
+  .modal-show .modal__preface {
+    margin-bottom: 1em;
+  }
+  .modal-show .modal__operation {
+    margin-bottom: 1em;
+  }
+  .modal-show .modal__feature {
+    flex-wrap: wrap;
+    height: auto;
+  }
+  .modal-show .modal__feature__item {
+    height: 5.5em;
+    margin-bottom: 0.5em;
+  }
+  .modal-show .modal__feature__item:nth-child(1), .modal-show .modal__feature__item:nth-child(2), .modal-show .modal__feature__item:nth-child(3) {
+    width: 32%;
+  }
+  .modal-show .modal__feature__item:nth-child(4), .modal-show .modal__feature__item:nth-child(5) {
+    width: 49%;
+  }
+  .modal-show .modal__feature__item p {
+    width: 100%;
+  }
+  .modal-show .modal__feature__item p .red {
+    font-size: 1.2em;
+    font-weight: 400;
+  }
+  .modal-test .modal-body {
+    padding: 2.5em 1em 0.7em;
+  }
+  .modal-test .modal__title {
+    margin-bottom: 0.2em;
+  }
+  .modal-test .modal__game {
+    margin-bottom: 0.6em;
+  }
+  .modal-test .modal__game__item.active .modal__game__ques {
+    padding: 0.3em 4.5em 0.5em 0.6em;
+  }
+  .modal-test .modal__game__ques {
+    padding: 0.3em 4.5em 0.5em 0.6em;
+  }
+  .modal-test .modal__game__ques p {
+    line-height: 1.3;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .modal-test .modal__game__btns__btn {
+    width: 1.8em;
+    height: 1.78em;
+  }
+  .modal-test .modal__game__ans__icon {
+    flex: 0 0 1em;
+    width: 1em;
+  }
+}
 .video {
   position: relative;
   width: 100%;

src/fe/mrna/css/component/_modal.scss

@@ -22,7 +22,11 @@
         &-dialog {
             max-width: 40em;
         }
+        &-content {
+            box-shadow: 0.8em 0.8em 1em rgba(#000, 0.3);
+        }
         &-body {
+            transition: 0.3s;
             padding: 2.5em 3em 2.3em;
             h2 {
                 color: $blue-d;
@@ -169,6 +173,12 @@
                     line-height: 1.4;
                     font-size: 0.8em;
                 }
+                &-pc {
+                    display: block;
+                }
+                &-mb {
+                    display: none;
+                }
             }
         }
         &__list {
@@ -253,7 +263,7 @@
     }
     .modal {
         &-body {
-            padding: 2.5em 2.5em 2.3em;
+            padding: 2.5em 2.3em 2.3em;
         }
         &__title {
             margin-bottom: 0.5em;
@@ -263,6 +273,7 @@
         }
         &__operation {
             margin-top: 0.8em;
+            margin-bottom: 1.5em;
             &__item {
                 display: flex;
                 align-items: flex-start;
@@ -290,7 +301,320 @@
         }
         &__feature {
             display: flex;
-            height: 20em;
+            justify-content: space-between;
+            align-items: flex-start;
+            height: 7em;
+            margin-top: 0.8em;
+            &__item {
+                width: 19%;
+                height: 100%;
+                border-radius: 0.5em;
+                border: 0.1em solid rgba($gray, 0.3);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                p {
+                    text-align: center;
+                    font-size: 0.7em;
+                    .red {
+                        font-size: 1.3em;
+                        color: $red;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.modal-test {
+    .modal {
+        &-body {
+            padding: 2.5em 2.6em 2.3em;
+        }
+        &__title {
+            margin-bottom: 0.4em;
+        }
+        &__preface {
+            p {
+                color: $blue;
+            }
+        }
+        &__game {
+            margin-top: 1.5em;
+            &__item {
+                border-radius: 0.4em;
+                border: 0.1em solid $blue;
+                overflow: hidden;
+                margin-bottom: 0.8em;
+                &.active {
+                    .modal__game__ques {
+                        padding: 0.5em 0.6em 0.6em;
+                    }
+                    .modal__game__btns {
+                        display: none;
+                    }
+                }
+            }
+            &__ques {
+                position: relative;
+                background-color: $blue;
+                padding: 1em 0.6em 1.1em;
+                p {
+                    color: $white;
+                    line-height: 1;
+                    .num {
+                        font-size: 1.2em;
+                        font-weight: 400;
+                        margin-right: 0.7em;
+                    }
+                }
+            }
+            &__btns {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 0.4em;
+                display: flex;
+                &__btn {
+                    width: 2em;
+                    height: 2em;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 0.3em;
+                    transition: 0.3s;
+                    cursor: pointer;
+                    img {
+                        width: 65%;
+                        height: auto;
+                    }
+                    &:hover {
+                        background-color: rgba($white, 0.3);
+                    }
+                }
+            }
+            &__ans {
+                justify-content: flex-start;
+                align-items: center;
+                padding: 0.2em 0.6em 0.6em;
+                display: none;
+                &__icon {
+                    width: 1.2em;
+                    margin-right: 0.7em;
+                    img {
+                        width: 100%;
+                        height: auto;
+                    }
+                    &-circle {
+                        width: 2em;
+                    }
+                }
+                p {
+                    margin-top: 0.3em;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .modal-research {
+        .modal {
+            &-dialog {
+                margin: 1.5em 0.7em;
+            }
+            &-body {
+                padding: 2.5em 1em 1em;
+                h2 {
+                    font-size: 1.2em;
+                    font-weight: 600;
+                }
+                h3 {
+                    font-size: 0.9em;
+                    font-weight: 600;
+                }
+                h4 {
+                    font-size: 0.8em;
+                }
+                p {
+                    font-size: 0.7em;
+                }
+            }
+        }
+    }
+    .modal-proud {
+        flex: 0 0 3.5em;
+        .modal {
+            &-body {
+                padding: 2.5em 1.5em 2em;
+            }
+            &__text {
+                h4 {
+                    font-size: 0.8em;
+                }
+                p {
+                    font-size: 0.7em;
+                    word-break: break-all;
+
+                }
+            }
+            &__pic {
+                flex: 0 0 3.5em;
+            }
+            &__additional {
+                &__icon {
+                    flex: 0 0 1.5em;
+                    width: 1.5em;
+                }
+            }
+        }
+    }
+    .modal-feature {
+        .modal {
+            &-body {
+                padding: 2.5em 1.3em 1em;
+            }
+            &__principle {
+                flex-wrap: wrap;
+                h3 {
+                    font-size: 1em;
+                    font-weight: 300;
+                }
+                &__item {
+                    width: 6.5em;
+                    height: 6.5em;
+                    &-blue {
+                        &::before {
+                            display: none;
+                        }
+                    }
+                }
+                &__item {
+                    padding: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-bottom: 0.6em;
+                    &-blue {
+                        padding: 0;
+                    }
+                }
+                &__title {
+                    margin-bottom: 0;
+                }
+                &__text {
+                    p {
+                        color: $gray;
+                    }
+                    &-pc {
+                        display: none;
+                    }
+                    &-mb {
+                        width: 8.5em;
+                        display: block;
+                    }
+                }
+            }
+            &__item {
+                width: 50%;
+                margin-bottom: 1em;
+            }
+        }
+    }
+    .modal-unlimit {
+        .modal {
+            &-body {
+                padding: 2.5em 1em 1.3em;
+            }
+            &__preface {
+                margin-bottom: 1em;
+            }
+            &__intro {
+                display: block;
+                margin-top: 0;
+                &__pic {
+                    width: 65%;
+                    margin-bottom: 2.2em;
+                }
+                ul {
+                    width: 79%;
+                    list-style: none;
+                    padding-left: 1em;
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+    .modal-show {
+        .modal {
+            &__preface {
+                margin-bottom: 1em;
+            }
+            &__operation {
+                margin-bottom: 1em;
+            }
+            &__feature {
+                flex-wrap: wrap;
+                height: auto;
+                &__item {
+                    height: 5.5em;
+                    margin-bottom: 0.5em;
+                    &:nth-child(1), &:nth-child(2), &:nth-child(3) {
+                        width: 32%;
+                    }
+                    &:nth-child(4), &:nth-child(5) {
+                        width: 49%;
+                    }
+                    p {
+                        width: 100%;
+                        .red {
+                            font-size: 1.2em;
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .modal-test {
+        .modal {
+            &-body {
+                padding: 2.5em 1em 0.7em;
+            }
+            &__title {
+                margin-bottom: 0.2em;
+            }
+            &__game {
+                margin-bottom: 0.6em;
+                &__item {
+                    &.active {
+                        .modal__game__ques {
+                            padding: 0.3em 4.5em 0.5em 0.6em;
+                        }
+                    }
+                }
+                &__ques {
+                    padding: 0.3em 4.5em 0.5em 0.6em;
+                    p {
+                        line-height: 1.3;
+                        display: flex;
+                        justify-content: flex-start;
+                        align-items: center;
+                    }
+                }
+                &__btns {
+                    &__btn {
+                        width: 1.8em;
+                        height: 1.78em;
+                    }
+                }
+                &__ans {
+                    &__icon {
+                        flex: 0 0 1em;
+                        width: 1em;
+                    }
+                }
+            }
         }
     }
 }

src/fe/mrna/index.html

@@ -299,7 +299,7 @@
               </p>
             </div>
           </div>
-          <div class="research__item" data-research="proud">
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#testModal">
             <div class="research__pic">
               <img src="./images/research-pic-test.png" alt="">
             </div>
@@ -614,7 +614,7 @@
               <div class="modal__principle__title">
                 <h3>疫苗原理 </h3>
               </div>
-              <div class="modal__principle__text">
+              <div class="modal__principle__text modal__principle__text-pc">
                 <p>
                   注射被稱為抗原的滅活病毒蛋白質，刺激人體免疫系統識別病毒，當病毒再次出現時快速被消滅或控制。 <span>〔8〕</span>
                 </p>
@@ -622,14 +622,24 @@
             </div>
             <div class="modal__principle__item modal__principle__item-red">
               <div class="modal__principle__title">
-                <h3>mRNA疫苗原理  </h3>
+                <h3>mRNA<br class="d-lg-none">疫苗原理</h3>
               </div>
-              <div class="modal__principle__text">
+              <div class="modal__principle__text modal__principle__text-pc">
                 <p>
                   不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
                 </p>
               </div>
             </div>
+            <div class="modal__principle__text modal__principle__text-mb">
+              <p>
+                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
+              </p>
+            </div>
+            <div class="modal__principle__text modal__principle__text-mb">
+              <p>
+                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
+              </p>
+            </div>
           </div>
           <h3>mRNA疫苗的五大特色</h3>
           <div class="modal__list">
@@ -686,7 +696,10 @@
           </div>
           <div class="modal__intro">
             <div class="modal__intro__pic">
-              <img src="./images/rearch-popup/unlimit-pic.png" alt="">
+              <picture>
+                <source media="(max-width: 992px)" srcset="./images/rearch-popup/unlimit-pic_mb.png">
+                <img src="./images/rearch-popup/unlimit-pic.png" alt="">
+              </picture>
             </div>
             <ul>
               <li>
@@ -742,7 +755,7 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         <div class="modal-body">
           <div class="modal__title">
-            <h2>mRNA疫苗如何在疫情大展身手</h4>
+            <h2>mRNA疫苗<br class="d-lg-block">如何在疫情大展身手</h4>
           </div>
           <div class="modal__preface">
             <p>2023年諾貝爾生醫獎由匈牙利裔的美籍科學家卡里科（Katalin Kariko），和美國科學家魏斯曼（Drew Weissman）共同獲獎。兩人長期致力於mRNA疫苗研發，因為在核苷（nucleoside）修飾的有關發現，得以促成開發有效的COVID-19信使核糖核酸（mRNA）疫苗，故獲得醫學獎殊榮。
@@ -825,7 +838,12 @@
               </p>
             </div>
             <div class="modal__feature__item">
-              <p>
+              <p class="d-lg-none">
+                在 mRNA 按指令完成<br>
+                任務後細胞很快會將其<br>
+                <span class="red">分解和消除</span>
+              </p>
+              <p class="d-none d-lg-block">
                 在 mRNA 按<br>
                 指令完成任務後<br>
                 細胞很快會將其<br>
@@ -833,12 +851,17 @@
               </p>
             </div>
             <div class="modal__feature__item">
-              <p>
+              <p class="d-lg-none">
+                與所有其他類型的疫苗<br>
+                一樣在安全及效力方面同樣<br>
+                <span class="red">具嚴格法規<br class="d-none d-lg-block">審核標準</span>
+                
+              </p>
+              <p class="d-none d-lg-block">
                 與所有其他類型的<br>
                 疫苗一樣在安全<br>
                 及效力方面同樣<br>
-                <span class="red">具嚴格法規
-                  審核標準</span>
+                <span class="red">具嚴格法規<br>審核標準</span>
               </p>
             </div>
           </div>
@@ -847,6 +870,129 @@
     </div>
   </div>
 
+  <div class="modal modal-research modal-test fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-body">
+          <div class="modal__title">
+            <h2>mRNA小試身手</h4>
+          </div>
+          <div class="modal__preface">
+            <p>你好像更了解mRNA了，來點小試身手吧 !</p>
+          </div>
+          <div class="modal__game">
+            <div class="modal__game__item" data-num="1">
+              <div class="modal__game__ques">
+                <div class="modal__game__btns">
+                  <div class="modal__game__btns__btn modal__game__btns__btn-circle">
+                    <img src="./images/rearch-popup/circle-white.png" alt="">
+                  </div>
+                  <div class="modal__game__btns__btn modal__game__btns__btn-cross">
+                    <img src="./images/rearch-popup/cross-white.png" alt="">
+                  </div>
+                </div>
+                <p>
+                  <span class="num">Q1</span>mRNA如同食譜，身體就是按照它來創建基因代碼。
+                </p>
+              </div>
+              <div class="modal__game__ans">
+                <div class="modal__game__ans__icon">
+                  <img src="./images/rearch-popup/cross-red.png" alt="">
+                </div>
+                <p>是DNA；mRNA如同把食譜給廚師的信使，透過轉錄使細胞可根據它來製造蛋白質。</p>
+              </div>
+            </div>
+            <div class="modal__game__item" data-num="2">
+              <div class="modal__game__ques">
+                <div class="modal__game__btns">
+                  <div class="modal__game__btns__btn modal__game__btns__btn-circle">
+                    <img src="./images/rearch-popup/circle-white.png" alt="">
+                  </div>
+                  <div class="modal__game__btns__btn modal__game__btns__btn-cross">
+                    <img src="./images/rearch-popup/cross-white.png" alt="">
+                  </div>
+                </div>
+                <p>
+                  <span class="num">Q2</span>mRNA會經由疫苗注射而穿透細胞的細胞核影響DNA。
+                </p>
+              </div>
+              <div class="modal__game__ans">
+                <div class="modal__game__ans__icon">
+                  <img src="./images/rearch-popup/cross-red.png" alt="">
+                </div>
+                <p>mRNA無法進入細胞核。</p>
+              </div>
+            </div>
+            <div class="modal__game__item" data-num="3">
+              <div class="modal__game__ques">
+                <div class="modal__game__btns">
+                  <div class="modal__game__btns__btn modal__game__btns__btn-circle">
+                    <img src="./images/rearch-popup/circle-white.png" alt="">
+                  </div>
+                  <div class="modal__game__btns__btn modal__game__btns__btn-cross">
+                    <img src="./images/rearch-popup/cross-white.png" alt="">
+                  </div>
+                </div>
+                <p>
+                  <span class="num">Q3</span>mRNA經由疫苗進入身體後不會長期滯留於體內。
+                </p>
+              </div>
+              <div class="modal__game__ans">
+                <div class="modal__game__ans__icon modal__game__ans__icon-circle">
+                  <img src="./images/rearch-popup/circle-green.png" alt="">
+                </div>
+                <p>mRNA 和包裹它的奈米脂質顆粒，從疫苗中引入體內後，會在自然狀態下在2天內分解並離開你的身體，且無其他毒性風險。</p>
+              </div>
+            </div>
+            <div class="modal__game__item" data-num="4">
+              <div class="modal__game__ques">
+                <div class="modal__game__btns">
+                  <div class="modal__game__btns__btn modal__game__btns__btn-circle">
+                    <img src="./images/rearch-popup/circle-white.png" alt="">
+                  </div>
+                  <div class="modal__game__btns__btn modal__game__btns__btn-cross">
+                    <img src="./images/rearch-popup/cross-white.png" alt="">
+                  </div>
+                </div>
+                <p>
+                  <span class="num">Q4</span>mRNA技術永遠只能針對COVID-19做使用。
+                </p>
+              </div>
+              <div class="modal__game__ans">
+                <div class="modal__game__ans__icon">
+                  <img src="./images/rearch-popup/cross-red.png" alt="">
+                </div>
+                <p>目前mRNA技術已開始往其他疾病領域發展，未來可能解決癌症、罕見病、HPV等疾病。</p>
+              </div>
+            </div>
+            <div class="modal__game__item" data-num="5">
+              <div class="modal__game__ques">
+                <div class="modal__game__btns">
+                  <div class="modal__game__btns__btn modal__game__btns__btn-circle">
+                    <img src="./images/rearch-popup/circle-white.png" alt="">
+                  </div>
+                  <div class="modal__game__btns__btn modal__game__btns__btn-cross">
+                    <img src="./images/rearch-popup/cross-white.png" alt="">
+                  </div>
+                </div>
+                <p>
+                  <span class="num">Q5</span>一般疫苗原理與mRNA疫苗原理的差異在於是否是注射抗原本身。
+                </p>
+              </div>
+              <div class="modal__game__ans">
+                <div class="modal__game__ans__icon modal__game__ans__icon-circle">
+                  <img src="./images/rearch-popup/circle-green.png" alt="">
+                </div>
+                <p>一般疫苗會注射抗原刺激免疫系統判別病毒進行消滅；mRNA疫苗則是將抗原的基因序列翻譯成的mRNA，誘導身體產生真實的抗體。</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="lib/jquery-3.6.4.min.js"></script>
   <script src="https://www.youtube.com/iframe_api"></script>
   <script src="lib/swiper.min.js"></script>

src/fe/mrna/js/main.js

@@ -76,7 +76,7 @@ main = function () {
 		// 	lenisHandler();
 		// }
 
-		// $("#showModal").modal('show');
+		$("#showModal").modal('show');
 
 		loadImagesAndPerformAction(imgUrls, startHandler);
 
@@ -114,6 +114,20 @@ main = function () {
 			autoPlayHistory(currentHistoryIdx);
 		});
 
+		$(".modal-test .modal__game__btns__btn").click(function(){
+			console.log("modal__game__item click")
+			let num = $(this).parents(".modal__game__item").data("num");
+			modalGameItemAni(num)
+			$(this).parents(".modal__game__item").addClass("active");
+			$(this).parent(".modal__game__btns").hide();
+		});
+
+		$("#testModal").on('hidden.bs.modal', event => {
+			$("#testModal .modal__game__item").removeClass("active");
+			$("#testModal .modal__game__btns").css("display", "flex")
+			$("#testModal .modal__game__ans").hide();
+		})
+
 		// 測試用
 		// gsap.to(".game__item-start", { duration: 0.5, autoAlpha: 0 });
 		// gsap.to(".game__item-main", { duration: 0.5, autoAlpha: 0 });
@@ -122,6 +136,10 @@ main = function () {
 		// gameResultCal()
 	}
 
+	function modalGameItemAni(num) {
+		$(".modal-test .modal__game__item:nth-child("+num+") .modal__game__ans").css("display", "flex");
+	}
+
 	// 初始元素動態
 	function elementReset() {
 		// gsap.set(".qa__item", { y: 50, autoAlpha: 0 });