'banner'

assets/stylesheets/template/layout/content.scss

@@ -15,10 +15,10 @@ body{
   }
 }
 .downIcon {
+  display: block!important;
   position: absolute;
   left: 50%;
-  bottom: 15%;
+  bottom: 10%;
-  //bottom: 10%;
   z-index: 2;
   color: #fff;
 
@@ -676,3 +676,6 @@ body{
     }
   }
 }
+.black-screen-social-window{
+  padding: 0!important;
+}

assets/stylesheets/template/layout/header.scss

@@ -206,9 +206,6 @@ a#content{
   border-bottom: 1px solid #e8e8e8;
   color: #fff;
   height: auto;
-  .button-mid{
-    display: none;
-  }
 
   .container {
     @extend .response-container;

assets/stylesheets/template/modules/ad_banner.scss

@@ -24,6 +24,9 @@
     cursor: pointer;
   }
 }
+  .button-mid{
+    bottom: -27%!important;
+  }
 .ad-banner-widget-6{
   .w-ad-banner__caption a{
     display: block;
@@ -200,6 +203,9 @@ ul.button-mid{
       height: 1.5rem;
       font-size: 1.5rem;
       width: 1.5rem;
+    }
+    @media(max-width: 768px){
+       left: 0.5rem;
     }
 	}
 	.next-button{
@@ -230,6 +236,9 @@ ul.button-mid{
       height: 1.5rem;
       font-size: 1.5rem;
       width: 1.5rem;
+    }
+    @media(max-width: 768px){
+        right: 0.5rem;
     }
 	}
 }
@@ -441,7 +450,9 @@ ul.button-mid{
 
 // Widget 1
 .ba-banner-widget-1 {
-
+.button-mid{
+  top: 80%!important;
+}
   .w-ba-banner__caption {
     color: #fff;
     z-index: 200;
@@ -475,11 +486,6 @@ ul.button-mid{
 
 // Widget 2
 .ba-banner-widget-2 {
-  .w-ba-banner__image {
-    width: 100%;
-    height: auto;
-  }
-
   .youtube, .cycle-youtube {
     width: 100%;
     height: 100%;
@@ -491,11 +497,47 @@ ul.button-mid{
   }
 
 
-  .banner-pager {
+
-    right: 1em;
+  img{
-    top: -2em;
+    width: auto;
-    z-index: 102;
+    max-width: unset;
-    display: none;
+          @media(min-width:2561px){
+                width:100%;
+                height: auto;
+                max-width: fit-content;
+          }
+          @media(min-width:1921px){
+            height: 1290px;
+          }
+          @media(min-width:1601px)and (max-width:1920px){
+            height: 895px;
+          }
+          @media screen and (min-width:1441px) and (max-width:1600px){
+                height: 725px;
+          }
+          @media screen and (min-width:1440px) and (max-width:1441px){
+                height: 764px;
+          }
+          @media screen and (min-width:1281px) and (max-width:1439px){
+                height: 595px;
+          }
+          @media screen and (min-width:1025px) and (max-width:1280px){
+                height: 545px;
+          }
+          @media (max-width:1280px){
+                width:100%;
+                height: auto;
+                max-width: fit-content;
+          }
+          // @media screen and (min-width:$screen-xs) and (max-width:990px){
+          //       height: 850px;
+          // }
+          // @media(max-width: $screen-xs){
+          //       height: 660px;
+          // }
+          // @media(max-width: 390px){
+          //       height: 485px;
+          // }
   }
 }
 
@@ -514,7 +556,6 @@ ul.button-mid{
     bottom: 2em;
    li { height: unset; width: unset; }
   }
-  ul.button-mid { display: none; }
 }
 
 //Widget 4

assets/stylesheets/template/modules/announcement.scss

@@ -11,6 +11,9 @@
   padding: .4em .6em .4em;
 }
 // ## Gerneral styles for widgets
+.w-annc__more-wrap{
+  padding-top: 1em;;
+}
 .clearfix{
   display: flex;
   justify-content: center;

home/index.html.erb

@@ -8,7 +8,7 @@
   <%= render_orbit_bar %>
   <!-- <div class="background" data-pp="100"></div> -->
   <%= render_header %>
-  <div class="downIcon" ><a href="#onesection" title="移動到第一個區塊"><span><img style="display: none;" src="/assets/down.svg" title="移動到第一個區塊" alt="移動到第一個區塊"></span></a></div>
+  <div class="downIcon" ><a href="#onesection" title="移動到第一個區塊"><span><img  src="/assets/down.svg" title="移動到第一個區塊" alt="移動到第一個區塊"></span></a></div>
   <div class="bigcontent">
     <div class="layout-content topcontent">
     <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>