Sherry 1 年之前
父節點
當前提交
90d94835c0

+ 78
- 20
src/fe/mrna/css/all.css 查看文件

13122
   background-color: rgba(134, 134, 134, 0.2);
13122
   background-color: rgba(134, 134, 134, 0.2);
13123
 }
13123
 }
13124
 
13124
 
13125
+.goToLine {
13126
+  position: fixed;
13127
+  right: 0;
13128
+  top: 50%;
13129
+  transform: translateY(-50%);
13130
+  width: 4.5em;
13131
+  z-index: 2;
13132
+  cursor: pointer;
13133
+}
13134
+.goToLine img {
13135
+  width: 100%;
13136
+  height: auto;
13137
+}
13138
+
13125
 @media screen and (max-width: 992px) {
13139
 @media screen and (max-width: 992px) {
13126
   .wrapper {
13140
   .wrapper {
13127
     padding-top: 9em;
13141
     padding-top: 9em;
13162
     content: "";
13176
     content: "";
13163
     left: -0.27em;
13177
     left: -0.27em;
13164
   }
13178
   }
13179
+  .goToLine {
13180
+    width: 8.5em;
13181
+  }
13165
 }
13182
 }
13166
 .header {
13183
 .header {
13167
   position: fixed;
13184
   position: fixed;
13184
 .header__name h1 {
13201
 .header__name h1 {
13185
   color: #0699d2;
13202
   color: #0699d2;
13186
   font-weight: 500;
13203
   font-weight: 500;
13187
-  font-size: 2em;
13204
+  font-size: 2.5em;
13188
   margin: 0;
13205
   margin: 0;
13189
 }
13206
 }
13190
 .header__nav {
13207
 .header__nav {
13201
   text-decoration: none;
13218
   text-decoration: none;
13202
   display: inline-block;
13219
   display: inline-block;
13203
   margin: 0 2.3em;
13220
   margin: 0 2.3em;
13221
+  cursor: pointer;
13204
 }
13222
 }
13205
 .header__nav__item p {
13223
 .header__nav__item p {
13206
   font-weight: 500;
13224
   font-weight: 500;
13207
-  color: #393f42;
13225
+  color: #0699d2;
13208
   font-size: 1.1em;
13226
   font-size: 1.1em;
13209
   line-height: 1;
13227
   line-height: 1;
13210
-  transition: 0.3s;
13228
+  transition: 0.5s;
13229
+  cursor: pointer;
13211
 }
13230
 }
13212
 .header__nav__item:hover p {
13231
 .header__nav__item:hover p {
13213
-  color: #0699d2;
13232
+  color: #db1837;
13233
+  transform: scale(1.2);
13234
+  margin-top: -0.5em;
13214
 }
13235
 }
13215
 .header__nav__item.active .header__nav__item__line {
13236
 .header__nav__item.active .header__nav__item__line {
13216
   position: absolute;
13237
   position: absolute;
13435
     bottom: auto;
13456
     bottom: auto;
13436
   }
13457
   }
13437
 }
13458
 }
13459
+.modal__video {
13460
+  position: relative;
13461
+  width: 100%;
13462
+  height: 0;
13463
+  padding-bottom: 52.5%;
13464
+  margin-bottom: 1em;
13465
+}
13466
+.modal__video iframe {
13467
+  position: absolute;
13468
+  width: 100%;
13469
+  height: 100%;
13470
+  left: 0;
13471
+  top: 0;
13472
+}
13473
+
13438
 .modal-research::before {
13474
 .modal-research::before {
13439
   content: "";
13475
   content: "";
13440
   width: 300%;
13476
   width: 300%;
13488
 }
13524
 }
13489
 
13525
 
13490
 .modal-proud .modal__title {
13526
 .modal-proud .modal__title {
13491
-  margin-bottom: 0.7em;
13527
+  margin-bottom: 1em;
13492
 }
13528
 }
13493
 .modal-proud .modal__preface {
13529
 .modal-proud .modal__preface {
13494
   margin-bottom: 0.5em;
13530
   margin-bottom: 0.5em;
13685
 }
13721
 }
13686
 .modal-show .modal__operation {
13722
 .modal-show .modal__operation {
13687
   margin-top: 0.8em;
13723
   margin-top: 0.8em;
13688
-  margin-bottom: 1.5em;
13689
 }
13724
 }
13690
 .modal-show .modal__operation__item {
13725
 .modal-show .modal__operation__item {
13691
   display: flex;
13726
   display: flex;
13697
 }
13732
 }
13698
 .modal-show .modal__operation__step {
13733
 .modal-show .modal__operation__step {
13699
   background-color: #0699d2;
13734
   background-color: #0699d2;
13700
-  padding: 0.2em 0.5em;
13735
+  padding: 0.2em 0.5em 0.4em;
13701
   border-radius: 1em;
13736
   border-radius: 1em;
13702
   margin-right: 0.7em;
13737
   margin-right: 0.7em;
13703
 }
13738
 }
13717
   align-items: flex-start;
13752
   align-items: flex-start;
13718
   height: 7em;
13753
   height: 7em;
13719
   margin-top: 0.8em;
13754
   margin-top: 0.8em;
13755
+  margin-bottom: 1em;
13720
 }
13756
 }
13721
 .modal-show .modal__feature__item {
13757
 .modal-show .modal__feature__item {
13722
   width: 19%;
13758
   width: 19%;
13866
   }
13902
   }
13867
   .modal-feature .modal__principle {
13903
   .modal-feature .modal__principle {
13868
     flex-wrap: wrap;
13904
     flex-wrap: wrap;
13905
+    align-items: flex-start;
13869
   }
13906
   }
13870
   .modal-feature .modal__principle h3 {
13907
   .modal-feature .modal__principle h3 {
13871
     font-size: 1em;
13908
     font-size: 1em;
13919
   }
13956
   }
13920
   .modal-unlimit .modal__intro__pic {
13957
   .modal-unlimit .modal__intro__pic {
13921
     width: 65%;
13958
     width: 65%;
13922
-    margin-bottom: 2.2em;
13959
+    margin-bottom: 1.5em;
13923
   }
13960
   }
13924
   .modal-unlimit .modal__intro ul {
13961
   .modal-unlimit .modal__intro ul {
13925
     width: 100%;
13962
     width: 100%;
13951
     width: 100%;
13988
     width: 100%;
13952
   }
13989
   }
13953
   .modal-show .modal__feature__item p .red {
13990
   .modal-show .modal__feature__item p .red {
13954
-    font-size: 1.2em;
13991
+    font-size: 1.1em;
13955
     font-weight: 400;
13992
     font-weight: 400;
13956
   }
13993
   }
13957
   .modal-test .modal-body {
13994
   .modal-test .modal-body {
14719
   text-decoration: none;
14756
   text-decoration: none;
14720
   margin: 0 1.2em;
14757
   margin: 0 1.2em;
14721
 }
14758
 }
14759
+.moreref__item-line .moreref__pic {
14760
+  padding: 0;
14761
+  overflow: hidden;
14762
+}
14722
 .moreref__pic {
14763
 .moreref__pic {
14723
   border: 1px solid rgba(134, 134, 134, 0.3);
14764
   border: 1px solid rgba(134, 134, 134, 0.3);
14724
   border-radius: 0.7em;
14765
   border-radius: 0.7em;
14725
   padding: 1em;
14766
   padding: 1em;
14726
   height: 13.8em;
14767
   height: 13.8em;
14727
-  margin-bottom: 1em;
14768
+  margin-bottom: 1.5em;
14728
 }
14769
 }
14729
 .moreref__pic img {
14770
 .moreref__pic img {
14730
   height: 100%;
14771
   height: 100%;
14734
   background-color: #0699d2;
14775
   background-color: #0699d2;
14735
   padding: 0.5em 2em;
14776
   padding: 0.5em 2em;
14736
   border-radius: 2em;
14777
   border-radius: 2em;
14778
+  box-shadow: 0 0 0 1em transparent;
14779
+  animation: pulse2 2s infinite;
14780
+  cursor: pointer;
14781
+  transition: 0.3s;
14737
 }
14782
 }
14738
 .moreref__name p {
14783
 .moreref__name p {
14739
   color: #ffffff;
14784
   color: #ffffff;
14740
   font-size: 1.1em;
14785
   font-size: 1.1em;
14786
+  cursor: pointer;
14787
+}
14788
+@keyframes pulse2 {
14789
+  0% {
14790
+    box-shadow: 0 0 0 0 #0699d2;
14791
+  }
14741
 }
14792
 }
14742
 .moreref__logo {
14793
 .moreref__logo {
14743
   width: 18em;
14794
   width: 18em;
14865
   border: 0.2em solid #0699d2;
14916
   border: 0.2em solid #0699d2;
14866
   transition: box-shadow 0.3s;
14917
   transition: box-shadow 0.3s;
14867
 }
14918
 }
14868
-.research__item:hover .research__name {
14869
-  background-color: #0699d2;
14870
-  transition: 0.3s;
14871
-}
14872
-.research__item:hover .research__name p {
14873
-  color: #ffffff;
14874
-  transition: 0.3s;
14875
-}
14876
 .research__pic {
14919
 .research__pic {
14877
   border: 0.1em solid rgba(6, 153, 210, 0.3);
14920
   border: 0.1em solid rgba(6, 153, 210, 0.3);
14878
   box-shadow: 0.4em 0.4em 0.6em rgba(0, 0, 0, 0.1);
14921
   box-shadow: 0.4em 0.4em 0.6em rgba(0, 0, 0, 0.1);
14879
   border-radius: 0.5em;
14922
   border-radius: 0.5em;
14880
   width: 15em;
14923
   width: 15em;
14881
   overflow: hidden;
14924
   overflow: hidden;
14882
-  margin-bottom: 0.8em;
14925
+  margin-bottom: 1.5em;
14883
 }
14926
 }
14884
 .research__pic img {
14927
 .research__pic img {
14885
   width: 100%;
14928
   width: 100%;
14889
   display: inline-block;
14932
   display: inline-block;
14890
   border-radius: 1.5em;
14933
   border-radius: 1.5em;
14891
   padding: 0.6em 1.5em;
14934
   padding: 0.6em 1.5em;
14935
+  box-shadow: 0 0 0 1em transparent;
14936
+  animation: pulse 2s infinite;
14937
+  background-color: #0699d2;
14938
+  cursor: pointer;
14892
 }
14939
 }
14893
 .research__name p {
14940
 .research__name p {
14894
   text-align: center;
14941
   text-align: center;
14895
   color: #0070a0;
14942
   color: #0070a0;
14896
   font-size: 1.2em;
14943
   font-size: 1.2em;
14944
+  color: #ffffff;
14945
+  cursor: pointer;
14946
+}
14947
+.research__name p span {
14948
+  display: inline-block;
14949
+  font-size: 0.9em;
14950
+}
14951
+@keyframes pulse {
14952
+  0% {
14953
+    box-shadow: 0 0 0 0 #0699d2;
14954
+  }
14897
 }
14955
 }
14898
 
14956
 
14899
 @media screen and (max-width: 992px) {
14957
 @media screen and (max-width: 992px) {
14921
     padding: 0.8em 2.5em;
14979
     padding: 0.8em 2.5em;
14922
   }
14980
   }
14923
   .research__name p {
14981
   .research__name p {
14924
-    font-size: 2.1em;
14982
+    font-size: 1.6em;
14925
     white-space: nowrap;
14983
     white-space: nowrap;
14926
   }
14984
   }
14927
 }
14985
 }

+ 1
- 1
src/fe/mrna/css/all.css.map
文件差異過大導致無法顯示
查看文件


+ 17
- 0
src/fe/mrna/css/base/_base.scss 查看文件

130
   }
130
   }
131
 }
131
 }
132
 
132
 
133
+.goToLine {
134
+  position: fixed;
135
+  right: 0;
136
+  top: 50%;
137
+  transform: translateY(-50%);
138
+  width: 4.5em;
139
+  z-index: 2;
140
+  cursor: pointer;
141
+  img {
142
+    width: 100%;
143
+    height: auto;
144
+  }
145
+}
146
+
133
 @media screen and (max-width: 992px) {
147
 @media screen and (max-width: 992px) {
134
   .wrapper {
148
   .wrapper {
135
     padding-top: 9em;
149
     padding-top: 9em;
179
       left: -0.27em;
193
       left: -0.27em;
180
     }
194
     }
181
   }
195
   }
196
+  .goToLine {
197
+    width: 8.5em;
198
+  }
182
 }
199
 }

+ 22
- 5
src/fe/mrna/css/component/_modal.scss 查看文件

1
 @charset "UTF-8";
1
 @charset "UTF-8";
2
+.modal {
3
+    &__video {
4
+        position: relative;
5
+        width: 100%;
6
+        height: 0;
7
+        padding-bottom: 52.5%;
8
+        margin-bottom: 1em;
9
+        iframe {
10
+            position: absolute;
11
+            width: 100%;
12
+            height: 100%;
13
+            left: 0;
14
+            top: 0;
15
+        }
16
+    }
17
+}
2
 .modal-research {
18
 .modal-research {
3
     &::before {
19
     &::before {
4
         content: "";
20
         content: "";
58
 .modal-proud {
74
 .modal-proud {
59
     .modal {
75
     .modal {
60
         &__title {
76
         &__title {
61
-            margin-bottom: 0.7em;
77
+            margin-bottom: 1em;
62
         }
78
         }
63
         &__preface {
79
         &__preface {
64
             margin-bottom: 0.5em;
80
             margin-bottom: 0.5em;
273
         }
289
         }
274
         &__operation {
290
         &__operation {
275
             margin-top: 0.8em;
291
             margin-top: 0.8em;
276
-            margin-bottom: 1.5em;
277
             &__item {
292
             &__item {
278
                 display: flex;
293
                 display: flex;
279
                 align-items: flex-start;
294
                 align-items: flex-start;
284
             }
299
             }
285
             &__step {
300
             &__step {
286
                 background-color: $blue;
301
                 background-color: $blue;
287
-                padding: 0.2em 0.5em;
302
+                padding: 0.2em 0.5em 0.4em;
288
                 border-radius: 1em;
303
                 border-radius: 1em;
289
                 margin-right: 0.7em;
304
                 margin-right: 0.7em;
290
                 p {
305
                 p {
305
             align-items: flex-start;
320
             align-items: flex-start;
306
             height: 7em;
321
             height: 7em;
307
             margin-top: 0.8em;
322
             margin-top: 0.8em;
323
+            margin-bottom: 1em;
308
             &__item {
324
             &__item {
309
                 width: 19%;
325
                 width: 19%;
310
                 height: 100%;
326
                 height: 100%;
477
             }
493
             }
478
             &__principle {
494
             &__principle {
479
                 flex-wrap: wrap;
495
                 flex-wrap: wrap;
496
+                align-items: flex-start;
480
                 h3 {
497
                 h3 {
481
                     font-size: 1em;
498
                     font-size: 1em;
482
                     font-weight: 300;
499
                     font-weight: 300;
535
                 margin-top: 0;
552
                 margin-top: 0;
536
                 &__pic {
553
                 &__pic {
537
                     width: 65%;
554
                     width: 65%;
538
-                    margin-bottom: 2.2em;
555
+                    margin-bottom: 1.5em;
539
                 }
556
                 }
540
                 ul {
557
                 ul {
541
                     width: 100%;
558
                     width: 100%;
569
                     p {
586
                     p {
570
                         width: 100%;
587
                         width: 100%;
571
                         .red {
588
                         .red {
572
-                            font-size: 1.2em;
589
+                            font-size: 1.1em;
573
                             font-weight: 400;
590
                             font-weight: 400;
574
                         }
591
                         }
575
                     }
592
                     }

+ 8
- 4
src/fe/mrna/css/layout/_header.scss 查看文件

19
         h1 {
19
         h1 {
20
             color: $blue;
20
             color: $blue;
21
             font-weight: 500;
21
             font-weight: 500;
22
-            font-size: 2em;
22
+            font-size: 2.5em;
23
             margin: 0;
23
             margin: 0;
24
         }
24
         }
25
     }
25
     }
36
             text-decoration: none;
36
             text-decoration: none;
37
             display: inline-block;
37
             display: inline-block;
38
             margin: 0 2.3em;
38
             margin: 0 2.3em;
39
+            cursor: pointer;
39
             p {
40
             p {
40
                 font-weight: 500;
41
                 font-weight: 500;
41
-                color: $black;
42
+                color: $blue;
42
                 font-size: 1.1em;
43
                 font-size: 1.1em;
43
                 line-height: 1;
44
                 line-height: 1;
44
-                transition: 0.3s;
45
+                transition: 0.5s;
46
+                cursor: pointer;
45
             }
47
             }
46
             &:hover {
48
             &:hover {
47
                 p {
49
                 p {
48
-                    color: $blue;
50
+                    color: $red;
51
+                    transform: scale(1.2);
52
+                    margin-top: -0.5em;
49
                 }
53
                 }
50
             }
54
             }
51
             &.active {
55
             &.active {

+ 21
- 1
src/fe/mrna/css/section/_moreref.scss 查看文件

21
         align-items: center;
21
         align-items: center;
22
         text-decoration: none;
22
         text-decoration: none;
23
         margin: 0 1.2em;
23
         margin: 0 1.2em;
24
+        &-line {
25
+            .moreref__pic {
26
+                padding: 0;
27
+                overflow: hidden;
28
+            }
29
+        }
24
     }
30
     }
25
     &__pic {
31
     &__pic {
26
         border: 1px solid rgba($gray, 0.3);
32
         border: 1px solid rgba($gray, 0.3);
27
         border-radius: 0.7em;
33
         border-radius: 0.7em;
28
         padding: 1em,;
34
         padding: 1em,;
29
         height: 13.8em;
35
         height: 13.8em;
30
-        margin-bottom: 1em;
36
+        margin-bottom: 1.5em;
31
         img {
37
         img {
32
             height: 100%;
38
             height: 100%;
33
             width: auto;
39
             width: auto;
37
         background-color: $blue;
43
         background-color: $blue;
38
         padding: 0.5em 2em;
44
         padding: 0.5em 2em;
39
         border-radius: 2em;
45
         border-radius: 2em;
46
+        box-shadow: 0 0 0 1em transparent;
47
+        animation: pulse2 2s infinite;
48
+        cursor: pointer;
49
+        transition: 0.3s;
40
         p {
50
         p {
41
             color: $white;
51
             color: $white;
42
             font-size: 1.1em;
52
             font-size: 1.1em;
53
+            cursor: pointer;
54
+        }
55
+        // &:hover {
56
+        //     animation: none;
57
+        //     transform: scale(1.1);
58
+        // }
59
+    }
60
+    @keyframes pulse2 {
61
+        0% {
62
+            box-shadow: 0 0 0 0 $blue;
43
         }
63
         }
44
     }
64
     }
45
     &__logo {
65
     &__logo {

+ 25
- 10
src/fe/mrna/css/section/_research.scss 查看文件

32
                 border: 0.2em solid $blue;
32
                 border: 0.2em solid $blue;
33
                 transition: box-shadow 0.3s;
33
                 transition: box-shadow 0.3s;
34
             }
34
             }
35
-            .research__name {
36
-                background-color: $blue;
37
-                transition: 0.3s;
38
-                p {
39
-                    color: $white;
40
-                    transition: 0.3s;
41
-                }
42
-            }
35
+            // .research__name {
36
+            //     transition: 0.3s;
37
+            //     animation: none;
38
+            //     transform: scale(1.1);
39
+            //     p {
40
+            //         transition: 0.3s;
41
+            //     }
42
+            // }
43
         }
43
         }
44
     }
44
     }
45
     &__pic {
45
     &__pic {
48
         border-radius: 0.5em;
48
         border-radius: 0.5em;
49
         width: 15em;
49
         width: 15em;
50
         overflow: hidden;
50
         overflow: hidden;
51
-        margin-bottom: 0.8em;
51
+        margin-bottom: 1.5em;
52
         img {
52
         img {
53
             width: 100%;
53
             width: 100%;
54
             height: auto;
54
             height: auto;
58
         display: inline-block;
58
         display: inline-block;
59
         border-radius: 1.5em;
59
         border-radius: 1.5em;
60
         padding: 0.6em 1.5em;
60
         padding: 0.6em 1.5em;
61
+        box-shadow: 0 0 0 1em transparent;
62
+        animation: pulse 2s infinite;
63
+        background-color: $blue;
64
+        cursor: pointer;
61
         p {
65
         p {
62
             text-align: center;
66
             text-align: center;
63
             color: $blue-d;
67
             color: $blue-d;
64
             font-size: 1.2em;
68
             font-size: 1.2em;
69
+            color: $white;
70
+            cursor: pointer;
71
+            span {
72
+                display: inline-block;
73
+                font-size: 0.9em;
74
+            }
75
+        }
76
+    }
77
+    @keyframes pulse {
78
+        0% {
79
+            box-shadow: 0 0 0 0 $blue;
65
         }
80
         }
66
     }
81
     }
67
 }
82
 }
93
             border-radius: 2.5em;
108
             border-radius: 2.5em;
94
             padding: 0.8em 2.5em;
109
             padding: 0.8em 2.5em;
95
             p {
110
             p {
96
-                font-size: 2.1em;
111
+                font-size: 1.6em;
97
                 white-space: nowrap;
112
                 white-space: nowrap;
98
             }
113
             }
99
         }
114
         }

二進制
src/fe/mrna/images/button-float.png 查看文件


二進制
src/fe/mrna/images/moreref-line.png 查看文件


二進制
src/fe/mrna/images/rearch-popup/unlimit-pic.png 查看文件


二進制
src/fe/mrna/images/rearch-popup/unlimit-pic_mb.png 查看文件


+ 146
- 105
src/fe/mrna/index.html 查看文件

72
       </div>
72
       </div>
73
       <nav class="header__nav">
73
       <nav class="header__nav">
74
         <a href="https://event.leecy.org.tw/mrna/#expert" class="header__nav__item header__nav__item-expert" data-anchor="expert">
74
         <a href="https://event.leecy.org.tw/mrna/#expert" class="header__nav__item header__nav__item-expert" data-anchor="expert">
75
-          <p>專家教你認識 mRNA</p>
76
-          <div class="header__nav__item__line"></div>
77
-        </a>
78
-        <a href="https://event.leecy.org.tw/mrna/#understand" class="header__nav__item header__nav__item-understand" data-anchor="understand">
79
-          <p>談談mRNA</p>
75
+          <p>mRNA發展室</p>
80
           <div class="header__nav__item__line"></div>
76
           <div class="header__nav__item__line"></div>
81
         </a>
77
         </a>
82
         <a href="https://event.leecy.org.tw/mrna/#research" class="header__nav__item header__nav__item-research" data-anchor="research">
78
         <a href="https://event.leecy.org.tw/mrna/#research" class="header__nav__item header__nav__item-research" data-anchor="research">
83
-          <p>進入mRNA研究室</p>
79
+          <p>mRNA研究室</p>
84
           <div class="header__nav__item__line"></div>
80
           <div class="header__nav__item__line"></div>
85
         </a>
81
         </a>
86
         <a href="https://event.leecy.org.tw/mrna/#qa" class="header__nav__item header__nav__item-qa" data-anchor="qa">
82
         <a href="https://event.leecy.org.tw/mrna/#qa" class="header__nav__item header__nav__item-qa" data-anchor="qa">
87
-          <p>mRNA疫苗常見問題</p>
83
+          <p>mRNA解答室</p>
88
           <div class="header__nav__item__line"></div>
84
           <div class="header__nav__item__line"></div>
89
         </a>
85
         </a>
90
         <a href="https://event.leecy.org.tw/mrna/#moreref" class="header__nav__item header__nav__item-moreref" data-anchor="moreref">
86
         <a href="https://event.leecy.org.tw/mrna/#moreref" class="header__nav__item header__nav__item-moreref" data-anchor="moreref">
91
-          <p>更多參考資訊</p>
87
+          <p>mRNA輔導室</p>
88
+          <div class="header__nav__item__line"></div>
89
+        </a>
90
+        <a href="https://lin.ee/LP8wXFd" target="_blank" class="header__nav__item header__nav__item-line">
91
+          <p>mRNA客服室</p>
92
           <div class="header__nav__item__line"></div>
92
           <div class="header__nav__item__line"></div>
93
         </a>
93
         </a>
94
       </nav>
94
       </nav>
95
     </header>
95
     </header>
96
+    <a class="goToLine" href="https://lin.ee/LP8wXFd" target="_blank">
97
+      <img src="./images/button-float.png" >
98
+    </a>
96
     <!-- expert 專家教a你認識 mRNA -->
99
     <!-- expert 專家教a你認識 mRNA -->
97
     <section id="expert" class="section expert">
100
     <section id="expert" class="section expert">
98
       <div class="bg expert__bg">
101
       <div class="bg expert__bg">
143
             <img src="./images/understand-title-bg.png" alt="">
146
             <img src="./images/understand-title-bg.png" alt="">
144
           </div>
147
           </div>
145
           <div class="subtitle">
148
           <div class="subtitle">
146
-            <p>談談mRNA</p>
149
+            <p>mRNA發展室</p>
147
           </div>
150
           </div>
148
           <div class="title">
151
           <div class="title">
149
             <h2>一分鐘認識mRNA</h2>
152
             <h2>一分鐘認識mRNA</h2>
176
             <img src="./images/history-title-bg.png" alt="">
179
             <img src="./images/history-title-bg.png" alt="">
177
           </div>
180
           </div>
178
           <div class="subtitle">
181
           <div class="subtitle">
179
-            <p>談談mRNA</p>
182
+            <p>mRNA發展室</p>
180
           </div>
183
           </div>
181
           <div class="title">
184
           <div class="title">
182
             <h2>踏上mRNA歷史軌跡</h2>
185
             <h2>踏上mRNA歷史軌跡</h2>
287
             </picture>
290
             </picture>
288
           </div>
291
           </div>
289
           <div class="title">
292
           <div class="title">
290
-            <h2>進入mRNA 研究室</h2>
293
+            <h2>mRNA研究室</h2>
291
           </div>
294
           </div>
292
           <div class="subtitle">
295
           <div class="subtitle">
293
             <p>- 點擊下方圖示了解更多 -</p>
296
             <p>- 點擊下方圖示了解更多 -</p>
300
             </div>
303
             </div>
301
             <div class="research__name">
304
             <div class="research__name">
302
               <p>
305
               <p>
303
-                引以為傲的mRNA疫苗
306
+                第一課 <span>▶▶</span> mRNA疫苗 
304
               </p>
307
               </p>
305
             </div>
308
             </div>
306
           </div>
309
           </div>
310
             </div>
313
             </div>
311
             <div class="research__name">
314
             <div class="research__name">
312
               <p>
315
               <p>
313
-                mRNA疫苗特色
316
+                第二課 <span>▶▶</span> mRNA疫苗特色
314
               </p>
317
               </p>
315
             </div>
318
             </div>
316
           </div>
319
           </div>
317
-          <div class="research__item" data-bs-toggle="modal" data-bs-target="#unlimitModal">
320
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#showModal">
318
             <div class="research__pic">
321
             <div class="research__pic">
319
-              <img src="./images/research-pic-unlimit.png" alt="">
322
+              <img src="./images/research-pic-show.png" alt="">
320
             </div>
323
             </div>
321
             <div class="research__name">
324
             <div class="research__name">
322
               <p>
325
               <p>
323
-                mRNA疫苗的無限可能
326
+                第三課 <span>▶▶</span> 疫情下的mRNA疫苗
324
               </p>
327
               </p>
325
             </div>
328
             </div>
326
           </div>
329
           </div>
327
-          <div class="research__item" data-bs-toggle="modal" data-bs-target="#showModal">
330
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#unlimitModal">
328
             <div class="research__pic">
331
             <div class="research__pic">
329
-              <img src="./images/research-pic-show.png" alt="">
332
+              <img src="./images/research-pic-unlimit.png" alt="">
330
             </div>
333
             </div>
331
             <div class="research__name">
334
             <div class="research__name">
332
               <p>
335
               <p>
333
-                mRNA疫苗如何在疫情大展身手
336
+                第四課 <span>▶▶</span> mRNA疫苗無限可能
334
               </p>
337
               </p>
335
             </div>
338
             </div>
336
           </div>
339
           </div>
340
             </div>
343
             </div>
341
             <div class="research__name">
344
             <div class="research__name">
342
               <p>
345
               <p>
343
-                mRNA小試身手
346
+                mRNA知識檢定
344
               </p>
347
               </p>
345
             </div>
348
             </div>
346
           </div>
349
           </div>
362
             <img src="./images/qa-title-bg.png" alt="">
365
             <img src="./images/qa-title-bg.png" alt="">
363
           </div>
366
           </div>
364
           <div class="title">
367
           <div class="title">
365
-            <h2>mRNA疫苗常見問題</h2>
368
+            <h2>mRNA解答室</h2>
366
           </div>
369
           </div>
367
         </div>
370
         </div>
368
         <p class="qa__desc">
371
         <p class="qa__desc">
546
               <img src="./images/moreref-line.png" alt="">
549
               <img src="./images/moreref-line.png" alt="">
547
             </div>
550
             </div>
548
             <div class="moreref__name">
551
             <div class="moreref__name">
549
-              <p>來錄用你的 mRNA 健康管家!</p>
552
+              <p>立即錄用健康管家</p>
550
             </div>
553
             </div>
551
           </a>
554
           </a>
552
           <a class="moreref__item moreref__item-map" href="https://covid19vaccine.cdc.gov.tw/" target="_blank">
555
           <a class="moreref__item moreref__item-map" href="https://covid19vaccine.cdc.gov.tw/" target="_blank">
554
               <img src="./images/moreref-map.png" alt="">
557
               <img src="./images/moreref-map.png" alt="">
555
             </div>
558
             </div>
556
             <div class="moreref__name">
559
             <div class="moreref__name">
557
-              <p>搜尋醫療院所  請前往疾管署</p>
560
+              <p>搜尋醫療院所</p>
558
             </div>
561
             </div>
559
           </a>
562
           </a>
560
         </div>
563
         </div>
567
     <footer class="footer">
570
     <footer class="footer">
568
       <h2>參考資料</h2>
571
       <h2>參考資料</h2>
569
       <p>
572
       <p>
570
-        〔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>
573
+        〔1〕 Expression kinetics of nucleoside-modified mRNA delivered in lipid nanoparticles to mice by various routes. J Control Release (2015) Table 1).   
574
+        〔2〕 The Tangled History of mRNA Vaccines. Nature (2021) (Page (the beginnings of mRNA], Paragraph 1, Line 5)  
575
+        〔3〕 The Tangled History of mRNA Vaccines. Nature (2021) (Figure 2)  
576
+        〔4〕COV-Power of mRNA – Infographic-US- English   
577
+        〔5〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉  
578
+        〔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>
579
+        〔7〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉  
580
+        〔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>
581
+        〔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>
582
+        〔10〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色  
583
+        〔11〕公視新聞網/2023諾貝爾生醫獎 研發mRNA疫苗2科學家獲得 : <a target="_blank" href="https://news.pts.org.tw/article/659906">https://news.pts.org.tw/article/659906</a>
584
+        〔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>
585
+        〔13〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色  
586
+        〔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>
587
+        〔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>
588
+        〔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  
589
+        〔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>
590
+        〔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>
591
+        〔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>
592
+        〔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>
593
+        〔21〕台灣感染症醫學會/6個月-5歲之嬰幼兒疫苗接種建議: <a target="_blank" href="https://fightcovid19.com.tw/">https://fightcovid19.com.tw/</a>
594
+        
595
+        
596
+        
597
+        
571
       </p>
598
       </p>
572
       <!-- <div class="copyright">
599
       <!-- <div class="copyright">
573
         <p>TW-COV-2300085, Oct 2023</p>
600
         <p>TW-COV-2300085, Oct 2023</p>
581
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
608
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
582
         <div class="modal-body">
609
         <div class="modal-body">
583
           <div class="modal__title">
610
           <div class="modal__title">
584
-            <h2>引以為傲的mRNA疫苗</h4>
611
+            <h2>mRNA疫苗</h4>
612
+          </div>
613
+          <div class="modal__video">
614
+            <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>
585
           </div>
615
           </div>
586
           <div class="modal__preface">
616
           <div class="modal__preface">
587
             <h3>mRNA疫苗是如何運作的?</h3>
617
             <h3>mRNA疫苗是如何運作的?</h3>
588
-            <p>科學家們設計mRNA疫苗,以教導人體的免疫系統對抗感染源。<span>〔4〕</span></p>
618
+            <p>
619
+              科學家們設計mRNA疫苗,以教導人體的免疫系統對抗感染源。<span>〔4〕</span><br>
620
+              mRNA疫苗藉由提供RNA進入人體內細胞轉譯出病毒蛋白質,來促使免疫系統反應。
621
+            </p>
589
           </div>
622
           </div>
590
           <div class="modal__list">
623
           <div class="modal__list">
591
             <div class="modal__item">
624
             <div class="modal__item">
603
               </div>
636
               </div>
604
               <div class="modal__text">
637
               <div class="modal__text">
605
                 <h4>製作mRNA疫苗</h4>
638
                 <h4>製作mRNA疫苗</h4>
606
-                <p>mRNA是脆弱的單鏈結構,所以mRNA疫苗會使用奈米脂質顆粒來包覆,確保效果可以在人體正確位置發揮。 <span>〔5〕</span></p>
639
+                <p>mRNA是脆弱的單鏈結構,所以mRNA疫苗會使用奈米脂質顆粒(LNP)來包覆,確保效果可以在人體正確位置發揮。 <span>〔5〕</span></p>
607
               </div>
640
               </div>
608
             </div>
641
             </div>
609
             <div class="modal__item">
642
             <div class="modal__item">
611
                 <img src="./images/rearch-popup/proud-pic-3.png" alt="">
644
                 <img src="./images/rearch-popup/proud-pic-3.png" alt="">
612
               </div>
645
               </div>
613
               <div class="modal__text">
646
               <div class="modal__text">
614
-                <h4>mRNA輸入體內</h4>
615
-                <p>注射mRNA疫苗後,抗原呈現細胞(antigen-presenting cell, 簡稱APCs)就會吞噬LNP使之崩解,mRNA這時會促使細胞開始產生一系列抗病毒抗體反應。 <span>〔5〕</span></p>
647
+                <h4>mRNA輸入體內</h4>
648
+                <p>注射mRNA疫苗後,抗原呈現細胞(antigen-presenting cell, 簡稱APCs)就會吞噬LNP使之崩解,mRNA這時會促使細胞開始產生抗病毒抗體反應。<span>〔5〕</span></p>
616
                 <div class="modal__additional">
649
                 <div class="modal__additional">
617
                   <div class="modal__additional__icon">
650
                   <div class="modal__additional__icon">
618
                     <img src="./images/rearch-popup/proud-pic-lamp.png" alt="">
651
                     <img src="./images/rearch-popup/proud-pic-lamp.png" alt="">
620
                   <div class="modal__additional__text">
653
                   <div class="modal__additional__text">
621
                     <p>
654
                     <p>
622
                       知識補給站<br>
655
                       知識補給站<br>
623
-                      mRNA和包裹它的奈米脂質顆粒(lipid nanoparticles, 簡稱LNP),從疫苗中引入體內後,會在自然狀態下在2天內分解並離開你的身體。 <span>〔6〕</span>
656
+                      mRNA和包裹它的奈米脂質顆粒(lipid nanoparticles, 簡稱LNP),從疫苗中引入體內後,會在自然狀態下在3天內分解並離開你的身體。 <span>〔6〕</span>
624
                     </p>
657
                     </p>
625
                   </div>
658
                   </div>
626
                 </div>
659
                 </div>
631
                 <img src="./images/rearch-popup/proud-pic-4.png" alt="">
664
                 <img src="./images/rearch-popup/proud-pic-4.png" alt="">
632
               </div>
665
               </div>
633
               <div class="modal__text">
666
               <div class="modal__text">
634
-                <h4>產生抗體</h4>
635
-                <p>活化T細胞和B細胞的免疫反應,產生大量抗體來中和病毒,防止病毒入侵未受損的細胞,達到快速防禦的效果。<span>〔7〕</span></p>
667
+                <h4>啟動免疫產生抗體</h4>
668
+                <p>活化T細胞和B細胞的免疫反應,產生大量抗體來辨識和中和病毒,防止病毒入侵未受損的細胞,達到快速防禦的效果。<span>〔7〕</span></p>
636
               </div>
669
               </div>
637
             </div>
670
             </div>
638
           </div>
671
           </div>
647
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
680
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
648
         <div class="modal-body">
681
         <div class="modal-body">
649
           <div class="modal__title">
682
           <div class="modal__title">
650
-            <h2>mRNA疫苗的特色</h4>
683
+            <h2>mRNA疫苗特色</h4>
684
+          </div>
685
+          <div class="modal__video">
686
+            <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>
651
           </div>
687
           </div>
652
           <div class="modal__principle">
688
           <div class="modal__principle">
653
             <div class="modal__principle__item modal__principle__item-blue">
689
             <div class="modal__principle__item modal__principle__item-blue">
654
               <div class="modal__principle__title">
690
               <div class="modal__principle__title">
655
-                <h3>疫苗原理 </h3>
691
+                <h3>常見疫苗原理</h3>
656
               </div>
692
               </div>
657
               <div class="modal__principle__text modal__principle__text-pc">
693
               <div class="modal__principle__text modal__principle__text-pc">
658
                 <p>
694
                 <p>
666
               </div>
702
               </div>
667
               <div class="modal__principle__text modal__principle__text-pc">
703
               <div class="modal__principle__text modal__principle__text-pc">
668
                 <p>
704
                 <p>
669
-                  不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA,誘導體產生真實的抗體。然後,mRNA會被人體的自然防禦機制降解而消失,留下抗體對抗病毒。 
705
+                  不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA,誘導體產生真實的抗體。然後,mRNA會被人體的自然防禦機制降解而消失,留下抗體對抗病毒。 
670
                 </p>
706
                 </p>
671
               </div>
707
               </div>
672
             </div>
708
             </div>
673
             <div class="modal__principle__text modal__principle__text-mb">
709
             <div class="modal__principle__text modal__principle__text-mb">
674
               <p>
710
               <p>
675
-                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA,誘導身體產生真實的抗體。然後,mRNA會被人體的自然防禦機制降解而消失,留下抗體對抗病毒。 
711
+                注射被稱為抗原的滅活病毒蛋白質,刺激人體免疫系統識別病毒,當病毒再次出現時快速被消滅或控制。 <span>〔8〕</span>
676
               </p>
712
               </p>
677
             </div>
713
             </div>
678
             <div class="modal__principle__text modal__principle__text-mb">
714
             <div class="modal__principle__text modal__principle__text-mb">
679
               <p>
715
               <p>
680
-                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA,誘導體產生真實的抗體。然後,mRNA會被人體的自然防禦機制降解而消失,留下抗體對抗病毒。 
716
+                不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA,誘導體產生真實的抗體。然後,mRNA會被人體的自然防禦機制降解而消失,留下抗體對抗病毒。 
681
               </p>
717
               </p>
682
             </div>
718
             </div>
683
           </div>
719
           </div>
684
           <h3>mRNA疫苗的五大特色</h3>
720
           <h3>mRNA疫苗的五大特色</h3>
685
           <div class="modal__list">
721
           <div class="modal__list">
686
             <div class="modal__item">
722
             <div class="modal__item">
687
-              <h4>應變性 : </h4>
723
+              <h4>高效性 : </h4>
724
+              <div class="modal__text">
725
+                <p>mRNA疫苗因為開發週期快,在生產過程中也更安全。</p>
726
+              </div>
727
+            </div>
728
+            <div class="modal__item">
729
+              <h4>應變性  : </h4>
688
               <div class="modal__text">
730
               <div class="modal__text">
689
                 <p>mRNA 疫苗可以快速改變抗原設計,隨時製造出需要的新抗原,以快速應對病毒基因的突變。<span>〔9〕</span></p>
731
                 <p>mRNA 疫苗可以快速改變抗原設計,隨時製造出需要的新抗原,以快速應對病毒基因的突變。<span>〔9〕</span></p>
690
               </div>
732
               </div>
698
             <div class="modal__item">
740
             <div class="modal__item">
699
               <h4>不滯留性:  </h4>
741
               <h4>不滯留性:  </h4>
700
               <div class="modal__text">
742
               <div class="modal__text">
701
-                <p>不會長期停留體內且無其他毒性風險。 </p>
743
+                <p>不會長期停留體內且無其他毒性風險。</p>
702
               </div>
744
               </div>
703
             </div>
745
             </div>
704
             <div class="modal__item">
746
             <div class="modal__item">
707
                 <p>免疫反應更接近自然感染型態,危險性較低。<span>〔10〕</span></p>
749
                 <p>免疫反應更接近自然感染型態,危險性較低。<span>〔10〕</span></p>
708
               </div>
750
               </div>
709
             </div>
751
             </div>
710
-            <div class="modal__item">
711
-              <h4>高效性 : </h4>
712
-              <div class="modal__text">
713
-                <p>mRNA疫苗因為開發週期快,在生產過程中也更安全,也無需耗費如傳統疫苗研發時的大量成本。</p>
714
-              </div>
715
-            </div>
716
           </div>
752
           </div>
717
         </div>
753
         </div>
718
       </div>
754
       </div>
725
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
761
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
726
         <div class="modal-body">
762
         <div class="modal-body">
727
           <div class="modal__title">
763
           <div class="modal__title">
728
-            <h2>mRNA疫苗無限可能</h4>
764
+            <h2>mRNA疫苗無限可能</h4>
729
           </div>
765
           </div>
730
           <div class="modal__preface">
766
           <div class="modal__preface">
731
-            <p>針對mRNA疫苗,目前仍需以超低溫條件來儲存和運送。 <span>〔11〕</span></p>
767
+            <p>針對mRNA疫苗,目前仍需以超低溫條件來儲存和運送。<span>〔13〕</span></p>
732
           </div>
768
           </div>
733
           <div class="modal__preface">
769
           <div class="modal__preface">
734
             <h3>mRNA疫苗還有什麼可能性?</h3>
770
             <h3>mRNA疫苗還有什麼可能性?</h3>
795
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
831
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
796
         <div class="modal-body">
832
         <div class="modal-body">
797
           <div class="modal__title">
833
           <div class="modal__title">
798
-            <h2>mRNA疫苗<br class="d-lg-block">如何在疫情大展身手</h4>
834
+            <h2>疫情下的mRNA疫苗</h4>
835
+          </div>
836
+          <div class="modal__video">
837
+            <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>
799
           </div>
838
           </div>
800
           <div class="modal__preface">
839
           <div class="modal__preface">
801
             <p>
840
             <p>
802
               2023年諾貝爾生醫獎由匈牙利裔的美籍科學家卡里科(Katalin Kariko),和美國科學家魏斯曼(Drew Weissman)共同獲獎。兩人長期致力於mRNA疫苗研發,因為在核苷(nucleoside)修飾的有關發現,得以促成開發有效的COVID-19信使核糖核酸(mRNA)疫苗,故獲得醫學獎殊榮。<br>
841
               2023年諾貝爾生醫獎由匈牙利裔的美籍科學家卡里科(Katalin Kariko),和美國科學家魏斯曼(Drew Weissman)共同獲獎。兩人長期致力於mRNA疫苗研發,因為在核苷(nucleoside)修飾的有關發現,得以促成開發有效的COVID-19信使核糖核酸(mRNA)疫苗,故獲得醫學獎殊榮。<br>
803
               而藉由他們的突破性發現,人們根本性的改變對於mRNA如何與免疫系統相互作用的理解,在現代人類面臨健康最大威脅之一的COVID-19疫情期間,兩位科學家為空前的疫苗研發速度做出貢獻。
842
               而藉由他們的突破性發現,人們根本性的改變對於mRNA如何與免疫系統相互作用的理解,在現代人類面臨健康最大威脅之一的COVID-19疫情期間,兩位科學家為空前的疫苗研發速度做出貢獻。
804
-              <span>〔12〕</span>
843
+              <span>〔11〕</span>
805
             </p>
844
             </p>
806
           </div>
845
           </div>
846
+          <h3>新冠mRNA 疫苗五大特色:</h3>
847
+          <div class="modal__feature">
848
+            <div class="modal__feature__item">
849
+              <p>
850
+                <span class="red">不使用</span><br>
851
+                可能引起新冠肺炎<br>
852
+                的完整病毒
853
+              </p>
854
+            </div>
855
+            <div class="modal__feature__item">
856
+              <p class="d-lg-none">
857
+                在 mRNA 按指令<br>
858
+                完成任務後<br>
859
+                細胞會將其<br>
860
+                <span class="red">很快分解和消除</span>
861
+              </p>
862
+              <p class="d-none d-lg-block">
863
+                在 mRNA 按<br>
864
+                指令完成任務後<br>
865
+                細胞會將其<br>
866
+                <span class="red">很快分解和消除</span>
867
+              </p>
868
+            </div>
869
+            <div class="modal__feature__item">
870
+              <p>
871
+                <span class="red">不影響</span><br>
872
+                人體 DNA<br>
873
+                及基因
874
+              </p>
875
+            </div>
876
+            <div class="modal__feature__item">
877
+              <p>
878
+                <span class="red">不會導致</span><br>
879
+                接種者感染<br>
880
+                新冠肺炎
881
+              </p>
882
+            </div>
883
+            <div class="modal__feature__item">
884
+              <p class="d-lg-none">
885
+                與所有其他類型的疫苗<br>
886
+                一樣在安全及效力方面同樣<br>
887
+                <span class="red">具嚴格法規<br class="d-none d-lg-block">審核標準</span>
888
+                <!-- <span class="num">〔13〕</span> -->
889
+              </p>
890
+              <p class="d-none d-lg-block">
891
+                與所有其他類型的<br>
892
+                疫苗一樣在安全<br>
893
+                及效力方面同樣<br>
894
+                <span class="red">具嚴格法規<br>審核標準</span>
895
+              </p>
896
+            </div>
897
+          </div>
807
           <h3>新冠mRNA疫苗如何運作? </h3>
898
           <h3>新冠mRNA疫苗如何運作? </h3>
808
           <div class="modal__operation">
899
           <div class="modal__operation">
809
             <div class="modal__operation__item">
900
             <div class="modal__operation__item">
812
               </div>
903
               </div>
813
               <div class="modal__operation__text">
904
               <div class="modal__operation__text">
814
                 <p>
905
                 <p>
815
-                  新冠mRNA疫苗向細胞發出指令,要求製造一段無害的蛋白質,稱為「棘蛋白」,<b>與造成新冠肺炎病毒表面的棘蛋白相似</b>
906
+                  新冠mRNA疫苗透過人體上臂肌肉注射進入
816
                 </p>
907
                 </p>
817
               </div>
908
               </div>
818
             </div>
909
             </div>
822
               </div>
913
               </div>
823
               <div class="modal__operation__text">
914
               <div class="modal__operation__text">
824
                 <p>
915
                 <p>
825
-                  新冠mRNA疫苗透過人體上臂肌肉注射進入
916
+                  新冠mRNA疫苗向細胞發出指令,要求製造一段無害的蛋白質,稱為「棘蛋白」,<b>與造成新冠肺炎病毒表面的棘蛋白相似</b>
826
                 </p>
917
                 </p>
827
               </div>
918
               </div>
828
             </div>
919
             </div>
832
               </div>
923
               </div>
833
               <div class="modal__operation__text">
924
               <div class="modal__operation__text">
834
                 <p>
925
                 <p>
835
-                  一旦指令(mRNA)進入肌肉細胞,細胞會根據指令製造蛋白質片段,產生這種蛋白質片段後,細胞會分解和消除該指令
926
+                  產生棘蛋白後,細胞會分解和消除發出指令的mRNA
836
                 </p>
927
                 </p>
837
               </div>
928
               </div>
838
             </div>
929
             </div>
842
               </div>
933
               </div>
843
               <div class="modal__operation__text">
934
               <div class="modal__operation__text">
844
                 <p>
935
                 <p>
845
-                  該蛋白質片段會出現在細胞表面。當人體免疫系統發現此處不應該有這種蛋白質,會開始啟動免疫反應並分泌抗體。
936
+                  棘蛋白會出現在細胞表面。當人體免疫系統發現此處不應該有這種蛋白質,會開始啟動免疫反應並分泌抗體。
846
                 </p>
937
                 </p>
847
               </div>
938
               </div>
848
             </div>
939
             </div>
852
               </div>
943
               </div>
853
               <div class="modal__operation__text">
944
               <div class="modal__operation__text">
854
                 <p>
945
                 <p>
855
-                  與人體抑制新冠肺炎的自然感染同理。到這個過程結束時,接種者便可獲得免疫保護。<span>〔13〕</span>
946
+                  與人體抑制新冠肺炎的自然感染同理。整個流程結束時,接種者便可獲得免疫保護。<span>〔12〕</span>
856
                 </p>
947
                 </p>
857
               </div>
948
               </div>
858
             </div>
949
             </div>
859
           </div>
950
           </div>
860
-          <h3>新冠mRNA 疫苗五大特色:</h3>
861
-          <div class="modal__feature">
862
-            <div class="modal__feature__item">
863
-              <p>
864
-                <span class="red">不使用</span><br>
865
-                引起新冠肺炎<br>
866
-                的活體病毒
867
-              </p>
868
-            </div>
869
-            <div class="modal__feature__item">
870
-              <p>
871
-                <span class="red">不影響</span><br>
872
-                人體 DNA<br>
873
-                及基因
874
-              </p>
875
-            </div>
876
-            <div class="modal__feature__item">
877
-              <p>
878
-                <span class="red">不會導致</span><br>
879
-                接種者感染<br>
880
-                新冠肺炎
881
-              </p>
882
-            </div>
883
-            <div class="modal__feature__item">
884
-              <p class="d-lg-none">
885
-                在 mRNA 按指令完成<br>
886
-                任務後細胞很快會將其<br>
887
-                <span class="red">分解和消除</span>
888
-              </p>
889
-              <p class="d-none d-lg-block">
890
-                在 mRNA 按<br>
891
-                指令完成任務後<br>
892
-                細胞很快會將其<br>
893
-                <span class="red">分解和消除</span>
894
-              </p>
895
-            </div>
896
-            <div class="modal__feature__item">
897
-              <p class="d-lg-none">
898
-                與所有其他類型的疫苗<br>
899
-                一樣在安全及效力方面同樣<br>
900
-                <span class="red">具嚴格法規<br class="d-none d-lg-block">審核標準</span><span class="num">〔13〕</span>
901
-              </p>
902
-              <p class="d-none d-lg-block">
903
-                與所有其他類型的<br>
904
-                疫苗一樣在安全<br>
905
-                及效力方面同樣<br>
906
-                <span class="red">具嚴格法規<br>審核標準</span>
907
-              </p>
908
-            </div>
909
-          </div>
910
         </div>
951
         </div>
911
       </div>
952
       </div>
912
     </div>
953
     </div>
918
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
959
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
919
         <div class="modal-body">
960
         <div class="modal-body">
920
           <div class="modal__title">
961
           <div class="modal__title">
921
-            <h2>mRNA小試身手</h4>
962
+            <h2>mRNA知識檢定</h4>
922
           </div>
963
           </div>
923
           <div class="modal__preface">
964
           <div class="modal__preface">
924
             <p>你好像更了解mRNA了,來點小試身手吧 !</p>
965
             <p>你好像更了解mRNA了,來點小試身手吧 !</p>

+ 1
- 1
src/fe/mrna/js/main.js 查看文件

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