'first'

2026-03-19 11:32:51 +08:00 · 2026-03-19 11:32:51 +08:00 · 2f41f32da4
commit 2f41f32da4
777 changed files with 44327 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/README.md
+++ b/README.md
--- a/assets/.DS_Store
+++ b/assets/.DS_Store
--- a/assets/images/about-news-left.svg
+++ b/assets/images/about-news-left.svg
@ -0,0 +1,22 @@
 <svg width="130" height="424" viewBox="0 0 130 424" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2228_3115)">
 <rect width="130" height="424" fill="white"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 109.599 75)" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 96.7227 75)" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M96.2753 89.3066C97.1877 90.1265 98.6504 90.6578 100.299 90.6578C101.948 90.6578 103.411 90.1265 104.323 89.3066L105.307 89.3066C105.307 91.1503 103.065 92.6449 100.299 92.6449C97.5338 92.6449 95.292 91.1503 95.292 89.3066L96.2753 89.3066Z" fill="#939393"/>
 <circle cx="-1" cy="131" r="131" fill="#1C95D4" fill-opacity="0.2"/>
 <circle cx="-1" cy="240" r="92" fill="#1C95D4" fill-opacity="0.4"/>
 <circle cx="-1.5" cy="357.5" r="66.5" fill="#F3DD25"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 74.5986 231)" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 61.7227 231)" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M61.2753 245.307C62.1877 246.126 63.6504 246.658 65.2993 246.658C66.9482 246.658 68.4109 246.126 69.3233 245.307L70.3066 245.307C70.3066 247.15 68.0648 248.645 65.2993 248.645C62.5338 248.645 60.292 247.15 60.292 245.307L61.2753 245.307Z" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 43.5986 367)" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 30.7227 367)" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M30.2753 381.307C31.1877 382.126 32.6504 382.658 34.2993 382.658C35.9482 382.658 37.4109 382.126 38.3233 381.307L39.3066 381.307C39.3066 383.15 37.0648 384.645 34.2993 384.645C31.5338 384.645 29.292 383.15 29.292 381.307L30.2753 381.307Z" fill="#939393"/>
 </g>
 <defs>
 <clipPath id="clip0_2228_3115">
 <rect width="130" height="424" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/assets/images/about-news-right.svg
+++ b/assets/images/about-news-right.svg
@ -0,0 +1,14 @@
 <svg width="140" height="424" viewBox="0 0 140 424" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="131" cy="131" r="131" fill="#F3DD25" fill-opacity="0.6"/>
 <circle cx="131" cy="240" r="92" fill="#F3DD25" fill-opacity="0.8"/>
 <circle cx="130.5" cy="357.5" r="66.5" fill="#1C95D4"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 57.5986 103)" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 44.7227 103)" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M44.2753 117.307C45.1877 118.126 46.6504 118.658 48.2993 118.658C49.9482 118.658 51.4109 118.126 52.3233 117.307L53.3066 117.307C53.3066 119.15 51.0648 120.645 48.2993 120.645C45.5338 120.645 43.292 119.15 43.292 117.307L44.2753 117.307Z" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 76.5986 231)" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 63.7227 231)" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M63.2753 245.307C64.1877 246.126 65.6504 246.658 67.2993 246.658C68.9482 246.658 70.4109 246.126 71.3233 245.307L72.3066 245.307C72.3066 247.15 70.0648 248.645 67.2993 248.645C64.5338 248.645 62.292 247.15 62.292 245.307L63.2753 245.307Z" fill="#939393"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 95.5986 348)" fill="#3E3E3E"/>
 <circle cx="2.86133" cy="2.86133" r="2.86133" transform="matrix(-1 0 0 1 82.7227 348)" fill="#3E3E3E"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M82.2753 362.307C83.1877 363.126 84.6504 363.658 86.2993 363.658C87.9482 363.658 89.4109 363.126 90.3233 362.307L91.3066 362.307C91.3066 364.15 89.0648 365.645 86.2993 365.645C83.5338 365.645 81.292 364.15 81.292 362.307L82.2753 362.307Z" fill="#3E3E3E"/>
 </svg>
--- a/assets/images/account-icon.png
+++ b/assets/images/account-icon.png
--- a/assets/images/announcement-default.jpg
+++ b/assets/images/announcement-default.jpg
--- a/assets/images/arr.gif
+++ b/assets/images/arr.gif
--- a/assets/images/baby.gif
+++ b/assets/images/baby.gif
--- a/assets/images/baby.png
+++ b/assets/images/baby.png
--- a/assets/images/chevron-right-solid.svg
+++ b/assets/images/chevron-right-solid.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z"/></svg>
--- a/assets/images/cursor.png
+++ b/assets/images/cursor.png
--- a/assets/images/design_thumb.png
+++ b/assets/images/design_thumb.png
--- a/assets/images/dotballwhite.png
+++ b/assets/images/dotballwhite.png
--- a/assets/images/dotballwhite2.png
+++ b/assets/images/dotballwhite2.png
--- a/assets/images/down.svg
+++ b/assets/images/down.svg
@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>chevron-circle-down@1x</title><g id="Layer_2" data-name="Layer 2"><g id="Arrows"><g id="Down_Arrow_3_2x.png" data-name="Down Arrow 3@2x.png"><path d="M33,18a1,1,0,0,0-.71.29L22,27.65,11.71,18.29a1,1,0,1,0-1.41,1.41l11,10a1,1,0,0,0,1.41,0l11-10A1,1,0,0,0,33,18ZM22,0A22,22,0,1,0,44,22,22,22,0,0,0,22,0Zm0,42A20,20,0,1,1,42,22,20,20,0,0,1,22,42Z"/></g></g></g></svg>
--- a/assets/images/epaper_icon.png
+++ b/assets/images/epaper_icon.png
--- a/assets/images/footer.svg
+++ b/assets/images/footer.svg
@ -0,0 +1,3 @@
 <svg width="1400" height="116" viewBox="0 0 1400 116" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 12.4901V116H1401V12.4901C1278.82 36.944 1147.28 85.8516 899.568 85.8516C764.683 85.8516 524.497 34.1253 319.913 12.4901C98.2807 -10.948 51.3132 4.28304 0 12.4901Z" fill="white"/>
 </svg>
--- a/assets/images/hr.svg
+++ b/assets/images/hr.svg
@ -0,0 +1,4 @@
 <svg width="31" height="14" viewBox="0 0 31 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20.2375 13.8375L9.475 2.19601e-05L31 2.38419e-05L20.2375 13.8375Z" fill="#1C95D4" fill-opacity="0.6"/>
 <path d="M11.0125 13.8375L0.250026 2.19601e-05L21.775 2.38419e-05L11.0125 13.8375Z" fill="#F3DD25" fill-opacity="0.6"/>
 </svg>
--- a/assets/images/icon-view@2x.png
+++ b/assets/images/icon-view@2x.png
--- a/assets/images/index-news.svg
+++ b/assets/images/index-news.svg
@ -0,0 +1,52 @@
 <svg width="1248" height="152" viewBox="0 0 1248 152" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g filter="url(#filter0_f_2372_676)">
 <circle cx="53.5" cy="80.5" r="12.5" fill="#B1D9ED"/>
 </g>
 <g filter="url(#filter1_f_2372_676)">
 <circle cx="523" cy="31" r="19" fill="#B1D9ED"/>
 </g>
 <g filter="url(#filter2_f_2372_676)">
 <circle cx="1225" cy="129" r="19" fill="#F3DD25" fill-opacity="0.2"/>
 </g>
 <g filter="url(#filter3_f_2372_676)">
 <circle cx="23" cy="129" r="19" fill="#F3DD25" fill-opacity="0.2"/>
 </g>
 <g filter="url(#filter4_f_2372_676)">
 <circle cx="773" cy="23" r="19" fill="#F3DD25" fill-opacity="0.2"/>
 </g>
 <g filter="url(#filter5_f_2372_676)">
 <circle cx="1134.5" cy="80.5" r="12.5" fill="#B1D9ED"/>
 </g>
 <defs>
 <filter id="filter0_f_2372_676" x="37" y="64" width="33" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 <filter id="filter1_f_2372_676" x="500" y="8" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 <filter id="filter2_f_2372_676" x="1202" y="106" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 <filter id="filter3_f_2372_676" x="0" y="106" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 <filter id="filter4_f_2372_676" x="750" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 <filter id="filter5_f_2372_676" x="1118" y="64" width="33" height="33" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2372_676"/>
 </filter>
 </defs>
 </svg>
--- a/assets/images/left-01.png
+++ b/assets/images/left-01.png
--- a/assets/images/menu-icon-set.png
+++ b/assets/images/menu-icon-set.png
--- a/assets/images/next.png
+++ b/assets/images/next.png
--- a/assets/images/prev.png
+++ b/assets/images/prev.png
--- a/assets/images/pullquote.svg
+++ b/assets/images/pullquote.svg
@ -0,0 +1,4 @@
 <svg width="47" height="31" viewBox="0 0 47 31" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="15.5" cy="15.5" r="15.5" fill="#1C95D4" fill-opacity="0.6"/>
 <circle cx="31.5" cy="15.5" r="15.5" fill="#F3DD25" fill-opacity="0.6"/>
 </svg>
--- a/assets/images/right-01.png
+++ b/assets/images/right-01.png
--- a/assets/images/ruling_logo.png
+++ b/assets/images/ruling_logo.png
--- a/assets/images/shape-1.svg
+++ b/assets/images/shape-1.svg
@ -0,0 +1,6 @@
 <svg width="65" height="62" viewBox="0 0 65 62" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M0.000450437 3.97436C0.000450533 1.77938 1.60189 0 3.57737 0C5.55285 0 7.1543 1.77938 7.1543 3.97436L14.3081 3.97436C14.3081 1.77938 15.9095 0 17.885 0C19.8605 0 21.4619 1.77938 21.4619 3.97436L28.6157 3.97436C28.6157 1.77938 30.2171 0 32.1926 0C34.1681 0 35.7695 1.77938 35.7695 3.97436L42.9231 3.97436C42.9231 1.77938 44.5245 0 46.5 0C48.4755 0 50.0769 1.77938 50.0769 3.97436C50.0769 6.16934 51.6784 7.94872 53.6538 7.94872C55.6293 7.94872 57.2308 6.16934 57.2308 3.97436C57.2308 1.77938 58.8322 0 60.8077 0C62.7832 0 64.3846 1.77938 64.3846 3.97436L64.7821 3.97437V62H0V3.97437L0.000450437 3.97436ZM10.7312 7.94873C12.7067 7.94873 14.3081 6.16935 14.3081 3.97437H7.1543C7.1543 6.16935 8.75574 7.94873 10.7312 7.94873ZM25.0388 7.94873C27.0143 7.94873 28.6158 6.16935 28.6158 3.97437H21.4619C21.4619 6.16935 23.0634 7.94873 25.0388 7.94873ZM39.3465 7.94873C41.3219 7.94873 42.9234 6.16935 42.9234 3.97437H35.7695C35.7695 6.16935 37.371 7.94873 39.3465 7.94873Z" fill="#EF7D1B" fill-opacity="0.6"/>
 <circle cx="28.6151" cy="34.9744" r="1.58974" fill="#3E3E3E"/>
 <circle cx="35.7692" cy="34.9744" r="1.58974" fill="#3E3E3E"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M34.428 41.3334C33.9211 41.7889 33.1084 42.0841 32.1923 42.0841C31.2762 42.0841 30.4635 41.7889 29.9566 41.3334L29.4103 41.3334C29.4103 42.3577 30.6558 43.1881 32.1923 43.1881C33.7288 43.1881 34.9744 42.3577 34.9744 41.3334L34.428 41.3334Z" fill="#3E3E3E"/>
 </svg>
--- a/assets/images/shape-2.svg
+++ b/assets/images/shape-2.svg
@ -0,0 +1,6 @@
 <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M9.95886 58.0421H24.0429L34.0007 68L43.9596 58.0411H58.0421V43.9572L68 33.9993L58.0411 24.0404V9.95782H43.9571L33.9993 0L24.0404 9.95886H9.95788V24.0429L0 34.0007L9.95886 43.9595V58.0421Z" fill="#F3DD25" fill-opacity="0.6"/>
 <circle cx="19.5897" cy="26.5897" r="1.58974" fill="#3E3E3E"/>
 <circle cx="26.744" cy="26.5897" r="1.58974" fill="#3E3E3E"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M25.4025 32.9487C24.8956 33.4042 24.0829 33.6994 23.1668 33.6994C22.2507 33.6994 21.438 33.4042 20.9311 32.9487L20.3848 32.9487C20.3848 33.9731 21.6303 34.8034 23.1668 34.8034C24.7033 34.8034 25.9489 33.9731 25.9489 32.9487L25.4025 32.9487Z" fill="#3E3E3E"/>
 </svg>
--- a/assets/images/shape-3.svg
+++ b/assets/images/shape-3.svg
@ -0,0 +1,6 @@
 <svg width="70" height="61" viewBox="0 0 70 61" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M35 0L70 61H0L35 0Z" fill="#1C95D4" fill-opacity="0.6"/>
 <circle cx="39.5897" cy="36.5897" r="1.58974" fill="#3E3E3E"/>
 <circle cx="46.744" cy="36.5897" r="1.58974" fill="#3E3E3E"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M45.4025 42.9487C44.8956 43.4042 44.0829 43.6994 43.1668 43.6994C42.2507 43.6994 41.438 43.4042 40.9311 42.9487L40.3848 42.9487C40.3848 43.9731 41.6303 44.8034 43.1668 44.8034C44.7033 44.8034 45.9489 43.9731 45.9489 42.9487L45.4025 42.9487Z" fill="#3E3E3E"/>
 </svg>
--- a/assets/images/shapes.svg
+++ b/assets/images/shapes.svg
@ -0,0 +1,5 @@
 <svg width="65" height="18" viewBox="0 0 65 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="34" cy="9" r="9" fill="#1C95D4" fill-opacity="0.2"/>
 <path d="M11 18L-4.21162e-07 1L22 1L11 18Z" fill="#F3DD25" fill-opacity="0.7"/>
 <rect x="49" y="1" width="16" height="16" fill="#EF7D1B" fill-opacity="0.2"/>
 </svg>
--- a/assets/images/site-logo.png
+++ b/assets/images/site-logo.png
--- a/assets/images/smile.svg
+++ b/assets/images/smile.svg
@ -0,0 +1,5 @@
 <svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="2.92857" cy="2.92857" r="2.92857" fill="#939393"/>
 <circle cx="19.0357" cy="2.92857" r="2.92857" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15.2436 14C14.3098 14.8391 12.8127 15.383 11.125 15.383C9.43732 15.383 7.94017 14.8391 7.00635 14L6 14C6 15.887 8.29454 17.4167 11.125 17.4167C13.9555 17.4167 16.25 15.887 16.25 14L15.2436 14Z" fill="#939393"/>
 </svg>
--- a/assets/images/titleicon.png
+++ b/assets/images/titleicon.png
--- a/assets/images/unit-footer.svg
+++ b/assets/images/unit-footer.svg
@ -0,0 +1,70 @@
 <svg width="1173" height="429" viewBox="0 0 1173 429" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M877.438 266.545H912.027L936.482 291L960.94 266.542H995.525V231.954L1019.98 207.498L995.523 183.04V148.455H960.934L936.479 124L912.021 148.458H877.436V183.046L852.98 207.502L877.438 231.959V266.545Z" fill="#F4E778"/>
 <circle cx="900.281" cy="197.588" r="2.45821" fill="#939393"/>
 <circle cx="911.343" cy="197.588" r="2.45821" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M909.27 207.421C908.486 208.125 907.229 208.582 905.813 208.582C904.396 208.582 903.139 208.125 902.356 207.421L901.511 207.421C901.511 209.005 903.437 210.289 905.813 210.289C908.188 210.289 910.114 209.005 910.114 207.421L909.27 207.421Z" fill="#939393"/>
 <path d="M535.281 57.7682C516.348 89.6728 526.864 130.885 558.769 149.818L627.331 34.2811C595.426 15.3482 554.214 25.8637 535.281 57.7682Z" fill="#F4E778"/>
 <circle cx="594.59" cy="38.5897" r="1.58974" fill="#939393"/>
 <circle cx="601.743" cy="38.5897" r="1.58974" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M600.403 44.9487C599.896 45.4042 599.083 45.6994 598.167 45.6994C597.251 45.6994 596.438 45.4042 595.931 44.9487L595.385 44.9487C595.385 45.9731 596.63 46.8034 598.167 46.8034C599.703 46.8034 600.949 45.9731 600.949 44.9487L600.403 44.9487Z" fill="#939393"/>
 <path d="M63.1722 260.83C50.6484 277.426 44.5741 291 44.5741 291C44.5741 291 59.3666 292.527 80.0016 289.979C77.4539 310.614 78.9805 325.406 78.9805 325.406C78.9805 325.406 92.5545 319.332 109.151 306.808C117.262 325.953 125.98 338 125.98 338C125.98 338 134.699 325.953 142.81 306.808C159.406 319.332 172.98 325.406 172.98 325.406C172.98 325.406 174.507 310.614 171.959 289.979C192.594 292.527 207.387 291 207.387 291C207.387 291 201.312 277.426 188.789 260.83C207.933 252.718 219.98 244 219.98 244C219.98 244 207.933 235.282 188.789 227.17C201.312 210.574 207.387 197 207.387 197C207.387 197 192.594 195.473 171.959 198.021C174.507 177.386 172.98 162.594 172.98 162.594C172.98 162.594 159.406 168.668 142.81 181.192C134.699 162.047 125.98 150 125.98 150C125.98 150 117.262 162.047 109.151 181.192C92.5545 168.668 78.9805 162.594 78.9805 162.594C78.9805 162.594 77.4538 177.386 80.0016 198.021C59.3666 195.473 44.5741 197 44.5741 197C44.5741 197 50.6484 210.574 63.1722 227.17C44.0278 235.282 31.9805 244 31.9805 244C31.9805 244 44.0278 252.718 63.1722 260.83Z" fill="#9ECFE8"/>
 <circle cx="142.57" cy="233.59" r="1.58974" fill="#939393"/>
 <circle cx="149.725" cy="233.59" r="1.58974" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M148.383 239.949C147.876 240.404 147.063 240.699 146.147 240.699C145.231 240.699 144.418 240.404 143.912 239.949L143.365 239.949C143.365 240.973 144.611 241.803 146.147 241.803C147.684 241.803 148.929 240.973 148.929 239.949L148.383 239.949Z" fill="#939393"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M606.785 416.488C609.659 402.568 607.411 388.026 600.374 375.575C592.683 361.969 579.902 351.975 564.843 347.792C549.784 343.61 533.68 345.58 520.074 353.271C507.623 360.309 498.197 371.609 493.481 385.017L448 372.384C456.104 346.933 473.538 325.422 496.875 312.23C521.366 298.386 550.353 294.839 577.46 302.368C604.566 309.897 627.572 327.885 641.415 352.376C654.607 375.714 658.449 403.135 652.267 429.12L606.785 416.488Z" fill="#CAE2EE"/>
 <g filter="url(#filter0_f_2228_3120)">
 <circle cx="316.48" cy="102.5" r="21.5" fill="#48A9DC"/>
 </g>
 <g filter="url(#filter1_f_2228_3120)">
 <circle cx="701.48" cy="243.5" r="21.5" fill="#F3DD25"/>
 </g>
 <g filter="url(#filter2_f_2228_3120)">
 <circle cx="931.48" cy="78.5" r="21.5" fill="white"/>
 </g>
 <g filter="url(#filter3_f_2228_3120)">
 <circle cx="64.5" cy="48.5" r="48.5" fill="white"/>
 </g>
 <g filter="url(#filter4_f_2228_3120)">
 <path d="M35.7394 292.302C55.4778 294.822 73.5218 280.864 76.0419 261.126L4.56305 252C2.04295 271.738 16.0011 289.782 35.7394 292.302Z" fill="#F4E778"/>
 </g>
 <g filter="url(#filter5_f_2228_3120)">
 <path d="M1167.65 318.25C1164.43 312.684 1156.81 311.637 1152.2 316.125L1136.71 331.198L1142.05 310.282C1143.64 304.055 1138.92 298 1132.48 298C1126.04 298 1121.32 304.055 1122.91 310.282L1128.25 331.198L1112.76 316.125C1108.15 311.637 1100.53 312.684 1097.31 318.25C1094.09 323.816 1096.99 330.918 1103.19 332.658L1124.02 338.5L1103.19 344.342C1096.99 346.082 1094.09 353.184 1097.31 358.75C1100.53 364.316 1108.15 365.363 1112.76 360.875L1128.25 345.802L1122.91 366.718C1121.32 372.945 1126.04 379 1132.48 379C1138.92 379 1143.64 372.945 1142.05 366.718L1136.71 345.802L1152.2 360.875C1156.81 365.363 1164.43 364.316 1167.65 358.75C1170.87 353.184 1167.98 346.082 1161.77 344.342L1140.94 338.5L1161.77 332.658C1167.98 330.918 1170.87 323.816 1167.65 318.25Z" fill="#47A8DB"/>
 </g>
 <path d="M1121.68 95.701L1118.18 97.2831C1113.09 99.5934 1109.12 103.819 1107.14 109.032C1105.17 114.245 1105.34 120.018 1107.63 125.084L1123.37 159.811C1123.58 160.27 1123.96 160.627 1124.44 160.805C1124.91 160.982 1125.44 160.964 1125.9 160.756L1164.31 143.353C1164.77 143.142 1165.13 142.758 1165.31 142.285C1165.49 141.811 1165.48 141.287 1165.27 140.826L1149.53 106.099C1147.24 101.036 1143.01 97.097 1137.79 95.1473C1132.56 93.1976 1126.77 93.3967 1121.68 95.701Z" fill="#CAE2EE"/>
 <path d="M178.07 60.2917L178.419 60.6498L178.07 60.2917ZM267.941 34.7144C268.112 34.9316 268.074 35.2459 267.857 35.4165L264.318 38.1962C264.101 38.3668 263.786 38.329 263.616 38.1119C263.445 37.8947 263.483 37.5804 263.7 37.4098L266.846 34.939L264.375 31.7933C264.204 31.5762 264.242 31.2619 264.459 31.0913C264.676 30.9207 264.991 30.9585 265.161 31.1756L267.941 34.7144ZM267.488 35.5197C266.026 35.344 264.437 35.1771 262.737 35.031L262.823 34.0346C264.535 34.1817 266.135 34.3499 267.607 34.5269L267.488 35.5197ZM253.169 34.5271C250.148 34.4683 246.938 34.5012 243.587 34.6658L243.538 33.667C246.913 33.5012 250.146 33.468 253.188 33.5273L253.169 34.5271ZM234.049 35.482C230.961 35.8625 227.801 36.3691 224.602 37.0275L224.4 36.048C227.628 35.3839 230.814 34.8731 233.927 34.4895L234.049 35.482ZM215.323 39.3604C212.317 40.2611 209.302 41.3131 206.305 42.5367L205.927 41.6108C208.956 40.3744 212.001 39.3119 215.036 38.4025L215.323 39.3604ZM197.654 46.5991C194.889 48.0798 192.161 49.7296 189.489 51.5655L188.923 50.7414C191.626 48.8838 194.386 47.215 197.182 45.7176L197.654 46.5991ZM181.938 57.4098C180.748 58.4448 179.574 59.5242 178.419 60.6498L177.721 59.9336C178.89 58.7947 180.077 57.7024 181.282 56.6551L181.938 57.4098ZM178.419 60.6498C177.143 61.8928 175.931 63.0903 174.777 64.2456L174.07 63.5392C175.226 62.3804 176.442 61.1795 177.721 59.9336L178.419 60.6498ZM167.73 71.578C165.12 74.4194 162.948 76.9626 161.127 79.2845L160.341 78.6674C162.18 76.3211 164.37 73.7579 166.993 70.9016L167.73 71.578ZM155.477 87.6512C153.642 90.982 152.559 93.9427 151.747 96.9767L150.781 96.7183C151.611 93.6186 152.721 90.5807 154.601 87.1687L155.477 87.6512ZM149.611 106.913C149.287 108.471 148.925 110.125 148.485 111.907L147.514 111.667C147.95 109.901 148.31 108.26 148.632 106.71L149.611 106.913Z" fill="#1C95D4"/>
 <path d="M681.07 169.495L681.419 169.137L681.07 169.495ZM770.941 195.073C771.112 194.856 771.074 194.541 770.857 194.371L767.318 191.591C767.101 191.42 766.786 191.458 766.616 191.675C766.445 191.892 766.483 192.207 766.7 192.377L769.846 194.848L767.375 197.994C767.204 198.211 767.242 198.525 767.459 198.696C767.676 198.866 767.991 198.829 768.161 198.611L770.941 195.073ZM770.488 194.267C769.026 194.443 767.437 194.61 765.737 194.756L765.823 195.752C767.535 195.605 769.135 195.437 770.607 195.26L770.488 194.267ZM756.169 195.26C753.148 195.319 749.938 195.286 746.587 195.121L746.538 196.12C749.913 196.286 753.146 196.319 756.188 196.26L756.169 195.26ZM737.049 194.305C733.961 193.925 730.801 193.418 727.602 192.76L727.4 193.739C730.628 194.403 733.814 194.914 736.927 195.298L737.049 194.305ZM718.323 190.427C715.317 189.526 712.302 188.474 709.305 187.25L708.927 188.176C711.956 189.413 715.001 190.475 718.036 191.385L718.323 190.427ZM700.654 183.188C697.889 181.707 695.161 180.057 692.489 178.222L691.923 179.046C694.626 180.903 697.386 182.572 700.182 184.07L700.654 183.188ZM684.938 172.377C683.748 171.342 682.574 170.263 681.419 169.137L680.721 169.853C681.89 170.992 683.077 172.085 684.282 173.132L684.938 172.377ZM681.419 169.137C680.143 167.894 678.931 166.697 677.777 165.541L677.07 166.248C678.226 167.407 679.442 168.608 680.721 169.853L681.419 169.137ZM670.73 158.209C668.12 155.368 665.948 152.824 664.127 150.503L663.341 151.12C665.18 153.466 667.37 156.029 669.993 158.886L670.73 158.209ZM658.477 142.136C656.642 138.805 655.559 135.844 654.747 132.81L653.781 133.069C654.611 136.168 655.721 139.206 657.601 142.618L658.477 142.136ZM652.611 122.874C652.287 121.316 651.925 119.662 651.485 117.88L650.514 118.12C650.95 119.886 651.31 121.527 651.632 123.078L652.611 122.874Z" fill="#1C95D4"/>
 <path d="M416.492 267.544L416.323 267.073L416.492 267.544ZM478.821 197.929C478.7 197.681 478.401 197.577 478.153 197.698L474.104 199.663C473.856 199.784 473.752 200.083 473.873 200.331C473.994 200.58 474.293 200.683 474.541 200.563L478.14 198.816L479.887 202.414C480.007 202.662 480.306 202.766 480.555 202.645C480.803 202.525 480.907 202.226 480.786 201.977L478.821 197.929ZM477.898 197.984C477.416 199.375 476.871 200.877 476.259 202.469L477.192 202.828C477.809 201.225 478.358 199.713 478.843 198.311L477.898 197.984ZM472.524 211.293C471.255 214.035 469.821 216.907 468.206 219.848L469.083 220.329C470.709 217.367 472.154 214.475 473.432 211.713L472.524 211.293ZM463.298 228.067C461.605 230.677 459.766 233.297 457.774 235.885L458.567 236.495C460.576 233.884 462.43 231.243 464.137 228.612L463.298 228.067ZM451.616 243.207C449.49 245.516 447.225 247.766 444.813 249.926L445.48 250.671C447.918 248.488 450.206 246.216 452.352 243.884L451.616 243.207ZM437.374 255.927C434.833 257.764 432.156 259.496 429.336 261.095L429.829 261.964C432.682 260.347 435.39 258.596 437.96 256.737L437.374 255.927ZM420.776 265.326C419.325 265.944 417.84 266.527 416.323 267.073L416.661 268.014C418.197 267.462 419.699 266.871 421.168 266.246L420.776 265.326ZM416.323 267.073C414.647 267.676 413.039 268.242 411.496 268.773L411.821 269.719C413.37 269.186 414.981 268.618 416.661 268.014L416.323 267.073ZM401.819 271.901C398.122 273.004 394.884 273.844 392 274.465L392.21 275.443C395.125 274.816 398.388 273.968 402.105 272.86L401.819 271.901ZM382.004 275.885C378.206 276.077 375.07 275.755 371.987 275.157L371.797 276.138C374.947 276.749 378.164 277.08 382.055 276.883L382.004 275.885ZM362.118 272.729C360.575 272.338 358.929 271.941 357.135 271.556L356.925 272.534C358.704 272.915 360.337 273.309 361.872 273.699L362.118 272.729Z" fill="#1C95D4"/>
 <path d="M1092.97 292.15L1092.79 291.684L1092.97 292.15ZM1153.41 220.888C1153.28 220.643 1152.98 220.548 1152.73 220.675L1148.74 222.748C1148.5 222.875 1148.4 223.177 1148.53 223.422C1148.65 223.667 1148.96 223.763 1149.2 223.636L1152.75 221.793L1154.59 225.343C1154.72 225.588 1155.02 225.683 1155.27 225.556C1155.51 225.429 1155.61 225.127 1155.48 224.882L1153.41 220.888ZM1152.49 220.968C1152.04 222.372 1151.54 223.887 1150.97 225.496L1151.91 225.83C1152.49 224.21 1152.99 222.684 1153.44 221.269L1152.49 220.968ZM1147.47 234.417C1146.28 237.192 1144.92 240.101 1143.39 243.084L1144.28 243.541C1145.82 240.537 1147.19 237.607 1148.39 234.812L1147.47 234.417ZM1138.7 251.432C1137.08 254.087 1135.31 256.754 1133.39 259.396L1134.2 259.984C1136.14 257.32 1137.92 254.63 1139.55 251.954L1138.7 251.432ZM1127.43 266.88C1125.37 269.245 1123.16 271.555 1120.81 273.779L1121.5 274.506C1123.87 272.259 1126.1 269.925 1128.18 267.537L1127.43 266.88ZM1113.53 279.977C1111.04 281.882 1108.41 283.685 1105.64 285.359L1106.15 286.215C1108.96 284.522 1111.62 282.698 1114.14 280.772L1113.53 279.977ZM1097.19 289.819C1095.76 290.475 1094.29 291.098 1092.79 291.684L1093.15 292.616C1094.67 292.022 1096.16 291.392 1097.61 290.728L1097.19 289.819ZM1092.79 291.684C1091.13 292.332 1089.54 292.941 1088.01 293.514L1088.36 294.45C1089.89 293.876 1091.49 293.265 1093.15 292.616L1092.79 291.684ZM1078.42 296.9C1074.75 298.102 1071.54 299.029 1068.67 299.727L1068.91 300.698C1071.81 299.993 1075.05 299.058 1078.73 297.85L1078.42 296.9ZM1058.72 301.414C1054.93 301.708 1051.78 301.47 1048.69 300.955L1048.52 301.941C1051.69 302.467 1054.91 302.712 1058.8 302.411L1058.72 301.414ZM1038.75 298.793C1037.2 298.443 1035.55 298.09 1033.74 297.754L1033.56 298.737C1035.35 299.07 1036.99 299.421 1038.54 299.769L1038.75 298.793Z" fill="#1C95D4"/>
 <defs>
 <filter id="filter0_f_2228_3120" x="290.98" y="77" width="51" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 <filter id="filter1_f_2228_3120" x="675.98" y="218" width="51" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 <filter id="filter2_f_2228_3120" x="905.98" y="53" width="51" height="51" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 <filter id="filter3_f_2228_3120" x="12" y="-4" width="105" height="105" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 <filter id="filter4_f_2228_3120" x="0.268555" y="248" width="79.7734" height="48.5962" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 <filter id="filter5_f_2228_3120" x="1091.98" y="294" width="81" height="89" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2228_3120"/>
 </filter>
 </defs>
 </svg>
--- a/assets/images/unit.svg
+++ b/assets/images/unit.svg
@ -0,0 +1,43 @@
 <svg width="1121" height="295" viewBox="0 0 1121 295" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M992.968 273.034H1024.04L1046 295L1067.97 273.032H1099.03V241.964L1121 219.998L1099.03 198.03V166.966H1067.96L1046 145L1024.03 166.968H992.966V198.036L971 220.002L992.968 241.97V273.034Z" fill="#F4E778"/>
 <circle cx="1013.49" cy="211.097" r="2.20798" fill="#3E3E3E"/>
 <circle cx="1023.42" cy="211.097" r="2.20798" fill="#3E3E3E"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M1021.56 219.929C1020.86 220.561 1019.73 220.971 1018.45 220.971C1017.18 220.971 1016.05 220.561 1015.35 219.929L1014.59 219.929C1014.59 221.351 1016.32 222.505 1018.45 222.505C1020.59 222.505 1022.32 221.351 1022.32 219.929L1021.56 219.929Z" fill="#3E3E3E"/>
 <path d="M571.834 11.0919L557.552 22.5362L540.121 17.2567L546.483 34.3788L536.016 49.4154L554.231 48.5532L565.194 63.1258L570.088 45.4708L587.33 39.4406L572.14 29.3914L571.834 11.0919Z" fill="#9ECFE8"/>
 <g filter="url(#filter0_f_2559_775)">
 <circle cx="1087.5" cy="72.5" r="18.5" fill="#F3DD25" fill-opacity="0.5"/>
 </g>
 <g filter="url(#filter1_f_2559_775)">
 <circle cx="310.5" cy="96.5" r="18.5" fill="#F3DD25" fill-opacity="0.5"/>
 </g>
 <g filter="url(#filter2_f_2559_775)">
 <circle cx="23.5" cy="73.5" r="19.5" fill="#B1D9ED"/>
 </g>
 <g filter="url(#filter3_f_2559_775)">
 <circle cx="797.5" cy="90.5" r="19.5" fill="#B1D9ED"/>
 </g>
 <path d="M887.607 97.4279C887.436 97.645 887.474 97.9594 887.691 98.1299L891.23 100.909C891.447 101.08 891.762 101.042 891.932 100.825C892.103 100.608 892.065 100.293 891.848 100.123L888.702 97.6523L891.173 94.5064C891.343 94.2893 891.305 93.975 891.088 93.8044C890.871 93.6338 890.557 93.6716 890.386 93.8888L887.607 97.4279ZM888.06 98.2331C889.744 98.0306 891.661 97.8442 893.768 97.71L893.704 96.712C891.577 96.8475 889.641 97.0357 887.94 97.2403L888.06 98.2331ZM905.231 97.6193C908.84 97.7968 912.675 98.187 916.617 98.8861L916.792 97.9015C912.803 97.1941 908.926 96.7998 905.28 96.6205L905.231 97.6193ZM927.714 101.686C931.242 102.865 934.768 104.347 938.216 106.195L938.689 105.314C935.187 103.436 931.608 101.933 928.031 100.737L927.714 101.686ZM947.742 112.493C949.201 113.668 950.629 114.93 952.019 116.286L952.717 115.57C951.304 114.192 949.852 112.908 948.369 111.714L947.742 112.493ZM952.019 116.286C953.422 117.654 954.719 118.945 955.918 120.168L956.632 119.468C955.427 118.239 954.125 116.942 952.717 115.57L952.019 116.286ZM963.307 128.271C966.26 131.854 968.091 134.708 969.322 137.298L970.226 136.869C968.95 134.185 967.068 131.262 964.078 127.635L963.307 128.271ZM972.339 147.717C972.664 149.353 973.023 151.125 973.515 153.12L974.485 152.88C974 150.909 973.645 149.156 973.32 147.522L972.339 147.717Z" fill="#1C95D4"/>
 <path d="M177.607 200.572C177.436 200.355 177.474 200.041 177.691 199.87L181.23 197.091C181.447 196.92 181.762 196.958 181.932 197.175C182.103 197.392 182.065 197.707 181.848 197.877L178.702 200.348L181.173 203.494C181.343 203.711 181.305 204.025 181.088 204.196C180.871 204.366 180.557 204.328 180.386 204.111L177.607 200.572ZM178.06 199.767C179.744 199.969 181.661 200.156 183.768 200.29L183.704 201.288C181.577 201.152 179.641 200.964 177.94 200.76L178.06 199.767ZM195.231 200.381C198.84 200.203 202.675 199.813 206.617 199.114L206.792 200.099C202.803 200.806 198.926 201.2 195.28 201.38L195.231 200.381ZM217.714 196.314C221.242 195.135 224.768 193.653 228.216 191.805L228.689 192.686C225.187 194.564 221.608 196.067 218.031 197.263L217.714 196.314ZM237.742 185.507C239.201 184.332 240.629 183.07 242.019 181.714L242.717 182.43C241.304 183.808 239.852 185.092 238.369 186.286L237.742 185.507ZM242.019 181.714C243.422 180.346 244.719 179.055 245.918 177.832L246.632 178.532C245.427 179.761 244.125 181.058 242.717 182.43L242.019 181.714ZM253.307 169.729C256.26 166.146 258.091 163.292 259.322 160.702L260.226 161.131C258.95 163.815 257.068 166.738 254.078 170.365L253.307 169.729ZM262.339 150.283C262.664 148.647 263.023 146.875 263.515 144.88L264.485 145.12C264 147.091 263.645 148.844 263.32 150.478L262.339 150.283Z" fill="#1C95D4"/>
 <defs>
 <filter id="filter0_f_2559_775" x="1065" y="50" width="45" height="45" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2559_775"/>
 </filter>
 <filter id="filter1_f_2559_775" x="288" y="74" width="45" height="45" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2559_775"/>
 </filter>
 <filter id="filter2_f_2559_775" x="0" y="50" width="47" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2559_775"/>
 </filter>
 <filter id="filter3_f_2559_775" x="774" y="67" width="47" height="47" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
 <feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_2559_775"/>
 </filter>
 </defs>
 </svg>
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
--- a/assets/javascripts/plugin/bootstrap.bundle.min.js
+++ b/assets/javascripts/plugin/bootstrap.bundle.min.js
--- a/assets/javascripts/plugin/jquery-bullseye-min.js
+++ b/assets/javascripts/plugin/jquery-bullseye-min.js
@ -0,0 +1 @@
 !function($){"use strict";var t={fadeEffect:!0,effectTime:.5},i=$(window),e=function(t,i){var e=document.createElement("img"),s;t.data("bullseyeImage")?(t.html('<img src="'+t.data("bullseyeImage")+'">'),s=t.data("bullseyeImage")):(s=t.find("img").first().attr("src"),t.data("bullseyeImage",s)),i.fadeEffect&&t.find("img").first().css({opacity:0}),e.src=s,e.onload=function(){n(t,i)}},n=function(t,i){var e=t.find("img").first(),n={position:"relative",overflow:"hidden"},o={position:"absolute",top:0,right:0,bottom:0,left:0,margin:"auto",width:"100%",height:"auto"},a={start:{opacity:1,"-webkit-transition":"opacity "+i.effectTime+"s ease-in-out","-moz-transition":"opacity "+i.effectTime+"s ease-in-out","-o-transition":"opacity "+i.effectTime+"s ease-in-out",transition:"opacity "+i.effectTime+"s ease-in-out"},end:{opacity:"","-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}};t.css(n),e.css(o),s(t),i.fadeEffect&&e.css(a.start).on("transitionend",function(){$(this).css(a.end)})},s=function(t){var i=t.find("img").first(),e=t.innerHeight(),n,s;n=i.height(),e>n?(s=e/n,i.css({"-webkit-transform":"scale("+s+")","-moz-transform":"scale("+s+")","-o-transform":"scale("+s+")",transform:"scale("+s+")"})):i.css({"-webkit-transform":"","-moz-transform":"","-o-transform":"",transform:""})},o=function(t,n){e(t,n),i.on("resize",function(){s(t)})};$.fn.bullseye=function(i){var e=$.extend({},t,i);return this.each(function(){var t=$(this);o(t,e)})}}(window.jQuery);
--- a/assets/javascripts/plugin/jquery.mobile.custom.min.js
+++ b/assets/javascripts/plugin/jquery.mobile.custom.min.js
--- a/assets/javascripts/plugin/jquery.scrolling-tabs.min.js
+++ b/assets/javascripts/plugin/jquery.scrolling-tabs.min.js
--- a/assets/javascripts/plugin/modernizr.js
+++ b/assets/javascripts/plugin/modernizr.js
--- a/assets/javascripts/plugin/owl.carousel.min.js
+++ b/assets/javascripts/plugin/owl.carousel.min.js
--- a/assets/javascripts/plugin/picturefill.min.js
+++ b/assets/javascripts/plugin/picturefill.min.js
--- a/assets/stylesheets/bootstrap/_mixins.scss
+++ b/assets/stylesheets/bootstrap/_mixins.scss
@ -0,0 +1,959 @@
 //
 // Mixins
 // --------------------------------------------------
 // Utilities
 // -------------------------
 // Clearfix
 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
 //
 // For modern browsers
 // 1. The space content is one way to avoid an Opera bug when the
 //    contenteditable attribute is included anywhere else in the document.
 //    Otherwise it causes space to appear at the top and bottom of elements
 //    that are clearfixed.
 // 2. The use of `table` rather than `block` is only necessary if using
 //    `:before` to contain the top-margins of child elements.
@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
 }
 // WebKit-style focus
@mixin tab-focus() {
  // Default
  outline: thin dotted;
  // WebKit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
 }
 // Center-align a block level element
@mixin center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
 // Sizing shortcuts
@mixin size($width, $height) {
  width: $width;
  height: $height;
 }
@mixin square($size) {
  @include size($size, $size);
 }
 // Placeholder text
@mixin placeholder($color: $input-color-placeholder) {
  &::-moz-placeholder           { color: $color;   // Firefox
                                  opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder       { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
 }
 // Text overflow
 // Requires inline-block or block for proper styling
@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 // CSS image replacement
 //
 // Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
 // mixins being reused as classes with the same name, this doesn't hold up. As
 // of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
 // that we cannot chain the mixins together in Less, so they are repeated.
 //
 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
 // Deprecated as of v3.0.1 (will be removed in v4)
@mixin hide-text() {
  font: #{0/0} a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
 }
 // New mixin to use as of v3.0.1
@mixin text-hide() {
  @include hide-text();
 }
 // CSS3 PROPERTIES
 // --------------------------------------------------
 // Single side border-radius
@mixin border-top-radius($radius) {
  border-top-right-radius: $radius;
   border-top-left-radius: $radius;
 }
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
 }
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
 }
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
 }
 // Drop shadows
 //
 // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
 //   supported browsers that have box shadow capabilities now support the
 //   standard `box-shadow` property.
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
 }
 // Transitions
@mixin transition($transition...) {
  -webkit-transition: $transition;
          transition: $transition;
 }
@mixin transition-property($transition-property...) {
  -webkit-transition-property: $transition-property;
          transition-property: $transition-property;
 }
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
 }
@mixin transition-duration($transition-duration...) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
 }
@mixin transition-transform($transition...) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
 }
 // Transformations
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
          transform: rotate($degrees);
 }
@mixin scale($scale-args...) {
  -webkit-transform: scale($scale-args);
      -ms-transform: scale($scale-args); // IE9 only
          transform: scale($scale-args);
 }
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y); // IE9 only
          transform: translate($x, $y);
 }
@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
      -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew($x, $y);
 }
@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
 }
@mixin rotateX($degrees) {
  -webkit-transform: rotateX($degrees);
      -ms-transform: rotateX($degrees); // IE9 only
          transform: rotateX($degrees);
 }
@mixin rotateY($degrees) {
  -webkit-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees); // IE9 only
          transform: rotateY($degrees);
 }
@mixin perspective($perspective) {
  -webkit-perspective: $perspective;
     -moz-perspective: $perspective;
          perspective: $perspective;
 }
@mixin perspective-origin($perspective) {
  -webkit-perspective-origin: $perspective;
     -moz-perspective-origin: $perspective;
          perspective-origin: $perspective;
 }
@mixin transform-origin($origin) {
  -webkit-transform-origin: $origin;
     -moz-transform-origin: $origin;
      -ms-transform-origin: $origin; // IE9 only
          transform-origin: $origin;
 }
 // Animations
@mixin animation($animation) {
  -webkit-animation: $animation;
          animation: $animation;
 }
@mixin animation-name($name) {
  -webkit-animation-name: $name;
          animation-name: $name;
 }
@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
          animation-duration: $duration;
 }
@mixin animation-timing-function($timing-function) {
  -webkit-animation-timing-function: $timing-function;
          animation-timing-function: $timing-function;
 }
@mixin animation-delay($delay) {
  -webkit-animation-delay: $delay;
          animation-delay: $delay;
 }
@mixin animation-iteration-count($iteration-count) {
  -webkit-animation-iteration-count: $iteration-count;
          animation-iteration-count: $iteration-count;
 }
@mixin animation-direction($direction) {
  -webkit-animation-direction: $direction;
          animation-direction: $direction;
 }
 // Backface visibility
 // Prevent browsers from flickering when using CSS 3D transforms.
 // Default value is `visible`, but can be changed to `hidden`
@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
 }
 // Box sizing
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
 }
 // User select
 // For selecting text on the page
@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select; // IE10+
          user-select: $select;
 }
 // Resize anything
@mixin resizable($direction) {
  resize: $direction; // Options: horizontal, vertical, both
  overflow: auto; // Safari fix
 }
 // CSS3 Content Columns
@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
  -webkit-column-count: $column-count;
     -moz-column-count: $column-count;
          column-count: $column-count;
  -webkit-column-gap: $column-gap;
     -moz-column-gap: $column-gap;
          column-gap: $column-gap;
 }
 // Optional hyphenation
@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
      -ms-hyphens: $mode; // IE10+
       -o-hyphens: $mode;
          hyphens: $mode;
 }
 // Opacity
@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: #{alpha(opacity=$opacity-ie)};
 }
 // GRADIENTS
 // --------------------------------------------------
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9 and below.
@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(left, color-stop($start-color $start-percent), color-stop($end-color $end-percent)); // Safari 5.1-6, Chrome 10+
  background-image:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  -pie-background:  linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
 }
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
 // Color stops are not available in IE9 and below.
@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
  background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  -pie-background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
 }
@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
  background-repeat: repeat-x;
  background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
  background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  -pie-background: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
 }
@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  -pie-background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
 }
@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
  background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  -pie-background: linear-gradient($start-color, $mid-color $color-stop, $end-color);
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
 }
@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
  background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
  background-image: radial-gradient(circle, $inner-color, $outer-color);
  background-repeat: no-repeat;
 }
@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
  background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  -pie-background: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
 }
 // Reset filters for IE
 //
 // When you need to remove a gradient background, do not forget to use this to reset
 // the IE filter for IE9 and below.
@mixin reset-filter() {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 // Retina images
 //
 // Short retina mixin for setting background-image and -size
@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
  background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
    background-size: $width-1x $height-1x;
  }
 }
 // Responsive image
 //
 // Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) {
  display: $display;
  max-width: 100%; // Part 1: Set a maximum relative to the parent
  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
 }
 // COMPONENT MIXINS
 // --------------------------------------------------
 // Horizontal dividers
 // -------------------------
 // Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider($color: #e5e5e5) {
  height: 1px;
  margin: (($line-height-computed / 2) - 1) 0;
  overflow: hidden;
  background-color: $color;
 }
 // Panels
 // -------------------------
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
  border-color: $border;
  & > .panel-heading {
    color: $heading-text-color;
    background-color: $heading-bg-color;
    border-color: $heading-border;
    + .panel-collapse .panel-body {
      border-top-color: $border;
    }
  }
  & > .panel-footer {
    + .panel-collapse .panel-body {
      border-bottom-color: $border;
    }
  }
 }
 // Alerts
 // -------------------------
@mixin alert-variant($background, $border, $text-color) {
  background-color: $background;
  border-color: $border;
  color: $text-color;
  hr {
    border-top-color: darken($border, 5%);
  }
  .alert-link {
    color: darken($text-color, 10%);
  }
 }
 // Tables
 // -------------------------
@mixin table-row-variant($state, $background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.#{$state},
    > th.#{$state},
    &.#{$state} > td,
    &.#{$state} > th {
      background-color: $background;
    }
  }
  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.#{$state}:hover,
    > th.#{$state}:hover,
    &.#{$state}:hover > td,
    &.#{$state}:hover > th {
      background-color: darken($background, 5%);
    }
  }
 }
 // List Groups
 // -------------------------
@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;
    // [converter] extracted a& to a.list-group-item-#{$state}
  }
  a.list-group-item-#{$state} {
    color: $color;
    .list-group-item-heading { color: inherit; }
    &:hover,
    &:focus {
      color: $color;
      background-color: darken($background, 5%);
    }
    &.active,
    &.active:hover,
    &.active:focus {
      color: #fff;
      background-color: $color;
      border-color: $color;
    }
  }
 }
 // Button variants
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
@mixin button-variant($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
  &:hover,
  &:focus,
  &:active,
  &.active {
    color: $color;
    background-color: darken($background, 8%);
        border-color: darken($border, 12%);
  }
  .open & { &.dropdown-toggle {
    color: $color;
    background-color: darken($background, 8%);
        border-color: darken($border, 12%);
  } }
  &:active,
  &.active {
    background-image: none;
  }
  .open & { &.dropdown-toggle {
    background-image: none;
  } }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
  }
  .badge {
    color: $background;
    background-color: $color;
  }
 }
 // Button sizes
 // -------------------------
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  padding: $padding-vertical $padding-horizontal;
  font-size: $font-size;
  line-height: $line-height;
  border-radius: $border-radius;
 }
 // Pagination
 // -------------------------
@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
  > li {
    > a,
    > span {
      padding: $padding-vertical $padding-horizontal;
      font-size: $font-size;
    }
    &:first-child {
      > a,
      > span {
        @include border-left-radius($border-radius);
      }
    }
    &:last-child {
      > a,
      > span {
        @include border-right-radius($border-radius);
      }
    }
  }
 }
 // Labels
 // -------------------------
@mixin label-variant($color) {
  background-color: $color;
  &[href] {
    &:hover,
    &:focus {
      background-color: darken($color, 10%);
    }
  }
 }
 // Contextual backgrounds
 // -------------------------
 // [converter] $parent hack
@mixin bg-variant($parent, $color) {
  #{$parent} {
    background-color: $color;
  }
  a#{$parent}:hover {
    background-color: darken($color, 10%);
  }
 }
 // Typography
 // -------------------------
 // [converter] $parent hack
@mixin text-emphasis-variant($parent, $color) {
  #{$parent} {
    color: $color;
  }
  a#{$parent}:hover {
    color: darken($color, 10%);
  }
 }
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
 // Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
@mixin navbar-vertical-align($element-height) {
  margin-top: (($navbar-height - $element-height) / 2);
  margin-bottom: (($navbar-height - $element-height) / 2);
 }
 // Progress bars
 // -------------------------
@mixin progress-bar-variant($color) {
  background-color: $color;
  .progress-striped & {
    @include gradient-striped();
  }
 }
 // Responsive utilities
 // -------------------------
 // More easily include all the states for responsive-utilities.less.
 // [converter] $parent hack
@mixin responsive-visibility($parent) {
  #{$parent} {
    display: block !important;
  }
  table#{$parent}  { display: table; }
  tr#{$parent}     { display: table-row !important; }
  th#{$parent},
  td#{$parent}     { display: table-cell !important; }
 }
 // [converter] $parent hack
@mixin responsive-invisibility($parent) {
  #{$parent} {
    display: none !important;
  }
 }
 // Grid System
 // -----------
 // Centered container element
@mixin container-fixed() {
  margin-right: auto;
  margin-left: auto;
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
  @include clearfix();
 }
 // Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width) {
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
  @include clearfix();
 }
 // Generate the extra small columns
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  float: left;
  width: percentage(($columns / $grid-columns));
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
 }
@mixin make-xs-column-offset($columns) {
  @media (min-width: $screen-xs-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-xs-column-push($columns) {
  @media (min-width: $screen-xs-min) {
    left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-xs-column-pull($columns) {
  @media (min-width: $screen-xs-min) {
    right: percentage(($columns / $grid-columns));
  }
 }
 // Generate the small columns
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  @media (min-width: $screen-sm-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
 }
@mixin make-sm-column-offset($columns) {
  @media (min-width: $screen-sm-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-sm-column-push($columns) {
  @media (min-width: $screen-sm-min) {
    left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-sm-column-pull($columns) {
  @media (min-width: $screen-sm-min) {
    right: percentage(($columns / $grid-columns));
  }
 }
 // Generate the medium columns
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  @media (min-width: $screen-md-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
 }
@mixin make-md-column-offset($columns) {
  @media (min-width: $screen-md-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-md-column-push($columns) {
  @media (min-width: $screen-md-min) {
    left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-md-column-pull($columns) {
  @media (min-width: $screen-md-min) {
    right: percentage(($columns / $grid-columns));
  }
 }
 // Generate the large columns
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  @media (min-width: $screen-lg-min) {
    float: left;
    width: percentage(($columns / $grid-columns));
  }
 }
@mixin make-lg-column-offset($columns) {
  @media (min-width: $screen-lg-min) {
    margin-left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-lg-column-push($columns) {
  @media (min-width: $screen-lg-min) {
    left: percentage(($columns / $grid-columns));
  }
 }
@mixin make-lg-column-pull($columns) {
  @media (min-width: $screen-lg-min) {
    right: percentage(($columns / $grid-columns));
  }
 }
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 // [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-grid-columns() {
  $list: '';
  $i: 1;
  $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
 }
 // [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-grid-columns($class) {
  $list: '';
  $i: 1;
  $list: ".col-#{$class}-#{$i}";
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
 }
@mixin calc-grid-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .col-#{$class}-#{$index} {
      width: percentage(($index / $grid-columns));
    }
  }
  @if ($type == push) {
    .col-#{$class}-push-#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }
  @if ($type == pull) {
    .col-#{$class}-pull-#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }
  @if ($type == offset) {
    .col-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $grid-columns));
    }
  }
 }
 // [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-grid-columns($columns, $class, $type) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $class, $type);
  }
 }
 // Create grid for specific class
@mixin make-grid($class) {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class, width);
  @include loop-grid-columns($grid-columns, $class, pull);
  @include loop-grid-columns($grid-columns, $class, push);
  @include loop-grid-columns($grid-columns, $class, offset);
 }
 // Form validation states
 //
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.
@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
  // Color the label and help text
  .help-block,
  .control-label,
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline  {
    color: $text-color;
  }
  // Set the border and box shadow on specific inputs to match
  .form-control {
    border-color: $border-color;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken($border-color, 10%);
      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
      @include box-shadow($shadow);
    }
  }
  // Set validation states also for addons
  .input-group-addon {
    color: $text-color;
    border-color: $border-color;
    background-color: $background-color;
  }
  // Optional feedback icon
  .form-control-feedback {
    color: $text-color;
  }
 }
 // Form control focus state
 //
 // Generate a customized focus state and for any input with the specified color,
 // which defaults to the `$input-focus-border` variable.
 //
 // We highly encourage you to not customize the default value, but instead use
 // this to tweak colors on an as-needed basis. This aesthetic change is based on
 // WebKit's default styles, but applicable to a wider range of browsers. Its
 // usability and accessibility should be taken into account with any change.
 //
 // Example usage: change the default blue border and shadow to white for better
 // contrast against a dark gray background.
@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
  }
 }
 // Form control sizing
 //
 // Relative text size, padding, and border-radii changes for form controls. For
 // horizontal sizing, wrap controls in the predefined grid classes. `<select>`
 // element gets special love because it's special, and that's a fact!
 // [converter] $parent hack
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }
  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }
  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
 }
--- a/assets/stylesheets/bootstrap/_variables.scss
+++ b/assets/stylesheets/bootstrap/_variables.scss
@ -0,0 +1,833 @@
 // a flag to toggle asset pipeline / compass integration
 // defaults to true if twbs-font-path function is present (no function => twbs-font-path('') parsed as string == right side)
 // in Sass 3.3 this can be improved with: function-exists(twbs-font-path)
 $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;
 //
 // Variables
 // --------------------------------------------------
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.
 $gray-darker:            lighten(#000, 13.5%) !default; // #222
 $gray-dark:              lighten(#000, 20%) !default;   // #333
 $gray:                   lighten(#000, 33.5%) !default; // #555
 $gray-light:             lighten(#000, 60%) !default;   // #999
 $gray-lighter:           lighten(#000, 93.5%) !default; // #eee
 $brand-primary:         #47bab5 !default;
 $brand-success:         #5cb85c !default;
 $brand-info:            #5bc0de !default;
 $brand-warning:         #f0ad4e !default;
 $brand-danger:          #ed4c43 !default;
 //== Scaffolding
 //
 // ## Settings for some of the most global styles.
 //** Background color for `<body>`.
 $body-bg:               #fff !default;
 //** Global text color on `<body>`.
 $text-color:            $gray-dark !default;
 //** Global textual link color.
 $link-color:            $brand-primary !default;
 //** Link hover color set via `darken()` function.
 $link-hover-color:      darken($link-color, 15%) !default;
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
 $font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
 $font-size-base:          14px !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
 $font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
 $font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
 $font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-h5:            $font-size-base !default;
 $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.428571429 !default; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 //** By default, this inherits from the `<body>`.
 $headings-font-family:    inherit !default;
 $headings-font-weight:    500 !default;
 $headings-line-height:    1.1 !default;
 $headings-color:          inherit !default;
 //-- Iconography
 //
 //## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 $icon-font-path: "bootstrap/" !default;
 $icon-font-name:          "glyphicons-halflings-regular" !default;
 $icon-font-svg-id:        "glyphicons_halflingsregular" !default;
 //== Components
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 $padding-base-vertical:     6px !default;
 $padding-base-horizontal:   12px !default;
 $padding-large-vertical:    10px !default;
 $padding-large-horizontal:  16px !default;
 $padding-small-vertical:    5px !default;
 $padding-small-horizontal:  10px !default;
 $padding-xs-vertical:       1px !default;
 $padding-xs-horizontal:     5px !default;
 $line-height-large:         1.33 !default;
 $line-height-small:         1.5 !default;
 $border-radius-base:        4px !default;
 $border-radius-large:       6px !default;
 $border-radius-small:       3px !default;
 //** Global color for active items (e.g., navs or dropdowns).
 $component-active-color:    #fff !default;
 //** Global background color for active items (e.g., navs or dropdowns).
 $component-active-bg:       $brand-primary !default;
 //** Width of the `border` for generating carets that indicator dropdowns.
 $caret-width-base:          4px !default;
 //** Carets increase slightly in size for larger components.
 $caret-width-large:         5px !default;
 //== Tables
 //
 //## Customizes the `.table` component with basic values, each used across all table variations.
 //** Padding for `<th>`s and `<td>`s.
 $table-cell-padding:            8px !default;
 //** Padding for cells in `.table-condensed`.
 $table-condensed-cell-padding:  5px !default;
 //** Default background color used for all tables.
 $table-bg:                      transparent !default;
 //** Background color used for `.table-striped`.
 $table-bg-accent:               #f9f9f9 !default;
 //** Background color used for `.table-hover`.
 $table-bg-hover:                #f5f5f5 !default;
 $table-bg-active:               $table-bg-hover !default;
 //** Border color for table and cell borders.
 $table-border-color:            #ddd !default;
 //== Buttons
 //
 //## For each of Bootstrap's buttons, define text, background and border color.
 $btn-font-weight:                normal !default;
 $btn-default-color:              #333 !default;
 $btn-default-bg:                 #fff !default;
 $btn-default-border:             #ccc !default;
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
 $btn-primary-border:             darken($btn-primary-bg, 5%) !default;
 $btn-success-color:              #fff !default;
 $btn-success-bg:                 $brand-success !default;
 $btn-success-border:             darken($btn-success-bg, 5%) !default;
 $btn-info-color:                 #fff !default;
 $btn-info-bg:                    $brand-info !default;
 $btn-info-border:                darken($btn-info-bg, 5%) !default;
 $btn-warning-color:              #fff !default;
 $btn-warning-bg:                 $brand-warning !default;
 $btn-warning-border:             darken($btn-warning-bg, 5%) !default;
 $btn-danger-color:               #fff !default;
 $btn-danger-bg:                  $brand-danger !default;
 $btn-danger-border:              darken($btn-danger-bg, 5%) !default;
 $btn-link-disabled-color:        $gray-light !default;
 //== Forms
 //
 //##
 //** `<input>` background color
 $input-bg:                       #fff !default;
 //** `<input disabled>` background color
 $input-bg-disabled:              $gray-lighter !default;
 //** Text color for `<input>`s
 $input-color:                    $gray !default;
 //** `<input>` border color
 $input-border:                   #ccc !default;
 //** `<input>` border radius
 $input-border-radius:            $border-radius-base !default;
 //** Border color for inputs on focus
 $input-border-focus:             #66afe9 !default;
 //** Placeholder text color
 $input-color-placeholder:        $gray-light !default;
 //** Default `.form-control` height
 $input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
 //** Large `.form-control` height
 $input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
 //** Small `.form-control` height
 $input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
 $legend-color:                   $gray-dark !default;
 $legend-border-color:            #e5e5e5 !default;
 //** Background color for textual input addons
 $input-group-addon-bg:           $gray-lighter !default;
 //** Border color for textual input addons
 $input-group-addon-border-color: $input-border !default;
 //== Dropdowns
 //
 //## Dropdown menu container and contents.
 //** Background for the dropdown menu.
 $dropdown-bg:                    #fff !default;
 //** Dropdown menu `border-color`.
 $dropdown-border:                rgba(0,0,0,.15) !default;
 //** Dropdown menu `border-color` **for IE8**.
 $dropdown-fallback-border:       #ccc !default;
 //** Divider color for between dropdown items.
 $dropdown-divider-bg:            #e5e5e5 !default;
 //** Dropdown link text color.
 $dropdown-link-color:            $gray-dark !default;
 //** Hover color for dropdown links.
 $dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
 //** Hover background for dropdown links.
 $dropdown-link-hover-bg:         #f5f5f5 !default;
 //** Active dropdown menu item text color.
 $dropdown-link-active-color:     $component-active-color !default;
 //** Active dropdown menu item background color.
 $dropdown-link-active-bg:        $component-active-bg !default;
 //** Disabled dropdown menu item background color.
 $dropdown-link-disabled-color:   $gray-light !default;
 //** Text color for headers within dropdown menus.
 $dropdown-header-color:          $gray-light !default;
 // Note: Deprecated $dropdown-caret-color as of v3.1.0
 $dropdown-caret-color:           #000 !default;
 //-- Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view
 // of components dependent on the z-axis and are designed to all work together.
 //
 // Note: These variables are not generated into the Customizer.
 $zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
 $zindex-popover:           1010 !default;
 $zindex-tooltip:           1030 !default;
 $zindex-navbar-fixed:      1030 !default;
 $zindex-modal-background:  1040 !default;
 $zindex-modal:             1050 !default;
 //== Media queries breakpoints
 //
 //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
 // Extra small screen / phone
 // Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
 $screen-xs:                  480px !default;
 $screen-xs-min:              $screen-xs !default;
 $screen-phone:               $screen-xs-min !default;
 // Small screen / tablet
 // Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
 $screen-sm:                  769px !default;
 $screen-sm-min:              $screen-sm !default;
 $screen-tablet:              $screen-sm-min !default;
 // Medium screen / desktop
 // Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
 $screen-md:                  992px !default;
 $screen-md-min:              $screen-md !default;
 $screen-desktop:             $screen-md-min !default;
 // Large screen / wide desktop
 // Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
 $screen-lg:                  1200px !default;
 $screen-lg-min:              $screen-lg !default;
 $screen-lg-desktop:          $screen-lg-min !default;
 // So media queries don't overlap when required, provide a maximum
 $screen-xs-max:              ($screen-sm-min - 1) !default;
 $screen-sm-max:              ($screen-md-min - 1) !default;
 $screen-md-max:              ($screen-lg-min - 1) !default;
 //== Grid system
 //
 //## Define your custom responsive grid.
 //** Number of columns in the grid.
 $grid-columns:              12 !default;
 //** Padding between columns. Gets divided in half for the left and right.
 $grid-gutter-width:         30px !default;
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
 $grid-float-breakpoint:     $screen-sm-min !default;
 //** Point at which the navbar begins collapsing.
 $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
 //== Container sizes
 //
 //## Define the maximum width of `.container` for different screen sizes.
 // Small screen / tablet
 $container-tablet:             ((720px + $grid-gutter-width)) !default;
 //** For `$screen-sm-min` and up.
 $container-sm:                 $container-tablet !default;
 // Medium screen / desktop
 $container-desktop:            ((940px + $grid-gutter-width)) !default;
 //** For `$screen-md-min` and up.
 $container-md:                 $container-desktop !default;
 // Large screen / wide desktop
 $container-large-desktop:      ((1140px + $grid-gutter-width)) !default;
 //** For `$screen-lg-min` and up.
 $container-lg:                 $container-large-desktop !default;
 //== Navbar
 //
 //##
 // Basics of a navbar
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             $border-radius-base !default;
 $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
 $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height:       340px !default;
 $navbar-default-color:             #777 !default;
 $navbar-default-bg:                #f8f8f8 !default;
 $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
 // Navbar links
 $navbar-default-link-color:                #777 !default;
 $navbar-default-link-hover-color:          #333 !default;
 $navbar-default-link-hover-bg:             transparent !default;
 $navbar-default-link-active-color:         #555 !default;
 $navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
 $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 // Navbar brand label
 $navbar-default-brand-color:               $navbar-default-link-color !default;
 $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
 $navbar-default-brand-hover-bg:            transparent !default;
 // Navbar toggle
 $navbar-default-toggle-hover-bg:           #ddd !default;
 $navbar-default-toggle-icon-bar-bg:        #888 !default;
 $navbar-default-toggle-border-color:       #ddd !default;
 // Inverted navbar
 // Reset inverted navbar basics
 $navbar-inverse-color:                      $gray-light !default;
 $navbar-inverse-bg:                         #222 !default;
 $navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
 // Inverted navbar links
 $navbar-inverse-link-color:                 $gray-light !default;
 $navbar-inverse-link-hover-color:           #fff !default;
 $navbar-inverse-link-hover-bg:              transparent !default;
 $navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
 $navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
 $navbar-inverse-link-disabled-color:        #444 !default;
 $navbar-inverse-link-disabled-bg:           transparent !default;
 // Inverted navbar brand label
 $navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
 $navbar-inverse-brand-hover-color:          #fff !default;
 $navbar-inverse-brand-hover-bg:             transparent !default;
 // Inverted navbar toggle
 $navbar-inverse-toggle-hover-bg:            #333 !default;
 $navbar-inverse-toggle-icon-bar-bg:         #fff !default;
 $navbar-inverse-toggle-border-color:        #333 !default;
 //== Navs
 //
 //##
 //=== Shared nav styles
 $nav-link-padding:                          10px 15px !default;
 $nav-link-hover-bg:                         $gray-lighter !default;
 $nav-disabled-link-color:                   $gray-light !default;
 $nav-disabled-link-hover-color:             $gray-light !default;
 $nav-open-link-hover-color:                 #fff !default;
 //== Tabs
 $nav-tabs-border-color:                     #ddd !default;
 $nav-tabs-link-hover-border-color:          $gray-lighter !default;
 $nav-tabs-active-link-hover-bg:             $body-bg !default;
 $nav-tabs-active-link-hover-color:          $gray !default;
 $nav-tabs-active-link-hover-border-color:   #ddd !default;
 $nav-tabs-justified-link-border-color:            #ddd !default;
 $nav-tabs-justified-active-link-border-color:     $body-bg !default;
 //== Pills
 $nav-pills-border-radius:                   $border-radius-base !default;
 $nav-pills-active-link-hover-bg:            $component-active-bg !default;
 $nav-pills-active-link-hover-color:         $component-active-color !default;
 //== Pagination
 //
 //##
 $pagination-color:                     $link-color !default;
 $pagination-bg:                        #fff !default;
 $pagination-border:                    #ddd !default;
 $pagination-hover-color:               $link-hover-color !default;
 $pagination-hover-bg:                  $gray-lighter !default;
 $pagination-hover-border:              #ddd !default;
 $pagination-active-color:              #fff !default;
 $pagination-active-bg:                 $brand-primary !default;
 $pagination-active-border:             $brand-primary !default;
 $pagination-disabled-color:            $gray-light !default;
 $pagination-disabled-bg:               #fff !default;
 $pagination-disabled-border:           #ddd !default;
 //== Pager
 //
 //##
 $pager-bg:                             $pagination-bg !default;
 $pager-border:                         $pagination-border !default;
 $pager-border-radius:                  15px !default;
 $pager-hover-bg:                       $pagination-hover-bg !default;
 $pager-active-bg:                      $pagination-active-bg !default;
 $pager-active-color:                   $pagination-active-color !default;
 $pager-disabled-color:                 $pagination-disabled-color !default;
 //== Jumbotron
 //
 //##
 $jumbotron-padding:              30px !default;
 $jumbotron-color:                inherit !default;
 $jumbotron-bg:                   $gray-lighter !default;
 $jumbotron-heading-color:        inherit !default;
 $jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
 $state-success-text:             #3c763d !default;
 $state-success-bg:               #dff0d8 !default;
 $state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
 $state-info-text:                #31708f !default;
 $state-info-bg:                  #d9edf7 !default;
 $state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
 $state-warning-text:             #8a6d3b !default;
 $state-warning-bg:               #fcf8e3 !default;
 $state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
 $state-danger-text:              #a94442 !default;
 $state-danger-bg:                #f2dede !default;
 $state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
 //== Tooltips
 //
 //##
 //** Tooltip max width
 $tooltip-max-width:           200px !default;
 //** Tooltip text color
 $tooltip-color:               #fff !default;
 //** Tooltip background color
 $tooltip-bg:                  #000 !default;
 $tooltip-opacity:             .9 !default;
 //** Tooltip arrow width
 $tooltip-arrow-width:         5px !default;
 //** Tooltip arrow color
 $tooltip-arrow-color:         $tooltip-bg !default;
 //== Popovers
 //
 //##
 //** Popover body background color
 $popover-bg:                          #fff !default;
 //** Popover maximum width
 $popover-max-width:                   276px !default;
 //** Popover border color
 $popover-border-color:                rgba(0,0,0,.2) !default;
 //** Popover fallback border color
 $popover-fallback-border-color:       #ccc !default;
 //** Popover title background color
 $popover-title-bg:                    darken($popover-bg, 3%) !default;
 //** Popover arrow width
 $popover-arrow-width:                 10px !default;
 //** Popover arrow color
 $popover-arrow-color:                 #fff !default;
 //** Popover outer arrow width
 $popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
 //** Popover outer arrow color
 $popover-arrow-outer-color:           fadein($popover-border-color, 5%) !default;
 //** Popover outer arrow fallback color
 $popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
 //== Labels
 //
 //##
 //** Default label background color
 $label-default-bg:            $gray-light !default;
 //** Primary label background color
 $label-primary-bg:            $brand-primary !default;
 //** Success label background color
 $label-success-bg:            $brand-success !default;
 //** Info label background color
 $label-info-bg:               $brand-info !default;
 //** Warning label background color
 $label-warning-bg:            $brand-warning !default;
 //** Danger label background color
 $label-danger-bg:             $brand-danger !default;
 //** Default label text color
 $label-color:                 #fff !default;
 //** Default text color of a linked label
 $label-link-hover-color:      #fff !default;
 //== Modals
 //
 //##
 //** Padding applied to the modal body
 $modal-inner-padding:         20px !default;
 //** Padding applied to the modal title
 $modal-title-padding:         15px !default;
 //** Modal title line-height
 $modal-title-line-height:     $line-height-base !default;
 //** Background color of modal content area
 $modal-content-bg:                             #fff !default;
 //** Modal content border color
 $modal-content-border-color:                   rgba(0,0,0,.2) !default;
 //** Modal content border color **for IE8**
 $modal-content-fallback-border-color:          #999 !default;
 //** Modal backdrop background color
 $modal-backdrop-bg:           #000 !default;
 //** Modal backdrop opacity
 $modal-backdrop-opacity:      .5 !default;
 //** Modal header border color
 $modal-header-border-color:   #e5e5e5 !default;
 //** Modal footer border color
 $modal-footer-border-color:   $modal-header-border-color !default;
 $modal-lg:                    900px !default;
 $modal-md:                    600px !default;
 $modal-sm:                    300px !default;
 //== Alerts
 //
 //## Define alert colors, border radius, and padding.
 $alert-padding:               15px !default;
 $alert-border-radius:         $border-radius-base !default;
 $alert-link-font-weight:      bold !default;
 $alert-success-bg:            $state-success-bg !default;
 $alert-success-text:          $state-success-text !default;
 $alert-success-border:        $state-success-border !default;
 $alert-info-bg:               $state-info-bg !default;
 $alert-info-text:             $state-info-text !default;
 $alert-info-border:           $state-info-border !default;
 $alert-warning-bg:            $state-warning-bg !default;
 $alert-warning-text:          $state-warning-text !default;
 $alert-warning-border:        $state-warning-border !default;
 $alert-danger-bg:             $state-danger-bg !default;
 $alert-danger-text:           $state-danger-text !default;
 $alert-danger-border:         $state-danger-border !default;
 //== Progress bars
 //
 //##
 //** Background color of the whole progress component
 $progress-bg:                 #f5f5f5 !default;
 //** Progress bar text color
 $progress-bar-color:          #fff !default;
 //** Default progress bar color
 $progress-bar-bg:             $brand-primary !default;
 //** Success progress bar color
 $progress-bar-success-bg:     $brand-success !default;
 //** Warning progress bar color
 $progress-bar-warning-bg:     $brand-warning !default;
 //** Danger progress bar color
 $progress-bar-danger-bg:      $brand-danger !default;
 //** Info progress bar color
 $progress-bar-info-bg:        $brand-info !default;
 //== List group
 //
 //##
 //** Background color on `.list-group-item`
 $list-group-bg:                 #fff !default;
 //** `.list-group-item` border color
 $list-group-border:             #ddd !default;
 //** List group border radius
 $list-group-border-radius:      $border-radius-base !default;
 //** Background color of single list elements on hover
 $list-group-hover-bg:           #f5f5f5 !default;
 //** Text color of active list elements
 $list-group-active-color:       $component-active-color !default;
 //** Background color of active list elements
 $list-group-active-bg:          $component-active-bg !default;
 //** Border color of active list elements
 $list-group-active-border:      $list-group-active-bg !default;
 $list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
 $list-group-link-color:         #555 !default;
 $list-group-link-heading-color: #333 !default;
 //== Panels
 //
 //##
 $panel-bg:                    #fff !default;
 $panel-body-padding:          15px !default;
 $panel-border-radius:         $border-radius-base !default;
 //** Border color for elements within panels
 $panel-inner-border:          #ddd !default;
 $panel-footer-bg:             #f5f5f5 !default;
 $panel-default-text:          $gray-dark !default;
 $panel-default-border:        #ddd !default;
 $panel-default-heading-bg:    #f5f5f5 !default;
 $panel-primary-text:          #fff !default;
 $panel-primary-border:        $brand-primary !default;
 $panel-primary-heading-bg:    $brand-primary !default;
 $panel-success-text:          $state-success-text !default;
 $panel-success-border:        $state-success-border !default;
 $panel-success-heading-bg:    $state-success-bg !default;
 $panel-info-text:             $state-info-text !default;
 $panel-info-border:           $state-info-border !default;
 $panel-info-heading-bg:       $state-info-bg !default;
 $panel-warning-text:          $state-warning-text !default;
 $panel-warning-border:        $state-warning-border !default;
 $panel-warning-heading-bg:    $state-warning-bg !default;
 $panel-danger-text:           $state-danger-text !default;
 $panel-danger-border:         $state-danger-border !default;
 $panel-danger-heading-bg:     $state-danger-bg !default;
 //== Thumbnails
 //
 //##
 //** Padding around the thumbnail image
 $thumbnail-padding:           4px !default;
 //** Thumbnail background color
 $thumbnail-bg:                $body-bg !default;
 //** Thumbnail border color
 $thumbnail-border:            #ddd !default;
 //** Thumbnail border radius
 $thumbnail-border-radius:     $border-radius-base !default;
 //** Custom text color for thumbnail captions
 $thumbnail-caption-color:     $text-color !default;
 //** Padding around the thumbnail caption
 $thumbnail-caption-padding:   9px !default;
 //== Wells
 //
 //##
 $well-bg:                     #f5f5f5 !default;
 $well-border:                 darken($well-bg, 7%) !default;
 //== Badges
 //
 //##
 $badge-color:                 #fff !default;
 //** Linked badge text color on hover
 $badge-link-hover-color:      #fff !default;
 $badge-bg:                    $gray-light !default;
 //** Badge text color in active nav link
 $badge-active-color:          $link-color !default;
 //** Badge background color in active nav link
 $badge-active-bg:             #fff !default;
 $badge-font-weight:           bold !default;
 $badge-line-height:           1 !default;
 $badge-border-radius:         10px !default;
 //== Breadcrumbs
 //
 //##
 $breadcrumb-padding-vertical:   8px !default;
 $breadcrumb-padding-horizontal: 15px !default;
 //** Breadcrumb background color
 $breadcrumb-bg:                 #f5f5f5 !default;
 //** Breadcrumb text color
 $breadcrumb-color:              #ccc !default;
 //** Text color of current page in the breadcrumb
 $breadcrumb-active-color:       $gray-light !default;
 //** Textual separator for between breadcrumb elements
 $breadcrumb-separator:          "/" !default;
 //== Carousel
 //
 //##
 $carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
 $carousel-control-color:                      #fff !default;
 $carousel-control-width:                      15% !default;
 $carousel-control-opacity:                    .5 !default;
 $carousel-control-font-size:                  20px !default;
 $carousel-indicator-active-bg:                #fff !default;
 $carousel-indicator-border-color:             #fff !default;
 $carousel-caption-color:                      #fff !default;
 //== Close
 //
 //##
 $close-font-weight:           bold !default;
 $close-color:                 #000 !default;
 $close-text-shadow:           0 1px 0 #fff !default;
 //== Code
 //
 //##
 $code-color:                  #c7254e !default;
 $code-bg:                     #f9f2f4 !default;
 $kbd-color:                   #fff !default;
 $kbd-bg:                      #333 !default;
 $pre-bg:                      #f5f5f5 !default;
 $pre-color:                   $gray-dark !default;
 $pre-border-color:            #ccc !default;
 $pre-scrollable-max-height:   340px !default;
 //== Type
 //
 //##
 //** Text muted color
 $text-muted:                  $gray-light !default;
 //** Abbreviations and acronyms border color
 $abbr-border-color:           $gray-light !default;
 //** Headings small color
 $headings-small-color:        $gray-light !default;
 //** Blockquote small color
 $blockquote-small-color:      $gray-light !default;
 //** Blockquote font size
 $blockquote-font-size:        ($font-size-base * 1.25) !default;
 //** Blockquote border color
 $blockquote-border-color:     $gray-lighter !default;
 //** Page header border color
 $page-header-border-color:    $gray-lighter !default;
 //== Miscellaneous
 //
 //##
 //** Horizontal line color.
 $hr-border:                   $gray-lighter !default;
 //** Horizontal offset for forms and lists.
 $component-offset-horizontal: 180px !default;
--- a/assets/stylesheets/bootstrap/bootstrap.min.css
+++ b/assets/stylesheets/bootstrap/bootstrap.min.css
--- a/assets/stylesheets/template/RWD.scss
+++ b/assets/stylesheets/template/RWD.scss
@ -0,0 +1,50 @@
@charset "utf-8";
@import "initial";
@media (max-width: 1150px) {
    .black-screen-social-window {
        display: none !important;
    }
 }
@media(max-width: 767px) {
    .modules-menu .modules-menu-level-0>li { margin: 0; }
    .modules-menu .modules-menu-level-0>li:hover { background: transparent; }
 }
@media(max-width: $screen-xs) {
    .container > .navbar-header {
        margin: 0;
    }
    .buttons-slogan{
      flex-wrap: wrap;
    }
    .airplanimg{
      position: relative!important;
    }
 }
@media(max-width: 769px){
  .ad-banner-widget-6{
    .w-ba-banner__wrap {
        position: absolute!important;
    }
  }
 }
@media(max-width:480px){
      .rwdimgs{
          display:block;
      }
      .rwdimgl{
          display:none;
      }
  }
@media(min-width:480px){
    .rwdimgs{
          display:none;
      }
      .rwdimgl{
          display:block;
      }
 }
--- a/assets/stylesheets/template/base/_accesskey.scss
+++ b/assets/stylesheets/template/base/_accesskey.scss
@ -0,0 +1,21 @@
@charset "utf-8";
 a[accesskey] {
  position: absolute;
  margin-left: -0.9375em;
  color: transparent !important;
 }
 #orbit-bar a[accesskey] {
  color: #666666 !important;
 	margin-left: 0;
 	position: relative;
 	&:hover {
 		color: #ffffff !important;
 	}
 }
 .orbit-bar{
 	a[accesskey]{
 		position: relative!important;
 	}
 }
--- a/assets/stylesheets/template/base/_autobackup.bak
+++ b/assets/stylesheets/template/base/_autobackup.bak
@ -0,0 +1,310 @@
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
 .response-content {
  justify-self: auto;
 }
--- a/assets/stylesheets/template/base/_ckeditor-reset.scss
+++ b/assets/stylesheets/template/base/_ckeditor-reset.scss
@ -0,0 +1,41 @@
@charset "utf-8";
@import "variables";
 body[data-module="page_content"] {
  [data-content="true"] {
    h1 {
      font-size: $font-h1;
    }
    h2 {
      font-size: $font-h2;
    }
    h3 {
      font-size: $font-h3;
    }
    h4 {
      font-size: $font-h4;
    }
    h5 {
      font-size: $font-h5;
    }
    h6 {
      font-size: $font-h6;
    }
    table {
      border-collapse: collapse;
      width: 100%;
    }
    p {
      line-height: 2;
      margin: 0 0 0.625em;
    }
  }
 }
--- a/assets/stylesheets/template/base/_global.scss
+++ b/assets/stylesheets/template/base/_global.scss
@ -0,0 +1,174 @@
@charset "utf-8";
@import "../initial";
@import "variables";
 #orbit-bar .orbit-bar-title a{
  color: #333!important;
 }
 #orbit-bar .orbit-bar-inner > label:focus, #orbit-bar .orbit-bar-inner > label.focus{
  .orbit-bar-search-sign-language{
    display: block
  }
 }
 .orbit-bar-search-sign-language{
  @media(max-width:767px){
    position: absolute !important;
    width: 100%;
    margin: 0 !important;
    right: 0 !important;
    top: 2.5em !important;
  }
 }
 body #orbit-bar .orbit-bar-search-sign-language #search input[type="search"]{
  &:hover{
    outline: 3px solid $theme-color-second;
    background-color: #e6f0ff;  
    border-radius: 4px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
  &:focus{
    outline: 3px solid $theme-color-second;  
    background-color: #e6f0ff; 
    border-radius: 4px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
 }
 #orbit-bar .orbit-bar-inner > ul > li > ul li{
  list-style: none!important;
 }
 li{
  list-style: disc;
 }
 html {
  font-size: 100%;
 }
 body {
  font-family: $sub-font;
  font-size: inherit;
  margin-top: 2.5em;
  overflow: hidden scroll;
  letter-spacing: 0.5px;
  background-color: #f8f9fa;
 }
 a:link,
 a:visited {
  color: $theme-color-main;
 }
 a:hover,
 a:focus {
  color:$theme-color-second;
  text-decoration: none;
 }
 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }
 .admin-edit {
  clear: both;
 }
 // override bootsrap settings
 th,
 td {
  padding: 0.5em .5rem;
 }
 .borderless > tbody > tr > td,
 .borderless > tbody > tr > th,
 .borderless > tfoot > tr > td,
 .borderless > tfoot > tr > th,
 .borderless > thead > tr > td,
 .borderless > thead > tr > th {
  border: none !important;
 }
 // .widget-link__more{
 //   background-color: none;
 //   margin-bottom: 1em;
 //   font-size: 0.8125rem;
 //   -webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
 //   -moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
 //   -ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
 //   -o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
 //   transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
 //   background: none;
 //   border: none;
 //   color: $theme-color-main!important;
 //   box-shadow: $theme-color-main 0 0px 0px 2px inset;
 //
 //   &:hover {
 //     color: #fff!important;
 //     box-shadow:$theme-color-main 0 0px 0px 40px inset;
 //   }
 // }
 a.btn-primary {
  border-radius: 2em;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  padding: 1em 1.8em;
  margin-bottom: 1em;
  font-size: 0.8125rem;
  -webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  -moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  -ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  -o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
  background: none;
  border: none;
  color: $theme-color-third;
  box-shadow: $theme-color-third 0 0px 0px 2px inset;
  &:hover {
    color: #fff;
    // box-shadow:$theme-color-third 0 0px 0px 40px inset;
        background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641;
  }
 }
 .theadsearch2{
  .btn-primary{
    background-color:$theme-color-hover;
    border-color:$theme-color-hover;
  }
 }
 // Page heading
 .page-module-title {
  @extend .unity-title;
  margin-bottom: 1.125em;
 }
 .view-count {
  font-size: 0.75rem;
 }
 .view_count {
  > i {
    font-size: 0.75rem;
    &:before {
      margin-right: 0.5em;
    }
  }
 }
 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 // Take care of exceeding content
 // body[data-module="page_content"],
 // body[data-module="announcement"] {
 //   .layout-content {
 //     overflow-x: auto;
 //   }
 // }
 *[data-pp]>.editmode-ps>a, .admin-subpart-area .content>.editmode-ps>a{
  position: !important;
 }
--- a/assets/stylesheets/template/base/_go_back_top.scss
+++ b/assets/stylesheets/template/base/_go_back_top.scss
@ -0,0 +1,26 @@
@charset "utf-8";
@import "variables";
 .go-back-top {
  background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641;
  text-align: center;
  padding: 0.625em 0.75em;
  position: fixed;
  bottom: 0.9375em;
  right: 0.9375em;
  cursor: pointer;
  display: none;
  color: $theme-white;
  font-size: 0.750em;
  border-radius: 0.125em;
  z-index: 1050;
  opacity: .9;
  clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
  padding: 1em;
  &:hover {
    transition: background 0.4s ease;
    background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 25% 25%, #ffa0dc80, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #54a1e1 0%, #00437c 60%, #80b5ff 100%);
  }
 }
--- a/assets/stylesheets/template/base/_mixins.scss
+++ b/assets/stylesheets/template/base/_mixins.scss
@ -0,0 +1,54 @@
 // Set Triangle
@import "variables";
@mixin arrow($direction, $width, $height, $color) {
  width: 0;
  height: 0;
  border-style: solid;
  @if $direction == "top" {
    border-width: $width $height 0 $height;
    border-color: $color transparent transparent transparent;
  }
  @else if $direction == "right" {
    border-width: $height $width $height 0;
    border-color: transparent $color transparent transparent;
  }
  @else if $direction == "bottom" {
    border-width: 0 $height $width $height;
    border-color: transparent transparent $color transparent;
  }
  @else if $direction == "left" {
    border-width: $height 0 $height $width;
    border-color: transparent transparent transparent $color;
  }
  @else if $direction == "top-right" {
    border-width: 0 $width $height 0;
    border-color: transparent $color transparent transparent;
  }
  @else if $direction == "top-left" {
    border-width: $height $width 0 0;
    border-color: $color transparent transparent transparent;
  }
  @else if $direction == "bottom-right" {
    border-width: 0 0 $height $width;
    border-color: transparent transparent $color transparent;
  }
  @else if $direction == "bottom-left" {
    border-width: $height 0 0 $width;
    border-color: transparent transparent transparent $color;
  }
 }
@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
 }
--- a/assets/stylesheets/template/base/_orbitbar-override.scss
+++ b/assets/stylesheets/template/base/_orbitbar-override.scss
@ -0,0 +1,95 @@
@charset "utf-8";
@import "variables";
 $theme-white: #fff;
 $orbit-bg-color: #333;
 $orbit-bg-hover-color: #0095CF;
 $orbit-border-color: #444;
 body {
  #orbit-bar .orbit-bar-inner > ul > li:hover > a,
  #orbit-bar .orbit-bar-inner > ul > li:hover > span,
  #orbit-bar .orbit-bar-inner > ul > li:hover > label,
  #orbit-bar .orbit-bar-inner > ul > li > ul li:hover,
  #orbit-bar .orbit-bar-inner > ul > li > ul li.active {
    background: $orbit-bg-hover-color;
  }
  #orbit-bar .orbit-bar-inner {
    background: $orbit-bg-color;
  }
  #orbit-bar .orbit-bar-search-sign-language #search input[type="search"] {
    margin-bottom: 0;
    font-size: 0.8rem;
  }
  #orbit-bar #search {
    border-right: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
 }
@media screen and (max-width: 550px) {
  body #orbit-bar .orbit-bar-search-sign-language #search input[type="search"] {
    width: 8.75em;
  }
 }
@media (max-width: 540px) {
  body {
    #orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > a,
    #orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > span {
      background-color: $orbit-bg-color;
    }
    #orbit-bar .orbit-bar-inner > label {
      border-color: $theme-white;
      color: $theme-white;
    }
    #orbit-bar .orbit-bar-inner > ul {
      background: $orbit-bg-color;
    }
    #orbit-bar .orbit-bar-inner > ul > li > ul li:hover,
    #orbit-bar .orbit-bar-inner > ul > li > ul li.active {
      background: $orbit-bg-hover-color;
    }
    #orbit-bar .orbit-bar-inner > ul > li > ul a {
      color: $theme-white;
    }
    #orbit-bar .orbit-bar-inner > ul > li > ul li.divider {
      background: none;
      display: none;
    }
    #orbit-bar ul.orbit-bar-search-sign-language > li {
      background: none;
    }
    #orbit-bar ul.orbit-bar-search-sign-language > li {
      display: block;
    }
    #orbit-bar ul.orbit-bar-search-sign-language > li + li {
      border-top: 0.0625em solid $orbit-border-color;
      border-right: 0.0625em solid $orbit-border-color;
      box-sizing: border-box;
      box-shadow: none;
    }
    #orbit-bar ul.orbit-bar-search-sign-language > li + li:hover > ul {
      background-color: $orbit-bg-color;
    }
    .orbit-bar-logo + ul > li {
      border-bottom: 0.0625em solid $orbit-border-color;
    }
  }
 }
--- a/assets/stylesheets/template/base/_pagination.scss
+++ b/assets/stylesheets/template/base/_pagination.scss
@ -0,0 +1,20 @@
@charset "utf-8";
@import "variables";
 .pagination {
  li {
    a {
      font-size: 0.8125rem;
      margin: 0 0.2em;
      color: $theme-color-main;
    }
  }
  .active {
    a {
      background-color: $theme-color-main!important;
      border-color: $theme-color-main;
    }
  }
 }
--- a/assets/stylesheets/template/base/_sitemap-override.scss
+++ b/assets/stylesheets/template/base/_sitemap-override.scss
@ -0,0 +1,25 @@
@charset "utf-8";
@import "variables";
 body .sitemap-list {
  a {
    color: $theme-color-main;
    &:hover {
      color: lighten($theme-color-main, 10%);
    }
  }
  &.level-1 > li > a { 
    font-size: 1.2em; 
    font-family: $main-font;
  }
  &.level-2 > li > a { 
    font-size: 1em; 
    font-family: $main-font;
  }
  &.level-3 { 
    font-size: 0.8em; 
    font-family: $main-font;
  }
 }
--- a/assets/stylesheets/template/base/_unity.scss
+++ b/assets/stylesheets/template/base/_unity.scss
@ -0,0 +1,110 @@
@charset "utf-8";
@import "variables";
 .internal-page{
  .page-module-title{
    display: block !important;
    text-align: left !important;
      &:before{
        display: block;
        position: relative;
        text-align: center;
        content: '';
        height: 6px;
        width: 80px;
        background-color: $theme-color-second;
        margin-bottom: 0.2em;
      }
  }
 }
 .page-home{
  .unity-title{
    span{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
      &:before{
          background: url(/assets/titleicon.png) no-repeat left center;
          display: block;
          position: relative;
          text-align: center;
          content: '';
          width: 35px;
          height: 35px;
          background-size: contain;
          margin-top: 9px;
          margin-right: 4px;
      }
    }
  }
 }
  .unity-title {
  }
 // Title
 .unity-title {
  line-height: 1.5;
  font-size: $font-h3;
  font-weight: bold;
  color: $theme-color-main;
  text-align: center;
  .layout-footer & {
    margin-bottom: 0.625em;
    border-bottom: none;
    span {
      display: inline;
      margin-bottom: 0;
      border-bottom: none;
    }
  }
 }
 .i-title{
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: normal;
 }
 .i-subtitle{
  font-size: 1rem;
  font-weight: normal;
 }
 .metadata-date{
  list-style: none;
 }
 //transition
 .transition {
  cursor: pointer;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
 }
 .status {
  font-family: $main-font;
  font-size: 0.750em;
 }
 .status-top {
  background-color: $theme-color-main;
 }
 .status-hot {
  background-color: $theme-color-third;
 }
 .status-source {
  background-color: $theme-color-main;
  a {
    color: $theme-white;
  }
 }
 ol, ul{
  padding-left: 1.6em;
 }
--- a/assets/stylesheets/template/base/_utilities.scss
+++ b/assets/stylesheets/template/base/_utilities.scss
@ -0,0 +1,68 @@
@charset "utf-8";
@import "variables";
 // 把可以重覆使用的類別放在這個檔案裡
 // 只保留第一個editmode連結，後面的都藏起來以免使用者插入其他的內容造成版面跑版
 .single-child-datapp {
  > .editmode-ps + a[href^="/page_parts/"] {
    display: none;
  }
 }
 .transfrom-180 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: .3s all ease;
  transition: .3s all ease;
  position: absolute;
 }
 .text-white {
  color: white;
 }
 .text-black {
  color: black;
 }
 .text-red {
  color: red;
 }
 .text-primary {
  color: $theme-color-main;
 }
 .box-social-share {
  margin: 0.9375em 0;
  > * {
    display: inline-block !important;
    margin: 0 0.375em 0 0 !important;
    vertical-align: top !important;
    position: relative;
    top: 0;
    transition: 0.2s;
    &:hover {
      opacity: 0.8;
      top: -0.1875em;
    }
  }
  .fb-share-button.fb_iframe_widget {
    > span {
      vertical-align: top !important;
    }
  }
  .print-button {
    a {
      color: #333;
      font: 0.9375em/1.25em $main-font;
      .fa {
        color: #666;
        font-size: 1.125em;
        margin: 0 0.1875em 0 0;
      }
    }
  }
 }
--- a/assets/stylesheets/template/base/_variables.scss
+++ b/assets/stylesheets/template/base/_variables.scss
@ -0,0 +1,236 @@
@charset "utf-8";
@import "../../bootstrap/variables";
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,300;1,300&family=Barlow:wght@100;200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100&display=swap');
 // Base Color
 $theme-green-light: #EEF7F6;
 $theme-gray: #8b8b8b;
 $theme-gray-subtle: #ddd;
 $theme-gray-light: #cecece;
 $theme-gray-lighter: #f3f3f3;
 $theme-gray-dark: #363636;
 $theme-gray-darker: #242424;
 $theme-white: #fff;
 $theme-red: #d20001;
 $theme-blue: #003d7e;
 $theme-color-main: #333333;
 $theme-color-second:#00437c;
 $theme-color-third: #ec6641;
 $theme-color-green: #ec6641;
 $theme-color-hover:#00437c;
 // Font stacks
 $main-font: "Noto Sans TC", sans-serif;
 $sub-font: "Noto Sans TC", sans-serif;
 // $main-font: "arial", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
 // $sub-font: "arial", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
@font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }
 // Font sizes
 $font-15: 0.9375rem;
 $font-13: 0.8125rem;
 $font-h1: 2rem;
 $font-h2: 1.8rem;
 $font-h3: 1.3rem;
 $font-h4: 1rem;
 $font-h5: 0.9rem;
 $font-h6: 0.85rem;
 h1{
  font-size:2rem;
  @media(max-width:$screen-xs){
    font-size:2rem;
  }
 }
 h2{
 font-size: 1.8rem;
  @media(max-width:$screen-xs){
    font-size:1.8rem;
  }
 }
 h3{
  font-size:1.3rem;
  @media(max-width:$screen-xs){
    font-size:1.3rem;
  }
 }
 h4{
  font-size: 1rem;
  @media(max-width:$screen-xs){
    font-size:1rem;
  }
 }
 h5{
  font-size: 0.9rem;
 }
 h6{
  font-size: 0.85rem;
 }
 // $font-h1: 1.8rem;
 // $font-h2: 1.5rem;
 // $font-h3: 1.2rem;
 // $font-h4: 1.1rem;
 // $font-h5: 1rem;
 // $font-h6: 0.9rem;
 //
 // Modules
 // --------------------------------------------------
 // ## commonly use in all widgets
 // Font sizes
 $w-widget-title-font-size: 1.5rem;
 // Colors
 $w-border-color: $theme-gray-lighter;
 //
 // AD banner Module
 // --------------------------------------------------
 // Font sizes
 $w-caption-font-size: 1.4rem;
 $w-caption-desc: 0.85rem;
 //
 // Announcement Module
 // --------------------------------------------------
 // Font sizes
 $w-title-font-size-small: 0.75rem;
 $w-subtitle-font-size: 0.75rem;
 $w-meta-font-size: 0.75rem;
 $w-table-th-font-size: 0.75em;
 $w-table-td-font-size: 0.75em;
 $i-title-font-size-large: 2em;
 // colors
 $link-color: $theme-color-main;
 $link-hover-color: lighten($theme-color-main, 10%);
 $table-th-bgcolor: $theme-color-main;
 //
 // Archive Module
 // --------------------------------------------------
 // Font sizes
 $w-item-heading-font-size: 0.85rem;
 //
 // Member Module
 // --------------------------------------------------
 $border-width: 0.25em;
 .response-content {
  justify-self: auto;
 }
--- a/assets/stylesheets/template/initial.scss
+++ b/assets/stylesheets/template/initial.scss
@ -0,0 +1,4 @@
@import "bootstrap/mixins";
@import "bootstrap/variables";
@import "base/mixins";
@import "base/variables";
--- a/assets/stylesheets/template/jquery.scrolling-tabs.min.css
+++ b/assets/stylesheets/template/jquery.scrolling-tabs.min.css
@ -0,0 +1,8 @@
 /**
 * jquery-bootstrap-scrolling-tabs
 * @version v2.6.1
 * @link https://github.com/mikejacobson/jquery-bootstrap-scrolling-tabs
 * @author Mike Jacobson <michaeljjacobson1@gmail.com>
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */
 .scrtabs-tab-container *{box-sizing:border-box}.scrtabs-tab-container{height:42px}.scrtabs-tab-container .tab-content{clear:left}.scrtabs-tab-container.scrtabs-bootstrap4 .scrtabs-tabs-movable-container>.navbar-nav{-ms-flex-direction:row;flex-direction:row}.scrtabs-tabs-fixed-container{float:left;height:42px;overflow:hidden;width:100%}.scrtabs-tabs-movable-container{position:relative}.scrtabs-tabs-movable-container .tab-content{display:none}.scrtabs-tab-container.scrtabs-rtl .scrtabs-tabs-movable-container>ul.nav-tabs{padding-right:0}.scrtabs-tab-scroll-arrow{border:1px solid #ddd;border-top:none;color:#428bca;display:none;float:left;font-size:0.75rem;height:42px;margin-bottom:-1px;padding-left:2px;padding-top:13px;width:20px}.scrtabs-tab-scroll-arrow:hover{background-color:#eee}.scrtabs-tab-scroll-arrow,.scrtabs-tab-scroll-arrow .scrtabs-click-target{cursor:pointer}.scrtabs-tab-scroll-arrow.scrtabs-with-click-target{cursor:default}.scrtabs-tab-scroll-arrow.scrtabs-disable,.scrtabs-tab-scroll-arrow.scrtabs-disable .scrtabs-click-target{color:#ddd;cursor:default}.scrtabs-tab-scroll-arrow.scrtabs-disable:hover{background-color:initial}.scrtabs-tabs-fixed-container ul.nav-tabs>li{white-space:nowrap}
--- a/assets/stylesheets/template/layout/bo5.scss
+++ b/assets/stylesheets/template/layout/bo5.scss
@ -0,0 +1,373 @@
@charset "utf-8";
@import "../initial";
 .w-annc__item {
     clear: both;
 }
@media (min-width: 769px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left;
    }
 }
 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 0.0625em;
    padding-right: 0.9375em;
    padding-left: 0.9375em;
 }
 .card {
    border-radius: 0;
    border: 0;
 }
 .label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
 }
 .hide {
    display: none !important;
 }
 .fade:not(.show) {
    opacity: 1;
 }
 .navbar-toggle {
    top: 0;
    position: relative;
    float: right;
    margin-top: 0.5em;
    margin-right: 0.9375em;
    margin-bottom: 0.5em;
    background-color: transparent;
    background-image: none;
    border: 0.0625em solid transparent;
    border-radius: 0.25em;
 }
 .navbar-toggle .icon-bar {
  width: 22px;
  height: 2px;
  border-radius: 1px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  margin: 4px 0;
  transition: 0.3s;
 }
 .navbar-toggle .icon-bar {
    display: block;
    width: 1.375em;
    height: 0.125em;
    border-radius: 0.0625em;
 }
 .navbar-collapse{
      padding-right: 0.9375em;
    padding-left: 0.9375em;
 }
 .modules-menu-level-0{
  display: block;
 }
@media (min-width: 769px) {
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
 }
@media (min-width: 769px) {
    .navbar-header {
        float: left;
    }
    .navbar-nav{
      flex-direction: row;
    }
 }
@media (min-width: 769px) {
    .navbar-toggle {
        display: none;
    }
 }
 .navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1 {
   float: none;
 }
 .layout-header{
  display: block;
  padding: 0;
 }
 .dropdown-toggle::after{
  border: 0;
  margin: 0;
 }
 .navbar-brand {
    // float: left;
    // height: 3.125em;
    // padding: 0.9375em 0.9375em;
    // font-size: 1.125em;
    // line-height: 1.25em;
    @media(max-width:768px){
      float: none;
    }
 }
@media (max-width: 480px) {
    .layout-header .navbar-header .navbar-brand {
        display: block;
    }
 }
 .mobile-menu .collapse.navbar-collapse.modules-menu {
    transform: translateX(100%);
        -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
 }
 .mobile-menu .modules-menu.collapse.show {
    transform: translateX(0%);
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: .35s;
    -o-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
 }
@media (min-width: 992px) {
    .container,.container-lg,.container-md,.container-sm {
        max-width:100%;
    }
 }
@media (max-width: 992px) {
    .container{
        max-width:100%;
    }
 }
 a {
    text-decoration: unset;
 }
 .breadcrumb>li+li:before {
    padding: 0 0.3125em;
    color: #ccc;
    content: "/\00a0";
 }
 .breadcrumb>li{
  list-style: none;
 }
 .is-style-vk-group-shadow{
    background-color: #fff;
 }
 .h1, .h2, .h3, h1, h2, h3 {
    padding-top: 1.25em;
    margin-bottom: 0.625em;
 }
 .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 1.25em 0;
    border-radius: 0.25em
    li{
        list-style: none;
    }
 }
 .pagination>li {
    display: inline
 }
 .pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 0.375em 1.125em;
    margin-left: -0.0625em;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: #fff;
    border: 0.0625em solid #ddd
 }
 .pagination>li:first-child>a,.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 0.25em;
    border-bottom-left-radius: 0.25em
 }
 .pagination>li:last-child>a,.pagination>li:last-child>span {
    border-top-right-radius: 0.25em;
    border-bottom-right-radius: 0.25em
 }
 .pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>a.hover-class,.pagination>li>span:focus,.pagination>li>span:hover,.pagination>li>span.hover-class {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd
 }
 .pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>a.hover-class,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover,.pagination>.active>span.hover-class {
    z-index: 3;
    color: #fff;
    cursor: default;
 }
 .pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>a.hover-class,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover,.pagination>.disabled>span.hover-class {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd
 }
 .pagination-lg>li>a,.pagination-lg>li>span {
    padding: 0.625em 10.375em;
    font-size: 1.125em;
    line-height: 1.3333333
 }
 .pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-top-left-radius: 0.375em;
    border-bottom-left-radius: 0.375em
 }
 .pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-top-right-radius: 0.375em;
    border-bottom-right-radius: 0.375em
 }
 .pagination-sm>li>a,.pagination-sm>li>span {
    padding: 0.3125em 0.625em;
    font-size: 0.750em;
    line-height: 1.5
 }
 .pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-top-left-radius: 0.1875em;
    border-bottom-left-radius: 0.1875em
 }
 .pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-top-right-radius: 0.1875em;
    border-bottom-right-radius: 0.1875em
 }
 .pager {
    padding-left: 0;
    margin: 1.25em 0;
    text-align: center;
    list-style: none
 }
 .pager li {
    display: inline
 }
 .pager li>a,.pager li>span {
    display: inline-block;
    padding: 0.3125em 10.25em;
    background-color: #fff;
    border: 0.0625em solid #ddd;
    border-radius: 0.9375em
 }
 .pager li>a:focus,.pager li>a:hover,.pager li>a.hover-class {
    text-decoration: none;
    background-color: #eee
 }
 .pager .next>a,.pager .next>span {
    float: right
 }
 .pager .previous>a,.pager .previous>span {
    float: left
 }
 .pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>a.hover-class,.pager .disabled>span {
    color: #777;
    cursor: not-allowed;
    background-color: #fff
 }
 .card {
    border: 0;
    border-radius: 0;
 }
 .orbit-bar-title{
    padding-top: 0!important;
 }
 .i-annc__content-wrap{
    background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280;
    padding: 0.5em;
    height: 100%;
 }
 .index-announcement-7{
    .i-annc__item{
        &:hover{
        -webkit-transition: .6s all ease;
        -o-transition: .6s all ease;
        transition: .6s all ease;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        transform: translateY(-6px);
            .i-annc__content-wrap{
                background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 1% 1%, #fb8f72, transparent 30%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #2b7bbe 0%, #00437c 80%, #fb8f72 100%);
                color: #fff !important;
                .i-annc__title,.i-annc__postdate-wrap,.i-annc__category-wrap,.i-annc__subtitle,i{
                    color: #fff !important;
                }
            }
        }
    }
    .i-annc__content-wrap{
        margin-top: 0;
    }
    .i-annc__img-wrap{
        margin: 0 0.5em!important;
    }
 } 
 .modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0, 0);
 }
@media (min-width: 576px) {
    .modal-dialog {
        max-width: unset;
    }
 }
@media (min-width: 769px) {
    .modal-dialog {
        margin: 7.875em auto;
    }
 }
 button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
 }
 .close {
    float: right;
    font-size: 1.313em;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 0.0625em 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
 }
 .modal-backdrop.show {
    opacity: .5 !important;
 }
--- a/assets/stylesheets/template/layout/content.scss
+++ b/assets/stylesheets/template/layout/content.scss
@ -0,0 +1,284 @@
@charset "utf-8";
@import "../initial";
 .titlecolor{
  background: radial-gradient(circle at 70% 80%, #00437c, transparent 60%), radial-gradient(circle at 25% 25%, #a0bfff80, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #00437c 0%, #00437c 60%, #80b5ff 100%)!important;
 }
 .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
  @media(max-width: $screen-xs){
    padding: 0;
  }
 }
 .verticalhome{
  position: relative;
  width: 100%;
  overflow: hidden;
 }
 .internal-page{
  .layout-content{
    // background: transparent;
    padding-bottom: 4em;
  }
  .has-vivid-cyan-blue-color {
      color: #0693e3 !important;
  }
  p, .entry-content {
      // font-family: 'Droid Sans';
      color: #737f85;
      font-weight: 400;
      line-height: 25px;
      margin: 0;
      word-wrap: break-word;
  }
  a{
    color: $theme-color-second;
    &:hover{
          color: #23527c;
    text-decoration: underline;
    }
  }
 }
 .big-banner{
  width: 100%;
  position: relative;
 }
 .layout-content {
  position: relative;
  min-height: 42.5em;
  .container {
    @extend .response-container;
  }
 }
 .layout-content-inner{
  overflow: hidden;
 }
 .video-banner{
  max-width: 850px;
  margin: auto;
  position: relative;
 }
 .homebanner{
  -webkit-transition: .3s ease-out;
  -moz-transition: .3s ease-out;
  -ms-transition: .3s ease-out;
  -o-transition: .3s ease-out;
  transition: .3s ease-out;
 }
 .fa, .fas{
    font-family: "FontAwesome";
    font-weight: 900;
    font-style: normal;
 }
 .fab{
    font-family: "Font Awesome 5 Brands";
 }
 .padding0{
  .layout-content-box{
    &:hover{
      opacity: .8;
      transition: all .3s;
    }
  }
  .layout-content-box{
    padding: 0;
  }
    padding: 0 1em;
 }
 .contentwrap{
  overflow: hidden;
  position: relative;
  width: 100%;
  background:#e4e4e4;
  padding-bottom: 4em;
  padding-top: 4em;
   p{
   padding-bottom: 1em;
  }
 }
 .contentwrap1{
  overflow: hidden;
  position: relative;
  width: 100%;
  // background-image: linear-gradient(280deg, #e6e6e6 56%, #fff 0);
 }
 .contentwrap2{
  overflow: hidden;
  position: relative;
  width: 100%;
 }
 .contentwrap3{
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 4em;
  background:#F8F9FA;
 }
 .iconwrap{
  padding: 4em 0 0;
 }
 .zero{
  padding: 0;
 }
 .i-video_data{
  li{
    list-style: none;
  }
 }
 .ask-question .form-horizontal .control-label{
      width: 100% !important;
      max-width: 100% !important;
      text-align: justify !important;
 }
 .ask-question .single-col.form-horizontal .control-group .controls{
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
 }
 .ask-question-form{
  padding: 2em;
  border-radius: 10px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  border: 1px solid #E4E6EA;
  padding-bottom: 3em!important;
  @media(max-width: 820px){
      padding: 1.5em;
  }
 }
 .image-carousel{
  padding: 15px 0px 25px 0px;
 }
 .downIcon {
  a{
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
  }
    position: absolute;
    left: 48.8%;
    bottom: 10%;
    z-index:100;
    display: block;
    cursor: pointer;
    @media(max-width:$screen-xs){
      left: 45%;
    }
    &:hover{
      transform:scale(1.1);
      -webkit-transition: .3s ease-out;
      -moz-transition: .3s ease-out;
      -ms-transition: .3s ease-out;
      -o-transition: .3s ease-out;
      transition: .3s ease-out;
    }
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  opacity: 0.75;
  box-sizing: content-box;
  animation: move 3s ease-out 1s infinite;
 }
 .scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
 }
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
 }
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
 }
 .rotated{
      transform: rotate(180deg);
 }
 .is-style-vk-group-shadow{
    -webkit-box-shadow: 0px 0px 5px #00000033;
    box-shadow: 0px 0px 5px #00000033;
    padding: 1.8em;
    margin-top:2em;
    margin-bottom: 2em;
 }
 .is-layout-flex{
    @media(min-width:769px){
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
 }
 blockquote{
  background-color: #f9f9f9;
    border-left: 6px solid $theme-color-second;
    border-right: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    border-radius: 3px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 25px;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 20px 15px 20px 32px;
    position: relative;
    &:before{
      content: "\f10d";
    color: $theme-color-second;
    font-family: FontAwesome;
    font-size: 22px;
    position: absolute;
    left: 8px;
    top: 17px;
    }
 }
 .wp-block-list li{
    list-style: none;
    position: relative;
    margin-top: 0;
    margin-left: 0;
    margin: calc(1rem * 0.8) 0;
    line-height: calc(1rem * 1.65);
    &:before{
  color: #ff6900;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    content: "";
    left: -1.5em;
    }
 }
 .main-content{
      position: relative;
 }
--- a/assets/stylesheets/template/layout/footer.scss
+++ b/assets/stylesheets/template/layout/footer.scss
@ -0,0 +1,99 @@
@charset "utf-8";
@import "../initial";
 .layout-footer {
  z-index: 1;
  clear: both;
  position: relative;
  background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 1% 1%, #fb8f72, transparent 30%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #2b7bbe 0%, #00437c 80%, #fb8f72 100%);
  font-size: 0.8125em;
  padding: 2em 0;
  .footer-updated-date{
    clear: both;
    padding-left: 1em;
  }
  ul{
    padding: 0;
  }
  li{
    list-style: none;
  }
  .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  }
  .container {
    @extend .response-container;
  }
  .footer-counter a { padding-right: 0.5em; }
  a {
    color: #fff;
    &:hover,
    &:focus {
      opacity: .8;
    }
  }
 }
 .footer-counter{
  display: none;
 }
 .layout-footer-content{
  color: #fff;
  .fab{
    padding-right: 10px;
  }
 }
@media(max-width:$screen-xs){
  .footer-content{
    flex-wrap: wrap;
  }
  .part{
    width: 100%!important;
  }
 }
 .footericon{
      margin-right: 1rem;
      font-size: 0.8125em;
      border: #e0e0e0 1px solid;
      padding: 0.5em 1em;
      display: inline-block;
      margin-bottom: 1em;
 }
 .fatfooter{
  display: none;
  ul{
    padding: 0;
  }
  li{
    margin: 12px 0;
  }
 }
 .btn-fatfooter{
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 50px;
  background:#1a1b20;
  top: -59px;
  border-radius: 100px 100px 0 0;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
  .btn{
    color: #fff;
    opacity: .8;
    text-shadow: 0;
  }
 }
 .site-info {
    background: #ffffff;
    margin: 0;
    padding: 13px 0;
 }
--- a/assets/stylesheets/template/layout/header.scss
+++ b/assets/stylesheets/template/layout/header.scss
@ -0,0 +1,366 @@
@charset "utf-8";
@import "../initial";
 i.kenmenu-drop.fa-solid.fa-chevron-down {
    font-size: 0.8em;
 }
 .fc-cal-date-selected-fusion {
  font-size: 1em!important;
 }
 .outdropdowns{
  background-color: #fff;
  position: relative;
  z-index: 1;
  padding: 0.5em 0;
 }
 .header-nav {
  display: flex !important;
  flex-wrap: wrap;
  ul{
    padding: 0;
  }
  @media(max-width: 769px){
    ul{
       display: flex!important;
       flex-wrap: wrap;
       padding: 0;
       li{
         padding: 0.5em!important;
       }
    }
  }
 }
 .dropdowns{
  @media(min-width:769px){
    padding: 0;
  }
 }
 .accessibility_mode a:focus{
  outline: 0.1em solid !important;
  outline: 0.3125em auto -webkit-focus-ring-color !important;
 }
 .layout-header {
  width: 100%;
  z-index: 10;
  position: relative;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  background-color:#f8f9fa;
    -webkit-box-shadow: 4px 4px 3px #0000000a;
    box-shadow: 4px 4px 3px #0000000a;
    border-bottom: 7px solid $theme-color-second;
  li{
    list-style: none;
  }
  a[accesskey] {
    position: absolute;
  }
  .container {
    @extend .response-container;
  }
  .header-banner { overflow: hidden; }
  .header-nav {
    padding:0;
    font-family: $main-font;
    text-transform:uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    ul{
      padding: 0;
    }
    @media(max-width: 820px){
      justify-content: space-between;
      padding:0;
    }
    ul{
      li{
        float: left;
      }
    }
    & > * {
      display: inline-block;
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      color: #333;
    }
    a {
      color: #333;
      text-decoration: none;
      padding:5px;
    }
    @media (min-width:1025px) {
      z-index: 105;
      position: relative;
    }
  }
 .navbar-header h1.default_site_h1, .navbar-header h2.default_site_h1{
    display: flex;
    align-items: center;
    width: 100%;
 }
  .navbar-header {
    z-index: 10;
    padding: 0;
    margin: 0;
    position: relative;
    @media (min-width: $screen-sm){
      width: 25%;
    }
    // @media (max-width: $screen-sm) {
    //   width: 100%;
    //   display: flex;
    //   flex-flow: row-reverse;
    // }
    .navbar-brand {
      line-height: 2.125em;
      color: $theme-color-main;
      font-family: $main-font;
      .default_site_h1{
        font-size: 1.5em;
      }
      @media (min-width: $screen-sm) {
        margin:0;
        line-height: 3.75em;
        h1{
          font-size: 1.2em;
          display: flex;
          align-items: center;
          color:#1a66b1;
          font-weight: bold;
        }
      }
      @media (max-width: 768px){
       padding: 0;
       padding-top: 1em;
      }
      @media (max-width: 820px) {
       height: auto;
       h1{
         margin-top: 1em;
         font-size: 1em;
         display: flex;
         align-items: center;
         color: #155E75;
         font-weight: bold;
       }
      }
      @media (max-width: 480px) {
        h1{
          margin: 0;
        }
        width: 80%;
        margin: 0;
      }
      .site-logo {
        margin-right: 0.5em;
        float: left;
        height: 50px;
        padding-right: 0.5em;
        width: auto!important;
        @media(min-width: 1024px){
          height: 50px;
        }
        @media(max-width: $screen-xs){
          height: 45px;
        }
        @media(max-width: 820px)and(min-width:$screen-xs ){
          height: 45px;
        }
      }
    }
  }
 }
 .navbar-toggle {
  margin-top: 1.7em;
  position: absolute;
  right: 0;
  // border-radius: 0.125em;
  // border-width: 0.125em;
  // border-color: lighten($theme-color-main, 30%);
  .icon-bar {
    background-color: lighten($theme-color-main, 30%);
  }
  &.collapsed {
    .icon-bar-top {
      top: 0;
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
    .icon-bar-middle {
      opacity: 1;
    }
    .icon-bar-bottom {
      top: 0;
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }
  // icon bar animation
  .icon-bar {
    transition: .2s all;
    position: relative;
  }
  .icon-bar-top {
    top: 0.375em;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .icon-bar-middle {
    opacity: 0;
  }
  .icon-bar-bottom {
    top: -0.375em;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
 }
@media (width: 769px) {
      .navbar-toggle{
       display: block!important;
   }
 }
 .outdropdowns{
  .dropdowns{
  }
 }
 .nav-menu{
  display:flex!important;
  float: right;
  li{
    padding: 1em 0;
    &:hover{
      background-color: #C40516;
      a{
        color: #FFFFFF;
      }
    }
  }
 }
 .navone ::before{
    content: '';
    position: absolute;
    background: url("/assets/account-icon.png") no-repeat;
    width: 23px;
    height: 23px;
    left: -10px;
    top: 10px;
    display: inline-block;
    left: 5px;
 }
 .header-buttom{
 &:hover{
   .headbutton{
     background-color: #750016!important;
   }
 }
 }
 .search-boxken{
  position: relative;
 }
 .search-boxken {
  ::placeholder { /* CSS 3 標準 */
   opacity: 0;
  }
  ::-webkit-input-placeholder { /* Chrome, Safari */
    opacity: 0;
  }
  :-ms-input-placeholder { /* IE 10+ */
    opacity: 0;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    opacity: 0;
  }
 	input {
      position: relative;
      background: none;
      z-index: 2;
      width: 33px;
      height: 33px;
      transition: all .25s ease-in .25s;
      color: transparent;
      font-size: .75rem;
      line-height: 25px;
      border: 2px solid #33333326;
      // box-shadow: #0000000f 0 0px 1px 1px;
      border-radius: 3em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
 		&:hover {
 			cursor: pointer;
 			&:focus {
 				cursor: text;
 			}
 			+ span {
 				background: rgba(255,255,255,0.2);
 			}
 		}
 		&:focus {
 			width: 200px;
 			padding: 0 10px;
 			outline: none;
 			color: $theme-color-second;
 			background:none;
      @media(max-width: $screen-xs){
        width: 100px;
      }
 			+ span {
 				width: 200px;
 				&::before {
 					width:2px;
 					opacity:1;
 					transition: all .25s ease-in;
 				}
 			}
 		}
 	}
  .kenspan{
    .fa-search{
      color: $theme-color-second;
    }
    z-index: 1;
    position: absolute;
    font-size: 1.2em;
    top: 6px;
    right: 4px;
    width: 25px;
    height: 25px;
    transition: all .25s ease-in .25s;
    border-radius: 25px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    @media(max-width:820px){
          right: 2px;
    }
  }
 }
 .site-description{
      width: 100%;
    color: #737f85;
    font-size: 0.8em;
    font-weight: 400;
    line-height: 25px;
 }
--- a/assets/stylesheets/template/layout/nfudesign.scss
+++ b/assets/stylesheets/template/layout/nfudesign.scss
@ -0,0 +1,160 @@
@charset "utf-8";
@import "../initial";
@keyframes circleboxroll {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(160deg);
  }
  100% {
    transform: translateY(60vh) rotate(320deg);
  }
 }
 .circlebox{
  &:before{
    content: "";
    position: fixed;
    opacity: .1;
    // background: #afc7e0;
    background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 5% 5%, #80b5ff, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #54a1e1 0%, #00437c 60%, #fb8f72 100%);
    border-radius: 100%;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    z-index: 0;
    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
  }
  // &:after{
  //   content: "";
  //   position: fixed;
  //   opacity: .15;
  //   background: #00356a61;
  //   border-radius: 100%;
  //   z-index: 0;
  // }
  @media(max-width:768px){
    &:before{
      top: -20vw;
        right: -35vw;
        width: 70vw;
        height: 80vw;
    }
    &:after{
    width: 40vw;
    height: 40vw;
    bottom: 0;
    left: -8vw;
    }
  }
  @media(min-width:769px){
    &:before{
        top: 0;
        right: -16vw;
      width: 30vw;
      height: 30vw;
      transform-origin: center center;
      animation: circleboxroll 10s linear forwards;
      animation-timeline: scroll();
    }
    &:after{
      bottom: 0;
      left: -8vw;
      width: 27vw;
      height: 27vw;
    }
  }
 }
 .background-dotball{
    -webkit-transform: translate(36%, -50%);
    transform: translate(36%, -50%);
    position: absolute;
    top: 50%;
    right: 0;
    &:before{
        width: 500px;
    height: 500px;
    content: '';
    position: absolute;
    bottom: -300px;
    right: -200px;
    display: block;
    background: url(/assets/dotballwhite.png) no-repeat top left;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    background-size: cover;
    }
 }
 .page-index__background-ball{
  position: absolute;
    bottom: 0;
    left: 50%;
    width: 57.98611%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    .page-index__background-ball-img{
          padding-bottom: 100%;
    width: 100%;
    border: solid 1px #eaf6fd;
    border-radius: 50%;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    }
 }
 .background-ball2{
    position: absolute;
    width: 50%;
    transform: translate(0, 0);
    transition: transform 0.6s ease-out; /* 平滑回原位 */
    will-change: transform;
    bottom:0;
    &:before{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        display: block;
        padding-bottom: 100%;
        width: 100%;
            background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280;
        border-radius: 50%;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        -webkit-transform: translate(150%,0);
        transform:translate(150%,0);
    }
 }
 .background-ball{
    position: absolute;
    width: 100%;
    transform: translate(0, 0);
    transition: transform 0.6s ease-out; /* 平滑回原位 */
    will-change: transform;
    top:0;
    &:before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        padding-bottom: 100%;
        width: 100%;
        opacity: .04;
         background:url(/assets/banner-deco2.svg) no-repeat;
        // background-color: #eaf6fd;
        // background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 20px 20px, #bddbf8, transparent 25%), #dbdee240;
        // border-radius: 50%;
        -webkit-transform: translate(-50%, 85%);
        transform: translate(-50%, 85%);
        // clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
    }
 }
 .w-annc__item{
  .card{
      width: 100%;
      --bs-card-bg: transparent;
  }
  .card:before{
      background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641!important;
  }
 }
--- a/assets/stylesheets/template/layout/slide.scss
+++ b/assets/stylesheets/template/layout/slide.scss
@ -0,0 +1,12 @@
@charset "utf-8";
@import "../initial";
 .layout-slide {
  position: relative;
  overflow: hidden;
  z-index: 0;
  .w-ad-banner {
    margin: auto;
  }
 }
--- a/assets/stylesheets/template/layout/wordpresscss.scss
+++ b/assets/stylesheets/template/layout/wordpresscss.scss
--- a/assets/stylesheets/template/modules/ad_banner.scss
+++ b/assets/stylesheets/template/modules/ad_banner.scss
@ -0,0 +1,745 @@
@charset "utf-8";
@import "../initial";
 //
 // Widget
 //
 // Widget
 // ## gerenral styles
 ul.button-mid{
 	.prev-button{
    height: 2em !important;
    width: 2em !important;
    font-size: 1em !important;
    line-height: 2rem !important;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    &:hover {
      background: rgba(0,0,0,0.1);
    }
 	}
 	.next-button{
    height: 2em !important;
    width: 2em !important;
    font-size: 1em !important;
    line-height: 2rem !important;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    &:hover {
      background: rgba(0,0,0,0.1);
    }
 	}
 }
 ul.button-mid{
  margin:0;
  z-index: 201;
 }
 .banner-pager .active-slide button{
  background: $theme-color-second!important;
 }
 iframe{
  border: none;
 }
  .jp-video{
    border:0;
  }
 .w-ba-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  .cursor {
    cursor: pointer;
  }
  .w-ad-banner__caption{
    @media(max-width:768px){
      h3{
        margin-top: 0;
      }
    }
  }
 }
 .w-ba-banner__wrap {
  width: 100%;
  max-width: 100%;
  height: auto;
 }
 .w-ba-banner__slide {
  width: 100%;
 }
 [data-cycle-carousel-visible="3"] .w-ba-banner__slide {
    width: auto;
    height: auto
 }
 [data-cycle-carousel-visible="3"]{
    padding-bottom: 0;
 }
 .ad-overlay {
    color: #333333;
    font-family: $main-font;
    width: 100%;
    bottom: 0;
    // background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40%,#000);
    @media(max-width: $screen-sm) {
        padding: 0.5em 1em;
    }
 }
 .banner-pager {
  @include list-reset;
  position: absolute;
  bottom: 0.5rem!important;
  z-index: 100;
  text-align:center;
  width: 100%;
  li {
    // height: 3px;
    // width: 4%;
    // margin: 0 2px;
    cursor: pointer;
    display: inline-block;
    width:auto!important;
  }
  button {
    // background: hsla(0,0%,100%,.4);
    // width: 100%;
    // height: 3px;
    // border: unset;
    background: white !important;
    display: inline-block;
    margin-right: 0.25em;
    width: 0.8em !important;
    height: 0.8em !important;
    border-radius: 50%;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    opacity: .5;
    cursor: pointer;
    border: 0;
  }
  .active-slide button {
    opacity: 1;
    background: $theme-color-green;
  }
  a {
    background: white;
    display: inline-block;
    margin-right: 0.25em;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    opacity: .5;
 	  cursor:pointer;
    border:0;
  }
  .active-slide a {
    opacity: 1;
  }
 }
 .controlplay{
 	position: absolute;
 	right: 1em;
 	top: 3%;
 	z-index:101;
 	 a {
    display: inline-block;
    margin-right: 0.25em;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.2);
 	i {
 		font-family: FontAwesome;
    position: relative;
    font-size: 1rem;
    line-height: 1;
    color: #FFF;
    vertical-align: middle;
    font-style: unset;
 	}
  }
 	.resume-slide i::before{
 		content:"\f04b"
 	}
 	.pause-slide i::before{
 		content:"\f04c"
  }
  @media(max-width: $screen-sm) {
      right: 0;
      a { padding: 0 5px;}
      a i { font-size: 0.75em; }
  }
 }
 ul.button-mid{
 	.prev-button{
 	  transition: 0.4s;
 		position: relative;
 		float:left;
    left: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    color: #ffffff;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 2.5rem;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    z-index: 100;
    &:hover {
      background: rgba(0,0,0,0.1);
    }
 	}
 	.next-button{
    float: right;
    transition: 0.4s;
    position: relative;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    color: $theme-white;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: 2.5rem;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    z-index: 100;
    &:hover {
      background: rgba(0,0,0,0.1);
    }
 	}
 }
 .banner-responsive {
  width: 100%;
 }
 .background-overlay{
  background-color: #F5F5F5;
  opacity: 0.95;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
 }
 // Widget 0
 .ba-banner-widget-0 {
  height: 100vh !important;
  z-index: 0;
  .w-ba-banner__wrap{
    height: 100vh !important;
  }
  .youtube, .cycle-youtube {
    width: 100%;
    height: 100%;
  }
  object, embed {
    width: 100%;
    height: 100%;
  }
  // .banner-pager {
  //   right: 1em;
  //   top: -2em;
  //   z-index: 100;
  //   display: none;
  // }
  .button-mid{
    z-index: 101;
  }
  .ad-overlay{
    text-align: center;
    position: relative;
    background: none;
    color: #fff;
    z-index: 100;
    padding-left: 10%;
    padding-right: 10%;
    // text-shadow: 1px 1px 1px #0000008c;
  }
    img{
      position: fixed;
      top:0;
      @media(max-width: 1500px){
        // width: auto;
        max-width: unset;
        // transform: translateX(-9%);
        height: 100vh;
      }
    }
  &,& .jp-jplayer{
    @media(min-width:1801px){
      .ad-overlay{
          bottom: 50%;
          position: absolute;
      }
    }
    @media screen and (min-width:1451px) and (max-width:1800px){
          .ad-overlay{
              bottom: 50%;
              position: absolute;
          }
    }
    @media screen and (min-width:1281px) and (max-width:1450px){
          .ad-overlay{
              bottom: 50%;
              position: absolute;
          }
    }
    @media screen and (min-width:1026px) and (max-width:1280px){
          .ad-overlay{
              bottom: 40%;
              position: absolute;
          }
    }
    @media screen and (min-width:$screen-xs) and (max-width:1025px){
          .ad-overlay{
              bottom: 40%;
              position: absolute;
          }
    }
    @media(max-width: $screen-xs){
      .ad-overlay{
          top: 35%;
          position: absolute;
      }
    }
    }
 }
 // Widget 1
 .ad-banner-widget-1 {
    .w-ba-banner .controlplay .resume-slide.active i{
    color: #32D9C3;
  }
  .w-ba-banner .controlplay .pause-slide.active i{
    color: #ff4500;
  }
  .w-ba-banner .controlplay{
    width: auto;
  }
  .w-ba-banner .button-mid{
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
  }
  .next-button,.prev-button{
    cursor: pointer;
  }
  .banner-overlay{
    padding: 3.5em 5em;
    background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    -pie-background: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    position: absolute;
    z-index: 99;
    color: #fff;
  }
  .w-ba-banner__caption {
    h2 {
      font-family: $main-font;
      font-size: $w-caption-font-size;
      margin: 0.5em 0;
    }
    p {
      font-family: $main-font;
      font-size: $w-caption-desc;
    }
  }
  @media(max-width: $screen-sm) {
    .ad-overlay {
      padding:1em;
      position: relative;
      background: #333333;
    }
    .controlplay {
      right: 0;
      a { padding: 0 5px;}
      a i { font-size: 0.75em; }
    }
  }
 }
 // Widget 2
 .ba-banner-widget-2 {
  .w-ba-banner__image {
    width: 100%;
    height: auto;
  }
  .youtube, .cycle-youtube {
    width: 100%;
    height: 100%;
  }
  object, embed {
    width: 100%;
    height: 100%;
  }
  // .banner-pager {
  //   right: 1em;
  //   top: -2em;
  //   z-index: 100;
  //   display: none;
  // }
 }
 // Widget 3
 .ba-banner-widget-3 {
 .banner-pager .active-slide a {
    background: $theme-color-second !important;
 }
  .w-ba-banner__wrap {
    width: 100%;
    @media(max-width:768px){
      height: 22vh;
      .w-ba-banner__image{
        height: 22vh;
      }
    }
  }
  .w-ba-banner__slide {
    width: 100%;
    position: relative;
  }
  .banner-pager {
    right: 0;
    bottom: 2em;
   li { height: unset; width: unset; }
  }
  ul.button-mid { display: none; }
 }
 //Widget 4
 .ba-banner-widget-4 {
  .w-ba-banner__wrap {
    text-align: center;
    // img { margin-bottom: 0.5rem; }
  }
 }
 //Widget 5
 .ba-banner-widget-5 {
  margin: 1em 0;
  .slide-img {
      padding: 0;
    }
  .slide-content {
    z-index: 200;
    font-family: $main-font;
    padding: 1em 7em 1em 1em;
    h3 {
      font-size: 1rem;
      margin: 0.5em 0;
      color: #12517a;
    }
    div {
      white-space: normal;
      word-break: break-all;
      font-size: 1rem;
      color: #373634;
    }
  }
  .banner-pager {
   li { height: unset; width: unset; }
   a { background: #a0d2f3;}
  }
  @media(max-width: $screen-sm) {
    .slide-content {
      padding: 0.5em 1em;
      position: relative;
      background: #a0d2f3;
      h3 { font-size: 1em; }
      div { font-size: 0.75em; }
    }
    .controlplay {
      right: 0;
      a { padding: 0 5px;}
      a i { font-size: 0.75em; }
    }
  }
  @media(max-width: $screen-sm -1) {
    ul.button-mid.next-button, ul.button-mid.prev-button{
      top: 35%;
      transform: translateY(-35%);
    }
    .slide-content h3, .slide-content div { color: $theme-white; }
    .w-ba-banner__wrap { overflow: visible;}
  }
 }
 // Widget 7
 .ba-banner-widget-7 {
  position: relative;
  @media(min-width:1024px){
     display: flex;
    flex-direction: row-reverse;
    .w-ba-banner__wrap{
      flex: 0 0 60%;
     }
     .ad-overlay{
       position: relative;
       background: none;
     }
    .banner-overlay{
      padding:2em 1em;
    }
     background-color:$theme-color-main;
  }
  .w-ba-banner__caption {
    color: #fff;
  }
    @media(max-width:$screen-xs){
      height:auto!important;
    }
    @media (max-width: 769px){
      .ad-overlay, .banner-overlay {
        padding: 0.5em 1em;
      }
      .w-ad-banner__caption{
       background-color:$theme-color-main;
      }
    }
 }
 // widget8
 .ba-banner-widget-8{
  position: relative;
  .w-ba-banner__slide{
        padding: 0.5em;
        overflow: hidden;
  }
  .banner-pager{
    display: none;
  }
  .banner-overlay {
    border-bottom: 3px solid $theme-color-second;
    text-align: center;
    width: 100%;
    visibility: unset !important;
    overflow: hidden;
    h3{
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: pre-line;
    }
    h3,p{
      font-size: 1.25em;
    }
    p{
      padding: 0 0.2em;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
  }
 }
 // widget9
 .ba-banner-widget-9{
  iframe{
    border-radius: 2em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border:1px solid #fff;
    padding: 10px;
    background: #4cae4c8c;
    &:hover{
      transform: translate(-10px, -10px);
      transition: .5s;
      box-shadow: 30px 30px 60px #0000008a;
    }
  }
  &::before{
        position: absolute;
        content: '';
        width: 60%;
        height: 100%;
        background: linear-gradient(to right, $theme-color-second 0%, #03162700 100%);
        -pie-background: linear-gradient(to right, $theme-color-second 0%, #03162700 100%);
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        display: block;
        z-index: 100;
        @media(max-width:768px){
        }
  }
  height: 90vh !important;
  .w-ba-banner__slide{
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
    position: fixed!important;
  }
  .w-ba-banner__wrap{
    height: 90vh !important;
  }
  .jp-jplayer{
    position: fixed;
  }
  .jp-video{
    height: 90vh !important;
  }
  .banner-overlay{
    background: none!important;
    z-index:100;
    position: absolute;
    @media(min-width:769px){
      padding-bottom: 24vh!important;
    }
    @media(max-width: 768px){
      position: absolute!important;
      padding-bottom:16vh !important;
    }
  }
  .banner-overlay{
    color: #fff;
    padding: 3.5em 5em;
    background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    -pie-background: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    .ad-overlay2{
      margin: 0 3em;
    }
  }
  .w-ba-banner__caption {
    h2 {
      font-family: $main-font;
      font-size: $w-caption-font-size;
      margin: 0.5em 0;
    }
    p {
      font-family: $main-font;
      font-size: $w-caption-desc;
    }
  }
  @media(max-width: $screen-sm) {
    .ad-overlay {
      padding:1em;
      position: relative;
      background: #333333;
    }
    .controlplay {
      right: 0;
      a { padding: 0 5px;}
      a i { font-size: 0.75em; }
    }
  }
 }
 //Widget 10
 .ba-banner-widget-10 {
  .w-ad-banner__caption{
    padding: 2em 1em;
    background-image: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    -pie-background: linear-gradient(180deg, transparent 0, #00000066 40%, #000);
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    @extend .i-title;
  }
  .w-ba-banner__wrap {
    text-align: center;
    @media(min-width: $screen-sm){
        display: grid;
        grid-template-areas:
        "g1 g2 g3"
        "g1 g4 g5";
        grid-gap: 2% 1%;
        grid-template-columns:32.3% 32.3% 32.3%;
    }
    .bannerimgwrapper{
      overflow: hidden;
      position: relative;
      display: block;
      @media(max-width: $screen-sm){
        margin-bottom: 1em;
      }
      &:hover{
        img{
          transform: scale(1.1) !important;
          -webkit-transition: .3s ease-out;
          -moz-transition: .3s ease-out;
          -ms-transition: .3s ease-out;
          -o-transition: .3s ease-out;
          transition: .3s ease-out;
        }
      }
      &:nth-child(1){
        grid-area: g1;
        -ms-grid-row: 1;
        -ms-grid-column: 1;
        -ms-grid-row-span: 3;
        -ms-grid-column-span: 7;
      }
      &:nth-child(2){
        grid-area: g2;
       -ms-grid-row: 1;
       -ms-grid-column: 9;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
      &:nth-child(3){
        grid-area: g3;
       -ms-grid-row: 1;
       -ms-grid-column: 17;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
      &:nth-child(4){
        grid-area: g4;
        -ms-grid-row: 3;
        -ms-grid-column: 9;
        -ms-grid-row-span: 1;
        -ms-grid-column-span: 7;
      }
      &:nth-child(5){
        grid-area: g5;
       -ms-grid-row: 3;
       -ms-grid-column: 17;
       -ms-grid-row-span: 1;
       -ms-grid-column-span: 7;
      }
    }
  }
 }
--- a/assets/stylesheets/template/modules/announcement.scss
+++ b/assets/stylesheets/template/modules/announcement.scss
--- a/assets/stylesheets/template/modules/archives.scss
+++ b/assets/stylesheets/template/modules/archives.scss
@ -0,0 +1,622 @@
@charset "utf-8";
@import "../initial";
 //
 // Widget
 //
 // Widget
 // ## gerenral styles
 .i-archive__list{
  .date-thead{
    min-width: 4em;
  }
 }
 .i-archive{
  tr{
    border: 0.0625em solid #ddd!important;
  }
 }
 .i-items{
  @media(min-width: 768px){
      background-color: #fff;
  }
 }
 .w-archive__title{
  font-weight: bold;
  @extend .i-title;
 }
 .w-archive__list{
  padding-left: 0.8em;
 }
 .w-archive__item{
    list-style: none;
    @extend .i-subtitle;
 }
 .w-archive {
  .w-archive__widget-title {
    @extend .unity-title;
    margin: 0.5rem 0;
  }
  .widget-title {
    @extend .unity-title;
  }
 }
 .i-archive-item-title{
  font-weight: normal;
 }
 .panel-title{
  @extend .i-title;
 }
 // Widget 1
 .widget-archive-1 {
  .w-archive__list.level-1 {
    padding: 0.5rem;
  }
  .w-archive__item.level-1 {
    list-style-position: inside;
    margin-bottom: 0.8rem;
  }
  .w-archive__item-heading {
    display: inline-block;
    // font-size: $w-item-heading-font-size;
    // color: $theme-gray;
    font-family: $main-font;
    margin: 0;
    padding-bottom: 0.25rem;
  }
  .w-archive__list.level-2 {
    margin: 0;
    padding: 0;
  }
  .w-archive__item.level-2 {
    border-bottom: 0.0625em dashed $w-border-color;
    padding: 0 0 0.5rem 0.4rem;
    .w-archive__list.level-3 {
      list-style-type: none;
      padding: 0;
      & > li:before {
        content:"";
        background: url(/assets/arr.gif) 0 0 no-repeat;
        display:inline-block;
        width:0.3125em;
        height: 0.5em;
        padding: 0 0.3rem;
      }
    }
  }
  .w-archive__link {
    @extend .i-subtitle;
  }
 }
 //Widget 2
 .widget-archive-2 {
 .panel-default > .panel-heading {
  cursor: pointer;
  padding: 0;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  &:hover {
    background-color: darken($color: #f5f5f5, $amount: 10);
  }
 }
 .panel {
  font-family: $main-font;
  margin-bottom: 0.625em;
 }
 .panel-title {
  font-family: $main-font;
  a {
    display: block;
    padding: 0.625em 0.9375em;
    .fa { padding-right: 0.5em; }
  }
 }
 }
 //index setting
 .i-archive{
  .date-thead,.title-thead,.file-thead,.description-thead{
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    font-size: 1em;
    font-weight: bold;
  }
 }
 .archive-items{
  font-size: 1em;
  background-color: #fff;
 }
 .i-items{
  .thead{
    border-bottom: 0.0625em solid #ddd;
  }
 }
 .i-archive-title {
  @extend .unity-title;
 }
 .link{margin-left: 0.5em;}
 .txt { background-color: #6dbb73;     margin-left: 0.5em;}
 .xlsx { background-color: #bb6d7f;     margin-left: 0.5em;}
 .pdf { background-color: #3b8347;     margin-left: 0.5em;}
 .docx { background-color: #846dbb;     margin-left: 0.5em;}
 .pptx { background-color: #6d77bb;     margin-left: 0.5em;}
 .jpg { background-color: #bb6d6d;     margin-left: 0.5em;}
 .zip { background-color: #dcb957;     margin-left: 0.5em;}
 .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
    // border-top: 0.0625em solid #ddd;
 }
 // Archive index 1
 .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.3rem;
    margin-bottom: 0.625em;
    vertical-align: top;
  }
  .i-archive__status-wrap {
    vertical-align: top;
    display: inline-block;
    margin-bottom: 0.625em;
  }
  .i-archive__item {
    margin-bottom: 2.5em;
    list-style: none;
  }
  .i-archive__category-list {}
  .i-archive__category-title {
    padding-bottom: 0.3125em;
  }
  .i-archive__category-item {
    display: inline;
    font-size: 0.8125rem;
  }
  .i-archive__file-list {
    display: block;
    margin-bottom: 0;
  }
  .i-archive__file-wrap {
    margin:0;
    padding:0.5em 0 0;
    border-radius: 0.125em;
  }
  // .i-archive__file-name {
  //   font-size: 1rem;
  // }
 }
 .index-archive-4 {
  dt.i-archive-item-list { display: none; }
  dl.i-archive-files-list { padding: 0; }
  @media (min-width: 768px) {
    .dl-horizontal dd { margin-left: 0 !important; }
  }
 }
 .index-archive-3{
  .i-archive__item {
    list-style: none;
  }
 }
 .index-archive-2,
 .index-archive-4 {
  .panel-default>.panel-heading {
    cursor: pointer;
    padding: 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    &:hover {
      background-color: darken($color: #f5f5f5, $amount: 10);
    }
  }
  .panel {
    font-family: $main-font;
    margin-bottom: 0.625em;
  }
  .panel-title {
    font-family: $main-font;
    a {
      display: block;
      padding: 0.625em 0.9375em;
      .fa { padding-right: 0.5em; }
    }
  }
  .i-archive-tags {
    margin-bottom: 0;
  }
  .i-archive-files-item {
    font-size:1em;
    font-family: $main-font;
  }
  .i-archive-files-list {
    dd {
      margin-bottom: 0.3em;
    }
  }
  .i-archive-tag-name {
    margin-bottom: 0.5em;
    font-size: 0.9375rem;
    display: inline-block;
  }
  @media screen and (min-width: $screen-sm) {
    .dl-horizontal {
      dt {
        text-align: left;
      }
    }
    .dl-horizontal dt { overflow: unset; white-space: unset; }
    .dl-horizontal dd { margin-left: 1em; }
  }
 }
 .has-archive-tab {
  .i-tag__item {
    display: none;
  }
  .tab-content--active {
    display: block !important;
  }
  .i-archive__tag-name {
    cursor: pointer;
  }
 }
 .index-archive-3 {
  .i-archive__tag-name {
    background-color: $theme-color-main;
    color: $theme-white;
    font-family: $main-font;
    display: inline-block;
    padding: 0.625em 0.75em;
    margin-right: 0.3125em;
    border-radius: 0.25em;
    font-size: 0.938em;
    &:hover {
      background-color: darken($theme-color-main, 7%);
    }
    &.tab--active {
      background-color: darken($theme-color-main, 7%);
    }
  }
  .tab-content {
    background-color: lighten($theme-gray, 65%);
    padding: 20.3125em;
  }
  .i-archive__category-item {
    margin-bottom: 0.5em;
  }
  .i-archive__category-title {
    font-family: $main-font;
  }
  .i-archive__archive-title {
    font-size: 0.938em;
  }
  .tab-content {
    margin-bottom: 0.625em;
  }
  .i-archive__file-name {
    font-size: 1em;
  }
  .i-archive__file-wrap {
    margin-bottom: 0.625em;
  }
  .i-archive__item-wrap {
    font-family: $main-font;
  }
 }
 .index-archive-5 {
  .head{
  }
  .i-archive__category-title {
    font-size: 1rem;
    margin-bottom: 0.625em;
    vertical-align: top;
  }
  .i-items {
    background: #fff;
    margin-bottom: 1.5em;
    position: relative;
    background: #fff;
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
  .thead.row {
    margin: 0;
    border-bottom: 0.0625em solid #ddd;
   @media (max-width: 767px) {
     display: none;
   }
  }
  .archive-items {
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    &:nth-child(odd){
      background-color: #F3F3F3;
    }
     div:nth-child(1), div:nth-child(2) {
     }
  }
 }
 .index-archive-6 {
  .i-archive__category-title {
    font-size: 1rem;
    margin-bottom: 0.625em;
    vertical-align: top;
  }
  .i-items {
    background: #fff;
    margin-bottom: 1.5em;
    position: relative;
    background: #fff;
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
  .head{
    @media(min-width: 821px){
    }
  }
  .i-archive__file { margin: 0; }
  .i-archive__file-list {  }
  .thead.row {
   @media (max-width: 767px) {
     display: none;
   }
  }
  .archive-items {
    border-bottom: 1px solid transparent;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    &:nth-child(odd) {
      background-color: #F3F3F3;
    }
     div:nth-child(1), div:nth-child(2) {
      // border-right: 1px solid #333;
     }
  }
 }
 .index-archive-7 {
  .i-archive__category-title {
    font-size: 1rem;
    margin-bottom: 0.625em;
    vertical-align: top;
  }
  .i-items {
    margin-bottom: 1.5em;
    position: relative;
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    @media(max-width: $screen-xs){
      padding: 1em;
    }
  }
  .thead.row {
    margin: 0;
   @media (max-width: 767px) {
     display: none;
   }
  }
  .archive-items {
    margin-bottom: 1em;
    line-height: 2;
     div:nth-child(1), div:nth-child(2) {
     }
  }
 }
 .index-archive-9{
  @media(max-width: $screen-xs){
    .thead{
      border:0;
      border-top: 0.0625em solid #ddd;
    }
    tr{
      margin-bottom: 1em;
    }
  }
  th{
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
 }
 .index-archive-10{
  @media(max-width: $screen-xs){
    tr{
      margin-bottom: 1em;
    }
  }
  .i-archive__category-title {
    font-size: 1rem;
    margin-bottom: 0.625em;
    vertical-align: top;
  }
  .i-items {
    margin-bottom: 1.5em;
    position: relative;
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
  .thead.row {
    margin: 0;
   @media (max-width: 767px) {
     display: none;
   }
  }
  .archive-items {
    line-height: 2;
    &:nth-child(odd){
      background-color: #F3F3F3;
    }
     div:nth-child(1), div:nth-child(2) {
     }
  }
 }
 .index-archive-13{
  .archives-ul{
        padding: 1em;
  }
  .archives-ul .archive-li{
    list-style-type: none!important;
  }
  li{
    list-style: none;
  }
 }
 .index-archive-14{
  label{
    margin-left: 0.5em;
  }
  @media(max-width: $screen-xs){
    .fa-file-text{
      display: none;
    }
    ul{
      padding: 0;
    }
  }
  .archives-ul .archive-li{
    list-style-type: none!important;
  }
  li{
    list-style: none;
  }
 }
 .index-archive-15{
  label{
    margin-left: 0.5em;
  }
 }
 .index-archive-16{
  label{
    margin-left: 0.5em;
  }
  .archives-ul .archive-li{
    list-style-type: none!important;
  }
  li{
    list-style: none;
  }
  .i-archive-files-list{
     padding-left: 12%;
  }
  .panel-title {
    font-family: $main-font;
    display: flex;
    flex-wrap: wrap;
    align-items:center;
    a {
      @media(min-width: 769px){
        max-width: 80%;
      }
    }
  }
  .fa-file-text{
      padding-right: 5px;
    }
  .i-archive-files-list{
    @media(max-width: 768px){
      padding: 0;
    }
  }
  .head{
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 0;
  }
  .description{
    width: 100%;
    padding: 0;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 12%;
    @media(max-width: $screen-xs){
      padding-left: 0;
    }
  }
  // .collapse.in{
  //       display: block ;
  // }
  // .panel-collapse{
  //     display: none;
  //   }
  .date{
    @media(min-width:1025px){
          width: 12%!important;
    }
    @media(max-width: 768px){
      padding: 0;
    }
  }
  .fa-file-text{
    @media(max-width: 768px){
      float: left;
      padding-right: 5px;
      display: none;
    }
  }
 }
 .i-archive-files-itemwrapper{
  width: 100%;
  border-top: 1px solid #ddd;
  padding: 0;
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  padding-top: 5px;
 }
--- a/assets/stylesheets/template/modules/ask.scss
+++ b/assets/stylesheets/template/modules/ask.scss
@ -0,0 +1,63 @@
@charset "utf-8";
@import "../initial";
 #ticket-status-form{
      background-color: #fdfdfd;
      padding: 2em;
      border-radius: 10px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 1px solid #E4E6EA;
      label{
            width: 100%;
      }
 }
 .CheckHistory{
      margin-top: 1em;
      padding: 0.5em;
    border-radius: 0.5em;
          margin-bottom: 1em;
          font-size: 0.8125rem;
          -webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          background: none;
          border: none;
          color: $theme-color-main;
          box-shadow: $theme-color-main 0 0px 0px 2px inset;
          &:hover {
            color: #fff;
            box-shadow:$theme-color-main 0 0px 0px 40px inset;
          }
 }
 #new-ask-question{
  clear: both;
 }
 .CheckStatus{
    @media(min-width: 1025px){
      right: 20%;
      position: relative;
    }
    float: right;
          padding: 0.5em;
          border-radius: 0.5em;
          margin-bottom: 1em;
          font-size: 0.8125rem;
          -webkit-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -moz-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -ms-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          -o-transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          transition: all 200ms cubic-bezier(0.39, 0.5, 0.15, 1.36);
          background: none;
          border: none;
          color:#337ab7!important;
          box-shadow: #337ab7 0 0px 0px 2px inset;
          &:hover {
            color: #fff!important;
            box-shadow:#337ab7 0 0px 0px 40px inset;
          }
 }
--- a/assets/stylesheets/template/modules/calendar.scss
+++ b/assets/stylesheets/template/modules/calendar.scss
@ -0,0 +1,582 @@
@charset "utf-8";
@import "../initial";
 .w-calendar {
  width: 100%;
  position: relative;
  .widget-title {
    text-align: center;
    border: 0.0625em solid $theme-gray-subtle;
    margin: 0;
    padding: 0.5em 0;
  }
  th {
    background: $theme-color-main;
    color: $theme-white;
    text-align: center;
    font-size: 0.8125rem;
  }
  td {
    border: 0.0625em solid $theme-gray-subtle;
    text-align: center;
    font-size: 0.8125rem;
  }
 }
 .w-calendar-table {
  margin-bottom: 0;
  .w-calendar-today {
    background: $theme-color-main;
    color: $theme-white;
  }
  .w-calendar-event {
    background: $theme-color-third;
    color: $theme-white;
    cursor: pointer;
  }
 }
 .w-calendar-nav {
  a {
    position: absolute;
    top: 0.5em;
    left: 0.625em;
    color: $theme-color-main;
  }
  .w-calendar-nav-next {
    left: auto;
    right: 0.625em;
  }
 }
 #orbit_calendar{
  position: relative;
  margin-top: 1em;
  width: 100%!important;
  z-index: 0;
  table th{
    background-color: #fff;
    color: #333;
  }
 }
 .fc .fc-scrollgrid-section-body table, .fc .fc-scrollgrid-section-footer table{
  width: 100%!important;
 }
 .fc .fc-daygrid-day-top{
  justify-content: center;
 }
 .fc-daygrid-event-dot{
    display: none!important;
 }
 .fc-daygrid-event-harness{
  .mybooking{
        box-shadow: 0 1px 2px 1px #000000;
      // background-color:#ff7a00 !important;
      // color: #fff !important;
      // border:0!important;
      // .fc-event-time,.fc-event-title-container{
      //   color: #fff !important;
      // }
      // .fc-event-main-frame{
      //   color: #fff !important;
      // }
  }
 }
 .fc .fc-daygrid-event{
      margin-top: 4px;
 }
 .fc-timegrid-event-harness{
  .mybooking{
        box-shadow: 0 1px 2px 1px #000000;
      // background-color:#ff7a00 !important;
      // border:0!important;
      // .fc-event-main-frame{
      //   color: #fff !important;
      // }
  }
 }
 .fc-timegrid-slot-label-cushion{
      font-size:small;
 }
 .fc .fc-timegrid-slot-label{
  border:0;
 }
 .fc .fc-timegrid-slot{
      height: 0.5em !important;
 }
 .fc-direction-ltr .fc-timegrid-slot-label-frame{
  text-align:center!important;
 }
 .fc .fc-timegrid-axis-cushion, .fc .fc-timegrid-slot-label-cushion{
  padding: 0;
 }
 .fc .fc-timegrid-axis-frame{
  justify-content: center!important;
 }
 // .fc-timeGridWeek-view{
 //   .fc-event-time{
 //     display: none;
 //   }
 // }
  .fc-v-event .fc-event-main-frame{
    padding: 5px;
    color: #fff;
  }
  // .fc-timeGridWeek-view{
  //  .fc-scrollgrid-sync-table{
  //       display: none;
  //   }
  // }
  // td.fc-timegrid-axis.fc-scrollgrid-shrink{
  //       display: none;
  // }
 // .fc .fc-timegrid-axis-frame{
 //     display: none;
 //   }
  // .fc .fc-timegrid-slot-label{
  //     display: none;
  // }
 .fc-timegrid-event-harness{
  position:relative!important;
  inset: unset !important;
 }
 .fc-timegrid-event-harness > .fc-timegrid-event{
  position:relative!important;
  inset: unset !important;
  width: 100%;
  border: 0;
 }
 #hire_form label.col-sm-4.control-label{
  @media(max-width: $screen-xs){
        padding-left:0.9375em!important;
  }
 }
 .modal-content{
  box-shadow: 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f, 0 11px 15px -7px #00000033;
  border-radius: 8px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  border: 0;
 }
 .fc .fc-daygrid-day.fc-day-today{
  background-color:transparent!important;
  .fc-daygrid-day-number{
    color: #fff;
    background-color: #858585;
    border-radius: 0.65em;
    min-width: 2em;
    text-align: center;
  }
 }
 .calendar-modal .event_summary{
  font-size: 1.2em;
  letter-spacing: 1px;
 }
 .calendar-modal > .modal-content h3{
  font-weight: bold;
 }
 .fc .fc-daygrid-event-harness{
  font-weight: bold;
 }
 .fc .fc-daygrid-day-number{
      margin-top: 0.3em;
          color: inherit;
 }
 .fc .fc-col-header-cell-cushion{
            color: inherit;
 }
 .fc-daygrid-dot-event{
  display:block !important;
 }
 .fc-daygrid-event-harness .fc-daygrid-event{
    padding: 5px;
 }
 .fc-timegrid-axis{
  min-width: 10em;
 }
 .fc-dayGridMonth-view{
  @media(max-width: $screen-xs){
    td{
      height: 5em;
    }
  }
 }
 .fc-col-header-cell-cushion{
    @media(max-width: 768px){
      white-space: normal;
      text-align: justify;
      font-size: small;
      display: unset !important;
      padding: 0 !important;
    }
 }
@media(max-width: $screen-xs){
    .fc .fc-scrollgrid-liquid{
      height: 26.5em!important;
    }
    .fc-view-harness{
      height: 26.5em!important;
    }
    .fc-timegrid-slot-label-cushion{
      width: 100%;
      text-align: left;
    }
 }
@media(max-width:768px){
  .fc-daygrid-day-number{
        font-size: small;
  }
 }
 .has_event{
  background-color: $theme-color-second!important;
 }
 .createbooking{
  cursor: pointer;
  @media(max-width: 820px){
    display: none!important;
  }
 }
 .cancelbooking{
  .cancelbookingbtn{
    color: #fff;
    font-size: 1.2em;
    padding: 5px 12px;
    cursor: pointer;
    width: 2em;
    height: 2em;
    position: relative;
    border-radius: 2em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    display: block;
    border: 1px solid #fff;
  }
  position: absolute;
  top: 5em;
  right: 103%;
  @media(max-width:820px){
    display: none!important;
  }
 }
 .form-horizontal{
  @media(min-width:1025px){
    margin: auto;
    width: 60%;
  }
 }
  .control-label{
    @media(max-width: 820px){
      padding-left:0.9375em!important;
    }
  }
 .fc-popover-header{
  padding: 6px 12px!important;
  .fc-popover-close{
    font-size:1.5em!important;
  }
  .fc-popover-title{
    font-size: 1.2em!important;
  }
 }
 .modal-footer{
  a{
    color: #fff;
    background: #858585;
    font-size: 1em;
    &:hover{
      color: #fff;
      background: #333;
    }
  }
 }
 .fc .fc-timegrid-slot-minor{
  border-top: 0;
 }
 .fc-view-harness{
  height: auto!important;
 }
 .fc-timeGridDay-view{
  position: relative!important;
  span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{
    display: none;
  }
  .fc-timegrid-axis-frame{
    display: none;
  }
  .fc-scrollgrid-section-liquid{
    display: none;
  }
  .fc-timegrid-slot{
    border:0!important;
  }
  .fc-timegrid-slot:empty:before{
    position: absolute;
  }
  .fc-scroller-liquid-absolute{
    position: relative!important;
    @media(min-width:$screen-xs){
      overflow: unset !important;
    }
  }
    .fc-daygrid-day-frame{
      @media(min-width: $screen-xs){
          min-height: 7em!important;
      }
      @media(max-width: $screen-xs){
        min-height:24em !important;
      }
  }
  .fc-scrollgrid-section-liquid{
    display: none!important;
  }
    span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{
    display: none;
  }
  .fc-timegrid-axis-frame{
    display: none;
  }
  th.fc-timegrid-axis{
     display: none;
  }
  td.fc-timegrid-axis.fc-scrollgrid-shrink{
    display: none;
  }
 }
 .fc-timeGridWeek-view{
 /*   table th{
    display: table-cell;
   }*/
 /*  .fc-col-header {
    display: none;
  }*/
 /*  .fc-timegrid-axis{
    display: none;
  }*/
  .fc-daygrid-day-frame{
      @media(min-width: $screen-xs){
          min-height: 7em!important;
      }
      @media(max-width: $screen-xs){
        min-height:24em !important;
      }
  }
  .fc-event-title{
      @media(max-width: $screen-xs){
        -webkit-line-clamp: 4!important;
      }
  }
 /*  span.fc-timegrid-axis-cushion.fc-scrollgrid-shrink-cushion.fc-scrollgrid-sync-inner{
    display: none;
  }*/
 /*  .fc-timegrid-axis-frame{
    display: none;
  }*/
  .fc-scrollgrid-section-liquid{
    display: none!important;
  }
      position: relative!important;
      .fc-timegrid-slot{
        border:0!important;
      }
      .fc-timegrid-slot:empty:before{
        position: absolute;
      }
  .fc-scroller-liquid-absolute{
    position: relative!important;
    @media(min-width:$screen-xs){
      overflow: unset !important;
    }
  }
 .fc-timegrid-slot:empty:before{
  // @media(max-width: $screen-xs){
    height: 0.8em;
    position: relative;
    display: block;
  // }
  }
 }
 .fc-dayGridMonth-view{
  position: relative!important;
  .fc-scroller-liquid-absolute{
  position: relative!important;
  }
  .fc-scrollgrid-sync-table{
        height: 600px!important;
  }
 }
 .ui-widget-header{
  background: #000000!important;
  border-color: #000000!important;
  color: #fff !important;
 }
 .ui-state-default{
  background: #fff !important;
    border: 0 !important;
    text-align: center !important;
 }
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
  border: 0 !important;
  background: silver !important;
 }
 .ui-widget-header a{
  color: #fff!important;
 }
 .ui-widget-header .ui-icon{
  filter: brightness(500%);
 }
 .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover, .ui-button.ui-state-active.hover-class{
  border: 0 !important;
  background: silver !important;
  color:#000!important;
 }
 .hidden_timepickerbtn{
  margin-left:0.5em;
  @media(max-width:$screen-xs){
    margin-left: 0;
    margin-top: 0.5em;
  }
 }
 #confirm_date{
  background: #000000;
  border-color: #000000;
  &:hover{
    opacity: .8;
  }
 }
 #cancel_date{
  background: #000000;
  border-color: #000000;
  &:hover{
    opacity: .8;
  }
 }
  #hidden_timepicker{
    background: #f1f1f1;
    padding: 1.2em 0 0 0;
    border-radius: 0.5em;
  }
    .hidden_timepicker{
      display: flex;
      justify-content: center;
      align-items: center;
      @media(max-width:$screen-xs){
        display: grid;
        padding: 0 1em;
        justify-content: flex-start;
      }
    }
    .property_title{
      font-size: 1.2em;
      font-weight: bold;
    }
    .modal-header{
      .close{
        font-size: 2em;
        position: absolute;
        right: 0.5em;
      }
    }
@media(max-width: $screen-xs){
 /*  .fc-theme-standard td, .fc-theme-standard th{
    border:0!important;
  }*/
  .fc-timeGridWeek-view{
   .fc-scrollgrid-sync-table{
    }
  }
 /*  .fc .fc-timegrid-axis-frame{
    display: none!important;
  }*/
  .fc .fc-timegrid-slot-label{
      display:none!important;
  }
 }
 #property-selector{
    @media(max-width:$screen-xs){
      .fc .fc-daygrid-body-natural .fc-daygrid-day-events{
        display: none!important;
      }
    .fc .fc-timegrid .fc-daygrid-body{
      display: none!important;
    }
    .fc-daygrid-day-events{
      display: none!important;
    }
    td.fc-timegrid-axis.fc-scrollgrid-shrink{
      display: none;
    }
  }
 }
 .fc-daygrid-day-bottom{
  a{
      color:$theme-color-main;
  }
 }
 .fc-daygrid-event-harness{
  a{
      color:$theme-color-main;
  }
 }
 table.fc-col-header{
  width:100%!important;
 }
 a.fc-daygrid-more-link.fc-more-link{
  display: block;
  padding: 0.5em;
  border-radius: 1em;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  box-shadow: 0 2px 6px #00000026;
  border: 0.0625em solid #00000033;
  @media(max-width: 768px){
    padding: 0.3em;
    font-size: .85em;
  }
 }
 .fc .fc-daygrid-more-link{
  font-size: 1.2em;
  font-weight: bold;
 }
 .fc-h-event .fc-event-title{
  display:-webkit-box!important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3em;
 }
 .mybooking{
  &:after{
    content:"\f2bd"!important;
    position: relative!important;
    background: none!important;
    display: block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    color: #fff;
 /*    @media(min-width: $screen-xs){
      position: absolute;
      top: 2em;
      right: 1em;
    }*/
  }
 }
 .mybookinga{
      margin-bottom: 0.5em;
      a{
            font-size: 1em;
             font-weight: bold;
      }
 }
--- a/assets/stylesheets/template/modules/epaper.scss
+++ b/assets/stylesheets/template/modules/epaper.scss
@ -0,0 +1,229 @@
@charset "utf-8";
@import "../initial";
 .header-banner img[src*='epaper'] {
    position: absolute;
    top: 0;
    transform: translateX(50%);
    right: 50%;
    top: 3em;
 }
 .row.epaper-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
 }
 .criteria_list {
    thead {
    border-left: 6px solid rgb(105, 150, 171);
    background: rgb(74, 42, 36);
    color: rgb(255, 255, 255);
    font-family: 微軟正黑體;
    }
    tbody {
        background-color: transparent;
        tr {
            border-bottom: 1px dotted #4a2a24;
            padding: 5px 0;
        }
        td {
            border-top: transparent;
        }
    }
 }
 // slider-fullscreen
 .latest-fullslider {
    margin-bottom: 2em;
    .right-fullslider {
        white-space: normal;
        padding: 0 2em 2em;
        h3 {
            font-size: 2em;
            text-align: center;
            font-weight: 600;
        }
    }
    .left-fullslider { padding-right: 0; text-align: center;}
    .epaper-description { white-space: normal; }
    .epaper-container {
        min-height: 400px;
    }
    .banner-Container { background: #fff;}
 }
@media(max-width: 768px){
    .latest-fullslider{
        .epaper-container{
            background: #fff;
        }
        .right-fullslider{
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            a { color: $theme-white; }
        }
        .left-fullslider{
            img{
                width: 100%;
                max-height: 417px;
                overflow: hidden;
            }
        }
    }
 }
 //slider
 .latest_slider {
    display: flex;
    flex-direction: column;
    h3 { margin-bottom: 0; }
    .banner-Container { background: #fff; min-height: 300px; padding: 0 1rem 2rem; }
    .epaper-container {
        white-space: normal;
        flex-direction: column;
        h4 { white-space: normal; }
        img { width: 20em; }
        .epaper-description { white-space: normal; padding-top: 1em;}
    }
    .e-paper.btn { font-size: 0.65rem; }
 }
 // epaper-show page
 .epaper-show{
    @media(min-width: 768px){
        h3{
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 25px;
        }
        span{
            line-height: 27px;
        }
    }
    @media(max-width: 768px){
        .epaper-content{
            padding: 15px;
        }
        span{
            line-height: 20px;
        }
    }
    img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
 }
 // epaper-index1
 .epaper-index1-container{
    margin-top: 15px;
 .epaper-leftimg,.epaper-rightContent{
    display: inline-block;
    text-align: center;
 }
 .epaper-leftimg{
    img{
        width: 100%;
        //max-height: 225px;
    }
 }
 .epaper-rightContent{
    width: 50%;
 }
@media(min-width: 768px){
 	position: relative;
 	text-overflow: ellipsis;
 	background:#fff;
    .epaper-rightContent{
        position: relative;//absolute;
        top: 10px;
 		padding-bottom: 10px;
        .epaper-description{
            text-overflow: ellipsis;
        }
    }
 }
 }
 // epaper-index2
 .epaper-index2-container{
 	// border-style: solid;
    // border-color: #ccc;
    // border-width: 0 1px 1px;
 	h1,h2,h3,h4{
 		border-bottom: 1px solid #ccc;//#e1e1e1;
 		margin: 0;
 		padding: 10px 0 10px 10px;
 		span{
 		}
 	}
    margin-top: 15px;
 .epaper-leftimg,.epaper-rightContent{
    display: inline-block;
    text-align: left;
 }
@media(min-width: 768px){
 	.epaper-leftimg{
 		width: 30%;
 		padding: 10px 0 10px 10px;
 		img{
 			width:100%;
 			//max-height: 225px;
 		}
 	}
 	.epaper-rightContent{
 		padding: 10px 0 10px 10px;
 		width: 70%;
 	}
 }
@media(max-width: 767px){
 	.epaper-leftimg{
 		width: 100%;
 		padding: 10px;
 		img{
 			width:100%;
 			//max-height: 225px;
 		}
 	}
 	.epaper-rightContent{
 		padding: 10px;
 	}
 }
 background:#fff;
@media(min-width: 768px){
 	position: relative;
 	text-overflow: ellipsis;
    .epaper-rightContent{
        position: relative;//absolute;
        top: 10px;
 		padding-bottom: 20px;
 		padding-right: 10px;
        .epaper-description{
            text-overflow: ellipsis;
        }
    }
 }
 .epaper-description a:hover{
 	text-decoration-color: #333;
    text-decoration-line: underline;
 }
 }
--- a/assets/stylesheets/template/modules/event_news.scss
+++ b/assets/stylesheets/template/modules/event_news.scss
--- a/assets/stylesheets/template/modules/faq.scss
+++ b/assets/stylesheets/template/modules/faq.scss
@ -0,0 +1,115 @@
@charset "utf-8";
@import "../initial";
 // Faqs MODULES
 .widget-faqs {
  &.widget1 {
    .widget-content {
      padding-bottom: 0.625em;
      & + .widget-content {
        border-top: 0.0625em dotted $theme-gray-light;
      }
      .widget-content-title {
        display: inline-block;
        padding: 0.3125em 0;
      }
    }
    // 在 layout-content 下的樣式
    .layout-content & {
      .widget-title {
        @extend .unity-title;
      }
    }
    // 在 layout-footer 下的樣式
    .layout-footer & {
      .widget-content {
        line-height: 2em;
        border-top-color: $theme-gray;
      }
    }
  }
 }
 // Faqs INDEX
 .index-faqs {
  .index-title {
    @extend .unity-title;
  }
  &.index1 {
    .index-content {
      list-style-type: decimal-leading-zero;
      list-style-position: inside;
      & + .index-content {
        border-top: 0.0625em dotted $theme-gray-light;
      }
    }
  }
  &.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%;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      text-align: center;
      line-height: 30px;
      transition: 0.4s;
    }
    .rotate{
      background-color: $theme-color-second;
      color: #fff;
      transform: rotate(90deg);
    }
    .index-content {
      max-width: 900px;
      margin: 0 auto 0.5em auto;
     & h4 {
      @extend .transition;
      color: #333;
      background-color: #fff;
      border-color: #ddd;
      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 {
       @media(max-width:$screen-xs){
        padding: 1em;
       }
       @media(min-width:$screen-xs){
        padding: 1rem 4em;
       }
      display: none;
     }
    }
  }
 }
 .index-content{
  list-style: none;
 }
--- a/assets/stylesheets/template/modules/gallery.scss
+++ b/assets/stylesheets/template/modules/gallery.scss
@ -0,0 +1,306 @@
@charset "utf-8";
@import "../initial";
 .index-pic{
  overflow: hidden;
  padding: 0;
  .img-thumbnail{
    width: 100%;
  }
  &:hover{
    img{
    transform: scale(1.15) !important;
    -webkit-transition: .3s ease-out;
    -moz-transition: .3s ease-out;
    -ms-transition: .3s ease-out;
    -o-transition: .3s ease-out;
    transition: .3s ease-out;
    }
  }
 }
 // Gallery MODULES
 .widget-gallery {
  .widget-title {
    @extend .unity-title;
  }
  .widget-content {
    position: relative;
  }
  &.widget1 {
    .widget-content {
      overflow: hidden;
      .album-item {
        display: flex;
        flex-direction: column;
      }
      .widget-pic {
        display: inline-block;
        padding: 0.0625em;
        text-align: center;
        @include size(20%, auto);
        img {
          @include size(100%, 100%);
        }
      }
    }
  }
  &.widget2 {
    .col-md-6{
      @media(min-width: 768px){
        width: 50%;
        float: left;
      }
    }
    .widget-content {
      width: 100%;
      // margin-left: -0.3125em;
      // margin-right: -0.3125em;
      .widget-pic {
        margin-bottom: 1em;
        // padding-left: 0.3125em;
        // padding-right: 0.3125em;
        img {
          @include size(100%, auto);
        }
      }
    }
  }
  &.widget6 {
    .widget-content {
      overflow: hidden;
      .album-item {
        display: flex;
        flex-direction: column;
      }
      // .cycle-carousel-wrap{
      //   @media(min-width: $screen-md){
      //     margin-left: -300px!important;
      //   }
      //   @media(max-width:$screen-md )and(min-width:$screen-xs){
      //     margin-left: -100px!important;
      //   }
      //   @media(max-width: $screen-xs){
      //     margin-left: 40px!important;
      //   }
      // }
      .widget-pic {
        margin-right:1em;
        border-radius:  10px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        border:  2px solid $theme-color-second;
        overflow: hidden;
        display: inline-block;
        padding: 0.0625em;
        text-align: center;
        // @media(min-width: $screen-md){
        //   width:600px !important;
        // }
        @media(max-width:$screen-md )and(min-width:$screen-xs){
          width:33vw!important;
        }
        @media(max-width: $screen-xs){
          width:31vw!important;
        }
        img {
          display: inline-block;
          width: 100%;
          height: auto;
          border-radius: 1.5em;
          transform: scale(4) translateY(-1%);
        }
      }
    }
  }
 }
 .index-gallery {
  .index-title {
    @extend .unity-title;
  }
  &.index1 {
    .index-content {
      @media(max-width: $screen-xs){
        width: 100%;
      }
      &:nth-child(4n+1) {
        clear: both;
      }
      .index-part {
        padding: 0.5em;
      }
      .index-content-inner {
        position: relative;
      }
      .index-content-title {
        @extend .i-title;
        font-family: $main-font;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .index-img-description {
        font-size: 0.813em;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  &.index2 {
    .index-part{
      @media(max-width: $screen-xs){
        padding-left: 1em;
      }
    }
    .index-content {
      padding: 1em;
      background: lighten($theme-gray, 60%);
      margin-bottom: 1.25em;
      border-radius: 0.125em;
      width: 100%;
      @media screen and (max-width: $screen-sm) {
        // margin-right: 1.25em;
        // margin-left: 1.25em;
      }
    }
    .index-content-inner {
    }
    .index-img {
      border-radius: 0.125em;
    }
    .index-content-title {
      @extend .i-title;
      font-family: $main-font;
    }
    .index-img-description {
      font-size: 0.813em;
    }
  }
  &.index6 {
  .index-content{
    margin-bottom: 1em;
    @media(min-width: $screen-xs)and(max-width: 820px){
        width: 50%;
    }
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
  .index-pic{
    border-bottom-right-radius: 30px;
    overflow: hidden;
    .img-thumbnail{
      width: 100%;
      border: 0;
      padding: 0;
      &:hover{
        transform: scale(2);
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease;
      }
    }
  }
  .index-content {
    &:nth-child(4n+1) {
      clear: both;
    }
    .index-part {
      padding: 0.5em;
    }
    .index-content-inner {
      position: relative;
      border: 0.0625em solid #ddd;
      padding: 0.8em;
    }
    .index-content-title {
      @extend .i-title;
      font-family: $main-font;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0;
      height: 2.5em;
    }
    .index-img-description {
      font-size: 0.813em;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
 }
 }
 .show-gallery {
  .show-title {
    @extend .unity-title;
  }
  .show-content {
    padding-right: 0;
    padding-left: 0;
    &:nth-child(6n+1) {
      clear: both;
    }
    .img {
      display: inline-block;
      width: 100%;
      height: auto;
      border-radius: 0.125em;
    }
    .show-content-inner {
      position: relative;
      padding: 0.3125em;
      z-index: 0;
    }
    .show-description {
      font-family: $main-font;
      font-size: 0.813em;
      padding: 0.5em;
    }
  }
 }
 // .img-thumbnail{
 //   width: 100%;
 // }
--- a/assets/stylesheets/template/modules/hashtag.scss
+++ b/assets/stylesheets/template/modules/hashtag.scss
@ -0,0 +1,25 @@
@charset "utf-8";
@import "../initial";
 p.s-annc__post-orbithashtags{
    clear: both;
 }
 a.orbit-hash-tag {
    list-style: none;
    background: #e0edff;
    color: #0a84ff;
    margin-right: 0.5em;
    border-radius: 0.5em;
    padding: 0.2em 0.5em;
    margin-bottom: 0.5em;
    display: inline-block;
    &:hover{
        background: #0a84ff;
        transform: translatey(-2px);
        transition: transform 0.4s;
        color: #fff;
    }
 }
--- a/assets/stylesheets/template/modules/member.scss
+++ b/assets/stylesheets/template/modules/member.scss
@ -0,0 +1,749 @@
@charset "utf-8";
@import "../initial";
 //
 // Index
 //
 // Member Index
 // ## Gerneral styles for Index
 .i-member-item{
  &:hover{
    .i-member-pic-wrap-outer{
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
        transition: .3s ease-out;
    }
  }
 }
 .i-member-pic-wrap-outer{
    position: relative;
    width: 10em;
    height: 10em;
 }
 .i-member-pic-wrap{
      background: #d7d7d7;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .i-member-pic-wrapinner{
    width: 95%;
    height: 95%;
    text-align: center;
    clip-path: inherit;
 }
 tr[data-list="pd_title"]{
  display:none!important;
 }
 .i-member-item{
  &:hover{
    .i-member-pic-wrap-outer{
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
        transition: .3s ease-out;
    }
  }
 }
 .i-member-pic-wrap-outer{
    position: relative;
    width: 10em;
    height: 10em;
 }
 .i-member-pic-wrap{
      background: #d7d7d7;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .i-member-pic-wrapinner{
    width: 95%;
    height: 95%;
    text-align: center;
    clip-path: inherit;
 }
 tr[data-list="pd_title"]{
  display:none!important;
 }
 .i-member-item-inner{
      height: -webkit-fill-available;
 }
 tr.i-member-tr-head {
    background: radial-gradient(circle at 70% 80%, #00437c, transparent 60%), radial-gradient(circle at 25% 25%, #a0bfff80, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #00437c 0%, #00437c 60%, #80b5ff 100%);
 }
 .index-member-list {
    background: #fff;
 }
 .i-member-profile-item{
  list-style: none;
 }
 .i-member-pic-wrap{
  overflow: hidden;
 }
 .i-member-item{
  &:hover{
    img{
      transform: scale(1.1) !important;
      -webkit-transition: .3s ease-out;
      -moz-transition: .3s ease-out;
      -ms-transition: .3s ease-out;
      -o-transition: .3s ease-out;
      transition: .3s ease-out;
    }
  }
 }
 // Index 1
 .index-member-1 {
  .i-member__status-title {
    @extend .unity-title;
  }
  .member-data-value-name, .member-data-value-2 {
    // white-space: nowrap;
  }
  .i-member-tr-head {
    &:nth-child(1n+2) {
      display: none;
    }
    th {
      background: transparent;
      color: #fff;
      min-width: 7em;
    }
  }
  @media(max-width:580px) {
    thead { display: none; }
    td {
      display: flex;
      &:before {
        content: attr(data-title);
        display: inline-block;
        width: auto;
        min-width: 40%;
      }
    }
  }
 }
 // Index 2
 .index-member-2 {
  .i-member-section {
    max-width: 31.25em;
    margin: auto;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
    border-radius: 0.25rem;
    padding: 1.5em 1rem;
    margin-bottom: 1em;
        box-shadow: #00000024 0px 5px 6px 0px;
        background: #ffffffa1;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    @media(max-width:768px){
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .i-member-profile-data-wrap{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .i-member-pic-wrap {
    height: auto;
    margin-bottom: 1em;
    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
    height: 10em;
    width: 10em;
    padding: 0;
  }
  .i-member-pic {
    width: 100%;
    padding: 0;
    height: 100%;
    object-fit: cover;
  }
  .i-member-profile-list {
    @include list-reset;
  }
  .i-member-profile-item {
    margin-bottom: 0.5em;
    font-size: $font-13;
  }
  // RWD
  @media screen and (min-width: $screen-sm) {
    .i-member-section {
      max-width: 100%;
    }
    .i-member-item-inner {
    }
  }
 }
 // Index 3
 .index-member-3 {
  .i-member-section {
    margin: auto;
  }
  .i-member-list {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
  }
  .i-member-item {
    border-radius: 0.3125em;
    float: none;
    margin: 0 1% 1.875em;
    width: 48%;
  }
  .i-member-item-inner {
    height: auto !important;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
  }
    .i-member-item-inner {
    background: none;
    border-radius: 0.25rem;
    padding: 1.5em 1rem;
    margin-bottom: 1em;
        box-shadow: #00000024 0px 5px 6px 0px;
        background: #ffffffa1;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    @media(max-width:768px){
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .i-member-profile-data-wrap{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .i-member-pic-wrap {
    height: auto;
    margin-bottom: 1em;
    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
    height: 10em;
    width: 10em;
    padding: 0;
  }
  .i-member-pic {
    width: 100%;
  }
  .i-member-profile-list {
    @include list-reset;
  }
  .i-member-profile-item {
    margin-bottom: 0.5em;
    font-size: $font-13;
  }
  .i-member-item:nth-child(odd) {
    clear: both;
  }
  .i-member-item-inner {}
  .i-member-pic-wrap {
    padding: 0;
  }
  // RWD
  @media screen and (min-width: $screen-sm) {
    .i-member-section {
      max-width: 100%;
    }
    .i-member-item-inner {
    }
  }
  @media screen and (min-width: $screen-md) {
    .i-member-pic-wrap {
      position: relative;
      overflow: hidden;
    }
  }
  @media screen and (max-width: $screen-xs) {
    .i-member-item {
      width: 100%;
    }
    .i-member-item-inner { display: flex; }
  }
 }
 // Index 4
 .index-member-4 {
  .i-member-section {
    max-width: 31.25em;
    margin: auto;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
    border-radius: 0.25rem;
    padding: 0.75em 1rem;
    margin-bottom: 1em;
            background: #f3f3f3a3;
        box-shadow: #00000024 0px 5px 6px 0px;
        backdrop-filter: saturate(180%) blur(20px);
  }
  .i-member-profile-list {
    @include list-reset;
  }
  .i-member-profile-item {
    margin-bottom: 0.5em;
    font-size: $font-13;
    word-break: break-word;
  }
  .i-member-item:nth-child(4n+1) {
    clear: both;
  }
  // RWD
  @media screen and (min-width: $screen-sm) {
    .i-member-section {
      max-width: 100%;
    }
    .i-member-item-inner {
    }
  }
 }
 //index 5
 .index-member-5 {
  .i-member-section {
    margin: auto;
  }
  .i-member-list {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
  }
  .i-member-item {
    float: none;
    padding: 15px;
    @media (max-width:1280px) {
      width: calc( 100% / 3 );
    }
    @media (max-width:767px) {
      width: calc( 100% / 2 );
    }
    @media (max-width:580px) {
      width: 100%;
    }
  }
  .i-member-item-inner {
    height: auto !important;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .i-member-pic-wrap {
    height: auto;
    margin-bottom: 16px;
    @media(max-width:580px) {
      overflow: hidden;
      border-radius: 50%;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      height: 14em;
      width: 14em;
      margin: 1.5em auto 1em auto;
    }
  }
  .i-member-pic {
    width: 100%;
  }
  .i-member-profile-list {
    @include list-reset;
    word-break: break-all;
    text-align: center;
  }
  .i-member-profile-item {
    font-size: 1em;
    line-height: 1.3;
    padding-top: 0.5em;
    letter-spacing: 1px;
  }
  .i-member-title { display: none; }
  .i-member-item:nth-child(4n+1) {
    clear: both;
  }
  .i-member-pic-wrap {
    padding: 0;
    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
    height: 10em;
    width: 10em;
  }
 }
 //index 7
 .index-member-7 {
  .i-member-section {
    margin: auto;
  }
  .i-member-list {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
  }
  .i-member-item {
    float: none;
    padding: 15px;
    @media (max-width:1280px) {
      width: calc( 100% / 3 );
    }
    @media (max-width:767px) {
      width: calc( 100% / 2 );
    }
    @media (max-width:580px) {
      width: 100%;
    }
  }
  .i-member-item-inner {
    height: auto !important;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
  }
  .i-member-pic-wrap {
    height: auto;
    margin-bottom: 16px;
    @media(max-width:580px) {
      overflow: hidden;
      border-radius: 50%;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      height: 14em;
      width: 14em;
      margin: 1.5em auto 1em auto;
    }
  }
  .i-member-pic {
    width: 100%;
  }
  .i-member-profile-list {
    @include list-reset;
    word-break: break-all;
    text-align: center;
  }
  .i-member-profile-item {
    font-size: 1em;
    letter-spacing: 1px;
  }
  .i-member-title { display: none; }
  .i-member-item:nth-child(4n+1) {
    clear: both;
  }
  .i-member-pic-wrap {
    padding: 0;
  }
 }
 //index 8
 .index-member-8 {
  .member-data-value-name,.member-data-value-2{
    white-space: unset!important;
  }
  .i-member-item{
    background-color: transparent!important;
  }
  .i-member-section {
    margin: auto;
  }
  .i-member-list {
    display: flex;
    flex-flow: row wrap;
    margin: 0;
  }
  .i-member-item {
    float: none;
    padding: 15px;
    @media (max-width:1280px) {
      width: calc( 100% / 3 );
    }
    @media (max-width:767px) {
      width: calc( 100% / 2 );
    }
    @media (max-width:580px) {
      width: 100%;
    }
  }
  .i-member-item-inner {
    height: auto !important;
    display: block;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
        box-shadow: 0 5px 16px 0 #00000024;
    background: #ffffffa1;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 0.8em;
    overflow: hidden;
    padding: 0 0 1em;
  }
  .i-member-profile-data-wrap {
    padding: 0 2em;
  }
  .i-member-pic-wrap {
    height:12em;
    margin-bottom: 16px;
  }
  .i-member-pic {
    width: 100%;
  }
  .i-member-profile-list {
    @include list-reset;
    word-break: break-all;
    text-align: center;
  }
  .i-member-profile-item {
    font-size: 0.8em;
    line-height: 1.3;
    letter-spacing: 1px;
  }
  .i-member-title { display: none; }
  .i-member-item:nth-child(4n+1) {
    clear: both;
  }
  .i-member-pic-wrap {
    padding: 0;
  }
 }
 // Show page
 .show-member {
  font-family: $sub-font;
  .memberul{
    padding: 0;
    li{
      margin-bottom: 0.5em;
      list-style: none;
    }
  }
  th, td {
    font-size: 0.938em;
  }
  .member-plugins {
    margin: 0;
    a {
      font-size: 0.938em;
    }
  }
  .row {
    padding-bottom: 1em;
  }
  .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    background-color:$theme-color-second;
  }
  .nav-pills>li>a {
    border-radius: unset;
    background-color: #eee;
    transition: all 0.5s;
  }
  .nav>li>a:focus, .nav>li>a:hover {
    background-color: darken($color: #eee, $amount: 10%);
  }
  .tab-content {
    border: 1px solid #eee;
  }
  .custom-scroll-arrow {
    border: unset;
    border-top: none;
    color: #428bca;
    font-size: 1.25em;
    margin-bottom: 0;
    padding-left: 6px;
    padding-right: 5px;
    padding-top: 6px;
    width: 20px;
    &:hover {
      background-color: unset;
      color: darken($color: #428bca, $amount: 10);
    }
  }
  @media screen and (max-width: 580px) {
    .row {
      display: flex;
      flex-direction: column;
    }
    .member-pic { width: 80%; margin: 0 auto 10px; }
    .member-data { width: 100%; }
  }
 }
 .show-member{
  .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
      border: 0;
  }
 }
 // Index 9
 .index-member-9 {
  .i-annc__page-title{
    display: none;
  }
  @media(min-width:769px){
    .i-member-profile-list{
      display: flex;
      flex-wrap: wrap;
    }
    .i-member-profile-item.deputy {
        width: 100%;
    }
    .titlesection,.infosection{
      width: 50%;
    }
  }
  .i-member-pic-wrap{
    display: none!important;
  }
  .member-data-value-1 {
      color: #0693e3;
      font-size: 2em;
  }
  .member-data-value-name{
      color: #0693e3;
      font-size: 2em;
  }
  .member-data-title-1,.member-data-title-name {
    display: none;
  }
  .i-member-section {
    max-width: 31.25em;
    margin: auto;
  }
  .i-member-status-title {
    @extend .unity-title;
  }
  .i-member-item-inner {
    background: none;
    padding: 1.5em 1rem;
    margin-bottom: 1em;
    border-bottom: 2px solid #333;
    @media(max-width:768px){
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  .i-member-profile-data-wrap{
    @media(max-width:768px){
      width: 100%;
    }
  }
  .i-member-pic-wrap {
    height: auto;
    margin-bottom: 1em;
    clip-path: polygon(25% 5.77%, 75% 5.77%, 100% 50%, 75% 94.23%, 25% 94.23%, 0% 50%);
    height: 10em;
    width: 10em;
    padding: 0;
  }
  .i-member-pic {
    width: 100%;
    padding: 0;
    height: 100%;
    object-fit: cover;
  }
  .i-member-profile-list {
    @include list-reset;
    color: #737f85;
  }
  .i-member-profile-item {
    margin-bottom: 0.5em;
    font-size: $font-13;
  }
  // RWD
  @media screen and (min-width: $screen-sm) {
    .i-member-section {
      max-width: 100%;
    }
    .i-member-item-inner {
    }
  }
 }
--- a/assets/stylesheets/template/modules/menu.scss
+++ b/assets/stylesheets/template/modules/menu.scss
@ -0,0 +1,668 @@
@charset "utf-8";
@import "../initial";
 // // 選單樣式2
 // .modules-menu .modules-menu-level-1 > li:hover, .modules-menu .modules-menu-level-1 > li.hover-class{
 //   background-color: transparent!important;
 //   >a{
 //     text-decoration: underline;
 //   }
 // }
 // .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;
 //       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 {
    @media (max-width: 768px) {
      .navbar-header{
        position: relative;
      }
      .site-logo {
          height: 35px !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;
      }
    }
  .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;
  padding: 0.5em 0;
  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: #ffffffc2;
  -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;
 //   }
 // }
 #layout-navigation{
  @media(min-width: 769px){
      width: 100%;
  }
 }
 .navbar-collapse.in {
  overflow-y: unset;
 }
 .modules-menu {
  font-family: $sub-font;
  max-height: none;
  z-index: 1020;
  li {
    padding: 1em;
    list-style: none;
  }
  .menu-drop.opened {
    transform: rotateX(180deg);
  }
  .modules-menu-level-0 {
      width: 100%;
      padding: 0;
      @media (min-width:769px)and(max-width: 1024px){
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        padding: 0;
        width: 100%;
      }
    @media (min-width:1025px) {
      margin: 0;
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: 75%;
      padding-top: 0.1em;
      }
    .has-dropdown.level-1.active {
      .modules-menu-level-1 {
        display: block;
      }
    }
    .has-dropdown.level-2.active {
      .modules-menu-level-2 {
        display: block;
      }
    }
    // .dropdown-toggle-icon {
    //   position: absolute;
    //   top: 0.5em;
    //   right: 0.3em;
    //   width: 2.5em;
    //   height: 2.5em;
    //   cursor: pointer;
    //   line-height: 2.5em;
    //   font-size: 1em;
    //   text-align: center;
    //   border-radius: 0.13em;
    // }
    .menu-drop {
      position: absolute;
      right: 0.3em;
      width: 2.5em;
      height: 2.5em;
      cursor: pointer;
      line-height: 2.5em;
      font-size: 0.5em;
      text-align: center;
      border-radius: 0.13em;
      top: 2em;
      @media(max-width: 769px){
        top: 1em;
        font-size: 1em;
      }
    }
    // .dropdown-toggle-icon.level-1 {
    //   background-color: lighten($theme-gray, 10%);
    // }
    // .dropdown-toggle-icon.level-2 {
    //   background-color: lighten($theme-gray, 10%);
    // }
    & > li {
      list-style: none;
      position:relative;
      margin: 0;
      padding: 0.5em;
      border-bottom: 0.0625em solid lighten($theme-gray, 5%);
      & > a {
        display: block;
        padding: 0.7em;
        font-family: $main-font;
        font-size: 1em;
        &:after{
          content:'';
          position:absolute;
          top:0;
          right:0;
          height:3px;
          width:0;
          background: $theme-color-second;
          transition: all 0.3s;
        }
        &:after{
          right:inherit;
          top:inherit;
          left:0;
          bottom:0;
        }
        &.active {
          color: $theme-color-second;
          background: none;
          &:after{
            width:100%;
            transition: all 0.3s;
          }
        }
      }
      &:hover {
        & > a {
          color: $theme-color-second;
          background: transparent;
          box-shadow:none;
          &:after{
            width:100%;
            transition: all 0.3s;
          }
        }
        @media (min-width: $screen-sm) {
          // background-color: $theme-color-second;
          // border-radius: 0.5em;
        }
      }
      @media (min-width: $screen-sm)and(max-width: 1439px){
        &:last-child{
          .modules-menu-level-1 {
            right: 0;
           }
        }
        &:nth-last-child(2){
          .modules-menu-level-1 {
            right: 0;
          }
        }
      }
      @media (min-width: $screen-sm) {
        margin: 0;
        padding: 0;
        border-bottom: none;
        &:first-child {
          margin-left: 0;
        }
        &:nth-last-child(2){
          .modules-menu-level-2 {
            right: 100%;
            left: auto;
          }
        }
        &:last-child {
          margin-right: 0;
          .modules-menu-level-1 {
            left: auto;
            &:before {
              right: 0.625em;
              left: auto;
            }
            & > li {
              padding-right: 1em;
              padding-left: 1em;
              & > a {
                padding-left: 0;
              }
            }
            .modules-menu-level-2 {
              right: 100%;
              left: auto;
            }
          }
        }
        & > a {
          font-size:1em;
          color:#354656;
          font-weight: bold;
          position: relative;
        }
        &:hover {
          .modules-menu-level-1 {
            display: block;
            transition-duration: opacity 0.3s cubic-bezier(0.48, 0.01, 0.5, 0.99),visibility 0.1s linear;
          }
        }
      }
    }
  }
  .modules-menu-level-1 {
    display: none;
    list-style: none;
    z-index: 1;
    padding:0;
    left: auto;
    @media(min-width:769px){
      min-width: 200px;
      width:max-content;
      box-shadow: 2px 2px 5px #00000033;
      margin:0;
      transition-duration: 0.5s;
          background: radial-gradient(circle at 70% 80%, #00437c, transparent 60%), radial-gradient(circle at 25% 25%, #a0bfff80, transparent 40%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #00437c 0%, #00437c 60%, #80b5ff 100%);
      & > a {
        padding: 1em 1.5em;
      }
    }
    & > li {
      position: relative;
      padding: 1em;
      // & + li {
      //   border-top: 0.0625em solid lighten($theme-gray, 5%);
      // }
      & > a {
        display: block;
        font-family: $main-font;
        font-weight: 600;
        color: #fff;
        font-size: 1em;
        @media(max-width: 768px){
        color: #354656;
        }
      }
      &:hover {
          background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641;
        @media(max-width: 769px){
          a,i {
           color:#fff;
         }
        }
         &>a {
          color:#fff;
        }
      }
    }
    @media (min-width: $screen-sm) {
      position: absolute;
      & > li {
        & > a {
          padding:0;
        }
        &:hover {
          .modules-menu-level-2 {
            display: block;
            position: absolute;
          }
        }
      }
    }
  }
  .modules-menu-level-2 {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    & > li {
      & + li {
        // border-top: 0.0625em solid lighten($theme-gray, 5%);
      }
      & > a {
        display: block;
        font-family: $main-font;
        color:#354656;
        font-weight: 500;
        font-weight: bold;
      }
      &:hover {
        a{
          transition: all 0.3s ease-in-out;
          color: $theme-color-second;
          margin-left: 0.5rem;
        }
      }
    }
    @media (min-width: $screen-sm) {
      top: 0;
      left: 100%;
      background-color: #dbdbdb;
      position: absolute;
      min-width: 150px;
    }
  }
 }
 .has-mobile-dropdown {
  .modules-menu {
    .dropdown-toggle-icon {
      display: block;
    }
  }
 }
@media (max-width: 767px) {
  .modules-menu .modules-menu-level-0 {
    flex-direction: column;
    width: 100%;
  padding: 0;
  }
 }
@media (max-width: 769px) {
  .modules-menu .modules-menu-level-0 {
    width: 100%;
    padding: 0;
  }
 }
 //mobile
 .mobile-menu {
  z-index: 1051;
  width: 100vw;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  &.active {
    display: block;
  }
  .modules-menu {
    width: 80%;
    position: absolute;
    right: 0;
    background: #ffffff;
    height: 100%;
    top: 0;
    padding-top: 40px;
  }
  .modules-menu .modules-menu-level-0 > li > a, .modules-menu .modules-menu-level-0 ,.modules-menu .modules-menu-level-0 > li {
    font-weight:bold;
  }
 .menu-drop{
 }
  .navbar-toggle {
    position: absolute;
    left: 0;
    background: transparent;
    top: 40px;
    z-index: 1;
    height: 100vh;
    margin: 0;
    width: 20%;
    border: 0;
  }
  .cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8);
    z-index: 0;
  }
 }
 //覆蓋bootstrap nav設定
 .mobile-menu .modules-menu.collapsing {
  overflow:unset !important;
  transform: translateX(100%);
  -webkit-transition-timing-function:ease;
  -o-transition-timing-function:ease;
  transition-timing-function:ease;
  -webkit-transition-duration:.35s;
  -o-transition-duration:.35s;
  transition-duration:.35s;
  -webkit-transition-property:transform;
  -o-transition-property:transform;
  transition-property:transform;
 }
 .mobile-menu .modules-menu.collapse.in {
  transform: translateX(0%);
  -webkit-transition-timing-function:ease;
  -o-transition-timing-function:ease;
  transition-timing-function:ease;
  -webkit-transition-duration:.35s;
  -o-transition-duration:.35s;
  transition-duration:.35s;
  -webkit-transition-property:transform;
  -o-transition-property:transform;
  transition-property:transform;
 }
 .mobile-menu .collapse.navbar-collapse.modules-menu {
      overflow-y: scroll;
 }
 .display-on{
   display:block!important;
   transition-duration: 0.9s;
 }
 .drop-down > a:after{
    content:"\f103";
    color:#fff;
    font-family: FontAwesome;
    font-style: normal;
    margin-left: 5px;
 }
 .dropdown-arrow{
    align-self: center;
    margin-left: 10px;
    z-index: 999;
    @media(max-width: 769px){
      position: absolute;
      right: 0.3em;
      width: 2.5em;
      height: 2.5em;
      cursor: pointer;
      line-height: 2.5em;
      font-size: 1em;
      text-align: center;
      border-radius: 0.13em;
      display: none!important;
    }
 }
 .fa-chevron-right{
    align-self: center;
    margin-left: 10px;
    font-weight: 100!important;
 }
 .show{
  opacity: 1!important;
  display: block!important;
  visibility: visible!important;
 }
 .mobile-menu2{
  &>a{
      padding-right: 1em;
  }
  .menu-drop{
    top: 0.6em!important;
  }
 }
 html[lang="en"]{
  .modules-menu .modules-menu-level-0{
    @media (min-width: 1025px){
      width: 75%;
    }
  }
  .modules-menu-level-1{
    @media(min-width:769px){
      min-width: 220px!important;
    }
  }
 }
--- a/assets/stylesheets/template/modules/personal_plugin.scss
+++ b/assets/stylesheets/template/modules/personal_plugin.scss
@ -0,0 +1,21 @@
@charset "utf-8";
 .plugin-show-table th {
  text-align: right;
  min-width: 5em;
 }
 .search-widget h3, .projects-index h3 {
  @extend .unity-title;
 }
 .projects-index {
  width: 100% !important; 
  thead > tr th {
    word-break: keep-all;
    @media(max-width: 580px) {
      word-break: unset;
    }
  }
 }
--- a/assets/stylesheets/template/modules/text_marquee.scss
+++ b/assets/stylesheets/template/modules/text_marquee.scss
@ -0,0 +1,91 @@
@import "../initial";
 .marquee {
  background:#ff0000;
  font-size: 0.938em;
  list-style:none;
  margin: 0;
  min-height: 1.875em;
  overflow: hidden;
  padding: 0.75em;
  color: #fff;
  li{
      list-style:none;
  }
  a{
    color: #fff;
  }
    &:before{
  content: "\f0a1";
    font-family: FontAwesome;
    color: #FFEB3B;
    font-size: 18px;
    padding-right: 0.5em;
    float: left;
    }
 }
 .text_marqueewrapper{
  z-index:1 ;
  position: relative;
 }
 .marquee-1{
      overflow: hidden;
    position: relative;
 }
 .marquee2 {
  border-radius:2em;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background:#fff;
  font-size: 0.938em;
  list-style:none;
  min-height: 1.875em;
  overflow: hidden;
  padding: 0.75em;
  color: #333;
  border: 1px solid #e5e7eb;
  li{
      list-style:none;
      z-index: 1;
      position: relative;
  }
  a{
    color: #333;
  }
  &:before{
    content: "\f0a1";
    font-family: FontAwesome;
    color: #bfc0c3;
    font-size: 18px;
    padding-right: 0.5em;
    float: left;
    z-index: 1;
  }
    &:after{
        z-index: 0;
        content: '';
        position: absolute;
        top: -100%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0) 30%,
          #fff 50%,
          rgba(255, 255, 255, 0) 70%
        );
        transform: translateX(-100%) rotate(0deg);
        transition: all 1.2s ease;
        pointer-events: none;
    }
  &:hover{
    background: #e1e1e1;
    border: 1px solid $theme-color-second;
    &:before{
      content: "\f0a1";
      color:$theme-color-second;
    }
    &:after{
      transform: translateX(100%) rotate(0deg);
    }
  }
 }
--- a/assets/stylesheets/template/modules/universal-table.scss
+++ b/assets/stylesheets/template/modules/universal-table.scss
@ -0,0 +1,382 @@
@charset "utf-8";
@import "../initial";
 .universal-form-inline{
  position: relative;
 }
 .universal-table-index tbody{
  width:100% ;
 }
 .universal-table-show{
  .view_count > i:before{
    content: "\f019"!important;
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
 }
 .universal-table-index{
  .view_count > i:before{
    content: "\f019"!important;
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
  }
 }
 .universal-table-index{
  tr{
      background-color: #fff!important;
  }
 }
 .searchbox2 .row > div{
  width: 100%!important;
 }
 .universal-table-index caption {
  width: 100%;
  position: relative;
  caption-side: top !important;
  @media(max-width:$screen-xs){
  }
 }
 .universal-btn{
  position: relative;
  right: 0;
 }
 .universal-form-inline .searchbtn.ken-click {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
 .universal-table-index h3 {
  @extend .unity-title;
  float: left;
  margin: 0;
 }
 .btn .caret{
  color: #858585;
 }
 .universal-table-show{
  @media(max-width: $screen-xs){
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    tr{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
    td{
      width:100%!important;
    }
    th{
      width: 100%!important;
    }
  }
 }
 .universal-table-index{
  @media(max-width: $screen-xs){
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      border:0!important;
      tr{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
      td{
        width: 100%;
      }
      th{
        width: 100%;
      }
  }
 }
 .theadsearch .universal-th-icon, .theadsearch .universal-dropdown {
    display: none !important;
 }
 .searchbtn{
  cursor: pointer;
  padding: 0;
  position: absolute;
  right:0;
  z-index:2;
  @media(max-width: $screen-xs){
    margin-top: 0.5em;
    right:0;
    top:0;
    position: relative;
    float: right;
    margin-bottom: 0.5em;
  }
  .searchbtn2, .universal-btn {
    line-height: 2em;
    padding: 2px 15px 2px 15px;
    font-size: 1em;
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    color:#fff;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 1em;
    i {
      color: #fff;
    }
    &:hover{
      color: #fff;
      i {
        color: #fff;
      }
    }
  }
  .searchbtn2{
    background-position: 10px center;
    display: inline-block;
    background-color: $theme-color-second;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    text-align: center;
    border: 0;
    &:hover{
      background-color:$theme-color-third;
    }
  }
  i{
    color: #fff;
  }
 }
 .theadsearch2{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  .submit-btn-wrap{
    padding: 0;
  }
  .dropdown-menu {
    right: 0;
    left: unset;
    position: relative;
    padding: 0 5px;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    display: block;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  .row > div {
    border-radius: 5px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 1px solid #CCC;
    padding: 0.5em 0.9375em;
    font-weight: bold;
    @media (max-width: 991px) {
      margin-bottom: 5px;
    }
  }
  .row > div {
    // width: 100%;
  }
  @media (max-width: 991px) {
    .submit-btn-wrap {
      padding-right: 0;
    }
  }
  .universal-th-text,.universal-th-icon{
      color: #333!important;
  }
  @media (min-width: 769px) {
    .form-group {
      width: 100%;
      .form-control {
        width: 100%;
      }
    }
  }
 }
 .searchbox{
  display: none;
  margin-top: 1em;
  z-index: 1;
  position: relative;
  width: 100%;
  clear: both;
      .fa-search{
        color: #333!important;
      }
 }
 .universal-dropdown{
  float: right;
 }
 .theadsearch{
  width: 100%;
 }
 .column_entry_files{
    padding-left:0;
 }
 .column_entry_file{
    list-style: none;
 }
 // .ken-click2{
 //   margin-top:-3em;
 //   -webkit-transition: .3s all ease;
 //   -o-transition: .3s all ease;
 //   transition: .3s all ease;
 // }
 .submit-btn-wrap{
  @media(min-width:769px){
    margin-top: 3em;
  }
 }
 .universal-table-index.table td{
      padding: 15px 10px!important;
 }
 .universal-table-index1{
      table-layout: auto !important;
  .col-ken{
    @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;
    }
  }
 }
 .universal-table-index3{
      table-layout: auto !important;
  .col-ken{
    @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;
    }
  }
 }
 .universal-table-index2{
      table-layout: auto !important;
  .col-ken{
    @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;
    }
  }
 }
 .universal-table-index4{
      table-layout: auto !important;
  .col-ken{
    @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;
    }
  }
 }
@media (max-width: 768px) {
  #hashtag-wordcloud {
    width: 800px!important;
    height: 500px!important;
  }
  /* 讓外層容器可以左右滑動 */
  #hashtag-wordcloud-wrapper {
    overflow-x: auto;
    width: 100%;
  }
 }
 #hashtag-wordcloud{
      margin-top: 1.5em;
      position: relative;
      margin:1.5em auto; 
      width: 80%;
      height:400px;  
      overflow: hidden;
  a{   
    border-radius: 0.5em;
    padding: 0.2em;
    &:hover{
      -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
    -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033;
        -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    filter: brightness(0.4) saturate(1.3);
    transform: scale(1.1);
    }
  }
 }
--- a/assets/stylesheets/template/modules/video.scss
+++ b/assets/stylesheets/template/modules/video.scss
@ -0,0 +1,983 @@
@charset "utf-8";
@import "../initial";
 .i-annc__page-title{
  @extend .unity-title;
 }
 .video_desc{
  cite{
    display: none;
  }
 }
 .video_tag .video_tags2{
  display: none;
  &:first-child{
    display: block!important;
  }
 }
 .Video__Player{
  display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      .Video__PlayerButton{
        display: inline-block;
        padding-bottom: 0px;
        padding-top: 0px;
        border-radius: 50%;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        border: 0px;
        background-color: $theme-color-second;
        background: url(/assets/btn-play.svg) no-repeat;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        transition: 0.5s;
        width: 60px;
        height: 60px;
        &:hover{
          width: 80px;
          height: 80px;
        }
      }
 }
 .view_info{
  max-height: 100%;
  border-radius: 2px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  font-size: 0.875rem;
  font-weight: normal;
  letter-spacing: 0.3px;
  text-align: center;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  position: absolute;
  padding: 0px 8px;
  background-color: #000000cc;
  color: rgb(255, 255, 255);
  z-index: 10;
  top: 10px;
  left: 10px;
  border: 1px solid transparent;
  line-height: 1.45;
  span{
    color:#fff;
  }
  &:before{
    content: "";
    display: inline-block;
    margin-right: 5px;
    width: 14px;
    height: 10px;
    background: url(/assets/icon-view@2x.png) no-repeat;
    position: relative;
    background-size: contain;
  }
 }
 .w-video_data{
  padding-bottom: 1em;
  position: relative;
  .video_keyword{
    display: none;
  }
  .video_tag{
    top:10px;
    max-height: 100%;
    border: 0;
    border-radius: 2px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    background-color: transparent;
    font-size: 0.875rem;
    font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
    font-weight: normal;
    letter-spacing: 0.3px;
    text-align: center;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: absolute;
    padding: 0px 8px;
    color: #fff;
    z-index: 5;
    .video_tags2 {
      &:first-child{
        border:1px #fff solid;
        border-radius: 2px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        background-color: #1515154d;
      }
      float: left;
      padding: 0 0.5em;
    }
  }
 }
 .view_info{
  img{
    width: 30px!important;
  }
 }
 .videohover{
  position: absolute;
  width: 100%;
  height: 100%;
  transition: 0.3s;
  top: 0;
  opacity: 0;
 }
 .video_data{
  z-index: 1!important;
  position: relative!important;
  &:hover{
    .video_title{
      .video_link{
        color: $theme-color-second;
        text-decoration: underline;
      }
    }
    .videohover{
      position: absolute;
      width: 100%;
      height: 100%;
      transition: 0.3s;
      z-index: 2;
      opacity: 1;
    }
  }
  &:hover{
    @media(min-width: 1025px){
      .video_snapshot{
            box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.3);
            -webkit-transform: scale(1.1) ;
            -ms-transform: scale(1.1) ;
            transform: scale(1.1) ;
            -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_linkwrapper2{
        .video_snapshot{
              -webkit-transform: scale(1.1) !important;
              -ms-transform: scale(1.1) !important;
              transform: scale(1.1) !important;
        }
      }
    }
    .video_tag{
      display: none;
    }
  }
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media(max-width: 768px){
    width: 100%;
  }
 }
 .video_data-widget-1{
  .video_info{
      margin:0.5em 0;
  }
 }
 .video_data-widget-2{
  cite{
    display: none;
  }
  .col-sm-4{
    @media(min-width:768px){
      width: 33.33333333%;
      float: left;
    }
  }
  .video_data_wrap{
    @media(min-width:$screen-xs){
      display: flex;
      flex-wrap: wrap;
    }
  }
  .video_desc{
    display: none;
  }
  .video_info{
      margin:0.5em 0;
  }
  .video_link{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
  .video_keyword{
    display: none;
  }
  .video_data{
    &:first-child{
      .video_tags2{
        display: block!important;
       }
      .video_linkwrapper2{
        @media(min-width:$screen-xs)and(max-width:768px){
          height: 24em;
        }
      }
      width: 100% ;
      margin-bottom: 2em;
      @media(max-width:1024px){
        width: 100%!important;
      }
      @media(max-width:$screen-xs){
        width: 100.5vw !important;
        margin-left: -6vw;
      }
      .video_desc{
        .video_link{
          &:hover{
            &:before{
              background-color: #c21000!important;
            }
          }
          &:before{
            content: " ▶ 觀看節目"; /* Font Awesome 播放圖示 + 文字 */
            font-weight: 900; 
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 5px; 
            display: inline-flex;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                align-items: center;
                padding: 0px 15px;
                height: 44px;
                border-radius: 22px;
                behavior: url("/assets/ie_support/PIE2/PIE.htc");
                line-height: 42px;
                border: 1px solid transparent;
                background-color: $theme-color-second;
                color: rgb(255, 255, 255);
                font-size: 1.25rem;
                letter-spacing: 0.3px;
                font-weight: normal;
                white-space: nowrap;
                transition: 0.3s;
                bottom: 3em;
          }
        }
      }
      .videohover{
        display: none!important;
      }
      .video_tag{
        position: absolute;
        left: 6em;
        bottom: 8em;
        top: auto;
        display: block!important;
        background-color:transparent;
        border:0;
      }
      .video_desc{
        display: block;
        height: 4.1em;
        overflow: hidden;
        margin-bottom: 8em;
      }
      .video_group_time{
        color: #fff!important;
        position: absolute;
        bottom: 4.5em;
        margin-left: 10.5em;
      }
      .view_info{
        display: none;
      }
      @media(min-width:767px){
        &:before{
          content: '';
          position: absolute;
          bottom: 0;
          background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          -pie-background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
          behavior: url("/assets/ie_support/PIE2/PIE.htc");
          top: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
        }
      }
      .video_info{
        position: absolute;
        z-index: 2;
        bottom: 0;
        color: #fff;
        a{
          color: #fff;
        }
        @media(min-width:767px){
          padding: 2em 5em;
          width: 55%;
        }
        @media(max-width:820px)and(min-width:767px){
          .video_title h5{
            font-size: 1.6em;
          }
        }
        @media(max-width:767px){
          margin: 0;
          padding: 1em;
          background-color: #444;
          position: relative;
          padding-bottom: 4em;
          padding-top: 3em;
          .video_title h5{
            font-size: 1.2em;
            text-align: center;
          }
          .video_tag{
            left: 12%;
            bottom: 10.5em;
            flex-wrap: wrap;
            justify-content: center;
            display: flex!important;
            width: 75%;
            .video_keyword{
              margin-top: 0.5em;
            }
          }
          .video_link:before{
            bottom: 4em;
            left: 32vw;
          }
          .video_group_time{
            margin-left: 0;
            width: 100%;
            text-align: center;
            left: 0;
            bottom:2.5em;
          }
        }
      }
      .video_linkwrapper2{
          @media(min-width:1025px){
            height: 40.6em;
          }
          @media(min-width:769px)and(max-width:1024px){
            height: 32.6em!important;
          }
          @media(max-width: 821px)and(min-width: 769px){
            height: 25.6em!important;
          }
          @media(max-width:$screen-xs){
            height: 14.5em!important;
          }
      }
    }
  }
 }
 .video_data-widget-3{
  @media(max-width:768px){
      margin-bottom: 3em;
  }
  .btnwrapper{
    @media(max-width:768px)and(min-width:$screen-xs){
      top:100%!important;
      width: 14%!important;
      left: 44%!important;
    }
    @media(max-width:$screen-xs){
      top: 100%!important;
      width: 24% !important;
      left: 38% !important;
    }
  }
  .video_data_wrap{
    @media(min-width:$screen-xs){
      display: flex;
      flex-wrap: wrap;
    }
  }
  .video_data{
    @media(max-width:821px)and(min-width:$screen-xs){
      width: 48vw !important;
      float: none;
    }
    @media(max-width:$screen-xs){
      width: 92.5vw !important;
      margin-left: 0 !important;
      margin-right: 1em !important;
      float: none;
    }
  }
  .video_desc{
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    line-height: 1.5em; 
    min-height: 4.5em;
  }
  .video_info{
      margin:0.5em 0;
  }
  .video_link{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
 }
 .video_data-widget-5{
  margin-bottom: 1em!important;
  .video_data{
    .video_group_time{
      display: none;
    }
    .video_desc{
      display: none;
    }
  }
  span.video-date {
    display: block;
    font-size: 0.875rem;
    font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
    font-weight: normal;
    letter-spacing: 0.3px;
    color: #8f8f8f;
    line-height: 1.6;
    cursor: pointer;
 }
  margin-bottom: 1em;
  .cycle-pager{
    font-size: 1.25rem;
    font-family: "Noto Serif TC", serif;
    font-weight: bold;
    h5{
      font-size: 1.25rem;
      border-bottom: 1px solid #ccc;
      padding: 0.5em 0;
      margin-top: 0;
    }
  }
    .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;
    }
    .view_info img{
      margin-right: 5px;
    }
    .Video__Player{
      display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          .Video__PlayerButton{
            display: inline-block;
            padding-bottom: 0px;
            padding-top: 0px;
            border-radius: 50%;
            behavior: url("/assets/ie_support/PIE2/PIE.htc");
            border: 0px;
            background-color: $theme-color-second;
            background: url(/assets/btn-play.svg) no-repeat;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            transition: 0.5s;
            width: 60px;
            height: 60px;
            &:hover{
              width: 80px;
              height: 80px;
            }
          }
    }
    .view_info{
      max-height: 100%;
      border-radius: 2px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      font-size: 0.875rem;
      font-weight: normal;
      letter-spacing: 0.3px;
      text-align: center;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      position: absolute;
      padding: 0px 8px;
      background-color: #000000cc;
      color: rgb(255, 255, 255);
      z-index: 10;
      top: 10px;
      left: 10px;
      border: 1px solid transparent;
      line-height: 1.45;
      span{
        color:#fff;
      }
      &:before{
        content: "";
        display: inline-block;
        margin-right: 5px;
        width: 14px;
        height: 10px;
        background: url(/assets/icon-view@2x.png) no-repeat;
        position: relative;
        background-size: contain;
      }
    }
  .cycle-sentinel {
    display: none !important;
 }
  .pager-controls{
    position: absolute;
    right: 1em;
    bottom: 1em;
    .prev-btn,.next-btn{
      color: #909090;
      background: #fff;
      border-radius: 50%;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: none;
      height: 2.5em;
      width: 2.5em;
      transition: .3s;
      &:hover{
        filter: drop-shadow(rgb(214, 214, 214) 0px 0px 0.1rem);
      }
    }
    @media(max-width:768px){
      position: relative;
      float: right;
      right: 0;
      bottom: 0;
    }
  }
  .video_data_wrap{
    @media(min-width:$screen-xs){
      display: flex;
      flex-wrap: wrap;
    }
  }
  .video_data{
    @media(max-width:$screen-xs){
      width: 88.5vw !important;
      margin-left: 0 !important;
      margin-right: 1em !important;
      float: none;
    }
  }
  .video_desc{
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 4.5em;
    line-height: 1.5em; 
  }
  .video_info{
      margin:0.5em 0;
  }
  .video_link{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
 }
 .video_detail{
  @media(max-width:820px){
    .video_box_wrap{
      width: 100vw!important;
      left: -1em!important;
      margin: 0;
    }
  }
  h3{
    margin-top: 0.5em;
  }
 }
 .movie_desc{
  clear: both;
  letter-spacing: 0.3px;
  color: #8f8f8f;
  line-height: 1.8;
 }
 .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: #8f8f8f!important;
 }
 .movietitle{
  margin-bottom: 15px;
  width: 100%;
  border-bottom: 1px solid #ccc;
  clear: both;
  font-family: "Noto Serif TC", serif;
  font-weight: bold;
  h4{
    width: 100px;
    border-bottom: 2px solid #141414;
    padding-bottom: 0.5em;
    margin-bottom: 0;
  }
 }
 .imglst_desc{
  .cite{
    font-style: normal !important;
  }
  .video_tag{
    background-color: transparent;
    color: $theme-color-second;
    font-weight: normal;
    letter-spacing: 0.3px;
    text-align: center;
    display: inline-block;
    padding: 0px 7px;
    max-height: 100%;
    border-radius: 2px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    margin-bottom: 1em;
    &:first-child{
      border: 1px solid;
    }
  }
 }
 .video_title {
    clear: both;
    @extend .i-title;
 }
 .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: 13.5em;
  overflow:hidden;
  width: 100%;
  img{
    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;
 }
 .video_data-widget-10{
  padding-top: 2em;
  .video_info{
      margin:0.5em 0;
  }
  .video_data{
    @media(max-width:820px)and(min-width: $screen-xs){
      width: 50%!important;
  }
  }
 }
 .video_linkwrapper10{
  position: relative;
  overflow: hidden;
  height: 9.5em;
  @media(max-width: 1025px)and(min-width: 821px){
      height:7.5em;
  }
  @media(max-width: 821px)and(min-width: 769px){
      height:13em;
  }
  @media(max-width:768px)and(min-width: 600px){
    height: 13.5em;
  }
  @media(max-width: $screen-xs){
      height:13em;
  }
 }
 .video_linkwrapper{
  @media(max-width: 1025px)and(min-width: 821px){
      height:10.5em;
  }
  @media(max-width: 821px)and(min-width: 769px){
      height:8em;
  }
  @media(max-width:768px)and(min-width: 600px){
      height: 23.5em;
  }
  @media(max-width: $screen-xs){
      height: 13.5em;
  }
 }
 .video_linkwrapper2{
  position:relative;
  height: 13.5em;
  overflow:hidden;
  @media(max-width: 1025px)and(min-width: 769px){
      height:10em;
  }
  @media(max-width: 821px)and(min-width: 768px){
    height:7.5em;
  }
  @media(max-width:767px)and(min-width:$screen-xs){
      height: 22.5em;
  }
  @media(max-width:$screen-xs){
      height: 13.5em;
  }
 }
 .video_linkwrapper3{
  position:relative;
  height: 13.5em;
  overflow:hidden;
  @media(max-width: 1025px)and(min-width: 821px){
    height:10em;
  }
@media(max-width: 821px)and(min-width: 769px){
  height: 7.8em;
 }
@media(max-width:768px)and(min-width:$screen-xs){
    height: 13.5em;
 }
@media(max-width: $screen-xs){
    height:13.5em;
 }
 }
 .video_linkwrapper5{
  position:relative;
  height: 27em;
  overflow:hidden;
  @media(max-width: 1025px)and(min-width: 821px){
    height:21.5em;
  }
@media(max-width: 821px)and(min-width: 769px){
  height: 7.8em;
 }
@media(max-width:768px)and(min-width:$screen-xs){
  height: 25em;
 }
@media(max-width: $screen-xs){
    height:13.5em;
 }
 }
 .video_group_time{
  q{
    margin-left: 0.5em;
  }
  q::before {
    display: none!important;
  }
  q::after {
    display: none!important;
  }
 }
 .video_data-modal-view .play_icon{
  height: 55px;
 }
 .video_box_wrap{
  box-shadow: #15151580 0px 2px 10px 0px;
  margin-bottom: 1em;
 }
 .video_data-index-1{
  .view_info{
    position: relative;
  }
 }
 .video_data-post-agency-1{
  .view_info{
    position: relative;
  }
 }
 .video_data-index-2{
  .video_tag{
    display: block!important;
  }
 }
 .video_data-index-4{
  .i-annc__page-title{
    display: none;
  }
  .category_box{
    border:0;
    display: flex;
    justify-content: center;
  }
  button.category-btn{
    margin: 0.5em;
    display: inline-flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        padding: 0px 15px;
        height: 36px;
        border-radius: 18px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        line-height: 34px;
        border: 1px solid rgb(204, 204, 204);
        background-color: rgb(255, 255, 255);
        color: rgb(20, 20, 20);
        font-size: 1rem;
        font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
        letter-spacing: 0.3px;
        font-weight: normal;
        white-space: nowrap;
        transition: 0.3s;
        &:hover{
          background-color: $theme-color-second;
          color: #ffffff;
        }
        &:active{
          background-color: $theme-color-second;
          color: #ffffff;
        }
  }
  // .video_linkwrapper2{
  //   height: 9.5em;
  // }
    .video_desc{
      letter-spacing: 0.3px;
      color: #8f8f8f;
      line-height: 1.6;
      max-height: 5em;
    }
    .video_info{
        margin:0.5em 0;
    }
    .video_link{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
    }
    .video_tag{
      top:5px;
      left: 10px;
      max-height: 100%;
      border: 0;
      border-radius: 2px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      background-color: transparent;
      font-size: 0.875rem;
      font-family: "Noto Sans TC", PingFangTC, 微軟正黑體, "Microsoft JhengHei", sans-serif;
      font-weight: normal;
      letter-spacing: 0.3px;
      text-align: center;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      position: absolute;
      padding: 0px 8px;
      color: #fff;
      z-index: 5;
      .video_tags2 {
        float: left;
        min-width: 5em;
        border: 1px solid;
        border-radius: 2px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        background-color: #1515154d;
      }
    }
 }
 // .wordcloud-link{
 //   font-size: 1.2em;
 // }
--- a/assets/stylesheets/template/modules/web_resource.scss
+++ b/assets/stylesheets/template/modules/web_resource.scss
@ -0,0 +1,641 @@
@charset "utf-8";
@import "../initial";
 // Link MODULES
 .morebken{
  font-size: 1.2em;
  font-weight: normal;
  color: #333;
  padding: 0.5em 1em;
  width: fit-content;
  float: right;
  cursor: pointer;
  display: flex;
  align-items: center;
  &:hover{
    color: $theme-color-second;
  }
  i{
    font-size: 0.8em;
    padding-left: 5px;
  }
 }
 .rotate {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
 }
 .widget-link_wrapper{
  z-index: 1;
 }
 .widget-link__img{
  width: 100%;
 }
 .widget-content{
  list-style: none;
  @media(min-width: $screen-xs)and(max-width: 768px){
    width: 50%;
    margin: auto;
  }
 }
 .widget-link__item{
  list-style: none;
 }
 .widget-link__list{
  padding: 0;
 }
 .widget-content-title,.widget-content-context{
  // display: -webkit-box;
  // -webkit-line-clamp: 2;
  // -webkit-box-orient: vertical;
  // overflow: hidden;
  // text-overflow: ellipsis;
 }
 .widget-link {
  // 在 layout-content 下的樣式
  .cycle-carousel-wrap{
    @media(min-width: 769px){
      display: flex;
      align-items: normal;
    }
    .liWrapper{
      margin:0 0.5em;
      overflow: hidden;
    }
  }
  .widget-title {
    @extend .unity-title;
    // text-align: center;
    // display: flex;
    // justify-content: center;
    // flex-wrap: wrap;
    span{
      width: 100%;
    }
      // &:before{
      //   display: block;
      //   position: relative;
      //   text-align: center;
      //   content: '';
      //   height: 6px;
      //   width: 80px;
      //   background-color: #00356a;
      //   margin-bottom: 0.2em;
      // }
  }
  &.widget7 {
    .widget-title{
      // margin-bottom: 10px;
      // background: #268663;
      // font-size: 0.9375em;
      // font-weight: bold;
      // line-height: 30px;
      // border-radius: 6px !important;
      // margin-top: 0;
      // padding: 8.5px 15px 8.5px;
      // text-transform: uppercase;
      // color: #fff;
    }
    img{
      // width: 32%;
    }
    .widget-content {
      border-radius: 0.5em;
      background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280;
      border: 1px solid #d7d7d7;
      padding: 15px 15px;
      cursor: pointer;
      z-index: 2;
      font-weight: bold;
      color: #6D6D6D;
      width: 100%;
      position: relative;
      display: block;
      margin-bottom: 10px;
      a{
        color: #6D6D6D;
      }
      &:hover{
            background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 1% 1%, #fb8f72, transparent 30%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #2b7bbe 0%, #00437c 80%, #fb8f72 100%);
            border: 2px solid #ec6641;
    -webkit-transition: .6s all ease;
    -o-transition: .6s all ease;
    transition: .6s all ease;
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    transform: translateY(-6px);
        a{
          color: #fff;
        }
      }
      & + .widget-content {
        // border-top: 0.0625em dotted $theme-gray-light;
      }
      .widget-content-title {
        padding-top: 0.5em;
        @extend .i-subtitle;
      }
    }
    // 在 layout-footer 下的樣式
    .layout-footer & {
      .widget-content {
        line-height: 2em;
        border-top-color: $theme-green-light;
      }
    }
  }
  &.widget2{
      .list-unstyled{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        overflow: hidden;
        li:nth-child(n+5){
          display: none;
        }
      }
  }
  &.widget-3 {
    ul{
      @media(max-width: $screen-xs){
        flex-wrap: wrap;
      }
      li{
        background-color: transparent;
        @media(max-width: $screen-xs){
          width: 25%;
        }
      }
    }
  }
  &.widget-4{
    .widget-link__item{
    }
  }
  &.widget1{
    .widget-title{
      text-align: center;
    }
    .list-unstyled{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
      li:nth-child(n+16){
        display: none;
      }
    }
    .hex-border {
        width: 95%;
      height: 95%;
      background: #f8f8f8;
      color: #6D6D6D;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      clip-path: inherit;
      transition: background 0.4s ease;
      font-weight: bold;
    }
    .widget-content {
      width: 10em;
      height: 10em;
      clip-path: polygon(
        25% 5.77%, 
        75% 5.77%, 
        100% 50%, 
        75% 94.23%, 
        25% 94.23%, 
        0% 50%
      );
      background: #d7d7d7; /* 邊框顏色 */
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 1em;
      transition: transform 0.4s ease;
      &:hover{
        transform: rotate(45deg);
        background:$theme-color-second;
      }
    @media(max-width:$screen-xs){
      width: 8em;
      height: 8em;
    }
    &:hover{
      .hex-border{
      // background:linear-gradient(180deg, #ec6641 0, #e8f6ff 100%);
      background: radial-gradient(circle at 60% 90%, #ffe6df, transparent 60%), radial-gradient(circle at 20% 10%, #f5bfb0de, transparent 25%), #ec66418b;
      }
      background:$theme-color-third;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      -webkit-transform:rotate(15deg) translateY(-6px);
      -ms-transform: rotate(15deg) translateY(-6px);
      transform:rotate(15deg) translateY(-6px);
    }
      @media(max-width:1200px)and(min-width: 769px){
        padding: 1em !important;
      }
      .link-img-wrap{
        border-radius:10em;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        overflow: hidden;
        &:hover{
          border-radius:2em;
          behavior: url("/assets/ie_support/PIE2/PIE.htc");
          -webkit-transition: .3s all ease;
          -o-transition: .3s all ease;
          transition: .3s all ease;
        }
      }
      & + .widget-content {
      }
      .widget-content-title {
        padding:0 0.5em;
        border-radius: 0.5em;
        color: #333;
        font-weight: bold;
        text-align: center;
        width: fit-content;
        margin: auto;
        @media(max-width: 768px){
          width: auto;
          padding: 0.2em 0.5em;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-height: normal;
        }
      }
    }
  }
  &.widget9{
    .list-unstyled{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
      li:nth-child(n+16){
        display: none;
      }
    }
    .widget-content {
    overflow: hidden;
    line-height: 1.5em;
    width: 23%;
    height: 5em;
    padding: 2em;
    text-align: center;
    margin: 0.8em;
    color: #6D6D6D;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
    cursor: pointer;
    border-radius: 12px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    -webkit-box-shadow: 0 30px 40px 0 #7070700f;
    box-shadow: 0 30px 40px 0 #7070700f;
    position: relative;
    backdrop-filter: blur(5px);
    background: #ffffff59;
    &:after{
        z-index: 0;
        content: '';
        position: absolute;
        top: -100%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0) 30%,
          #fff 50%,
          rgba(255, 255, 255, 0) 70%
        );
        transform: translateX(-100%) rotate(0deg);
        transition: all 1.2s ease;
        pointer-events: none;
    }
    &:before{
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 12px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      padding: 2px;
      background: linear-gradient(45deg, white, #E7E8EA);
      -pie-background: linear-gradient(45deg, white, #E7E8EA);
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: -1;
    }
    @media(max-width:1024px){
          margin: 0.5em;
    }
    &:hover{
      // background: #eaf6fd;
      background: radial-gradient(circle at 60% 90%, #eaf6fd, transparent 60%), radial-gradient(circle at 10% 10%, #bddbf8, transparent 25%), #dbdee280;
      border: 2px solid $theme-color-third;
      -webkit-transition: .6s all ease;
      -o-transition: .6s all ease;
      transition: .6s all ease;
      -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
      transform: translateY(-6px);
      &:after{
        transform: translateX(100%) rotate(0deg);
      }
    }
      @media(max-width:1200px)and(min-width: 769px){
        padding: 1em !important;
      }
      @media(max-width:1024px){
        width:42% !important;
        padding: 0.5em !important;
      }
      .link-img-wrap{
        overflow: hidden;
        &:hover{
          border-radius:2em;
          behavior: url("/assets/ie_support/PIE2/PIE.htc");
          -webkit-transition: .3s all ease;
          -o-transition: .3s all ease;
          transition: .3s all ease;
        }
      }
      & + .widget-content {
      }
      .widget-content-title {
        padding:0 0.5em;
        border-radius: 0.5em;
        color: #333;
        font-weight: bold;
        text-align: center;
        width: fit-content;
        z-index: 1;
        @media(max-width: 768px){
          width: auto;
          padding: 0.2em 0.5em;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-height: normal;
        }
      }
    }
  }
  &.widget8{
      .widget-content{
        padding-top: 2em;
      }
      .link-img-wrap{
        border-radius: 2em;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        overflow: hidden;
        &:hover{
          img{
            transform: scale(1.2) translateY(-1%);
            -webkit-transition: .3s all ease;
            -o-transition: .3s all ease;
            transition: .3s all ease;
          }
        }
      }
     img{
           width: 100%;
     }
  }
  &.widget10 {
    img{
      // width: 32%;
    }
    .list-unstyled{
      padding-left: 3em;
    }
    .widget-content {
      list-style: disc;
      margin-bottom: 1em;
      a{
        color: #337ab7;
      }
      &:hover{
        a{
          text-decoration: underline;
        }
      }
      & + .widget-content {
        // border-top: 0.0625em dotted $theme-gray-light;
      }
      .widget-content-title {
        padding-top: 0.5em;
        @extend .i-subtitle;
      }
    }
    // 在 layout-footer 下的樣式
    .layout-footer & {
      .widget-content {
        line-height: 2em;
        border-top-color: $theme-green-light;
      }
    }
  }
    &.widget11 {
    img{
      // width: 32%;
    }
    .widget-content {
      text-align: center;
      border-radius: 4px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      padding-top: calc(.6em + 2px);
      padding-bottom: calc(.6em + 2px);
      display: block;
              background: radial-gradient(circle at 70% 80%, #00437c, transparent 60%), radial-gradient(circle at 25% 25%, rgba(160, 191, 255, 0.501961), transparent 40%), radial-gradient(circle at 50% 50%, rgba(60, 120, 255, 0.301961), transparent 70%), linear-gradient(135deg, #00437c 0%, #00437c 60%, #80b5ff 100%);
      margin-bottom: 1em;
      color: #fff;
      a{
        color: #fff;
      }
      &:hover{
        background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641;
      }
      & + .widget-content {
        // border-top: 0.0625em dotted $theme-gray-light;
      }
      .widget-content-title {
        @extend .i-subtitle;
      }
    }
    // 在 layout-footer 下的樣式
    .layout-footer & {
      .widget-content {
        line-height: 2em;
        border-top-color: $theme-green-light;
      }
    }
  }
  &.widget12 {
    img{
      // width: 32%;
    }
    .list-unstyled{
      padding: 1em;
      padding-left: 2em;
      border-radius: 15px;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      background-color: #f9f9f9ed;
    }
    .widget-content {
      position: relative;
      padding-bottom: 1em;
      padding-left: 0;
      @media (min-width: 480px) and (max-width: 768px){
        width: 100%!important;
      }
      a{
        &:before{
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          position: absolute;
          content: "";
          left:-20px;
          color: $theme-color-third;
        }
      }
      & + .widget-content {
        // border-top: 0.0625em dotted $theme-gray-light;
      }
      .widget-content-title {
        padding-top: 0.5em;
        @extend .i-subtitle;
      }
    }
    // 在 layout-footer 下的樣式
    .layout-footer & {
      .widget-content {
        line-height: 2em;
        border-top-color: $theme-green-light;
      }
    }
  }
    &.widget13{
    .widget-title{
      margin: 0;
    }
    .widget-content{
      @media(max-width:$screen-xs){
      width: 100%;
      }
    }
    .widget-content2{
        position: relative;
        padding-top: 1em;
        text-align: justify;
      .widget-img{
        position: absolute;
        width: 100%;
        left: 0;
        z-index: 0;
      }
      .widget-content-title{
        background: #ffffffcc;
        padding: 0 10px;
        margin: 20px auto;
        font-size: 1.2em;
        position: relative;
        z-index: 1;
      }
    }
      .list-unstyled{
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
      }
  }
 }
 // Link INDEX
 .index-link {
  clear: both;
  .index-title {
    @extend .unity-title;
  }
  &.index1 {
    .index-content {
      padding: 1em 0;
      list-style: none;
      & + .index-content {
        border-top: 0.0625em dotted $theme-gray-light;
      }
      .index-context {
        display: inline-block;
        // margin: 0 0 0.625em 2em;
        color: darken($theme-gray-light, 20%);
      }
    }
    .index-content-title {
      font-family: $main-font;
      font-size: 1em;
    }
  }
  &.index2 {
    .link-title{
      &:hover{
      color: $theme-color-second;
      }
    }
    .index-content{
      list-style: none;
    }
    .list-unstyled {
      display: flex;
      flex-wrap: wrap;
    }
    .index-content {
      padding: 1em;
    }
    .status-top {
      line-height: 2.5;
    }
  }
 }
 .index-link.index2 li.col-md-4{
  text-align: center;
 }
--- a/assets/stylesheets/template/owl.carousel.min.css
+++ b/assets/stylesheets/template/owl.carousel.min.css
@ -0,0 +1,6 @@
 /**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
 .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:0.0625em;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:5em;width:5em;left:50%;top:50%;margin-left:-2.5em;margin-top:-2.5em;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
--- a/assets/stylesheets/template/owl.theme.default.min.css
+++ b/assets/stylesheets/template/owl.theme.default.min.css
@ -0,0 +1,6 @@
 /**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
 .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:0.625em}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:0.875em;margin:0.3125em;padding:0.25em 0.4375em;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:0.1875em}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:0.625em}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:0.625em;height:0.625em;margin:0.3125em 0.4375em;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:1.875em}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
--- a/assets/stylesheets/template/print.css
+++ b/assets/stylesheets/template/print.css
@ -0,0 +1,26 @@
 // Customize this scss file as you need to fit the design
@charset "utf-8";
 body {
  background: #fff;
  color: #000;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.3;
  font-size: 0.750em;
 }
 blockquote,
 ul {
  margin: 0;
  padding: 0;
 }
 ul {
  list-style: none;
 }
 #orbit-bar,
 .no-print {
  display: none !important;
 }
 //@import "template";
--- a/assets/stylesheets/template/template.scss
+++ b/assets/stylesheets/template/template.scss
@ -0,0 +1,976 @@
 // Base
@import "base/orbitbar-override";
@import "base/sitemap-override";
@import "base/global";
@import "base/unity";
@import "base/utilities";
@import "base/pagination";
@import "base/accesskey";
@import "base/go_back_top";
@import "base/ckeditor-reset";
 // Layout
@import "layout/*";
 // Modules
@import "modules/*";
 // Widget
@import "widget/*";
 //RWD
@import "RWD";
 .visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
 }
 .sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
 }
 .dropdown-toggle:focus {
  // outline: 2px solid #43B5FC;
  outline: transparent;
 }
 .container{
  margin: auto;
 }
 // .layout-content{
 //   .response-container{
 //     @media (min-width: 769px)and(max-width: 820px) {
 //       width: 768px!important;
 //     }
 //   }
 // }
 .internalfullwidth{
 @media(min-width: $screen-lg){
  transform: translateX(calc(-50vw + 585px));
  width: 100vw;
 }
 @media(max-width:1199px)and(min-width:768px){
  width: 100vw;
  transform: translateX(-1.95em);
 }
 @media(max-width:767px){
  width: 100vw;
  transform: translateX(-0.95em);
 }
 }
 .view_count{
  position: absolute;
  right: 0;
 }
 // container setting
 .response-container {
  position: relative;
  margin:auto;
  @media (max-width: $screen-xs) {
    width: 100%;
  }
  @media (min-width: $screen-sm) {
    width: 100%;
  }
  @media (min-width: $screen-md) {
    width: 100%;
  }
  @media (min-width: $screen-lg) {
    max-width:1200px;
    padding: 0;
  }
 }
 .dropdowns{
  @media (min-width: $screen-md) {
    margin: auto;
  }
 }
 .header-buttom{
  @media (min-width: $screen-md) {
        padding: 12px 0;
  }
 }
 .background {
    width: 100%;
    left: 0;
    top: 5px;
    z-index: -1;
 }
 .extra { clear: both; }
 //公告頁籤
 ul.tab_nav,.nav_tabs_filter {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: $main-font;
    width: 100%;
    li {
      list-style: none;
      position: relative;
      padding: 0.5em 1em;
      margin: 0.2em;
      cursor: pointer;
      transition: all 0.5s;
      -moz-transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -o-transition: all 0.5s;
      font-size: 1em;
      color: #5e5e5e;
      background: none;
      border-radius: 0;
      border: none;
      font-size: 1em;
      @media(max-width:$screen-xs){
        width: 130px;
        text-align: center;
      }
      &:before,
      &:after{
        content:'';
        position:absolute;
        top:0;
        right:0;
        height:2px;
        width:0;
        background: $theme-color-second;
        transition: all 0.3s;
      }
      &:after{
        right:inherit;
        top:inherit;
        left:0;
        bottom:2px;
      }
      &:hover{
        color: $theme-color-second;
        background: transparent;
        box-shadow:none;
        &:after,&:before{
          width:100%;
          transition: all 0.3s;
        }
      }
      &.active {
        color: $theme-color-second;
        background: none;
        &:before,
        &:after{
          width:100%;
          transition: all 0.3s;
        }
      }
    }
 }
 .noscroll { overflow: hidden; position: fixed; }
 //覆蓋bootstrap 設定
 .row { margin: 0; }
 .container>.navbar-collapse {
  @media (max-width: 767px) {
    margin-left: 0;
    margin-right: 0;
  }
 }
 //共用樣式
 .title {
  @extend .unity-title;
 }
 .superBtn {
  a.btn-primary {
    color: $theme-white;
    border-color: #990000;
    background-color: #990000;
    font-size: 0.8125rem;
    padding: 0.3em 0.5em;
    &:hover {
      background-color: darken(#990000, 10%);
      border-color: darken(#990000, 10%);
    }
  }
 }
 .black-screen-social-window.reactable.right .content-social .social_wrap > div{
  background-color: #ffffffc2;
 }
 .black-screen-social-window.reactable .content-social .social_wrap span{
  padding: 0.5em;
 }
 .black-screen-social-window .content-social .social_wrap i{
  font-size: 1.5em;
 }
 .black-screen-social-window.reactable .content-social .social_wrap > div{
  line-height: unset;
 }
 .black-screen-social-window.reactable .content-social .social_wrap > div:hover, .black-screen-social-window.reactable .content-social .social_wrap > div.hover-class{
  border-radius: 30px 0 0 30px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background: #fff;
 }
 .hide_sharer_button{
      width: 1.65em;
 }
 .black-screen-social-window.reactable .content-social .social_wrap i, .black-screen-social-window.reactable .content-social .social_wrap img{
  margin-right: 0.5em;
  padding-bottom:0;
 }
 .black-screen-social-window{
  border-radius: 0!important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  background-color: #ffffffa6!important;
  min-width: fit-content;
  border:0!important;
  padding: 0;
  ul{
    margin-top: 60px;
    width: 40px;
    padding: 0;
  }
  li{
    list-style: none;
  }
 }
 .table-bordered{
  border: 0;
 }
 .internal-page{
  table{
    tr{
      @media(max-width:$screen-xs){
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }
    }
    td,th{
      @media(max-width: $screen-xs){
        width:100%;
      }
    }
  }
 }
 //td有rwd跳色
 #tdstyle1{
  tr{
    &:nth-child(even){
      background-color:#dfdedc;
    }
  }
  tr{
    @media(max-width: $screen-xs){
      display: flex;
      flex-wrap: wrap;
      width: 100%!important;
    }
  }
  td,th{
    @media(max-width: $screen-xs){
      width:100%!important;
    }
  }
  @media(max-width: $screen-xs){
    thead{
      display: none;
    }
  }
 }
 //td有rwd
 #tdstyle5{
    margin-top: 1.5em;
  tr{
    @media(max-width: $screen-xs){
      display: flex;
      flex-wrap: wrap;
      width: 100%!important;
    }
  }
  td,th{
    @media(max-width: $screen-xs){
      width:100%!important;
    }
  }
  ul{
    padding: 0;
  }
  li{
    font-weight: bold;
    background-color:#f2f2f2;
    margin-bottom: 0.5em;
    border-radius: 0.5em;
    list-style: none;
    padding: 0.5em;
    text-align: center;
    position: relative;
  }
  .firsttr1{
    border-radius: 0 !important;
    padding-bottom: 1.5em !important;
    padding-top: 1em!important;
    margin-bottom: 2em !important;
    position: relative;
    text-align: center;
    font-weight: bold;
    &:after{
      content: '1';
      background-color: #fff;
      position: absolute;
      padding: 0.1em 1.5em;
      border-radius: 1em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 2px solid #f5c346;
      color: #333;
      left: 36%;
      top: 70%;
    }
    &:before{
      content: '';
      position: absolute;
      height: 18.5em;
      left: 50%;
      top: -105px;
      width: 2px;
      background-color: #f5c346;
      z-index: 0;
    }
  }
  .firsttr2{
    border-radius: 0 !important;
    padding-bottom: 1.5em !important;
    padding-top: 1em!important;
    margin-bottom: 2em !important;
    position: relative;
    text-align: center;
    font-weight: bold;
    &:after{
      content: '1';
      background-color: #fff;
      position: absolute;
      padding: 0.1em 1.5em;
      border-radius: 1em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 2px solid #5a89f5;
      color: #333;
      left: 36%;
      top: 70%;
    }
    &:before{
      content: '';
      position: absolute;
      height: 16.5em;
      left: 50%;
      top:-60px;
      width: 2px;
      background-color: #5a89f5;
      z-index: 0;
    }
  }
  .firsttr3{
    border-radius: 0 !important;
    padding-bottom: 1.5em !important;
    padding-top: 1em!important;
    margin-bottom: 2em !important;
    position: relative;
    text-align: center;
    font-weight: bold;
    &:after{
      content: '1';
      background-color: #fff;
      position: absolute;
      padding: 0.1em 1.5em;
      border-radius: 1em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 2px solid #464063;
      color: #333;
      left: 36%;
      top: 70%;
    }
    &:before{
      content: '';
      position: absolute;
      height: 15.5em;
      left: 50%;
      top: -40px;
      width: 2px;
      background-color: #464063;
      z-index: 0;
    }
  }
  .firsttr4{
    border-radius: 0 !important;
    padding-bottom: 1.5em !important;
    padding-top: 1em!important;
    margin-bottom: 2em !important;
    position: relative;
    text-align: center;
    font-weight: bold;
    &:after{
      content: '1';
      background-color: #fff;
      position: absolute;
      padding: 0.1em 1.5em;
      border-radius: 1em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 2px solid #ed7b77;
      color: #333;
      left: 36%;
      top: 70%;
    }
    &:before{
      content: '';
      position: absolute;
      height: 16.5em;
      left: 50%;
      top:-62px;
      width: 2px;
      background-color: #ed7b77;
      z-index: 0;
    }
  }
  .firsttr5{
    border-radius: 0 !important;
    padding-bottom: 1.5em !important;
    padding-top: 1em!important;
    margin-bottom: 2em !important;
    position: relative;
    text-align: center;
    font-weight: bold;
    &:after{
      content: '1';
      background-color: #fff;
      position: absolute;
      padding: 0.1em 1.5em;
      border-radius: 1em;
      behavior: url("/assets/ie_support/PIE2/PIE.htc");
      border: 2px solid #afaac8;
      color: #333;
      left: 36%;
      top: 70%;
    }
    &:before{
      content: '';
      position: absolute;
      height: 18.5em;
      left: 50%;
      top: -105px;
      width: 2px;
      background-color:#afaac8;
      z-index: 0;
    }
  }
 }
 //td無rwd
 #tdstyle2{
  table td{
    border: 1px solid #ddd!important;
    @media (max-width: 480px) {
     width: auto;
    }
  }
  td,th{
    @media(max-width: $screen-xs){
      width: auto ;
    }
  }
  tr{
    display: table-row;
  }
 }
 //td有rwd灰底色
 #tdstyle3{
  tr{
    background: #efefef !important;
    margin-bottom: 10px;
    border: 1px solid #ccc;
  }
  td{
    border-bottom: #cacaca 1px solid !important;
  }
 }
 //td無rwd跳色
 #tdstyle4{
  table td{
    border: 1px solid #ddd!important;
    @media (max-width: 480px) {
      width: auto!important;
     text-align: center;
    }
  }
  td,th{
    @media(max-width: $screen-xs){
      width: auto!important;
      text-align: center;
    }
  }
  tr{
    &:nth-child(odd){
      background-color:#f2f2f2;
    }
  }
 }
 // //取消內頁tdrwd可加在內頁編輯
 // .internal-page table td{
 //   border: 1px solid #ddd!important;
 //   @media (max-width: 480px) {
 //    width: auto !important;
 //   }
 // }
 // tr{
 //   display: table-row!important;
 // }
 table.dataTable>tbody>tr.child{
  padding:0;
 }
 #orbit_calendar{
      width: 100% !important;
 }
 //預約系統
 .fc-direction-ltr .fc-daygrid-event .fc-event-time{
      white-space: nowrap;
 }
 .fc-daygrid-dot-event .fc-event-title{
      white-space: nowrap;
 }
 .fc .fc-daygrid-event{
      margin-top: 4px;
 }
 .modal-content{
  box-shadow: 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f, 0 11px 15px -7px #00000033;
  border-radius: 8px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  border: 0;
 }
 .fc .fc-daygrid-day.fc-day-today{
  background-color:transparent!important;
  .fc-daygrid-day-number{
    color: #fff;
    background-color: #858585;
    border-radius: 0.65em;
  }
 }
 .calendar-modal .event_summary{
  font-size: 1.2em;
  letter-spacing: 1px;
 }
 .calendar-modal > .modal-content h3{
  font-weight: bold;
 }
 .fc .fc-daygrid-event-harness{
  font-weight: bold;
 }
 .fc .fc-daygrid-day-number{
      margin-top: 0.3em;
 }
 .table-striped{
  a.btn-primary{
    margin: 0;
  }
 }
 .form-horizontal .form-group{
  margin-right: 0;
  margin-left: 0;
 }
 #calendar{
  td{
        border: 1px solid #dee2e6;
  }
  @media(max-width: $screen-xs){
    tr{
     display: table-row;
    }
 }
 }
 .w-calendar{
  @media(max-width: $screen-xs){
    tr{
     display: table-row!important;
    }
 }
 }
 //動畫往上
 .hide0{
  opacity: 0;
  -webkit-transform: translateY(15%) translateZ(0);
  -moz-transform: translateY(15%) translateZ(0);
  -o-transform: translateY(15%) translateZ(0);
  -ms-transform: translateY(15%) translateZ(0);
  transform: translateY(15%) translateZ(0);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
 }
 .animationvisible{
  opacity: 1;
  -webkit-transform: translateY(0) translateZ(0);
  -moz-transform: translateY(0) translateZ(0);
  -o-transform: translateY(0) translateZ(0);
  -ms-transform: translateY(0) translateZ(0);
  transform: translateY(0) translateZ(0);
 }
 //動畫往右
 .hide1{
  opacity: 0;
  transform: translate3d(-120px, 0, 0);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
 }
 .animationvisible1{
  opacity: 1;
  transform: translateZ(0);
 }
 // 動畫往左
 .hide2{
  opacity: 0;
  transform: translate3d(120px, 0, 0);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
 }
 .animationvisible2{
  opacity: 1;
  transform: translatez(0);
 }
 // 動畫往下
 .hide3{
  opacity: 0;
  transform: translate3d(0, -100px, 0);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
 }
 .animationvisible3{
  opacity: 1;
  transform: translatez(0);
 }
 //動畫選轉
 .rotate0{
  transform: perspective(2500px) rotateY(-100deg);
  overflow: hidden;
  position: relative;
 }
 .animationrotate0{
  transform: perspective(2500px) rotateY(0);
  transition-timing-function: ease;
  transition-duration: 1s;
 }
 // 放大
 .zoomin{
  opacity: 0;
  transform: scale(.6);
  -webkit-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -moz-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -o-transition: transform 0.8s ease-out, opacity 0.4s ease;
  -ms-transition: transform 0.8s ease-out, opacity 0.4s ease;
  transition: transform 0.8s ease-out, opacity 0.4s cubic-bezier(0.63, 0.01, 0, 1.02);
 }
 .animationvisible5{
  opacity: 1;
  transform: translatez(0) scale(1);
 }
 //研討會
 .seminar-index,.survey-index,.application_form-index{
  th{
    white-space: nowrap;
    @media(max-width: $screen-xs){
      width: 100%;
    }
  }
 }
 //內頁搜尋樣式
 input.search_box{
  background: #fff !important;
  border: 1px solid #bbb !important;
  color: #333 !important;
  padding: 0.5em !important;
  margin-right: 0.25em !important;
  border-radius: 0.5em !important;
  margin-left: 0.25em !important;
  @media(max-width:1024px){
    margin-top: 0.5em !important;
  }
 }
 ::placeholder {
  color: #333!important;
 }
 #category_select_box{
  border-radius: 0.5em!important;
  background: #fff!important;
  color: #333!important;
  margin-right: 0.5em!important;
  @media(max-width:1024px){
    margin-left: 0.25em !important;
    margin-top: 0.5em !important;
  }
 }
 #category_select_box>option{
  background: #fff!important;
  color: #333!important;
 }
 .search_widget{
  padding-top: 1em;
  padding-bottom: 1em;
 }
 .ui-datepicker-calendar{
  tr{
    flex-wrap:unset!important;
  }
  th{
    width: auto!important;
  }
 }
 .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all{
  background: #000000;
  border-color: #000000;
  color: #fff!important;
 }
 .ui-widget-header a{
  color: #fff!important;
 }
 .ui-widget-header .ui-icon{
  filter: brightness(500%);
 }
 a.ui-state-default{
  background: #fff!important;
  border:0!important;
  text-align: center!important;
  &:hover{
    background: silver!important;
  }
 }
 .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{
  border: 0!important;
  background: silver!important;
 }
 .aligncenter{
  display: flex;
  align-items: center;
  @media(max-width:$screen-xs){
    justify-content: flex-start!important;
  }
 }
 .flexwrap{
  display: flex;
  flex-wrap: wrap;
 }
 .flexreverse{
  @media(max-width: 768px){
    display: flex;
    flex-wrap: wrap-reverse!important;
  }
 }
 //search
 .searchclass{
  @media(max-width: 768px){
    position: absolute;
    right: 3em;
    color: #fff;
    margin-top: 1em;
  }
 }
 .search-box{
  width: fit-content;
  height: fit-content;
  position: relative;
 }
 .input-search{
  height: 50px;
  width: 50px;
  border-style: none;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 2px;
  outline: none;
  border-radius: 25px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  transition: all .5s ease-in-out;
  background:none;
  padding-right: 40px;
  color:#333;
  z-index: 100;
  position: relative;
  @media(max-width:768px){
    color:#333!important ;
    height: 30px;
  }
 }
 .input-search::placeholder{
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 100;
  @media(min-width:769px){
    color:#333!important;
  }
  @media(max-width:768px){
    color:#333!important ;
  }
 }
 /* 當 input 被 focus 或 btn 被點擊時，讓按鈕跳到上層並可點擊 */
 .search-box:focus-within .btn-search {
  z-index: 999;
  pointer-events: auto;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
 }
 .search-box.searching .input-search {
  width: 200px;
  @media(max-width:$screen-xs){
    width: 150px;
  }
 }
 .search-box.searching .btn-search {
  z-index: 999;
  pointer-events: auto;
  -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
 }
 .btn-search{
  width: 50px;
  height: 50px;
  border-style: none;
  font-size: 20px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  border-radius: 50%;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  position: absolute;
  right: 0px;
  color:#333;
  background-color:transparent;
  pointer-events: auto;
  @media(max-width:768px){
    color:gray ;
    width: 70px;
    height: 30px;
  }
 }
 .btn-search:focus ~ .input-search{
  width: 150px;
  border-radius: 0px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
 }
 .input-search:focus{
  width: 150px;
  border-radius: 0px;
  behavior: url("/assets/ie_support/PIE2/PIE.htc");
  background-color: transparent;
  border-bottom:1px solid rgba(255,255,255,.5);
  transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
 }
 hr{
  border-top: 0.0625em solid #333;
 }
 .video_tablist li.now_view a{
  background-color: #c9c9c9!important;
 }
 .video_tablist a{
      background-color: #a2a2a2!important;
 }
 .modal-backdrop{
  z-index: 2;
 }
 .video_tablist li.now_view a{
  background-color: #c9c9c9!important;
 }
 .video_tablist a{
  background-color: #a2a2a2!important;
 }
 .marqueeken {
    width: 100vw;
    overflow: hidden;
    position: absolute;
    .scroll .text1{
      font-size:1000%;
      color:#e7e7e7 !important;
      letter-spacing: 8px;
      white-space: nowrap;
      text-transform: uppercase;
      animation: scroll 80s linear infinite;
      -webkit-animation:scrollken 80s linear infinite;
      line-height: 1;
      &:nth-child(2) {
        animation: scroll2 80s linear infinite;
        animation-delay: -40s;
      }
    }
      .scroll .text2{
      font-size:1000%;
      color:#f5f5f5;
      letter-spacing: 8px;
      white-space: nowrap;
      text-transform: uppercase;
      animation: scroll 80s linear infinite;
      -webkit-animation:scrollken 80s linear infinite;
      line-height: 1;
      &:nth-child(2) {
        animation: scroll2 80s linear infinite;
        animation-delay: -40s;
      }
    }
  }
  @keyframes scrollken {
    from {
      transform: translateX(100%);
  }
    to {
      transform: translateX(-100%);
  }
  }
  @keyframes scroll2 {
    from {
      transform: translateX(0%);
  }
    to {
      transform: translateX(-200%);
  }
 }
--- a/assets/stylesheets/template/widget/breadcrumb.scss
+++ b/assets/stylesheets/template/widget/breadcrumb.scss
@ -0,0 +1,46 @@
@charset "utf-8";
@import "../initial";
 .breadcrumb>li+li:before {
    padding: 0 0.3125em;
    color: #ccc;
    content: "/\00a0";
 }
 .breadcrumb>li{
  list-style: none;
 }
 .breadcrumb-wrap{
  @media(min-width: 820px){
    // padding-right: 0.9375em!important;
    // padding-left: 0.9375em!important;
  }
 }
 .breadcrumb {
  @media(max-width: 768px){
    padding: 0;
  }
  margin-left: 0;
  margin-bottom: 0;
  background-color:transparent;
  a:link, a:visited { color: $theme-color-main; }
 }
 .breadcrumb>li+li:before {
  color: $theme-color-main;
 }
 .widget-breadcrumb {
  margin-top: 0.5em;
  &.widget1 {
    li {
      a {
        font-size: 1rem;
      }
      &:last-child {
        a {
          color: $theme-color-main;
          pointer-events: none;
        }
      }
    }
  }
 }
--- a/assets/stylesheets/template/widget/sitemenu.scss
+++ b/assets/stylesheets/template/widget/sitemenu.scss
@ -0,0 +1,288 @@
@charset "utf-8";
@import "../initial";
 .sitemenu{
  z-index: 1;
  position: relative;
 }
 .sitemenu-title{
  @extend .unity-title;
 }
 .sitemenu-wrap{
  // padding-right: 0.9375em!important;
  // padding-left: 0.9375em!important;
  margin-bottom: 1em;
  z-index: 2;
  position: relative;
 }
 .sitemenu-item{
      list-style: none;
 }
 .sitemenu-horizontal {
  // padding-left: 1em;
  // padding-bottom: 0.5em;
  @include clearfix;
  .sitemenu-item.level-1 {
    .sitemenu-link{
      color: #fff;
    }
    @media(max-width: $screen-xs){
      margin-right: 0.5em;
      margin-bottom: 0.5em;
    }
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    float: left;
    margin-right: 1%;
    margin-bottom: 0.5em;
    cursor: pointer;
    background: radial-gradient(circle at 60% 90%, #dea797, transparent 60%), radial-gradient(circle at 10px 10px, #eb8467, transparent 25%), #ec6641;
    border-radius: 2em;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    color: #fff;
    text-align: center;
    margin-right: 1em;
    border:0;
    position: relative;
    padding: 0.5em 1em;
    &:hover {
      background: radial-gradient(circle at 70% 80%, #66a9e2b3, transparent 60%), radial-gradient(circle at 1% 1%, #fb8f72, transparent 30%), radial-gradient(circle at 50% 50%, #3c78ff4d, transparent 70%), linear-gradient(135deg, #2b7bbe 0%, #00437c 80%, #fb8f72 100%);
      .sitemenu-list.level-2 {
        display: block;
      }
    }
  }
  .sitemenu-link.level-1 {
    margin-right: .25rem;
  }
  .sitemenu-dropdown-toggle {
    font-size: 0.75rem;
    padding: 0.125em .3125rem;
    cursor: pointer;
  }
  // sitemenu dropdown
  .sitemenu-list.dropdown-menu {
    min-width: 100%;
    margin-top: 0;
    border: none;
    border-radius: .2em;
    border: 1px solid #6868688f;
  }
  .sitemenu-link.level-2 {
    color:#333!important;
    font-size: 1rem;
    padding: 0.25em 0.625rem;
    display: inline-block;
    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
 }
 .sitemenu-vertical {
      border: 1px solid #6868688f;
      padding: 1em;
      background-color: #fff;
  .sitemenu-list {
    position: relative;
    float: none;
    background-color: transparent;
    box-shadow: none;
  }
  .sitemenu-item.level-1 {
    padding: 0.625em 1.25em;
    position: relative;
    &:hover {
      background: #adb5bd33;
    }
  }
  .sitemenu-link {
    font-size: 1rem;
  }
  .sitemenu-dropdown-toggle {
    font-size: 0.75rem;
    padding: 0.125em .3125rem;
    cursor: pointer;
  }
  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
  }
  .sitemenu-link.level-2 {
    font-size:1rem;
    padding: 0.25em 0.625rem;
    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
 }
 .sitemenu-title{
  font-weight: bold;
  margin-top: 0;
 }
 .sitemenu-vertical2{
   .sitemenu-item.level-1 {
    &:hover {
      .sitemenu-list.dropdown-menu { display: block; }
    }
    ul{
      padding: 0;
    }
  }
  .sitemenu-link {
    font-size: 1.2em;
    color: #333333;
    vertical-align: top;
    background-image: url(/assets/plan_icon01.png);
    background-position: 15px;
    background-repeat: no-repeat;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    border-bottom: 1px solid #cacaca;
    color: #333333;
    border-radius: 4px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 2px solid #DDD;
    padding: 1em;
    margin: 0 0 10px 0;
    width: 100%;
    display: flex;
    &:hover{
          border: 2px solid #333333;
          color: $theme-color-second;
          background: #adb5bd33;
    }
  }
  .sitemenu-dropdown-toggle {
    display: none!important;
  }
  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
    position: relative;
    float: none!important;
    box-shadow: none;
    background: none;
        margin: 0;
  }
  .sitemenu-link.level-2 {
    border: none;
    border-radius: 0;
    background-image: none;
    padding: 10px 5px 4px 15px;
    margin-left: 1em;
    background-image: url(/assets/icon_point.png) !important;
    background-position: 0;
    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
 }
 .sitemenu4{
   .sitemenu-item.level-1 {
    &:hover {
      .sitemenu-list.dropdown-menu { display: block;     top: 0;}
    }
    ul{
      padding: 0;
    }
  }
  .list-unstyled{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .sitemenu-item{
      width:calc(50% - 5px);
      margin: 5px;
      &:nth-child(odd){
        margin-left: 0;
      }
      &:nth-child(even){
        margin-right: 0;
      }
      @media(max-width:768px){
        &:nth-child(odd){
          margin-left: 0;
        }
        &:nth-child(even){
          margin-right: 0;
        }
      }
    }
  }
  .sitemenu-link {
    font-size:1.2em;
    color: #333333;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    color: #333333;
    border-radius: 4px;
    behavior: url("/assets/ie_support/PIE2/PIE.htc");
    border: 2px solid #DDD;
    padding: 1em;
    margin: 0 0 10px 0;
    width: 100%;
    display: flex;
    &:hover{
          border: 2px solid #333333;
          color: $theme-color-second;
          background: #adb5bd33;
    }
  }
  .sitemenu-dropdown-toggle {
    display: none!important;
  }
  .sitemenu-list.dropdown-menu {
    border: none;
    border-radius: .2em;
    position: relative;
    float: none!important;
    box-shadow: none;
    background: none;
    margin: 0;
  }
  .sitemenu-link.level-2 {
    border: none;
    border-radius: 0;
    background-image: none;
    padding: 10px 5px 4px 15px;
    margin-left: 1em;
    background-image: url(/assets/icon_point.png) !important;
    background-position: 0;
    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
 }
--- a/home/footer.html.erb
+++ b/home/footer.html.erb
@ -0,0 +1,8 @@
 <footer class="layout-footer no-print">
  <div class="layout-footer-inner">
      <div class="layout-footer-content">{{footer-data}}</div>
      <div class="footer-counter"><a href="https://ruling.digital/"><img src="/assets/ruling_logo.png" alt="ruling-logo-icon"></a>{{site-counter}}</div>
      <div class="footer-updated-date">{{last-updated}}</div>
  </div>
 </footer>
--- a/home/header.html.erb
+++ b/home/header.html.erb
@ -0,0 +1,45 @@
 <div id="fb-root"></div>
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "";
  fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 <div class="mobile-menu">
  <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#layout-navigation" title="選單">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar icon-bar-top"></span>
        <span class="icon-bar icon-bar-middle"></span>
        <span class="icon-bar icon-bar-bottom"></span>
  </button>
  <div class="cover"></div>
 </div>
 <header class="navbar layout-header no-print" role="navigation">
  <div class="outdropdowns kenjohn">
  <div class="container dropdowns">
    <div class="header-nav no-print">
      <a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
        {{header-data}}
    </div>
    <div class="navbar-header">
        <a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
        <script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
        <a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
        <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-target="#layout-navigation" title="選單">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar icon-bar-top"></span>
          <span class="icon-bar icon-bar-middle"></span>
          <span class="icon-bar icon-bar-bottom"></span>
        </button>
      </div>
    <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
    <a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
      <%= render_menu %>
    </div>
    <!-- <div class="header-buttom layout-content-box " data-pp="200"></div> -->
   </div>
  </div>
 </header>
--- a/home/index.html.erb
+++ b/home/index.html.erb
@ -0,0 +1,125 @@
 <!doctype html>
 <html lang="<%= I18n.locale.to_s %>" class="orbit">
 <head>
  <%= render_partial("head") %>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 </head>
 <body class="page-home">
  <%= render_orbit_bar %>
  <div class="background" data-pp="100"></div>
  <%= render_header %>
  <div class="no-print single-child-datapp homebanner text_marqueewrapper" data-pp="999"></div>
  <div class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></div>
  <div class="layout-content2 topcontent">
    <div class=" single-child-datapp onesection" id="onesection" data-pp="1999"></div>
  </div>
  <div class="video-banner" data-pp="301" ></div>
  <div class="verticalhome">
    <div class="layout-content topcontent">
      <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
      <div class="contentwrap circlebox">
        <div class="background-ball2 "></div>
        <div class="background-dotball "></div>
        <div class="background-dotballleft "></div>
        <div class="page-index__background-ball">
          <div class="page-index__background-ball-img"></div>
        </div>
        <div class="container">
          <section class="body-banner" data-pp="0"></section>
          <div class="row ">
            <section class="layout-content-box col-sm-4" data-pp="1"></section>
            <section class="layout-content-box col-sm-4" data-pp="2"></section>
            <section class="layout-content-box col-sm-4" data-pp="3"></section>
          </div>
          <div class="row ">
            <section class="layout-content-box col-sm-6 hide0" data-pp="8"></section>
            <section class="layout-content-box col-sm-6 hide0" data-pp="9"></section>
          </div>
          <div class="row padding0">
            <section class="layout-content-box col-sm-3" data-pp="4"></section>
            <section class="layout-content-box col-sm-3" data-pp="5"></section>
            <section class="layout-content-box col-sm-3" data-pp="6"></section>
            <section class="layout-content-box col-sm-3" data-pp="7"></section>
          </div>
        </div>
      </div>
      <div class="layout-slide big-banner extra-box" data-pp="302" ></div>
      <div class="contentwrap1">
        <div class="layout-content-inner container">
          <div class="column row">
            <div class="two-column col-sm-6 ken" data-pp="11"></div>
            <div class="two-column col-sm-6 ken" data-pp="12"></div>
            <div class="three-column col-sm-4" data-pp="13"></div>
            <div class="three-column col-sm-4" data-pp="14"></div>
            <div class="three-column col-sm-4" data-pp="15"></div>
          </div>
          <div class="column row">
            <section class="two-column col-sm-3" data-pp="16"></section>
            <section class="two-column col-sm-9" data-pp="17"></section>
        </div>
        </div>
      </div>
      <div class="contentwrap2">
       <div class="marqueeken">
                    <div class="scroll">
                        <div class="text1">
                            NATIONAL FORMOSA UNIVERSITY
                        </div>
                    </div>
       </div>
          <div class="container">
            <section class="body-banner" data-pp="68"></section>
            <div class="row">
              <section class="layout-content-box col-sm-3" data-pp="64"></section>
              <section class="layout-content-box col-sm-3" data-pp="65"></section>
              <section class="layout-content-box col-sm-3" data-pp="66"></section>
              <section class="layout-content-box col-sm-3" data-pp="67"></section>
            </div>
            <div class="row kenopacity">
              <section class="box layout-content-box col-sm-6" data-pp="28"></section>
              <section class="box layout-content-box col-sm-3" data-pp="29"></section>
              <section class="box layout-content-box col-sm-3" data-pp="99"></section>
            </div>
            <div class="row kenopacity">
              <section class="box layout-content-box col-sm-3" data-pp="60"></section>
              <section class="box layout-content-box col-sm-3" data-pp="30"></section>
              <section class="box layout-content-box col-sm-6" data-pp="31"></section>
            </div>
          </div>
          <div class="layout-content-inner container">
            <div class="column row">
              <section class="two-column col-sm-9" data-pp="39"></section>
              <section class="two-column col-sm-3" data-pp="41"></section>
            </div>
            <div class="column row">
              <div class="three-column col-sm-4" data-pp="20"></div>
              <div class="three-column col-sm-4" data-pp="21"></div>
              <div class="three-column col-sm-4" data-pp="22"></div>
              <div class="extra-box col-sm-12" data-pp="40"></div>
              <div class="two-column col-sm-6" data-pp="18"></div>
              <div class="two-column col-sm-6" data-pp="19"></div>
            </div>
            <div class="column row">
              <section class="extra-box col-sm-12 swiper-banner" data-pp="201"></section>
            </div>
          </div>
      </div>
      <div class="contentwrap">
            <div class="container row">
              <section class="layout-content-box col-sm-8" data-pp="35"></section>
              <section class="layout-content-box col-sm-4" data-pp="34"></section>
              <section class="layout-content-box col-sm-12" data-pp="233"></section>
            </div>
      </div>
    </div>
  </div>
  <%= render_footer %>
 </body>
 </html>
--- a/home/menu.html.erb
+++ b/home/menu.html.erb
@ -0,0 +1,15 @@
 <ul id="main-nav" class="navbar-right navbar-nav modules-menu-level-0 nav-level-0 no-print" data-menu-level="0">
  <li>
    <a href="" title="{{link_name}}" data-menu-link="true" class="dropdown-toggle">{{link_name}}</a>
    <ul class="modules-menu-level-1 nav-level-1" data-menu-level="1">
      <li>
        <a href="" title="{{link_name}}" data-menu-link="true">{{link_name}}</a>
        <ul class="modules-menu-level-2 nav-level-2" data-menu-level="2">
          <li>
            <a href="" title="{{link_name}}" data-menu-link="true">{{link_name}}</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
 </ul>
--- a/home/page.html.erb
+++ b/home/page.html.erb
@ -0,0 +1,78 @@
 <!doctype html>
 <html lang="<%= I18n.locale.to_s %>" class="orbit">
 <head>
  <%= render_partial("head") %>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 </head>
 <body class="internal-page">
  <%= render_orbit_bar %>
  <div class="background" data-pp="100"></div>
  <%= render_header %>
  <div class="no-print single-child-datapp homebanner text_marqueewrapper" data-pp="998"></div>
  <section class="layout-slide no-print single-child-datapp homebanner" data-pp="300"></section>
  <div class="verticalhome">
          <div class="background-ball2 "></div>
        <div class="background-dotball "></div>
        <div class="background-dotballleft "></div>
        <div class="page-index__background-ball">
          <div class="page-index__background-ball-img"></div>
        </div>
    <div class="layout-content">
      <div class="layout-content-inner inner-page contentwrap3">
        <div class="sitemenu">
          <div class="sitemenu-wrap1 container" data-pp="400"></div>
        </div>
        <div class="breadcrumb-wrap container" data-pp="500"></div>
        <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 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 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>
        <div class="row container">
          <section class="page-content-box " data-pp="907"></section>
          <section class="page-content-box col-sm-6" data-pp="908"></section>
          <section class="page-content-box col-sm-6" data-pp="909"></section>
          <section class="page-content-box col-sm-7" data-pp="910"></section>
          <section class="page-content-box col-sm-5" data-pp="911"></section>
          <section class="page-content-box col-sm-5" data-pp="912"></section>
          <section class="page-content-box col-sm-7" data-pp="913"></section>
        </div>
      </div>
      <div class="extra-box zero col-sm-12" data-pp="890"></div>
      <div class="row zero">
        <section class="layout-content-box zero col-sm-4" data-pp="866"></section>
        <section class="layout-content-box zero col-sm-4" data-pp="877"></section>
        <section class="layout-content-box zero col-sm-4" data-pp="855"></section>
      </div>
      <div class="layout-content-inner container inner-page">
         <div class="extra" data-pp="800"></div>
      </div>
    </div>
    <div class="row zero">
      <section class="layout-content-box zero col-sm-6" data-pp="886"></section>
      <section class="layout-content-box zero col-sm-6" data-pp="887"></section>
    </div>
  </div>
  <%= render_footer %>
 </body>
 </html>
--- a/home/pagination.html.erb
+++ b/home/pagination.html.erb
@ -0,0 +1,7 @@
 <ul class="pagination pagination-sm" data-pagination="true">
    <li class="{{pagination_active}}">
        <a href="{{pagination_link}}" title="第{{page_number}}頁">
            {{page_number}}
        </a>
    </li>
 </ul>
--- a/modules/.gitkeep
+++ b/modules/.gitkeep
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M285.5 273L91.1 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.7-22.7c-9.4-9.4-9.4-24.5 0-33.9L188.5 256 34.5 101.3c-9.3-9.4-9.3-24.5 0-33.9l22.7-22.7c9.4-9.4 24.6-9.4 33.9 0L285.5 239c9.4 9.4 9.4 24.6 0 33.9z"/></svg>`
		`@ -0,0 +1 @@`
							!function($){"use strict";var t={fadeEffect:!0,effectTime:.5},i=$(window),e=function(t,i){var e=document.createElement("img"),s;t.data("bullseyeImage")?(t.html('<img src="'+t.data("bullseyeImage")+'">'),s=t.data("bullseyeImage")):(s=t.find("img").first().attr("src"),t.data("bullseyeImage",s)),i.fadeEffect&&t.find("img").first().css({opacity:0}),e.src=s,e.onload=function(){n(t,i)}},n=function(t,i){var e=t.find("img").first(),n={position:"relative",overflow:"hidden"},o={position:"absolute",top:0,right:0,bottom:0,left:0,margin:"auto",width:"100%",height:"auto"},a={start:{opacity:1,"-webkit-transition":"opacity "+i.effectTime+"s ease-in-out","-moz-transition":"opacity "+i.effectTime+"s ease-in-out","-o-transition":"opacity "+i.effectTime+"s ease-in-out",transition:"opacity "+i.effectTime+"s ease-in-out"},end:{opacity:"","-webkit-transition":"","-moz-transition":"","-o-transition":"",transition:""}};t.css(n),e.css(o),s(t),i.fadeEffect&&e.css(a.start).on("transitionend",function(){$(this).css(a.end)})},s=function(t){var i=t.find("img").first(),e=t.innerHeight(),n,s;n=i.height(),e>n?(s=e/n,i.css({"-webkit-transform":"scale("+s+")","-moz-transform":"scale("+s+")","-o-transform":"scale("+s+")",transform:"scale("+s+")"})):i.css({"-webkit-transform":"","-moz-transform":"","-o-transform":"",transform:""})},o=function(t,n){e(t,n),i.on("resize",function(){s(t)})};$.fn.bullseye=function(i){var e=$.extend({},t,i);return this.each(function(){var t=$(this);o(t,e)})}}(window.jQuery);