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/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/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/menu.scss b/assets/stylesheets/template/modules/menu.scss
index c7b159b..fdbf669 100644
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@@ -2,74 +2,74 @@
 
 @import "../initial";
 
-// 選單樣式2
-.modules-menu{
-    @media (min-width: $screen-sm){
-      li{
-          padding-left: 0!important;
-      }
-      .modules-menu-level-1 > li > a{
-        color: $theme-color-second!important;
-      }
-    }
-  .modules-menu-level-0 > li{
-    @media (min-width: $screen-sm){
-      position: static!important;
-    }
-  }
-
-  .modules-menu-level-1{
-
-    @media (min-width: $screen-sm){
-      min-width:unset;
-      flex-wrap: wrap;
-      justify-content: flex-start;
-      left:0!important;
-      display: flex!important;
-      visibility: hidden;
-      opacity: 0;
-      width: 100vw!important;
-      box-shadow: 2px 2px 5px #00000033;
-      margin:0;
-      padding:1em 13% 3em!important;
-      transition-duration: 0.5s;
-      background: #f0f0f0;
-    }
-  }
-  .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{
-    visibility: visible!important;
-    opacity: 1!important;
-  }
-
-  .modules-menu-level-2 {
-    right:auto!important;
-    display: block;
-    top: auto!important;
-    left: auto!important;
-    background-color: transparent!important;
-    position: relative!important;
-  }
-  .modules-menu-level-1{
-    @media (min-width: $screen-sm) {
-      & > li {
-        width: 25%;
-        & > a {
-          padding-left: 1em;
-          padding: 5px 0;
-        }
-
-        &:hover {
-          .modules-menu-level-2 {
-            display: block;
-          }
-        }
-      }
-      .modules-menu-level-2{
-        display: block;
-      }
-    }
-  }
-}
+// // 選單樣式2
+// .modules-menu{
+//     @media (min-width: $screen-sm){
+//       li{
+//           padding-left: 0!important;
+//       }
+//       .modules-menu-level-1 > li > a{
+//         color: $theme-color-second!important;
+//       }
+//     }
+//   .modules-menu-level-0 > li{
+//     @media (min-width: $screen-sm){
+//       position: static!important;
+//     }
+//   }
+//
+//   .modules-menu-level-1{
+//
+//     @media (min-width: $screen-sm){
+//       min-width:unset;
+//       flex-wrap: wrap;
+//       justify-content: flex-start;
+//       left:0!important;
+//       display: flex!important;
+//       visibility: hidden;
+//       opacity: 0;
+//       width: 100vw!important;
+//       box-shadow: 2px 2px 5px #00000033;
+//       margin:0;
+//       padding:1em 13% 3em!important;
+//       transition-duration: 0.5s;
+//       background: #f0f0f0;
+//     }
+//   }
+//   .modules-menu-level-0 > li:hover .modules-menu-level-1, .modules-menu .modules-menu-level-0 > li.hover-class .modules-menu-level-1{
+//     visibility: visible!important;
+//     opacity: 1!important;
+//   }
+//
+//   .modules-menu-level-2 {
+//     right:auto!important;
+//     display: block;
+//     top: auto!important;
+//     left: auto!important;
+//     background-color: transparent!important;
+//     position: relative!important;
+//   }
+//   .modules-menu-level-1{
+//     @media (min-width: $screen-sm) {
+//       & > li {
+//         width: 25%;
+//         & > a {
+//           padding-left: 1em;
+//           padding: 5px 0;
+//         }
+//
+//         &:hover {
+//           .modules-menu-level-2 {
+//             display: block;
+//           }
+//         }
+//       }
+//       .modules-menu-level-2{
+//         display: block;
+//       }
+//     }
+//   }
+// }
 
 //固定選單
 .navFixed {
@@ -309,7 +309,11 @@
           // border-radius: 0.5em;
         }
       }
-
+      @media (min-width: $screen-sm)and(max-width: 1439px){
+        .modules-menu-level-1 {
+         right: 0;
+        }
+      }
       @media (min-width: $screen-sm) {
         margin: 0;
         padding: 0;
@@ -398,12 +402,15 @@
       }
 
       &:hover {
-        color: $theme-color-second;
+        background-color: $theme-color-second;
         @media(max-width: 769px){
           a,i {
            color: #fff;
          }
         }
+         &>a {
+          color: #fff;
+        }
       }
     }
 
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 410e586..9db3ccf 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;
 }
@@ -507,3 +504,6 @@ input.search_box{
       display: flex;
   }
 }
+.modal-backdrop{
+  z-index: 2;
+}
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..81c0099 100644
--- a/modules/announcement/show.html.erb
+++ b/modules/announcement/show.html.erb
@@ -14,10 +14,10 @@
 </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 +72,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/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}}