@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
@import url('/css/SeoJump.css');
@import url('/css/contentBuilder.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Noto+Serif+TC:wght@200..900&display=swap');


* { margin: 0; padding: 0; }
*:focus { outline: none; }
body { margin: 0; }
body::selection { background: #339fc9; text-shadow: none; color: #fff; }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: rgba(255,255,255,.75); }
body::-webkit-scrollbar-thumb { background: rgba(0,0,0,.4); border-radius: 50px; }
header,footer,div,nav,article,h2,h3,h4,h5,h6,hr,p,form,label,input,textarea,ul,li,img,span,font,strong,b,a,i {text-align: left;vertical-align: middle;margin: 0;padding: 0;line-height: 170%;border-width: 0;font-family: 'Lora','Noto Serif TC',sans-serif;font-size: 16px;word-wrap: break-word;word-break: break-word;text-align: left;text-justify: inter-ideograph;-webkit-transition: all .3s ease-out;-moz-transition: all .3s ease-out;-ms-transition: all .3s ease-out;-o-transition: all .3s ease-out;transition: all .3s ease-out;}
:before,:after { -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
ul,ol { list-style: none; }
fieldset { border: 0; }
input,button,select,textarea { border-radius: 0; box-shadow: none; outline: none; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { background: url(/images/38/icon-triangle.png) no-repeat calc(100% - 10px) 50%; }
/* ==========================================================================
   Base & Common Styles (Redream 有機生命綠系)
========================================================================== */html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Poppins','Noto Sans TC',sans-serif; -webkit-font-smoothing: antialiased; background-color: #fff; color: #626e64; overflow-x: hidden; }
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
a.masklink{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;}
.workframe { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 5; }
.workframe.w-full { width: 100%; max-width: 100%; padding: 0; }
.section_pad { padding: 140px 0; }
.has-wave { padding-bottom: 220px; }
.js-scroll-in { opacity: 0; transform: translateY(50px); transition: opacity 1s ease,transform 1s cubic-bezier(0.2,0.8,0.2,1); }
.js-scroll-in.is-in { opacity: 1; transform: translateY(0); }
.common-sec-title { display: flex; flex-direction: column; align-items: center; margin-bottom: 70px; text-align: center; }
.common-sec-title.mb-20 { margin-bottom: 20px; }
.common-sec-title .en-title { color: #44b659; font-size: 14px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 16px; font-family: 'Poppins',sans-serif; display: flex; align-items: center; justify-content: center; }
.common-sec-title .en-title.mb-8 { margin-bottom: 8px; }
.common-sec-title .title-logo-mark { display: inline-block; width: 24px; height: 16px; background: #44b659; border-radius: 40% 60% 70% 30%/40% 50% 60% 50%; margin-right: 12px; transform: translateY(-2px) rotate(-10deg); }
.common-sec-title .tw-title { color: #2c332d; font-size: 34px; font-weight: 900; letter-spacing: 0.08em; margin: 0; line-height: 1.4; }
.common-sec-title .tw-title.text-32 { font-size: 32px; }
.common-sec-title .title-line { width: 40px; height: 3px; background: #87c995; margin-top: 24px; border-radius: 2px; }
.common-sec-title .title-line.mt-16 { margin-top: 16px; }
.common-sec-title .leaf-icon { position: relative; width: 40px; height: 50px; color: #6a9c40; z-index: 3; filter: drop-shadow(0 6px 10px rgba(106,156,64,0.25)); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); cursor: pointer; }
.common-sec-title .leaf-icon svg { width: 100%; height: 100%; transform-origin: center bottom; animation: swingLeftBottom 1.6s ease-in-out infinite alternate; }

/* Keyframes */
@keyframes badgeRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes swingLeftBottom {
  0% { transform: rotate(-15deg); }
  100% { transform: rotate(15deg); }
}
/* ==========================================================================
   背景共用裝飾元件 (Background Decorations)
========================================================================== */.deco-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 40% 60% 70% 30%/40% 50% 60% 50%; animation: morphBlob 15s ease-in-out infinite alternate; opacity: 0.6; }
.deco-dot-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: radial-gradient(#cde0d1 2px,transparent 2px); background-size: 36px 36px; opacity: 0.3; pointer-events: none; }
.deco-flight-path { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='1440' height='600' viewBox='0 0 1440 600' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-100 500 C 300 400,600 100,1500 200' stroke='%2387c995' stroke-width='3' stroke-dasharray='10 15' opacity='0.3' fill='none'/%3E%3Cpath d='M-100 100 C 400 300,800 600,1500 100' stroke='%2344b659' stroke-width='2' stroke-dasharray='6 12' opacity='0.15' fill='none'/%3E%3C/svg%3E");background-size: cover; background-position: center; pointer-events: none; z-index: 0; }
.deco-spore { position: absolute; background: #44b659; border-radius: 50%; pointer-events: none; z-index: 0; animation: floatSpore linear infinite; opacity: 0.15; }
.deco-quote-mark { position: absolute; top: -50px; left: 5%; font-size: 500px; color: #fff; font-family: Georgia,serif; opacity: 0.4; line-height: 1; pointer-events: none; z-index: 0; user-select: none; text-shadow: 0 10px 30px rgba(0,0,0,0.02); }
/* 底部共用背景 (Feedback & Contact) - 實心同心圓與繞圓小點 */
.bottom-engagement-wrapper { position: relative; overflow: hidden; background: linear-gradient(180deg,#ffffff 0%,#f9fcf9 30%,#eef8f1 100%); padding-top: 40px; }
.deco-rings { position: absolute; top: 50%; left: 50%; width: 1600px; height: 1600px; pointer-events: none; z-index: 0; margin-top: -800px; margin-left: -800px; }
.deco-rings .ring { position: absolute; border: 1px solid rgba(68,182,89,0.15); border-radius: 50%; transform-origin: center; }
.deco-rings .ring::before { content: ''; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%); width: 12px; height: 12px; background: #44b659; border-radius: 50%; box-shadow: 0 0 10px rgba(68,182,89,0.4); }
.deco-rings .ring-1 { inset: 0; animation: ringSpinSlow 60s infinite linear; }
.deco-rings .ring-2 { inset: 200px; border-color: rgba(68,182,89,0.1); animation: ringSpinReverseSlow 80s infinite linear; }
.deco-rings .ring-2::before { width: 8px; height: 8px; background: #87c995; }
.deco-rings .ring-3 { inset: 450px; border-color: rgba(68,182,89,0.06); animation: ringSpinSlow 100s infinite linear; }
.deco-rings .ring-3::before { width: 10px; height: 10px; }
@keyframes morphBlob {
  0% { border-radius: 40% 60% 70% 30%/40% 50% 60% 50%; transform: scale(1) rotate(0deg); }
  50% { border-radius: 60% 40% 30% 70%/50% 60% 40% 50%; transform: scale(1.05) rotate(5deg) translateY(-20px); }
  100% { border-radius: 40% 60% 70% 30%/40% 50% 60% 50%; transform: scale(1) rotate(-5deg) translateY(0); }
}
@keyframes floatSpore {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.25; }
  80% { opacity: 0.25; }
  100% { transform: translateY(-150px) scale(1.2); opacity: 0; }
}
@keyframes ringSpinSlow {
  100% { transform: rotate(360deg); }
}
@keyframes ringSpinReverseSlow {
  100% { transform: rotate(-360deg); }
}
/* ==========================================================================
   統一按鈕樣式 (Unified Buttons - 極致滑順)
========================================================================== */
.btn-primary {display: inline-flex;align-items: center;justify-content: center;gap: 12px;padding: 12px 45px;background: #559ba5;color: #fff !important;font-size: 15px;font-weight: 900;border-radius: 999px;transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),box-shadow 0.6s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;box-shadow: 0 10px 25px rgb(117 136 50 / 24%);text-decoration: none;position: relative;overflow: hidden;z-index: 10;}
.btn-primary.mt-40 { margin-top: 40px; }
.btn-primary.mt-20 { margin-top: 20px; }
.btn-primary.mt-10 { margin-top: 10px; }
.btn-primary::before { content: ""; position: absolute; left: -85%; top: 0; width: 55%; height: 100%; background: linear-gradient(110deg,transparent,rgba(255,255,255,.58),transparent); transform: skewX(-18deg); transition: left .65s ease; }
.btn-primary:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(60,152,169,.32); }
.btn-primary:hover::before { left: 128%; }

.btn-primary .btn-dot {width: 36px;height: 36px;border-radius: 6666px;background: #559ba5;display: flex;align-items: center;justify-content: center;color: #ffffff;transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),border-radius 0.6s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;}
.btn-primary .btn-dot svg{width: 20px;height: 20px;fill: white;}
.btn-primary .btn-dot i { font-size: 14px; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.btn-primary:hover {transform: translateY(-6px);box-shadow: 0 18px 35px rgba(120, 137, 60, 0.35);background-color: rgb(120 137 60);border-color: #758832;}
.btn-primary:hover .btn-dot {transform: translateX(6px) scale(1.05);border-radius: 50%;background: #6b7c2d;}
.btn-primary:hover .btn-dot i { transform: translateX(2px); }
.btn-text-link { display: inline-flex; align-items: center; gap: 8px; color: #96a699; font-weight: 700; font-size: 14px; transition: color 0.4s ease; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; position: relative; z-index: 10; }
.btn-text-link i { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.btn-text-link:hover { color: #44b659; }
.btn-text-link:hover i { transform: translateX(6px); }
/* 文字分割動畫 (js-split) */
.js-split span { display: inline-block; opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.2,0.8,0.2,1),transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.is-in .js-split span,.is-in.js-split span { opacity: 1; transform: translateY(0); }
/* SVG 區塊轉場裝飾 (Shape Dividers) */
.shape-divider { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 6; pointer-events: none; }
.shape-divider svg { display: block; width: calc(100% + 1.3px); height: 200px; }
.shape-divider.z-20 { z-index: 20; }
.shape-bottom { bottom: -1px; }
/* Swiper 共用覆寫 */
.swiper-button-next,.swiper-button-prev { color: #44b659 !important; background: rgba(255,255,255,0.8); width: 50px !important; height: 50px !important; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); backdrop-filter: blur(4px); transition: all 0.3s; }
.swiper-button-next:after,.swiper-button-prev:after { font-size: 20px !important; font-weight: 900; }
.swiper-button-next:hover,.swiper-button-prev:hover { background: #44b659; color: #fff !important; transform: scale(1.1); }
.swiper-pagination-bullet { background: #cde0d1 !important; opacity: 1 !important; transition: all 0.3s; }
.swiper-pagination-bullet-active { background: #44b659 !important; transform: scale(1.3); }
/* img */
img { max-width: 100%; }
.img_box_cover img { width: 100%; object-fit: cover; }
.img_box_contain img { width: 100%; object-fit: contain; }
.scale_box .img_box_cover { overflow: hidden; }
.scale_box .img_box_cover img { -webkit-transform: scale(1); transform: scale(1); }
a,a:link,a:visited,a:hover { display: inline-block; line-height: 100%; text-decoration: none; white-space: pre-wrap; }
.text-clamp,a.text-clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.nowrap_box { font-size: 0; }
/* a.photo */
a.photo,.bgBox { overflow: hidden; background: no-repeat 50%/cover; display: block; }
/* fancybox */
[class^="fancybox-"],[class^="fancybox-"] *,.slick-track,.fa,.fas,.fa:before,.fas:before,.fa:after,.fas:after,.trans_none_box { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* slick-slider */
.wrapper .slick-slider { margin-bottom: 0; }
/* webBox */
.webBox { position: relative; overflow: hidden; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper { position: relative; background: #fff; z-index: 2; }
/* workframe */
.workframe { position: relative; margin: 0 auto; width: 1440px; font-size: 0; z-index: 1; }
/* relat_box */
.relat_box,.relat_box >* { position: relative; }
.fixed_box { position: fixed; }
.abso_box { position: absolute; width: 100%; height: 100%; z-index: 4; }
.relat_box .abso_tag { position: absolute; width: 100%; height: 100%; z-index: 5; }
/* Sitemap */
#Sitemap #jsonUL a { display: block; font-size: 20px; font-weight: 400; color: #2d2d2e; }
#Sitemap #jsonUL a * { display: inline-block; line-height: 170%; font-size: 16px; vertical-align: top; }
/* ==========================================================================
   (Buttons )
========================================================================== */a.btn-primary {display: inline-flex;align-items: center;justify-content: center;gap: 12px;padding: 12px 30px;background: linear-gradient(135deg, #b6c46b 0%, #afbe57 45%, #9daf43 100%);color: #fff !important;font-size: 15px;font-weight: 900;border-radius: 999px;transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),box-shadow 0.6s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;box-shadow: 0 10px 25px rgba(68,182,89,0.25);text-decoration: none;position: relative;overflow: hidden;z-index: 10;}
a.btn-primary.mt-40 { margin-top: 40px; }
a.btn-primary.mt-20 { margin-top: 20px; }
a.btn-primary.mt-10 { margin-top: 10px; }
a.btn-primary .btn-dot {width: 36px;height: 36px;border-radius: 40% 60% 70% 30%/40% 50% 60% 50%;background: #fff;display: flex;align-items: center;justify-content: center;color: #9daf43;transition: transform 0.6s cubic-bezier(0.16,1,0.3,1),border-radius 0.6s cubic-bezier(0.16,1,0.3,1),background-color 0.4s ease;}
a.btn-primary .btn-dot i { font-size: 14px; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
a.btn-primary:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(68,182,89,0.35); }
a.btn-primary:hover .btn-dot { transform: translateX(6px) scale(1.05); border-radius: 50%; background: #f9fcf9; margin-right: 2px; }
a.btn-primary:hover .btn-dot i { transform: translateX(2px); }
.centerJbox { display: flex; flex-direction: column; align-items: center; justify-content: center; }
a.btn-text-link { display: inline-flex; align-items: center; gap: 8px; color: #96a699; font-weight: 700; font-size: 14px; transition: color 0.4s ease; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; position: relative; z-index: 10; }
.btn-text-link i { transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.btn-text-link:hover { color: #44b659; }
.btn-text-link:hover i { transform: translateX(6px); }
/* header */
header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999999; }
header >.nowrap_box { margin: 0 auto; width: 90%; }
header #cis img {margin: 5px 0;width: 100%;object-fit: contain;}
.headerfixed #cis:before { height: 0; }
header #menubtn {position: fixed;width: 25px;height: 20px;display: inline-block;top: 26.5px;right: 20px;}
header #menubtn span {position: absolute;width: 100%;height: 2px;background: #758832;display: block;top: 0;right: 0;}
header #menubtn[data-type="1"] span:nth-child(2) { top: calc(50% - 1px); }
header #menubtn[data-type="1"] span:nth-child(3) { top: calc(100% - 1px); }
header #menubtn[data-type="1"] span { transition: transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1); }
header #menubtn[data-type="2"] span { background: #454545; transition: .4s cubic-bezier(.645,.045,.355,1); }
header #menubtn[data-type="2"] span:nth-child(1) { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
header #menubtn[data-type="2"] span:nth-child(2) { opacity: 0; }
header #menubtn[data-type="2"] span:nth-child(3) { top: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
header #webmenu .menu_box >ul { text-align: right; }
header #webmenu .menu_box >ul >li >p a { padding: 0 15px; display: block; font-size: 18px; color: #252525; }
header #webmenu .menu_box >ul >li .menu_body .subOption li { position: relative; overflow: hidden; }
header #webmenu .menu_box >ul >li .menu_body .subOption li >div a { padding: 15px; display: block; color: #252525; }
header #webmenu .contact_box { padding: 50px 20px; }
header #webmenu .contact_box p { margin-top: 2px; }
header #webmenu .contact_box p a { color: #999; }
header #webmenu .contact_box .community { margin: 30px 0; padding-top: 30px; border-top: 1px #e0e0e0 solid; text-align: center; }
header #webmenu .contact_box .community a { margin: 0 15px; width: 40px; height: 40px; background: #f3f3f3; border-radius: 50%; display: inline-block; text-align: center; line-height: 38px; color: #999; }
header #menubg { position: fixed; width: 100vw; height: 100vh; background: rgb(0 0 0/.4); display: none; top: 0; left: 0; opacity: 998; }
header #menubg[data-type="2"] { display: block; }
header.headerfixed { background: #fff; border-bottom: 1px #ccc solid; transition: all 0.5s ease 0.1s; }
header.headerfixed #menubtn span { background: #454545; }
/* header_bar */
#header_bar { position: fixed; padding: 10px 20px; background: #fff; border-radius: 50px; box-shadow: 0 0 5px rgb(0 0 0/.3); bottom: 20px; left: calc((100% - 260px)/2); z-index: 999; }
#header_bar a { padding: 0 0 0 15px; }
#header_bar a >svg { width: 20px; height: 20px; fill: #2b2b2b; }
#header_bar a#openform { position: relative; margin-right: 5px; padding: 0 20px 0 0; }
#header_bar a#openform:after { position: absolute; width: 1px; height: 12px; background: #ccc; top: 50%; right: 0; transform: translateY(-50%); content: ""; }
/* top_search */
#top_search { overflow: hidden; position: fixed; width: 100%; height: 0; background: #f3f3f3; text-align: center; opacity: 0; top: 0; left: 0; z-index: 999; }
#top_search svg { width: 25px; height: 25px; }
#top_search #close_search { position: absolute; top: 30px; right: 30px; }
#top_search #close_search svg { width: 18px; height: 18px; }
#top_search form { padding: 0 20px 6px; border-bottom: 2px #494949 solid; display: inline-block; }
#top_search form input { padding: 5px 0; width: 480px; background: none; font-size: 20px; }
#top_search #goSearch { padding: 0 10px; }
/* footer */
#site-footer {background: #5f9ead;color: #fff;padding: 40px 0 40px;text-align: center;border-radius: 0;margin-top: 0;position: relative;z-index: 20;}
#site-footer .footer-wrap{
    display: grid;
    grid-template-columns: 20% 80%;
    padding: 0;
}
#site-footer .footer-wrap #fnav{grid-column: 1 / -1;}
#site-footer .footer-logo {margin-bottom: 0;display: inline-block;}
#site-footer .footer-left {display: flex;flex-direction: column;align-items: center;justify-content: center;}
#site-footer #fnav .workframe {display: flex;gap: 10px;justify-content: flex-end;padding: 20px 15px 21px;border-radius: 20px 20px 0 0;flex-wrap: wrap;}
#site-footer #fnav .workframe a {color: #ffffff;}
#site-footer #fnav .workframe a:hover { color: white; }
#site-footer .footer-logo img {height: 90px;width: auto;filter: brightness(0) invert(1);}
#site-footer .footer-company {font-size: 18px;font-weight: 700;margin-bottom: 10px;letter-spacing: 0.1em;color: #87c995;}
#site-footer .footer-info {display: flex;flex-direction: column;gap: 12px;margin-bottom: 5px;color: #cde0d1;font-size: 15px;align-items: center;}
#site-footer .footer-info p {margin: 0;/* border: rgb(231 231 231/33%) 1px solid; */padding: 0;border-radius: 8px;line-height: 1;margin: 0;display: flex;}
#site-footer .footer-info p a {width: 100%;color: #f8f8f8;padding: 7px 10px;display: flex;align-items: center;}
#site-footer .footer-info p a:hover{
    color: #ffffff;
}
#site-footer .footer-info p.address a{font-size: 1.7rem;font-weight: 600;gap: 10px;}
#site-footer .footer-info .dowlist{
    display: grid;
    grid-column: 1 / -1;
    padding: 10px 0 0;
    grid-template-columns: 60% 37%;
    gap: 3%;
}
#site-footer .footer-info .dowlist .rightdobox{
    display: flex;
    gap: 10px;
}
#site-footer .footer-info .dowlist .rightdobox a{padding: 4px 3px;width: 33.3%;display: flex;flex-direction: column;align-items: center;border: aliceblue 1px solid;border-radius: 66px;justify-content: center;color: white;}
#site-footer .footer-info .dowlist .rightdobox a:hover{background: #396f7c;}
#site-footer .footer-info p.address svg{fill:white;width: 40px;}
#site-footer .footer-info .footer-info-top {width: 100%;display: grid;grid-template-columns: repeat(3,1fr);gap: 5px;}
#site-footer .footer-info span { font-weight: 700; color: #fff; }
#site-footer .footer-info small { display: block; margin-top: 20px; font-size: 13px; color: #96a699; line-height: 1.8; }
#site-footer .footer-info small a { color: #44b659; text-decoration: none; border-bottom: 1px solid #44b659; padding-bottom: 2px; transition: all 0.3s; margin: 0 4px; }
#site-footer .footer-info small a:hover { color: #87c995; border-bottom-color: #87c995; }
#site-footer .copyright {color: rgba(255,255,255,0.3);font-size: 12px;font-weight: 500;letter-spacing: 0.05em;padding-top: 0;text-align: center;display: flex;align-items: center;}
#site-footer .copyright p {text-align: center;line-height: 1;}
#site-footer .copyright p a { font-size: 13px; }
#site-footer .fooicond{display:flex;align-items: center;margin-top: 10px;padding-top: 10px;border-top: 1px solid rgba(255, 255, 255, 0.1);justify-content: space-between;}
#site-footer .dooicon{display:flex;}
#site-footer .dooicon a{display:flex;}
#site-footer .dooicon a:hover svg{
    fill: white;
}
#site-footer .dooicon svg{width: 30px;height: 30px;fill: #f2f2f2;}
/* gotop */
#gotop { position: fixed; right: 20px; bottom: 20px; z-index: 1001; }
#gotop a { width: 50px; height: 50px; border: 2px #c2c2c2 solid; border-radius: 50%; display: block; text-align: center; }
#gotop a svg { margin: 15px 0; width: 20px; height: 20px; fill: #c2c2c2; }
#gotop[data-type="2"] a { border-color: #84c491; }
/* webSeo */
#webSeo { position: relative; overflow: hidden; margin-top: 40px; padding: 10px 0; }
#webSeo .js-marquee-wrapper *,#webSeo .js-marquee *,#webSeo .seo * { font-family: 'Noto Serif','Noto Serif TC','Noto Serif SC',serif; font-size: 13px; color: #959595; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SeoStarRating */
#SeoStarRating font { margin-right: 5px; display: inline-block; vertical-align: bottom; }
#SeoStarRating font:first-child { line-height: 130%; font-weight: bold; font-size: 18px; color: #FF9800; }
#SeoStarRating font:nth-child(2) { font-size: 16px; color: #FF9800; }
#SeoStarRating font:last-child { color: #383838; }
#contact_area { padding: 70px 0 0px; text-align: center; position: relative; z-index: 5566; display: flex; }
#contact_area .cta-wrap { width: 100%; margin: 0 auto; background: #fff; padding: 80px 50px; border-radius: 60px; box-shadow: 0 25px 60px rgba(44,51,45,0.05); border: 1px solid rgba(68,182,89,0.1); position: relative; overflow: hidden; z-index: 5; }
#contact_area .cta-wrap::before { content: ''; position: absolute; left: -50px; top: -50px; width: 200px; height: 200px; background: #eef8f1; border-radius: 40% 60% 70% 30%/40% 50% 60% 50%; z-index: 0; opacity: 0.6; }
#contact_area .cta-content { position: relative; z-index: 2; display: grid; grid-template-columns: 30% 40% 30%; }
#contact_area .common-sec-title.mb-20 { margin-bottom: 0; }
#contact_area .cta-desc { color: #626e64; font-size: 18px; line-height: 1.8; margin-bottom: 0; max-width: 600px; margin-left: auto; margin-right: auto; }
#contact_area .workframe { display: flex; flex-direction: column; align-items: center; }

#contact_area:before{content:"";position: absolute;width: 100%;height: 120px;background: #5f9ead;bottom: 0;}

/* fab-container  (Floating Action Buttons) */
.fab-container {position: fixed;right: 10px;bottom: 30px;display: flex;flex-direction: column;gap: 15px;z-index: 9999;transform: translateY(65px);transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
.fab-container.is-active { transform: translateY(0); }
.fab-container .fab-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);
    text-decoration: none;
    border: 2px solid rgb(255 255 255/48%);
    outline: none;
    background: #6d3595;
    background: linear-gradient(135deg, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    }
.fab-container .fab-btn.f-fb{background:#43519e;}
.fab-container .fab-btn svg {fill: white;width: 20px;height: 20px;}
.fab-container .fab-btn.fab-top {background: #a9b956;}
.fab-container .fab-btn.fab-top svg {fill: #a9b956;stroke: white;}
.fab-container .fab-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,0.25); color: #fff; }
.fab-container .fab-phone {background-color: #3e3d41;border-color: #4f4f53;}
.fab-container .fab-line {background: #06C755;border-color: #319c5d;}
.fab-top { background-color: #1a1a1a; border-color: rgba(255,255,255,0.2); opacity: 0; pointer-events: none; transition: opacity 0.4s ease,transform 0.3s ease; }
.fab-top:hover {background-color: #7bdaff;border-color: #7bdaff;}
.fab-container.is-active .fab-top { opacity: 1; pointer-events: auto; }




@media screen and (min-width:1281px) {
  .scale_box:hover .img_box_cover img { -webkit-transform: scale(1.05); transform: scale(1.05); }
  header { padding: 10px 0; }
  header.headerfixed { padding: 0; }
  header .row {width: 250px;display: inline-block;}
  header #webmenu {margin: 0 0 0 50px;width: calc(100% - 270px);}
  header #menubtn,header #webmenu .menu_box ul b,header #webmenu .contact_box { display: none; }
  header #webmenu .menu_box >ul >li { position: relative; overflow: hidden; display: inline-block; }
  header #webmenu .menu_box >ul >li >p a {line-height: 70px;color: #232323;}
  header #webmenu .menu_box >ul >li:last-child a {background: #9daf43;border-radius: 666px;padding: 10px 25px;line-height: 1;color: white;margin-left: 20px;box-shadow: 0px 1px 9px 2px rgb(104 114 56 / 33%);margin: 10px;}
  header #webmenu .menu_box >ul >li >p a:hover {color: #9daf43;}
  header #webmenu .menu_box >ul >li:last-child a:hover{
    background: #839332;
    color: white;
}
  header.headerfixed #webmenu .menu_box >ul >li >p a { color: #252525; }
  header.headerfixed #webmenu .menu_box >ul >li:last-child a{color: white;}
  header #webmenu .menu_box >ul >li .menu_body,header #webmenu .menu_box >ul >li .subOption li ul { position: absolute; width: 170px; left: calc(50% - 85px); z-index: 1; opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  header #webmenu .menu_box >ul >li .subOption { background: #fff; box-shadow: 0 0 5px rgb(0 0 0/.2); }
  header #webmenu .menu_box >ul >li .subOption li ul { background: #f3f3f3; box-shadow: none; top: 0; left: 170px; -webkit-transform: translateY(0); -webkit-transform: translateX(30px); transform: translateY(0); transform: translateX(30px); }
  header #webmenu .menu_box >ul >li .subOption li ul.sub3Option { background: #dbdbdb; }
  header #webmenu .menu_box >ul >li:last-child .menu_body { left: auto; right: 0; }
  header #webmenu .menu_box >ul >li:last-child .subOption li ul { left: auto; right: 170px; }
  header #webmenu .menu_box >ul >li:hover,header #webmenu .menu_box >ul >li .subOption >li:hover,header #webmenu .menu_box >ul >li .sub2Option >li:hover { overflow: visible; }
  header #webmenu .menu_box >ul >li:hover .menu_body { padding-top: 1px; z-index: 10; opacity: 1; transform: translateY(0); }
  header #webmenu .menu_box >ul >li .subOption li:hover ul.sub2Option,header #webmenu .menu_box >ul >li .subOption li ul.sub2Option li:hover ul.sub3Option { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@media screen and (max-width:1470px) {
  .workframe,header >.nowrap_box {width: 95%;padding: 0 10px;}
  header #webmenu .menu_box >ul >li p a { padding: 0 10px; }
  header{
    padding: 6px 0;
}
}
@media screen and (max-width:1280px) {
  header #cis {text-align: center;display: flex;justify-content: flex-start;padding-right: 8vw;margin-right: 0;margin-left: 0;width: 350px;}
  header #webmenu {overflow: hidden;position: fixed;width: 350px;background: #fff;top: 0;left: -400px;box-shadow: 0 0 10px rgb(0 0 0/.3);z-index: 999;margin-left: 0;}
  header #webmenu .menu_box {overflow-y: scroll;margin: 71px 15px 0px;padding-top: 20px;height: calc(100vh - 70px);width: 100%;}
  header #webmenu .menu_box::-webkit-scrollbar { width: 0; }
  header #webmenu .menu_box >ul >li >p,header #webmenu .menu_box ul li .menu_body ul li .bo { position: relative; }
  header #webmenu .menu_box >ul >li b { position: absolute; width: 23px; display: inline-block; text-align: center; color: #252525; top: calc((100% - 27px)/2); right: 0; }
  header #webmenu .menu_box >ul >li >p a { padding: 15px 25px 15px 15px; display: block; font-weight: 300; font-size: 20px; }
  header #webmenu .menu_box ul li .menu_body,header #webmenu .menu_box ul li .menu_body >ul li .sub2Option,header #webmenu .menu_box ul li .menu_body >ul li .sub3Option { margin-bottom: 15px; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
  header #webmenu .menu_box >ul >li .menu_body .subOption li >div a { padding: 10px 25px 10px 30px; color: #3fb35e; }
  header #webmenu .menu_box >ul >li .menu_body .subOption li .sub3Title a { padding: 5px 25px 5px 40px; color: #777; }
  header #webmenu .menu_box >ul >li .menu_body .sub3Option { margin: 0 40px; padding: 5px; background: #f3f3f3; }
  header #webmenu .menu_box >ul >li .menu_body .sub3Option li >div a { padding: 5px; font-size: 14px; color: #666; }
}
@media screen and (max-width:1024px) {
  #site-footer .footer-info .dowlist{display:flex;flex-direction: column;gap: 15px;}
  #site-footer .footer-info .dowlist .rightdobox a{padding:10px 10px;}
  #contact_area {padding: 20px 0 5px;}
  #contact_area .cta-content { display: flex; flex-direction: column; gap: 20px; }
  #contact_area .cta-wrap { padding: 25px 20px; border-radius: 20px; }
  #site-footer { border-radius: 0; margin-top: 0; padding: 40px 0 40px; }
  #site-footer .footer-info .footer-info-top { display: flex; flex-direction: column; }
}
@media screen and (max-width:768px) {
  #contact_area .cta-wrap { padding: 60px 30px; border-radius: 40px; }
  .fab-container { right: 20px; bottom: 20px; transform: translateY(55px); gap: 10px; }
  .fab-container.is-active {transform: translateY(0);right: 8px;bottom: 8px;}
  #site-footer .footer-wrap{display:flex;flex-direction: column;width: 90%;gap: 10px;}
  #site-footer .footer-info p.address a{font-size: 1.5rem;}
}
@media screen and (max-width:640px) {
  header #cis{width: 280px;}
  #top_search form input { width: calc(70vw - 50px); }
   #site-footer #fnav .workframe{padding:0;display: flex;justify-content: flex-start;} 
  a.btn-primary{padding: 12px 20px;}
}
@media screen and (max-width:480px) {
  .common-sec-title .tw-title.text-32 { font-size: 26px; }
  #contact_area .cta-desc { font-size: 15px; }
  #site-footer .footer-info span,#site-footer .footer-info p a { font-size: 15px; }
  #gotop { bottom: 70px; }
  #gotop a { width: 40px; height: 40px; }
  #gotop a svg { margin: 13px 0; width: 15px; height: 15px; }
  #site-footer .footer-wrap { width: min(345px,90%); margin-bottom: 20px; }
  #site-footer .footer-info p.address a { font-size: 1rem; }
  #site-footer .footer-logo img { height: 80px; }
  #site-footer .copyright { display: flex; flex-direction: column; align-items: flex-start; }
  #site-footer .fooicond { width: min(345px,90%); }
}
@media screen and (max-width:400px) {
  header #webmenu {width: 100%;}
}