update

src/fe/mrna/css/all.css

@@ -13122,6 +13122,20 @@ p {
   background-color: rgba(134, 134, 134, 0.2);
 }
 
+.goToLine {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4.5em;
+  z-index: 2;
+  cursor: pointer;
+}
+.goToLine img {
+  width: 100%;
+  height: auto;
+}
+
 @media screen and (max-width: 992px) {
   .wrapper {
     padding-top: 9em;
@@ -13162,6 +13176,9 @@ p {
     content: "";
     left: -0.27em;
   }
+  .goToLine {
+    width: 8.5em;
+  }
 }
 .header {
   position: fixed;
@@ -13184,7 +13201,7 @@ p {
 .header__name h1 {
   color: #0699d2;
   font-weight: 500;
-  font-size: 2em;
+  font-size: 2.5em;
   margin: 0;
 }
 .header__nav {
@@ -13201,16 +13218,20 @@ p {
   text-decoration: none;
   display: inline-block;
   margin: 0 2.3em;
+  cursor: pointer;
 }
 .header__nav__item p {
   font-weight: 500;
-  color: #393f42;
+  color: #0699d2;
   font-size: 1.1em;
   line-height: 1;
-  transition: 0.3s;
+  transition: 0.5s;
+  cursor: pointer;
 }
 .header__nav__item:hover p {
-  color: #0699d2;
+  color: #db1837;
+  transform: scale(1.2);
+  margin-top: -0.5em;
 }
 .header__nav__item.active .header__nav__item__line {
   position: absolute;
@@ -13435,6 +13456,21 @@ p {
     bottom: auto;
   }
 }
+.modal__video {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 52.5%;
+  margin-bottom: 1em;
+}
+.modal__video iframe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
 .modal-research::before {
   content: "";
   width: 300%;
@@ -13488,7 +13524,7 @@ p {
 }
 
 .modal-proud .modal__title {
-  margin-bottom: 0.7em;
+  margin-bottom: 1em;
 }
 .modal-proud .modal__preface {
   margin-bottom: 0.5em;
@@ -13685,7 +13721,6 @@ p {
 }
 .modal-show .modal__operation {
   margin-top: 0.8em;
-  margin-bottom: 1.5em;
 }
 .modal-show .modal__operation__item {
   display: flex;
@@ -13697,7 +13732,7 @@ p {
 }
 .modal-show .modal__operation__step {
   background-color: #0699d2;
-  padding: 0.2em 0.5em;
+  padding: 0.2em 0.5em 0.4em;
   border-radius: 1em;
   margin-right: 0.7em;
 }
@@ -13717,6 +13752,7 @@ p {
   align-items: flex-start;
   height: 7em;
   margin-top: 0.8em;
+  margin-bottom: 1em;
 }
 .modal-show .modal__feature__item {
   width: 19%;
@@ -13866,6 +13902,7 @@ p {
   }
   .modal-feature .modal__principle {
     flex-wrap: wrap;
+    align-items: flex-start;
   }
   .modal-feature .modal__principle h3 {
     font-size: 1em;
@@ -13919,7 +13956,7 @@ p {
   }
   .modal-unlimit .modal__intro__pic {
     width: 65%;
-    margin-bottom: 2.2em;
+    margin-bottom: 1.5em;
   }
   .modal-unlimit .modal__intro ul {
     width: 100%;
@@ -13951,7 +13988,7 @@ p {
     width: 100%;
   }
   .modal-show .modal__feature__item p .red {
-    font-size: 1.2em;
+    font-size: 1.1em;
     font-weight: 400;
   }
   .modal-test .modal-body {
@@ -14719,12 +14756,16 @@ p {
   text-decoration: none;
   margin: 0 1.2em;
 }
+.moreref__item-line .moreref__pic {
+  padding: 0;
+  overflow: hidden;
+}
 .moreref__pic {
   border: 1px solid rgba(134, 134, 134, 0.3);
   border-radius: 0.7em;
   padding: 1em;
   height: 13.8em;
-  margin-bottom: 1em;
+  margin-bottom: 1.5em;
 }
 .moreref__pic img {
   height: 100%;
@@ -14734,10 +14775,20 @@ p {
   background-color: #0699d2;
   padding: 0.5em 2em;
   border-radius: 2em;
+  box-shadow: 0 0 0 1em transparent;
+  animation: pulse2 2s infinite;
+  cursor: pointer;
+  transition: 0.3s;
 }
 .moreref__name p {
   color: #ffffff;
   font-size: 1.1em;
+  cursor: pointer;
+}
+@keyframes pulse2 {
+  0% {
+    box-shadow: 0 0 0 0 #0699d2;
+  }
 }
 .moreref__logo {
   width: 18em;
@@ -14865,21 +14916,13 @@ p {
   border: 0.2em solid #0699d2;
   transition: box-shadow 0.3s;
 }
-.research__item:hover .research__name {
-  background-color: #0699d2;
-  transition: 0.3s;
-}
-.research__item:hover .research__name p {
-  color: #ffffff;
-  transition: 0.3s;
-}
 .research__pic {
   border: 0.1em solid rgba(6, 153, 210, 0.3);
   box-shadow: 0.4em 0.4em 0.6em rgba(0, 0, 0, 0.1);
   border-radius: 0.5em;
   width: 15em;
   overflow: hidden;
-  margin-bottom: 0.8em;
+  margin-bottom: 1.5em;
 }
 .research__pic img {
   width: 100%;
@@ -14889,11 +14932,26 @@ p {
   display: inline-block;
   border-radius: 1.5em;
   padding: 0.6em 1.5em;
+  box-shadow: 0 0 0 1em transparent;
+  animation: pulse 2s infinite;
+  background-color: #0699d2;
+  cursor: pointer;
 }
 .research__name p {
   text-align: center;
   color: #0070a0;
   font-size: 1.2em;
+  color: #ffffff;
+  cursor: pointer;
+}
+.research__name p span {
+  display: inline-block;
+  font-size: 0.9em;
+}
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 #0699d2;
+  }
 }
 
 @media screen and (max-width: 992px) {
@@ -14921,7 +14979,7 @@ p {
     padding: 0.8em 2.5em;
   }
   .research__name p {
-    font-size: 2.1em;
+    font-size: 1.6em;
     white-space: nowrap;
   }
 }

src/fe/mrna/css/base/_base.scss

@@ -130,6 +130,20 @@ p {
   }
 }
 
+.goToLine {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4.5em;
+  z-index: 2;
+  cursor: pointer;
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
 @media screen and (max-width: 992px) {
   .wrapper {
     padding-top: 9em;
@@ -179,4 +193,7 @@ p {
       left: -0.27em;
     }
   }
+  .goToLine {
+    width: 8.5em;
+  }
 }

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

@@ -1,4 +1,20 @@
 @charset "UTF-8";
+.modal {
+    &__video {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 52.5%;
+        margin-bottom: 1em;
+        iframe {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+        }
+    }
+}
 .modal-research {
     &::before {
         content: "";
@@ -58,7 +74,7 @@
 .modal-proud {
     .modal {
         &__title {
-            margin-bottom: 0.7em;
+            margin-bottom: 1em;
         }
         &__preface {
             margin-bottom: 0.5em;
@@ -273,7 +289,6 @@
         }
         &__operation {
             margin-top: 0.8em;
-            margin-bottom: 1.5em;
             &__item {
                 display: flex;
                 align-items: flex-start;
@@ -284,7 +299,7 @@
             }
             &__step {
                 background-color: $blue;
-                padding: 0.2em 0.5em;
+                padding: 0.2em 0.5em 0.4em;
                 border-radius: 1em;
                 margin-right: 0.7em;
                 p {
@@ -305,6 +320,7 @@
             align-items: flex-start;
             height: 7em;
             margin-top: 0.8em;
+            margin-bottom: 1em;
             &__item {
                 width: 19%;
                 height: 100%;
@@ -477,6 +493,7 @@
             }
             &__principle {
                 flex-wrap: wrap;
+                align-items: flex-start;
                 h3 {
                     font-size: 1em;
                     font-weight: 300;
@@ -535,7 +552,7 @@
                 margin-top: 0;
                 &__pic {
                     width: 65%;
-                    margin-bottom: 2.2em;
+                    margin-bottom: 1.5em;
                 }
                 ul {
                     width: 100%;
@@ -569,7 +586,7 @@
                     p {
                         width: 100%;
                         .red {
-                            font-size: 1.2em;
+                            font-size: 1.1em;
                             font-weight: 400;
                         }
                     }

src/fe/mrna/css/layout/_header.scss

@@ -19,7 +19,7 @@
         h1 {
             color: $blue;
             font-weight: 500;
-            font-size: 2em;
+            font-size: 2.5em;
             margin: 0;
         }
     }
@@ -36,16 +36,20 @@
             text-decoration: none;
             display: inline-block;
             margin: 0 2.3em;
+            cursor: pointer;
             p {
                 font-weight: 500;
-                color: $black;
+                color: $blue;
                 font-size: 1.1em;
                 line-height: 1;
-                transition: 0.3s;
+                transition: 0.5s;
+                cursor: pointer;
             }
             &:hover {
                 p {
-                    color: $blue;
+                    color: $red;
+                    transform: scale(1.2);
+                    margin-top: -0.5em;
                 }
             }
             &.active {

src/fe/mrna/css/section/_moreref.scss

@@ -21,13 +21,19 @@
         align-items: center;
         text-decoration: none;
         margin: 0 1.2em;
+        &-line {
+            .moreref__pic {
+                padding: 0;
+                overflow: hidden;
+            }
+        }
     }
     &__pic {
         border: 1px solid rgba($gray, 0.3);
         border-radius: 0.7em;
         padding: 1em,;
         height: 13.8em;
-        margin-bottom: 1em;
+        margin-bottom: 1.5em;
         img {
             height: 100%;
             width: auto;
@@ -37,9 +43,23 @@
         background-color: $blue;
         padding: 0.5em 2em;
         border-radius: 2em;
+        box-shadow: 0 0 0 1em transparent;
+        animation: pulse2 2s infinite;
+        cursor: pointer;
+        transition: 0.3s;
         p {
             color: $white;
             font-size: 1.1em;
+            cursor: pointer;
+        }
+        // &:hover {
+        //     animation: none;
+        //     transform: scale(1.1);
+        // }
+    }
+    @keyframes pulse2 {
+        0% {
+            box-shadow: 0 0 0 0 $blue;
         }
     }
     &__logo {

src/fe/mrna/css/section/_research.scss

@@ -32,14 +32,14 @@
                 border: 0.2em solid $blue;
                 transition: box-shadow 0.3s;
             }
-            .research__name {
-                background-color: $blue;
-                transition: 0.3s;
-                p {
-                    color: $white;
-                    transition: 0.3s;
-                }
-            }
+            // .research__name {
+            //     transition: 0.3s;
+            //     animation: none;
+            //     transform: scale(1.1);
+            //     p {
+            //         transition: 0.3s;
+            //     }
+            // }
         }
     }
     &__pic {
@@ -48,7 +48,7 @@
         border-radius: 0.5em;
         width: 15em;
         overflow: hidden;
-        margin-bottom: 0.8em;
+        margin-bottom: 1.5em;
         img {
             width: 100%;
             height: auto;
@@ -58,10 +58,25 @@
         display: inline-block;
         border-radius: 1.5em;
         padding: 0.6em 1.5em;
+        box-shadow: 0 0 0 1em transparent;
+        animation: pulse 2s infinite;
+        background-color: $blue;
+        cursor: pointer;
         p {
             text-align: center;
             color: $blue-d;
             font-size: 1.2em;
+            color: $white;
+            cursor: pointer;
+            span {
+                display: inline-block;
+                font-size: 0.9em;
+            }
+        }
+    }
+    @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 $blue;
         }
     }
 }
@@ -93,7 +108,7 @@
             border-radius: 2.5em;
             padding: 0.8em 2.5em;
             p {
-                font-size: 2.1em;
+                font-size: 1.6em;
                 white-space: nowrap;
             }
         }

src/fe/mrna/index.html

@@ -72,27 +72,30 @@
       </div>
       <nav class="header__nav">
         <a href="https://event.leecy.org.tw/mrna/#expert" class="header__nav__item header__nav__item-expert" data-anchor="expert">
-          <p>專家教你認識 mRNA</p>
-          <div class="header__nav__item__line"></div>
-        </a>
-        <a href="https://event.leecy.org.tw/mrna/#understand" class="header__nav__item header__nav__item-understand" data-anchor="understand">
-          <p>談談mRNA</p>
+          <p>mRNA發展室</p>
           <div class="header__nav__item__line"></div>
         </a>
         <a href="https://event.leecy.org.tw/mrna/#research" class="header__nav__item header__nav__item-research" data-anchor="research">
-          <p>進入mRNA研究室</p>
+          <p>mRNA研究室</p>
           <div class="header__nav__item__line"></div>
         </a>
         <a href="https://event.leecy.org.tw/mrna/#qa" class="header__nav__item header__nav__item-qa" data-anchor="qa">
-          <p>mRNA疫苗常見問題</p>
+          <p>mRNA解答室</p>
           <div class="header__nav__item__line"></div>
         </a>
         <a href="https://event.leecy.org.tw/mrna/#moreref" class="header__nav__item header__nav__item-moreref" data-anchor="moreref">
-          <p>更多參考資訊</p>
+          <p>mRNA輔導室</p>
+          <div class="header__nav__item__line"></div>
+        </a>
+        <a href="https://lin.ee/LP8wXFd" target="_blank" class="header__nav__item header__nav__item-line">
+          <p>mRNA客服室</p>
           <div class="header__nav__item__line"></div>
         </a>
       </nav>
     </header>
+    <a class="goToLine" href="https://lin.ee/LP8wXFd" target="_blank">
+      <img src="./images/button-float.png" >
+    </a>
     <!-- expert 專家教a你認識 mRNA -->
     <section id="expert" class="section expert">
       <div class="bg expert__bg">
@@ -143,7 +146,7 @@
             <img src="./images/understand-title-bg.png" alt="">
           </div>
           <div class="subtitle">
-            <p>談談mRNA</p>
+            <p>mRNA發展室</p>
           </div>
           <div class="title">
             <h2>一分鐘認識mRNA</h2>
@@ -176,7 +179,7 @@
             <img src="./images/history-title-bg.png" alt="">
           </div>
           <div class="subtitle">
-            <p>談談mRNA</p>
+            <p>mRNA發展室</p>
           </div>
           <div class="title">
             <h2>踏上mRNA歷史軌跡</h2>
@@ -287,7 +290,7 @@
             </picture>
           </div>
           <div class="title">
-            <h2>進入mRNA 研究室</h2>
+            <h2>mRNA研究室</h2>
           </div>
           <div class="subtitle">
             <p>- 點擊下方圖示了解更多 -</p>
@@ -300,7 +303,7 @@
             </div>
             <div class="research__name">
               <p>
-                引以為傲的mRNA疫苗
+                第一課 <span>▶▶</span> mRNA疫苗 
               </p>
             </div>
           </div>
@@ -310,27 +313,27 @@
             </div>
             <div class="research__name">
               <p>
-                mRNA疫苗的特色
+                第二課 <span>▶▶</span> mRNA疫苗特色
               </p>
             </div>
           </div>
-          <div class="research__item" data-bs-toggle="modal" data-bs-target="#unlimitModal">
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#showModal">
             <div class="research__pic">
-              <img src="./images/research-pic-unlimit.png" alt="">
+              <img src="./images/research-pic-show.png" alt="">
             </div>
             <div class="research__name">
               <p>
-                mRNA疫苗的無限可能
+                第三課 <span>▶▶</span> 疫情下的mRNA疫苗
               </p>
             </div>
           </div>
-          <div class="research__item" data-bs-toggle="modal" data-bs-target="#showModal">
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#unlimitModal">
             <div class="research__pic">
-              <img src="./images/research-pic-show.png" alt="">
+              <img src="./images/research-pic-unlimit.png" alt="">
             </div>
             <div class="research__name">
               <p>
-                mRNA疫苗如何在疫情大展身手
+                第四課 <span>▶▶</span> mRNA疫苗無限可能
               </p>
             </div>
           </div>
@@ -340,7 +343,7 @@
             </div>
             <div class="research__name">
               <p>
-                mRNA小試身手
+                mRNA知識檢定
               </p>
             </div>
           </div>
@@ -362,7 +365,7 @@
             <img src="./images/qa-title-bg.png" alt="">
           </div>
           <div class="title">
-            <h2>mRNA疫苗常見問題</h2>
+            <h2>mRNA解答室</h2>
           </div>
         </div>
         <p class="qa__desc">
@@ -546,7 +549,7 @@
               <img src="./images/moreref-line.png" alt="">
             </div>
             <div class="moreref__name">
-              <p>來錄用你的 mRNA 健康管家！</p>
+              <p>立即錄用健康管家</p>
             </div>
           </a>
           <a class="moreref__item moreref__item-map" href="https://covid19vaccine.cdc.gov.tw/" target="_blank">
@@ -554,7 +557,7 @@
               <img src="./images/moreref-map.png" alt="">
             </div>
             <div class="moreref__name">
-              <p>搜尋醫療院所  請前往疾管署</p>
+              <p>搜尋醫療院所</p>
             </div>
           </a>
         </div>
@@ -567,7 +570,31 @@
     <footer class="footer">
       <h2>參考資料</h2>
       <p>
-        〔1〕 Expression kinetics of nucleoside-modified mRNA delivered in lipid nanoparticles to mice by various routes. J Control Release (2015) Table 1).   〔2〕 The Tangled History of mRNA Vaccines. Nature (2021) (Page (the beginnings of mRNA], Paragraph 1, Line 5)   〔3〕 The Tangled History of mRNA Vaccines. Nature (2021) (Figure 2)   〔4〕COV-Power of mRNA – Infographic-US- English   〔5〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉   〔6〕CanImmunize/mRNA 101/ <a href="https://learn.canimmunize.ca/en/learn-about-immunization/mrna-101" target="_blank">https://learn.canimmunize.ca/en/learn-about-immunization/mrna-101</a>   〔7〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉   〔8〕BBC News/Could mRNA make us superman?/<a href="https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman" target="_blank">https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman</a>   〔9〕BBC News/Could mRNA make us superman?/<a href="https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman" target="_blank">https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman</a>   〔10〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色   〔11〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色   〔12〕公視新聞網/2023諾貝爾生醫獎 研發mRNA疫苗2科學家獲得 : <a href="https://news.pts.org.tw/article/659906" target="_blank">https://news.pts.org.tw/article/659906</a>   〔13〕 Taiwan CDC/COVID-19疫苗Q&A/5.疫苗安全: <a href="https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA" target="_blank">https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA</a>   〔14〕衛生福利部：<a href="https://covid19.mohw.gov.tw/ch/cp-4822-74703-205.html" target="_blank">https://covid19.mohw.gov.tw/ch/cp-4822-74703-205.html</a>   〔15〕 World Health Organization. COVID-19 advice for the public: getting vaccinated. Updated April 13, 2022. Accessed February 16, 2023. <a href="https://www.who.int/emergencies/diseases/novelcoronavirus-2019/covid-19-vaccines/advice " target="_blank">https://www.who.int/emergencies/diseases/novelcoronavirus-2019/covid-19-vaccines/advice </a>   〔16〕Flacco ME, Acuti Martellucci C,Baccolini V, De Vito C, Renzi E,Villari P and Manzoli L (2022)COVID-19 vaccines reduce the risk of SARS-CoV-2 reinfection and hospitalization: Meta-analysis. Front. Med. 9:1023507.doi: 10.3389/fmed.2022.1023507   〔17〕Moderna HK Campaign landing page / World Health Organization. Side Effects of COVID-19 Vaccines. Updated31 March 2021. Accessed on 14 October 2022. <a href="https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines" target="_blank">https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines</a>   〔18〕Moderna HK Campaign Landing Page / World Health Organization COVID-19: Vaccines and vaccine safety. Updated 28 June 2023. Accessed on 8 August 2023. <a href="https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines" target="_blank">https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines</a>   〔19〕Taiwan CDC/COVID-19疫苗Q&A/5.疫苗安全: <a href="https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA" target="_blank">https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA</a>   〔20〕Taiwan CDC/COVID-19疫苗Q&A/8.孕婦及哺乳婦女: <a href="https://www.cdc.gov.tw/Category/QAPage/aVLK2xpg8y3KYmkLK8X6iA" target="_blank">https://www.cdc.gov.tw/Category/QAPage/aVLK2xpg8y3KYmkLK8X6iA</a>   〔21〕台灣感染症醫學會/6個月-5歲之嬰幼兒疫苗接種建議: <a href="https://fightcovid19.com.tw/" target="_blank">https://fightcovid19.com.tw/</a>
+        〔1〕 Expression kinetics of nucleoside-modified mRNA delivered in lipid nanoparticles to mice by various routes. J Control Release (2015) Table 1).   
+        〔2〕 The Tangled History of mRNA Vaccines. Nature (2021) (Page (the beginnings of mRNA], Paragraph 1, Line 5)  
+        〔3〕 The Tangled History of mRNA Vaccines. Nature (2021) (Figure 2)  
+        〔4〕COV-Power of mRNA – Infographic-US- English   
+        〔5〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉  
+        〔6〕CanImmunize/mRNA 101/ <a target="_blank" href="https://learn.canimmunize.ca/en/learn-about-immunization/mrna-101">https://learn.canimmunize.ca/en/learn-about-immunization/mrna-101</a>
+        〔7〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉  
+        〔8〕BBC News/Could mRNA make us superman?/<a target="_blank" href="https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman">https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman</a>
+        〔9〕BBC News/Could mRNA make us superman?/<a target="_blank" href="https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman">https://www.bbc.com/future/article/20211122-could-mrna-make-us-superhuman</a>
+        〔10〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色  
+        〔11〕公視新聞網/2023諾貝爾生醫獎 研發mRNA疫苗2科學家獲得 : <a target="_blank" href="https://news.pts.org.tw/article/659906">https://news.pts.org.tw/article/659906</a>
+        〔12〕 Taiwan CDC/COVID-19疫苗Q&A/5.疫苗安全: <a target="_blank" href="https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA">https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA</a>
+        〔13〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色  
+        〔14〕衛生福利部：<a target="_blank" href="https://covid19.mohw.gov.tw/ch/cp-4822-74703-205.html">https://covid19.mohw.gov.tw/ch/cp-4822-74703-205.html</a>
+        〔15〕 World Health Organization. COVID-19 advice for the public: getting vaccinated. Updated April 13, 2022. Accessed February 16, 2023. <a target="_blank" href="https://www.who.int/">https://www.who.int/emergencies/diseases/novelcoronavirus-2019/covid-19-vaccines/advice</a>
+        〔16〕Flacco ME, Acuti Martellucci C,Baccolini V, De Vito C, Renzi E,Villari P and Manzoli L (2022)COVID-19 vaccines reduce the risk of SARS-CoV-2 reinfection and hospitalization: Meta-analysis. Front. Med. 9:1023507.doi: 10.3389/fmed.2022.1023507  
+        〔17〕Moderna HK Campaign landing page / World Health Organization. Side Effects of COVID-19 Vaccines. Updated31 March 2021. Accessed on 14 October 2022. <a target="_blank" href="https://www.">https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines</a>
+        〔18〕Moderna HK Campaign Landing Page / World Health Organization COVID-19: Vaccines and vaccine safety. Updated 28 June 2023. Accessed on 8 August 2023. <a target="_blank" href="https://www.">https://www.who.int/news-room/feature-stories/detail/side-e%1Eects-of-covid-19-vaccines</a>
+        〔19〕Taiwan CDC/COVID-19疫苗Q&A/5.疫苗安全: <a target="_blank" href="https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA">https://www.cdc.gov.tw/Category/QAPage/U6RuirseltWaY9Nd7LuWXA</a>
+        〔20〕Taiwan CDC/COVID-19疫苗Q&A/8.孕婦及哺乳婦女: <a target="_blank" href="https://www.cdc.gov.tw/Category/QAPage/aVLK2xpg8y3KYmkLK8X6iA">https://www.cdc.gov.tw/Category/QAPage/aVLK2xpg8y3KYmkLK8X6iA</a>
+        〔21〕台灣感染症醫學會/6個月-5歲之嬰幼兒疫苗接種建議: <a target="_blank" href="https://fightcovid19.com.tw/">https://fightcovid19.com.tw/</a>
+        
+        
+        
+        
       </p>
       <!-- <div class="copyright">
         <p>TW-COV-2300085, Oct 2023</p>
@@ -581,11 +608,17 @@
         <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疫苗</h4>
+          </div>
+          <div class="modal__video">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
           </div>
           <div class="modal__preface">
             <h3>mRNA疫苗是如何運作的?</h3>
-            <p>科學家們設計mRNA疫苗，以教導人體的免疫系統對抗感染源。<span>〔4〕</span></p>
+            <p>
+              科學家們設計mRNA疫苗，以教導人體的免疫系統對抗感染源。<span>〔4〕</span><br>
+              mRNA疫苗藉由提供RNA進入人體內細胞轉譯出病毒蛋白質，來促使免疫系統反應。
+            </p>
           </div>
           <div class="modal__list">
             <div class="modal__item">
@@ -603,7 +636,7 @@
               </div>
               <div class="modal__text">
                 <h4>製作mRNA疫苗</h4>
-                <p>mRNA是脆弱的單鏈結構，所以mRNA疫苗會使用奈米脂質顆粒來包覆，以確保效果可以在人體正確位置發揮。 <span>〔5〕</span></p>
+                <p>mRNA是脆弱的單鏈結構，所以mRNA疫苗會使用奈米脂質顆粒(LNP)來包覆，確保效果可以在人體正確位置發揮。 <span>〔5〕</span></p>
               </div>
             </div>
             <div class="modal__item">
@@ -611,8 +644,8 @@
                 <img src="./images/rearch-popup/proud-pic-3.png" alt="">
               </div>
               <div class="modal__text">
-                <h4>將mRNA輸入體內</h4>
-                <p>當注射mRNA疫苗後，抗原呈現細胞(antigen-presenting cell, 簡稱APCs)就會吞噬LNP使之崩解，mRNA這時會促使細胞開始產生一系列抗病毒抗體反應。 <span>〔5〕</span></p>
+                <h4>mRNA輸入體內</h4>
+                <p>注射mRNA疫苗後，抗原呈現細胞(antigen-presenting cell, 簡稱APCs)就會吞噬LNP使之崩解，mRNA這時會促使細胞開始產生抗病毒抗體反應。<span>〔5〕</span></p>
                 <div class="modal__additional">
                   <div class="modal__additional__icon">
                     <img src="./images/rearch-popup/proud-pic-lamp.png" alt="">
@@ -620,7 +653,7 @@
                   <div class="modal__additional__text">
                     <p>
                       知識補給站<br>
-                      mRNA和包裹它的奈米脂質顆粒（lipid nanoparticles, 簡稱LNP），從疫苗中引入體內後，會在自然狀態下在2天內分解並離開你的身體。 <span>〔6〕</span>
+                      mRNA和包裹它的奈米脂質顆粒（lipid nanoparticles, 簡稱LNP），從疫苗中引入體內後，會在自然狀態下在3天內分解並離開你的身體。 <span>〔6〕</span>
                     </p>
                   </div>
                 </div>
@@ -631,8 +664,8 @@
                 <img src="./images/rearch-popup/proud-pic-4.png" alt="">
               </div>
               <div class="modal__text">
-                <h4>產生抗體</h4>
-                <p>活化T細胞和B細胞的免疫反應，產生大量抗體來中和病毒，防止病毒入侵未受損的細胞，達到快速防禦的效果。<span>〔7〕</span></p>
+                <h4>啟動免疫產生抗體</h4>
+                <p>活化T細胞和B細胞的免疫反應，產生大量抗體來辨識和中和病毒，防止病毒入侵未受損的細胞，達到快速防禦的效果。<span>〔7〕</span></p>
               </div>
             </div>
           </div>
@@ -647,12 +680,15 @@
         <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疫苗特色</h4>
+          </div>
+          <div class="modal__video">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
           </div>
           <div class="modal__principle">
             <div class="modal__principle__item modal__principle__item-blue">
               <div class="modal__principle__title">
-                <h3>疫苗原理 </h3>
+                <h3>常見疫苗原理</h3>
               </div>
               <div class="modal__principle__text modal__principle__text-pc">
                 <p>
@@ -666,25 +702,31 @@
               </div>
               <div class="modal__principle__text modal__principle__text-pc">
                 <p>
-                  不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
+                  不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導人體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
                 </p>
               </div>
             </div>
             <div class="modal__principle__text modal__principle__text-mb">
               <p>
-                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
+                注射被稱為抗原的滅活病毒蛋白質，刺激人體免疫系統識別病毒，當病毒再次出現時快速被消滅或控制。 <span>〔8〕</span>
               </p>
             </div>
             <div class="modal__principle__text modal__principle__text-mb">
               <p>
-                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
+                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導人體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。 
               </p>
             </div>
           </div>
           <h3>mRNA疫苗的五大特色</h3>
           <div class="modal__list">
             <div class="modal__item">
-              <h4>應變性 : </h4>
+              <h4>高效性 : </h4>
+              <div class="modal__text">
+                <p>mRNA疫苗因為開發週期快，在生產過程中也更安全。</p>
+              </div>
+            </div>
+            <div class="modal__item">
+              <h4>應變性  : </h4>
               <div class="modal__text">
                 <p>mRNA 疫苗可以快速改變抗原設計，隨時製造出需要的新抗原，以快速應對病毒基因的突變。<span>〔9〕</span></p>
               </div>
@@ -698,7 +740,7 @@
             <div class="modal__item">
               <h4>不滯留性:  </h4>
               <div class="modal__text">
-                <p>不會長期停留體內且無其他毒性風險。 </p>
+                <p>不會長期停留體內且無其他毒性風險。</p>
               </div>
             </div>
             <div class="modal__item">
@@ -707,12 +749,6 @@
                 <p>免疫反應更接近自然感染型態，危險性較低。<span>〔10〕</span></p>
               </div>
             </div>
-            <div class="modal__item">
-              <h4>高效性 : </h4>
-              <div class="modal__text">
-                <p>mRNA疫苗因為開發週期快，在生產過程中也更安全，也無需耗費如傳統疫苗研發時的大量成本。</p>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -725,10 +761,10 @@
         <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疫苗無限可能</h4>
           </div>
           <div class="modal__preface">
-            <p>針對mRNA疫苗，目前仍需以超低溫條件來儲存和運送。 <span>〔11〕</span></p>
+            <p>針對mRNA疫苗，目前仍需以超低溫條件來儲存和運送。<span>〔13〕</span></p>
           </div>
           <div class="modal__preface">
             <h3>mRNA疫苗還有什麼可能性?</h3>
@@ -795,15 +831,70 @@
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
         <div class="modal-body">
           <div class="modal__title">
-            <h2>mRNA疫苗<br class="d-lg-block">如何在疫情大展身手</h4>
+            <h2>疫情下的mRNA疫苗</h4>
+          </div>
+          <div class="modal__video">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/Ipg40ew_xcU?si=bEl_bqUTGc0-Y4fT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
           </div>
           <div class="modal__preface">
             <p>
               2023年諾貝爾生醫獎由匈牙利裔的美籍科學家卡里科（Katalin Kariko），和美國科學家魏斯曼（Drew Weissman）共同獲獎。兩人長期致力於mRNA疫苗研發，因為在核苷（nucleoside）修飾的有關發現，得以促成開發有效的COVID-19信使核糖核酸（mRNA）疫苗，故獲得醫學獎殊榮。<br>
               而藉由他們的突破性發現，人們根本性的改變對於mRNA如何與免疫系統相互作用的理解，在現代人類面臨健康最大威脅之一的COVID-19疫情期間，兩位科學家為空前的疫苗研發速度做出貢獻。
-              <span>〔12〕</span>
+              <span>〔11〕</span>
             </p>
           </div>
+          <h3>新冠mRNA 疫苗五大特色：</h3>
+          <div class="modal__feature">
+            <div class="modal__feature__item">
+              <p>
+                <span class="red">不使用</span><br>
+                可能引起新冠肺炎<br>
+                的完整病毒
+              </p>
+            </div>
+            <div class="modal__feature__item">
+              <p class="d-lg-none">
+                在 mRNA 按指令<br>
+                完成任務後<br>
+                細胞會將其<br>
+                <span class="red">很快分解和消除</span>
+              </p>
+              <p class="d-none d-lg-block">
+                在 mRNA 按<br>
+                指令完成任務後<br>
+                細胞會將其<br>
+                <span class="red">很快分解和消除</span>
+              </p>
+            </div>
+            <div class="modal__feature__item">
+              <p>
+                <span class="red">不影響</span><br>
+                人體 DNA<br>
+                及基因
+              </p>
+            </div>
+            <div class="modal__feature__item">
+              <p>
+                <span class="red">不會導致</span><br>
+                接種者感染<br>
+                新冠肺炎
+              </p>
+            </div>
+            <div class="modal__feature__item">
+              <p class="d-lg-none">
+                與所有其他類型的疫苗<br>
+                一樣在安全及效力方面同樣<br>
+                <span class="red">具嚴格法規<br class="d-none d-lg-block">審核標準</span>
+                <!-- <span class="num">〔13〕</span> -->
+              </p>
+              <p class="d-none d-lg-block">
+                與所有其他類型的<br>
+                疫苗一樣在安全<br>
+                及效力方面同樣<br>
+                <span class="red">具嚴格法規<br>審核標準</span>
+              </p>
+            </div>
+          </div>
           <h3>新冠mRNA疫苗如何運作? </h3>
           <div class="modal__operation">
             <div class="modal__operation__item">
@@ -812,7 +903,7 @@
               </div>
               <div class="modal__operation__text">
                 <p>
-                  新冠mRNA疫苗向細胞發出指令，要求製造一段無害的蛋白質，稱為「棘蛋白」，<b>與造成新冠肺炎病毒表面的棘蛋白相似</b>。
+                  新冠mRNA疫苗透過人體上臂肌肉注射進入。
                 </p>
               </div>
             </div>
@@ -822,7 +913,7 @@
               </div>
               <div class="modal__operation__text">
                 <p>
-                  新冠mRNA疫苗透過人體上臂肌肉注射進入。
+                  新冠mRNA疫苗向細胞發出指令，要求製造一段無害的蛋白質，稱為「棘蛋白」，<b>與造成新冠肺炎病毒表面的棘蛋白相似</b>。
                 </p>
               </div>
             </div>
@@ -832,7 +923,7 @@
               </div>
               <div class="modal__operation__text">
                 <p>
-                  一旦指令(mRNA)進入肌肉細胞，細胞會根據指令製造蛋白質片段，產生這種蛋白質片段後，細胞會分解和消除該指令。 
+                  產生棘蛋白後，細胞會分解和消除發出指令的mRNA。 
                 </p>
               </div>
             </div>
@@ -842,7 +933,7 @@
               </div>
               <div class="modal__operation__text">
                 <p>
-                  該蛋白質片段會出現在細胞表面。當人體免疫系統發現此處不應該有這種蛋白質，會開始啟動免疫反應並分泌抗體。
+                  棘蛋白會出現在細胞表面。當人體免疫系統發現此處不應該有這種蛋白質，會開始啟動免疫反應並分泌抗體。
                 </p>
               </div>
             </div>
@@ -852,61 +943,11 @@
               </div>
               <div class="modal__operation__text">
                 <p>
-                  與人體抑制新冠肺炎的自然感染同理。到這個過程結束時，接種者便可獲得免疫保護。<span>〔13〕</span>
+                  與人體抑制新冠肺炎的自然感染同理。整個流程結束時，接種者便可獲得免疫保護。<span>〔12〕</span>
                 </p>
               </div>
             </div>
           </div>
-          <h3>新冠mRNA 疫苗五大特色：</h3>
-          <div class="modal__feature">
-            <div class="modal__feature__item">
-              <p>
-                <span class="red">不使用</span><br>
-                引起新冠肺炎<br>
-                的活體病毒
-              </p>
-            </div>
-            <div class="modal__feature__item">
-              <p>
-                <span class="red">不影響</span><br>
-                人體 DNA<br>
-                及基因
-              </p>
-            </div>
-            <div class="modal__feature__item">
-              <p>
-                <span class="red">不會導致</span><br>
-                接種者感染<br>
-                新冠肺炎
-              </p>
-            </div>
-            <div class="modal__feature__item">
-              <p class="d-lg-none">
-                在 mRNA 按指令完成<br>
-                任務後細胞很快會將其<br>
-                <span class="red">分解和消除</span>
-              </p>
-              <p class="d-none d-lg-block">
-                在 mRNA 按<br>
-                指令完成任務後<br>
-                細胞很快會將其<br>
-                <span class="red">分解和消除</span>
-              </p>
-            </div>
-            <div class="modal__feature__item">
-              <p class="d-lg-none">
-                與所有其他類型的疫苗<br>
-                一樣在安全及效力方面同樣<br>
-                <span class="red">具嚴格法規<br class="d-none d-lg-block">審核標準</span><span class="num">〔13〕</span>
-              </p>
-              <p class="d-none d-lg-block">
-                與所有其他類型的<br>
-                疫苗一樣在安全<br>
-                及效力方面同樣<br>
-                <span class="red">具嚴格法規<br>審核標準</span>
-              </p>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -918,7 +959,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知識檢定</h4>
           </div>
           <div class="modal__preface">
             <p>你好像更了解mRNA了，來點小試身手吧 !</p>

src/fe/mrna/js/main.js

@@ -753,7 +753,7 @@ main = function () {
 	}
 
 	function scrollToSection() {
-		$(".header__nav__item").on("click", function (e) {
+		$(".header__nav__item[href^='https://event.leecy.org.tw/mrna']").on("click", function (e) {
 			e.preventDefault();
 			let anchor  =  $(this).data("anchor");