@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=Montserrat:wght@100;200;300;400;500;600;700;800&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Noto+Serif+TC:wght@200;300;400;500;600&family=Noto+Serif:wght@400;700&display=swap');
@font-face { font-family: "Trajan Pro 3"; src: url("/fonts/Trajan/trajan.eot"); src: url("/fonts/Trajan/trajan.eot?#iefix") format("embedded-opentype"),url("/fonts/Trajan/trajan.woff2") format("woff2"),url("/fonts/Trajan/trajan.woff") format("woff"),url("/fonts/Trajan/trajan.ttf") format("truetype"),url("/fonts/Trajan/trajan.svg#Trajan Pro 3") format("svg"); }
* { 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: 'Montserrat','Noto Sans TC','Noto Sans SC',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;}
.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; }
/* ==========================================================================
   背景共用裝飾元件 (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 36px 12px 14px; background: #44b659; 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; }
.btn-primary.mt-40 { margin-top: 40px; }
.btn-primary.mt-20 { margin-top: 20px; }
.btn-primary.mt-10 { margin-top: 10px; }
.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: #44b659; 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 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(68,182,89,0.35); }
.btn-primary:hover .btn-dot { transform: translateX(6px) scale(1.05); border-radius: 50%; background: #f9fcf9; }
.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 36px 12px 14px; background: linear-gradient(135deg,#3fb35e 0%,#6bd67f 45%,#f2dd22 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: #44b659; 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; }
.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: 180px; height: 60px; object-fit: contain; }
header #cis:before { content: ""; position: absolute; width: 18vw; height: 89px; background: #ffffff; top: 0; left: 0; z-index: -1; border-radius: 0 0 30px 0; }
header.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: #fff; 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: #213024;color: #fff;padding: 180px 0 10px;text-align: center;border-radius: 60px 60px 0 0;margin-top: -150px;position: relative;z-index: 20;}
#site-footer .footer-logo {margin-bottom: 0;display: inline-block;}
#site-footer .footer-left { display: flex; flex-direction: column; align-items: center; }
#site-footer #fnav .workframe { display: flex; gap: 10px; justify-content: center; padding: 25px 15px 21px; background: linear-gradient(180deg,rgb(78 192 109/44%) 0%,rgb(64 171 84/28%) 45%,rgb(49 102 61/0%) 100%); border-radius: 20px 20px 0 0; flex-wrap: wrap; }
#site-footer #fnav .workframe a { color: #dcf3e1; }
#site-footer #fnav .workframe a:hover { color: white; }
#site-footer .footer-logo img { height: 75px; 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: 10px; border-radius: 8px; }
#site-footer .footer-info p a { width: 100%; }
#site-footer .footer-info .footer-info-top { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
#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;border-top: 1px solid rgba(255,255,255,0.1);padding-top: 10px;text-align: center;}
#site-footer .copyright p { text-align: center; }
#site-footer .copyright p a { font-size: 13px; }
/* 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; }



/* 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 svg {fill: white;width: 20px;height: 20px;}
.fab-container .fab-btn.fab-top {background: #30623b;}
.fab-container .fab-btn.fab-top svg {fill: #0036a0;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 (max-width:1500px) {
  .workframe,header >.nowrap_box {width: 95%;padding: 0 10px;}
  header #webmenu .menu_box >ul >li p a { padding: 0 10px; }
}
@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: 180px; display: inline-block; }
  header #webmenu { margin: 0 0 0 50px; width: calc(100% - 230px); }
  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: #eaeaea; }
  header #webmenu .menu_box >ul >li:last-child a {background: #44b659;border-radius: 666px;padding: 10px 25px;line-height: 1;color: white;}
  header #webmenu .menu_box >ul >li >p a:hover { color: #ffffff; }
  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:1280px) {
  header #cis {text-align: center;display: flex;justify-content: flex-start;padding-right: 8vw;}
  header #cis:before {left: 0;right: auto;border-radius: 0 0 30px 0;width: 58vw;height: 70px;border-radius: 0 0 30px 0;}
  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) {
  #contact_area { padding: 20px 0 60px; }
  #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); }

}
@media screen and (max-width:640px) {
  #top_search form input { width: calc(70vw - 50px); }
}
@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; }
}
@media screen and (max-width:400px) {
  header #webmenu {width: 100%;}
}