diff --git a/_annc_widget21.html.erb b/_annc_widget21.html.erb
deleted file mode 100644
index 2d2da2e..0000000
--- a/_annc_widget21.html.erb
+++ /dev/null
@@ -1,181 +0,0 @@
-<div class="w-annc  widget-announcement-4 w-annc  widget-announcement-21" style="position:relative;">
-  <div class="w-annc__more-wrap clearfix">
-    <h2 class="w-annc__widget-title">
-      <span>{{widget-title}}</span>
-    </h2>
-    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
-  </div>
-  <div style="position: absolute;top: 62%;width:100%;    z-index: 101;">
-    <div style="">
-      <button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-        border: none; z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
-      <button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;color: #ffffff;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 50%;
-        border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
-      </div>
-  </div>
-  <ul class="w-annc__list  row cycle-slideshow" data-level="0" data-list="announcements"  data-cycle-fx="carousel"
-    data-cycle-timeout="0"
-    data-cycle-carousel-visible="3"
-    data-cycle-carousel-fluid="true"
-    data-cycle-next="#next-{{subpart-id}}"
-    data-cycle-prev="#prev-{{subpart-id}}"
-    data-cycle-slides=".w-annc__item" >
-      <li class="w-annc__item">
-        <div class="w-annc__img-wrap bullseye" >
-          <a  href="{{link_to_show}}" >
-          <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-          <div class="transitionfade"></div>
-          </a>
-        </div>
-      <div class="w-annc__content-wrap card">
-        <div class="w-annc__meta">
-          <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="w-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
-            <span class="w-annc__postdate">{{postdate}}</span>
-          </span>
-          <span class="w-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
-            <span class="w-annc__category">{{category}}</span>
-          </span>
-        </div>
-        <h4 class="w-annc__entry-title">
-          <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </h4>
-        <a href="{{link_to_show}}"><p class="w-annc__subtitle">{{subtitle}}</p></a>
-      </div>
-      </li>
-    </ul>
-</div>
-<!-- <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-<script>
-	function combineul_{{subpart-id}}(){
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
-				$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
-			var ullength = $(v).find('ul.w-annc__list').length;
-			for(var i = 1;i < ullength;i++)
-				$(v).find('ul.w-annc__list').eq(-1).remove();
-		})
-	};
-	var num;
-	var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-	function reorganize_{{subpart-id}}(num){
-		var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
-		var currentul = uls.findIndex(function(v){
-			return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
-		})
-		if(currentul == -1)
-			currentul = 0;
-		var li_active_idx = 0;
-		if(currentul != 0)
-			li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
-		combineul_{{subpart-id}}();
-		var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
-		parents.each(function(i,v){
-			var lilength = $(v).find('li.w-annc__item').length;
-			var ul_length = Math.ceil(lilength/num);
-			for(var ii=1;ii< ul_length;ii++){
-				var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
-				clone_ul.empty();
-				clone_ul.removeClass("active");
-				clone_ul.css("display","");
-				$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
-				var lihtml="";
-				if(ii != (ul_length-1)){
-					for(var j=0;j<num;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				}else{
-					for(var j=0;j< lilength - num *(ul_length-1) ;j++){
-						lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
-					};
-				};
-				$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
-			}
-			if(ul_length != 1 )
-				for(var i=0;i< lilength -num ; i++)
-					$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
-		})
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css("display","none");
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
-		$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
-		$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
-	  	$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
-	  	var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
-		active_ul.addClass("active");
-		active_ul.removeClass("hidden_item");
-		active_ul.css("display","");
-	};
-	$(window).resize(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	})
-	$(document).ready(function(){
-		if($(window).width()>1024){
-			reorganize_{{subpart-id}}(3);
-			num=3;
-		}else if($(window).width()>576){
-			reorganize_{{subpart-id}}(2);
-			num=2;
-		}else{
-			reorganize_{{subpart-id}}(1);
-			num=1;
-		}
-	var flag=false;
-	$('[data-subpart-id=\"{{subpart-id}}\"] .btn-left').click(function(){
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul - 1 < 0)
-				currentul += ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul-1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$("body").css("overflow-x","hidden");
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
-		};
-	});
-	$('[data-subpart-id=\"{{subpart-id}}\"] .btn-right').click(function(){
-		var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
-		if(!flag){
-			var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
-			var ul_length = uls.length;
-			var currentul = uls.findIndex(function(v){
-				return $(v).hasClass("active");
-			})
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
-			if(currentul + 1 > ul_length - 1)
-				currentul -= ul_length;
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
-			var active_item = $(uls[currentul+1]);
-			active_item.addClass("active");
-			active_item.find("li").css("display","block");
-			flag=true;
-			$("body").css("overflow-x","hidden");
-			$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){$("body").css("overflow-x","");flag=false;});
-		};
-	});
-	});
-</script> -->
diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index d3f31c3..4849751 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -1,6 +1,7 @@
 ;(function($, win, undefined) {
   // ECMAScript 5 嚴格模式
   'use strict';
+
     //header fixed在上方
   function initdata1() {
         if ( $('.homebanner').length != 0) {
@@ -544,14 +545,7 @@
     }
   forFreeGo();
 
-  //背景widget設定
-  if ( location.href.search('editmode=on') != -1 ) {
-    $('.background').css('z-index','2');
-    $('.background').css('position','relative');
-  } else {
-    $('.background').css('z-index','-1');
-    $('.background').css('position','fixed');
-  };
+
 
    //header banner setting
    if ( location.href.search('editmode=on') != -1 ) {
@@ -641,7 +635,24 @@ extendPanelWidget();
   // 當文件物件模型(DOM)載入後，執行init函數
   $(document).ready(function() {
 
+    //背景widget設定
+    if ( location.href.search('editmode=on') != -1 ) {
+      $('.background').css('z-index','2');
+      $('.background').css('position','relative');
+    } else {
+      $('.background').css('z-index','-1');
+      $('.background').css('position','fixed');
+    };
 
+    $('.i-annc__page-title').after($('.sitemenu-wrap2'));
+    $('.i-archive-title').after($('.sitemenu-wrap2'));
+    $('.page-module-title').after($('.sitemenu-wrap2'));
+    $('.box-social-share').before($('.sitemenu-wrap3'));
+    $('.box-social-share').before($('.sitemenu-wrap3'));
+    $('.box-social-share').before($('.sitemenu-wrap3'));
+
+    $(".member-data2-tr").before($(".show-member .table-striped > tbody > tr:nth-of-type(4)"));
+    $(".nav-pills").before($(".show-member .table-striped > tbody > tr:last-child"));
 
     //常用到的js
     // $('.').after($('.'));
@@ -691,7 +702,7 @@ extendPanelWidget();
     if ($(window).width() <769) {
        $('.modules-menu-level-0').after($('.header-nav'));
     }else{
-      $('.modules-menu').before($('.header-nav'));
+      $('.outdropdowns').before($('.header-nav'));
     };
     //
     $(".ken-click").click(function(){
@@ -732,7 +743,7 @@ extendPanelWidget();
       if ($(window).width() <769) {
          $('.modules-menu-level-0').after($('.header-nav'));
       }else{
-        $('.modules-menu').before($('.header-nav'));
+        $('.outdropdowns').before($('.header-nav'));
       };
 
       if ($(window).width() > 821) {
@@ -858,10 +869,10 @@ extendPanelWidget();
 //     $('.modules-menu-level-1').css('left','')
 //   }
 // });
-//
-//   $(window).load(function(){
-//     $("iframe[src*='google']").attr('title','googleOauth');
-//   });
+
+  $(window).load(function(){
+    $("iframe[src*='google']").attr('title','googleOauth');
+  });
 
   // 執行 member等高計算，目前改用flexbox故mark掉 by ika 20160105
   // $(window).load(function() {
diff --git a/assets/stylesheets/template/layout/content.scss b/assets/stylesheets/template/layout/content.scss
index b593a43..9b0104b 100644
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
   background-color: #F8F9FA;
-  z-index: 1 !important;
   overflow: hidden;
 }
 .internal-page{
@@ -128,14 +127,6 @@
       padding: 1.5em;
   }
 }
-.index-publications-3 .i-annc__img-wrap{
-  height: 20em;
-  overflow: hidden;
-  margin: 0 0 1em 0;
-}
-.index-publications-3 .i-annc__content-wrap{
-  height: 6em;
-}
 .image-carousel{
   padding: 15px 0px 25px 0px;
 }
diff --git a/assets/stylesheets/template/layout/header.scss b/assets/stylesheets/template/layout/header.scss
index 61c2d71..aec97bb 100644
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@@ -25,7 +25,6 @@
   margin-bottom: 0;
   border: none;
   border-radius: 0;
-  z-index:1000;
   background-color: #fff;
   -webkit-box-shadow: 0 1px 5px 1px rgba(26, 26, 26, .3);
   box-shadow: 0 1px 5px 1px rgba(26, 26, 26, .3);
@@ -74,7 +73,6 @@
 
     @media (min-width:1025px) {
       margin-bottom: -4em;
-      z-index: 105;
       position: relative;
     }
   }
diff --git a/assets/stylesheets/template/modules/ad_banner.scss b/assets/stylesheets/template/modules/ad_banner.scss
index efd5855..b2bd0c3 100644
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@@ -56,6 +56,7 @@ iframe{
   @include list-reset;
   position: absolute;
   bottom: 0.5rem;
+  z-index: 200;
   text-align:center;
   width: 100%;
   li {
diff --git a/assets/stylesheets/template/modules/announcement.scss b/assets/stylesheets/template/modules/announcement.scss
index 1ddd7ba..a6d5f13 100644
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
@@ -82,6 +82,12 @@
     @extend .i-title;
   }
   .w-annc__meta {
+    display: flex !important;
+    position: relative;
+    align-items: center;
+    .w-annc__postdate-wrap{
+      margin-right: 0.5em;
+    }
     .w-annc__status-wrap,
     .w-annc__postdate-wrap,
     .w-annc__category-wrap {
@@ -90,10 +96,14 @@
       @extend .i-title;
       color: $theme-color-main;
       font-weight: normal;
+      display: flex!important;
+      align-items: center;
     }
 
     i {
       color:$theme-color-main;
+      font-size: medium;
+      padding-right: 0.3em;
     }
   }
 
@@ -105,6 +115,7 @@
   .w-annc__entry-title {
     margin-bottom: 0.625em;
     margin-top: 0.5em;
+    // clear: both;
   }
 
   .w-annc__title {
@@ -1701,12 +1712,10 @@
   }
 
   .i-annc__item {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
     list-style: none;
     overflow: hidden;
     border-bottom: 1px solid #bbb;
-    padding: 1em;
+    padding: 1em 0;
     // box-shadow: #0000004d 0 0 4px;
     // background: #fff;
     @media(min-width: $screen-xs){
@@ -1767,6 +1776,9 @@
   }
 
   .i-annc__meta {
+    display: flex !important;
+    position: relative;
+    align-items: center;
     .i-annc__status-wrap,
     .i-annc__postdate-wrap,
     .i-annc__category-wrap {
@@ -1774,10 +1786,15 @@
       font-size: 1em;
       color: $theme-color-main;
       font-weight: normal;
+      display: flex;
+      align-items: center;
+      margin-right: 0.5em;
     }
 
     i {
       color: $theme-color-main;
+      font-size: medium;
+      padding-right: 0.3em;
     }
   }
 
@@ -1799,6 +1816,7 @@
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    // clear: both;
   }
 
   .i-annc__title {
@@ -1890,6 +1908,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 
 // Index-5
 .index-announcement-5{
+  .i-annc__item {
+    width: 100%;
+  }
   .i-annc__content-wrap{
     @media(max-width: 768px){
       padding-top: 0.5em;
@@ -1901,6 +1922,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 }
 // Index-6
 .index-announcement-6 {
+  .i-annc__item {
+    width: 100%;
+  }
   .i-annc__title {
     font-family: $main-font;
   }
@@ -2290,7 +2314,6 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
     @include clearfix;
 
     .s-annc__meta--item {
-      font-size: 0.875rem;
       margin-right: 1em;
       margin-bottom: 0.6em;
       float: left;
@@ -2370,6 +2393,9 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
 
   .s-annc__flie-title {
     white-space: nowrap;
+    width: 100%;
+    margin-bottom: 0.5em;
+    text-align: justify;
   }
 
   .s-annc__social > * {
@@ -2729,3 +2755,228 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
   word-break: break-all;
   white-space: break-spaces;
 }
+.show-publications{
+  ul{
+    padding: 0;
+  }
+}
+.video_data-widget-1{
+  .video_info{
+      margin:0.5em 0;
+  }
+}
+.video_title {
+    clear: both;
+}
+.video_data{
+  list-style: none;
+}
+.video_tag{
+  display: flex;
+  float: left;
+}
+.view_info{
+      margin-bottom: 1em;
+}
+.video_group_time{
+  clear: both;
+}
+.video_group_time{
+  color: $theme-color-main!important;
+}
+.video_tag{
+  color: #fff!important;
+  background: #626262;
+  padding: 4px 8px;
+  border-radius: 5px;
+  margin: 0.5em 0.5em 0.5em 0;
+}
+.video_title {
+    clear: both;
+    height: 3em;
+}
+.video_data_wrap{
+  padding-right: 0.4375em;
+  padding-left: 0.4375em;
+}
+.imglst_desc{
+  margin: 1em 0;
+}
+.category_box {
+    padding: 0;
+    border: 1px solid #6868688f;
+    border-radius: 0.5em 0 0 0.5em;
+    overflow: hidden;
+}
+.search_box{
+  padding: 0;
+  border-radius: 0 0.5em 0.5em 0;
+  overflow: hidden;
+  border: 1px solid #6868688f;
+}
+.video_linkwrapper{
+  position:relative;
+  height: 12em;
+  overflow:hidden;
+  width: 100%;
+  border-radius: 1em;
+  img{
+    transform:scale(1.3) translatey(-6px);
+    width: 100%;
+  }
+  @media(max-width: 1025px)and(min-width: 821px){
+      height: 11.5em;
+    img{
+      transform:scale(1.6) translatey(-3px);
+    }
+  }
+  @media(max-width: 821px)and(min-width: 769px){
+      height:8em;
+    img{
+      transform:scale(1.6) translatey(-3px);
+    }
+  }
+  @media(max-width:768px)and(min-width: 600px){
+      height: 22.5em;
+    img{
+      transform:scale(1.3) translatey(-45px);
+      width: 100%;
+    }
+  }
+}
+.video_desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    padding-bottom: 0;
+    @media(min-width: 769px){
+    height: 3em;
+    }
+
+}
+
+.video_linkwrapper2{
+  position:relative;
+  height: 17.5em;
+  overflow:hidden;
+  width: 100%;
+  border-radius: 1em;
+  img{
+    transform:scale(1.3) translatey(-41px);
+          width: 100%;
+  }
+  @media(max-width: 1025px)and(min-width: 821px){
+      height:16.5em;
+    img{
+      transform:scale(1.3) translatey(-8px);
+    }
+  }
+  @media(max-width: 821px)and(min-width: 769px){
+      height:11.5em;
+    img{
+      transform:scale(1.3) translatey(-13px);
+    }
+  }
+  @media(max-width:768px)and(min-width: 600px){
+      height: 22.5em;
+    img{
+      transform:scale(1.3) translatey(-48px);
+      width: 100%;
+    }
+  }
+  @media(max-width: $screen-xs){
+      height: 12.5em;
+      img{
+        transform:scale(1.3) translatey(-22px);
+              width: 100%;
+      }
+  }
+}
+.video_linkwrapper3{
+  position:relative;
+  height: 12em;
+  overflow:hidden;
+  img{
+    transform:scale(1.6) translatey(5px);
+  }
+  @media(max-width: 1025px)and(min-width: 821px){
+      height:9.5em;
+    img{
+      transform:scale(1.6) translatey(6px);
+    }
+  }
+  @media(max-width: 821px)and(min-width: 769px){
+      height:7.5em;
+    img{
+      transform:scale(1.6) translatey(6px);
+    }
+  }
+  @media(max-width:768px)and(min-width: 600px){
+      height: 22.5em;
+    img{
+      transform:scale(1.3) translatey(-48px);
+      width: 100%;
+    }
+  }
+  @media(max-width: $screen-xs){
+      height: 12.5em;
+      img{
+        transform:scale(1.3) translatey(-3px);
+        width: 100%;
+      }
+  }
+}
+.video_data{
+  @media(max-width: 768px){
+    width: 100%;
+  }
+}
+.video_data:hover, .video_data.hover-class{
+  @media(min-width: 1025px){
+    .video_snapshot{
+          box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
+          -webkit-transform: scale(1.35) translateY(-6px);
+          -ms-transform: scale(1.35) translateY(-6px);
+          transform: scale(1.35) translateY(-6px);
+          -webkit-transition: all .3s ease;
+          -moz-transition: all .3s ease;
+          -ms-transition: all .3s ease;
+          -o-transition: all .3s ease;
+          transition: all .3s ease;
+    }
+    .video_linkwrapper3{
+      .video_snapshot{
+            -webkit-transform: scale(1.95) translateY(-6px)!important;
+            -ms-transform: scale(1.95) translateY(-6px)!important;
+            transform: scale(1.95) translateY(-6px)!important;
+      }
+    }
+  }
+}
+.index-publications-3{
+  @media(min-width:$screen-xs){
+    .i-annc__img{
+      width: auto;
+    max-width: unset;
+    height: 20em;
+    }
+  }
+}
+.index-publications-3 .i-annc__img-wrap{
+  overflow: hidden;
+  margin: 0 0 1em 0;
+      text-align: center;
+}
+// .index-publications-3 .i-annc__content-wrap{
+//   height: 6em;
+// }
+.wordcloud2{
+  span{
+    font-size: 1.5em !important;
+    height: 2em !important;
+    position: relative !important;
+  }
+}
diff --git a/assets/stylesheets/template/modules/archives.scss b/assets/stylesheets/template/modules/archives.scss
index ffba23d..b29069d 100644
--- a/assets/stylesheets/template/modules/archives.scss
+++ b/assets/stylesheets/template/modules/archives.scss
@@ -154,8 +154,15 @@
 .index-archive-1 {
   font-family: $main-font;
 
+  .i-archive__item-wrap{
+    border: 1px solid #ccc;
+    margin-bottom: 20px;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
+    padding: 15px;
+  }
+
   .i-archive__archive-title {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     margin-bottom: 0.625em;
     vertical-align: top;
   }
@@ -182,23 +189,20 @@
     font-size: 0.8125rem;
   }
 
-  .i-archive__item-wrap {}
-
   .i-archive__file-list {
     display: block;
-    margin-bottom: 0.8em;
+    margin-bottom: 0;
   }
 
   .i-archive__file-wrap {
-    margin: 0 0.625rem 1em 0;
-    padding: 0.5em 0.75em;
+    margin:0;
+    padding:0.5em 0 0;
     border-radius: 0.125em;
-    border: 0.0625em solid lighten($theme-gray-light, 10%);
   }
 
-  .i-archive__file-name {
-    font-size: 1rem;
-  }
+  // .i-archive__file-name {
+  //   font-size: 1rem;
+  // }
 }
 
 .index-archive-4 {
diff --git a/assets/stylesheets/template/modules/faq.scss b/assets/stylesheets/template/modules/faq.scss
index 1b2ad87..0fd354a 100644
--- a/assets/stylesheets/template/modules/faq.scss
+++ b/assets/stylesheets/template/modules/faq.scss
@@ -51,32 +51,64 @@
       }
     }
   }
-  
+
   &.index2 {
+    .index-content-title-wrap{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .fa-chevron-right{
+      background-color: transparent;
+      width: 30px;
+      min-width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 30px;
+      transition: 0.4s;
+    }
+    .rotate{
+      background-color: $theme-color-second;
+      color: #fff;
+      transform: rotate(90deg);
+    }
     .index-content {
-      margin: 1em 0;
-      border: 1px solid #ccc;
+      max-width: 900px;
+      margin: 0 auto 0.5em auto;
      & h4 {
       @extend .transition;
       color: #333;
-      background-color: #f5f5f5;
+      background-color: #fff;
       border-color: #ddd;
-      padding: 0.625em 0.9375em;
-      font-size: 1em;
+      padding:2rem 3rem;
+      font-size: 1.2em;
       font-family: $main-font;
       margin: 0;
-   
+      @media(max-width:$screen-xs){
+            padding: 2rem 1em;
+      }
       &:hover {
         background: darken($color: #f5f5f5, $amount: 10);
+        a{
+          color: $theme-color-second;
+        }
         .post { display: block; }
       }
      }
      .post {
-      padding: 1em;
+       @media(max-width:$screen-xs){
+        padding: 1em;
+       }
+       @media(min-width:$screen-xs){
+        padding: 1rem 4em;
+       }
       display: none;
-      background: #fff;
      }
     }
 
   }
-}
\ No newline at end of file
+}
+.index-content{
+  list-style: none;
+}
diff --git a/assets/stylesheets/template/modules/gallery.scss b/assets/stylesheets/template/modules/gallery.scss
index eb6a135..4303853 100644
--- a/assets/stylesheets/template/modules/gallery.scss
+++ b/assets/stylesheets/template/modules/gallery.scss
@@ -1,7 +1,11 @@
 @charset "utf-8";
 
 @import "../initial";
-
+.index-pic{
+  .img-thumbnail{
+    width: 100%;
+  }
+}
 // Gallery MODULES
 .widget-gallery {
   .widget-title {
@@ -116,7 +120,9 @@
 
   &.index1 {
     .index-content {
-          width: 100%;
+      @media(max-width: $screen-xs){
+        width: 100%;
+      }
       &:nth-child(4n+1) {
         clear: both;
       }
diff --git a/assets/stylesheets/template/modules/menu.scss b/assets/stylesheets/template/modules/menu.scss
index 9d00034..1907ba0 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -71,92 +71,92 @@
 //   }
 // }
 
-// //固定選單
-// .navFixed {
-//   .header-nav{
-//     display: none!important;
-//     -webkit-transition: all .3s ease;
-//     -moz-transition: all .3s ease;
-//     -ms-transition: all .3s ease;
-//     -o-transition: all .3s ease;
-//     transition: all .3s ease;
-//   }
-//   z-index: 10;
-//   position: fixed;
-//   left: 0;
-//   top:0;
-//   margin-top: 0;
-//   min-width: 100%;
-//   -webkit-backdrop-filter: saturate(180%) blur(20px);
-//   backdrop-filter: saturate(180%) blur(20px);
-//   background-color: #ffffffd9;
-//   -webkit-transition: all .3s ease;
-//   -moz-transition: all .3s ease;
-//   -ms-transition: all .3s ease;
-//   -o-transition: all .3s ease;
-//   transition: all .3s ease;
-// }
+//固定選單
+.navFixed {
+  .header-nav{
+    display: none!important;
+    -webkit-transition: all .3s ease;
+    -moz-transition: all .3s ease;
+    -ms-transition: all .3s ease;
+    -o-transition: all .3s ease;
+    transition: all .3s ease;
+  }
+  z-index: 10;
+  position: fixed;
+  left: 0;
+  top:0;
+  margin-top: 0;
+  min-width: 100%;
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: #fff;
+  -webkit-transition: all .3s ease;
+  -moz-transition: all .3s ease;
+  -ms-transition: all .3s ease;
+  -o-transition: all .3s ease;
+  transition: all .3s ease;
+}
 
-//直式選單更改css
-.navbar-brand{
-  h1{
-    @media(min-width: 769px){
-      margin-top:0.5em;
-    }
-  }
-}
-#layout-navigation{
-  @media(min-width: 769px){
-    position: absolute;
-    width: 20%!important;
-    left: 0;
-    background-color: #fff;
-    margin-top: 5em;
-    padding-right: 0;
-    #main-nav{
-      padding: 0;
-    }
-    .modules-menu-level-0{
-      width: 100%!important;
-    }
-    .modules-menu-level-0 > li{
-      width: 100%;
-    }
-    .modules-menu-level-1{
-      min-width: 100%;
-      left: 100%;
-      top: 0;
-    }
-  }
-}
-.verticalhome{
-  .layout-content{
-    @media(min-width: 769px){
-      float: right!important;
-      width: 80%!important;
-    }
-  }
-}
-.homebanner{
-  @media(min-width: 769px){
-    float: right!important;
-    width: 80%!important;
-    .ba-banner-widget-0 img{
-      transform: none!important;
-    }
-  }
-}
-.container{
-  @media(min-width: 1200px){
-    width: 95%!important;
-    max-width: unset!important;
-  }
-}
-.layout-header .navbar-header .navbar-brand{
-  @media(min-width: 1200px){
-    padding-left: 0;
-  }
-}
+// //直式選單更改css
+// .navbar-brand{
+//   h1{
+//     @media(min-width: 769px){
+//       margin-top:0.5em;
+//     }
+//   }
+// }
+// #layout-navigation{
+//   @media(min-width: 769px){
+//     position: absolute;
+//     width: 20%!important;
+//     left: 0;
+//     background-color: #fff;
+//     margin-top: 5em;
+//     padding-right: 0;
+//     #main-nav{
+//       padding: 0;
+//     }
+//     .modules-menu-level-0{
+//       width: 100%!important;
+//     }
+//     .modules-menu-level-0 > li{
+//       width: 100%;
+//     }
+//     .modules-menu-level-1{
+//       min-width: 100%;
+//       left: 100%;
+//       top: 0;
+//     }
+//   }
+// }
+// .verticalhome{
+//   .layout-content{
+//     @media(min-width: 769px){
+//       float: right!important;
+//       width: 80%!important;
+//     }
+//   }
+// }
+// .homebanner{
+//   @media(min-width: 769px){
+//     float: right!important;
+//     width: 80%!important;
+//     .ba-banner-widget-0 img{
+//       transform: none!important;
+//     }
+//   }
+// }
+// .container{
+//   @media(min-width: 1200px){
+//     width: 95%!important;
+//     max-width: unset!important;
+//   }
+// }
+// .layout-header .navbar-header .navbar-brand{
+//   @media(min-width: 1200px){
+//     padding-left: 0;
+//   }
+// }
 
 
 
@@ -188,20 +188,20 @@
   .modules-menu-level-0 {
       width: 100%;
       padding: 0;
-      @media (min-width:769px)and(max-width: 1025px){
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        padding: 0;
-        width: 100%;
-      }
-    @media (min-width: 1025px) {
+      // @media (min-width:769px)and(max-width: 1025px){
+      //   display: flex;
+      //   flex-wrap: wrap;
+      //   justify-content: flex-end;
+      //   padding: 0;
+      //   width: 100%;
+      // }
+    @media (min-width:769px) {
       margin: 0;
-      padding: 2em 0 0;
+      padding:0.5em 0 0;
       list-style: none;
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
+      justify-content: flex-end;
       width: 70%;
       }
     .has-dropdown.level-1.active {
@@ -263,7 +263,7 @@
 
       & > a {
         display: block;
-        padding: 1em 0.1em;
+        padding: 1em;
         font-family: $main-font;
         font-size: 1.1em;
         &:after{
@@ -309,7 +309,14 @@
           // border-radius: 0.5em;
         }
       }
+      @media (min-width: $screen-sm)and(max-width: 1439px){
+        &:last-child{
+          .modules-menu-level-1 {
+            right: 0;
+           }
+        }
 
+      }
       @media (min-width: $screen-sm) {
         margin: 0;
         padding: 0;
@@ -318,7 +325,12 @@
         &:first-child {
           margin-left: 0;
         }
-
+        &:nth-last-child(2){
+          .modules-menu-level-2 {
+            right: 100%;
+            left: auto;
+          }
+        }
         &:last-child {
           margin-right: 0;
 
@@ -371,7 +383,7 @@
     padding:0;
     left: auto;
     @media(min-width:769px){
-      min-width: 180px;
+      min-width: 200px;
       width:fit-content;
       box-shadow: 2px 2px 5px #00000033;
       margin:0;
@@ -398,15 +410,15 @@
       }
 
       &:hover {
-        >a{
-          color: $theme-color-second;
-        }
-
+        background-color: $theme-color-second;
         @media(max-width: 769px){
           a,i {
            color: #fff;
          }
         }
+         &>a {
+          color: #fff;
+        }
       }
     }
 
@@ -616,3 +628,15 @@
     top: 0.6em!important;
   }
 }
+html[lang="en"]{
+  .modules-menu .modules-menu-level-0{
+    @media (min-width: 1025px){
+      width: 50%;
+    }
+  }
+  .modules-menu-level-1{
+    @media(min-width:769px){
+      min-width: 220px!important;
+    }
+  }
+}
diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss
index bd3198f..38406bf 100644
--- a/assets/stylesheets/template/modules/universal-table.scss
+++ b/assets/stylesheets/template/modules/universal-table.scss
@@ -75,7 +75,7 @@
   padding: 0;
   position: absolute;
   right:1em;
-  z-index: 99;
+  z-index:1;
   @media(max-width: $screen-xs){
     margin-top: 0.5em;
     right:0;
@@ -208,9 +208,32 @@
       padding: 15px 10px!important;
 }
 .universal-table-index1{
+      table-layout: auto !important;
   .col-ken{
     @media(min-width: $screen-xs){
-              width: auto!important;
+      width: auto!important;
+    }
+  }
+  @media(min-width: $screen-xs){
+    .universal-th-icon{
+      padding:5px!important;
+    }
+    .universal-dropdown{
+      .btn{
+        padding: 0.3125em!important;
+      }
+    }
+    .universal-th-text{
+      display: block!important;
+      clear: both;
+    }
+  }
+}
+.universal-table-index3{
+      table-layout: auto !important;
+  .col-ken{
+    @media(min-width: $screen-xs){
+        width: auto!important;
     }
 
   }
@@ -229,10 +252,11 @@
     }
   }
 }
-.universal-table-index3{
+.universal-table-index2{
+      table-layout: auto !important;
   .col-ken{
     @media(min-width: $screen-xs){
-              width: auto!important;
+        width: auto!important;
     }
 
   }
@@ -252,12 +276,25 @@
   }
 }
 .universal-table-index4{
-  .universal-th-text{
-    margin: 0;
-  }
+      table-layout: auto !important;
   .col-ken{
-      @media(min-width: $screen-xs){
+    @media(min-width: $screen-xs){
         width: auto!important;
+    }
+
+  }
+  @media(min-width: $screen-xs){
+    .universal-th-icon{
+      padding:5px!important;
+    }
+    .universal-dropdown{
+      .btn{
+        padding: 0.3125em!important;
       }
+    }
+    .universal-th-text{
+      display: block!important;
+      clear: both;
+    }
   }
 }
diff --git a/assets/stylesheets/template/template.scss b/assets/stylesheets/template/template.scss
index 1079d5e..afb1ee6 100644
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@@ -172,9 +172,6 @@ ul.tab_nav {
     }
   }
 }
-.video_data{
-  width: 100%;
-}
 .black-screen-social-window.reactable.right .content-social .social_wrap > div{
   background-color: #ffffffc2;
 }
@@ -502,3 +499,6 @@ input.search_box{
     flex-wrap: wrap-reverse!important;
   }
 }
+.modal-backdrop{
+  z-index: 2;
+}
diff --git a/home/page.html.erb b/home/page.html.erb
index 540bcff..324dc76 100644
--- a/home/page.html.erb
+++ b/home/page.html.erb
@@ -21,23 +21,26 @@
           <div class="sitemenu-wrap container" data-pp="400"></div>
         </div>
         <div class="breadcrumb-wrap container" data-pp="500"></div>
-        <div class="content  container">
-          <section class="page-content-box col-sm-3" data-pp="901"></section>
-          <section class="page-content-box col-sm-6" data-pp="902"></section>
-          <section class="page-content-box col-sm-3" data-pp="903"></section>
+        <div class="content container">
+          <div class="row">
+            <section class="page-content-box col-sm-3" data-pp="901"></section>
+            <section class="page-content-box col-sm-6" data-pp="902"></section>
+            <section class="page-content-box col-sm-3" data-pp="903"></section>
+          </div>
         </div>
         <div class="row  container">
           <aside class="layout-content-box aside leftCol col-sm-3" data-pp="904"></aside>
           <aside class="layout-content-box aside rightCol col-sm-9" data-pp="905"></aside>
         </div>
-        <div class="row container">
-          <section class="layout-content-box left-column col-sm-9">
-            <div class="extra " data-pp="600"></div>
+        <div class="row container membercontainer">
+          <section class="extrabox layout-content-box left-column col-sm-9">
+            <div class="extra" data-pp="600"></div>
             <main id="main-content" class="main-content" data-content="true">
               <%= yield %>
             </main>
             <%= render_every_page_sharer %>
-            <div class="extra" data-pp="700"></div>
+            <div class="extra sitemenu-wrap2" data-pp="700"></div>
+            <div class="extra sitemenu-wrap3" data-pp="7000"></div>
           </section>
           <aside class="layout-content-box aside right-column col-sm-3" data-pp="906"></aside>
         </div>
diff --git a/modules/announcement/_annc_widget15.html.erb b/modules/announcement/_annc_widget15.html.erb
index abe2f58..29333cc 100644
--- a/modules/announcement/_annc_widget15.html.erb
+++ b/modules/announcement/_annc_widget15.html.erb
@@ -37,11 +37,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/announcement/_annc_widget17.html.erb b/modules/announcement/_annc_widget17.html.erb
index cb7b210..bdb26b4 100644
--- a/modules/announcement/_annc_widget17.html.erb
+++ b/modules/announcement/_annc_widget17.html.erb
@@ -14,7 +14,7 @@
   <ul class="w-annc__list" data-level="0" data-list="announcements">
     <li class="w-annc__item  row">
         <span class="w-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <h4 class="w-annc__entry-title  col-sm-9">
@@ -28,4 +28,4 @@
   <div class="w-annc__more-wrap clearfix">
     <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/modules/announcement/_annc_widget19.html.erb b/modules/announcement/_annc_widget19.html.erb
index 7b48a9d..1fc8ade 100644
--- a/modules/announcement/_annc_widget19.html.erb
+++ b/modules/announcement/_annc_widget19.html.erb
@@ -32,11 +32,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
         </a>
diff --git a/modules/announcement/_annc_widget20.html.erb b/modules/announcement/_annc_widget20.html.erb
index 974c38b..88000ed 100644
--- a/modules/announcement/_annc_widget20.html.erb
+++ b/modules/announcement/_annc_widget20.html.erb
@@ -19,11 +19,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/announcement/_annc_widget21.html.erb b/modules/announcement/_annc_widget21.html.erb
index 44f5a20..090d1a6 100644
--- a/modules/announcement/_annc_widget21.html.erb
+++ b/modules/announcement/_annc_widget21.html.erb
@@ -37,11 +37,11 @@
             <span class="w-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="w-annc__postdate">{{postdate}}</span>
           </span>
           <span class="w-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="w-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/announcement/_annc_widget22.html.erb b/modules/announcement/_annc_widget22.html.erb
index cf96ef2..7632cac 100644
--- a/modules/announcement/_annc_widget22.html.erb
+++ b/modules/announcement/_annc_widget22.html.erb
@@ -25,11 +25,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/announcement/_annc_widget4.html.erb b/modules/announcement/_annc_widget4.html.erb
index 81e7e27..d9bc928 100644
--- a/modules/announcement/_annc_widget4.html.erb
+++ b/modules/announcement/_annc_widget4.html.erb
@@ -19,11 +19,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/announcement/_annc_widget5.html.erb b/modules/announcement/_annc_widget5.html.erb
index ecbef55..594e796 100644
--- a/modules/announcement/_annc_widget5.html.erb
+++ b/modules/announcement/_annc_widget5.html.erb
@@ -4,14 +4,14 @@
   </h3>
   <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item">
-    <div class="w-annc__content-wrap">  
+    <div class="w-annc__content-wrap">
       <div class="w-annc__meta">
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-           
+            <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-           
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
         <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/announcement/annc__index17.html.erb b/modules/announcement/annc__index17.html.erb
deleted file mode 100644
index 49ba5e4..0000000
--- a/modules/announcement/annc__index17.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<div class="i-annc  index-announcement-17 {{display}}">
-  <h1 class="i-annc__page-title">{{page-title}}</h1>
-  <table class="i-annc__table  table  table-striped">
-    <thead>
-      <tr>
-        <th class="i-annc__th  i-annc__th--category">{{category-head}}</th>
-        <th class="i-annc__th  i-annc__th--title">{{title-head}}</th>
-        <th class="i-annc__th  i-annc__th--date">{{date-head}}</th>
-        <th class="i-annc__th  i-annc__th--department">{{department-head}}</th>
-      </tr>
-    </thead>
-    <tbody data-level="0" data-list="announcements">
-      <tr>
-        <td class="i-annc__category">{{category}}</td>
-        <td class="i-annc__content">
-          <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="i-annc__status label status {{status-class}}">{{status}}</span>
-          </span>
-          <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
-        </td>
-        <td class="i-annc__postdate"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
-        <td class="i-annc__department"><span class="i-annc__department-content">{{department}}</span></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-{{pagination_goes_here}}
\ No newline at end of file
diff --git a/modules/announcement/annc_index18.html.erb b/modules/announcement/annc_index18.html.erb
index 2c19890..6a85713 100644
--- a/modules/announcement/annc_index18.html.erb
+++ b/modules/announcement/annc_index18.html.erb
@@ -13,11 +13,11 @@
             <span class="i-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
             </span>
         </div>
diff --git a/modules/announcement/annc_index19.html .erb b/modules/announcement/annc_index19.html .erb
deleted file mode 100644
index bd43686..0000000
--- a/modules/announcement/annc_index19.html .erb	
+++ /dev/null
@@ -1,32 +0,0 @@
-<div class="i-annc index-announcement-19">
-  <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 col-md-3 col-sm-3">
-    <div class="i-annc__img-wrap bullseye">
-      <a  href="{{link_to_show}}" alt="{{img_description}}" title="{{img_description}}">
-        <img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
-      </a>
-    </div>
-      <div class="i-annc__content-wrap">
-        <div class="i-annc__meta">
-          <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
-            <span class="i-annc__status label {{status-class}}">{{status}}</span>
-          </span>
-          <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">
-
-            <span class="i-annc__category">{{category}}</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>
-  </ul>
-</div>
-{{pagination_goes_here}}
diff --git a/modules/announcement/annc_index19.html.erb b/modules/announcement/annc_index19.html.erb
index bd43686..697f3a5 100644
--- a/modules/announcement/annc_index19.html.erb
+++ b/modules/announcement/annc_index19.html.erb
@@ -13,11 +13,11 @@
             <span class="i-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
             </span>
         </div>
diff --git a/modules/announcement/annc_index20.html.erb b/modules/announcement/annc_index20.html.erb
index 7422f96..590bae5 100644
--- a/modules/announcement/annc_index20.html.erb
+++ b/modules/announcement/annc_index20.html.erb
@@ -5,11 +5,11 @@
     <div class="i-annc__content-wrap">
       <div class="i-annc__meta">
         <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-clone"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
         <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/announcement/annc_index5.html.erb b/modules/announcement/annc_index5.html.erb
index 01d3644..96d75dc 100644
--- a/modules/announcement/annc_index5.html.erb
+++ b/modules/announcement/annc_index5.html.erb
@@ -13,11 +13,11 @@
             <span class="i-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-            <i class="fa fa-clone"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/announcement/annc_index6.html.erb b/modules/announcement/annc_index6.html.erb
index 9ab0abc..2c1c15d 100644
--- a/modules/announcement/annc_index6.html.erb
+++ b/modules/announcement/annc_index6.html.erb
@@ -8,11 +8,11 @@
             <span class="i-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-            <i class="fa fa-clone"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/announcement/annc_index7.html.erb b/modules/announcement/annc_index7.html.erb
index cc2296a..39ca7ff 100644
--- a/modules/announcement/annc_index7.html.erb
+++ b/modules/announcement/annc_index7.html.erb
@@ -13,11 +13,11 @@
             <span class="i-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
             </span>
         </div>
diff --git a/modules/announcement/annc_index8.html.erb b/modules/announcement/annc_index8.html.erb
index 1a5b039..1a0a51b 100644
--- a/modules/announcement/annc_index8.html.erb
+++ b/modules/announcement/annc_index8.html.erb
@@ -5,11 +5,11 @@
     <div class="i-annc__content-wrap">
       <div class="i-annc__meta">
         <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-
+            <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-clone"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
         <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/announcement/annc_index9.html.erb b/modules/announcement/annc_index9.html.erb
index 18ae837..4eb083b 100644
--- a/modules/announcement/annc_index9.html.erb
+++ b/modules/announcement/annc_index9.html.erb
@@ -5,11 +5,11 @@
     <div class="i-annc__content-wrap">
       <div class="i-annc__meta">
         <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-        <!--    -->
+            <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-clone"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
         <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/announcement/show.html.erb b/modules/announcement/show.html.erb
index 03a8232..1fce32e 100644
--- a/modules/announcement/show.html.erb
+++ b/modules/announcement/show.html.erb
@@ -11,13 +11,19 @@
   .s-annc__sub-img.pull-left {
     margin-right: 2em;
   }
+  .show-announcement{
+    max-width: 800px;
+    margin: auto;
+    z-index: 1;
+    position: relative;
+  }
 </style>
 <article class="s-annc show-announcement">
   <h1 class="s-annc__show-title">{{title}}</h1>
-  
+
   <ul class="s-annc__meta-wrap list-unstyled no-print">
     <li class="s-annc__date-wrap s-annc__meta--item">
-      <i class="fa fa-calendar-o"></i>
+      <i class="fa-regular fa-calendar"></i>
       <span class="s-annc__date" date-format="%Y-%m-%d">{{updated_at}}</span>
     </li>
     <li class="s-annc__author-wrap s-annc__meta--item">
@@ -72,12 +78,12 @@
     // Hiding parent element when children elements are not present
     // Tags
     hideEmptyEl($('.s-annc__tag'), $('.s-annc__tag-wrap'));
-    
+
     // Attachments
     hideEmptyEl($('.s-annc__flie-title'), $('.s-annc__related-file'));
-    
+
     // Links
     hideEmptyEl($('.s-annc__link-title'), $('.s-annc__related-link'));
     $("img[src='']").remove();
   }(jQuery));
-</script>
\ No newline at end of file
+</script>
diff --git a/modules/archive/archive_index1.html.erb b/modules/archive/archive_index1.html.erb
index 27ec59e..6d99116 100644
--- a/modules/archive/archive_index1.html.erb
+++ b/modules/archive/archive_index1.html.erb
@@ -11,8 +11,10 @@
               <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
           </dt>
+          <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
               <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
             </dd>
diff --git a/modules/calendar/index.html.erb b/modules/calendar/index.html.erb
index 37e7cf8..14d7ab8 100644
--- a/modules/calendar/index.html.erb
+++ b/modules/calendar/index.html.erb
@@ -32,10 +32,11 @@
     <div id="calendar"></div>
     <div id="calendar_agenda"></div>
   </div>
+  <div class="createbooking"><a class="btn-primary">建立預約</a></div>
 </div>
 <div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
 <div id="calendar-loading"></div>
 
 <script type="text/javascript">
   var calendar = new Calendar("#calendar","{{page_id}}");
-</script>
\ No newline at end of file
+</script>
diff --git a/modules/event_news_mod/_event_news_widget1.html.erb b/modules/event_news_mod/_event_news_widget1.html.erb
index 7c69f7c..9ea150b 100644
--- a/modules/event_news_mod/_event_news_widget1.html.erb
+++ b/modules/event_news_mod/_event_news_widget1.html.erb
@@ -14,11 +14,11 @@
           <span class="w-annc__status label status {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
       </div>
diff --git a/modules/event_news_mod/_event_news_widget10.html.erb b/modules/event_news_mod/_event_news_widget10.html.erb
index a13f15d..b8ea116 100644
--- a/modules/event_news_mod/_event_news_widget10.html.erb
+++ b/modules/event_news_mod/_event_news_widget10.html.erb
@@ -11,7 +11,7 @@
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
         <span class="w-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
     </li>
diff --git a/modules/event_news_mod/_event_news_widget11.html.erb b/modules/event_news_mod/_event_news_widget11.html.erb
index fd16ced..a1753cc 100644
--- a/modules/event_news_mod/_event_news_widget11.html.erb
+++ b/modules/event_news_mod/_event_news_widget11.html.erb
@@ -5,7 +5,7 @@
   <ul class="w-annc__list" data-level="0" data-list="event_news">
     <li class="w-annc__item  row">
         <span class="w-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <h4 class="w-annc__entry-title  col-sm-9">
diff --git a/modules/event_news_mod/_event_news_widget14.html.erb b/modules/event_news_mod/_event_news_widget14.html.erb
index a191288..0a3e8e6 100644
--- a/modules/event_news_mod/_event_news_widget14.html.erb
+++ b/modules/event_news_mod/_event_news_widget14.html.erb
@@ -16,7 +16,7 @@
             <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
           </h4>
           <span class="w-annc__postdate-wrap  col-sm-4" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="w-annc__postdate">{{postdate}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/_event_news_widget15.html.erb b/modules/event_news_mod/_event_news_widget15.html.erb
index 96a22a7..584095a 100644
--- a/modules/event_news_mod/_event_news_widget15.html.erb
+++ b/modules/event_news_mod/_event_news_widget15.html.erb
@@ -37,11 +37,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/event_news_mod/_event_news_widget2.html.erb b/modules/event_news_mod/_event_news_widget2.html.erb
index f26d603..cbea813 100644
--- a/modules/event_news_mod/_event_news_widget2.html.erb
+++ b/modules/event_news_mod/_event_news_widget2.html.erb
@@ -13,11 +13,11 @@
             <span class="w-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="w-annc__postdate">{{postdate}}</span>
           </span>
           <span class="w-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="w-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/_event_news_widget20.html.erb b/modules/event_news_mod/_event_news_widget20.html.erb
index 0de8674..c3278c1 100644
--- a/modules/event_news_mod/_event_news_widget20.html.erb
+++ b/modules/event_news_mod/_event_news_widget20.html.erb
@@ -19,11 +19,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/event_news_mod/_event_news_widget21.html.erb b/modules/event_news_mod/_event_news_widget21.html.erb
index cb62a44..92334e0 100644
--- a/modules/event_news_mod/_event_news_widget21.html.erb
+++ b/modules/event_news_mod/_event_news_widget21.html.erb
@@ -37,11 +37,11 @@
             <span class="w-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="w-annc__postdate">{{postdate}}</span>
           </span>
           <span class="w-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="w-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/_event_news_widget22.html.erb b/modules/event_news_mod/_event_news_widget22.html.erb
index 161c0d5..fd8cd00 100644
--- a/modules/event_news_mod/_event_news_widget22.html.erb
+++ b/modules/event_news_mod/_event_news_widget22.html.erb
@@ -30,11 +30,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/event_news_mod/_event_news_widget3.html.erb b/modules/event_news_mod/_event_news_widget3.html.erb
index 37fc20c..fcb850b 100644
--- a/modules/event_news_mod/_event_news_widget3.html.erb
+++ b/modules/event_news_mod/_event_news_widget3.html.erb
@@ -10,11 +10,11 @@
             <span class="w-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="w-annc__postdate">{{postdate}}</span>
           </span>
           <span class="w-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="w-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/_event_news_widget4.html.erb b/modules/event_news_mod/_event_news_widget4.html.erb
index 589267c..ce09942 100644
--- a/modules/event_news_mod/_event_news_widget4.html.erb
+++ b/modules/event_news_mod/_event_news_widget4.html.erb
@@ -19,11 +19,11 @@
           <span class="w-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/event_news_mod/_event_news_widget5.html.erb b/modules/event_news_mod/_event_news_widget5.html.erb
index 7a6e556..e955686 100644
--- a/modules/event_news_mod/_event_news_widget5.html.erb
+++ b/modules/event_news_mod/_event_news_widget5.html.erb
@@ -7,11 +7,11 @@
     <div class="w-annc__content-wrap">
       <div class="w-annc__meta">
         <span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <span class="w-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
         <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/event_news_mod/_event_news_widget6.html.erb b/modules/event_news_mod/_event_news_widget6.html.erb
index 16b5ee3..c9769f4 100644
--- a/modules/event_news_mod/_event_news_widget6.html.erb
+++ b/modules/event_news_mod/_event_news_widget6.html.erb
@@ -5,7 +5,7 @@
   <ul class="w-annc__list" data-level="0" data-list="event_news">
     <li class="w-annc__item  row">
         <span class="w-annc__category-wrap  col-sm-2">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
         <h4 class="w-annc__entry-title  col-sm-8">
@@ -15,7 +15,7 @@
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
         <span class="w-annc__postdate-wrap  col-sm-2" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
     </li>
diff --git a/modules/event_news_mod/_event_news_widget7.html.erb b/modules/event_news_mod/_event_news_widget7.html.erb
index 5be63a7..e41b889 100644
--- a/modules/event_news_mod/_event_news_widget7.html.erb
+++ b/modules/event_news_mod/_event_news_widget7.html.erb
@@ -5,7 +5,7 @@
   <ul class="w-annc__list" data-level="0" data-list="event_news">
     <li class="w-annc__item  row">
         <span class="w-annc__postdate-wrap  col-sm-2" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
         <h4 class="w-annc__entry-title  col-sm-8">
@@ -15,7 +15,7 @@
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
         <span class="w-annc__category-wrap  col-sm-2">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
     </li>
diff --git a/modules/event_news_mod/event_news_index10.html.erb b/modules/event_news_mod/event_news_index10.html.erb
index 70577f3..c2653d8 100644
--- a/modules/event_news_mod/event_news_index10.html.erb
+++ b/modules/event_news_mod/event_news_index10.html.erb
@@ -3,7 +3,7 @@
   <ul class="i-annc__list" data-level="0" data-list="event_news">
     <li class="i-annc__item  row">
         <span class="i-annc__postdate-wrap  col-sm-2" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <h4 class="i-annc__entry-title  col-sm-8">
@@ -13,7 +13,7 @@
           <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
         <span class="i-annc__category-wrap  col-sm-2">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
     </li>
diff --git a/modules/event_news_mod/event_news_index11.html.erb b/modules/event_news_mod/event_news_index11.html.erb
index 6e6b177..9aacd56 100644
--- a/modules/event_news_mod/event_news_index11.html.erb
+++ b/modules/event_news_mod/event_news_index11.html.erb
@@ -9,7 +9,7 @@
           <a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
         <span class="i-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
     </li>
diff --git a/modules/event_news_mod/event_news_index12.html.erb b/modules/event_news_mod/event_news_index12.html.erb
index ec569be..a440134 100644
--- a/modules/event_news_mod/event_news_index12.html.erb
+++ b/modules/event_news_mod/event_news_index12.html.erb
@@ -3,7 +3,7 @@
   <ul class="i-annc__list" data-level="0" data-list="event_news">
     <li class="i-annc__item  row">
         <span class="i-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <h4 class="i-annc__entry-title  col-sm-9">
diff --git a/modules/event_news_mod/event_news_index5.html.erb b/modules/event_news_mod/event_news_index5.html.erb
index 046373c..88a304e 100644
--- a/modules/event_news_mod/event_news_index5.html.erb
+++ b/modules/event_news_mod/event_news_index5.html.erb
@@ -11,11 +11,11 @@
             <span class="i-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/event_news_index6.html.erb b/modules/event_news_mod/event_news_index6.html.erb
index 7f621e4..7195e08 100644
--- a/modules/event_news_mod/event_news_index6.html.erb
+++ b/modules/event_news_mod/event_news_index6.html.erb
@@ -8,11 +8,11 @@
             <span class="i-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{postdate}}</span>
           </span>
           <span class="i-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
           </span>
         </div>
diff --git a/modules/event_news_mod/event_news_index7.html.erb b/modules/event_news_mod/event_news_index7.html.erb
index 560a257..5867143 100644
--- a/modules/event_news_mod/event_news_index7.html.erb
+++ b/modules/event_news_mod/event_news_index7.html.erb
@@ -11,11 +11,11 @@
           <span class="i-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
           </span>
       </div>
diff --git a/modules/event_news_mod/event_news_index8.html.erb b/modules/event_news_mod/event_news_index8.html.erb
index 0716710..01ac63b 100644
--- a/modules/event_news_mod/event_news_index8.html.erb
+++ b/modules/event_news_mod/event_news_index8.html.erb
@@ -5,11 +5,11 @@
     <div class="i-annc__content-wrap">
       <div class="i-annc__meta">
         <span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
         <span class="i-annc__status-wrap" data-list="statuses" data-level="1">
diff --git a/modules/event_news_mod/event_news_index9.html.erb b/modules/event_news_mod/event_news_index9.html.erb
index f18785a..305c868 100644
--- a/modules/event_news_mod/event_news_index9.html.erb
+++ b/modules/event_news_mod/event_news_index9.html.erb
@@ -5,11 +5,11 @@
       <div class="i-annc__content-wrap">
         <div class="i-annc__meta">
         <span class="i-annc__category-wrap  ">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
         </span>
         <span class="i-annc__postdate-wrap  " date-format="%Y-%m-%d">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{postdate}}</span>
         </span>
       </div>
diff --git a/modules/faq/faq_index2.html.erb b/modules/faq/faq_index2.html.erb
index c1f456c..9d1a740 100644
--- a/modules/faq/faq_index2.html.erb
+++ b/modules/faq/faq_index2.html.erb
@@ -9,6 +9,7 @@
         <span data-list="statuses" data-level="1">
           <span class="label status {{status-class}}">{{status}}</span>
         </span>
+        <i class="fa-solid fa-chevron-right" style="float:right;"></i>
       </h4>
       <section class="post">
       <p>{{answer}}</p>
@@ -22,15 +23,19 @@
 <script>
 $('.index-faqs.index2 .index-content .index-content-title-wrap').click(function(){
   $('section.post').slideUp(200);
+
   $(this).removeClass('open');
   if($("+section",this).css("display")=="none"){
       $("+section",this).slideDown(300);
       $(this).addClass("open");
+
   }
   if( $('.index-content-title-wrap').hasClass('open') ) {
-    $(".index-content-title-wrap").attr("aria-expanded","true");
+      $(".open>.fa-chevron-right").addClass("rotate");
+     $(".index-content-title-wrap").attr("aria-expanded","true");
   }
   else {
+          $(".fa-chevron-right").removeClass("rotate");
     $(".index-content-title-wrap").attr("aria-expanded","false");
   }
 })
diff --git a/modules/property_hire/index_calendar.html.erb b/modules/property_hire/index_calendar.html.erb
new file mode 100644
index 0000000..1d79562
--- /dev/null
+++ b/modules/property_hire/index_calendar.html.erb
@@ -0,0 +1,66 @@
+<select name="property-selector" id="property-selector" data-list="filterprops" data-level="0">
+	<option value="{{id}}&reserve=false">{{title}}</option>
+</select>
+<div id="orbit_calendar" class="col-lg-0">
+  <div id="sec1">
+    <div class="btn-toolbar" id="navigation">
+      <div id="calendar-nav">
+        <div class="btn-group">
+          <button class="btn btn-default btn-sm" id="today_btn">{{today}}</button>
+        </div>
+      </div>
+    </div>
+    <div class="form-inline" id="range_selection"></div>
+  </div>
+  <div id='sec3' class="btn-toolbar">
+    <div class="btn-group calendar_mode">
+      <button class="btn btn-default mode_switch btn-sm" data-mode="timeGridDay" >{{day}}</button>
+      <button class="btn btn-default mode_switch btn-sm" data-mode="timeGridWeek" >{{week}}</button>
+      <button class="btn btn-default active mode_switch btn-sm" data-mode="dayGridMonth" >{{month}}</button>
+    </div>
+    <button id="refresh_btn" class="btn btn-default btn-sm">
+      <i class="icons-cycle"></i>
+    </button>
+  </div>
+  <div class="pull-right">
+    <button class="btn btn-default btn-sm" id="prev_month_btn">
+      <i class="icon-chevron-left"></i>
+    </button>
+    <button class="btn btn-default btn-sm" id="next_month_btn">
+      <i class="icon-chevron-right"></i>
+    </button>
+  </div>
+  <div class="clearfix"></div>
+  <div id="view_holder">
+    <h3 id="current_title" class="current_day_title"></h3>
+    <div id="calendar"></div>
+    <div id="calendar_agenda"></div>
+  </div>
+<div id="calendar-loading"></div>
+
+<table class="table table-striped">
+	<thead>
+		<tr data-list="headers" data-level="0">
+			<th>{{column}}</th>
+		</tr>
+	</thead>
+	<tbody data-list="properties" data-level="0">
+		<tr>
+			<td><a href="{{url_to_show}}">{{title}}</a></td>
+			<td><img width="150" src="{{image-thumb}}" alt="property image"></td>
+			<td>{{location}}</td>
+			<td data-list="actions" data-level="1">
+				<a href="{{link}}" class="btn {{btn-class}}">{{text}}</a>
+			</td>
+		</tr>
+	</tbody>
+</table>
+{{pagination_goes_here}}
+
+<script type="text/javascript">
+	var calendar = new Calendar("#calendar", "{{first_property_id}}",{},"",false, "{{language}}");
+	$("#property-selector").on("change",function () {
+		calendar = new Calendar("#calendar", $(this).val(),{},"",false, "{{language}}");
+	})
+	$("#property-selector").prop('selectedIndex', 0);
+</script>
\ No newline at end of file
diff --git a/modules/property_hire/info.json b/modules/property_hire/info.json
index f338727..6873a59 100644
--- a/modules/property_hire/info.json
+++ b/modules/property_hire/info.json
@@ -1,5 +1,13 @@
 {
     "frontend": [
+      {
+          "filename" : "index_calendar",
+          "name" : {
+              "zh_tw" : "0. 有日曆列表",
+              "en" : "0.calendar List"
+              },
+          "thumbnail" : "thumb.png"
+      },
         {
             "filename" : "index",
             "name" : {
@@ -35,4 +43,4 @@
             "thumbnail" : "thumb.png"
         }
     ]
-}
\ No newline at end of file
+}
diff --git a/modules/publication/publications_index2.html.erb b/modules/publication/publications_index2.html.erb
index 37f3fec..13db0c4 100644
--- a/modules/publication/publications_index2.html.erb
+++ b/modules/publication/publications_index2.html.erb
@@ -3,7 +3,9 @@
   <ul class="i-annc__list" data-level="0" data-list="publications">
     <li class="i-annc__item row">
       <div class="i-annc__img-wrap col-sm-4">
+      <a href="{{link_to_show}}">
         <img class="i-annc__img" src="{{cover}}" alt="{{cover_description}}" title="{{cover_description}}">
+      </a>
       </div>
       <div class="i-annc__content-wrap col-sm-8">
         <div class="i-annc__meta">
@@ -11,11 +13,11 @@
             <span class="i-annc__status label status {{status-class}}">{{status}}</span>
           </span>
           <span class="i-annc__postdate-wrap" date-format="%Y-%m">
-            <i class="fa fa-calendar-o"></i>
+            <i class="fa-regular fa-calendar"></i>
             <span class="i-annc__postdate">{{pub_date}}</span>
           </span>
           <span class="i-annc__category-wrap">
-            <i class="fa fa-tasks"></i>
+            <i class="fa-solid fa-list"></i>
             <span class="i-annc__category">{{category}}</span>
           </span>
         </div>
@@ -28,3 +30,31 @@
   </ul>
 </div>
 {{pagination_goes_here}}
+<style>
+  .i-annc__img-wrap{
+
+  }
+  .i-annc__img{
+    border-radius: 1em;
+    &:hover{
+      box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
+      -webkit-transform:translateY(-6px);
+      -ms-transform:translateY(-6px);
+      transform:translateY(-6px);
+      -webkit-transition: all .3s ease;
+      -moz-transition: all .3s ease;
+      -ms-transition: all .3s ease;
+      -o-transition: all .3s ease;
+      transition: all .3s ease;
+    }
+  }
+.i-annc__content-wrap{
+      margin-top: 1em;
+      display: -webkit-box;
+-webkit-line-clamp: 10;
+-webkit-box-orient: vertical;
+overflow: hidden;
+text-overflow: ellipsis;
+}
+
+</style>
diff --git a/modules/publication/publications_index3.html.erb b/modules/publication/publications_index3.html.erb
index 2701d4b..b12ef30 100644
--- a/modules/publication/publications_index3.html.erb
+++ b/modules/publication/publications_index3.html.erb
@@ -12,11 +12,11 @@
           <span class="i-annc__status label {{status-class}}">{{status}}</span>
         </span>
         <span class="i-annc__postdate-wrap" date-format="%Y-%m">
-          <i class="fa fa-calendar-o"></i>
+          <i class="fa-regular fa-calendar"></i>
           <span class="i-annc__postdate">{{pub_date}}</span>
         </span>
         <span class="i-annc__category-wrap">
-          <i class="fa fa-tasks"></i>
+          <i class="fa-solid fa-list"></i>
           <span class="i-annc__category">{{category}}</span>
           </span>
       </div>
@@ -29,6 +29,23 @@
   </ul>
 </div>
 {{pagination_goes_here}}
+<style>
+.i-annc__item{
+  overflow: hidden;
+  margin-bottom: 1.875em;
+  box-shadow: #0000004d 0 0 4px;
+  border: 1px solid #bbb;
+  margin: 0.5em;
+  padding: 1em!important;
+  padding-left: 1em!important;
+  padding-right: 1em!important;
+  &:hover{
+    border: 1px solid #1a1b20;
+    box-shadow: #1a1b20 0 0 4px;
+  }
+}
+
+</style>
 <script>
 	var lilength = $('.index-publications-3 li.i-annc__item').length;
 	function combineul(){
diff --git a/modules/publication/show_publication.html.erb b/modules/publication/show_publication.html.erb
index 6e6888f..b70c006 100644
--- a/modules/publication/show_publication.html.erb
+++ b/modules/publication/show_publication.html.erb
@@ -39,4 +39,9 @@
     </div>
   </li>
 </ul>
-</div>
\ No newline at end of file
+</div>
+<style>
+.i-annc__content-wrap{
+  margin-top: 1em;
+}
+</style>
diff --git a/modules/universal_table/index2.html.erb b/modules/universal_table/index2.html.erb
index a2b81c7..d384584 100644
--- a/modules/universal_table/index2.html.erb
+++ b/modules/universal_table/index2.html.erb
@@ -9,22 +9,6 @@
       min-width: unset!important;
     }
   }
-  .universal-table-index3{
-    table-layout: auto!important;
-    .universal-th-icon{
-      margin:0;
-    }
-    .universal-th-text {
-      margin: 0;
-      .universal-th-icon{
-        margin:0;
-      }
-      .universal-th-text {
-        margin: 0;
-      }
-    }
-
-  }
   .universal-th-text{
     white-space: pre!important;
     overflow: hidden;
@@ -80,7 +64,7 @@
     width: 120px;
   }
 </style>
-<table class="table table-hover table-striped universal-table-index universal-table-index3">
+<table class="table table-hover table-striped universal-table-index universal-table-index2">
   <caption>
     <h3>{{table-name}}</h3>
     <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
diff --git a/modules/universal_table/index3.html.erb b/modules/universal_table/index3.html.erb
index 590cff5..a28e626 100644
--- a/modules/universal_table/index3.html.erb
+++ b/modules/universal_table/index3.html.erb
@@ -5,9 +5,20 @@
   tr>td:first-child{
     display: none!important;
   }
-  .universal-table-index4{
+  .universal-table-index3{
     table-layout: auto!important;
   }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -60,7 +71,7 @@
   }
 </style>
 <form class="form-inline universal-form-inline " action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index universal-table-index4">
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
   <div class="searchbtn">
     <div class="ken-click">
       <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
diff --git a/modules/universal_table/index4.html.erb b/modules/universal_table/index4.html.erb
index ee6278d..97b4a39 100644
--- a/modules/universal_table/index4.html.erb
+++ b/modules/universal_table/index4.html.erb
@@ -2,6 +2,17 @@
   .universal-table-index4{
     table-layout: auto!important;
   }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
diff --git a/modules/video_pro/_video_pro_widget1.html.erb b/modules/video_pro/_video_pro_widget1.html.erb
index e0253f6..800169a 100644
--- a/modules/video_pro/_video_pro_widget1.html.erb
+++ b/modules/video_pro/_video_pro_widget1.html.erb
@@ -2,14 +2,16 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_linkwrapper3">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
         <div class="video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
             <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
           </div>
         </div>
@@ -22,19 +24,13 @@
       display: flex;
       flex-wrap: wrap;
     }
-    .video_group_time{
-      color: #4487cb;
-    }
-    .video_tag{
-      color: #e4374a;
-    }
-    .video_title h4{
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
+    .video_title h5{
+      @extend .i-title;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
       overflow: hidden;
-      white-space: nowrap;
+      text-overflow: ellipsis;
     }
     .view_info{
       float: right;
@@ -43,4 +39,4 @@
       margin-right: 5px;
     }
   </style>
-</div>
\ No newline at end of file
+</div>
diff --git a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
index baf2cdb..3544d03 100644
--- a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
+++ b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
@@ -48,3 +48,6 @@
     });
   </script>
 </div>
+<style>
+
+</style>
diff --git a/modules/video_pro/video_pro_index1.html.erb b/modules/video_pro/video_pro_index1.html.erb
index 602f798..ae360f4 100644
--- a/modules/video_pro/video_pro_index1.html.erb
+++ b/modules/video_pro/video_pro_index1.html.erb
@@ -3,14 +3,16 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="  video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-        <img class=" col-sm-3 video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_linkwrapper3 col-sm-3">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
         <div class="col-sm-9 video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <!-- <span><img src="{{hd_icon_url}}" alt="HD"></span> -->
             <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
           </div>
         </div>
@@ -19,6 +21,9 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_desc{
+      height:auto!important;
+    }
     .video_data{
       background:#fff;
       overflow: hidden;
@@ -36,6 +41,7 @@
       padding:0;
       display: flex;
       flex-wrap: wrap;
+      overflow:hidden;
     }
     .video_group_time{
       color: #4487cb;
@@ -44,7 +50,7 @@
       color: #e4374a;
       display: none;
     }
-    .video_title h4{
+    .video_title h5{
       @extend .i-title;
       font-weight: bold;
       margin-bottom: 0;
diff --git a/modules/video_pro/video_pro_index2.html.erb b/modules/video_pro/video_pro_index2.html.erb
index fdaa92b..66259ac 100644
--- a/modules/video_pro/video_pro_index2.html.erb
+++ b/modules/video_pro/video_pro_index2.html.erb
@@ -24,22 +24,39 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+      <div class="video_linkwrapper">
         <img class="video_snapshot" src="{{snapshot_url}}"/>
+      </div>
         <div class="video_info">
-          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
-          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
-          <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
-          </div>
         </div>
       </a>
     </li>
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_group_time{
+      display: flex;
+    align-items: center;
+    }
+    .video_tag{
+          margin: 0.5em 0.5em 0.5em 0;
+    }
+    .video_data{
+      margin-bottom: 1em;
+          padding: 0 0.5em;
+      .video_link{
+        background: #f3f3f3;
+        position: relative;
+        display: block;
+        padding: 1em;
+      }
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
@@ -113,22 +130,13 @@
       text-decoration: none;
       font-size: 120%;
     }
-    .video_data_wrap {
-      padding-left: 0;
-    }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -143,4 +151,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index2_tag.html.erb b/modules/video_pro/video_pro_index2_tag.html.erb
index c918582..8ba705f 100644
--- a/modules/video_pro/video_pro_index2_tag.html.erb
+++ b/modules/video_pro/video_pro_index2_tag.html.erb
@@ -24,22 +24,39 @@
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
     <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_linkwrapper">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
         <div class="video_info">
-          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
-          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_group_time"><div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>{{video_postdate}}</div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
-          <div class="view_info">
-            <span><img src="{{hd_icon_url}}" alt="HD"></span>
-            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
-          </div>
         </div>
       </a>
     </li>
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_group_time{
+      display: flex;
+    align-items: center;
+    }
+    .video_tag{
+          margin: 0.5em 0.5em 0.5em 0;
+    }
+    .video_data{
+          padding: 0 0.5em;
+      margin-bottom: 1em;
+      .video_link{
+        background: #f3f3f3;
+        position: relative;
+        display: block;
+        padding: 1em;
+      }
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
@@ -113,22 +130,13 @@
       text-decoration: none;
       font-size: 120%;
     }
-    .video_data_wrap {
-      padding-left: 0;
-    }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -143,4 +151,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index3.html.erb b/modules/video_pro/video_pro_index3.html.erb
index da719a8..83bdd65 100644
--- a/modules/video_pro/video_pro_index3.html.erb
+++ b/modules/video_pro/video_pro_index3.html.erb
@@ -14,15 +14,15 @@
   </div>
   <h3 class="i-annc__page-title">{{page-title}}</h3>
   <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
-    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+    <li class="video_data col-sm-6" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
-        <div class="video_snapshot_wrap">
+        <div class="video_snapshot_wrap video_linkwrapper2">
           <img class="video_snapshot" src="{{snapshot_url}}"/>
           <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
         </div>
         <div class="video_info">
           <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
         </div>
       </a>
@@ -30,17 +30,30 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data{
+      margin-bottom: 1em;
+          padding: 0 0.5em;
+      .video_link{
+        background: #f3f3f3;
+        position: relative;
+        display: block;
+        padding: 1em;
+      }
+    }
+    .video_info{
+          margin: 1em 0;
+    }
     .video_data_wrap{
       display: flex;
       flex-wrap: wrap;
     }
-    .video_title h4{
-      font-size: 1.1em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5{
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .video_snapshot_wrap {
       position: relative;
@@ -72,4 +85,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}
diff --git a/modules/video_pro/video_pro_index_post_agency1.html.erb b/modules/video_pro/video_pro_index_post_agency1.html.erb
index 726f002..ac24f8e 100644
--- a/modules/video_pro/video_pro_index_post_agency1.html.erb
+++ b/modules/video_pro/video_pro_index_post_agency1.html.erb
@@ -12,11 +12,13 @@
   <ul class="video_data_wrap" data-list="videos" data-level="0">
     <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
       <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
-        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_linkwrapper">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
         <div class="video_info">
           <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
           <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_title"><h5>{{video_title}}</h5></div>
           <div class="video_desc">{{video_desc}}</div>
           <div class="view_info">
             <span><img src="{{hd_icon_url}}" alt="HD"></span>
@@ -28,6 +30,18 @@
   </ul>
   <div class="clearfix"></div>
   <style>
+    .video_data{
+      margin-bottom: 1em;
+      .video_link{
+        background: #f3f3f3;
+        position: relative;
+        display: block;
+        padding: 1em;
+      }
+    }
+    .video_info {
+        margin: 1em 0;
+    }
     .video_filter_area {
       margin-bottom: 20px;
     }
@@ -67,19 +81,13 @@
     .video_data_wrap {
       padding-left: 0;
     }
-    .video_group_time {
-      color: #4487cb;
-    }
-    .video_tag {
-      color: #e4374a;
-    }
-    .video_title h4 {
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .video_title h5 {
+            @extend .i-title;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+            text-overflow: ellipsis;
     }
     .view_info {
       float: right;
@@ -94,4 +102,4 @@
     })
   </script>
 </div>
-{{pagination_goes_here}}
\ No newline at end of file
+{{pagination_goes_here}}