diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..63f7e31
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/assets/.DS_Store b/assets/.DS_Store
new file mode 100644
index 0000000..f042f8b
Binary files /dev/null and b/assets/.DS_Store differ
diff --git a/assets/images/design_thumb.png b/assets/images/design_thumb.png
new file mode 100644
index 0000000..1dd9a0c
Binary files /dev/null and b/assets/images/design_thumb.png differ
diff --git a/assets/images/headerbanner.jpg b/assets/images/headerbanner.jpg
new file mode 100644
index 0000000..459a014
Binary files /dev/null and b/assets/images/headerbanner.jpg differ
diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index 89dd882..39f187a 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -1,5 +1,5 @@
 ;(function($, win, undefined) {
-  // ECMAScript 5 嚴格模式 
+  // ECMAScript 5 嚴格模式
   'use strict';
 
   // 初始函數: 把所有的程式碼都包在init裡面，方便在之後的jQuery ready 函數裡一次呼叫
@@ -85,7 +85,7 @@
         //       .removeClass(iconUp)
         //       .addClass(iconDown);
 
-            
+
         //     // 換掉目前選項的icon
         //     $li
         //       .find('> i')
@@ -201,15 +201,15 @@
             }
           });
         },
-        
+
       },
 
-     
+
 
       // 移除行動版下拉選單
       removeDropdown: function() {
         var $nav = $('#main-nav');
-  
+
         $nav
           .find('.menu-drop')
           .remove();
@@ -263,7 +263,7 @@
         });
       },
 
-      // Multi-column layout, passing ID or class string as parameters and a 
+      // Multi-column layout, passing ID or class string as parameters and a
       // Bootstrap col class for full width, eg: col-md-12
       setColumn: function(leftCol, rightCol, columnCls) {
         var $leftCol = $(leftCol);
@@ -290,7 +290,7 @@
 
         $menu.find('ul[data-menu-level="1"]').parent().addClass('mobile-menu1');
         $menu.find('ul[data-menu-level="2"]').parent().addClass('mobile-menu2');
-    
+
         var $caret1 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-1 fa fa-chevron-down"></i></span>');
         var $caret2 = $('<span class="menu-drop"><i class="dropdown-toggle-icon level-2 fa fa-chevron-down"></i></span>');
 
@@ -302,7 +302,7 @@
         // 檢查是否已經有dropdown-toggle-icon這個元素，才不會在resize事件中重覆新增
           if ($('.has-dropdown.level-1 .menu-drop').length < 1) {
             $('.mobile-menu1').append($caret1);
-          
+
 
         // 如果有第三層選單，新增對應的類別到parent元素上
           $('.nav-level-2')
@@ -317,7 +317,7 @@
           e.preventDefault();
           $('.mobile-menu').toggleClass('active');
           $('body').toggleClass('noscroll');
-          
+
           $('.mobile-menu .navbar-toggle').removeClass('collapsed');
           // $menu.slideToggle();
           $('.mobile-menu1 > ul').slideUp(500);
@@ -336,13 +336,13 @@
             $('.mobile-menu2 > .menu-drop').removeClass('opened');
             $that.siblings('ul').slideDown(500);
             $that.addClass('opened');
-            
+
           } else if (opencheck1 == 1) {
             $that.siblings('ul').slideUp(500);
             $('.mobile-menu2 > ul').slideUp(500);
             $('.mobile-menu2 > .menu-drop').removeClass('opened');
             $that.removeClass('opened');
-      
+
           }
         })
 
@@ -361,7 +361,7 @@
         })
       }
     };
- 
+
     // 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
     win.ORBITFRONT = orbit;
 
@@ -449,14 +449,14 @@
 			$('a').eq(i).attr('title',titlestr);
 		};
 	};
-  // 刪除banner-slide的空連結和空連結目標     
+  // 刪除banner-slide的空連結和空連結目標
 	for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
 		if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
 			$('.w-ba-banner__slide a').eq(i).removeAttr('href');
 		if($('.w-ba-banner__slide a').eq(i).attr('target') == "")
 			$('.w-ba-banner__slide a').eq(i).removeAttr('target');
 	};
-	// 幫無標題之iframe加上title                                   
+	// 幫無標題之iframe加上title
 	for(var i=0;i<$('iframe').length;i++)
 		if($('iframe').eq(i).attr('title')=="" || $('iframe').eq(i).attr('title')== undefined ){
 			if($('iframe').eq(i).attr('src').search('facebook') != -1 )
@@ -470,16 +470,16 @@
 			else
 				$('iframe').eq(i).attr('title','unknown');
 		};
-	// 刪除空的檔案室                     
+	// 刪除空的檔案室
 	var archievelen = $('dd a.i-archive-files-item').length;
 	for(i=archievelen-1;i>=0;i--)
 		if($('dd a.i-archive-files-item').eq(i).html().trim()=="")
 			$('dd a.i-archive-files-item').eq(i).parent('dd').remove();
-  // 刪除具有空連結欄位的橫列                      
+  // 刪除具有空連結欄位的橫列
 	for(var i = 0;i < $('*[data-list] tr td a').length ; i++)
 		if($('*[data-list] tr td a').eq(i).html().trim()=="")
 			$('*[data-list] tr td a').eq(i).parent('td').parent('tr').remove();
-	// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙) 
+	// tab按鍵選到menu,會顯示下層的menu(為了符合無障礙)
 	   $('.nav-level-0>li>a').focus(function(e) {
       e.stopPropagation();
 	  $(this).parent().focus();
@@ -510,10 +510,10 @@
 
    //header banner setting
    if ( location.href.search('editmode=on') != -1 ) {
-		$('.header-banner').css('z-index','2');
+		$('.header-banner').css('z-index','0');
+    $('.header-banner').css('position','absolute');
 	} else {
 		$('.header-banner').css({
-      'position': 'absolute',
       'top': '0',
       'z-index': '-2',
     });
@@ -524,7 +524,7 @@
   $('.tab_nav').nextAll().addClass('tab_content');
   $('.tab_content').css("display","none");
   $('.tab_content').eq(0).css('display', 'block');
-  
+
   var num = $('.tab_nav li').length;
   $('.tab_content').eq(num).css('display', 'block');
   $('.tab_content').eq(num).nextAll().css('display', 'block');
@@ -592,16 +592,27 @@ extendPanelWidget();
 
 
 }
-  
 
-  
+
+
   // 當文件物件模型(DOM)載入後，執行init函數
   $(document).ready(function() {
+    $(window).scroll(function() {
+      var windowBottom = $(window).scrollTop() + $(window).innerHeight();
+      $('.onepart .introtext').each(function() {
+      var mid = $(this).offset().top + $(this).height()/2;
+    if( mid < windowBottom && mid > $(window).scrollTop()){
+        $(this).addClass('animationtext')
+        } else {
+        $(this).removeClass('animationtext')
+        }
+      })
+
+  })
     //RWD 自動縮放headerbannner
     function headerH() {
       if ($(window).width() < 768) {
       const navH = $('.layout-header .navbar-header').outerHeight();
-      $('.header-banner').css('height', navH );
     }
     }
       headerH();
@@ -610,8 +621,19 @@ extendPanelWidget();
     })
 
     init();
+    if ($(window).width() < 768) {
+        $('.introtext').after($('.introimage'));
+    } else {
+        $('.introtext').before($('.introimage'));
+    }
   });
-
+    $(window).resize(function() {
+      if ($(window).width() < 768) {
+          $('.introtext').after($('.introimage'));
+      } else {
+          $('.introtext').before($('.introimage'));
+      }
+    });
   $(window).load(function(){
     $("iframe[src*='google']").attr('title','googleOauth');
     });
@@ -624,4 +646,3 @@ extendPanelWidget();
   // });
 
 }(jQuery, window));
-
diff --git a/assets/stylesheets/.DS_Store b/assets/stylesheets/.DS_Store
new file mode 100644
index 0000000..0c78ffd
Binary files /dev/null and b/assets/stylesheets/.DS_Store differ
diff --git a/assets/stylesheets/template/RWD.scss b/assets/stylesheets/template/RWD.scss
index 3f39bb9..2c700a7 100644
--- a/assets/stylesheets/template/RWD.scss
+++ b/assets/stylesheets/template/RWD.scss
@@ -1,7 +1,112 @@
-@charset "utf-8";
-@import "initial";
-
-@media(max-width: 767px) {
-    .modules-menu .modules-menu-level-0>li { margin: 0; }
-    .modules-menu .modules-menu-level-0>li:hover { background: transparent; }
-}
\ No newline at end of file
+@charset "utf-8";
+@import "initial";
+@media(max-width:1024px){
+  #main-nav{
+        width: 100%;
+  }
+  .layout-header{
+        height: 640px;
+  }
+}
+@media(min-width:1024px){
+  .introtext{
+    margin-top: 12em;
+  }
+}
+@media only screen and (min-width: 767px) and (max-width: 1024px){
+  .layout-header .header-nav{
+    position: absolute;
+    right: 0;
+    padding: 2em;
+  }
+  .layout-header .navbar-header{
+    padding: 0 2em;
+  }
+}
+@media only screen and (min-width: 767px) and (max-width: 769px){
+  .introtext{
+    margin-top:3em;
+  }
+}
+@media(max-width: 767px) {
+    .modules-menu .modules-menu-level-0>li { margin: 0; }
+    .modules-menu .modules-menu-level-0>li:hover { background: transparent; }
+    .introtext{
+      padding-bottom: 6em;
+      padding-top: 6em;
+    }
+}
+@media(max-width: 768px) {
+    .layout-header{
+          height: 480px;
+    }
+    .down{
+      .ad-overlay{
+        padding-bottom: 2em!important;
+      }
+    }
+}
+@media(min-width: 769px) {
+  .introtext{
+    margin-top: 6em;
+  }
+}
+@media(max-width: $screen-xs) {
+    .container > .navbar-header {
+        margin: 0;
+    }
+    .header-contain{
+          background-color:#ffffffb8;
+          padding-bottom: 1em;
+    }
+    .layout-header{
+          height: 440px;
+    }
+    .header-banner{
+      img{
+        max-width: none;
+        height: 480px;
+      }
+    }
+    .modules-menu .modules-menu-level-1{
+          background-color: #459967;
+    }
+    .right{
+      padding: 0;
+    }
+    .left{
+      padding: 0;
+    }
+    .introimage{
+      padding: 0;
+    }
+    .layout-content-inner {
+      padding: 0!important;
+    }
+    .layout-content-box2{
+          padding-top: 3em;
+    }
+}
+@media(min-width:767px){
+  .header-contain{
+    z-index: 1;
+  }
+  .introimage{
+    padding-left: 8em;
+  }
+  .left{
+    padding-right: 0.25rem;
+  }
+  .right{
+    padding-left: 0.25rem;
+  }
+  .header-banner {
+     img{
+       width:100%;
+     }
+   }
+   .onepart{
+     padding-bottom: 6em;
+     padding-top: 6em;
+   }
+}
diff --git a/assets/stylesheets/template/base/_autobackup.bak b/assets/stylesheets/template/base/_autobackup.bak
new file mode 100644
index 0000000..b02d3fb
--- /dev/null
+++ b/assets/stylesheets/template/base/_autobackup.bak
@@ -0,0 +1,59 @@
+
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+
+.response-content {
+  justify-self: auto;
+}
+
+
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
+.response-content {
+  justify-self: auto;
+}
diff --git a/assets/stylesheets/template/base/_global.scss b/assets/stylesheets/template/base/_global.scss
index 1c030cd..60f7ae3 100644
--- a/assets/stylesheets/template/base/_global.scss
+++ b/assets/stylesheets/template/base/_global.scss
@@ -55,8 +55,8 @@ a.btn-primary {
   font-size: 0.8125rem;
 
   &:hover {
-    background-color: darken($theme-color-main, 10%);
-    border-color: darken($theme-color-main, 10%);
+    background-color: darken($theme-color-second, 10%);
+    border-color: darken($theme-color-second, 10%);
   }
 }
 
@@ -87,4 +87,4 @@ body[data-module="announcement"] {
   .layout-content {
     overflow-x: auto;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/template/base/_go_back_top.scss b/assets/stylesheets/template/base/_go_back_top.scss
index 5cdb56c..c355b62 100644
--- a/assets/stylesheets/template/base/_go_back_top.scss
+++ b/assets/stylesheets/template/base/_go_back_top.scss
@@ -15,8 +15,18 @@
   font-size: 0.750em;
   border-radius: 0.125em;
   z-index: 1050;
+  animation:animateTop 0.5s linear infinite alternate;
+-webkit-animation:animateTop 0.5s linear infinite alternate;
 
   &:hover {
-    background: rgba($theme-color-main, 1);
+    background: $theme-color-second;
   }
-}
\ No newline at end of file
+}
+@-webkit-keyframes animateTop{
+  from{bottom:1em;}
+  to{bottom:1.2em;}
+}
+@keyframes animateTop{
+  from{bottom:1em;}
+  to{bottom:1.2em;}
+}
diff --git a/assets/stylesheets/template/base/_variables.scss b/assets/stylesheets/template/base/_variables.scss
index 3bd740b..9b2764f 100644
--- a/assets/stylesheets/template/base/_variables.scss
+++ b/assets/stylesheets/template/base/_variables.scss
@@ -13,7 +13,7 @@ $theme-red: #d20001;
 $theme-blue: #003d7e;
 
 $theme-color-main: #333333;
-$theme-color-second: #91BFEA;
+$theme-color-second: #4dac74;
 $theme-color-third: #ed4c43;
 $theme-color-green: #32D9C3;
 
@@ -84,3 +84,16 @@ $w-item-heading-font-size: 0.85rem;
 // --------------------------------------------------
 
 $border-width: 0.25em;
+
+
+
+
+
+
+
+
+
+
+.response-content {
+  justify-self: auto;
+}
diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss
index 0de593b..7e6d611 100644
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@@ -4,9 +4,131 @@
 
 .layout-content {
   min-height: 37.5em;
-  background: $theme-green-light;
-
+  padding-bottom: 6em;
+  background-color: #fff;
+  background-image: linear-gradient(180deg, transparent 0, rgba(191,139,61,0.1) 100%);
   .container {
     @extend .response-container;
   }
-}
\ No newline at end of file
+}
+
+.down{
+  display: flex;
+  width: 100%;
+  .columnbox{
+    width: 50%;
+  }
+  .leftbox{
+    padding-right: 0.25rem;
+  }
+  .rightbox{
+    padding-left: 0.25rem;
+  }
+  .ad-overlay{
+    padding-bottom: 3em!important;
+  }
+}
+.big{
+  padding: 0!important;
+}
+
+.onepart{
+  .w-ba-banner{
+    &:hover{
+      img{
+
+      }
+    }
+  }
+}
+.layout-content-box2{
+  .w-ba-banner{
+    &:hover{
+      -webkit-transition: all .3s ease;
+      -moz-transition: all .3s ease;
+      -ms-transition: all .3s ease;
+      -o-transition: all .3s ease;
+      transition: all .3s ease;
+      img{
+            transform: scale(1.1);
+      }
+      .transitionfade{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: rgba(0,0,0,.4);
+        -webkit-transition: .3s ease-out;
+        -moz-transition: .3s ease-out;
+        -ms-transition: .3s ease-out;
+        -o-transition: .3s ease-out;
+        transition: .3s ease-out;
+      }
+    }
+  }
+}
+.left{
+  .controlplay{
+    display: none;
+  }
+  ul.button-mid .prev-button{
+    display: none;
+  }
+  ul.button-mid .next-button{
+    display: none;
+  }
+  .ad-overlay h3{
+    text-align: center;
+  }
+  .ad-overlay{
+          padding-bottom: 5em;
+  }
+  .banner-pager{
+    display: none;
+  }
+}
+.right{
+  .controlplay{
+    display: none;
+  }
+  ul.button-mid .prev-button{
+    display: none;
+  }
+  ul.button-mid .next-button{
+    display: none;
+  }
+  .ad-overlay h3{
+    text-align: center;
+  }
+  .ad-overlay{
+            padding-bottom: 5em;
+  }
+  .banner-pager{
+    display: none;
+  }
+}
+.introtext{
+  opacity: 0;
+      -webkit-transform: translateY(15%) translateZ(0);
+      -moz-transform: translateY(15%) translateZ(0);
+      -o-transform: translateY(15%) translateZ(0);
+      -ms-transform: translateY(15%) translateZ(0);
+      transform: translateY(15%) translateZ(0);
+      -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
+      -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
+      -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
+      -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
+      transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
+      &:hover{
+        transform: scale(1.1);
+      }
+}
+.animationtext{
+  opacity: 1;
+    -webkit-transform: translateY(0) translateZ(0);
+    -moz-transform: translateY(0) translateZ(0);
+    -o-transform: translateY(0) translateZ(0);
+    -ms-transform: translateY(0) translateZ(0);
+    transform: translateY(0) translateZ(0);
+}
diff --git a/assets/stylesheets/template/layout/footer.scss b/assets/stylesheets/template/layout/footer.scss
index 63d37e7..98940d1 100644
--- a/assets/stylesheets/template/layout/footer.scss
+++ b/assets/stylesheets/template/layout/footer.scss
@@ -6,7 +6,7 @@
   padding: 2em 0;
   color: $theme-color-main;
   font-size: 0.8125em;
-  background-color: $theme-color-second;
+  background-color: #decdb7;
 
   .container {
     @extend .response-container;
@@ -20,4 +20,4 @@
       color: lighten($theme-color-main, 10%);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 035bb47..c58f28c 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -7,15 +7,17 @@
   margin-bottom: 0;
   border: none;
   border-radius: 0;
-  background-color: $theme-green-light;
-  z-index: 1;
-
+  height: 680px;
   .container {
     @extend .response-container;
   }
-  .header-banner { overflow: hidden; }
+  .header-banner {
+     overflow: hidden;
+     width:100%;
+     position: fixed;
+   }
   .header-nav {
-    padding: 1em 0;
+    padding: 1em;
     color: $theme-color-main;
     font-family: $main-font;
 
@@ -38,10 +40,9 @@
   }
 
   .navbar-header {
-    padding: 0 0 1.25em;
+    padding: 0 ;
 
     .navbar-brand {
-      height: unset;
       margin: 0.5em 0;
       padding-top: 0;
       padding-bottom: 0;
@@ -51,7 +52,6 @@
       font-family: $main-font;
 
       @media (min-width: $screen-sm) {
-        height: unset;
         margin: 0.5rem 0 0;
         padding-left: 0;
         line-height: 3.75em;
@@ -62,8 +62,8 @@
       }
 
       @media (max-width: 480px) {
-        height: 3.5em;
-        padding: 0 0.5rem;
+        height: 2.5em;
+        padding: 0;
         margin: 0;
       }
 
@@ -126,4 +126,9 @@
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
   }
-}
\ No newline at end of file
+}
+
+.headertext{
+  padding-top: 10em;
+  position: absolute;
+}
diff --git a/assets/stylesheets/template/layout/slide.scss b/assets/stylesheets/template/layout/slide.scss
index 08de021..fbafbbe 100644
--- a/assets/stylesheets/template/layout/slide.scss
+++ b/assets/stylesheets/template/layout/slide.scss
@@ -5,7 +5,6 @@
 .layout-slide {
   position: relative;
   z-index: 0;
-  background: $theme-green-light;
 
   .w-ad-banner {
     max-width: 75em;
diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss
index 9ee385e..0a0fbbd 100644
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@@ -2,11 +2,11 @@
 
 @import "../initial";
 
-// 
+//
 // Widget
 //
 
-// Widget 
+// Widget
 // ## gerenral styles
 
 .w-ba-banner {
@@ -36,18 +36,17 @@
   position: absolute;
   width: 100%;
   bottom: 0;
-  background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
+   background-image:linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.5) 20%, #000000a3);
   padding: 1.5em 1em;
-  h3 { 
-    margin: 0; 
+  h3 {
+    margin: 0;
     padding: 0 0.5rem;
     color: $theme-white;
   }
   p { margin: 0; padding: 0.5rem; color: $theme-white; }
   @media(max-width: $screen-sm) {
-      padding: 0.5em 1em; 
-      position: relative;
-      background: #333333;
+      padding: 0.5em 1em;
+      position: absolute;
       h3 { font-size: 1em; }
       p { font-size: 0.75em; padding: 0.3rem 0.5rem 0.8rem 0.5rem; }
     }
@@ -106,7 +105,7 @@
     padding: 5px 10px;
     border: 1px solid rgba(255, 255, 255, 0.5);
     background: rgba(0, 0, 0, 0.2);
- 
+
 	i {
 		font-family: FontAwesome;
     position: relative;
@@ -124,35 +123,30 @@
 		content:"\f04c"
   }
   @media(max-width: $screen-sm) {
-      right: 0; 
+      right: 0;
       a { padding: 0 5px;}
       a i { font-size: 0.75em; }
   }
 }
 
 ul.button-mid{
-  width: 100%;
-  top: 50%;
-  position: absolute;
-  padding: 0;
-  margin-top: 0;
-  margin: 0;
-  transform: translateY(-50%);
-  z-index: 999;
-
 	.prev-button{
 	  transition: 0.4s;
 		position: relative;
 		float:left;
     left: 0.5rem;
     width: 2.5rem;
-    /* background: url(/assets/next.png) no-repeat center; */
     height: 2.5rem;
     font-size: 2.2rem;
     color: #ffffff;
     background: rgba(0,0,0,0.2);
     text-align: center;
     line-height: 2.5rem;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+
     &:hover {
       background: rgba(0,0,0,0.1);
     }
@@ -169,13 +163,17 @@ ul.button-mid{
     position: relative;
     right: 0.5rem;
     width: 2.5rem;
-    /* background: url(/assets/next.png) no-repeat center; */
     height: 2.5rem;
     font-size: 2.2rem;
     color: $theme-white;
     background: rgba(0,0,0,0.2);
     text-align: center;
     line-height: 2.5rem;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+
     &:hover {
       background: rgba(0,0,0,0.1);
     }
@@ -210,15 +208,14 @@ ul.button-mid{
     }
   }
   @media(max-width: $screen-sm) {
-    .ad-overlay { 
-      padding: 0.5em 1em; 
-      position: relative;
-      background: #333333;
+    .ad-overlay {
+      padding: 3em 1em;
+      position: absolute;
       h3 { font-size: 1em; }
       p { font-size: 0.75em; }
     }
-    .controlplay { 
-      right: 0; 
+    .controlplay {
+      right: 0;
       a { padding: 0 5px;}
       a i { font-size: 0.75em; }
     }
@@ -242,7 +239,7 @@ ul.button-mid{
     height: 100%;
   }
 
-  
+
   .banner-pager {
     right: 1em;
     top: -2em;
@@ -269,7 +266,7 @@ ul.button-mid{
   ul.button-mid { display: none; }
 }
 
-//Widget 4 
+//Widget 4
 .ba-banner-widget-4 {
   .w-ba-banner__wrap {
     text-align: center;
@@ -282,4 +279,61 @@ ul.button-mid{
   .cycle-slide-active {
     z-index: 101 !important;
   }
-}
\ No newline at end of file
+}
+
+//Widget 5
+.ba-banner-widget-5 {
+  background: url(/assets/BANNER-BG-01.jpg) 0 0 no-repeat;
+  .slide-img { padding: 1rem 1.5rem; }
+  .slide-content {
+    z-index: 200;
+    font-family: $main-font;
+    padding-top: 0.5rem;
+    padding-left: 0;
+
+    h3 {
+      font-size: 1rem;
+      margin: 0.5em 0;
+      color: #12517a;
+    }
+
+    div {
+      white-space: normal;
+      word-break: break-all;
+      font-size: 1rem;
+      color: #373634;
+      padding: 0 2em 0.5em 0;
+    }
+  }
+  .controlplay { display: none; }
+  .banner-pager {
+    right: 1rem;
+    top: 0;
+    width: unset;
+   li { height: unset; width: unset; }
+   a { background: #a0d2f3;}
+  }
+
+  @media(max-width: $screen-sm) {
+    .slide-content {
+      padding: 0.5em 1em;
+      position: relative;
+      background: #a0d2f3;
+      h3 { font-size: 1em; }
+      div { font-size: 0.75em; }
+    }
+    .controlplay {
+      right: 0;
+      a { padding: 0 5px;}
+      a i { font-size: 0.75em; }
+    }
+  }
+  @media(max-width: $screen-sm -1) {
+    ul.button-mid.next-button, ul.button-mid.prev-button{
+      top: 35%;
+      transform: translateY(-35%);
+    }
+    .slide-content h3, .slide-content div { color: $theme-white; }
+    .w-ba-banner__wrap { overflow: visible;}
+  }
+}
diff --git a/assets/stylesheets/template/modules/epaper.scss b/assets/stylesheets/template/modules/epaper.scss
index d903467..b416e5c 100644
--- a/assets/stylesheets/template/modules/epaper.scss
+++ b/assets/stylesheets/template/modules/epaper.scss
@@ -1,240 +1,240 @@
-@charset "utf-8";
-
-@import "../initial";
-
-.header-banner img[src*='epaper'] {
-    position: absolute;
-    top: 0;
-    transform: translateX(50%);
-    right: 50%;
-    top: 3em;
-}
-.row.epaper-container {
-    display: flex;
-    flex-wrap: wrap;
-    position: relative;
-}
-.criteria_list {
-    thead {
-    border-left: 6px solid rgb(105, 150, 171);
-    background: rgb(74, 42, 36);
-    color: rgb(255, 255, 255);
-    font-size: 14px;
-    font-family: 微軟正黑體;
-    }
-    tbody {
-        background-color: transparent;
-        tr {
-            border-bottom: 1px dotted #4a2a24;
-            padding: 5px 0;
-        }
-        td {
-            border-top: transparent;
-        }
-    }
-}
-
-
-// slider-fullscreen
-.latest-fullslider {
-    margin-bottom: 2em;
-    .right-fullslider { 
-        white-space: normal; 
-        padding: 0 2em 2em;
-        h3 { 
-            font-size: 2em;
-            text-align: center;
-            font-weight: 600;
-        }
-    }
-    .left-fullslider { padding-right: 0; text-align: center;}
-    .epaper-description { white-space: normal; }
-    .epaper-container {
-        min-height: 400px;
-    }
-    .banner-Container { background: #fff;}
-}
-
-@media(max-width: 768px){
-    .latest-fullslider{
-        .epaper-container{
-            background: #fff;
-        }
-        .right-fullslider{
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            background-color: rgba(0, 0, 0, 0.5);
-            a { color: $theme-white; }
-        }
-        .left-fullslider{
-            img{
-                width: 100%;
-                max-height: 417px;
-                overflow: hidden;
-            }
-
-        }
-    }
-}
-
-//slider
-.latest_slider {
-    display: flex;
-    flex-direction: column;
-    h3 { margin-bottom: 0; }
-    .banner-Container { background: #fff; min-height: 300px; padding: 0 1rem 2rem; }
-    .epaper-container {
-        white-space: normal; 
-        flex-direction: column;
-        h4 { white-space: normal; }
-        img { width: 20em; }
-        .epaper-description { white-space: normal; padding-top: 1em;}
-    }
-    .e-paper.btn { font-size: 0.65rem; }
-}
-
-// epaper-show page
-
-.epaper-show{
-    @media(min-width: 768px){
-        h3{
-            font-size: 2.5rem;
-            text-align: center;
-            margin-bottom: 25px;
-        }
-        span{
-            line-height: 27px;
-        }
-    }
-
-    @media(max-width: 768px){
-        .epaper-content{
-            padding: 15px;
-        }
-        span{
-            line-height: 20px;
-        }
-    }
-    img{
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        margin-bottom: 15px;
-    }
-
-
-}
-
-// epaper-index1
-
-.epaper-index1-container{
-    margin-top: 15px;
-
-.epaper-leftimg,.epaper-rightContent{
-    display: inline-block;
-    text-align: center;
-}
-.epaper-leftimg{
-    img{
-        width: 100%;
-        //max-height: 225px;
-
-    }
-}
-.epaper-rightContent{
-    width: 50%;
-}
-
-@media(min-width: 768px){
-	position: relative;
-	text-overflow: ellipsis;
-	background:#fff;
-    .epaper-rightContent{
-        position: relative;//absolute;
-        top: 10px;
-		padding-bottom: 10px;
-        .epaper-description{
-            text-overflow: ellipsis;
-        }
-
-    }
-}
-}
-// epaper-index2
-
-.epaper-index2-container{
-	border-style: solid;
-    border-color: #ccc;
-    border-width: 0 1px 1px;
-	h1,h2,h3,h4{
-		border-bottom: 1px solid #ccc;//#e1e1e1;
-		margin: 0;
-		padding: 10px 0 10px 10px;
-		span{
-			float:right;
-			margin-right:10px;
-			color: #0e5c92;
-			border: 1px solid #d1d1d1;
-			background: #f0f0f0;
-			padding: 4px 6px;
-			font-size: 14px;
-			margin-top:-3px;
-		}
-	}
-    margin-top: 15px;
-	
-.epaper-leftimg,.epaper-rightContent{
-    display: inline-block;
-    text-align: left;
-}
-@media(min-width: 768px){
-	.epaper-leftimg{
-		width: 30%;
-		padding: 10px 0 10px 10px;
-		img{
-			width:100%;
-			//max-height: 225px;
-		}
-	}
-	.epaper-rightContent{
-		padding: 10px 0 10px 10px;
-		width: 70%;
-	}
-}
-@media(max-width: 767px){
-	.epaper-leftimg{
-		width: 100%;
-		padding: 10px;
-		img{
-			width:100%;
-			//max-height: 225px;
-		}
-	}
-	.epaper-rightContent{
-		padding: 10px;
-	}
-}
-background:#fff;
-@media(min-width: 768px){
-	position: relative;
-	text-overflow: ellipsis;
-    .epaper-rightContent{
-        position: relative;//absolute;
-        top: 10px;
-		padding-bottom: 20px;
-		padding-right: 10px;
-        .epaper-description{
-            text-overflow: ellipsis;
-        }
-
-    }
-}
-.epaper-description a:visited{
-	color: #777575;
-}
-.epaper-description a:hover{
-	text-decoration-color: #333;
-    text-decoration-line: underline;
-}
-}
+@charset "utf-8";
+
+@import "../initial";
+
+.header-banner img[src*='epaper'] {
+    position: absolute;
+    top: 0;
+    transform: translateX(50%);
+    right: 50%;
+    top: 3em;
+}
+.row.epaper-container {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+}
+.criteria_list {
+    thead {
+    border-left: 6px solid rgb(105, 150, 171);
+    background: rgb(74, 42, 36);
+    color: rgb(255, 255, 255);
+    font-size: 14px;
+    font-family: 微軟正黑體;
+    }
+    tbody {
+        background-color: transparent;
+        tr {
+            border-bottom: 1px dotted #4a2a24;
+            padding: 5px 0;
+        }
+        td {
+            border-top: transparent;
+        }
+    }
+}
+
+
+// slider-fullscreen
+.latest-fullslider {
+    margin-bottom: 2em;
+    .right-fullslider { 
+        white-space: normal; 
+        padding: 0 2em 2em;
+        h3 { 
+            font-size: 2em;
+            text-align: center;
+            font-weight: 600;
+        }
+    }
+    .left-fullslider { padding-right: 0; text-align: center;}
+    .epaper-description { white-space: normal; }
+    .epaper-container {
+        min-height: 400px;
+    }
+    .banner-Container { background: #fff;}
+}
+
+@media(max-width: 768px){
+    .latest-fullslider{
+        .epaper-container{
+            background: #fff;
+        }
+        .right-fullslider{
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            a { color: $theme-white; }
+        }
+        .left-fullslider{
+            img{
+                width: 100%;
+                max-height: 417px;
+                overflow: hidden;
+            }
+
+        }
+    }
+}
+
+//slider
+.latest_slider {
+    display: flex;
+    flex-direction: column;
+    h3 { margin-bottom: 0; }
+    .banner-Container { background: #fff; min-height: 300px; padding: 0 1rem 2rem; }
+    .epaper-container {
+        white-space: normal; 
+        flex-direction: column;
+        h4 { white-space: normal; }
+        img { width: 20em; }
+        .epaper-description { white-space: normal; padding-top: 1em;}
+    }
+    .e-paper.btn { font-size: 0.65rem; }
+}
+
+// epaper-show page
+
+.epaper-show{
+    @media(min-width: 768px){
+        h3{
+            font-size: 2.5rem;
+            text-align: center;
+            margin-bottom: 25px;
+        }
+        span{
+            line-height: 27px;
+        }
+    }
+
+    @media(max-width: 768px){
+        .epaper-content{
+            padding: 15px;
+        }
+        span{
+            line-height: 20px;
+        }
+    }
+    img{
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 15px;
+    }
+
+
+}
+
+// epaper-index1
+
+.epaper-index1-container{
+    margin-top: 15px;
+
+.epaper-leftimg,.epaper-rightContent{
+    display: inline-block;
+    text-align: center;
+}
+.epaper-leftimg{
+    img{
+        width: 100%;
+        //max-height: 225px;
+
+    }
+}
+.epaper-rightContent{
+    width: 50%;
+}
+
+@media(min-width: 768px){
+	position: relative;
+	text-overflow: ellipsis;
+	background:#fff;
+    .epaper-rightContent{
+        position: relative;//absolute;
+        top: 10px;
+		padding-bottom: 10px;
+        .epaper-description{
+            text-overflow: ellipsis;
+        }
+
+    }
+}
+}
+// epaper-index2
+
+.epaper-index2-container{
+	border-style: solid;
+    border-color: #ccc;
+    border-width: 0 1px 1px;
+	h1,h2,h3,h4{
+		border-bottom: 1px solid #ccc;//#e1e1e1;
+		margin: 0;
+		padding: 10px 0 10px 10px;
+		span{
+			float:right;
+			margin-right:10px;
+			color: #0e5c92;
+			border: 1px solid #d1d1d1;
+			background: #f0f0f0;
+			padding: 4px 6px;
+			font-size: 14px;
+			margin-top:-3px;
+		}
+	}
+    margin-top: 15px;
+	
+.epaper-leftimg,.epaper-rightContent{
+    display: inline-block;
+    text-align: left;
+}
+@media(min-width: 768px){
+	.epaper-leftimg{
+		width: 30%;
+		padding: 10px 0 10px 10px;
+		img{
+			width:100%;
+			//max-height: 225px;
+		}
+	}
+	.epaper-rightContent{
+		padding: 10px 0 10px 10px;
+		width: 70%;
+	}
+}
+@media(max-width: 767px){
+	.epaper-leftimg{
+		width: 100%;
+		padding: 10px;
+		img{
+			width:100%;
+			//max-height: 225px;
+		}
+	}
+	.epaper-rightContent{
+		padding: 10px;
+	}
+}
+background:#fff;
+@media(min-width: 768px){
+	position: relative;
+	text-overflow: ellipsis;
+    .epaper-rightContent{
+        position: relative;//absolute;
+        top: 10px;
+		padding-bottom: 20px;
+		padding-right: 10px;
+        .epaper-description{
+            text-overflow: ellipsis;
+        }
+
+    }
+}
+.epaper-description a:visited{
+	color: #777575;
+}
+.epaper-description a:hover{
+	text-decoration-color: #333;
+    text-decoration-line: underline;
+}
+}
diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss
index ce9c593..5fd4309 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -17,18 +17,17 @@
   .menu-drop.opened {
     transform: rotateX(180deg);
   }
-  
+
   .modules-menu-level-0 {
-    margin: 0 0 0.5em 0;
+    margin:2em 0 0.5em 0;
     padding: 0;
     list-style: none;
-    width: 100%;
     display: flex;
     justify-content: space-around;
 
     .has-dropdown.level-1.active {
       .modules-menu-level-1 {
-        display: block; 
+        display: block;
       }
     }
 
@@ -50,7 +49,7 @@
     //   text-align: center;
     //   border-radius: 0.13em;
     // }
-  
+
     .menu-drop {
       position: absolute;
       top: 0.5em;
@@ -61,7 +60,7 @@
       line-height: 2.5em;
       font-size: 1em;
       text-align: center;
-      border-radius: 0.13em;    
+      border-radius: 0.13em;
     }
 
     // .dropdown-toggle-icon.level-1 {
@@ -74,9 +73,15 @@
 
     & > li {
       position: relative;
-      margin: 0;
+      margin: 0 ;
       padding: 0 1em;
+      border-radius: 0.5em;
       border-bottom: 0.0625em solid lighten($theme-gray, 5%);
+      -webkit-transition: background 0.3s linear 0s, color 0.3s linear 0s;
+      -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s;
+      -ms-transition: background 0.3s linear 0s, color 0.3s linear 0s;
+      -o-transition: background 0.3s linear 0s, color 0.3s linear 0s;
+      transition: background 0.3s linear 0s, color 0.3s linear 0s;
 
       & > a {
         display: block;
@@ -100,7 +105,8 @@
 
       @media (min-width: $screen-sm) {
         position: relative;
-        margin: 0;
+        background-color: #ffffff7d;
+        margin: 0 0.3rem;
         padding: 0;
         border-bottom: none;
 
@@ -137,6 +143,7 @@
 
         & > a {
           padding: 0.5rem;
+          font-weight: bold;
           color: $theme-color-main;
         }
 
@@ -154,7 +161,7 @@
     min-width: 100%;
     margin: 0;
     padding: 0;
-    background-color: $theme-gray;
+    background-color: #f1901bc9;
     list-style: none;
     z-index: 1;
 
@@ -175,7 +182,7 @@
       &:hover {
         background-color: $theme-color-second;
         & > a {
-          color: $theme-color-main;
+          color: #fff;
         }
       }
     }
@@ -249,7 +256,7 @@
   }
 }
 
-//mobile 
+//mobile
 .mobile-menu {
   z-index: 1051;
   width: 100vw;
@@ -263,11 +270,11 @@
     display: block;
   }
 
-  .modules-menu { 
+  .modules-menu {
     width: 80%;
     position: absolute;
     right: 0;
-    background: #a51832;
+    background:$theme-color-second;
     height: 100%;
     top: 0;
     padding-top: 40px;
@@ -298,7 +305,7 @@
 
 
 //覆蓋bootstrap nav設定
-.mobile-menu .modules-menu.collapsing { 
+.mobile-menu .modules-menu.collapsing {
   overflow:unset !important;
   transform: translateX(100%);
   -webkit-transition-timing-function:ease;
@@ -324,7 +331,7 @@
   transition-property:transform;
 }
 
-.mobile-menu .collapse.navbar-collapse.modules-menu { 
+.mobile-menu .collapse.navbar-collapse.modules-menu {
       overflow-y: scroll;
       transform: translateX(0%);
 }
diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss
index 74476ed..72e9a4a 100644
--- a/assets/stylesheets/template/modules/universal-table.scss
+++ b/assets/stylesheets/template/modules/universal-table.scss
@@ -1,9 +1,9 @@
-@charset "utf-8";
-
-@import "../initial";
-
-.universal-table-index h3 {
-    @extend .unity-title;
-    float: left;
-    margin: 0;
+@charset "utf-8";
+
+@import "../initial";
+
+.universal-table-index h3 {
+    @extend .unity-title;
+    float: left;
+    margin: 0;
   }
\ No newline at end of file
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index 18418ff..4b901f0 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -33,6 +33,11 @@
 .response-container {
   position: relative;
 
+  @media (min-width: $screen-xs) {
+    width: 100%;
+    padding: 0;
+  }
+
   @media (min-width: $screen-sm) {
     width: 100%;
   }
diff --git a/home/header.html.erb b/home/header.html.erb
index e9eff8c..280bec6 100644
--- a/home/header.html.erb
+++ b/home/header.html.erb
@@ -18,7 +18,7 @@
   <div class="cover"></div>
 </div>
 <header class="navbar layout-header no-print" role="navigation">
-  <div class="container">
+  <div class="container header-contain">
     <div class="header-nav" >
     <a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
       {{header-data}}
@@ -34,10 +34,10 @@
 	  <script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
       <a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
     </div>
-    <section class="header-banner" data-pp="1000"></section>
     <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
     <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
       <%= render_menu %>
     </div>
   </div>
-</header>
\ No newline at end of file
+    <div class="class= header-banner" data-pp="1000"> </div>
+</header>
diff --git a/home/index.html.erb b/home/index.html.erb
index 984c6c7..30d7e19 100644
--- a/home/index.html.erb
+++ b/home/index.html.erb
@@ -20,16 +20,13 @@
       <section class="layout-content-box col-sm-4" data-pp="4"></section>
       <section class="layout-content-box col-sm-8" data-pp="3"></section>
       </div>
-      <div class="column row">
-      <div class="two-column col-sm-6" data-pp="11"></div>
-      <div class="two-column col-sm-6" data-pp="12"></div>
-      <div class="three-column col-sm-4" data-pp="14"></div>
-      <div class="three-column col-sm-4" data-pp="15"></div>
-      <div class="three-column col-sm-4" data-pp="13"></div>
+      <div class="column row onepart">
+      <div class="two-column col-sm-5 introimage" data-pp="11"></div>
+      <div class="two-column col-sm-7 introtext " data-pp="12"></div>
       </div>
       <section class="extra-box col-sm-12" data-pp="5"></section>
     </div>
-  
+
     <div class="layout-content-box2 container">
     <section class="body-banner" data-pp="8"></section>
     <div class="row">
@@ -41,15 +38,24 @@
       <section class="layout-content-box col-sm-8" data-pp="17"></section>
     </div>
     <div class="column row">
-    <div class="two-column col-sm-6" data-pp="18"></div>
-    <div class="two-column col-sm-6" data-pp="19"></div>
-    <div class="three-column col-sm-4" data-pp="20"></div>
-    <div class="three-column col-sm-4" data-pp="21"></div>
-    <div class="three-column col-sm-4" data-pp="22"></div>
+    <div class="two-column col-sm-6 left">
+          <div class="three-column col-sm-12 big" data-pp="20"></div>
+          <div class="down">
+            <div class="columnbox leftbox" data-pp="21"></div>
+            <div class="columnbox rightbox" data-pp="22"></div>
+          </div>
+    </div>
+    <div class="two-column col-sm-6 right" >
+          <div class="down">
+            <div class="columnbox leftbox" data-pp="24"></div>
+            <div class="columnbox rightbox" data-pp="25"></div>
+          </div>
+            <div class="three-column col-sm-12 big" data-pp="26"></div>
+        </div>
     </div>
     <section class="extra-box col-sm-12" data-pp="23"></section>
     </div>
   </div>
   <%= render_footer %>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/modules/ad_banner/_ad_banner_widget1.html.erb b/modules/ad_banner/_ad_banner_widget1.html.erb
index dfd56e9..4aa4bc5 100644
--- a/modules/ad_banner/_ad_banner_widget1.html.erb
+++ b/modules/ad_banner/_ad_banner_widget1.html.erb
@@ -24,11 +24,12 @@
       >
        <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
            <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+           <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
+           <div class="transitionfade"></div>
        </a>
 
     </div>
   </div>
-  <div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
     <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
     <ul class="controlplay"><a class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
 	<ul class="button-mid">
@@ -46,10 +47,10 @@
 	});
 	$('.next-button').off('click').on('click',function(){
 		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
-		
+
 	})
 	$('.prev-button').off('click').on('click',function(){
 		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
   })
-  
-</script>
\ No newline at end of file
+
+</script>
diff --git a/modules/ad_banner/_ad_banner_widget4.html.erb b/modules/ad_banner/_ad_banner_widget4.html.erb
index 42a9bb9..9cc1af1 100644
--- a/modules/ad_banner/_ad_banner_widget4.html.erb
+++ b/modules/ad_banner/_ad_banner_widget4.html.erb
@@ -5,6 +5,7 @@
   >
     <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
       <img class="w-ba-banner__image" src="{{image_link}}" alt="{{alt_title}}">
+       <div class="transitionfade"></div>
     </a>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/modules/ad_banner/_ad_banner_widget5.html.erb b/modules/ad_banner/_ad_banner_widget5.html.erb
new file mode 100644
index 0000000..594e39d
--- /dev/null
+++ b/modules/ad_banner/_ad_banner_widget5.html.erb
@@ -0,0 +1,59 @@
+<div class="w-ba-banner ba-banner-widget-5">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-cycle-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><a></a></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-swipe=true
+      data-cycle-swipe-fx="scrollHorz"
+    >
+    <div class="w-ba-banner__slide {{class}}"
+        data-link="{{link}}"
+        data-cycle-title="{{title}}"
+        data-cycle-desc="{{context}}"
+        data-target="{{target}}"
+      >
+       <div class="slide-img col-md-4 col-sm-4">
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+       </a>
+       </div>
+       <div class="slide-content col-md-8 col-sm-8">
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}"><h3>{{title}}</h3></a>
+       <div>{{context}}</div>
+       </div>
+
+    </div>
+  </div>
+    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <ul class="controlplay"><a class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
+	<ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
+    <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
+	</ul>
+</div>
+<script>
+	var flag = 1;
+	$('.pause-slide').click(function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+	});
+	$('.resume-slide').click(function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+	});
+	$('.next-button').off('click').on('click',function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+		
+	})
+	$('.prev-button').off('click').on('click',function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+  })
+  
+</script>
\ No newline at end of file
diff --git a/modules/ad_banner/info.json b/modules/ad_banner/info.json
index 5bd044e..d7936ad 100644
--- a/modules/ad_banner/info.json
+++ b/modules/ad_banner/info.json
@@ -39,7 +39,14 @@
                 "en" : "4. Pro Carousel ( image, Youtube video, navigation )"
             },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "ad_banner_widget5",
+            "name" : {
+                "zh_tw" : "5. 橫幅文字輪播 ( 圖片, 文字區域, 導航圖示 )",
+                "en" : "5. Carousel ( image, title, description, navigation )"
+                },
+            "thumbnail" : "thumb.png"
         }
-
     ]
 }
\ No newline at end of file
diff --git a/modules/announcement/_annc_widget16.html.erb b/modules/announcement/_annc_widget16.html.erb
index c72fa98..7fc4ab5 100644
--- a/modules/announcement/_annc_widget16.html.erb
+++ b/modules/announcement/_annc_widget16.html.erb
@@ -1,47 +1,47 @@
-<div class="w-annc widget-announcement-16">
-
-  <h3 class="w-annc__widget-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  
-  <div class="slide-button">
-  <button class="cycle-prev btn btn-warning"> <i class="fa fa-angle-left"></i></button>
-  <button class="cycle-next btn btn-warning"> <i class="fa fa-angle-right"></i></button>
-  <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多+" : "More NEWS" %></a>
-  </div>
-  
-  <div class="w-annc__wrap cycle-slideshow" 
-    data-level="0" 
-    data-list="announcements"
-    data-cycle-slides=".w-annc__item"
-    data-cycle-fx="carousel"
-    data-cycle-carousel-fluid=true
-    data-cycle-pause-on-hover="true"
-    data-cycle-speed="200"
-    data-cycle-carousel-visible="1"
-    data-cycle-prev=".cycle-prev"
-    data-cycle-next=".cycle-next"
-    data-cycle-swipe=true
-    data-cycle-swipe-fx="carousel"
-    >
-
-    <div class="w-annc__item">
-      <div class="w-annc__img-wrap">
-        <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-      </div>
-      <div class="w-annc__content-wrap">
-        <div class="w-annc__meta">
-          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="w-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <span class="w-annc__postdate">{{postdate}}</span>
-          </span>
-        </div>
-        <h4 class="w-annc__entry-title">
-          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </h4>
-      </div>
-    </div>
-  </div>
-</div>
+<div class="w-annc widget-announcement-16">
+
+  <h3 class="w-annc__widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  
+  <div class="slide-button">
+  <button class="cycle-prev btn btn-warning"> <i class="fa fa-angle-left"></i></button>
+  <button class="cycle-next btn btn-warning"> <i class="fa fa-angle-right"></i></button>
+  <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多+" : "More NEWS" %></a>
+  </div>
+  
+  <div class="w-annc__wrap cycle-slideshow" 
+    data-level="0" 
+    data-list="announcements"
+    data-cycle-slides=".w-annc__item"
+    data-cycle-fx="carousel"
+    data-cycle-carousel-fluid=true
+    data-cycle-pause-on-hover="true"
+    data-cycle-speed="200"
+    data-cycle-carousel-visible="1"
+    data-cycle-prev=".cycle-prev"
+    data-cycle-next=".cycle-next"
+    data-cycle-swipe=true
+    data-cycle-swipe-fx="carousel"
+    >
+
+    <div class="w-annc__item">
+      <div class="w-annc__img-wrap">
+        <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
+      </div>
+      <div class="w-annc__content-wrap">
+        <div class="w-annc__meta">
+          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
+            <span class="w-annc__status label {{status-class}}">{{status}}</span>
+          </span>
+          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
+            <span class="w-annc__postdate">{{postdate}}</span>
+          </span>
+        </div>
+        <h4 class="w-annc__entry-title">
+          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
+        </h4>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/modules/announcement/annc_index10.html.erb b/modules/announcement/annc_index10.html.erb
index c3217bc..4ea87d8 100644
--- a/modules/announcement/annc_index10.html.erb
+++ b/modules/announcement/annc_index10.html.erb
@@ -1,184 +1,184 @@
-<div class="i-annc index-announcement-10">
-
-
-<h3 class="i-annc__page-title">{{page-title}}</h3>
-
-    <div class="VivaTimeline">
-        <dl>
-
-            <!--月份 1-->
-            <dt>{{date-head}}</dt>
-
-            <!--左側文章 start-->
-        <div class="data" data-level="0" data-list="announcements">
-            <dd class=" evenodd clearfix ">
-                <div class="circ"></div>
-                <div class="time" date-format="%Y-%m">{{postdate}}</div>
-                <!--填入日期-->
-                <div class="events">
-                    <div class="events-header">{{title}}</div>
-                    <!--填入標題-->
-                    <div class="events-body">
-                        <div class="row">
-                            <div class="col-md-6 pull-left">
-                                <img class="events-object img-responsive img-rounded" src="{{img_src}}"/><!--填入圖片網址--></div>
-                            <div class="events-desc">{{subtitle}}</div>
-                            <!--填入描述-->
-                        </div>
-                    </div>
-                    <div class="events-footer">
-                        <a class="i-annc__title" href="{{link_to_show}}">more </a>
-                    </div>
-                    <!--可填底部標題 或刪除-->
-                </div>
-            </dd>
-        </div>
-
-        </dl>
-    </div>
-
-
-</div>
-{{pagination_goes_here}}
-
-
-
-
-<script type="text/javascript">
-    jQuery(function(){
-    jQuery('.data > dd:odd').addClass(' pos-left');
-    jQuery('.data > dd:even').addClass('pos-right');
-});
-</script>
-<script type="text/javascript">
-    ;
-    (function ($, window, document, undefined) {
-        //'use strict';
-        var pluginName = 'vivaTimeline'; //Plugin名稱
-
-        //Timeline建構式
-        var Timeline = function (element, opt) {
-            //私有變數
-            this.target = element;
-            this.carouselInterval;
-            this.checkImgLoad;
-            this.imgLoad = false;
-            //初始化
-            this._init(opt);
-
-            this._event();
-
-        }
-
-        //ImportKML2D預設參數
-        Timeline.options = {
-            carousel: true,
-            carouselTime: 10000
-        }
-
-        //Timeline私有方法
-        Timeline.prototype = {
-            //初始化
-            _init: function (_opt) {
-                //合併自訂參數與預設參數
-                var self = this;
-                self.options = $.extend(true, {}, Timeline.options, _opt);
-
-                self.target.find('.events-body').each(function () {
-                    var rowcount = $(this).find('.row').length;
-                    if (rowcount > 1) {
-                        var html = "<ol>";
-                        for (var i = 0; i < rowcount; i++) {
-                            html += "<li data-target='" + i + "'></li>";
-                        }
-                        html += "</ol>";
-                        $(this).siblings('.events-footer').html(html).find('li').first().addClass('active');
-                    }
-                });
-
-                self.target.find('.events-body').each(function () {
-                    $(this).find('.row').first().show().siblings().hide();
-                });
-
-                self.target.find('img').on('load', function () {
-                    self.target.find('.events-body').each(function () {
-                        var maxHeight = 0;
-                        $(this).find('.row').each(function () {
-                            if ($(this).height() > maxHeight) {
-                                maxHeight = $(this).height();
-                            }
-                        });
-                        $(this).find('.row').height(maxHeight);
-                    });
-                });
-            },
-
-            //綁定事件
-            _event: function () {
-                var self = this;
-                self.target.find('.events-header').click(function () {
-                    $(this).siblings('.events-body').slideToggle().end().siblings('.events-footer').toggle();
-                });
-
-                self.target.find('.events-footer li').click(function () {
-                    self._carousel($(this));
-                });
-
-                if (self.options.carousel) {
-                    self.carouselInterval = setInterval(function () {
-                        self._carousel();
-                    }, self.options.carouselTime);
-
-                    self.target.find('.events').hover(function () {
-                        clearInterval(self.carouselInterval);
-                        self.carouselInterval = null;
-
-                    }, function () {
-                        if (self.carouselInterval == undefined) {
-                            self.carouselInterval = setInterval(function () {
-                                self._carousel();
-                            }, self.options.carouselTime);
-                        }
-                    });
-                }
-            },
-
-            //自動輪播
-            _carousel: function (_container) {
-                var self = this;
-                if (_container == undefined) {
-                    self.target.find('.events-footer .active').each(function () {
-                        var nextTarget;
-                        if ($(this).is(':last-child')) {
-                            nextTarget = $(this).siblings().first();
-                        } else {
-                            nextTarget = $(this).next();
-                        }
-                        self._carousel(nextTarget);
-                    });
-                } else {
-                    var target = _container.data().target;
-
-                    _container.addClass('active').siblings().removeClass('active');
-
-                    _container.closest('.events-footer').siblings('.events-body').find('.row').eq(target).show().siblings().hide();
-                }
-            }
-        }
-
-        //公開方法
-        $.fn[pluginName] = function (options, args) {
-            var timeline;
-            this.each(function () {
-                timeline = new Timeline($(this), options);
-            });
-            return this;
-        }
-    })(jQuery, window, document);
-</script>
-<script type="text/javascript">
-    jQuery(document).ready(function () {
-        jQuery('.VivaTimeline').vivaTimeline({carousel: true, carouselTime: 3000});
-    });
-</script>
-<script type="text/javascript">
+<div class="i-annc index-announcement-10">
+
+
+<h3 class="i-annc__page-title">{{page-title}}</h3>
+
+    <div class="VivaTimeline">
+        <dl>
+
+            <!--月份 1-->
+            <dt>{{date-head}}</dt>
+
+            <!--左側文章 start-->
+        <div class="data" data-level="0" data-list="announcements">
+            <dd class=" evenodd clearfix ">
+                <div class="circ"></div>
+                <div class="time" date-format="%Y-%m">{{postdate}}</div>
+                <!--填入日期-->
+                <div class="events">
+                    <div class="events-header">{{title}}</div>
+                    <!--填入標題-->
+                    <div class="events-body">
+                        <div class="row">
+                            <div class="col-md-6 pull-left">
+                                <img class="events-object img-responsive img-rounded" src="{{img_src}}"/><!--填入圖片網址--></div>
+                            <div class="events-desc">{{subtitle}}</div>
+                            <!--填入描述-->
+                        </div>
+                    </div>
+                    <div class="events-footer">
+                        <a class="i-annc__title" href="{{link_to_show}}">more </a>
+                    </div>
+                    <!--可填底部標題 或刪除-->
+                </div>
+            </dd>
+        </div>
+
+        </dl>
+    </div>
+
+
+</div>
+{{pagination_goes_here}}
+
+
+
+
+<script type="text/javascript">
+    jQuery(function(){
+    jQuery('.data > dd:odd').addClass(' pos-left');
+    jQuery('.data > dd:even').addClass('pos-right');
+});
+</script>
+<script type="text/javascript">
+    ;
+    (function ($, window, document, undefined) {
+        //'use strict';
+        var pluginName = 'vivaTimeline'; //Plugin名稱
+
+        //Timeline建構式
+        var Timeline = function (element, opt) {
+            //私有變數
+            this.target = element;
+            this.carouselInterval;
+            this.checkImgLoad;
+            this.imgLoad = false;
+            //初始化
+            this._init(opt);
+
+            this._event();
+
+        }
+
+        //ImportKML2D預設參數
+        Timeline.options = {
+            carousel: true,
+            carouselTime: 10000
+        }
+
+        //Timeline私有方法
+        Timeline.prototype = {
+            //初始化
+            _init: function (_opt) {
+                //合併自訂參數與預設參數
+                var self = this;
+                self.options = $.extend(true, {}, Timeline.options, _opt);
+
+                self.target.find('.events-body').each(function () {
+                    var rowcount = $(this).find('.row').length;
+                    if (rowcount > 1) {
+                        var html = "<ol>";
+                        for (var i = 0; i < rowcount; i++) {
+                            html += "<li data-target='" + i + "'></li>";
+                        }
+                        html += "</ol>";
+                        $(this).siblings('.events-footer').html(html).find('li').first().addClass('active');
+                    }
+                });
+
+                self.target.find('.events-body').each(function () {
+                    $(this).find('.row').first().show().siblings().hide();
+                });
+
+                self.target.find('img').on('load', function () {
+                    self.target.find('.events-body').each(function () {
+                        var maxHeight = 0;
+                        $(this).find('.row').each(function () {
+                            if ($(this).height() > maxHeight) {
+                                maxHeight = $(this).height();
+                            }
+                        });
+                        $(this).find('.row').height(maxHeight);
+                    });
+                });
+            },
+
+            //綁定事件
+            _event: function () {
+                var self = this;
+                self.target.find('.events-header').click(function () {
+                    $(this).siblings('.events-body').slideToggle().end().siblings('.events-footer').toggle();
+                });
+
+                self.target.find('.events-footer li').click(function () {
+                    self._carousel($(this));
+                });
+
+                if (self.options.carousel) {
+                    self.carouselInterval = setInterval(function () {
+                        self._carousel();
+                    }, self.options.carouselTime);
+
+                    self.target.find('.events').hover(function () {
+                        clearInterval(self.carouselInterval);
+                        self.carouselInterval = null;
+
+                    }, function () {
+                        if (self.carouselInterval == undefined) {
+                            self.carouselInterval = setInterval(function () {
+                                self._carousel();
+                            }, self.options.carouselTime);
+                        }
+                    });
+                }
+            },
+
+            //自動輪播
+            _carousel: function (_container) {
+                var self = this;
+                if (_container == undefined) {
+                    self.target.find('.events-footer .active').each(function () {
+                        var nextTarget;
+                        if ($(this).is(':last-child')) {
+                            nextTarget = $(this).siblings().first();
+                        } else {
+                            nextTarget = $(this).next();
+                        }
+                        self._carousel(nextTarget);
+                    });
+                } else {
+                    var target = _container.data().target;
+
+                    _container.addClass('active').siblings().removeClass('active');
+
+                    _container.closest('.events-footer').siblings('.events-body').find('.row').eq(target).show().siblings().hide();
+                }
+            }
+        }
+
+        //公開方法
+        $.fn[pluginName] = function (options, args) {
+            var timeline;
+            this.each(function () {
+                timeline = new Timeline($(this), options);
+            });
+            return this;
+        }
+    })(jQuery, window, document);
+</script>
+<script type="text/javascript">
+    jQuery(document).ready(function () {
+        jQuery('.VivaTimeline').vivaTimeline({carousel: true, carouselTime: 3000});
+    });
+</script>
+<script type="text/javascript">
diff --git a/modules/announcement/annc_index9.html.erb b/modules/announcement/annc_index9.html.erb
index 6c1faba..ea2d3c3 100644
--- a/modules/announcement/annc_index9.html.erb
+++ b/modules/announcement/annc_index9.html.erb
@@ -1,26 +1,26 @@
-<div class="i-annc index-announcement-9">
-  <h3 class="i-annc__page-title">{{page-title}}</h3>
-  <ul class="i-annc__list  row" data-level="0" data-list="announcements">
-    <li class="i-annc__item">
-    <div class="i-annc__content-wrap">  
-      <div class="i-annc__meta">
-        <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-        <!--    -->
-          <span class="i-annc__postdate">{{postdate}}</span>
-        </span>
-        <span class="i-annc__category-wrap">
-          <i class="fa fa-clone"></i>
-          <span class="i-annc__category">{{category}}</span>
-        </span>
-        <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
-          <span class="i-annc__status label status {{status-class}}">{{status}}</span>
-        </span>
-      </div>
-      <h4 class="i-annc__entry-title">
-        <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
-      </h4>
-      <p class="i-annc__subtitle">{{subtitle}}</p>
-    </div>
-    </li>
-</div>
+<div class="i-annc index-announcement-9">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <ul class="i-annc__list  row" data-level="0" data-list="announcements">
+    <li class="i-annc__item">
+    <div class="i-annc__content-wrap">  
+      <div class="i-annc__meta">
+        <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
+        <!--    -->
+          <span class="i-annc__postdate">{{postdate}}</span>
+        </span>
+        <span class="i-annc__category-wrap">
+          <i class="fa fa-clone"></i>
+          <span class="i-annc__category">{{category}}</span>
+        </span>
+        <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
+          <span class="i-annc__status label status {{status-class}}">{{status}}</span>
+        </span>
+      </div>
+      <h4 class="i-annc__entry-title">
+        <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
+      </h4>
+      <p class="i-annc__subtitle">{{subtitle}}</p>
+    </div>
+    </li>
+</div>
 {{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/announcement/show.html.erb b/modules/announcement/show.html.erb
index 5b6088c..1caf227 100644
--- a/modules/announcement/show.html.erb
+++ b/modules/announcement/show.html.erb
@@ -19,7 +19,7 @@
   </ul>
 
   <section class="s-annc__post-wrap">
-    <div class="s-annc__sub-img pull-right hide">
+    <div class="s-annc__sub-img pull-right {{hide_class}}">
     <img src="{{img_src}}" alt="{{img_description}}"></img>
     <span class="s-annc__img_description">{{img_description}}</span>
     </div>
@@ -66,7 +66,6 @@
     // Links
     hideEmptyEl($('.s-annc__link-title'), $('.s-annc__related-link'));
   
-    $(".s-annc__sub-img img[src*='upload']").parent().removeClass('hide'); 
     $("img[src='']").remove();
     
   }(jQuery));
diff --git a/modules/archive/archive_index6.html.erb b/modules/archive/archive_index6.html.erb
index 2c46edf..c9dc251 100644
--- a/modules/archive/archive_index6.html.erb
+++ b/modules/archive/archive_index6.html.erb
@@ -1,46 +1,46 @@
-<div class="i-archive index-archive-6">
-  <h3 class="i-archive-title">
-    <span>{{page-title}}</span>
-  </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <div class="i-items">
-        <div class="thead row">
-          <div class="col-sm-2 date-thead">上傳日期</div>
-          <div class="col-sm-7 title-thead">標題</div>
-          <div class="col-sm-3 file-thead">檔案下載</div>
-          </div>
-        <div class="tbody">
-          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
-          <div class="archive-items clearfix">
-              <div class="date col-sm-2">{{created_at}}</div>
-              <div class="head col-sm-7">
-                <dl class="i-archive__file" data-list="files"  data-level="2">
-                <div class="file-name">
-                  <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
-                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-                  </span>
-                </div>
-                </dl>
-              </div>
-              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <div class="file-item">
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
-              </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<script>
-if( window.location.href.indexOf('/en/') > -1 ) {
-  $('.date-thead').replaceWith('<div class="col-sm-2 date-thead-en">Updated At</div>')
-  $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
-  $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
-}
+<div class="i-archive index-archive-6">
+  <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
+   <h4 class="i-archive__category-title">{{category-title}}</h4>
+    <div class="i-items">
+        <div class="thead row">
+          <div class="col-sm-2 date-thead">上傳日期</div>
+          <div class="col-sm-7 title-thead">標題</div>
+          <div class="col-sm-3 file-thead">檔案下載</div>
+          </div>
+        <div class="tbody">
+          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+          <div class="archive-items clearfix">
+              <div class="date col-sm-2">{{created_at}}</div>
+              <div class="head col-sm-7">
+                <dl class="i-archive__file" data-list="files"  data-level="2">
+                <div class="file-name">
+                  <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
+                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+                  </span>
+                </div>
+                </dl>
+              </div>
+              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
+              <div class="file-item">
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+              </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+if( window.location.href.indexOf('/en/') > -1 ) {
+  $('.date-thead').replaceWith('<div class="col-sm-2 date-thead-en">Updated At</div>')
+  $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
+  $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
+}
 </script>
\ No newline at end of file
diff --git a/modules/ask/_ask_widget_form.html.erb b/modules/ask/_ask_widget_form.html.erb
new file mode 100644
index 0000000..04e2573
--- /dev/null
+++ b/modules/ask/_ask_widget_form.html.erb
@@ -0,0 +1,91 @@
+<div class="widget-ask widget1">
+  <style type="text/css">
+    #new-ask-question .form-horizontal .control-group > *{
+      font-size: 1.2em;
+    }
+    .default_picker label{
+      display: none;
+    }
+    .ask-question .control-group{
+      flex-wrap: wrap;
+      display: flex;
+      width: 100%;
+      align-items: center;
+    }
+    .ask-question .controls > *{
+      display: block;
+    }
+    .ask-question .controls > script{
+      display: none;
+    }
+    .ask-question .form-horizontal .control-label{
+      width: 24%;
+      max-width: 15em;
+      min-width: 14em;
+      padding: 0;
+      text-align: center;
+    }
+    .ask-question .form-horizontal .control-group .controls{
+      margin: 0;
+      display: inline-flex;
+      align-items: center;
+      overflow: hidden;
+      position: relative;
+      min-width: 10em;
+      max-width: 20em;
+      padding-left: 0;
+      width: 70%;
+      padding: 0.5em;
+      justify-content: center;
+    }
+    .ask-question .form-horizontal input[type="text"],.ask-question  .form-horizontal select{
+      width: 97%;
+      max-width: 13.75em;
+    }
+    .ask-question .form-horizontal .form-actions{
+      position: relative;
+      padding: 1em 0 0 0;
+      text-align: center;
+    }
+  </style>
+  <link href="/assets/custom_field.css" media="screen" rel="stylesheet">
+  <script src="/assets/validator"></script>
+  <link href="/assets/ask/ask.css" media="screen" rel="stylesheet">
+  <script type='text/javascript'>
+    $('#new-ask-question .required').each(function() {
+      $(this).text('*' + $(this).text());
+    });
+    $(function(){
+      var fv = new FormValidator($("#new_ask_question"));
+      fv.validate_functions.check_email = function(value){
+        reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
+        if (reg.test(value)) {
+          return true;
+        }else{
+          return false;
+        }
+      }
+    })
+  </script>
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div id="new-ask-question" class="ask-question">
+    <form action="{{form_url}}" method="post" class="form-horizontal" accept-charset="UTF-8">
+      {{token_tag}}
+      <div data-level="0" data-list="fields">
+        <div class="control-group">
+          {{label}}
+          <div class="controls">
+            {{content}}
+          </div>
+        </div>
+      </div>
+      <div class="form-actions">
+        <input type="hidden" name="referer_url" value="{{referer_url}}">
+        {{submit_tag}}
+        {{close_tag}}
+      </div>
+    </form>
+  </div>
+</div>
\ No newline at end of file
diff --git a/modules/ask/_ask_widget_list.html.erb b/modules/ask/_ask_widget_list.html.erb
new file mode 100644
index 0000000..03687c0
--- /dev/null
+++ b/modules/ask/_ask_widget_list.html.erb
@@ -0,0 +1,17 @@
+<div class="widget-asks widget1">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <table class="table">
+  <thead>
+    <tr data-level="0" data-list="th" class="bg-primary">
+      <th>{{td}}</th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="ask_questions">
+    <tr data-level="1" data-list="td">
+      <td>{{content}}</td>
+    </tr>
+  </tbody>
+</table>
+</div>
\ No newline at end of file
diff --git a/modules/ask/info.json b/modules/ask/info.json
new file mode 100644
index 0000000..9dd7c12
--- /dev/null
+++ b/modules/ask/info.json
@@ -0,0 +1,20 @@
+{
+    "widgets" : [
+        {
+            "filename" : "ask_widget_form",
+            "name" : {
+                "zh_tw" : "1. 模組標題、發問介面",
+                "en" : "1. widget-title, question"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "ask_widget_list",
+            "name" : {
+                "zh_tw" : "2. 模組標題、 發佈回覆列表",
+                "en" : "2. widget-title, published list"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/modules/ask/thumbs/thumb.png b/modules/ask/thumbs/thumb.png
new file mode 100644
index 0000000..266af56
Binary files /dev/null and b/modules/ask/thumbs/thumb.png differ
diff --git a/modules/e_paper/_latest_slider_aside.html.erb b/modules/e_paper/_latest_slider_aside.html.erb
index 60eaeb5..5810f08 100644
--- a/modules/e_paper/_latest_slider_aside.html.erb
+++ b/modules/e_paper/_latest_slider_aside.html.erb
@@ -1,48 +1,48 @@
-<div class="latest_slider">
-  <h3 class="e-annc__widget-title">
-    <span>{{widget-title}}</span>
-  <a class="e-paper btn btn-default pull-right" href="/zh_tw/epapers?method=papers"><%= (I18n.locale.to_s =="zh_tw") ? "更多 +" : "More NEWS" %></a>
-  </h3>
- 
-  <div class="e-paper cycle-slideshow" 
-  data-level="0" 
-  data-list="categories"
-  data-cycle-slides=".banner-Container"
-  data-cycle-fx="carousel"
-  data-cycle-log="false"
-  data-cycle-carousel-fluid=true
-  data-cycle-pause-on-hover="true"
-  data-cycle-speed="100"
-  data-cycle-carousel-visible="1"
-  data-cycle-prev=".cycle-prev"
-  data-cycle-next=".cycle-next"
-  data-cycle-swipe=true
-  data-cycle-swipe-fx="carousel"
-  >
-
-  <div class="banner-Container" data-list="topics" data-level="1">
-    <div class="item">
-        <div class="row epaper-container">
-        <h3>{{category_title}}</h3>
-        <a href="{{link_to_show}}">
-          <h4>{{title}}</h4>
-          <img src="{{img_url_thumb}}" alt="{{title}}">
-        </a>
-        <div class="epaper-description">{{description}}</div>   
-        </div>
-    </div>
-  </div>
-</div>
-
-<script>
-  $(function(){
-  var len = 80; 
-  $(".latest_slider .epaper-description").each(function(i){
-      if($(this).text().length>len){
-          $(this).attr("title",$(this).text());
-          var text=$(this).text().substring(0,len-1)+" ...";
-          $(this).text(text);
-      }
-  });
-});
+<div class="latest_slider">
+  <h3 class="e-annc__widget-title">
+    <span>{{widget-title}}</span>
+  <a class="e-paper btn btn-default pull-right" href="/zh_tw/epapers?method=papers"><%= (I18n.locale.to_s =="zh_tw") ? "更多 +" : "More NEWS" %></a>
+  </h3>
+ 
+  <div class="e-paper cycle-slideshow" 
+  data-level="0" 
+  data-list="categories"
+  data-cycle-slides=".banner-Container"
+  data-cycle-fx="carousel"
+  data-cycle-log="false"
+  data-cycle-carousel-fluid=true
+  data-cycle-pause-on-hover="true"
+  data-cycle-speed="100"
+  data-cycle-carousel-visible="1"
+  data-cycle-prev=".cycle-prev"
+  data-cycle-next=".cycle-next"
+  data-cycle-swipe=true
+  data-cycle-swipe-fx="carousel"
+  >
+
+  <div class="banner-Container" data-list="topics" data-level="1">
+    <div class="item">
+        <div class="row epaper-container">
+        <h3>{{category_title}}</h3>
+        <a href="{{link_to_show}}">
+          <h4>{{title}}</h4>
+          <img src="{{img_url_thumb}}" alt="{{title}}">
+        </a>
+        <div class="epaper-description">{{description}}</div>   
+        </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $(function(){
+  var len = 80; 
+  $(".latest_slider .epaper-description").each(function(i){
+      if($(this).text().length>len){
+          $(this).attr("title",$(this).text());
+          var text=$(this).text().substring(0,len-1)+" ...";
+          $(this).text(text);
+      }
+  });
+});
 </script>
\ No newline at end of file
diff --git a/modules/faq/faq_index2.html.erb b/modules/faq/faq_index2.html.erb
index 051b0ba..5617e68 100644
--- a/modules/faq/faq_index2.html.erb
+++ b/modules/faq/faq_index2.html.erb
@@ -1,30 +1,30 @@
-<div class="index-faqs index2">
-  <h1 class="index-title">
-    <span>{{page-title}}</span>
-  </h1>
-  <ul class="list-unstyled" data-list="faqs" data-level="0">
-    <li class="index-content">
-      <h4>
-        <span class="index-content-title">{{question}}</span>
-        <span data-list="statuses" data-level="1">
-          <span class="label status {{status-class}}">{{status}}</span>
-        </span>
-      </h4>
-    <section class="post">
-    <p>{{answer}}</p>
-    </section>
-    </li>
-  </ul>
-</div>
-{{pagination_goes_here}}
-
-<script>
-$('.index-faqs.index2 .index-content h4').click(function(){
-  $('section.post').slideUp(200);
-  $(this).removeClass('open');
-  if($("+section",this).css("display")=="none"){
-      $("+section",this).slideDown(300);
-      $(this).addClass("open"); 
-}
-})
+<div class="index-faqs index2">
+  <h1 class="index-title">
+    <span>{{page-title}}</span>
+  </h1>
+  <ul class="list-unstyled" data-list="faqs" data-level="0">
+    <li class="index-content">
+      <h4>
+        <span class="index-content-title">{{question}}</span>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+    <section class="post">
+    <p>{{answer}}</p>
+    </section>
+    </li>
+  </ul>
+</div>
+{{pagination_goes_here}}
+
+<script>
+$('.index-faqs.index2 .index-content h4').click(function(){
+  $('section.post').slideUp(200);
+  $(this).removeClass('open');
+  if($("+section",this).css("display")=="none"){
+      $("+section",this).slideDown(300);
+      $(this).addClass("open"); 
+}
+})
 </script>
\ No newline at end of file
diff --git a/modules/gallery/_gallery_widget1.html.erb b/modules/gallery/_gallery_widget1.html.erb
index eaeb32f..0de376b 100644
--- a/modules/gallery/_gallery_widget1.html.erb
+++ b/modules/gallery/_gallery_widget1.html.erb
@@ -12,7 +12,7 @@
   data-cycle-pause-on-hover="true"
   data-cycle-log="false"
   data-cycle-carousel-fluid="true">
-    <a class="widget-pic" href="{{link_to_show}}" title="{{album-name}}">
+    <a class="widget-pic" href="{{link_to_show}}">
       <img  
         srcset="
           {{thumb-large-src}} 1024w,
diff --git a/modules/gallery/_gallery_widget2.html.erb b/modules/gallery/_gallery_widget2.html.erb
index 780aa3d..ccfb46b 100644
--- a/modules/gallery/_gallery_widget2.html.erb
+++ b/modules/gallery/_gallery_widget2.html.erb
@@ -3,8 +3,7 @@
     <span>{{widget-title}}</span>
   </h3>
   <div class="row widget-content" data-level="0" data-list="images">
-  <div class="album-item col-sm-4"> 
-    <a class="widget-pic" href="{{link_to_show}}">
+    <a class="widget-pic col-xs-4" href="{{link_to_show}}">
       <img 
         srcset="
           {{thumb-large-src}} 1024w,
@@ -13,7 +12,5 @@
         alt="{{alt_title}}"
       >
     </a>
-    <a class="album-name" href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
-  </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/modules/gallery/_gallery_widget3.html.erb b/modules/gallery/_gallery_widget3.html.erb
index 91a290e..8cf0af3 100644
--- a/modules/gallery/_gallery_widget3.html.erb
+++ b/modules/gallery/_gallery_widget3.html.erb
@@ -1,33 +1,33 @@
-<div class="widget-gallery widget3 no-print">
-  <!-- <h3 class="w-annc__widget-title">
-    <span class="album_icon"></span><span>{{widget-title}}</span>
-  </h3> -->
-  <div class="cycle-slideshow widget-content"
-    data-level="0" data-list="images" data-cycle-slides=">a"
-    data-cycle-fx="carousel" data-cycle-timeout="3000" data-cycle-carousel-visible="1" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
-    <a class="widget-pic" href="{{link_to_show}}" target="_blank" title="{{album-name}}">
-      <div class="mask_box">
-        <div class="mask_word">
-          <div class="mask_word_box">
-            <div class="mask_title">{{image_description}}</div>
-          </div>
-        </div>
-        <div class="mask">
-          <div class="circle_box"><img src="/assets/circle_icon.png" alt="">
-          </div>
-        </div>
-        <img
-          srcset="
-          {{thumb-large-src}} 1024w,
-          {{thumb-src}} 768w"
-          src="{{thumb-src}}"
-          alt="{{alt_title}}"
-        >
-      </div>
-    </a>
-
-  </div>
-  <div class="w-annc__more-wrap clearfix">
-    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= locale == :en ? 'more' : '更多照片' %></a>
-  </div>
-</div>
+<div class="widget-gallery widget3 no-print">
+  <!-- <h3 class="w-annc__widget-title">
+    <span class="album_icon"></span><span>{{widget-title}}</span>
+  </h3> -->
+  <div class="cycle-slideshow widget-content"
+    data-level="0" data-list="images" data-cycle-slides=">a"
+    data-cycle-fx="carousel" data-cycle-timeout="3000" data-cycle-carousel-visible="1" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+    <a class="widget-pic" href="{{link_to_show}}" target="_blank" title="{{album-name}}">
+      <div class="mask_box">
+        <div class="mask_word">
+          <div class="mask_word_box">
+            <div class="mask_title">{{image_description}}</div>
+          </div>
+        </div>
+        <div class="mask">
+          <div class="circle_box"><img src="/assets/circle_icon.png" alt="">
+          </div>
+        </div>
+        <img
+          srcset="
+          {{thumb-large-src}} 1024w,
+          {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </div>
+    </a>
+
+  </div>
+  <div class="w-annc__more-wrap clearfix">
+    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= locale == :en ? 'more' : '更多照片' %></a>
+  </div>
+</div>
diff --git a/modules/gallery/gallery_index1.html.erb b/modules/gallery/gallery_index1.html.erb
index 6e3b9b2..26d6b5d 100644
--- a/modules/gallery/gallery_index1.html.erb
+++ b/modules/gallery/gallery_index1.html.erb
@@ -10,7 +10,7 @@
         </div>
         <section class="index-part">
           <h4 class="index-content-title">
-            <a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
+            <a href="{{link_to_show}}">{{album-name}}</a>
           </h4>
           <div class="index-img-description">{{album-description}}</div>
         </section>
diff --git a/modules/gallery/gallery_index2.html.erb b/modules/gallery/gallery_index2.html.erb
index 9abb5b2..a895996 100644
--- a/modules/gallery/gallery_index2.html.erb
+++ b/modules/gallery/gallery_index2.html.erb
@@ -2,7 +2,7 @@
   <h1 class="index-title">
     <span>{{page-title}}</span>
   </h1>
-  <div class="row" data-level="0" data-list="albums">
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
     <div class="index-content">
       <div class="index-content-inner clearfix row">
         <div class="index-pic col-xs-5 col-sm-2">
@@ -10,7 +10,7 @@
         </div>
         <section class="index-part col-xs-7 col-sm-10">
           <h4 class="index-content-title">
-            <a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
+            <a href="{{link_to_show}}">{{album-name}}</a>
           </h4>
           <div class="index-img-description">{{album-description}}</div>
         </section>
diff --git a/modules/gallery/gallery_index3.html.erb b/modules/gallery/gallery_index3.html.erb
index f1d42bd..e58512b 100644
--- a/modules/gallery/gallery_index3.html.erb
+++ b/modules/gallery/gallery_index3.html.erb
@@ -2,7 +2,7 @@
   <h1 class="index-title">
     <span>{{page-title}}</span>
   </h1>
-  <div class="row" data-level="0" data-list="albums">
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
     <div class="index-content col-xs-4 col-sm-3">
       <div class="index-content-inner">
         <div class="index-pic">
@@ -10,7 +10,7 @@
         </div>
         <section class="index-part">
           <h4 class="index-content-title">
-            <a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
+            <a href="{{link_to_show}}">{{album-name}}</a>
           </h4>
         </section>
       </div>
diff --git a/modules/gallery/gallery_index4.html.erb b/modules/gallery/gallery_index4.html.erb
index ea90631..7d85c7e 100644
--- a/modules/gallery/gallery_index4.html.erb
+++ b/modules/gallery/gallery_index4.html.erb
@@ -2,7 +2,7 @@
   <h1 class="index-title">
     <span>{{page-title}}</span>
   </h1>
-  <div class="row" data-level="0" data-list="albums">
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
     <div class="index-content">
       <div class="index-content-inner clearfix row">
         <div class="index-pic col-xs-5 col-sm-2">
@@ -10,7 +10,7 @@
         </div>
         <section class="index-part col-xs-7 col-sm-10">
           <h4 class="index-content-title">
-            <a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
+            <a href="{{link_to_show}}">{{album-name}}</a>
           </h4>
         </section>
       </div>
diff --git a/modules/gallery/info.json b/modules/gallery/info.json
index 9452cd9..ba96b1c 100644
--- a/modules/gallery/info.json
+++ b/modules/gallery/info.json
@@ -49,14 +49,6 @@
                 "en" : "2. Thumbnail"
             },
             "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "gallery_widget3",
-            "name" : {
-                "zh_tw" : "3. 跑馬燈 ( 單張 )",
-                "en" : "3. Thumbnail"
-            },
-            "thumbnail" : "thumb.png"
         }
     ]
 }
\ No newline at end of file
diff --git a/modules/gallery/show.html.erb b/modules/gallery/show.html.erb
index 6322987..f3083ff 100644
--- a/modules/gallery/show.html.erb
+++ b/modules/gallery/show.html.erb
@@ -7,7 +7,7 @@
     <div class="show-content col-xs-6 col-sm-2">
       <div class="show-content-inner">
         <div class="show-pic">
-          <a href="{{link_to_show}}">
+          <a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';GalleryTheater();">
             <img class="img" src="{{thumb-src}}" alt="{{alt_title}}">
           </a>
           <p class="show-description">{{image-description}}</p>
diff --git a/modules/member/member_index5.html.erb b/modules/member/member_index5.html.erb
index a9c93e6..999678b 100644
--- a/modules/member/member_index5.html.erb
+++ b/modules/member/member_index5.html.erb
@@ -1,35 +1,35 @@
-<div class="i-member index-member-5">
-  <div data-list="roles" data-level="0">
-    <div class="i-member-section">
-      <div data-level="1" data-list="status-list">
-        <h3 class="i-member-status-title">{{status-title}}</h3>
-        <div class="i-member-list row" data-level="2" data-list="members">
-          <div class="i-member-item col-md-3 col-sm-6" href="{{link_to_show}}">
-            <div class="i-member-item-inner clearfix">
-              <div class="i-member-pic-wrap">
-                 <img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
-              </div>
-              <div class="i-member-profile-data-wrap">
-                  <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
-                    <li class="i-member-profile-item">
-                        <span class="i-member-title {{title_class}}">{{title}}</span>
-                        <span class="i-member-value {{value_class}}">{{value}}</span>
-                    </li>
-                  </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-{{pagination_goes_here}}
-<script>
-	for(var i = 0;i < $('.i-member img').length ; i++){
-		if($('.i-member img').eq(i).attr('alt')=="" ){
-			$('.i-member img').eq(i).attr('alt','noname');
-			$('.i-member img').eq(i).attr('title','noname');
-		}
-	}
+<div class="i-member index-member-5">
+  <div data-list="roles" data-level="0">
+    <div class="i-member-section">
+      <div data-level="1" data-list="status-list">
+        <h3 class="i-member-status-title">{{status-title}}</h3>
+        <div class="i-member-list row" data-level="2" data-list="members">
+          <div class="i-member-item col-md-3 col-sm-6" href="{{link_to_show}}">
+            <div class="i-member-item-inner clearfix">
+              <div class="i-member-pic-wrap">
+                 <img class="i-member-pic" src="{{image}}" alt="{{name}}" title="{{name}}">
+              </div>
+              <div class="i-member-profile-data-wrap">
+                  <ul class="i-member-profile-list" data-list="profile_data" data-level="3">
+                    <li class="i-member-profile-item">
+                        <span class="i-member-title {{title_class}}">{{title}}</span>
+                        <span class="i-member-value {{value_class}}">{{value}}</span>
+                    </li>
+                  </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}
+<script>
+	for(var i = 0;i < $('.i-member img').length ; i++){
+		if($('.i-member img').eq(i).attr('alt')=="" ){
+			$('.i-member img').eq(i).attr('alt','noname');
+			$('.i-member img').eq(i).attr('title','noname');
+		}
+	}
 </script>
\ No newline at end of file
diff --git a/modules/personal_activity/index_search1.html.erb b/modules/personal_activity/index_search1.html.erb
new file mode 100644
index 0000000..fff8713
--- /dev/null
+++ b/modules/personal_activity/index_search1.html.erb
@@ -0,0 +1,62 @@
+<script type="text/javascript">
+$( ".selectbox" ).ready(function() {
+  var option_len = $(".search-widget option").length
+  for (var i=0;i<option_len;i++){
+    if($(".search-widget option").eq(i).data('selected')=="selected"){
+      $(".search-widget option").eq(i).attr('selected','selected')
+    }
+  }
+});
+</script>
+
+<div class="search-widget personal-activities">
+  <h3>{{widget-title}}</h3>
+  <form action="{{url}}"  method="get">
+  <label for="selectbox">{{select_text}}</label>
+   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <option value={{choice_value}} data-selected='{{choice_select}}' >
+    {{choice_show}}</option>
+  </select>
+  <label for="keywords">{{search_text}}</label>
+  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  <button>Go</button>
+  <a id="filter" style="" href="{{url}}">Clear</a>
+  </form>
+ </div>
+
+<table class="table table-hover table-striped projects-index activities-index dt-responsive nowrap">
+  <caption><h3>{{widget-title}}</h3></caption>
+  <thead>
+    <tr>
+      <th class="col-md-1">{{year}}</th>
+      <th class="col-md-2">{{activity_name}}</th>
+      <th class="col-md-1">{{activity_organizer}}</th>
+      <th class="col-md-2 min-tablet">{{activity_area}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_start_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{activity_end_date}}</th>
+      <th class="col-md-2 min-tablet-l">{{note}}</th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="activities">
+    <tr>
+      <td>{{year}}</td>
+      <td><a href="{{link_to_show}}">{{activity_name}}</a></td>
+      <td>{{activity_organizer}}</td>
+      <td>{{activity_area}}</td>
+      <td>{{activity_start_date}}</td>
+      <td>{{activity_end_date}}</td>
+      <td>{{note}}</td>
+    </tr>
+  </tbody>
+</table>
+{{pagination_goes_here}}
+
+<script>
+$('table.activities-index').DataTable({
+  searching: false,
+  paging:   false,
+  ordering: false,
+  info:     false
+});
+</script>
+
diff --git a/modules/personal_activity/info.json b/modules/personal_activity/info.json
index cda3d13..b347042 100644
--- a/modules/personal_activity/info.json
+++ b/modules/personal_activity/info.json
@@ -1,12 +1,12 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 列表",
-                "en" : "1. List"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ]
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 列表",
+                "en" : "1. List"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/personal_book/index.html.erb b/modules/personal_book/index.html.erb
index 4c22432..50b7c80 100644
--- a/modules/personal_book/index.html.erb
+++ b/modules/personal_book/index.html.erb
@@ -1,8 +1,8 @@
-<table class="table table-hover table-striped projects-index personal-book dt-responsive nowrap">
-  <caption><h3>{{widget-title}}</h3></caption>
+<table class="table table-hover table-striped journal-papers-index">
+  <caption><h1>{{widget-title}}</h1></caption>
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="book_list">
@@ -11,22 +11,4 @@
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-book').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_book/index_search1.html.erb b/modules/personal_book/index_search1.html.erb
index e7013a3..bd3eeea 100644
--- a/modules/personal_book/index_search1.html.erb
+++ b/modules/personal_book/index_search1.html.erb
@@ -8,24 +8,25 @@ $( ".selectbox" ).ready(function() {
   }
 });
 </script>
-<div class="search-widget personal-book">
-  <h3>{{widget-title}}</h3>
+<h3>{{widget-title}}</h3>
+<div class="search-widget">
   <form action="{{url}}"  method="get">
-  <label for="selectbox">{{select_text}}</label>
-   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <input type="hidden" name="authenticity_token" value="{{csrf_value}}">
+    {{select_text}}
+    <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
     <option value={{choice_value}} data-selected='{{choice_select}}' >
     {{choice_show}}</option>
   </select>
-  <label for="keywords">{{search_text}}</label>
-  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  {{search_text}}
+  <input name="keywords" placeholder="Keywords" type="text" value="{{search_value}}">
   <button>Go</button>
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped personal-book dt-responsive nowrap">
+<table class="table table-hover table-striped journal-papers-index">
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="book_list">
@@ -34,22 +35,4 @@ $( ".selectbox" ).ready(function() {
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-book').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_conference/index.html.erb b/modules/personal_conference/index.html.erb
index 6ff3dfc..c9a9b97 100644
--- a/modules/personal_conference/index.html.erb
+++ b/modules/personal_conference/index.html.erb
@@ -1,8 +1,8 @@
-<table class="table table-hover table-striped projects-index writing-conferences dt-responsive nowrap">
-  <caption><h3>{{widget-title}}</h3></caption>
+<table class="table table-hover table-striped projects-index">
+  <caption><h1>{{widget-title}}</h1></caption>
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="writing_conferences">
@@ -11,22 +11,4 @@
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.writing-conferences').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_conference/index_search1.html.erb b/modules/personal_conference/index_search1.html.erb
index 745dd28..80a021f 100644
--- a/modules/personal_conference/index_search1.html.erb
+++ b/modules/personal_conference/index_search1.html.erb
@@ -9,23 +9,24 @@ $( ".selectbox" ).ready(function() {
 });
 </script>
 <h3>{{widget-title}}</h3>
-<div class="search-widget writing-conferences">
+<div class="search-widget">
   <form action="{{url}}"  method="get">
-  <label for="selectbox">{{select_text}}</label>
-   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <input type="hidden" name="authenticity_token" value="{{csrf_value}}">
+    {{select_text}}
+    <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
     <option value={{choice_value}} data-selected='{{choice_select}}' >
     {{choice_show}}</option>
   </select>
-  <label for="keywords">{{search_text}}</label>
-  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  {{search_text}}
+  <input name="keywords" placeholder="Keywords" type="text" value="{{search_value}}">
   <button>Go</button>
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index writing-conferences dt-responsive nowrap">
+<table class="table table-hover table-striped projects-index">
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="writing_conferences">
@@ -34,22 +35,4 @@ $( ".selectbox" ).ready(function() {
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.writing-conferences').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_journal/index.html.erb b/modules/personal_journal/index.html.erb
index b5c13c0..310fed8 100644
--- a/modules/personal_journal/index.html.erb
+++ b/modules/personal_journal/index.html.erb
@@ -1,8 +1,8 @@
-<table class="table table-hover table-striped projects-index personal-journal dt-responsive nowrap">
+<table class="table table-hover table-striped projects-index">
   <caption><h3>{{widget-title}}</h3></caption>
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="journal_papers">
@@ -11,22 +11,4 @@
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-journal').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_journal/index_search1.html.erb b/modules/personal_journal/index_search1.html.erb
index 2d94f35..b9d7958 100644
--- a/modules/personal_journal/index_search1.html.erb
+++ b/modules/personal_journal/index_search1.html.erb
@@ -9,23 +9,24 @@ $( ".selectbox" ).ready(function() {
 });
 </script>
 <h3>{{widget-title}}</h3>
-<div class="search-widget personal-journal">
+<div class="search-widget">
   <form action="{{url}}"  method="get">
-  <label for="selectbox">{{select_text}}</label>
-   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <input type="hidden" name="authenticity_token" value="{{csrf_value}}">
+    {{select_text}}
+    <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
     <option value={{choice_value}} data-selected='{{choice_select}}' >
     {{choice_show}}</option>
 	</select>
-  <label for="keywords">{{search_text}}</label>
-  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  {{search_text}}
+  <input name="keywords" placeholder="Keywords" type="text" value="{{search_value}}">
   <button>Go</button>
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index personal-journal dt-responsive nowrap">
+<table class="table table-hover table-striped projects-index">
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="journal_papers">
@@ -34,22 +35,4 @@ $( ".selectbox" ).ready(function() {
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-journal').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_patent/index.html.erb b/modules/personal_patent/index.html.erb
index 969d2b6..86ec3bc 100644
--- a/modules/personal_patent/index.html.erb
+++ b/modules/personal_patent/index.html.erb
@@ -1,8 +1,8 @@
-<table class="table table-hover table-striped projects-index personal-patent dt-responsive nowrap">
-  <caption><h3>{{widget-title}}</h3></caption>
+<table class="table table-hover table-striped projects-index">
+  <caption><h1>{{widget-title}}</h1></caption>
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="patents">
@@ -11,22 +11,4 @@
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 4; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-patent').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_patent/index_search1.html.erb b/modules/personal_patent/index_search1.html.erb
index 4997319..856793b 100644
--- a/modules/personal_patent/index_search1.html.erb
+++ b/modules/personal_patent/index_search1.html.erb
@@ -8,25 +8,25 @@ $( ".selectbox" ).ready(function() {
   }
 });
 </script>
-
-<div class="search-widget personal-patent">
 <h3>{{widget-title}}</h3>
+<div class="search-widget">
   <form action="{{url}}"  method="get">
-  <label for="selectbox">{{select_text}}</label>
-   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <input type="hidden" name="authenticity_token" value="{{csrf_value}}">
+    {{select_text}}
+    <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
     <option value={{choice_value}} data-selected='{{choice_select}}' >
     {{choice_show}}</option>
   </select>
-  <label for="keywords">{{search_text}}</label>
-  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  {{search_text}}
+  <input name="keywords" placeholder="Keywords" type="text" value="{{search_value}}">
   <button>Go</button>
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
-<table class="table table-hover table-striped projects-index personal-patent dt-responsive nowrap">
+<table class="table table-hover table-striped projects-index">
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="patents">
@@ -35,22 +35,4 @@ $( ".selectbox" ).ready(function() {
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 4; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-patent').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_project/index.html.erb b/modules/personal_project/index.html.erb
index ce0c59c..b54138d 100644
--- a/modules/personal_project/index.html.erb
+++ b/modules/personal_project/index.html.erb
@@ -1,8 +1,8 @@
-<table class="table table-hover table-striped projects-index personal-projects dt-responsive nowrap">
-  <caption><h3>{{widget-title}}</h3></caption>
+<table class="table table-hover table-striped projects-index">
+  <caption><h1>{{widget-title}}</h1></caption>
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="{{head-title}}">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="projects">
@@ -11,23 +11,4 @@
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-$('.計畫類別').addClass('min-tablet');
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-projects').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/personal_project/index_search1.html.erb b/modules/personal_project/index_search1.html.erb
index 7d3a197..b83757d 100644
--- a/modules/personal_project/index_search1.html.erb
+++ b/modules/personal_project/index_search1.html.erb
@@ -8,25 +8,25 @@ $( ".selectbox" ).ready(function() {
   }
 });
 </script>
-
-<div class="search-widget personal-projects">
 <h3>{{widget-title}}</h3>
+<div class="search-widget">
   <form action="{{url}}"  method="get">
-  <label for="selectbox">{{select_text}}</label>
-   <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
+    <input type="hidden" name="authenticity_token" value="{{csrf_value}}">
+    {{select_text}}
+    <select class="selectbox" name="selectbox" data-level="0" data-list="choice">
     <option value={{choice_value}} data-selected='{{choice_select}}' >
     {{choice_show}}</option>
   </select>
-  <label for="keywords">{{search_text}}</label>
-  <input name="keywords" id="keywords" placeholder="Keywords" type="text" value="{{search_value}}" title="keywords">
+  {{search_text}}
+  <input name="keywords" placeholder="Keywords" type="text" value="{{search_value}}">
   <button>Go</button>
   <a id="filter" style="" href="{{url}}">Clear</a>
   </form>
  </div>
- <table class="table table-hover table-striped projects-index personal-projects dt-responsive nowrap">
+ <table class="table table-hover table-striped projects-index">
   <thead>
     <tr data-level="0" data-list="headers">
-      <th class="{{head-title}}">{{head-title}}</th>
+      <th class="col-md-{{col}}">{{head-title}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="projects">
@@ -35,23 +35,4 @@ $( ".selectbox" ).ready(function() {
     </tr>
   </tbody>
 </table>
-{{pagination_goes_here}}
-
-<script>
-$('.計畫類別').addClass('min-tablet');
-for ( var i = 0; i < $('thead th').length ; i++ ) {
-	if( $('thead th').length > 2 ) {
-    var th = $('thead th');
-    for ( var q = 3; q < th.length ; q++ ) {
-      th.eq(q).addClass('min-tablet-l');
-    }
-  }
-}
-
-$('table.personal-projects').DataTable({
-  searching: false,
-  paging:   false,
-  ordering: false,
-  info:     false
-});
-</script>
\ No newline at end of file
+{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/property_hire/info.json b/modules/property_hire/info.json
index cda3d13..b347042 100644
--- a/modules/property_hire/info.json
+++ b/modules/property_hire/info.json
@@ -1,12 +1,12 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 列表",
-                "en" : "1. List"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ]
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 列表",
+                "en" : "1. List"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/text_marquee/_widget.html.erb b/modules/text_marquee/_widget.html.erb
index 5ab3964..e001a7d 100644
--- a/modules/text_marquee/_widget.html.erb
+++ b/modules/text_marquee/_widget.html.erb
@@ -30,7 +30,6 @@
 <script type="text/javascript">
 	(function(){
 		var main_div = $("div[data-subpart-id"{{subpart-id}})
-		$('.marquee li a').attr('title','marquee');
 	}	
 </script>
 	
diff --git a/modules/text_marquee/info.json b/modules/text_marquee/info.json
index 40b4be6..dc4f6df 100644
--- a/modules/text_marquee/info.json
+++ b/modules/text_marquee/info.json
@@ -1,12 +1,12 @@
-{
-    "widgets" : [
-        {
-            "filename" : "widget",
-            "name" : {
-                "zh_tw" : "跑馬燈",
-                "en" : "marquee"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ]
+{
+    "widgets" : [
+        {
+            "filename" : "widget",
+            "name" : {
+                "zh_tw" : "跑馬燈",
+                "en" : "marquee"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/universal_table/info.json b/modules/universal_table/info.json
index cda3d13..b347042 100644
--- a/modules/universal_table/info.json
+++ b/modules/universal_table/info.json
@@ -1,12 +1,12 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 列表",
-                "en" : "1. List"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ]
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 列表",
+                "en" : "1. List"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/vlog/info.json b/modules/vlog/info.json
index cda3d13..b347042 100644
--- a/modules/vlog/info.json
+++ b/modules/vlog/info.json
@@ -1,12 +1,12 @@
-{
-    "frontend": [
-        {
-            "filename" : "index",
-            "name" : {
-                "zh_tw" : "1. 列表",
-                "en" : "1. List"
-                },
-            "thumbnail" : "thumb.png"
-        }
-    ]
+{
+    "frontend": [
+        {
+            "filename" : "index",
+            "name" : {
+                "zh_tw" : "1. 列表",
+                "en" : "1. List"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
 }
\ No newline at end of file
diff --git a/modules/web_resource/web_res_index2.html.erb b/modules/web_resource/web_res_index2.html.erb
index c44dc55..90abe5e 100644
--- a/modules/web_resource/web_res_index2.html.erb
+++ b/modules/web_resource/web_res_index2.html.erb
@@ -1,17 +1,17 @@
-<div class="index-link index2">
-  <h1 class="index-title">
-    <span>{{page-title}}</span>
-  </h1>
-  <ul class="list-unstyled" data-list="web_link" data-level="0">
-    <li class="index-content col-md-4 col-sm-4">
-      <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
-        <span data-list="statuses" data-level="1">
-          <span class="label status {{status-class}}">{{status}}</span>
-        </span>
-      </h4>
-      <small class="index-context">{{context}}</small>
-    </li>
-  </ul>
-</div>
+<div class="index-link index2">
+  <h1 class="index-title">
+    <span>{{page-title}}</span>
+  </h1>
+  <ul class="list-unstyled" data-list="web_link" data-level="0">
+    <li class="index-content col-md-4 col-sm-4">
+      <h4>
+        <a class="index-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
+        <span data-list="statuses" data-level="1">
+          <span class="label status {{status-class}}">{{status}}</span>
+        </span>
+      </h4>
+      <small class="index-context">{{context}}</small>
+    </li>
+  </ul>
+</div>
 {{pagination_goes_here}}
\ No newline at end of file
diff --git a/partial/_head.html.erb b/partial/_head.html.erb
index 0bd1970..cd9e26a 100644
--- a/partial/_head.html.erb
+++ b/partial/_head.html.erb
@@ -9,9 +9,10 @@
   <link rel="stylesheet" media="print" type="text/css" href="/assets/template/print.css">
   <%= javascript_include_tag "plugin/modernizr.js"%>
   <%= javascript_include_tag "plugin/picturefill.min.js"%>
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"%>
+  <%= javascript_include_tag "jquery.min"%>
+	<%= javascript_include_tag "jquery_prefix"%>
   <%= javascript_include_tag "plugin/jquery.mobile.custom.min.js"%>
-  <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"%>
+  <%= javascript_include_tag "bootstrap.min"%>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"%>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.carousel.min.js"%>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.scrollVert.min.js"%>
diff --git a/template.json b/template.json
index 4974fa7..843612e 100644
--- a/template.json
+++ b/template.json
@@ -1,4 +1 @@
-{
-	"title" : "newOrbit2.0",
-	"key" : "newOrbit2.0",
-	"author" : "chihyu"}
\ No newline at end of file
+{"key":"asiaH2","title":"主選單及Logo重疊於滿版主Banner圖片上，首頁多種區塊配置供選擇","author":"亞洲大學公版橫式主選單2號版型(素淨)","thumbnail":"assets/images/design_thumb.png"}
\ No newline at end of file