diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss
index c149915..177fdde 100644
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@@ -233,6 +233,7 @@ body{
 }
 .colorbox{
   background-color:#e7e8ea;
+  padding-top: 1em;
 }
 .group{
   width: 100%;
@@ -351,7 +352,7 @@ body{
 .onesection{
   color: #fff;
   @media(max-width:$screen-xs){
-    padding: 0 15px;
+    padding:0;
   }
 }
 .onepicture{
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 53e63fe..5f6c2eb 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -157,13 +157,13 @@ a#content{
     }
   }
   @media screen and (min-width: 769px){
-    height: 100vh;
+    height: 100vh!important;
   }
   @media screen and(min-width:$screen-xs) and (max-width:768px){
-    height: 1000px;
+    height: 1000px!important;
   }
     @media screen and (max-width: $screen-xs){
-      height: 720px;
+      height: 720px!important;
     }
   }
 }
diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss
index 52bb3d8..b6f42e7 100644
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@@ -12,6 +12,7 @@
 .w-ba-banner {
   position: relative;
   z-index: 0;
+  height: auto!important;
 
   .cursor {
     cursor: pointer;
@@ -436,7 +437,6 @@ ul.button-mid{
   .w-ba-banner__caption {
     color: $theme-color-main;
     z-index: 200;
-    padding: 4em;
 
     h2 {
       font-family: $main-font;
@@ -451,7 +451,7 @@ ul.button-mid{
   }
   @media(max-width: $screen-sm) {
     .ad-overlay {
-      padding: 0.5em 1em;
+      padding: 1.5em 1em;
       position: relative;
       background:#72bcad;
       h3 { font-size: 1em; }
@@ -588,4 +588,4 @@ ul.button-mid{
   position: absolute;
   width: 100%;
   height: 100%;
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss
index 7dac6e3..7b4598c 100644
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
@@ -78,9 +78,8 @@
     }
   }
 }
-
-// Widget-1
-.widget-announcement-1 {
+// Widget-0
+.widget-announcement-0 {
   .w-annc__postdate-wrap{
     color: #fff!important;
   }
@@ -157,6 +156,159 @@
       }
     }
 
+  }
+  .card{
+    position: absolute;
+    z-index: 2;
+    margin:0 0.5em;
+    padding: 20px 25px;
+    bottom: 0;
+    left: 0;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #ffffff00), color-stop(89%, #00000080));
+    background-image: linear-gradient(
+    180deg
+    , #ffffff00 32%, #00000080 89%);
+  }
+  .card:before{
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 8px;
+    background-color: #288E8E;
+    z-index: -1;
+    -webkit-transition: height .6s;
+    transition: height .6s;
+  }
+}
+// Widget-1
+.widget-announcement-1 {
+  .w-annc__postdate-wrap{
+    color: #fff!important;
+  }
+  .w-annc__status-wrap{
+    color: #fff!important;
+  }
+  .w-annc__category-wrap{
+    color: #fff!important;
+  }
+
+  .w-annc__title{
+    color: #fff;
+    @media(min-width:1920px){
+      font-size: 1.6rem!important;
+    }
+  }
+  .w-annc__subtitle{
+    color: #fff;
+    font-size: 1rem;
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 0;
+    opacity: 0;
+    -webkit-transition: max-height .6s,opacity .6s;
+    transition: max-height .6s,opacity .6s;
+    @media(min-width:1920px){
+      font-size: 1.2em;
+    }
+  }
+  .w-annc__img-wrap {
+    height: 25em;
+    margin: 0.5em;
+    @media(max-width:$screen-xs){
+      height:20em;
+    }
+    @media(min-width:1920px){
+      height: 30em;
+    }
+    img{
+      width: auto!important;
+      height: 100%!important;
+      margin: 0 !important;
+      max-width: fit-content;
+    }
+  }
+  .w
+
+  .w-annc__title {
+    font-family: $main-font;
+    line-height: 1.3;
+    font-size: 1.2rem;
+  }
+  .w-annc__list{
+    @media(min-width:$screen-xs){
+      display: grid;
+      grid-template: auto auto/repeat(12, 1fr);
+      grid-gap: 0 10px;
+    }
+    li{
+      &:hover{
+          .card:before{
+            height:100%;
+          }
+            .w-annc__subtitle{
+              max-height: 100px;
+              opacity: 1;
+            }
+      }
+      position: relative;
+      @media only screen and (max-width: 769px) and(min-width:500px){
+       flex: 0 0 50%;
+      }
+      &:nth-child(1){
+        grid-area: 1 / 1 / 3 / 5;
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+        -ms-grid-row-span: 3;
+        -ms-grid-column-span: 7;
+        .w-annc__img-wrap{
+          height: 53em;
+        }
+        @media(max-width:$screen-xs){
+          .w-annc__img-wrap{
+            height: 40em;
+          }
+        }
+      }
+      &:nth-child(2){
+        grid-area: 1 / 5 / 2 / 9;
+       -ms-grid-row: 1;
+       -ms-grid-column: 9;
+       -ms-grid-row-span: 1;
+       -ms-grid-column-span: 7;
+      }
+      &:nth-child(3){
+        grid-area: 1 / 9 / 2 / 13;
+       -ms-grid-row: 1;
+       -ms-grid-column: 17;
+       -ms-grid-row-span: 1;
+       -ms-grid-column-span: 7;
+      }
+      &:nth-child(4){
+        grid-area: 2 / 5 / 3 / 9;
+        -ms-grid-row: 3;
+        -ms-grid-column: 9;
+        -ms-grid-row-span: 1;
+        -ms-grid-column-span: 7;
+      }
+      &:nth-child(5){
+        grid-area: 2 / 9 / 3 / 13;
+       -ms-grid-row: 3;
+       -ms-grid-column: 17;
+       -ms-grid-row-span: 1;
+       -ms-grid-column-span: 7;
+      }
+    }
+
+
+
+
   }
   .card{
     position: absolute;
diff --git a/home/index.html.erb b/home/index.html.erb
index 1e5a49a..2792709 100644
--- a/home/index.html.erb
+++ b/home/index.html.erb
@@ -24,9 +24,11 @@
           <section class="layout-content-box box " data-pp="4"></section>
           <section class="layout-content-box box " data-pp="1"></section>
         </div>
-        
-        <div class="row colorbox">
-         <section class="extra-box col-sm-12" data-pp="33"></section>
+
+        <div class="colorbox">
+          <div class=" row">
+           <section class="extra-box col-sm-12" data-pp="33"></section>
+         </div>
         </div>
         <div class="layout-content-box2 colorbox container row">
           <section class="body-banner line" data-pp="8"></section>
diff --git a/home/page.html.erb b/home/page.html.erb
index eb3f586..83b7a8a 100644
--- a/home/page.html.erb
+++ b/home/page.html.erb
@@ -10,7 +10,7 @@
 
   <div class="layout-content">
   <section class="layout-slide no-print single-child-datapp" data-pp="301"></section>
-    <div class="layout-content-inner pagecontainer inner-page">
+  <div class="layout-content-inner pagecontainer inner-page">
     <div class="sitemenu">
       <div class="sitemenu-wrap container" data-pp="400"></div>
     </div>
@@ -27,11 +27,12 @@
       <main id="main-content" class="main-content" data-content="true">
         <%= yield %>
       </main>
+      </section>
+      <div class="extra" data-pp="900"></div>
       <%= render_every_page_sharer %>
       <div class="extra" data-pp="700"></div>
-      </section>
-      </div>
-      <div class="extra" data-pp="800"></div>
+    </div>
+    <div class="extra" data-pp="800"></div>
     </div>
   </div>
   <%= render_footer %>
diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb
index d5c4f38..d20a83f 100644
--- a/modules/ad_banner/_ad_banner_widget1.html.erb
+++ b/modules/ad_banner/_ad_banner_widget1.html.erb
@@ -32,7 +32,7 @@
   <div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
     <li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
   </div>
-  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
+  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
   <ul class="button-mid">
     <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
     <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
diff --git a/modules/ad_banner/_ad_banner_widget2_video.html.erb b/modules/ad_banner/_ad_banner_widget2_video.html.erb
index 5b94332..6751a95 100644
--- a/modules/ad_banner/_ad_banner_widget2_video.html.erb
+++ b/modules/ad_banner/_ad_banner_widget2_video.html.erb
@@ -26,7 +26,7 @@
   </div>
   <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
   <div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
-  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
+  <ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
   <ul class="button-mid">
     <i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
     <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
diff --git a/modules/announcement/_annc_widget0.html.erb b/modules/announcement/_annc_widget0.html.erb
new file mode 100644
index 0000000..3a4acd0
--- /dev/null
+++ b/modules/announcement/_annc_widget0.html.erb
@@ -0,0 +1,32 @@
+<div class="w-annc  widget-announcement-0">
+  <h3 class="w-annc__widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <ul class="w-annc__list" data-level="0" data-list="announcements">
+    <li class="w-annc__item">
+      <div class="w-annc__img-wrap bullseye">
+        <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
+      <div class="card">
+        <div class="w-annc__meta">
+          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+            <span class="w-annc__status label status {{status-class}}">{{status}}</span>
+          </span>
+          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+            <span class="w-annc__postdate">{{postdate}}</span>
+          </span>
+          <span class="w-annc__category-wrap">
+              <span class="w-annc__category">{{category}}</span>
+          </span>
+          </div>
+          <h4 class="w-annc__entry-title">
+          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+          </h4>
+          <p class="w-annc__subtitle">{{subtitle}}</p>
+      </div>
+    </li>
+  </ul>
+  <div class="w-annc__more-wrap clearfix">
+    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
+  </div>
+</div>
diff --git a/modules/announcement/info.json b/modules/announcement/info.json
index a3fe1bf..4c35dd3 100644
--- a/modules/announcement/info.json
+++ b/modules/announcement/info.json
@@ -138,10 +138,18 @@
     }
   ],
   "widgets": [
+    {
+      "filename": "annc_widget0",
+      "name": {
+        "zh_tw": "0. 標準圖文四張 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
+        "en": "0. Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
+      },
+      "thumbnail": "annc_widget1_thumbs.png"
+    },
     {
       "filename": "annc_widget1",
       "name": {
-        "zh_tw": "1. 標準圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
+        "zh_tw": "1. 標準圖文五張 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
         "en": "1. Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
       },
       "thumbnail": "annc_widget1_thumbs.png"