DC
/
Moderna-Survey
Obserwuj 8
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

update mrna

Sherry 1 rok temu
rodzic
2087ab19a8
commit
a810b6ad3f
92 zmienionych plików z 20652 dodań i 0 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 84
    0
      src/fe/mrna/404.html
  2. 84
    0
      src/fe/mrna/500.html
  3. 14671
    0
      src/fe/mrna/css/all.css
  4. 1
    0
      src/fe/mrna/css/all.css.map
  5. 37
    0
      src/fe/mrna/css/all.scss
  6. 180
    0
      src/fe/mrna/css/base/_base.scss
  7. 296
    0
      src/fe/mrna/css/component/_modal.scss
  8. 46
    0
      src/fe/mrna/css/component/_swiper.scss
  9. 83
    0
      src/fe/mrna/css/component/_video.scss
  10. 13
    0
      src/fe/mrna/css/helper/_ellipsis.scss
  11. 22
    0
      src/fe/mrna/css/helper/_img-scale.scss
  12. 32
    0
      src/fe/mrna/css/helper/_px2em.scss
  13. 22
    0
      src/fe/mrna/css/helper/_text.scss
  14. 21
    0
      src/fe/mrna/css/helper/_variable.scss
  15. 53
    0
      src/fe/mrna/css/layout/_footer.scss
  16. 238
    0
      src/fe/mrna/css/layout/_header.scss
  17. 1
    0
      src/fe/mrna/css/layout/_popup.scss
  18. 131
    0
      src/fe/mrna/css/page/_errorPage.scss
  19. 87
    0
      src/fe/mrna/css/section/_expert.scss
  20. 254
    0
      src/fe/mrna/css/section/_history.scss
  21. 76
    0
      src/fe/mrna/css/section/_moreref.scss
  22. 223
    0
      src/fe/mrna/css/section/_qa.scss
  23. 101
    0
      src/fe/mrna/css/section/_research.scss
  24. 60
    0
      src/fe/mrna/css/section/_understand.scss
  25. 1152
    0
      src/fe/mrna/css/vendor/_aos.scss
  26. 6
    0
      src/fe/mrna/css/vendor/_bootstrap.min.scss
  27. 349
    0
      src/fe/mrna/css/vendor/_normalize.scss
  28. 13
    0
      src/fe/mrna/css/vendor/_swiper.min.scss
  29. BIN
      src/fe/mrna/images/arrow-left-disable.png
  30. BIN
      src/fe/mrna/images/arrow-left.png
  31. BIN
      src/fe/mrna/images/arrow-right-disable.png
  32. BIN
      src/fe/mrna/images/arrow-right.png
  33. BIN
      src/fe/mrna/images/expert-bg.png
  34. BIN
      src/fe/mrna/images/expert-bg_mb.png
  35. BIN
      src/fe/mrna/images/expert-circle-1.png
  36. BIN
      src/fe/mrna/images/expert-circle-2.png
  37. BIN
      src/fe/mrna/images/expert-circle-3.png
  38. BIN
      src/fe/mrna/images/expert-circle-4.png
  39. BIN
      src/fe/mrna/images/expert-line.png
  40. BIN
      src/fe/mrna/images/expert-title-bg.png
  41. BIN
      src/fe/mrna/images/history-bg.png
  42. BIN
      src/fe/mrna/images/history-bg_mb.png
  43. BIN
      src/fe/mrna/images/history-title-bg.png
  44. BIN
      src/fe/mrna/images/modal-bg.png
  45. BIN
      src/fe/mrna/images/moreref-bg.png
  46. BIN
      src/fe/mrna/images/moreref-line.png
  47. BIN
      src/fe/mrna/images/moreref-map.png
  48. BIN
      src/fe/mrna/images/moreref-title-bg.png
  49. BIN
      src/fe/mrna/images/qa-bg.png
  50. BIN
      src/fe/mrna/images/qa-keypoint-pic-1.png
  51. BIN
      src/fe/mrna/images/qa-keypoint-pic-2.png
  52. BIN
      src/fe/mrna/images/qa-keypoint-pic-3.png
  53. BIN
      src/fe/mrna/images/qa-title-bg.png
  54. BIN
      src/fe/mrna/images/rearch-popup/proud-pic-1.png
  55. BIN
      src/fe/mrna/images/rearch-popup/proud-pic-2.png
  56. BIN
      src/fe/mrna/images/rearch-popup/proud-pic-3.png
  57. BIN
      src/fe/mrna/images/rearch-popup/proud-pic-4.png
  58. BIN
      src/fe/mrna/images/rearch-popup/proud-pic-lamp.png
  59. BIN
      src/fe/mrna/images/rearch-popup/unlimit-pic.png
  60. BIN
      src/fe/mrna/images/research-bg.png
  61. BIN
      src/fe/mrna/images/research-pic-feature.png
  62. BIN
      src/fe/mrna/images/research-pic-proud.png
  63. BIN
      src/fe/mrna/images/research-pic-show.png
  64. BIN
      src/fe/mrna/images/research-pic-test.png
  65. BIN
      src/fe/mrna/images/research-pic-unlimit.png
  66. BIN
      src/fe/mrna/images/research-title-bg.png
  67. BIN
      src/fe/mrna/images/research-title-bg_mb.png
  68. BIN
      src/fe/mrna/images/understand-bg.png
  69. BIN
      src/fe/mrna/images/understand-bg_mb.png
  70. BIN
      src/fe/mrna/images/understand-title-bg.png
  71. BIN
      src/fe/mrna/images/video-icon.png
  72. 877
    0
      src/fe/mrna/index.html
  73. 56
    0
      src/fe/mrna/js/ViewModel.js
  74. 74
    0
      src/fe/mrna/js/ga.js
  75. 762
    0
      src/fe/mrna/js/main.js
  76. 104
    0
      src/fe/mrna/js/tealiumTracking.js
  77. 234
    0
      src/fe/mrna/js/utlis.js
  78. 11
    0
      src/fe/mrna/lib/ScrollTrigger.min.js
  79. 7
    0
      src/fe/mrna/lib/bootstrap.min.js
  80. 12
    0
      src/fe/mrna/lib/cookie.js
  81. 11
    0
      src/fe/mrna/lib/gsap.min.js
  82. 3
    0
      src/fe/mrna/lib/iframe_api.js
  83. 2
    0
      src/fe/mrna/lib/jquery-3.6.4.min.js
  84. 1
    0
      src/fe/mrna/lib/jquery.nicescroll.min.js
  85. 2
    0
      src/fe/mrna/lib/lenis.min.js
  86. 14
    0
      src/fe/mrna/lib/swiper.min.js
  87. 10
    0
      src/fe/mrna/lib/vconsole.min.js
  88. 6
    0
      src/fe/mrna/robots.txt
  89. 38
    0
      src/fe/mrna/share/17.html
  90. 38
    0
      src/fe/mrna/share/30.html
  91. 38
    0
      src/fe/mrna/share/52.html
  92. 16
    0
      src/fe/mrna/sitemap.xml

+ 84
- 0
src/fe/mrna/404.html Wyświetl plik 

@@ -0,0 +1,84 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 
+  <meta name="format-detection" content="telephone=no">
9 
+
10 
+  <title></title>
11 
+
12 
+  <meta name="description" content="" />
13 
+  <meta name="keywords" content="" />
14 
+
15 
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" sizes="32x32" />
16 
+  <link rel="image_src" href="https://event.leecy.org.tw/mrn/images/share.png" />
17 
+  <link rel="canonical" href="https://event.leecy.org.tw/mrn/404.html" />
18 
+  <meta property="og:title" content="" />
19 
+  <meta property="og:type" content="website" />
20 
+  <meta property="og:url" content="" />
21 
+  <meta property="og:image" content="https://event.leecy.org.tw/mrn／images/share.png" />
22 
+  <meta property="og:description" content="" />
23 
+
24 
+  <link rel="stylesheet" href="/css/all.css">
25 
+
26 
+  <!-- Tealium Universal Tag --> <!-- Loading script asynchronously --> <script type="text/javascript"> (function(a,b,c,d) { a='//tags.tiqcdn.com/utag/modernatx/tafm-mrna.com.tw-dtc-taiwan/prod/utag.js'; b=document;c='script';d=b.createElement(c);d.src=a; d.type='text/java'+c;d.async=true; a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})(); </script>
27 
+
28 
+  <script type="text/javascript">
29 
+    var moderna_dl ={
30 
+      page:{
31 
+        "site_language" : "chinese",
32 
+        "root_domain" : "tafm-mrna.com.tw",
33 
+        "therapeutic_area" : "infectious diseases",
34 
+        "side_of_brand" : "dtc",
35 
+        "brand_name" : "spikevax",
36 
+        "site_branding" : "branded",
37 
+        "indication" : "covid-19",
38 
+        "business_function" : "commercial",
39 
+        "location": "taiwan"
40 
+      }
41 
+    };
42 
+  </script>
43 
+
44 
+  <script type="text/javascript">
45 
+    var moderna_dl={
46 
+      page:{
47 
+        "page_type" : "errorpage",
48 
+        "error_message" : "Page not found",
49 
+        "error_code" : "404"
50 
+      }
51 
+    };
52 
+  </script>
53 
+
54 
+</head>
55 
+
56 
+<body>
57 
+
58 
+  <div class="wrapper wrapper-errorPage">
59 
+    <!-- errorPage -->
60 
+    <section class="errorPage gradient-d">
61 
+      <div class="deco">
62 
+        <img src="./images/kv-deco.png" alt="">
63 
+      </div>
64 
+      <div class="container">
65 
+        <h2>未找到網頁</h2>
66 
+        <p>抱歉，您要找的頁面已被刪除或暫時無法造訪</p>
67 
+        <img class="arrow" src="./images/arrow-down-white.png" alt="">
68 
+        <a href="https://tafm-mrna.com.tw/">前往首頁</a>
69 
+      </div>
70 
+      <footer class="footer">
71 
+        <p>
72 
+          本網站不會收集或儲存任何關於您的個人資料。<br class="mb-show">以上內容僅供參考用途，不代表也不可取代醫生的意見，亦不能作為自我診斷或選擇治療的依據。<br>
73 
+          唯有您的醫生方能為您做出準確的診斷及提供適當的治療。<br class="mb-show">如果對個人醫療狀況或接種疫苗有任何疑問，請務必尋求醫生或其他醫療服務單位的建議。
74 
+        </p>
75 
+        <div class="footer__logo">
76 
+          <img src="./images/logo.png" alt="">
77 
+        </div>
78 
+      </footer>
79 
+    </section>
80 
+  </div>
81 
+
82 
+</body>
83 
+
84 
+</html>

+ 84
- 0
src/fe/mrna/500.html Wyświetl plik 

@@ -0,0 +1,84 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 
+  <meta name="format-detection" content="telephone=no">
9 
+
10 
+  <title>迎擊新冠病毒，你的抗體足夠且有效嗎？</title>
11 
+
12 
+  <meta name="description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
13 
+  <meta name="keywords" content="" />
14 
+
15 
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" sizes="32x32" />
16 
+  <link rel="image_src" href="https://tafm-mrna.com.tw/images/share.png" />
17 
+  <link rel="canonical" href="https://tafm-mrna.com.tw/500.html" />
18 
+  <meta property="og:title" content="迎擊新冠病毒，你的抗體足夠且有效嗎？" />
19 
+  <meta property="og:type" content="website" />
20 
+  <meta property="og:url" content="" />
21 
+  <meta property="og:image" content="https://tafm-mrna.com.tw/images/share.png" />
22 
+  <meta property="og:description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
23 
+
24 
+  <link rel="stylesheet" href="/css/all.css">
25 
+
26 
+  <!-- Tealium Universal Tag --> <!-- Loading script asynchronously --> <script type="text/javascript"> (function(a,b,c,d) { a='//tags.tiqcdn.com/utag/modernatx/tafm-mrna.com.tw-dtc-taiwan/prod/utag.js'; b=document;c='script';d=b.createElement(c);d.src=a; d.type='text/java'+c;d.async=true; a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})(); </script>
27 
+
28 
+  <script type="text/javascript">
29 
+    var moderna_dl ={
30 
+      page:{
31 
+        "site_language" : "chinese",
32 
+        "root_domain" : "tafm-mrna.com.tw",
33 
+        "therapeutic_area" : "infectious diseases",
34 
+        "side_of_brand" : "dtc",
35 
+        "brand_name" : "spikevax",
36 
+        "site_branding" : "branded",
37 
+        "indication" : "covid-19",
38 
+        "business_function" : "commercial",
39 
+        "location": "taiwan"
40 
+      }
41 
+    };
42 
+  </script>
43 
+
44 
+  <script type="text/javascript">
45 
+    var moderna_dl={
46 
+      page:{
47 
+        "page_type" : "errorpage",
48 
+        "error_message" : "System error",
49 
+        "error_code" : "500"
50 
+      }
51 
+    };
52 
+  </script>
53 
+
54 
+</head>
55 
+
56 
+<body>
57 
+
58 
+  <div class="wrapper wrapper-errorPage">
59 
+    <!-- errorPage -->
60 
+    <section class="errorPage gradient-d">
61 
+      <div class="deco">
62 
+        <img src="./images/kv-deco.png" alt="">
63 
+      </div>
64 
+      <div class="container">
65 
+        <h2>未找到網頁</h2>
66 
+        <p>抱歉，您要找的頁面已被刪除或暫時無法造訪</p>
67 
+        <img class="arrow" src="./images/arrow-down-white.png" alt="">
68 
+        <a href="https://tafm-mrna.com.tw/">前往首頁</a>
69 
+      </div>
70 
+      <footer class="footer">
71 
+        <p>
72 
+          本網站不會收集或儲存任何關於您的個人資料。<br class="mb-show">以上內容僅供參考用途，不代表也不可取代醫生的意見，亦不能作為自我診斷或選擇治療的依據。<br>
73 
+          唯有您的醫生方能為您做出準確的診斷及提供適當的治療。<br class="mb-show">如果對個人醫療狀況或接種疫苗有任何疑問，請務必尋求醫生或其他醫療服務單位的建議。
74 
+        </p>
75 
+        <div class="footer__logo">
76 
+          <img src="./images/logo.png" alt="">
77 
+        </div>
78 
+      </footer>
79 
+    </section>
80 
+  </div>
81 
+
82 
+</body>
83 
+
84 
+</html>

+ 14671
- 0
src/fe/mrna/css/all.css
Plik diff jest za duży
Wyświetl plik


+ 1
- 0
src/fe/mrna/css/all.css.map
Plik diff jest za duży
Wyświetl plik


+ 37
- 0
src/fe/mrna/css/all.scss Wyświetl plik 

@@ -0,0 +1,37 @@
1 
+@charset "UTF-8";
2 
+
3 
+// 第三方套件
4 
+@import "vendor/normalize";
5 
+@import "vendor/bootstrap.min";
6 
+@import "vendor/swiper.min";   //5.3.1版
7 
+
8 
+
9 
+// 函式
10 
+@import "helper/variable";
11 
+@import "helper/ellipsis";
12 
+@import "helper/img-scale";
13 
+@import "helper/px2em";
14 
+@import "helper/text";
15 
+
16 
+// 共用變數
17 
+@import "base/base";
18 
+
19 
+// 共同組件
20 
+@import "layout/header";
21 
+@import "layout/footer";
22 
+@import "layout/popup";
23 
+
24 
+@import "component/modal";
25 
+@import "component/video";
26 
+@import "component/swiper";
27 
+
28 
+// 區塊section
29 
+@import "section/expert";
30 
+@import "section/qa";
31 
+@import "section/history";
32 
+@import "section/moreref";
33 
+@import "section/understand";
34 
+@import "section/research";
35 
+
36 
+// 頁面page
37 
+@import "page/errorPage";

+ 180
- 0
src/fe/mrna/css/base/_base.scss Wyświetl plik 

@@ -0,0 +1,180 @@
1 
+@charset "UTF-8";
2 
+* {
3 
+  box-sizing: border-box;
4 
+}
5 
+
6 
+body,
7 
+h1, h2, h3, h4, h5, h6,
8 
+.h1, .h2, .h3, .h4, .h5, .h6 {
9 
+  font-family: $font-family-base;
10 
+}
11 
+
12 
+p {
13 
+  margin: 0;
14 
+}
15 
+
16 
+.wrapper {
17 
+  padding-top: 3.4em;
18 
+  width: 100%;
19 
+  overflow: hidden;
20 
+  opacity: 0;
21 
+  visibility: hidden;
22 
+}
23 
+
24 
+.section {
25 
+  position: relative;
26 
+}
27 
+
28 
+.container {
29 
+  position: relative;
30 
+  width: 100%;
31 
+  height: auto;
32 
+  margin: 0 auto;
33 
+  display: flex;
34 
+  flex-direction: column;
35 
+  align-items: center;
36 
+  justify-content: flex-start;
37 
+}
38 
+
39 
+.bg {
40 
+  position: absolute;
41 
+  left: 50%;
42 
+  top: 50%;
43 
+  transform: translate(-50%, -50%);
44 
+  width: 100%;
45 
+  height: 100%;
46 
+  pointer-events: none;
47 
+  img {
48 
+      width: 100%;
49 
+  }
50 
+}
51 
+
52 
+.copywriting {
53 
+  position: relative;
54 
+  display: inline-flex;
55 
+  flex-direction: column;
56 
+  justify-content: flex-start;
57 
+  align-items: center;
58 
+  padding: 1em;
59 
+  margin-bottom: 2em;
60 
+  .bg {
61 
+    position: absolute;
62 
+    top: 50%;
63 
+    left: 50%;
64 
+    transform: translate(-50%, -50%);
65 
+    width: 100%;
66 
+    height: 100%;
67 
+    img {
68 
+      position: absolute;
69 
+      top: 50%;
70 
+      left: 50%;
71 
+      transform: translate(-50%, -50%);
72 
+      width: auto;
73 
+      height: 100%;
74 
+    }
75 
+  }
76 
+  .subtitle {
77 
+    margin-bottom: 0.5em;
78 
+    p {
79 
+      margin: 0;
80 
+      font-size: 1.1em;
81 
+      font-weight: 300;
82 
+      letter-spacing: 0.2em;
83 
+      color: #0699d2;
84 
+    }
85 
+  }
86 
+  .title {
87 
+    h2 {
88 
+      margin: 0;
89 
+      font-size: 2em;
90 
+      color: $blue-d;
91 
+    }
92 
+  }
93 
+  &-r {
94 
+    .subtitle {
95 
+      margin-bottom: 0;
96 
+    }
97 
+    .title {
98 
+      margin-bottom: 0.5em;
99 
+    }
100 
+  }
101 
+  &-s {
102 
+    padding: 1.8em;
103 
+    .title {
104 
+      margin-bottom: 0;
105 
+    }
106 
+  }
107 
+}
108 
+
109 
+.pc-show {
110 
+  display: block !important;
111 
+}
112 
+
113 
+.mb-show {
114 
+  display: none !important;
115 
+}
116 
+
117 
+.nicescroll-rails {
118 
+  &::before {
119 
+    content: "";
120 
+    position: absolute;
121 
+    top: 0;
122 
+    left: -0.18em;
123 
+    bottom: 0;
124 
+    display: block;
125 
+    height: 100%;
126 
+    width: 0.1em;
127 
+    background-color: rgba($gray, 0.2);
128 
+  }
129 
+}
130 
+
131 
+@media screen and (max-width: 992px) {
132 
+  .wrapper {
133 
+    padding-top: 9em;
134 
+  }
135 
+
136 
+  .container {
137 
+    width: 100%;
138 
+  }
139 
+
140 
+  .pc-show {
141 
+    display: none !important;
142 
+  }
143 
+
144 
+  .mb-show {
145 
+    display: block !important;
146 
+  }
147 
+  .copywriting {
148 
+    margin-bottom: 4.5em;
149 
+    .subtitle {
150 
+      margin-bottom: 0.8em;
151 
+      p {
152 
+        font-size: 2.1em;
153 
+        font-weight: 400;
154 
+      }
155 
+    }
156 
+    .title {
157 
+      h2 {
158 
+        font-size: 3.7em;
159 
+        font-weight: 500;
160 
+      }
161 
+    }
162 
+    &-r {
163 
+      .title {
164 
+        margin-bottom: 1em;
165 
+      }
166 
+      .subtitle {
167 
+        margin-bottom: 0;
168 
+      }
169 
+    }
170 
+    &-s {
171 
+      padding: 3.3em 0;
172 
+    }
173 
+  }
174 
+  .nicescroll-rails {
175 
+    &::before {
176 
+      content: "";
177 
+      left: -0.27em;
178 
+    }
179 
+  }
180 
+}

+ 296
- 0
src/fe/mrna/css/component/_modal.scss Wyświetl plik 

@@ -0,0 +1,296 @@
1 
+@charset "UTF-8";
2 
+.modal-research {
3 
+    &::before {
4 
+        content: "";
5 
+        width: 300%;
6 
+        height: 300%;
7 
+        position: fixed;
8 
+        left: 50%;
9 
+        top: 50%;
10 
+        background: url(../../images/modal-bg.png) $blue-d repeat;
11 
+        transform: translate(-50%, -50%) rotate(-45deg);
12 
+        background-size: 20em auto;
13 
+    }
14 
+    .btn-close {
15 
+        position: absolute;
16 
+        right: 1em;
17 
+        top: 1em;
18 
+        opacity: 0.3;
19 
+        z-index: 1;
20 
+    }
21 
+    .modal {
22 
+        &-dialog {
23 
+            max-width: 40em;
24 
+        }
25 
+        &-body {
26 
+            padding: 2.5em 3em 2.3em;
27 
+            h2 {
28 
+                color: $blue-d;
29 
+                font-size: 1.4em;
30 
+                margin: 0;
31 
+            }
32 
+            h3 {
33 
+                color: $blue;
34 
+                font-size: 1em;
35 
+                margin: 0;
36 
+            }
37 
+            h4 {
38 
+                margin: 0;
39 
+                font-size: 0.9em;
40 
+            }
41 
+            p {
42 
+                color: $gray;
43 
+                font-size: 0.8em;
44 
+                margin: 0;
45 
+                font-weight: 300;
46 
+                span {
47 
+                    font-size: 0.8em;
48 
+                }
49 
+            }
50 
+        }
51 
+    }
52 
+}
53 
+
54 
+.modal-proud {
55 
+    .modal {
56 
+        &__title {
57 
+            margin-bottom: 0.7em;
58 
+        }
59 
+        &__preface {
60 
+            margin-bottom: 0.5em;
61 
+            h3 {
62 
+                margin-bottom: 0.1em;
63 
+            }
64 
+        }
65 
+        &__list {
66 
+
67 
+        }
68 
+        &__item {
69 
+            display: flex;
70 
+            align-items: flex-start;
71 
+            justify-content: flex-start;
72 
+        }
73 
+        &__pic {
74 
+            flex: 0 0 4em;
75 
+            margin-right: 0.7em;
76 
+            margin-top: 0.8em;
77 
+            img {
78 
+                width: 100%;
79 
+                height: auto;
80 
+            }
81 
+        }
82 
+        &__text {
83 
+            flex: 1;
84 
+            padding: 0.9em 0;
85 
+            border-bottom: 0.1em solid rgba($gray, 0.3);
86 
+            h4 {
87 
+                color: $blue;
88 
+                font-size: 0.9em;
89 
+                margin-bottom: 0.2em;
90 
+            }
91 
+            p {
92 
+                font-size: 0.8em;
93 
+            }
94 
+        }
95 
+        &__additional {
96 
+            display: flex;
97 
+            align-items: flex-start;
98 
+            justify-content: flex-start;
99 
+            border: 0.1em solid rgba($gray, 0.3);
100 
+            border-radius: 0.5em;
101 
+            padding: 0.3em 0.7em 0.7em;
102 
+            margin-top: 0.7em;
103 
+            &__icon {
104 
+                width: 3em;
105 
+                margin-right: 0.7em;
106 
+                img {
107 
+                    width: 100%;
108 
+                    height: auto;
109 
+                }
110 
+            }
111 
+            p {
112 
+                font-size: 0.8em;
113 
+            }
114 
+        }
115 
+
116 
+    }
117 
+}
118 
+
119 
+.modal-feature {
120 
+    .modal {
121 
+        &-body {
122 
+            padding: 1.5em 3em 1.3em;
123 
+        }
124 
+        &__title {
125 
+            margin-bottom: 1em;
126 
+        }
127 
+        &__principle {
128 
+            position: relative;
129 
+            display: flex;
130 
+            justify-content: space-around;
131 
+            align-items: center;
132 
+            margin-bottom: 1.8em;
133 
+            &__item {
134 
+                position: relative;
135 
+                width: 15em;
136 
+                height: 15em;
137 
+                border-radius: 100%;
138 
+                &-blue {
139 
+                    background-color: $blue;
140 
+                    padding: 3.5em 1.8em 2.5em 2em;
141 
+                    &::before {
142 
+                        content: "";
143 
+                        display: block;
144 
+                        width: 7.5em;
145 
+                        height: 1px;
146 
+                        background-color: rgba($gray, 0.3);
147 
+                        position: absolute;
148 
+                        top: 50%;
149 
+                        transform: translateY(-50%);
150 
+                        right: -7.5em;
151 
+                    }
152 
+                }
153 
+                &-red {
154 
+                    background-color: $red;
155 
+                    padding: 3.5em 0.9em 2.5em 1.3em;
156 
+                }
157 
+            }
158 
+            &__title {
159 
+                margin-bottom: 0.5em;
160 
+                h3 {
161 
+                    font-size: 1.2em;
162 
+                    text-align: center;
163 
+                    color: $white;
164 
+                }
165 
+            }
166 
+            &__text {
167 
+                p {
168 
+                    color: $white;
169 
+                    line-height: 1.4;
170 
+                    font-size: 0.8em;
171 
+                }
172 
+            }
173 
+        }
174 
+        &__list {
175 
+            margin-top: 1em;
176 
+            display: flex;
177 
+            flex-wrap: wrap;
178 
+        }
179 
+        &__item {
180 
+            width: 33%;
181 
+            border-left: 0.1em solid $blue;
182 
+            padding: 0 1em 0 0.5em;
183 
+            margin-bottom: 1.5em;
184 
+            h4 {
185 
+                color: $blue-d;
186 
+            }
187 
+            p {
188 
+                font-size: 0.7em;
189 
+                line-height: 1.3;
190 
+            }
191 
+        }
192 
+    }
193 
+}
194 
+
195 
+.modal-unlimit {
196 
+    .modal {
197 
+        &__title {
198 
+            margin-bottom: 0.7em;
199 
+        }
200 
+        &__preface {
201 
+            margin-bottom: 1.3em;
202 
+            h3 {
203 
+                font-size: 0.9em;
204 
+                font-weight: 300;
205 
+                margin-bottom: 0.3em;
206 
+            }
207 
+            p {
208 
+                font-size: 0.8em;
209 
+                line-height: 1.4;
210 
+            }
211 
+        }
212 
+        &__intro {
213 
+            margin-top: 1.8em;
214 
+            display: flex;
215 
+            justify-content: space-between;
216 
+            &__pic{
217 
+                width: 45%;
218 
+                img {
219 
+                    width: 100%;
220 
+                    height: auto;
221 
+                }
222 
+            }
223 
+            p {
224 
+                font-size: 0.8em;
225 
+                line-height: 1.4;
226 
+            }
227 
+            ul {
228 
+                width: 54%;
229 
+                list-style: none;
230 
+                li {
231 
+                    position: relative;
232 
+                    display: flex;
233 
+                    &::before {
234 
+                        content: "";
235 
+                        display: block;
236 
+                        position: absolute;
237 
+                        width: 0.15em;
238 
+                        height: 0.15em;
239 
+                        background-color: $gray;
240 
+                        border-radius: 100%;
241 
+                        left: -0.7em;
242 
+                        top: 0.5em;
243 
+                    }
244 
+                }
245 
+            }
246 
+        }
247 
+    }
248 
+}
249 
+
250 
+.modal-show {
251 
+    h3 {
252 
+        font-weight: 400;
253 
+    }
254 
+    .modal {
255 
+        &-body {
256 
+            padding: 2.5em 2.5em 2.3em;
257 
+        }
258 
+        &__title {
259 
+            margin-bottom: 0.5em;
260 
+        }
261 
+        &__preface {
262 
+            margin-bottom: 1.5em;
263 
+        }
264 
+        &__operation {
265 
+            margin-top: 0.8em;
266 
+            &__item {
267 
+                display: flex;
268 
+                align-items: flex-start;
269 
+                margin-bottom: 0.5em;
270 
+                p {
271 
+                    font-size: 0.7em;
272 
+                }
273 
+            }
274 
+            &__step {
275 
+                background-color: $blue;
276 
+                padding: 0.2em 0.5em;
277 
+                border-radius: 1em;
278 
+                margin-right: 0.7em;
279 
+                p {
280 
+                    color: $white;
281 
+                    white-space: nowrap;
282 
+                    line-height: 1;
283 
+                }
284 
+            }
285 
+            &__text {
286 
+                flex: 1;
287 
+                padding-bottom: 0.5em;
288 
+                border-bottom: 0.1em solid rgba($gray, 0.3);
289 
+            }
290 
+        }
291 
+        &__feature {
292 
+            display: flex;
293 
+            height: 20em;
294 
+        }
295 
+    }
296 
+}

+ 46
- 0
src/fe/mrna/css/component/_swiper.scss Wyświetl plik 

@@ -0,0 +1,46 @@
1 
+@charset "UTF-8";
2 
+
3 
+.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
4 
+    display: none;
5 
+}
6 
+.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
7 
+    display: none;
8 
+}
9 
+.swiper-button-next, .swiper-button-prev {
10 
+    width: 3em;
11 
+    height: 3em;
12 
+}
13 
+.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
14 
+    background: url(../images/arrow-left.png) no-repeat center center/contain;
15 
+}
16 
+.swiper-button-prev.swiper-button-disabled {
17 
+    opacity: 1;
18 
+    background: url(../images/arrow-left-disable.png) no-repeat center center/contain;
19 
+}
20 
+.swiper-button-next.swiper-button-disabled {
21 
+    opacity: 1;
22 
+    background: url(../images/arrow-right-disable.png) no-repeat center center/contain;
23 
+}
24 
+.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
25 
+    background: url(../images/arrow-right.png) no-repeat center center/contain;
26 
+}
27 
+.swiper-pagination-bullet {
28 
+    background-color: $blue;
29 
+}
30 
+.swiper-pagination-bullet-active {
31 
+    background-color: $blue;
32 
+}
33 
+
34 
+
35 
+@media screen and (max-width: 992px) {
36 
+    .swiper-button-next, .swiper-button-prev {
37 
+        margin-top: 0;
38 
+        transform: translateY(-50%);
39 
+        width: 4em;
40 
+        height: 4em;
41 
+    }
42 
+    .swiper-pagination-bullet {
43 
+        width: 1.5em;
44 
+        height: 1.5em;
45 
+    }
46 
+}

+ 83
- 0
src/fe/mrna/css/component/_video.scss Wyświetl plik 

@@ -0,0 +1,83 @@
1 
+@charset "UTF-8";
2 
+
3 
+.video {
4 
+    position: relative;
5 
+    width: 100%;
6 
+    border-radius: 1.1em;
7 
+    overflow: hidden;
8 
+    box-shadow: 1em 1em 1em rgba(#000, 0.1);
9 
+    &__overlay {
10 
+        position: absolute;
11 
+        width: 100%;
12 
+        height: 100%;
13 
+        left: 0;
14 
+        top: 0;
15 
+        opacity: 1;
16 
+        visibility: visible;
17 
+        pointer-events: none;
18 
+        z-index: 1;
19 
+    }
20 
+    &__frame {
21 
+        width: 101%;
22 
+        height: 101%;
23 
+        backdrop-filter: blur(0.2em);
24 
+        background-color: rgba($white, 0.7);
25 
+    }
26 
+    &__icon {
27 
+        position: absolute;
28 
+        width: 7em;
29 
+        left: 50%;
30 
+        top: 50%;
31 
+        transform: translate(-50%, -50%);
32 
+        cursor: pointer;
33 
+        img {
34 
+            width: 100%;
35 
+            height: auto;
36 
+        }
37 
+        p {
38 
+            text-align: center;
39 
+            font-size: 1.2em;
40 
+            letter-spacing: 0.1em;
41 
+            color: $blue;
42 
+            margin: 0;
43 
+            margin-top: 0.5em;
44 
+            text-shadow: 0 0 0.5em rgba($white, 0.5);
45 
+        }
46 
+    }
47 
+    &__player {
48 
+        width: 100%;
49 
+        padding-bottom: calc(9 / 16 * 100%);
50 
+        // border: 1px solid red;
51 
+    }
52 
+    &__yt {
53 
+        position: absolute;
54 
+        width: 100%;
55 
+        height: 100%;
56 
+        left: 0;
57 
+        top: 0;
58 
+        iframe {
59 
+            width: 100%;
60 
+            height: 100%;
61 
+        }
62 
+    }
63 
+    &.active {
64 
+        .video__frame {
65 
+            opacity: 0;
66 
+            visibility: hidden;
67 
+            transition: 0.3s;
68 
+        }
69 
+    }
70 
+}
71 
+
72 
+
73 
+@media screen and (max-width: 992px) {
74 
+    .video {
75 
+        &__icon {
76 
+            width: 10.5em;
77 
+            p {
78 
+                font-size: 2em;
79 
+                margin-top: 0.7em;
80 
+            }
81 
+        }
82 
+    }
83 
+}

+ 13
- 0
src/fe/mrna/css/helper/_ellipsis.scss Wyświetl plik 

@@ -0,0 +1,13 @@
1 
+@charset "UTF-8";
2 
+
3 
+@mixin ellipsis($width:auto,$row:1){
4 
+  width:$width;
5 
+  display: -webkit-box;
6 
+  overflow: hidden;
7 
+  min-height: initial !important;
8 
+  text-overflow: clip;
9 
+  /*! autoprefixer: off */
10 
+  -webkit-box-orient: vertical;
11 
+  /* autoprefixer: on */
12 
+  -webkit-line-clamp: $row;
13 
+}

+ 22
- 0
src/fe/mrna/css/helper/_img-scale.scss Wyświetl plik 

@@ -0,0 +1,22 @@
1 
+@charset "UTF-8";
2 
+
3 
+@mixin img-scale($imgW:1,$imgH:1) {
4 
+  position: relative;
5 
+  display: block;
6 
+  &:before {
7 
+    content: '';
8 
+    display: block;
9 
+    padding-top: $imgH/$imgW*100%;
10 
+  }
11 
+  >img {
12 
+    position: absolute;
13 
+    top: 0;
14 
+    left: 0;
15 
+    bottom: 0;
16 
+    right: 0;
17 
+    margin: auto;
18 
+    width: auto !important;
19 
+    max-width: 100%;
20 
+    max-height: 100%;
21 
+  }
22 
+}

+ 32
- 0
src/fe/mrna/css/helper/_px2em.scss Wyświetl plik 

@@ -0,0 +1,32 @@
1 
+@charset "UTF-8";
2 
+//un-modified
3 
+
4 
+@function calc-em($target-px, $context) {
5 
+  @return calc(($target-px / $context) * 1em);
6 
+}
7 
+
8 
+// and modified to accept a base context variable
9 
+$browser-context: 16;
10 
+
11 
+@function em($pixels, $context: $browser-context) {
12 
+  @return calc(($pixels / $context) * 1em);
13 
+}
14 
+
15 
+@function rem($pixels, $context: $browser-context) {
16 
+  @return calc(($pixels / $context) * 1rem);
17 
+}
18 
+
19 
+
20 
+@function font-size($size) {
21 
+  @return em($size);
22 
+}
23 
+
24 
+@mixin em($size) {
25 
+  font-size: $size;
26 
+  font-size: em($size);
27 
+}
28 
+
29 
+@mixin rem($size) {
30 
+  font-size: $size;
31 
+  font-size: rem($size);
32 
+}

+ 22
- 0
src/fe/mrna/css/helper/_text.scss Wyświetl plik 

@@ -0,0 +1,22 @@
1 
+@charset "UTF-8";
2 
+.text-title {
3 
+    margin: 0;
4 
+    font-size: 2em;
5 
+    font-weight: 300;
6 
+    line-height: 1.3;
7 
+}
8 
+
9 
+.text-clip {
10 
+    display: inline-block;
11 
+    color: transparent;
12 
+    background: linear-gradient(135deg, rgba(247, 131, 44, 1) 0%, rgba(239, 27, 124, 1) 100%);
13 
+    -webkit-background-clip: text;
14 
+    background-clip: text;
15 
+}
16 
+
17 
+@media (max-width: 992px) {
18 
+    .text-title {
19 
+        font-size: 2.5em;
20 
+        font-weight: 400;
21 
+    }
22 
+}

+ 21
- 0
src/fe/mrna/css/helper/_variable.scss Wyświetl plik 

@@ -0,0 +1,21 @@
1 
+// 共用變數與函數
2 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');  // -思源黑體
3 
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');  // -思源宋體
4 
+
5 
+
6 
+
7 
+/* Font */
8 
+$font-family-base: 'Noto Sans TC', 'Noto Serif TC','PingFangTC', 'Heiti TC', 'Microsoft JhengHei', 'Noto Sans Myanmar','Arial', 'sans-serif';
9 
+
10 
+/* Color */
11 
+$black: #393f42;
12 
+$white: #ffffff;
13 
+$blue: #0699d2;
14 
+$blue-d: #0070a0;
15 
+$red: #db1837;
16 
+$gray: #868686;
17 
+
18 
+/* Gradient */
19 
+$gradient-h: linear-gradient(to right, rgba(248,146,33,1) 0%,rgba(241,55,102,1) 100%);
20 
+$gradient-d: linear-gradient(135deg, #f67835 0%,#ef2275 100%);
21 
+$gradient-d-r: linear-gradient(135deg, #ef2275 0%,#f78356 100%)

+ 53
- 0
src/fe/mrna/css/layout/_footer.scss Wyświetl plik 

@@ -0,0 +1,53 @@
1 
+@charset "UTF-8";
2 
+.footer {
3 
+    position: relative;
4 
+    background-color: #dde9ed;
5 
+    color: #a7b6ba;
6 
+    padding: 1.5em 2.5em 2em;
7 
+    h2 {
8 
+        font-size: 1em;
9 
+        font-weight: 400;
10 
+        margin: 0;
11 
+        margin-bottom: 0.8em;
12 
+    }
13 
+    p {
14 
+        line-height: 1.5;
15 
+        font-size: 0.8em;
16 
+        a {
17 
+            color: #a7b6ba;
18 
+            text-decoration: none;
19 
+            &:hover {
20 
+                text-decoration: underline;
21 
+                color: #a7b6ba;
22 
+            }
23 
+        }
24 
+    }
25 
+    .copyright {
26 
+        position: absolute;
27 
+        right: 2em;
28 
+        bottom: 1em;
29 
+    }
30 
+}
31 
+
32 
+@media screen and (max-width: 992px) {
33 
+    .footer {
34 
+        padding: 4em 3.5em 4em;
35 
+        h2 {
36 
+            font-size: 2em;
37 
+            font-weight: 500;
38 
+            margin-bottom: 0.5em;
39 
+            span {
40 
+                font-weight: 100;
41 
+            }
42 
+        }
43 
+        p {
44 
+            line-height: 1.6;
45 
+            font-size: 1.3em;
46 
+        }
47 
+        .copyright {
48 
+            position: static;
49 
+            right: auto;
50 
+            bottom: auto;
51 
+        }
52 
+    }
53 
+}

+ 238
- 0
src/fe/mrna/css/layout/_header.scss Wyświetl plik 

@@ -0,0 +1,238 @@
1 
+@charset "UTF-8";
2 
+
3 
+.header {
4 
+    position: fixed;
5 
+    left: 0;
6 
+    top: 0;
7 
+    background-color: #fff;
8 
+    width: 100%;
9 
+    z-index: 99;
10 
+    display: flex;
11 
+    justify-content: space-around;
12 
+    align-items: center;
13 
+    box-shadow: 0 0.3em 0.3em rgba($black, 0.1);
14 
+    &__hamburger {
15 
+        display: none;
16 
+    }
17 
+    &__name {
18 
+        background-color: #fff;
19 
+        h1 {
20 
+            color: $blue;
21 
+            font-weight: 500;
22 
+            font-size: 2em;
23 
+            margin: 0;
24 
+        }
25 
+    }
26 
+    &__nav {
27 
+        display: flex;
28 
+        justify-content: center;
29 
+        align-items: center;
30 
+        padding: 1.9em 0 2.2em;
31 
+        &__close {
32 
+            display: none;
33 
+        }
34 
+        &__item {
35 
+            position: relative;
36 
+            text-decoration: none;
37 
+            display: inline-block;
38 
+            margin: 0 2.3em;
39 
+            p {
40 
+                font-weight: 500;
41 
+                color: $black;
42 
+                font-size: 1.1em;
43 
+                line-height: 1;
44 
+                transition: 0.3s;
45 
+            }
46 
+            &:hover {
47 
+                p {
48 
+                    color: $blue;
49 
+                }
50 
+            }
51 
+            &.active {
52 
+                .header__nav__item__line {
53 
+                    position: absolute;
54 
+                    bottom: -1em;
55 
+                    left: 50%;
56 
+                    transform: translateX(-50%);
57 
+                    width: 100%;
58 
+                    height: 0.1em;
59 
+                    background-color: rgba($blue, 0.5);
60 
+                    &::before, &::after {
61 
+                        content: "";
62 
+                        display: block;
63 
+                        position: absolute;
64 
+                        top: 50%;
65 
+                        transform: translateY(-50%);
66 
+                        width: 0.5em;
67 
+                        height: 0.5em;
68 
+                        border-radius: 50%;
69 
+                    }
70 
+                    &::before {
71 
+                        left: 0;
72 
+                        background-color: $blue;
73 
+                    }
74 
+                    &::after {
75 
+                        right: 0;
76 
+                        background-color: $red;
77 
+                    }
78 
+                }
79 
+            }
80 
+        }
81 
+    }
82 
+}
83 
+
84 
+@media screen and (max-width: 992px) {
85 
+    .header {
86 
+        display: block;
87 
+        &__hamburger {
88 
+            display: block;
89 
+            position: absolute;
90 
+            width: 4.2em;
91 
+            height: 3.6em;
92 
+            // border: 1px solid green;
93 
+            right: 3.2em;
94 
+            top: 50%;
95 
+            transform: translateY(-50%);
96 
+            z-index: 2;
97 
+            &::before, &::after {
98 
+                content: "";
99 
+                display: block;
100 
+                width: 100%;
101 
+                position: absolute;
102 
+                left: 50%;
103 
+                transform: translateX(-50%);
104 
+                height: 0.4em;
105 
+                background-color: $blue;
106 
+                transition: 0.3s;
107 
+            }
108 
+            &::before {
109 
+                top: 0;
110 
+            }
111 
+            &::after {
112 
+                bottom: 0;
113 
+            }
114 
+            &__line {
115 
+                position: absolute;
116 
+                top: 50%;
117 
+                left: 50%;
118 
+                transform: translate(-50%, -50%);
119 
+                width: 100%;
120 
+                height: 0.4em;
121 
+                background-color: $blue;
122 
+            }
123 
+            &.active {
124 
+                .header__hamburger__line {
125 
+                    opacity: 0;
126 
+                }
127 
+                &::before, &::after {
128 
+                    top: 50%;
129 
+                    transform-origin: center center;
130 
+                }
131 
+                &::before {
132 
+                    transform: translate(-50%, -50%) rotate(45deg);
133 
+                }
134 
+                &::after {
135 
+                    transform: translate(-50%, -50%) rotate(-45deg);
136 
+                }
137 
+            }
138 
+        }
139 
+        &__name {
140 
+            padding: 2.5em 3.2em;
141 
+            position: relative;
142 
+            z-index: 1;
143 
+            h1 {
144 
+                font-weight: 400;
145 
+                font-size: 3.5em;
146 
+            }
147 
+        }
148 
+        &__nav {
149 
+            position: absolute;
150 
+            top: 0;
151 
+            left: 0;
152 
+            width: 100%;
153 
+            height: auto;
154 
+            padding: 0;
155 
+            display: flex;
156 
+            align-items: flex-start;
157 
+            flex-direction: column;
158 
+            box-shadow: 0 0.3em 0.3em rgba($black, 0.1);
159 
+            &__close {
160 
+                display: block;
161 
+                position: absolute;
162 
+                left: 0.5em;
163 
+                top: 0.5em;
164 
+                width: 3em;
165 
+                height: 3em;
166 
+                color: $blue;
167 
+                &::before, &::after {
168 
+                    content: "";
169 
+                    display: block;
170 
+                    width: 100%;
171 
+                    height: 0.1em;
172 
+                    position: absolute;
173 
+                    left: 50%;
174 
+                    top: 50%;
175 
+                    background-color: $blue;
176 
+                    transform-origin: center center;
177 
+                }
178 
+                &::before{
179 
+                    transform: translate(-50%, -50%) rotate(45deg);
180 
+                }
181 
+                &::after {
182 
+                    transform: translate(-50%, -50%) rotate(-45deg);
183 
+                }
184 
+            }
185 
+            &__item {
186 
+                display: inline-block;
187 
+                width: 100%;
188 
+                background-color: #fff;
189 
+                border-bottom: 1px solid rgba(#000, 0.1);
190 
+                margin: 0;
191 
+                padding: 2.9em 1em 2.9em 6.9em;
192 
+                p {
193 
+                    color: $black;
194 
+                    display: inline-block;
195 
+                    text-align: left;
196 
+                    font-size: 3.5em;
197 
+                    font-weight: 400;
198 
+                }
199 
+                &:last-child {
200 
+                    border-bottom: none;
201 
+                }
202 
+                &.active {
203 
+                    .header__nav__item__line {
204 
+                        display: none;
205 
+                    }
206 
+                    p {
207 
+                        position: relative;
208 
+                        &::before, &::after {
209 
+                            content: "";
210 
+                            position: absolute;
211 
+                            top: 50%;
212 
+                            transform: translateY(-50%);
213 
+                            display: block;
214 
+                            width: 0.4em;
215 
+                            height: 0.4em;
216 
+                            border-radius: 50%;
217 
+                        }
218 
+                        &::before {
219 
+                            left: -0.9em;
220 
+                            background-color: $blue;
221 
+                        }
222 
+                        &::after {
223 
+                            right: -0.9em;
224 
+                            background-color: $red;
225 
+                        }
226 
+                    }
227 
+                }
228 
+            }
229 
+            &.active {
230 
+                .header__nav__close {
231 
+
232 
+
233 
+                }
234 
+            }
235 
+        }
236 
+
237 
+    }
238 
+}

+ 1
- 0
src/fe/mrna/css/layout/_popup.scss Wyświetl plik 

@@ -0,0 +1 @@
1 
+@charset "UTF-8";

+ 131
- 0
src/fe/mrna/css/page/_errorPage.scss Wyświetl plik 

@@ -0,0 +1,131 @@
1 
+.wrapper-errorPage {
2 
+    width: 100%;
3 
+    min-height: 100vh;
4 
+    padding-top: 0;
5 
+    opacity: 1;
6 
+    visibility: visible;
7 
+}
8 
+.errorPage {
9 
+    width: 100%;
10 
+    min-height: 100vh;
11 
+    position: relative;
12 
+    .bg {
13 
+        position: absolute;
14 
+        width: 100%;
15 
+        bottom: -18em;
16 
+        left: 50%;
17 
+        transform: translateX(-50%);
18 
+        img {
19 
+            width: 100%;
20 
+        }
21 
+    }
22 
+    .arrow {
23 
+        width: 2.5em;
24 
+        margin-bottom: 1.5em;
25 
+        img {
26 
+            width: 100%;
27 
+        }
28 
+    }
29 
+    .deco {
30 
+        position: absolute;
31 
+        width: 20em;
32 
+        top: 20%;
33 
+        transform: translateY(-50%);
34 
+        right: -8em;
35 
+        opacity: 0.5;
36 
+        mix-blend-mode: soft-light;
37 
+        img {
38 
+            width: 100%;
39 
+        }
40 
+    }
41 
+    .container {
42 
+        position: absolute;
43 
+        width: 100%;
44 
+        height: 100%;
45 
+        left: 0;
46 
+        top: 0;
47 
+        color: #fff;
48 
+        display: flex;
49 
+        justify-content: center;
50 
+        align-items: center;
51 
+        flex-direction: column;
52 
+        padding: 1em 1em 12em;
53 
+        h2 {
54 
+            font-size: 2.8em;
55 
+        }
56 
+        p {
57 
+            text-align: center;
58 
+            font-size: 1.5em;
59 
+            margin-bottom: 1em;
60 
+            line-height: 1.5;
61 
+        }
62 
+        a {
63 
+            color: #fff;
64 
+            border: 1px solid #fff;
65 
+            border-radius: 1em;
66 
+            padding: 0.5em 2em;
67 
+            text-decoration: none;
68 
+            font-size: 1.5em;
69 
+            &:hover {
70 
+                background-color: #fff;
71 
+                color: $blue;
72 
+            }
73 
+        }
74 
+    }
75 
+    .footer {
76 
+        background-color: transparent;
77 
+        position: absolute;
78 
+        width: 100%;
79 
+        bottom: 0;
80 
+        left: 0;
81 
+        padding: 2em;
82 
+        background: url(../images/error-footer.png) no-repeat center center/cover;
83 
+        p {
84 
+            text-align: center;
85 
+            font-size: 1em;
86 
+            color: #525252;
87 
+            line-height: 1.5;
88 
+            margin-bottom: 0;
89 
+        }
90 
+        &__logo {
91 
+            width: 15em;
92 
+            margin: 0 auto;
93 
+            mix-blend-mode: darken;
94 
+            img {
95 
+                width: 100%;
96 
+                height: auto;
97 
+            }
98 
+        }
99 
+    }
100 
+}
101 
+
102 
+@media screen and (max-width: 992px) {
103 
+    .errorPage {
104 
+        .bg {
105 
+            bottom: -3em;
106 
+        }
107 
+        .deco {
108 
+            width: 12em;
109 
+            top: 15%;
110 
+            right: -6em;
111 
+        }
112 
+        .container {
113 
+            padding: 1em 1em 12.5em;
114 
+            h2 {
115 
+                font-size: 2.5em;
116 
+            }
117 
+            p {
118 
+                font-size: 1.4em;
119 
+            }
120 
+        }
121 
+        .footer {
122 
+            padding: 1.5em 1em 0em;
123 
+            p {
124 
+                font-size: 0.7em;
125 
+            }
126 
+            &__logo {
127 
+                width: 13em;
128 
+            }
129 
+        }
130 
+    }
131 
+}

+ 87
- 0
src/fe/mrna/css/section/_expert.scss Wyświetl plik 

@@ -0,0 +1,87 @@
1 
+@charset "UTF-8";
2 
+
3 
+.expert {
4 
+    position: relative;
5 
+    .container {
6 
+        padding-top: 6.5em;
7 
+        padding-bottom: 9em;
8 
+        padding-left: 7em;
9 
+    }
10 
+    &__bg {
11 
+        &__img {
12 
+            position: absolute;
13 
+            top: 0;
14 
+            left: 0;
15 
+            width: 100%;
16 
+            height: auto;
17 
+        }
18 
+    }
19 
+    &__title {
20 
+        position: absolute;
21 
+        z-index: 2;
22 
+        top: 25em;
23 
+        left: 9.8em;
24 
+        .bg {
25 
+            display: none;
26 
+        }
27 
+        h2 {
28 
+            font-size: 4.4em;
29 
+            font-weight: 400;
30 
+            line-height: 1;
31 
+            color: $blue;
32 
+            text-shadow: 0.2em 0.2em 0.2em rgba(#000, 0.2);
33 
+            margin: 0;
34 
+            .eng {
35 
+                font-size: 1.2em;
36 
+            }
37 
+        }
38 
+    }
39 
+    &__video {
40 
+        width: 57em;
41 
+        margin: 0 auto;
42 
+    }
43 
+    .video__icon {
44 
+        width: 8em;
45 
+    }
46 
+}
47 
+
48 
+
49 
+@media (max-width: 992px) {
50 
+    .expert {
51 
+        .container {
52 
+            padding: 5.5em 2.5em 15.5em;
53 
+        }
54 
+        .video {
55 
+            &__icon {
56 
+                width: 13.5em;
57 
+            }
58 
+        }
59 
+        &__title {
60 
+            position: relative;
61 
+            top: auto;
62 
+            left: auto;
63 
+            padding: 3.2em;
64 
+            margin-bottom: 2.5em;
65 
+            .bg {
66 
+                display: block;
67 
+                display: flex;
68 
+                justify-content: center;
69 
+                align-items: center;
70 
+                img {
71 
+                    height: 100%;
72 
+                    width: auto;
73 
+                }
74 
+            }
75 
+            h2 {
76 
+                font-size: 5.5em;
77 
+                margin: 0;
78 
+                .eng {
79 
+                    font-size: 1em;
80 
+                }
81 
+            }
82 
+        }
83 
+        &__video {
84 
+            width: 100%;
85 
+        }
86 
+    }
87 
+}

+ 254
- 0
src/fe/mrna/css/section/_history.scss Wyświetl plik 

@@ -0,0 +1,254 @@
1 
+@charset "UTF-8";
2 
+.history {
3 
+    &>.bg {
4 
+        top: 34%;
5 
+    }
6 
+    .container {
7 
+        padding-bottom: 0;
8 
+    }
9 
+    &__swiper {
10 
+        width: 100%;
11 
+    }
12 
+    &__timeline {
13 
+        position: relative;
14 
+        width: 100%;
15 
+        margin-bottom: 1.8em;
16 
+        &__mainline {
17 
+            width: 100%;
18 
+            height: 0.1em;
19 
+            background-color: rgba($blue, 0.3);
20 
+            position: absolute;
21 
+            top: 5em;
22 
+            left: 0;
23 
+        }
24 
+        &__box {
25 
+            display: flex;
26 
+            justify-content: space-between;
27 
+            width: 100%;
28 
+            height: 23em;
29 
+            margin-left: 10em;
30 
+            // border: 1px solid orange;
31 
+        }
32 
+        &__item {
33 
+            position: relative;
34 
+            top: 4.8em;
35 
+            width: 13.5em;
36 
+            padding-right: 4em;
37 
+            // transition: width 0.5s;
38 
+            &-2013, &-2020 {
39 
+                .history__timeline__year {
40 
+                    h3 {
41 
+                        text-align: center;
42 
+                    }
43 
+                }
44 
+            }
45 
+        }
46 
+        &__dot {
47 
+            position: relative;
48 
+            width: 0.5em;
49 
+            height: 0.5em;
50 
+            border-radius: 50%;
51 
+            background-color: $blue;
52 
+        }
53 
+        &__branchline {
54 
+            opacity: 0;
55 
+            visibility: hidden;
56 
+            position: relative;
57 
+            left: 0.23em;
58 
+            width: 0.1em;
59 
+            height: 0;
60 
+            background-color: rgba($blue, 0.3);
61 
+            margin-bottom: 1em;
62 
+        }
63 
+        &__year {
64 
+            width: 7em;
65 
+            position: absolute;
66 
+            top: -2.5em;
67 
+            left: -3.3em;
68 
+            cursor: pointer;
69 
+            h3 {
70 
+                text-align: center;
71 
+                font-size: 1.7em;
72 
+                font-weight: 400;
73 
+                margin: 0;
74 
+                color: $blue;
75 
+                span {
76 
+                    font-size: 0.85em;
77 
+                }
78 
+            }
79 
+        }
80 
+        &__desc {
81 
+            opacity: 0;
82 
+            visibility: hidden;
83 
+            p {
84 
+                color: $gray;
85 
+                font-size: 1em;
86 
+                line-height: 1.5;
87 
+                span {
88 
+                    font-size: 0.7em;
89 
+                }
90 
+            }
91 
+            font-weight: 300;
92 
+        }
93 
+        .swiper-wrapper {
94 
+            align-items: stretch;
95 
+        }
96 
+        .swiper-slide{
97 
+            width: fit-content;
98 
+            &:first-child {
99 
+                .history {
100 
+                    &__timeline {
101 
+                        &__item {
102 
+                            width: 22em;
103 
+                            top: 0;
104 
+                        }
105 
+                        &__dot {
106 
+                            background-color: $red;
107 
+                        }
108 
+                        &__year {
109 
+                            width: 9.5em;
110 
+                            top: -1.5em;
111 
+                            left: 1.1em;
112 
+
113 
+                            h3 {
114 
+                                font-size: 2.4em;
115 
+                            }
116 
+                        }
117 
+                        &__branchline {
118 
+                            opacity: 1;
119 
+                            visibility: visible;
120 
+                            height: 7.5em;
121 
+                        }
122 
+                        &__desc {
123 
+                            opacity: 1;
124 
+                            visibility: visible;
125 
+                        }
126 
+                    }
127 
+                }
128 
+            }
129 
+        }
130 
+        .swiper-slide-active {
131 
+            .history {
132 
+                &__timeline {
133 
+                    &__item {
134 
+                        &-2013, &-2020 {
135 
+                            .history__timeline__year {
136 
+                                h3 {
137 
+                                    text-align: left;
138 
+                                }
139 
+                            }
140 
+                        }
141 
+                    }
142 
+                    &__dot {
143 
+                        background-color: $red;
144 
+                    }
145 
+
146 
+                }
147 
+            }
148 
+
149 
+        }
150 
+        .swiper-button-next, .swiper-button-prev {
151 
+            top: 23%;
152 
+        }
153 
+        .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
154 
+            left: 4em;
155 
+        }
156 
+        .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
157 
+            right: 4em;
158 
+        }
159 
+    }
160 
+
161 
+}
162 
+
163 
+@media screen and (max-width: 992px) {
164 
+    .history {
165 
+        &>.bg {
166 
+            top: 54%;
167 
+        }
168 
+        .copywriting {
169 
+            margin-bottom: 8.5em;
170 
+            padding: 0 0 2.5em;
171 
+        }
172 
+        &__timeline {
173 
+            &__mainline {
174 
+                top: 8.5em;
175 
+            }
176 
+            &__box {
177 
+                width: 100%;
178 
+                height: 54em;
179 
+                margin-left: 0;
180 
+            }
181 
+            &__item {
182 
+                top: 8.09em;
183 
+                padding-right: 0;
184 
+            }
185 
+            &__year {
186 
+                width: 9em;
187 
+                left: -3.8em;
188 
+                top: 14em;
189 
+                h3 {
190 
+                    font-size: 2.1em;
191 
+                }
192 
+            }
193 
+            &__dot {
194 
+                width: 0.9em;
195 
+                height: 0.9em;
196 
+            }
197 
+            &__branchline {
198 
+                left: 0.25em;
199 
+            }
200 
+            &__desc {
201 
+                p {
202 
+                    font-size: 2.1em;
203 
+                }
204 
+            }
205 
+            .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
206 
+                left: 1em;
207 
+            }
208 
+            .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
209 
+                right: 1em;
210 
+            }
211 
+            .swiper-button-next, .swiper-button-prev {
212 
+                top: 16%;
213 
+            }
214 
+            .swiper-slide:first-child {
215 
+                .history {
216 
+                    &__timeline {
217 
+                        &__item {
218 
+                            width: 32em;
219 
+                        }
220 
+                        &__branchline {
221 
+                            height: 11.5em;
222 
+                        }
223 
+                        &__year  {
224 
+                            width: 13.5em;
225 
+                            left: 2em;
226 
+                            h3 {
227 
+                                font-size: 3.4em;
228 
+                            }
229 
+                        }
230 
+                    }
231 
+                }
232 
+            }
233 
+            .swiper-slide-active {
234 
+                .history {
235 
+                    &__timeline {
236 
+                        &__item {
237 
+                            width: 32em;
238 
+                        }
239 
+                        &__branchline {
240 
+                            height: 11.5em;
241 
+                        }
242 
+                        &__year  {
243 
+                            width: 13.5em;
244 
+                            left: 2em;
245 
+                            h3 {
246 
+                                font-size: 3.4em;
247 
+                            }
248 
+                        }
249 
+                    }
250 
+                }
251 
+            }
252 
+        }
253 
+    }
254 
+}

+ 76
- 0
src/fe/mrna/css/section/_moreref.scss Wyświetl plik 

@@ -0,0 +1,76 @@
1 
+@charset "UTF-8";
2 
+.moreref {
3 
+    &>.bg {
4 
+        top: 39%;
5 
+    }
6 
+    .copywriting {
7 
+        padding: 0.8em;
8 
+    }
9 
+    .container {
10 
+        padding-bottom: 6em;
11 
+    }
12 
+    &__list {
13 
+        display: flex;
14 
+        justify-content: center;
15 
+        align-items: flex-start;
16 
+    }
17 
+    &__item {
18 
+        display: flex;
19 
+        flex-direction: column;
20 
+        justify-content: flex-start;
21 
+        align-items: center;
22 
+        text-decoration: none;
23 
+        margin: 0 1.2em;
24 
+    }
25 
+    &__pic {
26 
+        border: 1px solid rgba($gray, 0.3);
27 
+        border-radius: 0.7em;
28 
+        padding: 1em,;
29 
+        height: 13.8em;
30 
+        margin-bottom: 1em;
31 
+        img {
32 
+            height: 100%;
33 
+            width: auto;
34 
+        }
35 
+    }
36 
+    &__name {
37 
+        background-color: $blue;
38 
+        padding: 0.5em 2em;
39 
+        border-radius: 2em;
40 
+        p {
41 
+            color: $white;
42 
+            font-size: 1.1em;
43 
+        }
44 
+    }
45 
+}
46 
+
47 
+@media screen and (max-width: 992px) {
48 
+    .moreref {
49 
+        .container {
50 
+            padding-bottom: 0;
51 
+        }
52 
+        .copywriting {
53 
+            padding: 2em 0 3em;
54 
+        }
55 
+        &__list {
56 
+            flex-direction: column;
57 
+            align-items: center;
58 
+            justify-content: flex-start;
59 
+        }
60 
+        &__item {
61 
+            margin: 0 0 7em;
62 
+        }
63 
+        &__pic {
64 
+            height: 30em;
65 
+            margin-bottom: 2em;
66 
+        }
67 
+        &__name {
68 
+            background-color: #0699d2;
69 
+            padding: 1em 3.5em 1.3em;
70 
+            border-radius: 3.5em;
71 
+            p {
72 
+                font-size: 2.1em;
73 
+            }
74 
+        }
75 
+    }
76 
+}

+ 223
- 0
src/fe/mrna/css/section/_qa.scss Wyświetl plik 

@@ -0,0 +1,223 @@
1 
+@charset "UTF-8";
2 
+.qa {
3 
+    p {
4 
+        color: $gray;
5 
+        font-size: 1em;
6 
+        span {
7 
+            font-size: 0.7em;
8 
+        }
9 
+    }
10 
+    &>.bg {
11 
+        top: 72%;
12 
+    }
13 
+    .container {
14 
+        padding-bottom: 5em;
15 
+    }
16 
+    &__keypoint {
17 
+        display: flex;
18 
+        flex-direction: column;
19 
+        align-items: center;
20 
+        justify-content: flex-start;
21 
+        margin-top: 2.8em;
22 
+        margin-bottom: 1.7em;
23 
+        h3 {
24 
+            font-size: 1.6em;
25 
+            font-weight: 400;
26 
+            color: $blue;
27 
+            margin: 0;
28 
+            margin-bottom: 1.8em;
29 
+        }
30 
+        &__list {
31 
+            display: flex;
32 
+        }
33 
+        &__item {
34 
+            display: flex;
35 
+            flex-direction: column;
36 
+            align-items: center;
37 
+            justify-content: flex-start;
38 
+            width: 10em;
39 
+            margin: 0 2.8em;
40 
+            &:nth-child(2) {
41 
+                .qa__keypoint__pic__line {
42 
+                    position: absolute;
43 
+                    top: 50%;
44 
+                    transform: translateY(-50%);
45 
+                    width: 7.6em;
46 
+                    height: 0.05em;
47 
+                    background-color: rgba($gray, 0.5);
48 
+                    &-left {
49 
+                        left: -7.6em;
50 
+                    }
51 
+                    &-right {
52 
+                        right: -7.6em;
53 
+                    }
54 
+                }
55 
+            }
56 
+        }
57 
+        &__pic {
58 
+            position: relative;
59 
+            width: 8em;
60 
+            margin: 0 auto 1.7em;
61 
+            img {
62 
+                width: 100%;
63 
+                height: auto;
64 
+            }
65 
+            &__frame {
66 
+                position: absolute;
67 
+                left: 50%;
68 
+                top: 49%;
69 
+                transform: translate(-50%, -50%);
70 
+                width: 9em;
71 
+                height: 9em;
72 
+                border: 0.05em solid rgba($gray, 0.5);
73 
+                border-radius: 50%;
74 
+            }
75 
+        }
76 
+        &__exp {
77 
+            p {
78 
+                line-height: 1.5;
79 
+            }
80 
+        }
81 
+    }
82 
+    &__box {
83 
+        border: 0.1em solid rgba($gray, 0.5);
84 
+        border-radius: 0.5em;
85 
+        background-color: #fff;
86 
+        padding: 1.5em 0.35em 1.5em 0;
87 
+        width: 50em;
88 
+        height: 31em;
89 
+        margin: 0 auto;
90 
+        &__scroll {
91 
+            width: 100%;
92 
+            height: 100%;
93 
+            padding: 0 1.5em 0 2em;
94 
+        }
95 
+        &__list {
96 
+            margin: 0;
97 
+            padding-left: 0;
98 
+            list-style: none;
99 
+        }
100 
+        &__item {
101 
+            position: relative;
102 
+            margin-bottom: 1.5em;
103 
+            &::before {
104 
+                content: "";
105 
+                position: absolute;
106 
+                margin-left: -0.9em;
107 
+                top: 0.3em;
108 
+                display: block;
109 
+                width: 0.3em;
110 
+                height: 0.3em;
111 
+                border-radius: 50%;
112 
+                background-color: #0699d2;
113 
+                overflow: hidden;
114 
+            }
115 
+            h4 {
116 
+                margin: 0;
117 
+                color: $blue;;
118 
+                font-weight: 400;
119 
+                margin-bottom: 0.2em;
120 
+                font-size: 1.05em;
121 
+            }
122 
+            p {
123 
+                padding-left: 0.5em;
124 
+                line-height: 1.5;
125 
+            }
126 
+        }
127 
+    }
128 
+}
129 
+
130 
+@media screen and (max-width: 992px) {
131 
+    .qa {
132 
+        .container {
133 
+            padding-bottom: 10em;
134 
+        }
135 
+        .copywriting {
136 
+            margin-bottom: 2em;
137 
+        }
138 
+        p {
139 
+            font-size: 2.1em;
140 
+            text-align: center;
141 
+            line-height: 1.5;
142 
+        }
143 
+        &__keypoint {
144 
+            h3 {
145 
+                text-align: center;
146 
+                font-size: 3em;
147 
+                line-height: 1.3;
148 
+                margin-bottom: 1.5em;
149 
+            }
150 
+            &__list {
151 
+                flex-direction: column;
152 
+                align-items: flex-start;
153 
+                justify-content: flex-start;
154 
+            }
155 
+            &__item {
156 
+                margin: 0 auto 3em;
157 
+                flex-direction: row;
158 
+                width: 77%;
159 
+                &:nth-child(2) {
160 
+                    .qa__keypoint__pic__line {
161 
+                        top: auto;
162 
+                        left: 50%;
163 
+                        transform: translateX(-50%);
164 
+                        width: 0.05em;
165 
+                        height: 3em;
166 
+                        &-left {
167 
+                            top: -3em;
168 
+                        }
169 
+                        &-right {
170 
+                            bottom: -3em;
171 
+                        }
172 
+                    }
173 
+                }
174 
+            }
175 
+            &__pic {
176 
+                width: 14em;
177 
+                flex: 0 0 14em;
178 
+                margin: 0;
179 
+                margin-right: 4em;
180 
+                &__frame {
181 
+                    width: 15.2em;
182 
+                    height: 15.2em;
183 
+                }
184 
+            }
185 
+            &__exp {
186 
+                flex: 1;
187 
+                p {
188 
+                    text-align: left;
189 
+                }
190 
+            }
191 
+        }
192 
+        &__box {
193 
+            border-radius: 2em;
194 
+            width: 92%;
195 
+            height: 59em;
196 
+            padding: 2.5em 1em 2.5em 0;
197 
+            &__scroll {
198 
+                padding: 0 5em 0 4em;
199 
+            }
200 
+            &__item {
201 
+                margin-bottom: 3em;
202 
+                &::before {
203 
+                    left: 1em;
204 
+                    top: 1.1em;
205 
+                    margin-left: -2em;
206 
+                    width: 0.6em;
207 
+                    height: 0.6em;
208 
+                    border-radius: 100%;
209 
+                }
210 
+                h4 {
211 
+                    font-size: 2.1em;
212 
+                    font-weight: 500;
213 
+                    line-height: 1.4;
214 
+                }
215 
+                p {
216 
+                    text-align: left;
217 
+                    font-size: 2em;
218 
+                    padding-left: 0;
219 
+                }
220 
+            }
221 
+        }
222 
+    }
223 
+}

+ 101
- 0
src/fe/mrna/css/section/_research.scss Wyświetl plik 

@@ -0,0 +1,101 @@
1 
+@charset "UTF-8";
2 
+.research {
3 
+    &>.bg {
4 
+        top: 46%;
5 
+    }
6 
+    .copywriting {
7 
+        padding: 1.5em 1em 0em;
8 
+        .bg {
9 
+            height: 85%;
10 
+        }
11 
+    }
12 
+    .container {
13 
+        padding-bottom: 5em;
14 
+    }
15 
+    &__list {
16 
+        display: flex;
17 
+        justify-content: center;
18 
+        flex-wrap: wrap;
19 
+        width: 60em;
20 
+        margin: 0 auto;
21 
+    }
22 
+    &__item {
23 
+        margin: 0 1em 3em;
24 
+        display: flex;
25 
+        flex-direction: column;
26 
+        align-items: center;
27 
+        justify-content: flex-start;
28 
+        cursor: pointer;
29 
+        &:hover {
30 
+            .research__pic {
31 
+                box-shadow: 0 0 1em rgba($blue, 0.3);
32 
+                border: 0.2em solid $blue;
33 
+                transition: box-shadow 0.3s;
34 
+            }
35 
+            .research__name {
36 
+                background-color: $blue;
37 
+                transition: 0.3s;
38 
+                p {
39 
+                    color: $white;
40 
+                    transition: 0.3s;
41 
+                }
42 
+            }
43 
+        }
44 
+    }
45 
+    &__pic {
46 
+        border: 0.1em solid rgba($blue, 0.3);
47 
+        box-shadow: 0.4em 0.4em 0.6em rgba(#000, 0.1);
48 
+        border-radius: 0.5em;
49 
+        width: 15em;
50 
+        overflow: hidden;
51 
+        margin-bottom: 0.8em;
52 
+        img {
53 
+            width: 100%;
54 
+            height: auto;
55 
+        }
56 
+    }
57 
+    &__name {
58 
+        display: inline-block;
59 
+        border-radius: 1.5em;
60 
+        padding: 0.6em 1.5em;
61 
+        p {
62 
+            text-align: center;
63 
+            color: $blue-d;
64 
+            font-size: 1.2em;
65 
+        }
66 
+    }
67 
+}
68 
+
69 
+@media screen and (max-width: 992px) {
70 
+    .research {
71 
+        .container {
72 
+            padding-bottom: 10em;
73 
+        }
74 
+        .copywriting {
75 
+            padding: 3em 0 3em;
76 
+        }
77 
+        &__item {
78 
+            margin: 0 0 3em;
79 
+            width: 48%;
80 
+            &:hover {
81 
+                .research__pic {
82 
+                    border: 0.4em solid $blue;
83 
+                }
84 
+            }
85 
+        }
86 
+        &__pic {
87 
+            width: 25em;
88 
+            border-radius: 1.5em;
89 
+            box-shadow: 1em 1em 2em rgba(#000, 0.1);
90 
+            margin-bottom: 1em;
91 
+        }
92 
+        &__name {
93 
+            border-radius: 2.5em;
94 
+            padding: 0.8em 2.5em;
95 
+            p {
96 
+                font-size: 2.1em;
97 
+                white-space: nowrap;
98 
+            }
99 
+        }
100 
+    }
101 
+}

+ 60
- 0
src/fe/mrna/css/section/_understand.scss Wyświetl plik 

@@ -0,0 +1,60 @@
1 
+@charset "UTF-8";
2 
+.understand {
3 
+    &>.bg {
4 
+        top: 27%;
5 
+    }
6 
+    .container {
7 
+        padding-bottom: 10.5em;
8 
+    }
9 
+    &__swiper {
10 
+        padding-left: 8em;
11 
+        width: 70em;
12 
+        position: relative;
13 
+    }
14 
+    .swiper-slide {
15 
+        padding-right: 8em;
16 
+    }
17 
+    .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
18 
+        bottom: -2.5em;
19 
+    }
20 
+    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
21 
+        left: 2.5em;
22 
+    }
23 
+    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
24 
+        right: 2.5em;
25 
+    }
26 
+    .video {
27 
+        box-shadow: none;
28 
+    }
29 
+}
30 
+
31 
+@media screen and (max-width: 992px) {
32 
+    .understand {
33 
+        &>.bg {
34 
+            top: 40%;
35 
+        }
36 
+        .container {
37 
+            padding-bottom: 17.5em;
38 
+        }
39 
+        .copywriting {
40 
+            padding: 0 0 3.5em;
41 
+        }
42 
+        &__swiper {
43 
+            padding-left: 2em;
44 
+            width: 53em;
45 
+        }
46 
+        .swiper-slide {
47 
+            padding-right: 2em;
48 
+        }
49 
+        .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
50 
+            left: -4em;
51 
+        }
52 
+        .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
53 
+            right: -4em;
54 
+        }
55 
+        .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
56 
+            bottom: -5em;
57 
+        }
58 
+
59 
+    }
60 
+}

+ 1152
- 0
src/fe/mrna/css/vendor/_aos.scss
Plik diff jest za duży
Wyświetl plik


+ 6
- 0
src/fe/mrna/css/vendor/_bootstrap.min.scss
Plik diff jest za duży
Wyświetl plik


+ 349
- 0
src/fe/mrna/css/vendor/_normalize.scss Wyświetl plik 

@@ -0,0 +1,349 @@
1 
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 
+
3 
+/* Document
4 
+   ========================================================================== */
5 
+
6 
+/**
7 
+ * 1. Correct the line height in all browsers.
8 
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
9 
+ */
10 
+
11 
+html {
12 
+  line-height: 1.15; /* 1 */
13 
+  -webkit-text-size-adjust: 100%; /* 2 */
14 
+}
15 
+
16 
+/* Sections
17 
+   ========================================================================== */
18 
+
19 
+/**
20 
+ * Remove the margin in all browsers.
21 
+ */
22 
+
23 
+body {
24 
+  margin: 0;
25 
+}
26 
+
27 
+/**
28 
+ * Render the `main` element consistently in IE.
29 
+ */
30 
+
31 
+main {
32 
+  display: block;
33 
+}
34 
+
35 
+/**
36 
+ * Correct the font size and margin on `h1` elements within `section` and
37 
+ * `article` contexts in Chrome, Firefox, and Safari.
38 
+ */
39 
+
40 
+h1 {
41 
+  font-size: 2em;
42 
+  margin: 0.67em 0;
43 
+}
44 
+
45 
+/* Grouping content
46 
+   ========================================================================== */
47 
+
48 
+/**
49 
+ * 1. Add the correct box sizing in Firefox.
50 
+ * 2. Show the overflow in Edge and IE.
51 
+ */
52 
+
53 
+hr {
54 
+  box-sizing: content-box; /* 1 */
55 
+  height: 0; /* 1 */
56 
+  overflow: visible; /* 2 */
57 
+}
58 
+
59 
+/**
60 
+ * 1. Correct the inheritance and scaling of font size in all browsers.
61 
+ * 2. Correct the odd `em` font sizing in all browsers.
62 
+ */
63 
+
64 
+pre {
65 
+  font-family: monospace, monospace; /* 1 */
66 
+  font-size: 1em; /* 2 */
67 
+}
68 
+
69 
+/* Text-level semantics
70 
+   ========================================================================== */
71 
+
72 
+/**
73 
+ * Remove the gray background on active links in IE 10.
74 
+ */
75 
+
76 
+a {
77 
+  background-color: transparent;
78 
+}
79 
+
80 
+/**
81 
+ * 1. Remove the bottom border in Chrome 57-
82 
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 
+ */
84 
+
85 
+abbr[title] {
86 
+  border-bottom: none; /* 1 */
87 
+  text-decoration: underline; /* 2 */
88 
+  text-decoration: underline dotted; /* 2 */
89 
+}
90 
+
91 
+/**
92 
+ * Add the correct font weight in Chrome, Edge, and Safari.
93 
+ */
94 
+
95 
+b,
96 
+strong {
97 
+  font-weight: bolder;
98 
+}
99 
+
100 
+/**
101 
+ * 1. Correct the inheritance and scaling of font size in all browsers.
102 
+ * 2. Correct the odd `em` font sizing in all browsers.
103 
+ */
104 
+
105 
+code,
106 
+kbd,
107 
+samp {
108 
+  font-family: monospace, monospace; /* 1 */
109 
+  font-size: 1em; /* 2 */
110 
+}
111 
+
112 
+/**
113 
+ * Add the correct font size in all browsers.
114 
+ */
115 
+
116 
+small {
117 
+  font-size: 80%;
118 
+}
119 
+
120 
+/**
121 
+ * Prevent `sub` and `sup` elements from affecting the line height in
122 
+ * all browsers.
123 
+ */
124 
+
125 
+sub,
126 
+sup {
127 
+  font-size: 75%;
128 
+  line-height: 0;
129 
+  position: relative;
130 
+  vertical-align: baseline;
131 
+}
132 
+
133 
+sub {
134 
+  bottom: -0.25em;
135 
+}
136 
+
137 
+sup {
138 
+  top: -0.5em;
139 
+}
140 
+
141 
+/* Embedded content
142 
+   ========================================================================== */
143 
+
144 
+/**
145 
+ * Remove the border on images inside links in IE 10.
146 
+ */
147 
+
148 
+img {
149 
+  border-style: none;
150 
+}
151 
+
152 
+/* Forms
153 
+   ========================================================================== */
154 
+
155 
+/**
156 
+ * 1. Change the font styles in all browsers.
157 
+ * 2. Remove the margin in Firefox and Safari.
158 
+ */
159 
+
160 
+button,
161 
+input,
162 
+optgroup,
163 
+select,
164 
+textarea {
165 
+  font-family: inherit; /* 1 */
166 
+  font-size: 100%; /* 1 */
167 
+  line-height: 1.15; /* 1 */
168 
+  margin: 0; /* 2 */
169 
+}
170 
+
171 
+/**
172 
+ * Show the overflow in IE.
173 
+ * 1. Show the overflow in Edge.
174 
+ */
175 
+
176 
+button,
177 
+input { /* 1 */
178 
+  overflow: visible;
179 
+}
180 
+
181 
+/**
182 
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 
+ * 1. Remove the inheritance of text transform in Firefox.
184 
+ */
185 
+
186 
+button,
187 
+select { /* 1 */
188 
+  text-transform: none;
189 
+}
190 
+
191 
+/**
192 
+ * Correct the inability to style clickable types in iOS and Safari.
193 
+ */
194 
+
195 
+button,
196 
+[type="button"],
197 
+[type="reset"],
198 
+[type="submit"] {
199 
+  -webkit-appearance: button;
200 
+}
201 
+
202 
+/**
203 
+ * Remove the inner border and padding in Firefox.
204 
+ */
205 
+
206 
+button::-moz-focus-inner,
207 
+[type="button"]::-moz-focus-inner,
208 
+[type="reset"]::-moz-focus-inner,
209 
+[type="submit"]::-moz-focus-inner {
210 
+  border-style: none;
211 
+  padding: 0;
212 
+}
213 
+
214 
+/**
215 
+ * Restore the focus styles unset by the previous rule.
216 
+ */
217 
+
218 
+button:-moz-focusring,
219 
+[type="button"]:-moz-focusring,
220 
+[type="reset"]:-moz-focusring,
221 
+[type="submit"]:-moz-focusring {
222 
+  outline: 1px dotted ButtonText;
223 
+}
224 
+
225 
+/**
226 
+ * Correct the padding in Firefox.
227 
+ */
228 
+
229 
+fieldset {
230 
+  padding: 0.35em 0.75em 0.625em;
231 
+}
232 
+
233 
+/**
234 
+ * 1. Correct the text wrapping in Edge and IE.
235 
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
236 
+ * 3. Remove the padding so developers are not caught out when they zero out
237 
+ *    `fieldset` elements in all browsers.
238 
+ */
239 
+
240 
+legend {
241 
+  box-sizing: border-box; /* 1 */
242 
+  color: inherit; /* 2 */
243 
+  display: table; /* 1 */
244 
+  max-width: 100%; /* 1 */
245 
+  padding: 0; /* 3 */
246 
+  white-space: normal; /* 1 */
247 
+}
248 
+
249 
+/**
250 
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 
+ */
252 
+
253 
+progress {
254 
+  vertical-align: baseline;
255 
+}
256 
+
257 
+/**
258 
+ * Remove the default vertical scrollbar in IE 10+.
259 
+ */
260 
+
261 
+textarea {
262 
+  overflow: auto;
263 
+}
264 
+
265 
+/**
266 
+ * 1. Add the correct box sizing in IE 10.
267 
+ * 2. Remove the padding in IE 10.
268 
+ */
269 
+
270 
+[type="checkbox"],
271 
+[type="radio"] {
272 
+  box-sizing: border-box; /* 1 */
273 
+  padding: 0; /* 2 */
274 
+}
275 
+
276 
+/**
277 
+ * Correct the cursor style of increment and decrement buttons in Chrome.
278 
+ */
279 
+
280 
+[type="number"]::-webkit-inner-spin-button,
281 
+[type="number"]::-webkit-outer-spin-button {
282 
+  height: auto;
283 
+}
284 
+
285 
+/**
286 
+ * 1. Correct the odd appearance in Chrome and Safari.
287 
+ * 2. Correct the outline style in Safari.
288 
+ */
289 
+
290 
+[type="search"] {
291 
+  -webkit-appearance: textfield; /* 1 */
292 
+  outline-offset: -2px; /* 2 */
293 
+}
294 
+
295 
+/**
296 
+ * Remove the inner padding in Chrome and Safari on macOS.
297 
+ */
298 
+
299 
+[type="search"]::-webkit-search-decoration {
300 
+  -webkit-appearance: none;
301 
+}
302 
+
303 
+/**
304 
+ * 1. Correct the inability to style clickable types in iOS and Safari.
305 
+ * 2. Change font properties to `inherit` in Safari.
306 
+ */
307 
+
308 
+::-webkit-file-upload-button {
309 
+  -webkit-appearance: button; /* 1 */
310 
+  font: inherit; /* 2 */
311 
+}
312 
+
313 
+/* Interactive
314 
+   ========================================================================== */
315 
+
316 
+/*
317 
+ * Add the correct display in Edge, IE 10+, and Firefox.
318 
+ */
319 
+
320 
+details {
321 
+  display: block;
322 
+}
323 
+
324 
+/*
325 
+ * Add the correct display in all browsers.
326 
+ */
327 
+
328 
+summary {
329 
+  display: list-item;
330 
+}
331 
+
332 
+/* Misc
333 
+   ========================================================================== */
334 
+
335 
+/**
336 
+ * Add the correct display in IE 10+.
337 
+ */
338 
+
339 
+template {
340 
+  display: none;
341 
+}
342 
+
343 
+/**
344 
+ * Add the correct display in IE 10.
345 
+ */
346 
+
347 
+[hidden] {
348 
+  display: none;
349 
+}

+ 13
- 0
src/fe/mrna/css/vendor/_swiper.min.scss
Plik diff jest za duży
Wyświetl plik


BIN
src/fe/mrna/images/arrow-left-disable.png Wyświetl plik


BIN
src/fe/mrna/images/arrow-left.png Wyświetl plik


BIN
src/fe/mrna/images/arrow-right-disable.png Wyświetl plik


BIN
src/fe/mrna/images/arrow-right.png Wyświetl plik


BIN
src/fe/mrna/images/expert-bg.png Wyświetl plik


BIN
src/fe/mrna/images/expert-bg_mb.png Wyświetl plik


BIN
src/fe/mrna/images/expert-circle-1.png Wyświetl plik


BIN
src/fe/mrna/images/expert-circle-2.png Wyświetl plik


BIN
src/fe/mrna/images/expert-circle-3.png Wyświetl plik


BIN
src/fe/mrna/images/expert-circle-4.png Wyświetl plik


BIN
src/fe/mrna/images/expert-line.png Wyświetl plik


BIN
src/fe/mrna/images/expert-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/history-bg.png Wyświetl plik


BIN
src/fe/mrna/images/history-bg_mb.png Wyświetl plik


BIN
src/fe/mrna/images/history-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/modal-bg.png Wyświetl plik


BIN
src/fe/mrna/images/moreref-bg.png Wyświetl plik


BIN
src/fe/mrna/images/moreref-line.png Wyświetl plik


BIN
src/fe/mrna/images/moreref-map.png Wyświetl plik


BIN
src/fe/mrna/images/moreref-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/qa-bg.png Wyświetl plik


BIN
src/fe/mrna/images/qa-keypoint-pic-1.png Wyświetl plik


BIN
src/fe/mrna/images/qa-keypoint-pic-2.png Wyświetl plik


BIN
src/fe/mrna/images/qa-keypoint-pic-3.png Wyświetl plik


BIN
src/fe/mrna/images/qa-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/proud-pic-1.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/proud-pic-2.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/proud-pic-3.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/proud-pic-4.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/proud-pic-lamp.png Wyświetl plik


BIN
src/fe/mrna/images/rearch-popup/unlimit-pic.png Wyświetl plik


BIN
src/fe/mrna/images/research-bg.png Wyświetl plik


BIN
src/fe/mrna/images/research-pic-feature.png Wyświetl plik


BIN
src/fe/mrna/images/research-pic-proud.png Wyświetl plik


BIN
src/fe/mrna/images/research-pic-show.png Wyświetl plik


BIN
src/fe/mrna/images/research-pic-test.png Wyświetl plik


BIN
src/fe/mrna/images/research-pic-unlimit.png Wyświetl plik


BIN
src/fe/mrna/images/research-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/research-title-bg_mb.png Wyświetl plik


BIN
src/fe/mrna/images/understand-bg.png Wyświetl plik


BIN
src/fe/mrna/images/understand-bg_mb.png Wyświetl plik


BIN
src/fe/mrna/images/understand-title-bg.png Wyświetl plik


BIN
src/fe/mrna/images/video-icon.png Wyświetl plik


+ 877
- 0
src/fe/mrna/index.html Wyświetl plik 

@@ -0,0 +1,877 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 
+  <meta name="format-detection" content="telephone=no">
9 
+
10 
+  <title></title>
11 
+
12 
+  <meta name="description" content="" />
13 
+  <meta name="keywords" content="" />
14 
+
15 
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" sizes="32x32" />
16 
+  <link rel="image_src" href="https://event.leecy.org.tw/mrn/images/share.png" />
17 
+  <link rel="canonical" href="https://event.leecy.org.tw/mrn/" />
18 
+  <meta property="og:title" content="" />
19 
+  <meta property="og:type" content="website" />
20 
+  <meta property="og:url" content="" />
21 
+  <meta property="og:image" content="https://event.leecy.org.tw/mrn/images/share.png" />
22 
+  <meta property="og:description" content="" />
23 
+
24 
+  <link rel="stylesheet" href="./css/all.css">
25 
+
26 
+</head>
27 
+
28 
+<body>
29 
+
30 
+  <div class="wrapper">
31 
+    <header class="header">
32 
+      <div class="header__hamburger">
33 
+        <div class="header__hamburger__line"></div>
34 
+      </div>
35 
+      <div class="header__name">
36 
+        <h1>mRNA學堂</h1>
37 
+      </div>
38 
+      <nav class="header__nav">
39 
+        <a href="https://event.leecy.org.tw/mrn/#expert" class="header__nav__item header__nav__item-expert" data-anchor="expert">
40 
+          <p>專家教你認識 mRNA</p>
41 
+          <div class="header__nav__item__line"></div>
42 
+        </a>
43 
+        <a href="https://event.leecy.org.tw/mrn/#understand" class="header__nav__item header__nav__item-understand" data-anchor="understand">
44 
+          <p>談談mRNA</p>
45 
+          <div class="header__nav__item__line"></div>
46 
+        </a>
47 
+        <a href="https://event.leecy.org.tw/mrn/#research" class="header__nav__item header__nav__item-research" data-anchor="research">
48 
+          <p>進入mRNA研究室</p>
49 
+          <div class="header__nav__item__line"></div>
50 
+        </a>
51 
+        <a href="https://event.leecy.org.tw/mrn/#qa" class="header__nav__item header__nav__item-qa" data-anchor="qa">
52 
+          <p>COVID-19疫苗常見問題</p>
53 
+          <div class="header__nav__item__line"></div>
54 
+        </a>
55 
+        <a href="https://event.leecy.org.tw/mrn/#moreref" class="header__nav__item header__nav__item-moreref" data-anchor="moreref">
56 
+          <p>更多參考資訊</p>
57 
+          <div class="header__nav__item__line"></div>
58 
+        </a>
59 
+      </nav>
60 
+    </header>
61 
+    <!-- expert 專家教a你認識 mRNA -->
62 
+    <section id="expert" class="section expert">
63 
+      <div class="bg expert__bg">
64 
+        <picture>
65 
+          <source media="(max-width: 992px)" srcset="./images/expert-bg_mb.png">
66 
+          <img class="expert__bg__img expert__bg__img-circle" src="./images/expert-bg.png" alt="">
67 
+        </picture>
68 
+        <picture>
69 
+          <source media="(max-width: 992px)" srcset="./images/expert-line.png">
70 
+          <img class="expert__bg__img expert__bg__img-line" src="./images/expert-line.png" alt="">
71 
+        </picture>
72 
+      </div>
73 
+      <div class="container">
74 
+        <div class="expert__title">
75 
+          <div class="bg">
76 
+            <img src="./images/expert-title-bg.png" alt="">
77 
+          </div>
78 
+          <h2>什麼是<br class="pc-show"><span class="eng">mRNA</span></h2>
79 
+        </div>
80 
+        <!-- 影片 -->
81 
+        <div class="video expert__video expert__video-0">
82 
+          <div class="video__overlay">
83 
+            <div class="video__frame"></div>
84 
+            <div class="video__icon">
85 
+              <img src="./images/video-icon.png" alt="">
86 
+              <p>影片播放</p>
87 
+            </div>
88 
+          </div>
89 
+          <div class="video__player">
90 
+            <div class="video__yt" id="player_expert">
91 
+            </div>
92 
+          </div>
93 
+        </div>
94 
+      </div>
95 
+    </section>
96 
+
97 
+    <!-- understand 談談mRNA -->
98 
+    <section id="understand" class="section understand">
99 
+      <div class="bg">
100 
+        <picture>
101 
+          <source media="(max-width: 992px)" srcset="./images/understand-bg_mb.png">
102 
+          <img src="./images/understand-bg.png" alt="">
103 
+        </picture>
104 
+      </div>
105 
+      <div class="container">
106 
+        <div class="copywriting">
107 
+          <div class="bg">
108 
+            <img src="./images/understand-title-bg.png" alt="">
109 
+          </div>
110 
+          <div class="subtitle">
111 
+            <p>談談mRNA</p>
112 
+          </div>
113 
+          <div class="title">
114 
+            <h2>一分鐘認識mRNA</h2>
115 
+          </div>
116 
+        </div>
117 
+        <!-- Slider main container -->
118 
+        <div class="swiper understand__swiper">
119 
+          <!-- Additional required wrapper -->
120 
+          <div class="swiper-wrapper">
121 
+          </div>
122 
+          <div class="swiper-pagination"></div>
123 
+
124 
+          <div class="swiper-button-prev"></div>
125 
+          <div class="swiper-button-next"></div>
126 
+        </div>
127 
+      </div>
128 
+    </section>
129 
+
130 
+    <!-- history 談談mRNA -->
131 
+    <section id="history" class="section history">
132 
+      <div class="bg">
133 
+        <picture>
134 
+          <source media="(max-width: 992px)" srcset="./images/history-bg_mb.png">
135 
+          <img src="./images/history-bg.png" alt="">
136 
+        </picture>
137 
+      </div>
138 
+      <div class="container">
139 
+        <div class="copywriting">
140 
+          <div class="bg">
141 
+            <img src="./images/history-title-bg.png" alt="">
142 
+          </div>
143 
+          <div class="subtitle">
144 
+            <p>談談mRNA</p>
145 
+          </div>
146 
+          <div class="title">
147 
+            <h2>踏上mRNA歷史軌跡</h2>
148 
+          </div>
149 
+        </div>
150 
+        <div class="history__timeline">
151 
+          <div class="history__timeline__mainline"></div>
152 
+          <div class="history__timeline__box">
153 
+            <div class="swiper history__swiper">
154 
+              <div class="swiper-wrapper">
155 
+                <div class="swiper-slide">
156 
+                  <div class="history__timeline__item history__timeline__item-1960">
157 
+                    <div class="history__timeline__dot"></div>
158 
+                    <div class="history__timeline__branchline"></div>
159 
+                    <div class="history__timeline__year" data-yearidx="0">
160 
+                      <h3>1960<span>年代</span></h3>
161 
+                    </div>
162 
+                    <div class="history__timeline__desc">
163 
+                      <p>
164 
+                        mRNA第一次在人體被發現，科學家開始探索是否可用mRNA製作疫苗。 <span>〔1〕 〔2〕 </span>
165 
+                      </p>
166 
+                    </div>
167 
+                  </div>
168 
+                </div>
169 
+                <div class="swiper-slide">
170 
+                  <div class="history__timeline__item history__timeline__item-1970">
171 
+                    <div class="history__timeline__dot"></div>
172 
+                    <div class="history__timeline__branchline"></div>
173 
+                    <div class="history__timeline__year" data-yearidx="1">
174 
+                      <h3>1970<span>年代</span></h3>
175 
+                    </div>
176 
+                    <div class="history__timeline__desc">
177 
+                      <p>
178 
+                        科學家開始思考如果他們能讓mRNA進入身體提供細胞的指令，以製造這個病毒的一小部分，而不是注射弱化的病毒，會怎樣呢？然而，要使其有效，mRNA必須進入我們體內的細胞，以便能夠傳遞其信息。 <span>〔3〕</span><br>
179 
+                        最初面臨的挑戰是，當mRNA注入體內時會分解，而被我們的身體迅速回收，無法順利進入細胞。
180 
+                      </p>
181 
+                    </div>
182 
+                  </div>
183 
+                </div>
184 
+                <div class="swiper-slide">
185 
+                  <div class="history__timeline__item history__timeline__item-1990">
186 
+                    <div class="history__timeline__dot"></div>
187 
+                    <div class="history__timeline__branchline"></div>
188 
+                    <div class="history__timeline__year" data-yearidx="2">
189 
+                      <h3>1990<span>年代</span></h3>
190 
+                    </div>
191 
+                    <div class="history__timeline__desc">
192 
+                      <p>
193 
+                        隨著奈米科技的進步，以奈米脂質顆粒包覆mRNA的技術誕生，使mRNA能順利進入細胞。也因為此技術，多種mRNA疫苗和藥物在過去30年來持續被開發和研究。
194 
+                      </p>
195 
+                    </div>
196 
+                  </div>
197 
+                </div>
198 
+                <div class="swiper-slide">
199 
+                  <div class="history__timeline__item history__timeline__item-2013">
200 
+                    <div class="history__timeline__dot"></div>
201 
+                    <div class="history__timeline__branchline"></div>
202 
+                    <div class="history__timeline__year" data-yearidx="3">
203 
+                      <h3>2013</h3>
204 
+                    </div>
205 
+                    <div class="history__timeline__desc">
206 
+                      <p>
207 
+                        第一款mRNA疫苗進入人類狂犬病臨床試驗。雖然只顯示出微弱的免疫系統反應，但它展示出mRNA疫苗技術對人類是安全的重大結果。 <span>〔3〕</span>
208 
+                      </p>
209 
+                    </div>
210 
+                  </div>
211 
+                </div>
212 
+                <div class="swiper-slide">
213 
+                  <div class="history__timeline__item history__timeline__item-2020">
214 
+                    <div class="history__timeline__dot"></div>
215 
+                    <div class="history__timeline__branchline"></div>
216 
+                    <div class="history__timeline__year" data-yearidx="4">
217 
+                      <h3>2020</h3>
218 
+                    </div>
219 
+                    <div class="history__timeline__desc">
220 
+                      <p>
221 
+                        當世界面臨COVID-19時，mRNA疫苗技術已經準備就緒。最後一個要克服的障礙即是mRNA疫苗相當難以運輸，需要儲存在低溫下。然而mRNA疫苗的成功不可低估，如果沒有它，COVID-19恐造成全世界更大的健康安全疑慮。
222 
+                      </p>
223 
+                    </div>
224 
+                  </div>
225 
+                </div>
226 
+              </div>
227 
+
228 
+              <!-- If we need navigation buttons -->
229 
+              <div class="swiper-button-prev"></div>
230 
+              <div class="swiper-button-next"></div>
231 
+
232 
+            </div>
233 
+          </div>
234 
+        </div>
235 
+      </div>
236 
+    </section>
237 
+
238 
+    <!-- research 進入mRNA研究室 -->
239 
+    <section id="research" class="section research">
240 
+      <div class="bg pc-show">
241 
+        <picture>
242 
+          <source media="(max-width: 992px)" srcset="./images/research-bg.png">
243 
+          <img src="./images/research-bg.png" alt="">
244 
+        </picture>
245 
+      </div>
246 
+      <div class="container">
247 
+        <div class="copywriting copywriting-r">
248 
+          <div class="bg">
249 
+            <picture>
250 
+              <source media="(max-width: 992px)" srcset="./images/research-title-bg_mb.png">
251 
+              <img src="./images/research-title-bg.png" alt="">
252 
+            </picture>
253 
+          </div>
254 
+          <div class="title">
255 
+            <h2>進入mRNA 研究室</h2>
256 
+          </div>
257 
+          <div class="subtitle">
258 
+            <p>- 點擊下方圖示了解更多 -</p>
259 
+          </div>
260 
+        </div>
261 
+        <div class="research__list">
262 
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#proudModal">
263 
+            <div class="research__pic">
264 
+              <img src="./images/research-pic-proud.png" alt="">
265 
+            </div>
266 
+            <div class="research__name">
267 
+              <p>
268 
+                引以為傲的mRNA疫苗
269 
+              </p>
270 
+            </div>
271 
+          </div>
272 
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#featureModal">
273 
+            <div class="research__pic">
274 
+              <img src="./images/research-pic-feature.png" alt="">
275 
+            </div>
276 
+            <div class="research__name">
277 
+              <p>
278 
+                mRNA疫苗的特色
279 
+              </p>
280 
+            </div>
281 
+          </div>
282 
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#unlimitModal">
283 
+            <div class="research__pic">
284 
+              <img src="./images/research-pic-unlimit.png" alt="">
285 
+            </div>
286 
+            <div class="research__name">
287 
+              <p>
288 
+                mRNA疫苗的無限可能
289 
+              </p>
290 
+            </div>
291 
+          </div>
292 
+          <div class="research__item" data-bs-toggle="modal" data-bs-target="#showModal">
293 
+            <div class="research__pic">
294 
+              <img src="./images/research-pic-show.png" alt="">
295 
+            </div>
296 
+            <div class="research__name">
297 
+              <p>
298 
+                mRNA疫苗如何在疫情大展身手
299 
+              </p>
300 
+            </div>
301 
+          </div>
302 
+          <div class="research__item" data-research="proud">
303 
+            <div class="research__pic">
304 
+              <img src="./images/research-pic-test.png" alt="">
305 
+            </div>
306 
+            <div class="research__name">
307 
+              <p>
308 
+                mRNA小試身手
309 
+              </p>
310 
+            </div>
311 
+          </div>
312 
+        </div>
313 
+      </div>
314 
+    </section>
315 
+
316 
+    <!-- qa 新冠肺炎知多少 -->
317 
+    <section id="qa" class="section qa gradient-d">
318 
+      <div class="bg pc-show">
319 
+        <picture>
320 
+          <source media="(max-width: 992px)" srcset="./images/qa-bg.png">
321 
+          <img src="./images/qa-bg.png" alt="">
322 
+        </picture>
323 
+      </div>
324 
+      <div class="container">
325 
+        <div class="copywriting copywriting-s">
326 
+          <div class="bg">
327 
+            <img src="./images/qa-title-bg.png" alt="">
328 
+          </div>
329 
+          <div class="title">
330 
+            <h2>COVID-19疫苗常見問題</h2>
331 
+          </div>
332 
+        </div>
333 
+        <p>
334 
+          2023年5月5日世界衛生組織宣布結束COVID-19作為國際關注<br class="mb-show">的突發公共衛生事件<span>〔16〕</span> ，然而隨著病毒持續變異，<br class="mb-show">COVID-19尚未消失……
335 
+        </p>
336 
+        <div class="qa__keypoint">
337 
+          <h3>
338 
+            疫苗接種是幫助控制<br class="mb-show">COVID-19的一個關鍵方法。
339 
+          </h3>
340 
+          <div class="qa__keypoint__list">
341 
+            <div class="qa__keypoint__item">
342 
+              <div class="qa__keypoint__pic">
343 
+                <div class="qa__keypoint__pic__frame"></div>
344 
+                <img src="./images/qa-keypoint-pic-1.png" alt="">
345 
+              </div>
346 
+              <div class="qa__keypoint__exp">
347 
+                <p>
348 
+                  疫苗接種可以幫助降低新變種出現的可能性。<span>〔17〕</span>
349 
+                </p>
350 
+              </div>
351 
+            </div>
352 
+            <div class="qa__keypoint__item qa__keypoint__item">
353 
+              <div class="qa__keypoint__pic">
354 
+                <div class="qa__keypoint__pic__line qa__keypoint__pic__line-left"></div>
355 
+                <div class="qa__keypoint__pic__line qa__keypoint__pic__line-right"></div>
356 
+                <div class="qa__keypoint__pic__frame"></div>
357 
+                <img src="./images/qa-keypoint-pic-2.png" alt="">
358 
+              </div>
359 
+              <div class="qa__keypoint__exp">
360 
+                <p>
361 
+                  疫苗接種對於高風險嚴重感染的人更為重要，如65歲以上或具慢性病的民眾。
362 
+
363 
+                </p>
364 
+              </div>
365 
+            </div>
366 
+            <div class="qa__keypoint__item">
367 
+              <div class="qa__keypoint__pic">
368 
+                <div class="qa__keypoint__pic__frame"></div>
369 
+                <img src="./images/qa-keypoint-pic-3.png" alt="">
370 
+              </div>
371 
+              <div class="qa__keypoint__exp">
372 
+                <p>
373 
+                  疫苗接種可使傳播變得更可預測，且強化地方性控制的效力。
374 
+                </p>
375 
+              </div>
376 
+            </div>
377 
+          </div>
378 
+        </div>
379 
+        <div class="qa__box">
380 
+          <div class="qa__box__scroll">
381 
+            <ul class="qa__box__list">
382 
+              <li class="qa__box__item">
383 
+                <h4>
384 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
385 
+                </h4>
386 
+                <p>
387 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
388 
+                </p>
389 
+              </li>
390 
+              <li class="qa__box__item">
391 
+                <h4>
392 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
393 
+                </h4>
394 
+                <p>
395 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
396 
+                </p>
397 
+              </li>
398 
+              <li class="qa__box__item">
399 
+                <h4>
400 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
401 
+                </h4>
402 
+                <p>
403 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
404 
+                </p>
405 
+              </li>
406 
+              <li class="qa__box__item">
407 
+                <h4>
408 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
409 
+                </h4>
410 
+                <p>
411 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
412 
+                </p>
413 
+              </li>
414 
+              <li class="qa__box__item">
415 
+                <h4>
416 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
417 
+                </h4>
418 
+                <p>
419 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
420 
+                </p>
421 
+              </li>
422 
+              <li class="qa__box__item">
423 
+                <h4>
424 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
425 
+                </h4>
426 
+                <p>
427 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
428 
+                </p>
429 
+              </li>
430 
+              <li class="qa__box__item">
431 
+                <h4>
432 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
433 
+                </h4>
434 
+                <p>
435 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
436 
+                </p>
437 
+              </li>
438 
+              <li class="qa__box__item">
439 
+                <h4>
440 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
441 
+                </h4>
442 
+                <p>
443 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
444 
+                </p>
445 
+              </li>
446 
+              <li class="qa__box__item">
447 
+                <h4>
448 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
449 
+                </h4>
450 
+                <p>
451 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
452 
+                </p>
453 
+              </li>
454 
+              <li class="qa__box__item">
455 
+                <h4>
456 
+                  我已經感染過新冠肺炎，還需要接種最新型的新變異株疫苗嗎？
457 
+                </h4>
458 
+                <p>
459 
+                  雖然感染新冠後，身體都會對病毒產生一定免疫力，但接種疫苗可讓我們獲得更穩定的保護。美國有研究指出，在感染新冠病毒後痊癒的人當中，沒有接種疫苗的人士相比感染後曾接種疫苗者，他們再次感染新冠病毒的風險高出一倍！〔18〕同時，不論是透過感染或疫苗獲得的免疫保護，一般會在4-6個月後明顯減弱 〔19〕。所以，不管有無感染過新冠，皆可視自身需要、符合施打條件的情形下，考慮根據指示接種新變異株疫苗增強保護力。
460 
+                </p>
461 
+              </li>
462 
+            </ul>
463 
+          </div>
464 
+        </div>
465 
+      </div>
466 
+    </section>
467 
+
468 
+    <!-- moreref 更多參考資訊 -->
469 
+    <section id="moreref" class="section moreref">
470 
+      <div class="bg pc-show">
471 
+        <picture>
472 
+          <source media="(max-width: 992px)" srcset="./images/moreref-bg.png">
473 
+          <img src="./images/moreref-bg.png" alt="">
474 
+        </picture>
475 
+      </div>
476 
+      <div class="container">
477 
+        <div class="copywriting copywriting-s">
478 
+          <div class="bg">
479 
+            <img src="./images/moreref-title-bg.png" alt="">
480 
+          </div>
481 
+          <div class="title">
482 
+            <h2>更多參考資訊</h2>
483 
+          </div>
484 
+        </div>
485 
+        <div class="moreref__list">
486 
+          <a class="moreref__item moreref__item-line" href="" target="_blank">
487 
+            <div class="moreref__pic">
488 
+              <img src="./images/moreref-line.png" alt="">
489 
+            </div>
490 
+            <div class="moreref__name">
491 
+              <p>mRNA 健康管家</p>
492 
+            </div>
493 
+          </a>
494 
+          <a class="moreref__item moreref__item-map" href="" target="_blank">
495 
+            <div class="moreref__pic">
496 
+              <img src="./images/moreref-map.png" alt="">
497 
+            </div>
498 
+            <div class="moreref__name">
499 
+              <p>搜尋醫療院所  請前往疾管署</p>
500 
+            </div>
501 
+          </a>
502 
+        </div>
503 
+      </div>
504 
+    </section>
505 
+
506 
+    <footer class="footer">
507 
+      <h2>參考資料</h2>
508 
+      <p>
509 
+        〔1〕Moderna官網 <a href="https://www.modernatx.com/zh-TW/power-of-mrna/science-of-mrna" target="_blank">https://www.modernatx.com/zh-TW/power-of-mrna/science-of-mrna   </a>
510 
+        〔2〕<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>
511 
+        〔3〕<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>
512 
+        〔4〕<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>
513 
+        〔5〕COV-Power of mRNA – Infographic-US- English
514 
+        〔6〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉
515 
+        〔7〕<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>
516 
+        〔8〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗作用機轉
517 
+        〔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>
518 
+        〔10〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗的特色
519 
+        〔11〕mRNA主題_黃立民教授_台詞分鏡表/mRNA疫苗未來展望與挑戰
520 
+        〔12〕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>
521 
+        〔13〕Gene Online / COVID-19疫情後的mRNA走向？莫德納執行長Stéphane Bancel分享抗疫歷程 /<a href="https://geneonline.news/covid-19-mrna-moderna/" target="_blank">https://geneonline.news/covid-19-mrna-moderna/    </a>
522 
+        〔14〕CDC網站）<a href="https://www.cdc.gov/coronavirus/2019-ncov/vaccines/different-vaccines/mrna.html" target="_blank">https://www.cdc.gov/coronavirus/2019-ncov/vaccines/different-vaccines/mrna.html   </a>
523 
+        〔15〕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>
524 
+        〔16〕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>
525 
+        〔17〕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>
526 
+        〔18〕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>
527 
+        〔19〕台灣感染症醫學會/6個月-5歲之嬰幼兒疫苗接種建議: <a href="https://fightcovid19.com.tw/" target="_blank">https://fightcovid19.com.tw/</a>
528 
+        〔20〕 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>
529 
+        〔21〕新北市政府衛生局/新北市COVID-19疫苗接種地點資訊查詢: <a href="https://www.health.ntpc.gov.tw/basic/?mode=detail&node=8342" target="_blank">https://www.health.ntpc.gov.tw/basic/?mode=detail&node=8342</a>
530 
+
531 
+      </p>
532 
+      <div class="copyright">
533 
+        <p>TW-COV-2300023, Oct 2023</p>
534 
+      </div>
535 
+    </footer>
536 
+  </div>
537 
+
538 
+  <div class="modal modal-research modal-proud fade" id="proudModal" tabindex="-1" aria-labelledby="proudModalLabel" aria-hidden="true">
539 
+    <div class="modal-dialog modal-dialog-centered">
540 
+      <div class="modal-content">
541 
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
542 
+        <div class="modal-body">
543 
+          <div class="modal__title">
544 
+            <h2>引以為傲的mRNA疫苗</h4>
545 
+          </div>
546 
+          <div class="modal__preface">
547 
+            <h3>mRNA疫苗是如何運作的?</h3>
548 
+            <p>科學家們設計mRNA疫苗，以教導人體的免疫系統對抗感染源。<span>〔4〕</span></p>
549 
+          </div>
550 
+          <div class="modal__list">
551 
+            <div class="modal__item">
552 
+              <div class="modal__pic">
553 
+                <img src="./images/rearch-popup/proud-pic-1.png" alt="">
554 
+              </div>
555 
+              <div class="modal__text">
556 
+                <h4>mRNA疫苗核心概念</h4>
557 
+                <p>mRNA疫苗藉由提供RNA進入人體內細胞轉譯出病毒蛋白質，來促使免疫系統反應，其中主要成分是mRNA和奈米脂質顆粒。</p>
558 
+              </div>
559 
+            </div>
560 
+            <div class="modal__item">
561 
+              <div class="modal__pic">
562 
+                <img src="./images/rearch-popup/proud-pic-2.png" alt="">
563 
+              </div>
564 
+              <div class="modal__text">
565 
+                <h4>mRNA疫苗核心概念</h4>
566 
+                <p>mRNA是脆弱的單鏈結構，所以mRNA疫苗會使用奈米脂質顆粒來包覆，以確保效果可以在人體正確位置發揮。 <span>〔5〕</span></p>
567 
+              </div>
568 
+            </div>
569 
+            <div class="modal__item">
570 
+              <div class="modal__pic">
571 
+                <img src="./images/rearch-popup/proud-pic-3.png" alt="">
572 
+              </div>
573 
+              <div class="modal__text">
574 
+                <h4>mRNA疫苗核心概念</h4>
575 
+                <p>當注射mRNA疫苗後，抗原呈現細胞(antigen-presenting cell, 簡稱APCs)就會吞噬LNP使之崩解，mRNA這時會促使細胞開始產生一系列抗病毒抗體反應。 <span>〔5〕</span></p>
576 
+                <div class="modal__additional">
577 
+                  <div class="modal__additional__icon">
578 
+                    <img src="./images/rearch-popup/proud-pic-lamp.png" alt="">
579 
+                  </div>
580 
+                  <div class="modal__additional__text">
581 
+                    <p>
582 
+                      知識補給站<br>
583 
+                      mRNA和包裹它的奈米脂質顆粒（lipid nanoparticles, 簡稱LNP），從疫苗中引入體內後，會在自然狀態下在2天內分解並離開你的身體。 <span>〔6〕</span>
584 
+                    </p>
585 
+                  </div>
586 
+                </div>
587 
+              </div>
588 
+            </div>
589 
+            <div class="modal__item">
590 
+              <div class="modal__pic">
591 
+                <img src="./images/rearch-popup/proud-pic-4.png" alt="">
592 
+              </div>
593 
+              <div class="modal__text">
594 
+                <h4>mRNA疫苗核心概念</h4>
595 
+                <p>活化T細胞和B細胞的免疫反應，產生大量抗體來中和病毒，防止病毒入侵未受損的細胞，達到快速防禦的效果。<span>〔7〕</span></p>
596 
+              </div>
597 
+            </div>
598 
+          </div>
599 
+        </div>
600 
+      </div>
601 
+    </div>
602 
+  </div>
603 
+
604 
+  <div class="modal modal-research modal-feature fade" id="featureModal" tabindex="-1" aria-labelledby="featureModalLabel" aria-hidden="true">
605 
+    <div class="modal-dialog modal-dialog-centered">
606 
+      <div class="modal-content">
607 
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
608 
+        <div class="modal-body">
609 
+          <div class="modal__title">
610 
+            <h2>mRNA疫苗的特色</h4>
611 
+          </div>
612 
+          <div class="modal__principle">
613 
+            <div class="modal__principle__item modal__principle__item-blue">
614 
+              <div class="modal__principle__title">
615 
+                <h3>疫苗原理 </h3>
616 
+              </div>
617 
+              <div class="modal__principle__text">
618 
+                <p>
619 
+                  注射被稱為抗原的滅活病毒蛋白質，刺激人體免疫系統識別病毒，當病毒再次出現時快速被消滅或控制。 <span>〔8〕</span>
620 
+                </p>
621 
+              </div>
622 
+            </div>
623 
+            <div class="modal__principle__item modal__principle__item-red">
624 
+              <div class="modal__principle__title">
625 
+                <h3>mRNA疫苗原理  </h3>
626 
+              </div>
627 
+              <div class="modal__principle__text">
628 
+                <p>
629 
+                  不需要注射抗原本身。將抗原的基因序列或「代碼」翻譯成的mRNA，誘導身體產生真實的抗體。然後，mRNA會被人體的自然防禦機制降解而消失，留下抗體對抗病毒。
630 
+                </p>
631 
+              </div>
632 
+            </div>
633 
+          </div>
634 
+          <h3>mRNA疫苗的五大特色</h3>
635 
+          <div class="modal__list">
636 
+            <div class="modal__item">
637 
+              <h4>應變性 : </h4>
638 
+              <div class="modal__text">
639 
+                <p>mRNA 疫苗可以快速改變抗原設計，隨時製造出需要的新抗原，以快速應對病毒基因的突變。<span>〔9〕</span></p>
640 
+              </div>
641 
+            </div>
642 
+            <div class="modal__item">
643 
+              <h4>針對性 :  </h4>
644 
+              <div class="modal__text">
645 
+                <p>僅截取所需的蛋白質密碼，不含其他病毒的基因訊息。<span>〔10〕</span></p>
646 
+              </div>
647 
+            </div>
648 
+            <div class="modal__item">
649 
+              <h4>不滯留性:  </h4>
650 
+              <div class="modal__text">
651 
+                <p>不會長期停留體內且無其他毒性風險。 </p>
652 
+              </div>
653 
+            </div>
654 
+            <div class="modal__item">
655 
+              <h4>安全性 : </h4>
656 
+              <div class="modal__text">
657 
+                <p>免疫反應更接近自然感染型態，危險性較低。<span>〔10〕</span></p>
658 
+              </div>
659 
+            </div>
660 
+            <div class="modal__item">
661 
+              <h4>效率 : </h4>
662 
+              <div class="modal__text">
663 
+                <p>mRNA疫苗因為開發週期快，在生產過程中也更安全，也無需耗費如傳統疫苗研發時的大量成本。</p>
664 
+              </div>
665 
+            </div>
666 
+          </div>
667 
+        </div>
668 
+      </div>
669 
+    </div>
670 
+  </div>
671 
+
672 
+  <div class="modal modal-research modal-unlimit fade" id="unlimitModal" tabindex="-1" aria-labelledby="unlimitModalLabel" aria-hidden="true">
673 
+    <div class="modal-dialog modal-dialog-centered">
674 
+      <div class="modal-content">
675 
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
676 
+        <div class="modal-body">
677 
+          <div class="modal__title">
678 
+            <h2>mRNA疫苗的無限可能</h4>
679 
+          </div>
680 
+          <div class="modal__preface">
681 
+            <p>針對mRNA疫苗，目前仍需以超低溫條件來儲存和運送。 <span>〔11〕</span></p>
682 
+          </div>
683 
+          <div class="modal__preface">
684 
+            <h3>mRNA疫苗還有什麼可能性?</h3>
685 
+            <p>mRNA目前在疫苗開發上正在往廣泛的疾病領域發展，未來可能解決以下疾病 :</p>
686 
+          </div>
687 
+          <div class="modal__intro">
688 
+            <div class="modal__intro__pic">
689 
+              <img src="./images/rearch-popup/unlimit-pic.png" alt="">
690 
+            </div>
691 
+            <ul>
692 
+              <li>
693 
+                <p>
694 
+                病原體 : 非典型肺炎、寨卡病毒、皰疹病毒、瘧疾寄生蟲等。
695 
+                </p>
696 
+              </li>
697 
+              <li>
698 
+                <p>
699 
+                自身免疫性病毒 : 減少炎症，改變疫苗型態轉變為「治療」。〔12〕
700 
+                </p>
701 
+              </li>
702 
+              <li>
703 
+                <p>
704 
+                囊性纖維化
705 
+                </p>
706 
+              </li>
707 
+              <li>
708 
+                <p>
709 
+                多發性硬化症
710 
+                </p>
711 
+              </li>
712 
+              <li>
713 
+                <p>
714 
+                嚴重肺病及哮喘
715 
+                </p>
716 
+              </li>
717 
+              <li>
718 
+                <p>
719 
+                癌症
720 
+                </p>
721 
+              </li>
722 
+              <li>
723 
+                <p>
724 
+                罕見病
725 
+                </p>
726 
+              </li>
727 
+              <li>
728 
+                <p>
729 
+                潛伏型病毒(latent virus) : 指能夠在體內長時間存在，休眠多年後才引起症狀的病毒。包括人類免疫缺乏病毒(HIV)、人類乳突病毒(HPV)和EB病毒〔13〕。
730 
+                </p>
731 
+              </li>
732 
+            </ul>
733 
+          </div>
734 
+        </div>
735 
+      </div>
736 
+    </div>
737 
+  </div>
738 
+
739 
+  <div class="modal modal-research modal-show fade" id="showModal" tabindex="-1" aria-labelledby="showModalLabel" aria-hidden="true">
740 
+    <div class="modal-dialog modal-dialog-centered">
741 
+      <div class="modal-content">
742 
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
743 
+        <div class="modal-body">
744 
+          <div class="modal__title">
745 
+            <h2>mRNA疫苗如何在疫情大展身手</h4>
746 
+          </div>
747 
+          <div class="modal__preface">
748 
+            <p>2023年諾貝爾生醫獎由匈牙利裔的美籍科學家卡里科（Katalin Kariko），和美國科學家魏斯曼（Drew Weissman）共同獲獎。兩人長期致力於mRNA疫苗研發，因為在核苷（nucleoside）修飾的有關發現，得以促成開發有效的COVID-19信使核糖核酸（mRNA）疫苗，故獲得醫學獎殊榮。
749 
+              而藉由他們的突破性發現，人們根本性的改變對於mRNA如何與免疫系統相互作用的理解，在現代人類面臨健康最大威脅之一的COVID-19疫情期間，兩位科學家為空前的疫苗研發速度做出貢獻。<span>〔14〕</span></p>
750 
+          </div>
751 
+          <h3>新冠mRNA疫苗如何運作? </h3>
752 
+          <div class="modal__operation">
753 
+            <div class="modal__operation__item">
754 
+              <div class="modal__operation__step">
755 
+                <p>Step 1</p>
756 
+              </div>
757 
+              <div class="modal__operation__text">
758 
+                <p>
759 
+                  新冠mRNA疫苗向細胞發出指令，要求製造一段無害的蛋白質，稱為「棘蛋白」，與造成新冠肺炎病毒表面的棘蛋白相似。
760 
+                </p>
761 
+              </div>
762 
+            </div>
763 
+            <div class="modal__operation__item">
764 
+              <div class="modal__operation__step">
765 
+                <p>Step 2</p>
766 
+              </div>
767 
+              <div class="modal__operation__text">
768 
+                <p>
769 
+                  新冠mRNA疫苗透過人體上臂肌肉注射進入。
770 
+                </p>
771 
+              </div>
772 
+            </div>
773 
+            <div class="modal__operation__item">
774 
+              <div class="modal__operation__step">
775 
+                <p>Step 3</p>
776 
+              </div>
777 
+              <div class="modal__operation__text">
778 
+                <p>
779 
+                  一旦指令(mRNA)進入肌肉細胞，細胞會根據指令製造蛋白質片段，產生這種蛋白質片段後，細胞會分解和消除該指令。
780 
+                </p>
781 
+              </div>
782 
+            </div>
783 
+            <div class="modal__operation__item">
784 
+              <div class="modal__operation__step">
785 
+                <p>Step 4</p>
786 
+              </div>
787 
+              <div class="modal__operation__text">
788 
+                <p>
789 
+                  該蛋白質片段會出現在細胞表面。當人體免疫系統發現此處不應該有這種蛋白質，會開始啟動免疫反應並分泌抗體。
790 
+                </p>
791 
+              </div>
792 
+            </div>
793 
+            <div class="modal__operation__item">
794 
+              <div class="modal__operation__step">
795 
+                <p>Step 5</p>
796 
+              </div>
797 
+              <div class="modal__operation__text">
798 
+                <p>
799 
+                  與人體抑制新冠肺炎的自然感染同理。到這個過程結束時，接種者便可獲得免疫保護。<span>〔15〕</span>
800 
+                </p>
801 
+              </div>
802 
+            </div>
803 
+          </div>
804 
+          <h3>新冠mRNA 疫苗五大特色：</h3>
805 
+          <div class="modal__feature">
806 
+            <div class="modal__feature__item">
807 
+              <p>
808 
+                <span class="red">不使用</span><br>
809 
+                引起新冠肺炎<br>
810 
+                的活體病毒
811 
+              </p>
812 
+            </div>
813 
+            <div class="modal__feature__item">
814 
+              <p>
815 
+                <span class="red">不影響</span><br>
816 
+                人體 DNA<br>
817 
+                及基因
818 
+              </p>
819 
+            </div>
820 
+            <div class="modal__feature__item">
821 
+              <p>
822 
+                <span class="red">不會導致</span><br>
823 
+                接種者感染<br>
824 
+                新冠肺炎
825 
+              </p>
826 
+            </div>
827 
+            <div class="modal__feature__item">
828 
+              <p>
829 
+                在 mRNA 按<br>
830 
+                指令完成任務後<br>
831 
+                細胞很快會將其<br>
832 
+                <span class="red">分解和消除</span>
833 
+              </p>
834 
+            </div>
835 
+            <div class="modal__feature__item">
836 
+              <p>
837 
+                與所有其他類型的<br>
838 
+                疫苗一樣在安全<br>
839 
+                及效力方面同樣<br>
840 
+                <span class="red">具嚴格法規
841 
+                  審核標準</span>
842 
+              </p>
843 
+            </div>
844 
+          </div>
845 
+        </div>
846 
+      </div>
847 
+    </div>
848 
+  </div>
849 
+
850 
+  <script src="lib/jquery-3.6.4.min.js"></script>
851 
+  <script src="https://www.youtube.com/iframe_api"></script>
852 
+  <script src="lib/swiper.min.js"></script>
853 
+  <script src="lib/gsap.min.js"></script>
854 
+  <script src="lib/ScrollTrigger.min.js"></script>
855 
+  <script src="lib/lenis.min.js"></script>
856 
+  <script src="lib/jquery.nicescroll.min.js"></script>
857 
+  <script src="lib/bootstrap.min.js"></script>
858 
+
859 
+  <script src="js/tealiumTracking.js"></script>
860 
+
861 
+  <script src="js/utlis.js"></script>
862 
+  <script src="js/ga.js"></script>
863 
+  <script type="module" src="js/ViewModel.js"></script>
864 
+  <script src="js/main.js"></script>
865 
+
866 
+  <!-- <script src="./lib/vconsole.min.js"></script>
867 
+
868 
+  <script>
869 
+    // init vConsole
870 
+    var vConsole = new VConsole();
871 
+    console.log('Hello world');
872 
+  </script> -->
873 
+
874 
+
875 
+</body>
876 
+
877 
+</html>

+ 56
- 0
src/fe/mrna/js/ViewModel.js Wyświetl plik 

@@ -0,0 +1,56 @@
1 
+
2 
+function ViewModel() {
3 
+
4 
+  //private menbers
5 
+  let events = {
6 
+    onInit: function () { },
7 
+    onLoading: function () { },
8 
+  };
9 
+
10 
+  //private methods
11 
+  function init() {
12 
+    events.onInit();
13 
+  }
14 
+
15 
+    // Loading
16 
+    function showLoading() {
17 
+      events.onLoading(true);
18 
+    }
19 
+
20 
+    function hideLoading() {
21 
+      events.onLoading(false);
22 
+    }
23 
+
24 
+  /******************************/
25 
+
26 
+  function callbackDefault() {}
27 
+
28 
+  function onInit(_callback = callbackDefault) {
29 
+    events.onInit = _callback;
30 
+  }
31 
+
32 
+  function onLoading(_callback = callbackDefault) {
33 
+    events.onLoading = _callback;
34 
+  }
35 
+
36 
+  function onAlert(_callback = callbackDefault) {
37 
+    events.onAlert = _callback;
38 
+  }
39 
+
40 
+  //constructor
41 
+  {
42 
+    console.log('ViewModel is loaded.');
43 
+  }
44 
+
45 
+  //public
46 
+
47 
+  return {
48 
+    init,
49 
+    onInit,
50 
+    onLoading,
51 
+    onAlert
52 
+  };
53 
+};
54 
+
55 
+export default ViewModel;
56 
+window.viewModel = new ViewModel();

+ 74
- 0
src/fe/mrna/js/ga.js Wyświetl plik 

@@ -0,0 +1,74 @@
1 
+ga_default = function (_id) {
2 
+    /* GA default */
3 
+    window.dataLayer = window.dataLayer || [];
4 
+
5 
+    function gtag() {
6 
+        dataLayer.push(arguments);
7 
+    }
8 
+    gtag('js', new Date());
9 
+
10 
+    gtag('config', _id, {
11 
+        'send_page_view': false
12 
+    });
13 
+
14 
+    function gtag_pageView(_key) {
15 
+        //ga('send', 'pageview', key);
16 
+        gtag('config', _id, {
17 
+            'page_title': _key,
18 
+            'page_path': '/' + _key
19 
+        });
20 
+
21 
+        console.log("pageView: " + _key);
22 
+    }
23 
+
24 
+    function gtag_ButtonClick(_name, _key) {
25 
+        //ga('send', 'event', 'Button', 'Click', key);
26 
+        gtag('event', 'click', {
27 
+            'event_category': _name,
28 
+            'event_label': _key
29 
+        });
30 
+
31 
+        console.log(_name + "-Click: " + _key);
32 
+    }
33 
+    function gtag_Event(_name, _key) {
34 
+        //ga('send', 'event', 'Button', 'Click', key);
35 
+        gtag('event', 'Video', {
36 
+            'event_category': _name,
37 
+            'event_label': _key
38 
+        });
39 
+
40 
+        console.log(_name + ":" + _key);
41 
+    }
42 
+    /* GA default */
43 
+
44 
+    function page() {
45 
+
46 
+    }
47 
+
48 
+    /* Demo : data-category="footer" data-ga="privacy" */
49 
+    function page_ga() {
50 
+        $(document).on("click", "*[data-ga]", function () {
51 
+            gtag_ButtonClick($(this).data("category"), $(this).data("ga"));
52 
+        });
53 
+    }
54 
+
55 
+    function init() {
56 
+        page();
57 
+        page_ga()
58 
+    } {
59 
+        init();
60 
+    }
61 
+    return {
62 
+        pageView: function (_key) {
63 
+            gtag_pageView(_key)
64 
+        },
65 
+        ButtonClick: function (_name, _key) {
66 
+            gtag_ButtonClick(_name, _key)
67 
+        },
68 
+        Event: function (_name, _key) {
69 
+            gtag_Event(_name, _key)
70 
+        },
71 
+    };
72 
+}
73 
+
74 
+var setGA = new ga_default("xxxxxxxx");

+ 762
- 0
src/fe/mrna/js/main.js Wyświetl plik 

@@ -0,0 +1,762 @@
1 
+main = function () {
2 
+	//private menbers
3 
+	let pcWidth = 1440; // pc預設寬度
4 
+	let mbWidth = 992;  // ㄖㄩ預設寬度
5 
+	let defaultFz = 16; // 預設 wrapper字體大小
6 
+	let windowWidth;
7 
+	let headerH;
8 
+	let swiper_video;
9 
+	let swiper_history;
10 
+	let activeTimelineTl; // 歷史軌跡動態timeline
11 
+	let currentHistoryIdx = 0;  // 歷史軌跡第幾個idx
12 
+	let historySlideTl // 歷史軌跡倒數計時器
13 
+	let imgUrls = [];
14 
+	const section = $(".section"); // 取得所有section
15 
+	let currentId = null; // foces的區塊ID
16 
+
17 
+
18 
+	// 每個播放器的配置信息
19 
+	var playerConfigs = [
20 
+		{
21 
+			containerId: "player_expert",
22 
+			videoId: "dYBnqdUu6xo",
23 
+			category: "expert",
24 
+		},
25 
+		{
26 
+			containerId: "player_understand_1",
27 
+			videoId: "dYBnqdUu6xo",
28 
+			category: "understand",
29 
+
30 
+		},
31 
+		{
32 
+			containerId: "player_understand_2",
33 
+			videoId: "cmgHpZ0Ahs8",
34 
+			category: "understand",
35 
+
36 
+		},
37 
+		{
38 
+			containerId: "player_understand_3",
39 
+			videoId: "hbfEBBz69eo",
40 
+			category: "understand",
41 
+
42 
+		},
43 
+		{
44 
+			containerId: "player_understand_4",
45 
+			videoId: "s77XkuPn7YM",
46 
+			category: "understand",
47 
+
48 
+		},
49 
+		{
50 
+			containerId: "player_understand_5",
51 
+			videoId: "Kti8pWSXXd4",
52 
+			category: "understand",
53 
+
54 
+		},
55 
+		{
56 
+			containerId: "player_understand_6",
57 
+			videoId: "hbfEBBz69eo",
58 
+			category: "understand",
59 
+
60 
+		},
61 
+	];
62 
+
63 
+	// 創建播放器對象數組
64 
+	var players = [];
65 
+
66 
+	//private methods
67 
+	function init() {
68 
+		console.log("main is loaded.");
69 
+
70 
+		$(window).resize(function () {
71 
+			resizeWindow();
72 
+		});
73 
+
74 
+		// if ($(window).width() > 992) {
75 
+		// 	// smooth scroll
76 
+		// 	lenisHandler();
77 
+		// }
78 
+
79 
+		// $("#showModal").modal('show');
80 
+
81 
+		loadImagesAndPerformAction(imgUrls, startHandler);
82 
+
83 
+		scrollToSection();
84 
+
85 
+		// 點擊漢堡
86 
+		$(".header__hamburger").on("click", function () {
87 
+			if(!$(this).hasClass("active")) {
88 
+				$(this).addClass("active");
89 
+				$(".header__nav").addClass("active");
90 
+				openMenu();
91 
+			}else {
92 
+				$(this).removeClass("active");
93 
+				$(".header__nav").removeClass("active");
94 
+				closeMenu();
95 
+			}
96 
+		});
97 
+
98 
+		// 點擊 專家影片 關閉此功能
99 
+		// $(".expert__video .video__overlay").on("click", function () {
100 
+		// 	let targetIdx = $(this).data("videoIdx");
101 
+		// 	let videoBox = $(this).parents(".video");
102 
+		// 	if (!videoBox.hasClass("active")) {
103 
+		// 		videoBox.addClass("active");
104 
+		// 		playVideo(targetIdx);
105 
+		// 	} else {
106 
+		// 		videoBox.removeClass("active");
107 
+		// 		pauseVideo(targetIdx);
108 
+		// 	}
109 
+		// });
110 
+
111 
+		// 點擊 歷史軌跡 年份
112 
+		$(".history .history__timeline__year").on("click", function () {
113 
+			currentHistoryIdx = $(this).data("yearidx");
114 
+			autoPlayHistory(currentHistoryIdx);
115 
+		});
116 
+
117 
+		// 測試用
118 
+		// gsap.to(".game__item-start", { duration: 0.5, autoAlpha: 0 });
119 
+		// gsap.to(".game__item-main", { duration: 0.5, autoAlpha: 0 });
120 
+		// gsap.to(".game__item-result", { duration: 0.3, autoAlpha: 1, delay: 0.3 });
121 
+		// totalScore = 16;
122 
+		// gameResultCal()
123 
+	}
124 
+
125 
+	// 初始元素動態
126 
+	function elementReset() {
127 
+		// gsap.set(".qa__item", { y: 50, autoAlpha: 0 });
128 
+	}
129 
+
130 
+	// 開始程序
131 
+	function startHandler() {
132 
+		// 調整頁面font-size
133 
+		windowWidth = $(window).width();
134 
+		if (windowWidth > 992) {
135 
+			let pcScale = windowWidth / pcWidth;
136 
+			$(".wrapper").css("font-size", defaultFz * pcScale + "px");
137 
+
138 
+			setTimeout(() => {
139 
+				headerH = $(".header").outerHeight();
140 
+				console.log("headerH: " + headerH);
141 
+				$(".wrapper").css("padding-top", headerH);
142 
+			}, 800);
143 
+		} else {
144 
+			let mbScale = windowWidth / mbWidth;
145 
+			$(".wrapper").css("font-size", defaultFz * mbScale + "px");
146 
+			setTimeout(() => {
147 
+				headerH = $(".header").outerHeight();
148 
+				initMenu();;
149 
+			}, 800);
150 
+		}
151 
+
152 
+		elementReset();
153 
+
154 
+		understandVideoHandler();
155 
+		swiperHandler_history();
156 
+
157 
+		setTimeout(() => {
158 
+			gsap.to(".wrapper", { duration: 0.3, autoAlpha: 1 });
159 
+
160 
+			if(!isMobile) {
161 
+				$(".qa__box__scroll").niceScroll({
162 
+					cursorcolor: "#2ba4da", // 滾動條的顏色
163 
+					cursorwidth: "0.6em", // 滾動條寬度
164 
+					cursorborder: "1px solid #fff", // 滾動條邊框
165 
+					cursorborderradius: "5px", // 滾動條圓角
166 
+					touchbehavior: false, // 是否啟用拖曳行為
167 
+					autohidemode: false, // 不隱藏卷軸
168 
+					background: "", // 軌道背景色
169 
+					cursorminheight: 32, // 滾動條最小高度
170 
+					railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
171 
+					railalign: "center", // 對其垂直軌道
172 
+					railvalign: "center", // 對其水平軌道
173 
+					cursordragontouch: false, // 使用觸屏模式來實現拖曳
174 
+					grabcursorenabled: false,
175 
+				});
176 
+			}else {
177 
+				$(".qa__box__scroll").niceScroll({
178 
+					cursorcolor: "#2ba4da", // 滾動條的顏色
179 
+					cursorwidth: "0.7em", // 滾動條寬度
180 
+					cursorborder: "1px solid #fff", // 滾動條邊框
181 
+					cursorborderradius: "5px", // 滾動條圓角
182 
+					touchbehavior: false, // 是否啟用拖曳行為
183 
+					autohidemode: false, // 不隱藏卷軸
184 
+					background: "", // 軌道背景色
185 
+					cursorminheight: 32, // 滾動條最小高度
186 
+					railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 軌道內間距
187 
+					railalign: "center", // 對其垂直軌道
188 
+					railvalign: "center", // 對其水平軌道
189 
+					cursordragontouch: false, // 使用觸屏模式來實現拖曳
190 
+					grabcursorenabled: false,
191 
+				});
192 
+			}
193 
+
194 
+			detectScrollSection();
195 
+
196 
+			$(window).scroll(function(){
197 
+				detectScrollSection();
198 
+			})
199 
+
200 
+			setTimeout(()=>{
201 
+				// 測試
202 
+				// swiper_history.slideNext();
203 
+				// swiper_history.slideTo(4, 1000)
204 
+
205 
+
206 
+			}, 1000);
207 
+
208 
+
209 
+			// // 開頭動態
210 
+			// startAni();
211 
+
212 
+			// // 元素動態
213 
+			// elementAni();
214 
+		}, 1000);
215 
+	}
216 
+
217 
+	// 桌機調整視窗大小
218 
+	function resizeWindow() {
219 
+		let currWindowWidth = $(window).width();
220 
+		if (currWindowWidth !== windowWidth) {
221 
+			if (currWindowWidth > 992) {
222 
+				let pcScale = currWindowWidth / pcWidth;
223 
+				let currFz = defaultFz * pcScale;
224 
+				$(".wrapper").css("font-size", currFz + "px");
225 
+
226 
+				headerH = $(".header").outerHeight();
227 
+				$(".wrapper").css("padding-top", headerH);
228 
+			} else {
229 
+				let mbScale = currWindowWidth / mbWidth;
230 
+				let currFz = defaultFz * mbScale;
231 
+				$(".wrapper").css("font-size", currFz + "px");
232 
+
233 
+				headerH = $(".header").outerHeight();
234 
+				$(".wrapper").css("padding-top", headerH);
235 
+			}
236 
+		}
237 
+	}
238 
+
239 
+	// 宣導影片程序 MB
240 
+	async function understandVideoHandler() {
241 
+		await buildUnderstandVideo();
242 
+		await initIframeApi();
243 
+		// // 影片 swiper 程序
244 
+		await swiperHandler_video();
245 
+	}
246 
+
247 
+	// 初始menu
248 
+	function initMenu() {
249 
+		let menuListH = $(".header__nav").outerHeight();
250 
+		console.log("menuListH: "+menuListH)
251 
+		gsap.set(".header__nav", { top: -menuListH });
252 
+	}
253 
+
254 
+	// 打開menu
255 
+	function openMenu() {
256 
+		let headerH = $(".header").outerHeight();
257 
+		gsap.to(".header__nav", { duration: 0.3, top: headerH });
258 
+	}
259 
+
260 
+	// 關閉menu
261 
+	function closeMenu() {
262 
+		let menuListH = $(".header__nav").outerHeight();
263 
+		gsap.to(".header__nav", { duration: 0.3, top: -menuListH });
264 
+	}
265 
+
266 
+	// smoothWheel
267 
+	function lenisHandler() {
268 
+		const lenis = new Lenis({
269 
+			duration: 0.3,
270 
+			smoothWheel: true,
271 
+		});
272 
+
273 
+		lenis.on("scroll", (e) => {
274 
+			// console.log(e)
275 
+			ScrollTrigger.update();
276 
+		});
277 
+
278 
+		function raf(time) {
279 
+			lenis.raf(time);
280 
+			requestAnimationFrame(raf);
281 
+		}
282 
+
283 
+		requestAnimationFrame(raf);
284 
+	}
285 
+
286 
+	// ====================  影片相關  ====================
287 
+
288 
+	function initIframeApi () {
289 
+		return new Promise(resolve => {
290 
+			var script = document.createElement('script');
291 
+			script.src = 'https://www.youtube.com/iframe_api';
292 
+			script.onload = onLibraryLoaded;
293 
+			document.head.appendChild(script);
294 
+			resolve("initIframeApi complete");
295 
+		});
296 
+	}
297 
+
298 
+	// 談談mRNA 影片DOM
299 
+	function buildUnderstandVideo() {
300 
+		return new Promise((resolve) => {
301 
+			console.log("buildUnderstandVideo")
302 
+			$(`.understand__swiper .swiper-wrapper`).html("");
303 
+			playerConfigs.forEach((videoData, idx) => {
304 
+				if(videoData.category == "understand") {
305 
+					$(`.understand__swiper .swiper-wrapper`)
306 
+					.append(`
307 
+						<div class="swiper-slide">
308 
+							<div class="video understand__video ${videoData.category}__video-${idx}">
309 
+								<div class="video__overlay">
310 
+									<div class="video__frame"></div>
311 
+									<div class="video__icon">
312 
+										<img src="./images/video-icon.png" alt="">
313 
+										<p>影片播放</p>
314 
+									</div>
315 
+								</div>
316 
+								<div class="video__player">
317 
+									<div class="video__yt" id="player_${videoData.category}_${idx}">
318 
+									</div>
319 
+								</div>
320 
+							</div>
321 
+						</div>
322 
+					`);
323 
+				}
324 
+			});
325 
+			resolve("buildPropagandaVideo complete");
326 
+		});
327 
+	}
328 
+
329 
+	// 談談mRNA 影片程序
330 
+	function swiperHandler_video() {
331 
+		return new Promise((resolve) => {
332 
+			swiper_video = new Swiper(".understand__swiper", {
333 
+				// Optional parameters
334 
+				allowTouchMove: false,
335 
+				slidesPerView: 1,
336 
+				centeredSlides: false,
337 
+				pagination: {
338 
+					el: ".understand__swiper .swiper-pagination",
339 
+					clickable: true,
340 
+				},
341 
+				// spaceBetween: "5%",
342 
+
343 
+				// Navigation arrows
344 
+				navigation: {
345 
+					nextEl: ".understand__swiper .swiper-button-next",
346 
+					prevEl: ".understand__swiper .swiper-button-prev",
347 
+				},
348 
+				breakpoints: {
349 
+					992: {
350 
+						// spaceBetween: 100,
351 
+					}
352 
+				},
353 
+				on: {
354 
+					init: function (swiper) {
355 
+						resolve("swiper_video init");
356 
+					},
357 
+					slideChangeTransitionEnd: function () {
358 
+						pauseAllVideos();
359 
+					},
360 
+				},
361 
+			});
362 
+		});
363 
+	}
364 
+
365 
+	function onLibraryLoaded() {
366 
+		setTimeout(()=>{
367 
+			onYouTubeIframeAPIReady();
368 
+		}, 1000);
369 
+	}
370 
+
371 
+	function onYouTubeIframeAPIReady() {
372 
+		// 循環創建播放器
373 
+		for (var i = 0; i < playerConfigs.length; i++) {
374 
+			var config = playerConfigs[i];
375 
+			players[i] = new YT.Player(config.containerId, {
376 
+				videoId: config.videoId,
377 
+				loop: 1,
378 
+				rel: 0,
379 
+				events: {
380 
+					'onReady': onPlayerReady,
381 
+					'onStateChange': onPlayerStateChange,
382 
+				},
383 
+			});
384 
+		}
385 
+	}
386 
+
387 
+	function onPlayerReady(event) {
388 
+		// 處理播放器準備好後的事件
389 
+		// event.target.mute(); // 靜音播放器
390 
+		// event.target.playVideo(); // 播放影片
391 
+	}
392 
+
393 
+	function onPlayerStateChange(event) {
394 
+		console.log(event.target.o.id)
395 
+		if (event.data == YT.PlayerState.PLAYING) {
396 
+			$(`#${event.target.o.id}`).parents(".video").find(".video__overlay").hide();
397 
+		}
398 
+	}
399 
+
400 
+	// 控制單個播放器播放
401 
+	function playVideo(playerIndex) {
402 
+		players[playerIndex].playVideo();
403 
+	}
404 
+
405 
+	// 控制單個播放器暫停
406 
+	function pauseVideo(playerIndex) {
407 
+		players[playerIndex].pauseVideo();
408 
+	}
409 
+
410 
+	// 控制單個播放器停止
411 
+	function stopVideo(playerIndex) {
412 
+		players[playerIndex].stopVideo();
413 
+	}
414 
+
415 
+	// 控制所有播放器播放
416 
+	function playAllVideos() {
417 
+		for (var i = 0; i < players.length; i++) {
418 
+			players[i].playVideo();
419 
+		}
420 
+	}
421 
+
422 
+	// 控制所有播放器暫停
423 
+	function pauseAllVideos() {
424 
+		for (var i = 0; i < players.length; i++) {
425 
+			players[i].pauseVideo();
426 
+		}
427 
+	}
428 
+
429 
+	// 控制所有播放器停止
430 
+	function stopAllVideos() {
431 
+		for (var i = 0; i < players.length; i++) {
432 
+			players[i].stopVideo();
433 
+		}
434 
+	}
435 
+
436 
+	// ====================  時間軸相關  ====================
437 
+
438 
+	// 踏上mRNA歷史軌跡 影片程序
439 
+	function swiperHandler_history() {
440 
+		return new Promise((resolve) => {
441 
+			resolve("swiper_history init");
442 
+			swiper_history = new Swiper(".history__swiper", {
443 
+				// Optional parameters
444 
+				autoplay: {
445 
+					delay: 10000,
446 
+					disableOnInteraction: false,
447 
+				},
448 
+				slidesPerView: 2,
449 
+				centeredSlides: true,
450 
+				allowTouchMove: true,
451 
+
452 
+
453 
+				// Navigation arrows
454 
+				navigation: {
455 
+					nextEl: ".history__swiper .swiper-button-next",
456 
+					prevEl: ".history__swiper .swiper-button-prev",
457 
+				},
458 
+				on: {
459 
+					init: function (swiper) {
460 
+
461 
+						resetTimelineAni();
462 
+						currentHistoryIdx = 0;
463 
+						setTimeout(()=>{
464 
+							autoPlayHistory(currentHistoryIdx);
465 
+						},1000);
466 
+					},
467 
+					transitionStart: function(swiper) {
468 
+						// console.log("transitionStart");
469 
+						resetTimelineAni();
470 
+					},
471 
+					slideChangeTransitionStart: function(swiper){
472 
+						// console.log("slideChangeTransitionStart");
473 
+						timelineAni();
474 
+					},
475 
+				},
476 
+				breakpoints: {
477 
+					992: {
478 
+						autoplay: false,
479 
+						centeredSlides: false,
480 
+						spaceBetween: 0,
481 
+						speed: 500,
482 
+						loop: false,
483 
+						slidesPerView: "auto",
484 
+						allowTouchMove: false,
485 
+						watchSlidesProgress: true,
486 
+						virtualTranslate: true,
487 
+						watchSlidesVisibility: true,
488 
+					}
489 
+				},
490 
+
491 
+			});
492 
+			// 解決 slidesPerView: "auto" 無法準確抓到最後一個的問題
493 
+			swiper_history.snapGrid = swiper_history.slidesGrid.slice(0);
494 
+			swiper_history.slideTo(0, 0)
495 
+		});
496 
+	}
497 
+
498 
+	function autoPlayHistory(idx) {
499 
+		swiper_history.slideTo(idx, 0)
500 
+		if(!isMobile) {
501 
+			if(historySlideTl) {
502 
+				clearInterval(historySlideTl);
503 
+			}
504 
+			historySlideTl = setInterval(()=>{
505 
+				if(idx < ($(".history .swiper-slide").length-1)) {
506 
+					idx+=1;
507 
+					swiper_history.slideTo(idx, 0);
508 
+				}
509 
+				else {
510 
+					idx = 0
511 
+					swiper_history.slideTo(idx, 0);
512 
+				}
513 
+				// console.log("idx: "+idx)
514 
+			}, 10000);
515 
+
516 
+		}
517 
+	}
518 
+
519 
+	function resetTimelineAni() {
520 
+		if($(window).width() > 992) {
521 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__item", { top:"4.8em", width: "13.5em" })
522 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__year", { top: "-2.5em", left: "-3.3em", width: "7em" })
523 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__year h3", { fontSize: "1.7em" }, 0)
524 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__branchline", { autoAlpha: 0, height: 0 }, 0)
525 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__desc", { autoAlpha: 0, y: "1em" }, 0)
526 
+		}else {
527 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__item", { top:"8.09em", width: "16em" })
528 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__year", { top: "-4em", left: "-3.8em", width: "9em" })
529 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__year h3", { fontSize: "2.1em" }, 0)
530 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__branchline", { autoAlpha: 0, height: 0 }, 0)
531 
+			gsap.set(".swiper-slide:not(.swiper-slide-active) .history__timeline__desc", { autoAlpha: 0, y: "1em" }, 0)
532 
+		}
533 
+
534 
+	}
535 
+
536 
+	function timelineAni() {
537 
+		if(activeTimelineTl) {
538 
+			activeTimelineTl.kill();
539 
+			animation = null;
540 
+		}
541 
+		if($(window).width() > 992) {
542 
+			activeTimelineTl = gsap.timeline();
543 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__item", { duration: 0.3, width: "22em" })
544 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year", { duration: 0.3, left: "1.1em", width: "9.5em" }, 0)
545 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__item", { duration: 0.3, top:0 })
546 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__branchline", { duration: 0.5, height: "7.5em", autoAlpha: 1 }, 0.3)
547 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year", { duration: 0.3, top: "-1.5em" }, 0.3)
548 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year h3", { duration: 0.3, fontSize: "2.4em" }, "-=0.4")
549 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__desc", { duration: 0.3, autoAlpha: 1, y: 0 }, "-=0.1")
550 
+		}else {
551 
+			activeTimelineTl = gsap.timeline();
552 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__item", { duration: 0.3, width: "31em" })
553 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year", { duration: 0.3, left: "2em", width: "13.5em" }, 0)
554 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__item", { duration: 0.3, top:0 })
555 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__branchline", { duration: 0.5, height: "11.5em", autoAlpha: 1 }, 0.3)
556 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year", { duration: 0.3, top: "-1.8em" }, 0.3)
557 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__year h3", { duration: 0.3, fontSize: "3.4em" }, "-=0.4")
558 
+			activeTimelineTl.to(".swiper-slide-active .history__timeline__desc", { duration: 0.3, autoAlpha: 1, y: 0 }, "-=0.1")
559 
+		}
560 
+
561 
+	}
562 
+
563 
+	// ====================  滑動動態  ====================
564 
+
565 
+	function startAni() {
566 
+		// gsap.to(".kv__pic", { duration: 0.5, scale:1 });
567 
+		gsap.to(".kv__copywriting", {
568 
+			duration: 0.5,
569 
+			x: 0,
570 
+			autoAlpha: 1,
571 
+			delay: 0.3,
572 
+		});
573 
+	}
574 
+
575 
+	function elementAni() {
576 
+		gsap.registerPlugin(ScrollTrigger);
577 
+
578 
+		ScrollTrigger.defaults({
579 
+			toggleActions: "restart pause resume pause",
580 
+			scroller: "body",
581 
+		});
582 
+
583 
+		function qaItemAni($el) {
584 
+			gsap.to($el, {
585 
+				scrollTrigger: {
586 
+					trigger: $el,
587 
+					start: "top bottom-=20%", // when the top of the trigger hits the top of the viewport
588 
+					end: "+=" + $($el).height() / 2, // end after scrolling 500px beyond the start
589 
+					scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
590 
+					// markers: true
591 
+				},
592 
+				duration: 1,
593 
+				y: 0,
594 
+				autoAlpha: 1,
595 
+			});
596 
+		}
597 
+
598 
+		qaItemAni(".qa__item-keypoints");
599 
+		qaItemAni(".qa__item-group");
600 
+		qaItemAni(".qa__item-positive");
601 
+		qaItemAni(".qa__item-child");
602 
+
603 
+		gsap.to(".brandvideo .mainvideo__video__frame", {
604 
+			scrollTrigger: {
605 
+				trigger: ".mainvideo .bg",
606 
+				start: "top center",
607 
+				end: "+=" + $(".mainvideo__video__frame").height(),
608 
+				scrub: 1,
609 
+			},
610 
+			duration: 1,
611 
+			scale: 1,
612 
+			autoAlpha: 1,
613 
+		});
614 
+
615 
+		gsap.to(".propagandavideo-pc", {
616 
+			scrollTrigger: {
617 
+				trigger: ".propagandavideo-pc",
618 
+				start: "top center",
619 
+				end: "+=" + $(".propagandavideo-pc").height() / 3,
620 
+				scrub: 1,
621 
+			},
622 
+			duration: 0.5,
623 
+			autoAlpha: 1,
624 
+			y: 0,
625 
+		});
626 
+
627 
+		gsap.to(".process__pic", {
628 
+			scrollTrigger: {
629 
+				trigger: ".process .bg",
630 
+				start: "top center",
631 
+				end: "+=" + $(".process__pic").height(),
632 
+				scrub: 1,
633 
+			},
634 
+			duration: 0.5,
635 
+			autoAlpha: 1,
636 
+		});
637 
+
638 
+		gsap.to(".game__head", {
639 
+			scrollTrigger: {
640 
+				trigger: ".game",
641 
+				start: "top center",
642 
+				end: "+=" + $(".game__head").height(),
643 
+				scrub: 1,
644 
+			},
645 
+			duration: 0.3,
646 
+			scale: 1,
647 
+			autoAlpha: 1,
648 
+			y: 0,
649 
+		});
650 
+
651 
+		gsap.to(".game__place", {
652 
+			scrollTrigger: {
653 
+				trigger: ".game",
654 
+				start: "top center",
655 
+				end: "+=" + $(".game__head").height(),
656 
+				scrub: 1,
657 
+			},
658 
+			duration: 0.3,
659 
+			scale: 1,
660 
+			autoAlpha: 1,
661 
+			y: 0,
662 
+			delay: 0.2,
663 
+		});
664 
+	}
665 
+
666 
+	function scrollToSection() {
667 
+		$(".header__nav__item").on("click", function (e) {
668 
+			e.preventDefault();
669 
+			let anchor  =  $(this).data("anchor");
670 
+
671 
+			let target = "#" + anchor;
672 
+			console.log("target: " + target);
673 
+
674 
+			$(".header__nav__item").removeClass("active");
675 
+			$(".header__nav__item-"+anchor).addClass("active");
676 
+
677 
+			$("html, body").animate({
678 
+				scrollTop: $(target).offset().top - $(".header").outerHeight() - 50,
679 
+			});
680 
+
681 
+			if (windowWidth < 992) {
682 
+				closeMenu();
683 
+			}
684 
+		});
685 
+	}
686 
+
687 
+	// 偵測滾動到哪一個section
688 
+	function detectScrollSection() {
689 
+
690 
+			const scrollPosition = !isMobile ? $(window).scrollTop() + headerH : $(window).scrollTop();
691 
+			const windowH = $(window).height();
692 
+			const bodyH = $("body").height();
693 
+			let tempId = null;
694 
+			let isBlankSpace = true;
695 
+
696 
+			// console.log("windowH: "+windowH);
697 
+			// console.log("bodyH: "+bodyH);
698 
+			// console.log("scrollPosition: "+scrollPosition);
699 
+			// console.log("headerH: "+headerH);
700 
+
701 
+		if(scrollPosition < (bodyH - windowH)) {
702 
+			section.each(function(idx, section) {
703 
+				const sectionTop = $(section).offset().top;
704 
+				const sectionBottom = sectionTop + $(section).height();
705 
+				const sectionH = $(section).outerHeight();
706 
+				let tempBlankSpace = (windowH - sectionH) / 2
707 
+				if(tempBlankSpace < 0 && !isMobile) {
708 
+					isBlankSpace = false
709 
+				}
710 
+
711 
+				if(isMobile) {
712 
+					isBlankSpace = false
713 
+				}
714 
+
715 
+				let blankSpace = isBlankSpace ? tempBlankSpace : headerH;
716 
+				// console.log("tempBlankSpace: "+tempBlankSpace)
717 
+				// console.log("isBlankSpace: "+isBlankSpace)
718 
+				// console.log("blankSpace: "+blankSpace)
719 
+
720 
+
721 
+				if(scrollPosition >= (sectionTop - blankSpace) && scrollPosition < (sectionBottom - blankSpace))  {
722 
+					// console.log("blankSpace: "+blankSpace)
723 
+					tempId = section.id;
724 
+					if(tempId === "history") {
725 
+						tempId = "understand";
726 
+					}
727 
+					if(currentId !== tempId) {
728 
+						currentId = tempId;
729 
+						console.log("focus: "+currentId);
730 
+						$(".header__nav__item").removeClass("active");
731 
+						$(".header__nav__item-"+currentId).addClass("active");
732 
+					}
733 
+				}
734 
+
735 
+
736 
+			});
737 
+
738 
+		}else {
739 
+			tempId = "moreref";
740 
+			if(currentId !== tempId) {
741 
+				currentId = tempId;
742 
+				console.log("focus: "+currentId);
743 
+				$(".header__nav__item").removeClass("active");
744 
+				$(".header__nav__item-"+currentId).addClass("active");
745 
+			}
746 
+		}
747 
+
748 
+
749 
+	}
750 
+
751 
+	{
752 
+		$(document).ready(function () {
753 
+			init();
754 
+		});
755 
+	}
756 
+
757 
+	//public
758 
+	return {
759 
+	};
760 
+};
761 
+
762 
+var main = new main();

+ 104
- 0
src/fe/mrna/js/tealiumTracking.js Wyświetl plik 

@@ -0,0 +1,104 @@
1 
+tealiumTracking = function () {
2 
+    //private menbers
3 
+    let currentSection = null;
4 
+
5 
+
6 
+    //private methods
7 
+    function init() {
8 
+        console.log('tealiumTracking is loaded.');
9 
+
10 
+        setTimeout(()=>{
11 
+            updateCurrentSection();
12 
+        }, 500);
13 
+
14 
+        $(".game__box__go").on("click", function(){
15 
+            var fc = new CustomEvent("form_start_js",{
16 
+                detail: {
17 
+                    form_name: "spikevax|dtc|questionnaire form",
18 
+                    form_type: "questionnaire|dynamic form"
19 
+                }
20 
+            }); document.dispatchEvent(fc)
21 
+            // console.log("Tealiun game__box__go")
22 
+        });
23 
+
24 
+    }
25 
+
26 
+    function updateCurrentSection() {
27 
+        $(window).scroll(function() {
28 
+            // 獲取當前捲動位置
29 
+            const scrollPosition = $(window).scrollTop();
30 
+            const windowH = $(window).outerHeight();
31 
+            const bodyH = $("body").outerHeight();
32 
+
33 
+            // 逐個檢查每個 section 的位置
34 
+            $('section').each(function() {
35 
+                const section = $(this);
36 
+                // console.log(section)
37 
+                const sectionTop = section.offset().top;
38 
+                const sectionBottom = sectionTop + section.outerHeight();
39 
+
40 
+                // 檢查是否在該 section 的範圍內
41 
+                if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
42 
+                    let sectionId = section.attr('id');
43 
+
44 
+                    if(!isMobile) {
45 
+                        if(scrollPosition >= (bodyH - windowH - 300)) {
46 
+                            sectionId = 'goclinic';
47 
+                        }
48 
+                    }else {
49 
+                        if(scrollPosition >= (bodyH - windowH - 50)) {
50 
+                            sectionId = 'goclinic';
51 
+                        }
52 
+                    }
53 
+
54 
+                    if(!currentSection) {
55 
+                        currentSection = sectionId;
56 
+                        // console.log('目前在 ' + currentSection + ' 部分。');
57 
+                        jQuery("document").trigger( "virtualPageView" );
58 
+                    }
59 
+
60 
+                    if(currentSection !== sectionId) {
61 
+                        currentSection = sectionId;
62 
+                        // console.log('目前在 ' + currentSection + ' 部分。');
63 
+                        jQuery("document").trigger( "virtualPageView" );
64 
+                    }
65 
+
66 
+                    // 在這裡可以執行其他你想要的操作
67 
+                    // console.log('目前在 ' + sectionId + ' 部分。');
68 
+
69 
+                }
70 
+            });
71 
+        });
72 
+    }
73 
+
74 
+    function triggerTealiumFormComplete(_resltText) {
75 
+        var fc = new CustomEvent("form_complete_js",{
76 
+            detail: {
77 
+                form_name: "spikevax|dtc|questionnaire form",
78 
+                form_type: "questionnaire|dynamic form",
79 
+                form_result: _resltText
80 
+            }
81 
+        }); document.dispatchEvent(fc)
82 
+        // console.log(_resltText)
83 
+    }
84 
+
85 
+
86 
+    {
87 
+        $(document).ready(function () {
88 
+            init();
89 
+        });
90 
+    }
91 
+
92 
+    //public
93 
+    return {
94 
+        triggerTealiumFormComplete: function(_resltText){
95 
+            triggerTealiumFormComplete(_resltText)
96 
+        }
97 
+    };
98 
+};
99 
+
100 
+var tealiumTracking = new tealiumTracking();
101 
+
102 
+
103 
+
104 
+

+ 234
- 0
src/fe/mrna/js/utlis.js Wyświetl plik 

@@ -0,0 +1,234 @@
1 
+const PRE__HOST = 'www.our-work.com.tw/demosite/2023/2023-moderna/2023-educationalSite'; // 未定
2 
+const PRO__HOST = 'tafm-mrna.com.tw'; // 未定
3 
+// const _URL = location.hostname;
4 
+// const FB_APP_ID = (_URL.indexOf(PRO__HOST) !== -1) ? '1360448468040778' : '3413017992314622';
5 
+// const LIFF_ID = (_URL.indexOf(PRO__HOST) !== -1) ? '1653834490-MA9W9YGk' : '1653780788-2lglgAqW';
6 
+let API__DOMAIN = '';
7 
+
8 
+/*********************************************/
9 
+
10 
+function gtag_pageView(_key) {
11 
+  //ga('send', 'pageview', key);
12 
+  gtag('config', GTAG_TRACKING_ID, {
13 
+    'page_title': _key,
14 
+    'page_path': '/' + _key
15 
+  });
16 
+
17 
+  // console.log("gtag_pageView: " + _key);
18 
+}
19 
+
20 
+function gtag_ButtonClick(_key) {
21 
+  //ga('send', 'event', 'Button', 'Click', key);
22 
+  gtag('event', 'Click', { 'event_category': 'Button', 'event_label': _key });
23 
+
24 
+  // console.log("gtag_ButtonClick: " + _key);
25 
+}
26 
+
27 
+function setDefault(_textbox, _value) { // depend on jQuery
28 
+  $(_textbox).val(_value).css({ opacity: .4 });
29 
+  $(_textbox).focus(
30 
+    function () {
31 
+      if ($(this).val() == _value) {
32 
+        $(this).val('').css({ opacity: 1 });
33 
+      }
34 
+    })
35 
+    .blur(function () {
36 
+      if ($(this).val() == '') {
37 
+        $(this).val(_value).css({ opacity: .4 });
38 
+      }
39 
+    });
40 
+}
41 
+
42 
+function setParameterByName(name, value, url) {
43 
+  if (!url) url = window.location.href;
44 
+  var re = new RegExp("([?|&])" + name + "=.*?(&|$)", "i");
45 
+  separator = url.indexOf('?') !== -1 ? "&" : "?";
46 
+  if (url.match(re)) {
47 
+    return url.replace(re, '$1' + name + "=" + value + '$2');
48 
+  }
49 
+  else {
50 
+    return url + separator + name + "=" + value;
51 
+  }
52 
+}
53 
+
54 
+function getParameterByName(name, url) {
55 
+  if (!url) url = decodeURIComponent(window.location.href);
56 
+  name = name.replace(/[\[\]]/g, "\\$&");
57 
+  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
58 
+    results = regex.exec(url);
59 
+  if (!results) return '';
60 
+  if (!results[2]) return '';
61 
+  return decodeURIComponent(results[2].replace(/\+/g, " "));
62 
+}
63 
+
64 
+function POST(theUrl, theData) {
65 
+  const _url = API__DOMAIN + theUrl;
66 
+  console.log('_url', _url);
67 
+  console.log('theData', theData);
68 
+  return fetch(_url, {
69 
+    method: 'POST',
70 
+    headers: {
71 
+      'Content-Type': 'application/x-www-form-urlencoded'
72 
+    },
73 
+    body: new URLSearchParams(theData),
74 
+  })
75 
+  .then((response) => {
76 
+    return response.json();
77 
+  }).then((jsonData) => {
78 
+    const success = jsonData.success || jsonData.succ || false ;
79 
+    const msg = jsonData.msg || jsonData.err || '' ;
80 
+    if (!success) {
81 
+      throw new Error(msg);
82 
+    }
83 
+    return jsonData;
84 
+  }).catch((err) => {
85 
+    throw new Error(err);
86 
+  });
87 
+}
88 
+
89 
+function GET(theUrl, theData) {
90 
+  const _url = API__DOMAIN + theUrl +'?' + new URLSearchParams(theData).toString();
91 
+  return fetch(_url, {})
92 
+    .then((response) => {
93 
+      return response.json();
94 
+    }).then((jsonData) => {
95 
+      const success = jsonData.success || jsonData.succ || false ;
96 
+      const msg = jsonData.msg || jsonData.err || '' ;
97 
+      if (!success) {
98 
+        throw new Error(msg);
99 
+      }
100 
+      return jsonData;
101 
+    }).catch((err) => {
102 
+      throw new Error(err);
103 
+  });
104 
+}
105 
+
106 
+function loadScript(url) {
107 
+  return new Promise((resolve, reject) => {
108 
+    const script = document.createElement('script');
109 
+    script.src = url;
110 
+    script.onload = resolve;
111 
+    script.onerror = reject;
112 
+    document.head.appendChild(script);
113 
+  });
114 
+}
115 
+
116 
+function loadImage(src) {
117 
+  return new Promise((resolve, reject) => {
118 
+    const img = new Image();
119 
+    img.onload = () => resolve(img);
120 
+    img.onerror = reject;
121 
+    img.src = src;
122 
+  });
123 
+}
124 
+
125 
+async function loadImagesAndPerformAction(imageUrls, action) {
126 
+  try {
127 
+    const imagePromises = imageUrls.map((url) => loadImage(url));
128 
+    const images = await Promise.all(imagePromises);
129 
+    // 所有圖片載入完成後，執行後續動作
130 
+    action(images);
131 
+  } catch (error) {
132 
+    console.error("圖片載入錯誤：", error);
133 
+  }
134 
+}
135 
+
136 
+
137 
+/*********************************/
138 
+
139 
+
140 
+var isMobile = false;
141 
+var isIE = false;
142 
+
143 
+utlis = function () {
144 
+
145 
+  //private menbers
146 
+  //TEST Data
147 
+  let lineUserId = '';
148 
+  let isPRE = false;
149 
+
150 
+  //private methods
151 
+  function init() {
152 
+    console.log('utlis loaded', window.location.href);
153 
+
154 
+    // window.alert = function () {
155 
+    //   var _arg0 = arguments[0];
156 
+    //   // console.log(_arg0);
157 
+    //   var _alert = $('<div class="custom__alert"><div class="custom__alert__container"><div class="custom__alert__content"><div class="custom__alert__text"><p></p></div><div class="simple__btn custom__alert__btn"><p>確認</p></div></div></div></div>');
158 
+    //   _alert.appendTo('body');
159 
+    //   _alert.find('.custom__alert__text p').html(_arg0);
160 
+    //   _alert.find('.custom__alert__btn').click(function (e) {
161 
+    //     e.preventDefault();
162 
+    //     $('.custom__alert').hide();
163 
+    //   });
164 
+    // }
165 
+  }
166 
+
167 
+  function getLineUserId(_callback) {
168 
+    if (getParameterByName('lineUserId') !== '') {
169 
+      lineUserId = getParameterByName('lineUserId');
170 
+      console.log('has lineUserId:', lineUserId);
171 
+      _callback(lineUserId);
172 
+    } else {
173 
+
174 
+      console.log('未能讀取您的 Line Id，請退出後重試');
175 
+      _callback(false);
176 
+    }
177 
+    console.log('utlis getLineUserId:', lineUserId);
178 
+
179 
+  }
180 
+
181 
+  //constructor
182 
+
183 
+  {
184 
+    if ($('html').is('.ie6, .ie7, .ie8')) {
185 
+      isIE = true;
186 
+      // alert('.ie6, .ie7, .ie8');
187 
+    }
188 
+
189 
+    var _URL = location.hostname;
190 
+    var _host;
191 
+
192 
+
193 
+    if (_URL.indexOf(PRE__HOST) != -1) {
194 
+      _host = PRE__HOST;
195 
+      isPRE = true;
196 
+
197 
+    } else if (_URL.indexOf(PRO__HOST) != -1) {
198 
+      _host = PRO__HOST;
199 
+    } else {
200 
+      _host = PRE__HOST;
201 
+      isPRE = true;
202 
+    }
203 
+
204 
+    API__DOMAIN = 'https://' + _host + '/';
205 
+    console.log('API__DOMAIN : ' + API__DOMAIN);
206 
+
207 
+    $(document).ready(function () {
208 
+      // var vConsole = new VConsole();
209 
+
210 
+      if ($('body').width() <= 992) {
211 
+        isMobile = true;
212 
+      } else {
213 
+        isMobile = false;
214 
+      }
215 
+
216 
+      init();
217 
+
218 
+      // if(isPRE && VConsole){
219 
+      //   var vConsole = new VConsole();
220 
+      // }
221 
+    });
222 
+  }
223 
+
224 
+  //public
225 
+
226 
+  return {
227 
+    getLineUserId: function (_callback) {
228 
+      getLineUserId(_callback);
229 
+    }
230 
+    ,isPRE
231 
+  }
232 
+}
233 
+
234 
+utlis = new utlis();

+ 11
- 0
src/fe/mrna/lib/ScrollTrigger.min.js
Plik diff jest za duży
Wyświetl plik


+ 7
- 0
src/fe/mrna/lib/bootstrap.min.js
Plik diff jest za duży
Wyświetl plik


+ 12
- 0
src/fe/mrna/lib/cookie.js Wyświetl plik 

@@ -0,0 +1,12 @@
1 
+function SetCookie(name,value)
2 
+{
3 
+    var Days = 30;
4 
+    var exp  = new Date();
5 
+    exp.setTime(exp.getTime() + Days*24*60*60*1000);
6 
+    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
7 
+}
8 
+function getCookie(name)
9 
+{
10 
+    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
11 
+    if(arr != null) return unescape(arr[2]); return null;
12 
+}

+ 11
- 0
src/fe/mrna/lib/gsap.min.js
Plik diff jest za duży
Wyświetl plik


+ 3
- 0
src/fe/mrna/lib/iframe_api.js Wyświetl plik 

@@ -0,0 +1,3 @@
1 
+var scriptUrl = 'https:\/\/www.youtube.com\/s\/player\/16f9263d\/www-widgetapi.vflset\/www-widgetapi.js';try{var ttPolicy=window.trustedTypes.createPolicy("youtube-widget-api",{createScriptURL:function(x){return x}});scriptUrl=ttPolicy.createScriptURL(scriptUrl)}catch(e){}var YT;if(!window["YT"])YT={loading:0,loaded:0};var YTConfig;if(!window["YTConfig"])YTConfig={"host":"https://www.youtube.com"};
2 
+if(!YT.loading){YT.loading=1;(function(){var l=[];YT.ready=function(f){if(YT.loaded)f();else l.push(f)};window.onYTReady=function(){YT.loaded=1;var i=0;for(;i<l.length;i++)try{l[i]()}catch(e){}};YT.setConfig=function(c){var k;for(k in c)if(c.hasOwnProperty(k))YTConfig[k]=c[k]};var a=document.createElement("script");a.type="text/javascript";a.id="www-widgetapi-script";a.src=scriptUrl;a.async=true;var c=document.currentScript;if(c){var n=c.nonce||c.getAttribute("nonce");if(n)a.setAttribute("nonce",
3 
+n)}var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})()};

+ 2
- 0
src/fe/mrna/lib/jquery-3.6.4.min.js
Plik diff jest za duży
Wyświetl plik


+ 1
- 0
src/fe/mrna/lib/jquery.nicescroll.min.js
Plik diff jest za duży
Wyświetl plik


+ 2
- 0
src/fe/mrna/lib/lenis.min.js
Plik diff jest za duży
Wyświetl plik


+ 14
- 0
src/fe/mrna/lib/swiper.min.js
Plik diff jest za duży
Wyświetl plik


+ 10
- 0
src/fe/mrna/lib/vconsole.min.js
Plik diff jest za duży
Wyświetl plik


+ 6
- 0
src/fe/mrna/robots.txt Wyświetl plik 

@@ -0,0 +1,6 @@
1 
+# https://tafm-mrna.com.tw/
2 
+
3 
+User-agent: *
4 
+Allow: /
5 
+
6 
+Sitemap:https://tafm-mrna.com.tw/sitemap.xml

+ 38
- 0
src/fe/mrna/share/17.html Wyświetl plik 

@@ -0,0 +1,38 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
8 
+    <meta name="format-detection" content="telephone=no">
9 
+
10 
+    <title>迎擊新冠病毒，你的抗體足夠且有效嗎？</title>
11 
+    <meta name="description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
12 
+    <meta name="keywords" content="" />
13 
+
14 
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" sizes="32x32" />
15 
+    <link rel="image_src" href="https://tafm-mrna.com.tw/images/share-1.png" />
16 
+    <meta property="fb:app_id" content="" />
17 
+    <meta property="og:image:width" content="1200" />
18 
+    <meta property="og:image:height" content="630" />
19 
+    <meta property="og:title" content="迎擊新冠病毒，你的抗體足夠且有效嗎？" />
20 
+    <meta property="og:description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
21 
+    <meta property="og:type" content="website" />
22 
+    <meta property="og:url" content="" />
23 
+    <meta property="og:image" content="https://tafm-mrna.com.tw/images/share-1.png" />
24 
+
25 
+</head>
26 
+
27 
+<body>
28 
+
29 
+    <script>
30 
+        window.onload = function () {
31 
+            document.location.href = '../';
32 
+        }
33 
+    </script>
34 
+
35 
+
36 
+</body>
37 
+
38 
+</html>

+ 38
- 0
src/fe/mrna/share/30.html Wyświetl plik 

@@ -0,0 +1,38 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
8 
+    <meta name="format-detection" content="telephone=no">
9 
+
10 
+    <title>迎擊新冠病毒，你的抗體足夠且有效嗎？</title>
11 
+    <meta name="description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
12 
+    <meta name="keywords" content="" />
13 
+
14 
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" sizes="32x32" />
15 
+    <link rel="image_src" href="https://tafm-mrna.com.tw/images/share-3.png" />
16 
+    <meta property="fb:app_id" content="" />
17 
+    <meta property="og:image:width" content="1200" />
18 
+    <meta property="og:image:height" content="630" />
19 
+    <meta property="og:title" content="迎擊新冠病毒，你的抗體足夠且有效嗎？" />
20 
+    <meta property="og:description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
21 
+    <meta property="og:type" content="website" />
22 
+    <meta property="og:url" content="" />
23 
+    <meta property="og:image" content="https://tafm-mrna.com.tw/images/share-3.png" />
24 
+
25 
+</head>
26 
+
27 
+<body>
28 
+
29 
+    <script>
30 
+        window.onload = function () {
31 
+            document.location.href = '../';
32 
+        }
33 
+    </script>
34 
+
35 
+
36 
+</body>
37 
+
38 
+</html>

+ 38
- 0
src/fe/mrna/share/52.html Wyświetl plik 

@@ -0,0 +1,38 @@
1 
+<!DOCTYPE html>
2 
+<html lang="zh-Hant-TW">
3 
+
4 
+<head>
5 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
8 
+    <meta name="format-detection" content="telephone=no">
9 
+
10 
+    <title>迎擊新冠病毒，你的抗體足夠且有效嗎？</title>
11 
+    <meta name="description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
12 
+    <meta name="keywords" content="" />
13 
+
14 
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" sizes="32x32" />
15 
+    <link rel="image_src" href="https://tafm-mrna.com.tw/images/share-2.png" />
16 
+    <meta property="fb:app_id" content="" />
17 
+    <meta property="og:image:width" content="1200" />
18 
+    <meta property="og:image:height" content="630" />
19 
+    <meta property="og:title" content="迎擊新冠病毒，你的抗體足夠且有效嗎？" />
20 
+    <meta property="og:description" content="對抗新冠肺炎應隨不同變異株施打疫苗以確保體內有足夠且有效的抗體" />
21 
+    <meta property="og:type" content="website" />
22 
+    <meta property="og:url" content="" />
23 
+    <meta property="og:image" content="https://tafm-mrna.com.tw/images/share-2.png" />
24 
+
25 
+</head>
26 
+
27 
+<body>
28 
+
29 
+    <script>
30 
+        window.onload = function () {
31 
+            document.location.href = '../';
32 
+        }
33 
+    </script>
34 
+
35 
+
36 
+</body>
37 
+
38 
+</html>

+ 16
- 0
src/fe/mrna/sitemap.xml Wyświetl plik 

@@ -0,0 +1,16 @@
1 
+<?xml version="1.0" encoding="UTF-8"?>
2 
+<urlset
3 
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
4 
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5 
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
6 
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
7 
+
8 
+
9 
+<url>
10 
+  <loc>https://tafm-mrna.com.tw/</loc>
11 
+  <lastmod>2023-10-03T11:54:01+00:00</lastmod>
12 
+  <priority>1.00</priority>
13 
+</url>
14 
+
15 
+
16 
+</urlset>